/* =====================================================================
   ForX — forx.dev
   Design system: riso duotone on warm oat paper, coordinate-field layout.
   Signature: the f(x) spine — a curve that leaves the wordmark's X and
   plots down through four numbered gates to a launched (green) output.
   ===================================================================== */

:root{
  /* ---- palette ---- */
  --paper:#EFEAE0;          /* warm oat substrate */
  --paper-2:#E7E1D4;        /* faint deeper paper for banded sections */
  --panel:#E4DDCE;          /* card / panel fill */
  --ink:#17233F;            /* deep indigo — text + structure */
  --ink-2:#31405E;          /* softer ink for secondary text */
  --flux:#F0561D;           /* riso orange — the curve, the live variable */
  --flux-ink:#B23A12;       /* deeper orange, contrast-safe for small text */
  --launched:#0E8F6E;       /* riso green — verified / launched / output */
  --launched-ink:#0A7659;   /* deeper green for small text */
  --faint:#635E4D;          /* warm gray — mono meta, coordinates (AA on paper) */

  --hairline:rgba(23,35,63,.10);
  --hairline-strong:rgba(23,35,63,.17);
  --paper-rgb:239,234,224;

  /* ---- type ---- */
  --disp:"Space Grotesk", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --wordmark: clamp(3rem, 11vw, 9.5rem);

  /* ---- rhythm ---- */
  --grid: 34px;                          /* plotter grid pitch */
  --gutter: clamp(24px, 6vw, 120px);     /* page side inset */
  --axis-x: max(6vw, 88px);              /* x of the vertical page axis */
  --section-pad: clamp(84px, 11vw, 172px);
  --maxw: 1320px;

  --ease-snap: cubic-bezier(.2,.9,.25,1.15);
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem, .55rem + .6vw, 1.14rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--flux);color:var(--paper);}

/* =====================================================================
   Coordinate-field substrate (fixed ambient instrument bezel)
   ===================================================================== */
.field{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px),
    linear-gradient(var(--hairline-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-strong) 1px, transparent 1px);
  background-size:
    var(--grid) var(--grid),
    var(--grid) var(--grid),
    calc(var(--grid)*5) calc(var(--grid)*5),
    calc(var(--grid)*5) calc(var(--grid)*5);
  background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(150% 130% at 50% 26%, #000 52%, transparent 100%);
          mask-image:radial-gradient(150% 130% at 50% 26%, #000 52%, transparent 100%);
}
/* the vertical page axis */
.axis{
  position:fixed;
  top:0; bottom:0;
  left:var(--axis-x);
  width:1px;
  background:var(--ink);
  opacity:.14;
  z-index:1;
  pointer-events:none;
}

/* =====================================================================
   Layout primitives
   ===================================================================== */
.stage{position:relative; z-index:2;}
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-pad); position:relative;}
.section--band{background:var(--paper-2);}
.section--tight{padding-block:clamp(56px,7vw,104px);}

.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.6rem;
}
.eyebrow::before{
  content:"";
  width:clamp(20px,3vw,44px);
  height:1px;
  background:var(--flux);
  display:inline-block;
  flex:none;
}
.eyebrow b{color:var(--ink); font-weight:500;}

