/* FORGE — blueprint edition.
   Motion grammar: every section is a drawing sheet. JS writes two scroll-driven vars per sheet:
   --d (0→1) inks the line work, --f (0→1) moves the scan line that fills it solid. */
:root {
  --paper: #0A1F38;
  --paper-2: #0D2745;
  --grid: rgba(190, 222, 255, .07);
  --grid-major: rgba(190, 222, 255, .13);
  --line: #BFE0FF;
  --ink: #EEF6FF;
  --dim: #86A9CF;
  --ember: #FF6B2C;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink); font: 400 clamp(16px, 1.1vw, 18px)/1.55 var(--sans);
  overflow-x: hidden;
}
a { color: inherit; }
.mono { font-family: var(--mono); letter-spacing: .04em; }
.muted { color: var(--dim); }
.small { font-size: .85em; }
.ember, em { color: var(--ember); }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.01em; }
h2 { font-size: clamp(2.4rem, 6vw, 5.2rem); }
h2 em, h1 em { font-style: italic; }

/* ---------- line work: stroke-dash ink driven by --d ---------- */
.dr { overflow: visible; }
.dr :is(path, line, rect, circle, polyline) {
  fill: none; stroke: var(--line); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 1 1;
  /* each shape starts later by its index --i (set in JS) */
  stroke-dashoffset: clamp(0, calc(1 - (var(--d, 0) * 1.8 - var(--i, 0) * .05)), 1);
}
.dr [stroke-dasharray] { stroke-dasharray: 1 1; }
.dr text { font: 500 11px var(--mono); letter-spacing: .08em; fill: var(--dim); }

/* the scan line that sweeps down each sheet as --f goes 0→1 */
.scan {
  position: absolute; left: 0; right: 0; top: calc(var(--f, 0) * 100%); height: 2px; pointer-events: none;
  background: var(--ember); box-shadow: 0 0 18px 2px rgba(255, 107, 44, .55);
  opacity: calc(min(var(--f, 0), 1 - var(--f, 0)) * 12); z-index: 3;
}
/* outlined type that fills top-down with --f */
.outline {
  color: transparent; -webkit-text-stroke: 1px var(--line);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat top / 100% calc(var(--f, 0) * 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- frame chrome ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 28px;
  padding: 14px var(--gut); border-bottom: 1px solid var(--grid-major);
  background: rgba(10, 31, 56, .82); backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.15rem var(--sans); letter-spacing: .12em; color: var(--line); }
.brand small { font-size: .62rem; color: var(--dim); letter-spacing: .1em; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: .78rem; }
.nav-links a, .nav-index a { text-decoration: none; color: var(--dim); transition: color .2s; }
.nav-links a:hover, .nav-index a:hover { color: var(--ink); }
.nav-index { display: none; margin-left: auto; font-size: .78rem; position: relative; }
.nav-index summary { cursor: pointer; list-style: none; border: 1px solid var(--line); padding: 6px 12px; }
.nav-index div { position: absolute; right: 0; top: 120%; display: grid; gap: 10px; padding: 16px; min-width: 190px; background: var(--paper-2); border: 1px solid var(--line); }

.ruler {
  position: fixed; left: 0; top: 0; bottom: 0; width: 14px; z-index: 15; pointer-events: none;
  border-right: 1px solid var(--grid-major);
  background: repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 12px) left / 6px 100% no-repeat,
              repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 60px) left / 12px 100% no-repeat;
  opacity: .6;
}
.ruler-mark { position: absolute; left: 0; width: 14px; height: 2px; background: var(--ember); top: calc(var(--p, 0) * 100%); box-shadow: 0 0 10px var(--ember); }
.readout {
  position: fixed; left: 28px; bottom: 14px; z-index: 15; display: flex; gap: 18px; font-size: .7rem; color: var(--dim);
  pointer-events: none; padding: 6px 10px; background: rgba(10, 31, 56, .8); border: 1px solid var(--grid-major);
}
.readout .ro-sheet { color: var(--ember); }