.h2{
  font-family:var(--disp);
  font-weight:500;
  font-size:clamp(1.9rem, 1rem + 3.2vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.02em;
  max-width:18ch;
}
.lede{
  font-size:clamp(1.05rem, .8rem + .8vw, 1.35rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:56ch;
  margin-top:1.4rem;
}
.muted{color:var(--ink-2);}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  font-family:var(--body);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.005em;
  padding:.95rem 1.6rem;
  border-radius:3px;
  border:1.5px solid var(--ink);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  white-space:nowrap;
  transition:transform .16s var(--ease-out), background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.btn .arrow{transition:transform .2s var(--ease-snap);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(23,35,63,.20);}
.btn-secondary{background:transparent; color:var(--ink);}
.btn-secondary:hover{background:rgba(23,35,63,.06); transform:translateY(-2px);}
.btn-ghost{border-color:transparent; padding-inline:.4rem;}
.btn-ghost:hover{color:var(--flux-ink);}
.btn-on-ink{border-color:var(--paper); color:var(--paper);}
.btn-on-ink.btn-primary{background:var(--flux); border-color:var(--flux); color:var(--ink);}
.btn-on-ink.btn-primary:hover{box-shadow:0 10px 26px rgba(240,86,29,.35);}
.btn:focus-visible{outline:3px solid var(--flux); outline-offset:3px;}
a:focus-visible, button:focus-visible{outline:3px solid var(--flux); outline-offset:3px; border-radius:2px;}

.cta-row{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:2.4rem;}

/* =====================================================================
   Top bar
   ===================================================================== */
.topbar{
  position:absolute; top:0; left:0; right:0;
  z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) var(--gutter);
  max-width:var(--maxw); margin-inline:auto;
}
.brand{
  font-family:var(--disp); font-weight:700; font-size:1.35rem;
  letter-spacing:-.02em; text-decoration:none; color:var(--ink);
}
.brand .x{color:var(--flux-ink);}
.nav{display:flex; gap:2rem; align-items:center;}
.nav a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  transition:color .2s;
}
.nav a:hover{color:var(--flux-ink);}
.nav .nav-cta{
  color:var(--ink); border-bottom:1.5px solid var(--flux); padding-bottom:2px;
}
.nav-toggle{display:none;}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:12vh var(--gutter) 8vh;
  max-width:var(--maxw); margin-inline:auto;
  position:relative;
}
.meta{
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-bottom:2.2rem;
}
.meta .node{
  width:7px;height:7px;border-radius:50%;background:var(--flux);
  box-shadow:0 0 0 4px rgba(240,86,29,.14);
}
.meta .sep{opacity:.4;}

.transform{display:flex; align-items:baseline;}
.wordmark{
  font-family:var(--disp); font-weight:700;
  font-size:var(--wordmark); line-height:.9;
  letter-spacing:-.035em; color:var(--ink);
  display:inline-flex; align-items:baseline; white-space:nowrap;
}
.wm-for{display:inline-block;}
.wm-gap{display:inline-block; width:.26em; transition:width .5s var(--ease-snap);}
.wordmark.resolved .wm-gap{width:0;}
.wm-slot{
  position:relative; display:inline-block; text-align:left;
  min-width:var(--slot-w, 8.4em);
  transition:min-width .55s var(--ease-snap);
}
.wordmark.resolved .wm-slot{min-width:0;}
.wm-var{color:var(--flux-ink); display:inline;}
.wm-var.snap{display:inline-block; animation:snapIn .42s var(--ease-snap) both;}
@keyframes snapIn{
  0%{transform:scale(1.26) translateY(-.02em); opacity:.5;}
  55%{transform:scale(.95);}
  100%{transform:scale(1); opacity:1;}
}
.caret{
  display:inline-block; width:.58ch; height:.8em; margin-left:.06em;
  transform:translateY(.03em); background:var(--flux);
  animation:blink 1.05s steps(1) infinite;
}
.caret.hard{animation:none; opacity:1;}
.caret.gone{display:none;}
@keyframes blink{50%{opacity:0;}}

.plot-label{
  font-family:var(--mono); font-size:.72rem; color:var(--faint);
  letter-spacing:.03em; margin-top:1.5rem;
  display:flex; gap:1.5rem; flex-wrap:wrap;
}
.plot-label b{color:var(--ink); font-weight:500;}
.plot-label .out{color:var(--launched-ink);}

.subhead{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.35rem, 1rem + 1.6vw, 2.15rem); line-height:1.14;
  letter-spacing:-.015em; margin:2.4rem 0 1.1rem; max-width:20ch;
}
.support{font-size:clamp(1.02rem,.9rem+.5vw,1.2rem); line-height:1.58; max-width:52ch; color:var(--ink-2);}
.support strong{color:var(--ink); font-weight:600;}

.scroll-hint{
  position:absolute; bottom:2.4rem; left:var(--gutter);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:.7rem;
  opacity:0; transition:opacity .6s ease .3s;
}
.scroll-hint.show{opacity:1;}
.scroll-hint .rail{width:1px; height:36px; background:var(--faint); opacity:.5; position:relative; overflow:hidden;}
.scroll-hint .rail::after{
  content:""; position:absolute; left:0; top:-40%;
  width:1px; height:40%; background:var(--flux);
  animation:railrun 1.9s ease-in-out infinite;
}
@keyframes railrun{0%{top:-40%;}100%{top:110%;}}

/* =====================================================================
   THE f(x) SPINE  (SVG overlay across the transform region)
   ===================================================================== */
.spine-region{position:relative; z-index:1;}
.spine-region > section{position:relative; z-index:1;}
.spine-wrap{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible;}
#spine{position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible;}
.spine-ghost{fill:none; stroke:var(--ink); stroke-width:1; stroke-dasharray:2 7; opacity:.14;}
.spine-path{fill:none; stroke:var(--flux); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;}
.spine-path.tail{stroke:var(--launched);}
.gate-ring{fill:var(--paper); stroke:var(--ink); stroke-width:1.6; transition:stroke .4s, fill .4s;}
.gate-ring.done{stroke:var(--flux);}
.gate-ring.launched{stroke:var(--launched); fill:var(--launched);}
.gate-num{font-family:var(--mono); font-size:13px; font-weight:500; fill:var(--ink); text-anchor:middle; dominant-baseline:central;}
.gate-coord{font-family:var(--mono); font-size:11px; fill:var(--faint); letter-spacing:.02em;}
.head-dot{fill:var(--flux); stroke:var(--paper); stroke-width:2;}

/* the gates region: sequence of stages the curve plots through */
.gates{position:relative;}
.gates .wrap{position:relative;}
.gate{
  min-height:64vh;
  display:flex; align-items:center;
  padding-block:2vh;
}
.gate__inner{max-width:min(34rem, 58%);}
.gate__tag{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); display:flex; gap:.6rem; align-items:center;
  margin-bottom:1rem;
}
.gate__tag .idx{color:var(--flux-ink); font-weight:500;}
.gate__title{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.6rem, 1rem + 2.4vw, 2.7rem); line-height:1.08;
  letter-spacing:-.02em; margin-bottom:1rem;
}
.gate__body{color:var(--ink-2); max-width:40ch; margin-bottom:1.3rem;}
.gate__list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem;}
.gate__list li{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.02em;
  color:var(--ink-2); border:1px solid var(--hairline-strong);
  padding:.32rem .6rem; border-radius:2px; background:rgba(var(--paper-rgb),.5);
}
.gate--launched .gate__title{color:var(--launched-ink);}
.gate--launched .gate__tag .idx{color:var(--launched-ink);}

/* reveal-on-scroll — only hidden when JS is confirmed running (progressive enhancement) */
html.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
html.js .reveal.in{opacity:1; transform:none;}

/* =====================================================================
   Positioning strip
   ===================================================================== */