.xhair { display: none; }
@media (hover: hover) and (pointer: fine) {
  body { cursor: crosshair; }
  .xhair { display: block; position: fixed; inset: 0; z-index: 30; pointer-events: none; }
  .xh-x, .xh-y { position: absolute; background: rgba(191, 224, 255, .22); }
  .xh-x { left: 0; right: 0; height: 1px; top: var(--y, -10px); }
  .xh-y { top: 0; bottom: 0; width: 1px; left: var(--x, -10px); }
  .xh-read { position: absolute; left: calc(var(--x, -200px) + 12px); top: calc(var(--y, -200px) + 12px); font-size: .66rem; color: var(--line); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border: 1px solid var(--ember);
  background: var(--ember); color: #1A0A02; font: 600 1rem var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform .15s, background .2s, color .2s;
}
.btn small { font-size: .68rem; opacity: .75; }
.btn:hover { background: transparent; color: var(--ember); }
.btn-ghost { background: transparent; color: var(--line); border-color: var(--line); }
.btn-ghost:hover { background: var(--line); color: var(--paper); }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.press:active { transform: translateY(2px); }
.text-link { font-size: .8rem; color: var(--dim); text-decoration: none; border-bottom: 1px dashed var(--dim); }
.text-link:hover { color: var(--ink); }
:focus-visible { outline: 2px dashed var(--ember); outline-offset: 3px; }

/* ---------- sheets ---------- */
.sheet { position: relative; padding: clamp(90px, 12vw, 160px) var(--gut) clamp(60px, 8vw, 110px) calc(var(--gut) + 14px); }
.sheet + .sheet { border-top: 1px solid var(--grid-major); }
.sheet-head { max-width: 1100px; margin-bottom: clamp(36px, 5vw, 64px); }
.sheet-head > .mono, .tag { display: block; font-size: .72rem; color: var(--ember); margin-bottom: 18px; }
.sheet-head p { margin-top: 18px; max-width: 62ch; }

/* 01 hero: 260vh track with a sticky stage */
.hero { height: 260vh; padding: 0; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 3vw;
  padding: 80px var(--gut) 40px calc(var(--gut) + 14px);
}
.hero-title { font-size: clamp(3.2rem, 7.4vw, 7.6rem); display: grid; margin: 4px 0 26px; }
.hero-sub { max-width: 46ch; color: var(--dim); }
.hero-sub b { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 30px 0 18px; }
.hero-note { font-size: .68rem; color: var(--dim); }
.hero-note code { color: var(--line); }
.scroll-hint { position: absolute; left: 50%; bottom: 60vh; translate: -50%; font-size: .7rem; color: var(--dim); opacity: calc(1 - var(--d, 0) * 4); }

.drawing { position: relative; margin: 0; width: min(100%, 85vh); aspect-ratio: 640 / 620; justify-self: center; container-type: inline-size; }
.drawing > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* the phone outline draws itself on load; everything else waits for scroll */
.phone-lines :is(rect, line, circle), .traced > * { animation: ink 2.2s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); stroke-dashoffset: 1; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.dims line, .leaders polyline { stroke: var(--dim); }
.dim-t, .call { opacity: clamp(0, calc(var(--d, 0) * 2.4 - .5), 1); }
.call { fill: var(--line) !important; }
.phone-fill {
  /* exactly the SVG screen rect: x184 y24 w252 h552 rx30 in the 640x620 drawing */
  position: absolute; left: 28.75%; top: 3.871%; width: 39.375%; height: 89.032%; border-radius: 11.9% / 5.43%;
  container-type: inline-size; background: #13110F; color: #F4EEE8; padding: 13cqw 6cqw 0; font: 500 2.2cqw/1.3 var(--sans);
  display: grid; align-content: start; gap: 4.5cqw; overflow: hidden;
  clip-path: inset(0 0 calc((1 - var(--f, 0)) * 100%) 0);
}
.s-nav { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; height: 13cqw; border-radius: 7cqw; background: #1F1B18; display: grid; place-items: center; }
.s-nav i { width: 10cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ember); }
.s-top { display: flex; justify-content: space-between; align-items: center; }
.s-eyebrow { font: 500 3.2cqw var(--mono); color: #A69C92; letter-spacing: .06em; }
.s-title { font: 400 10cqw/1 var(--serif); }
.s-title b, .s-eyebrow.ember { color: var(--ember); }
.s-avatar { width: 11cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ember); color: #1A0A02; display: grid; place-items: center; font-weight: 600; }
.s-hero { display: flex; justify-content: space-between; align-items: center; background: #1F1B18; border-radius: 6cqw; padding: 5cqw; }
.s-kcal { font: 400 11cqw/1.1 var(--serif); }
.s-kcal small { font: 3.4cqw var(--mono); color: #A69C92; }
.s-chip { display: inline-block; font: 3.2cqw var(--mono); background: rgba(255, 107, 44, .15); color: var(--ember); padding: 1cqw 3cqw; border-radius: 9cqw; }
.s-ring { width: 30cqw; rotate: -90deg; }
.s-ring circle { fill: none; stroke: #2E2925; stroke-width: 9; }
.s-ring .arc { stroke: var(--ember); stroke-dasharray: 264; stroke-dashoffset: calc(264 - 158 * var(--f, 0)); stroke-linecap: round; }
.s-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5cqw; }
.s-macros div { background: #1F1B18; border-radius: 4cqw; padding: 3cqw; display: grid; }
.s-macros span { font: 2.8cqw var(--mono); color: #A69C92; }
.s-macros b { font: 400 8cqw var(--serif); }
.s-meal { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; background: #1F1B18; border-radius: 4.5cqw; padding: 3.4cqw 4cqw; font-size: 3.8cqw; }
.s-meal b { font: 400 6.5cqw var(--serif); }
.s-meal.ghost { background: none; border: 1px dashed #4A423C; color: #A69C92; }
.drawing .scan { left: -4%; right: -4%; top: calc(3.871% + var(--f, 0) * 89.032%); }

/* statement */
.statement { padding-block: clamp(90px, 14vw, 200px); }
.big-note { font: 400 clamp(2rem, 4.6vw, 4.4rem)/1.12 var(--serif); max-width: 22ch; }

/* 02 parts list */
.bom { list-style: none; padding: 0; border-top: 1px solid var(--line); max-width: 1180px; }
.bom li {
  display: grid; grid-template-columns: 56px 48px minmax(180px, 1fr) 1.6fr; gap: 12px 28px; align-items: start; position: relative;
  padding: 26px 0; opacity: clamp(.12, calc(var(--d, 0) * 2.2 - var(--r, 0) * .16), 1);
  translate: calc((1 - clamp(0, calc(var(--d, 0) * 2.2 - var(--r, 0) * .16), 1)) * -40px) 0;
}
/* each row's rule draws left→right */
.bom li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left;
  scale: clamp(0, calc(var(--d, 0) * 2.2 - var(--r, 0) * .16), 1) 1;
}
.bom .no { color: var(--ember); font-size: .8rem; padding-top: 6px; }
.glyph { width: 38px; height: 38px; }
.bom h3 { font: 500 clamp(1.2rem, 1.7vw, 1.5rem)/1.2 var(--sans); }
.bom p { color: var(--dim); max-width: 60ch; }
.bom b { color: var(--ink); font-weight: 500; }

/* 03 survey grid — cells come from assemble.mjs (.state .ut .n h3 p) */
.survey { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-left: 1px solid var(--grid-major); border-top: 1px solid var(--grid-major); }
.state {
  position: relative; padding: 18px 16px 20px; border-right: 1px solid var(--grid-major); border-bottom: 1px solid var(--grid-major); min-height: 170px;
  --k: clamp(0, calc(var(--d, 0) * 2 - var(--r, 0) * .025), 1);
  opacity: calc(.15 + var(--k) * .85);
}
.state::before { /* corner registration marks draw in */
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  background:
    linear-gradient(var(--line), var(--line)) top left / calc(var(--k) * 14px) 1px no-repeat,
    linear-gradient(var(--line), var(--line)) top left / 1px calc(var(--k) * 14px) no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right / calc(var(--k) * 14px) 1px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right / 1px calc(var(--k) * 14px) no-repeat;
}
.state .ut { font: 500 .62rem var(--mono); letter-spacing: .1em; color: var(--dim); }
.state .n { font: 400 2.8rem/1.1 var(--serif); color: var(--ember); margin: 8px 0 4px; }
.state h3 { font: 500 1rem/1.25 var(--sans); }
.state p { font-size: .8rem; color: var(--dim); margin-top: 6px; }
.state:hover { background: rgba(255, 107, 44, .07); }

/* 04 tolerance */
.accuracy { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.accuracy .muted { margin: 22px 0 30px; }
.gauge { width: 100%; max-width: 440px; }
.gauge .warn { fill: var(--ember); }
.acc-demo { border: 1px solid var(--line); padding: clamp(20px, 3vw, 34px); display: grid; gap: 16px; background: rgba(13, 39, 69, .7); position: relative; }
.acc-demo::before { content: 'FIG. 4'; position: absolute; top: -9px; left: 18px; padding: 0 8px; background: var(--paper); font: .66rem var(--mono); color: var(--dim); }
.acc-demo label { font-size: .72rem; color: var(--dim); }
.acc-row { display: flex; gap: 10px; }
.acc-row input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 1.1rem var(--sans); padding: 10px 2px; }
.acc-row input:focus { outline: none; border-color: var(--ember); }
.acc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: transparent; border: 1px dashed var(--dim); color: var(--dim); padding: 6px 12px; font: .8rem var(--mono); cursor: pointer; }
.chip:hover { border-color: var(--ink); color: var(--ink); border-style: solid; }
.acc-out { min-height: 3.2em; font-size: .85rem; color: var(--dim); border-top: 1px dashed var(--grid-major); padding-top: 14px; }
.acc-out.ok { color: #9BE8B0; }
.acc-out.bad { color: var(--ember); }

/* 05 section cut */
.sec-wrap { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.rings { width: 100%; position: sticky; top: 110px; }
.rings .core { stroke: var(--ember); fill: rgba(255, 107, 44, calc(var(--f, 0) * .9)); }
.layers { list-style: none; padding: 0; display: grid; gap: 4px; }
.layers li { padding: 20px 0 22px; border-bottom: 1px dashed var(--grid-major); opacity: clamp(.2, calc(var(--d, 0) * 2 - var(--r, 0) * .15), 1); }
.layers b { font-size: .78rem; color: var(--ember); letter-spacing: .08em; }
.layers p { margin-top: 8px; color: var(--dim); }

/* 06 assembly */
.tabs { display: flex; margin-bottom: 30px; border: 1px solid var(--line); width: fit-content; }
.tabs button { background: transparent; border: 0; color: var(--dim); padding: 10px 20px; font: .8rem var(--mono); cursor: pointer; }
.tabs [aria-selected="true"] { background: var(--line); color: var(--paper); }
.steps { list-style: none; padding: 0 0 0 44px; counter-reset: s; max-width: 760px; position: relative; }
.steps::before { /* connector draws down with --d */
  content: ''; position: absolute; left: 15px; top: 8px; width: 1px; height: calc(var(--d, 0) * (100% - 16px)); background: var(--ember);
}
.steps li { counter-increment: s; position: relative; padding: 0 0 34px; }
.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: -44px; top: 0; width: 31px; height: 31px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); font: .72rem var(--mono); color: var(--line);
}
.steps a { color: var(--ember); }
.install .small { max-width: 70ch; }

/* 07 notes */
.faq details { border-bottom: 1px solid var(--grid-major); max-width: 900px; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; font: 500 1.2rem var(--sans); display: flex; gap: 22px; align-items: baseline; }
.faq summary::after { content: '+'; margin-left: auto; font-family: var(--mono); color: var(--ember); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary .mono { color: var(--ember); font-size: .75rem; }
.faq details p { padding: 0 0 22px 50px; color: var(--dim); max-width: 70ch; }

/* 08 title block */
.footer { padding-bottom: 90px; }
.title-block { width: 100%; max-width: 1100px; border-collapse: collapse; font-size: .78rem; margin-bottom: 26px; }
.title-block td { border: 1px solid var(--line); padding: 12px 14px; color: var(--ink); }
.title-block td:nth-child(odd) { color: var(--dim); width: 12%; font-size: .66rem; }
.tb-big { font: 400 clamp(4rem, 14vw, 12rem)/.9 var(--serif) !important; letter-spacing: -.02em; }
.footer .small { max-width: 1100px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-index { display: block; }
  .nav .btn { display: none; }
  .hero { height: 200vh; }
  .hero-stage { grid-template-columns: 1fr; align-content: start; padding-top: 86px; gap: 20px; }
  .hero-copy { order: 1; }
  .drawing { order: 0; width: min(100%, 36vh); }
  .hero-title { font-size: clamp(2.6rem, 11vw, 4.4rem); margin-bottom: 14px; }
  .hero-sub { font-size: .95rem; }
  .hero-cta { margin: 18px 0 10px; }
  .scroll-hint { display: none; }
  .accuracy, .sec-wrap { grid-template-columns: 1fr; }
  .rings { position: static; max-width: 320px; }
  .bom li { grid-template-columns: 40px 34px 1fr; }
  .bom p { grid-column: 3; }
  .readout .ro-title { display: none; }
}
@media (max-width: 560px) {
  .brand small { display: none; }
  .hero-note { display: none; }
  .survey { grid-template-columns: repeat(2, 1fr); }
  .state { min-height: 150px; }
  .faq details p { padding-left: 0; }
  .readout { display: none; }
  .title-block td:nth-child(odd) { width: auto; }
}
@media (max-height: 700px) and (max-width: 980px) { .drawing { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet, .drawing, .survey { --d: 1 !important; --f: 1 !important; }
  .hero { height: auto; }
  .hero-stage { position: static; height: auto; min-height: 100vh; }
  .phone-lines :is(rect, line, circle), .traced > * { animation: none; stroke-dashoffset: 0; }
  .scan { display: none; }
}