.strip{border-block:1px solid var(--hairline-strong);}
.strip .wrap{display:flex; flex-wrap:wrap; gap:.6rem 2.4rem; padding-block:1.4rem; align-items:center;}
.strip .lbl{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.strip .item{
  font-family:var(--disp); font-weight:500; font-size:clamp(.95rem,.8rem+.4vw,1.15rem);
  color:var(--ink); display:inline-flex; align-items:center; gap:.9rem;
}
.strip .item::before{content:"+"; color:var(--flux-ink); font-family:var(--mono);}

/* =====================================================================
   Packages
   ===================================================================== */
.pkg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr)); gap:14px; margin-top:3rem;}
.pkg{
  background:var(--paper); border:1px solid var(--hairline-strong); padding:1.9rem 1.5rem;
  display:flex; flex-direction:column; min-height:18.5rem;
  transition:background .25s, border-color .25s, transform .2s var(--ease-out);
}
.pkg:hover{background:var(--panel); border-color:var(--ink); transform:translateY(-3px);}
.pkg--feature{background:var(--ink); color:var(--paper);}
.pkg--feature:hover{background:#1d2c4d;}
.pkg__idx{font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.1em; margin-bottom:1.4rem;}
.pkg--feature .pkg__idx{color:rgba(239,234,224,.6);}
.pkg__name{font-family:var(--disp); font-weight:500; font-size:1.35rem; letter-spacing:-.01em; margin-bottom:.5rem;}
.pkg__pos{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--flux-ink); margin-bottom:1rem; text-transform:uppercase;}
.pkg--feature .pkg__pos{color:var(--flux);}
.pkg__desc{font-size:.98rem; line-height:1.55; color:var(--ink-2); margin-bottom:1.4rem;}
.pkg--feature .pkg__desc{color:rgba(239,234,224,.82);}
.pkg__cta{margin-top:auto; font-family:var(--body); font-weight:600; font-size:.95rem; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;}
.pkg__cta .arrow{transition:transform .2s var(--ease-snap);}
.pkg__cta:hover .arrow{transform:translateX(4px);}
.pkg__cta{color:var(--flux-ink);}
.pkg--feature .pkg__cta{color:var(--flux);}
.pkg-note{font-family:var(--mono); font-size:.74rem; color:var(--faint); margin-top:1.6rem; line-height:1.6; max-width:70ch;}

/* =====================================================================
   Who we serve
   ===================================================================== */
.serve-core{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem;}
.serve-core .tag{
  font-family:var(--disp); font-weight:500; font-size:clamp(1rem,.85rem+.5vw,1.35rem);
  border:1px solid var(--ink); border-radius:100px; padding:.5rem 1.2rem; color:var(--ink);
  transition:background .2s,color .2s;
}
.serve-core .tag:hover{background:var(--ink); color:var(--paper);}
.serve-more{margin-top:1.6rem; font-size:.98rem; color:var(--ink-2); max-width:60ch;}
.serve-more .tag2{color:var(--ink); font-weight:600;}

/* =====================================================================
   Why ForX + process
   ===================================================================== */
.why-grid{display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,5rem); margin-top:2.6rem; align-items:start;}
@media(min-width:860px){.why-grid{grid-template-columns:1.1fr .9fr;}}
.why-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column;}
.why-list li{padding:1.1rem 0; border-bottom:1px solid var(--hairline-strong); display:flex; gap:1rem;}
.why-list li:first-child{border-top:1px solid var(--hairline-strong);}
.why-list .mk{font-family:var(--mono); color:var(--flux-ink); font-size:.9rem; flex:none;}
.why-list .tx{font-size:1.02rem; line-height:1.5;}
.why-list .tx b{font-family:var(--disp); font-weight:500;}
.process{background:var(--panel); border:1px solid var(--hairline-strong); padding:1.8rem;}
.process h3{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:1.2rem;}
.process ol{list-style:none; counter-reset:step; padding:0; margin:0;}
.process li{counter-increment:step; display:flex; gap:1rem; padding:.7rem 0;}
.process li::before{content:counter(step,decimal-leading-zero); font-family:var(--mono); color:var(--flux-ink); font-size:.8rem; padding-top:.15rem;}
.process .st{font-family:var(--disp); font-weight:500; font-size:1.05rem;}
.process .sd{color:var(--ink-2); font-size:.92rem; line-height:1.45;}

/* =====================================================================
   Work
   ===================================================================== */
.work-grid{display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:2.8rem;}
@media(min-width:760px){.work-grid{grid-template-columns:1.4fr 1fr 1fr; grid-auto-rows:1fr;}}
.work-card{border:1px solid var(--hairline-strong); background:var(--panel); padding:1.6rem; display:flex; flex-direction:column; min-height:15rem;}
.work-card--feature{grid-row:span 1; background:var(--ink); color:var(--paper);}
@media(min-width:760px){.work-card--feature{grid-row:span 1;}}
.work-card .kind{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:auto;}
.work-card--feature .kind{color:var(--flux);}
.work-card .wt{font-family:var(--disp); font-weight:500; font-size:1.3rem; margin-top:1.4rem;}
.work-card .wd{color:var(--ink-2); font-size:.95rem; margin-top:.5rem; line-height:1.5;}
.work-card--feature .wd{color:rgba(239,234,224,.8);}
.work-card--empty{border-style:dashed; background:transparent; align-items:flex-start; justify-content:center; color:var(--faint);}

/* =====================================================================
   CTA band + Final CTA (dark)
   ===================================================================== */
.audit{background:var(--paper-2); border-block:1px solid var(--hairline-strong);}
.audit .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem;}
.audit h2{font-family:var(--disp); font-weight:500; font-size:clamp(1.5rem,1rem+2vw,2.4rem); letter-spacing:-.02em; max-width:20ch;}
.audit p{color:var(--ink-2); margin-top:.6rem; max-width:46ch;}

.final{background:var(--ink); color:var(--paper); position:relative; overflow:hidden;}
.final .wrap{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center;}
.final .eyebrow{color:rgba(239,234,224,.6); justify-content:center;}
.final .eyebrow::before{background:var(--flux);}
.final h2{font-family:var(--disp); font-weight:500; font-size:clamp(2rem,1rem+4vw,4rem); letter-spacing:-.025em; line-height:1.02; max-width:16ch;}
.final p{color:rgba(239,234,224,.78); margin-top:1.2rem; max-width:44ch;}
.final .cta-row{justify-content:center;}
.final .fx-mark{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;}
.final .fx-node{position:absolute; right:8%; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:.8rem; color:var(--launched); display:flex; align-items:center; gap:.6rem;}
.final .fx-node .dot{width:10px;height:10px;border-radius:50%; background:var(--launched); box-shadow:0 0 0 5px rgba(14,143,110,.25);}

/* =====================================================================
   Footer
   ===================================================================== */
.footer{background:#111b30; color:rgba(239,234,224,.72); padding-block:clamp(48px,6vw,80px);}
.footer .wrap{display:grid; grid-template-columns:1fr; gap:2.4rem;}
@media(min-width:760px){.footer .wrap{grid-template-columns:1.4fr 1fr 1fr;}}
.footer .brand{color:var(--paper); font-size:1.6rem; display:inline-block; margin-bottom:.7rem;}
.footer .tagline{color:rgba(239,234,224,.6); max-width:34ch;}
.footer h3{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(239,234,224,.6); margin-bottom:1rem; font-weight:500;}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem;}
.footer a{color:rgba(239,234,224,.82); text-decoration:none; transition:color .2s;}
.footer a:hover{color:var(--flux);}
.footer .disclaimer{grid-column:1/-1; border-top:1px solid rgba(239,234,224,.16); padding-top:1.6rem; margin-top:.6rem; font-family:var(--mono); font-size:.72rem; line-height:1.7; color:rgba(239,234,224,.62); max-width:100ch;}
.footer .legalrow{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between; font-family:var(--mono); font-size:.72rem; color:rgba(239,234,224,.62);}

/* =====================================================================
   Utilities
   ===================================================================== */
.vh{position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* =====================================================================
   Subpages — compact hero, prose, forms
   ===================================================================== */
.page-hero{padding:clamp(120px,18vh,190px) 0 clamp(36px,5vw,64px); position:relative;}
.page-title{font-family:var(--disp); font-weight:700; font-size:clamp(2.3rem,1.2rem+4.6vw,4.4rem); line-height:1.02; letter-spacing:-.03em; max-width:18ch; color:var(--ink);}
.page-title .fx{color:var(--flux-ink);}
.page-hero .lede{margin-top:1.3rem;}

.prose{max-width:70ch; color:var(--ink-2);}
.prose h2{font-family:var(--disp); font-weight:500; font-size:1.6rem; letter-spacing:-.01em; color:var(--ink); margin:2.4rem 0 .8rem;}
.prose h3{font-family:var(--disp); font-weight:500; font-size:1.2rem; color:var(--ink); margin:1.8rem 0 .6rem;}
.prose p{margin:0 0 1rem;}
.prose ul{margin:0 0 1rem; padding-left:1.2rem;}
.prose li{margin-bottom:.4rem;}
.prose .mono{font-family:var(--mono); font-size:.85em; color:var(--faint);}

/* form kit — class names prefixed f- (.field is taken by the grid substrate) */
.form{display:flex; flex-direction:column; gap:1.6rem; max-width:46rem;}
.form fieldset{border:1px solid var(--hairline-strong); background:rgba(var(--paper-rgb),.6); padding:1.5rem clamp(1rem,3vw,1.8rem) 1.1rem; margin:0; border-radius:3px;}
.form legend{font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding:0 .55rem;}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem;}
.f-field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem;}
.f-field > label{font-family:var(--disp); font-weight:500; font-size:.98rem; color:var(--ink);}
.f-field .hint{font-size:.82rem; color:var(--faint);}
.f-field input, .f-field select, .f-field textarea{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1.5px solid rgba(23,35,63,.32); border-radius:3px; padding:.68rem .85rem; width:100%;
}
.f-field textarea{min-height:6.5rem; resize:vertical;}
.f-field input:focus-visible, .f-field select:focus-visible, .f-field textarea:focus-visible{outline:3px solid var(--flux); outline-offset:1px; border-color:var(--ink);}
.choices{display:flex; flex-wrap:wrap; gap:.55rem;}
.choice{position:relative; display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(23,35,63,.32); border-radius:100px; padding:.42rem .95rem; cursor:pointer; font-size:.95rem; color:var(--ink-2); background:var(--paper); transition:background .15s,color .15s,border-color .15s;}
.choice input{position:absolute; opacity:0; pointer-events:none;}
.choice:hover{border-color:var(--ink);}
.choice:has(input:checked){background:var(--ink); color:var(--paper); border-color:var(--ink);}
.choice:has(input:focus-visible){outline:3px solid var(--flux); outline-offset:2px;}
.form .submit-row{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}
.form .fineprint{font-family:var(--mono); font-size:.72rem; color:var(--faint); line-height:1.6; max-width:60ch;}
@media(max-width:640px){ .f-grid{grid-template-columns:1fr;} }

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:820px){
  .nav{display:none;}
  .nav.open{display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem;
    position:fixed; top:74px; right:16px; z-index:30;
    background:var(--paper); border:1px solid var(--hairline-strong);
    padding:1.3rem 1.5rem; box-shadow:0 14px 34px rgba(23,35,63,.16); border-radius:4px;}
  .nav.open a{font-size:.9rem;}
  .nav-toggle{display:inline-flex;}
  /* the plotting spine needs a clear right lane; retire it where content is full-width */
  .spine-wrap{display:none;}
  .scroll-hint{display:none;}
  .gate__inner{max-width:100%;}
  .gate{min-height:auto; padding-block:5.5vh; border-top:1px solid var(--hairline-strong);}
  .gate__tag .idx{font-size:1rem;}
  .hero{min-height:auto; padding-top:22vh; padding-bottom:12vh;}
}
@media(max-width:640px){
  :root{ --wordmark: clamp(2.4rem, 12vw, 4rem); }
  .plot-label{gap:.6rem 1.2rem;}
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
/* Scoped under html:not(.force-motion) so the ?motion=1 preview override
   (set by forx.js) can re-enable animation on OS-reduced-motion machines. */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion){scroll-behavior:auto;}
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
  html:not(.force-motion) .reveal{opacity:1; transform:none;}
  html:not(.force-motion) .caret{animation:none;}
  html:not(.force-motion) .scroll-hint .rail::after{animation:none;}
  html:not(.force-motion) .meta .node{box-shadow:none;}
}