/* site.css - the shared skin of fabricai.art.
 * Extracted verbatim from index.html's inline <style> at S021, when the
 * single page became four. One stylesheet, every page; per-page rules ride
 * along because splitting them buys nothing at this size. */
  /* ===================================================================== */
  /*  THE BRAND — taken from giladkenan.art, not invented here.            */
  /*                                                                       */
  /*  The studio's language is a BLUEPRINT: deep navy grounds, Klein blue  */
  /*  structure, one warm filament accent, paper-white ink. AiAD wore    */
  /*  near-black and gold, which was a different house entirely.           */
  /*                                                                       */
  /*  THE TOKEN NAMES BELOW DO NOT CHANGE — only their values did.         */
  /*  239 consumers across this file read --bg/--fg/--gold/--serif/etc.    */
  /*  Renaming definitions is one edit; renaming 239 consumers is a diff   */
  /*  with no user-visible benefit and real regression risk. That is       */
  /*  giladkenan.art's own ruling on this exact question, and it applies.  */
  /*  New work should prefer the house names: --void --ink --klein         */
  /*  --filament --display --ui --mono.                                    */
  /* ===================================================================== */
  :root{
    /* — house palette, verbatim from giladkenan.art — */
    --void:#041A4B; --void2:#071F50; --void3:#06245E; --panel-blue:#0A2B66;
    --blueprint:#0B2FA6; --klein:#3D5AFE; --klein-lift:#8FA0FF; --cyan:#BFD0FF;
    --filament:#E9B872;
    --ink:#EEF0F7; --ink2:#A7ADC4; --ink3:#858AA3;
    --hair:rgba(237,239,246,.11); --hair2:rgba(237,239,246,.22);
    --focus:#8FA0FF;
    --sheet-top:#0C39C4; --sheet-bot:#06248C; --sheet-line:rgba(191,208,255,.9);
    --card-grad:linear-gradient(155deg,#0A2B66,#041A4B);
    --shadow:0 24px 60px -28px rgba(0,0,0,.75);

    /* — this page's existing names, repointed at the house palette — */
    --bg:var(--void); --bg2:var(--void2); --panel:var(--void3); --panel2:var(--panel-blue);
    --line:var(--hair); --line2:var(--hair2);
    --fg:var(--ink); --muted:var(--ink2); --muted2:var(--ink3);
    --gold:var(--filament); --gold-bright:#F2C98A; --gold-dim:rgba(233,184,114,.15);
    --blue:var(--klein-lift);
    /* status, not brand: the roadmap's "live today" marker. The house palette
       has no green because the studio never needed one. Cooled to sit in navy. */
    --green:#7ED9A6;

    /* — type: house stacks, under this page's names.
       The fallbacks are load-bearing: if type.css ever 404s, an unresolved
       var() makes the custom property guaranteed-invalid and every consumer
       loses its font-family entirely. Naming the stack twice costs nothing
       and turns a blank-typeface page into a merely unstyled one. — */
    --serif:var(--display, 'Bodoni Moda', Georgia, serif);
    --sans:var(--ui, 'Space Grotesk', system-ui, -apple-system, sans-serif);
    --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --maxw:1140px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--gold-dim);color:var(--fg)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  canvas{display:block}

  /* film grain + vignette over everything */
  body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:200;
    background:radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%);mix-blend-mode:multiply}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

  /* ---------- progress thread (the "AiAD" through-line) ---------- */
  #thread{position:fixed;left:max(14px,3vw);top:0;width:1px;height:100vh;z-index:60;
    background:linear-gradient(180deg,transparent,var(--line2) 12%,var(--line2) 88%,transparent)}
  #thread .fill{position:absolute;left:-1px;top:0;width:3px;height:0;border-radius:2px;
    background:linear-gradient(180deg,var(--gold),var(--gold-bright));box-shadow:0 0 12px rgba(216,196,154,.5)}
  #thread .bead{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--gold-bright);
    box-shadow:0 0 14px var(--gold-bright);transition:top .1s linear}
  @media(max-width:680px){#thread{display:none}}

  /* ---------- nav ---------- */
  nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,5vw,48px);transition:background .4s ease,backdrop-filter .4s ease,border-color .4s;
    border-bottom:1px solid transparent}
  nav.solid{background:rgba(4,26,75,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
  .logo{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:.01em;display:flex;align-items:center;gap:9px}
  .logo .spark{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 3.5s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{font-size:12.5px;letter-spacing:.04em;color:var(--muted);transition:color .25s}
  .nav-links a:hover{color:var(--fg)}
  .nav-cta{font-size:12.5px;letter-spacing:.03em;color:var(--gold);border:1px solid var(--line2);
    padding:8px 17px;border-radius:30px;transition:border-color .25s,background .25s}
  .nav-cta:hover{border-color:var(--gold);background:var(--gold-dim)}
  /* WIDTH IS THE WRONG QUESTION FOR A PHONE HELD SIDEWAYS. It is 844px wide,
     so the 760px collapse never fired, and seven links 20px tall stayed on
     screen for a thumb that needs 44. Height catches what width misses: no
     phone in any orientation is taller than 500px AND wider than 760px. */
  @media(max-width:760px),(max-height:500px){.nav-links a:not(.nav-cta){display:none}}
  /* and whatever survives the collapse has to be thumb-sized on a touch
     screen. Scoped to pointer:coarse on purpose — a mouse does not need 44px,
     and forcing it on a desk would put a 44px box around a 21px wordmark. */
  @media(pointer:coarse){
    .logo,.nav-cta,.nav-links a{min-height:44px;display:inline-flex;align-items:center}
  }

  /* GILAD'S SIGNATURE. The only first-person line on the site, so it is set
     apart from the tagline beside it — mono, letterspaced, quieter than the
     wordmark and warmer than the legal text. */
  .foot-credit{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    color:var(--muted2);display:block;width:100%;text-align:center;
    margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .foot-credit::before{content:'\2726';color:var(--gold);margin-inline-end:9px;opacity:.8}
  /* HIS RULE, 2026-09-03: "Gilad Kenan in white linked to giladkenan.art,
     Brother Claude orange with link to Claude's website, fabworks pale blue
     linked to fabworks.com." The footer said the same sentence as the welcome
     card and said it in flat grey with no links at all, on twenty pages. Same
     three colours in both places now, so the credit reads as one credit. */
  .foot-credit a{text-decoration:none;border-bottom:1px solid transparent;
    transition:color .18s ease,border-color .18s ease}
  .foot-credit .fcGilad{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
  .foot-credit .fcGilad:hover{border-bottom-color:#fff}
  .foot-credit .fcClaude{color:#D97757;border-bottom-color:rgba(217,119,87,.55)}
  .foot-credit .fcClaude:hover{color:#E8926F}
  .foot-credit .fcFw{color:#8FB6FF;border-bottom-color:rgba(143,182,255,.5)}
  .foot-credit .fcFw:hover{color:#B6D0FF}

  /* ---------- reveal animation ---------- */
  .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}

  /* ---------- shared type ---------- */
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
  h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.04}
  .display{font-size:clamp(40px,8vw,92px)}
  .h-sec{font-size:clamp(30px,5.2vw,58px);line-height:1.06}
  .lede{font-size:clamp(17px,2.1vw,22px);color:var(--muted);font-weight:300;line-height:1.62;max-width:60ch}
  .body{font-size:clamp(15px,1.7vw,17px);color:var(--muted);line-height:1.7;max-width:58ch}
  em{font-style:italic;color:var(--fg);font-family:var(--serif)}
  .gold{color:var(--gold)}

  section{position:relative;z-index:2}
  .pad{padding:clamp(90px,13vh,170px) 0}

  /* ================= HERO ================= */
  #hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
  #hero .aura{position:absolute;top:38%;left:50%;width:120vw;height:80vh;transform:translate(-50%,-50%);
    background:radial-gradient(closest-side, rgba(216,196,154,.10), transparent 70%);pointer-events:none;filter:blur(20px)}
  .hero-inner{position:relative;z-index:3}
  .hero-mark{font-family:var(--serif);font-weight:300;font-size:clamp(56px,13vw,150px);line-height:.92;letter-spacing:-.03em}
  .hero-mark .dot{color:var(--gold)}
  .aiad{margin:30px 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px}
  .aiad .word{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,3.4vw,40px);color:var(--fg)}
  .aiad .word b{font-weight:400;font-style:normal;color:var(--gold)}
  .hero-sub{margin-top:30px;max-width:54ch}
  .hero-cta-row{margin-top:46px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .btn{font-family:var(--sans);font-size:14px;letter-spacing:.02em;font-weight:400;padding:15px 28px;border-radius:34px;
    cursor:pointer;border:1px solid transparent;transition:transform .12s,opacity .25s,border-color .25s,background .25s;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-gold{background:var(--gold);color:#1a1712;font-weight:500}
  .btn-gold:hover{opacity:.92}
  .btn-ghost{border-color:var(--line2);color:var(--fg)}
  .btn-ghost:hover{border-color:var(--gold);background:var(--gold-dim)}
  .scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
    font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--muted2);text-transform:uppercase;
    display:flex;flex-direction:column;align-items:center;gap:10px}
  .scroll-hint .ln{width:1px;height:36px;background:linear-gradient(180deg,var(--gold),transparent);animation:drip 2.2s ease-in-out infinite}
  @keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* ================= PARADIGM (CAD → AiAD) ================= */
  .cadbox{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,5vw,60px);align-items:center;margin-top:60px}
  @media(max-width:760px){.cadbox{grid-template-columns:1fr;gap:34px}}
  .cadcard{border:1px solid var(--line);border-radius:18px;padding:34px 30px;background:var(--panel);position:relative}
  .cadcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:18px}
  .cadcard .acr{font-family:var(--serif);font-size:clamp(34px,5vw,52px);line-height:1;margin-bottom:8px}
  .cadcard .acr small{font-size:.42em;color:var(--muted);letter-spacing:0;display:block;margin-top:14px;font-family:var(--sans);line-height:1.5}
  .cadcard.next{border-color:var(--gold-dim);background:linear-gradient(180deg,rgba(216,196,154,.05),var(--panel))}
  .cadcard.next .acr{color:var(--gold)}
  .arrow{font-size:30px;color:var(--gold);text-align:center}
  @media(max-width:760px){.arrow{transform:rotate(90deg)}}

  /* ---------- three columns ---------- */
  .three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:60px}
  @media(max-width:820px){.three-col{grid-template-columns:1fr;gap:34px}}
  .tc-n{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.2em;margin-bottom:18px}
  .tc-h{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:12px;letter-spacing:-.01em}
  .tc-b{font-size:14.5px;color:var(--muted);line-height:1.65}
  .tc{padding-top:22px;border-top:1px solid var(--line)}

  /* ---------- split (teacher) ---------- */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,68px);margin-top:54px;align-items:start}
  @media(max-width:880px){.split{grid-template-columns:1fr;gap:40px}}
  .moat{margin-top:34px;border-left:2px solid var(--gold);padding:4px 0 4px 22px}
  .moat-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .moat p{font-size:15px;color:var(--fg);line-height:1.66;max-width:50ch}
  .transcript{background:#0a0a0d;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .tr-head{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
  .tr-head .dot{width:10px;height:10px;border-radius:50%}
  .tr-head .dot.r{background:#E0726A}.tr-head .dot.y{background:var(--filament)}.tr-head .dot.g{background:var(--green)}
  .tr-title{font-family:var(--mono);font-size:11px;color:var(--muted2);margin-left:10px;letter-spacing:.02em}
  .tr-body{padding:20px 18px;font-family:var(--mono);font-size:13px;line-height:2.05;position:relative}
  .tr-line{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tr-line.dim{color:var(--muted2)}
  .tr-k{color:var(--gold);display:inline-block;min-width:62px}
  .tr-c{color:var(--muted2)}
  .tr-cursor{color:var(--gold);animation:blink 1.1s step-end infinite}
  @keyframes blink{50%{opacity:0}}
  .tr-caption{font-size:13px;color:var(--muted2);margin-top:16px;line-height:1.6;font-style:italic;font-family:var(--serif)}

  /* ---------- 3D stage · THE TECHNICAL SHEET ----------
   * It used to be a black rectangle with a dark object low in it, on a navy
   * page — which reads as a viewer that failed to load, not as a piece being
   * shown. Gilad, looking at exactly that: "id like what was trying to happen
   * in the black screen but it didnt how it suppose to."
   *
   * It is a drawing now: header rule, ruled inner border, a LIVE badge and a
   * title block, the same furniture giladkenan.art/about puts around the Tri Pi
   * sheet. The frame is HTML — only the geometry is WebGL — so it is crisp at
   * any density, readable with the canvas still loading, and costs nothing to
   * draw.
   *
   * cqw units, not vw: the sheet is sized by ITS OWN width, so the type stays
   * in proportion inside a 400px phone column and a 820px figure alike. */
  /* A SHEET HAS A PAGE'S PROPORTION. Full-bleed, this was 1423x522 — a 2.7:1
     letterbox against the studio's own 1.35:1 sheet — and in a band that wide a
     drawing reads small, the drafting grid runs off both sides, and the title
     block sits a screen away from the piece it labels. Bounded to a page width
     and centred, it is a drawing ON something instead of a strip ACROSS
     something. 980px is the widest that still leaves the figure margins on a
     1440px desk. */
  .sheet-fig{margin:0}
  .stage-shell{position:relative;margin:38px auto 0;max-width:980px;
    border:1px solid var(--line2);border-radius:16px;
    overflow:hidden;container-type:inline-size;
    background:#0B2FA6;box-shadow:0 40px 100px rgba(0,0,0,.55)}
  .sheet-tag{padding:10px 14px;font-family:var(--mono);
    font-size:clamp(6.5px,1.72cqw,9.5px);letter-spacing:.22em;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;color:#BFD0FF;background:#0A2890;
    border-bottom:1px solid rgba(191,217,255,.14)}
  .sheet-body{position:relative}
  /* aspect-ratio, not a height: the drawing keeps its proportion from a 375px
     phone to a 980px desk, which is what stops the piece being squashed into a
     slot on one and lost in a field on the other. The height clamp survives as
     a floor and a ceiling only. */
  #stage{width:100%;aspect-ratio:16/11;min-height:340px;max-height:min(620px,72vh);
    touch-action:pan-y;background:#0B2FA6;transition:background .8s ease}
  /* THE RULED BORDER IS DRAWN, NOT NUDGED. Inset by the same 1.25%/1.667% the
     studio's sheet SVG uses, so the two sites' drawings sit in the same margin. */
  .sheet-rule{position:absolute;left:1.25%;top:1.667%;width:97.5%;height:96.667%;
    border:1px solid rgba(191,217,255,.34);pointer-events:none;
    opacity:0;transition:opacity .7s ease}
  .sheet-rule.on{opacity:1}
  .sheet-live,.sheet-tb{position:absolute;pointer-events:none;font-family:var(--mono);
    opacity:0;transition:opacity .7s ease}
  .sheet-live.on,.sheet-tb.on{opacity:1}
  .sheet-live{left:4.2%;top:5.4%;font-size:clamp(6.5px,1.36cqw,9px);letter-spacing:.2em;
    text-transform:uppercase;color:#BFD0FF}
  .sheet-live b{color:#E9B872;font-weight:600}
  .sheet-tb{left:4.2%;right:4.2%;bottom:5%;display:flex;justify-content:space-between;
    align-items:flex-end;gap:16px}
  .sheet-tb .l,.sheet-tb .r{display:flex;flex-direction:column;gap:2px;min-width:0}
  .sheet-tb .r{text-align:right}
  .sheet-tb b{font-family:var(--serif);font-weight:400;
    font-size:clamp(13px,2.6cqw,26px);letter-spacing:.06em;color:#fff;line-height:1.1}
  .sheet-tb .r b{font-family:var(--mono);font-size:clamp(6.5px,1.22cqw,8.5px);
    font-weight:600;letter-spacing:.2em;color:#BFD0FF}
  .sheet-tb i{font-style:normal;font-size:clamp(6px,1.15cqw,8.5px);letter-spacing:.18em;
    text-transform:uppercase;color:rgba(191,208,255,.72);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  /* the sheet furniture belongs to the BLUEPRINT, and gets out of the way the
     moment the piece takes on real material — otherwise a drawing's title block
     is sitting on a photograph. */
  .stage-shell.material .sheet-rule,
  .stage-shell.material .sheet-live{opacity:0}
  /* the header rides across with the rest of the furniture — a blueprint-blue
     bar sitting on top of a navy photograph is the seam showing. */
  .sheet-tag{transition:background .8s ease,color .8s ease,border-color .8s ease}
  .stage-shell.material .sheet-tag{background:rgba(4,26,75,.9);color:var(--muted);
    border-bottom-color:var(--line)}
  .stage-shell.material{background:var(--void)}
  .stage-shell.material #stage{background:transparent}
  @media(prefers-reduced-motion:reduce){
    .sheet-rule,.sheet-live,.sheet-tb,#stage{transition:none}
  }
  .stage-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:transparent;border:none;color:var(--fg);cursor:pointer;font-family:var(--sans);transition:opacity .5s}
  .stage-load .sl-ic{font-size:34px;color:var(--gold);margin-bottom:6px;animation:pulse 3s ease-in-out infinite}
  .stage-load span:nth-child(2){font-size:15px;letter-spacing:.02em}
  .stage-load .sl-sub{font-family:var(--mono);font-size:11px;color:var(--muted2);letter-spacing:.05em}
  .stage-load.hide{opacity:0;pointer-events:none}
  /* THE NARRATION IS A CAPTION, NOT A STICKER ON THE DRAWING. It used to be a
     pill floating at left:18px bottom:16px — directly on top of the title
     block, which is where a technical sheet puts the piece's name. Two things
     fighting for the same corner, and the one that lost was the name of the
     work. Under the sheet, where a figure's caption goes. */
  .stage-cap{display:block;margin:14px auto 0;max-width:820px;text-align:center;
    font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);
    min-height:1.6em;opacity:0;transition:opacity .5s}
  .stage-cap.on{opacity:1}
  @media(prefers-reduced-motion:reduce){.stage-cap{transition:none}}

  /* ---------- journey ---------- */
  .journey-track{margin-top:54px;position:relative;padding-left:6px}
  .jstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);position:relative;padding-bottom:30px}
  .jstep::before{content:'';position:absolute;left:19px;top:46px;bottom:-4px;width:1px;background:var(--line)}
  .jstep:last-child::before{display:none}
  .jnum{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:12px;color:var(--gold);background:var(--bg);flex:none;position:relative;z-index:2}
  .jcard{border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--panel);transition:border-color .3s}
  .jcard:hover{border-color:var(--line2)}
  .jcard.accent{border-color:var(--gold-dim);background:linear-gradient(180deg,rgba(216,196,154,.06),var(--panel))}
  .jstage{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
  .jh{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);font-weight:400;letter-spacing:-.01em;margin-bottom:11px}
  .jb{font-size:14.5px;color:var(--muted);line-height:1.66;max-width:54ch}
  .formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .formats span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gold);
    border:1px solid var(--gold-dim);padding:5px 12px;border-radius:7px;background:var(--gold-dim)}

  /* ---------- pipeline ---------- */
  .pipe{display:flex;align-items:stretch;gap:10px;margin-top:50px;flex-wrap:wrap}
  .pipe-step{flex:1;min-width:150px;border:1px solid var(--line);border-radius:14px;padding:22px 20px;background:var(--panel)}
  .ps-n{display:block;font-family:var(--serif);font-size:21px;font-weight:400;color:var(--gold);margin-bottom:8px}
  .ps-d{font-size:13px;color:var(--muted);line-height:1.5}
  .pipe-arr{display:flex;align-items:center;color:var(--gold);font-size:18px;opacity:.6}
  @media(max-width:760px){.pipe-arr{display:none}.pipe-step{min-width:0;flex-basis:calc(50% - 5px)}}

  /* ---------- market stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:54px}
  @media(max-width:760px){.stats{grid-template-columns:1fr}}
  .stat{border:1px solid var(--line);border-radius:16px;padding:30px 26px;background:linear-gradient(180deg,var(--panel),var(--panel2))}
  .stat-big{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,58px);line-height:1;color:var(--gold);letter-spacing:-.02em}
  .stat-lab{font-size:14px;color:var(--fg);margin-top:14px;letter-spacing:.01em}
  .stat-sub{font-size:12.5px;color:var(--muted2);margin-top:8px;line-height:1.5}
  .stat-note{font-family:var(--mono);font-size:11px;color:var(--muted2);margin-top:16px;letter-spacing:.02em}

  /* ---------- wedge ---------- */
  .wedge{margin-top:60px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .wedge-h{font-family:var(--serif);font-weight:400;font-size:22px;padding:22px 28px;border-bottom:1px solid var(--line);background:var(--panel)}
  .wedge-grid{display:grid;grid-template-columns:1fr 1fr}
  @media(max-width:680px){.wedge-grid{grid-template-columns:1fr}}
  .wedge-col{padding:28px}
  .wedge-col.before{border-right:1px solid var(--line)}
  @media(max-width:680px){.wedge-col.before{border-right:none;border-bottom:1px solid var(--line)}}
  .wedge-col.after{background:linear-gradient(180deg,rgba(216,196,154,.04),transparent)}
  .wc-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:18px}
  .wc-tag.gold{color:var(--gold)}
  .wedge-col ul{list-style:none}
  .wedge-col li{font-size:14.5px;color:var(--muted);line-height:1.6;padding:9px 0 9px 20px;position:relative}
  .wedge-col.after li{color:var(--fg)}
  .wedge-col li::before{content:'';position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--line2)}
  .wedge-col.after li::before{background:var(--gold)}

  /* ---------- network ---------- */
  .net-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px}
  @media(max-width:820px){.net-row{grid-template-columns:1fr}}
  .net-card{border:1px solid var(--line);border-radius:16px;padding:28px 26px;background:var(--panel)}
  .net-k{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--fg);margin-bottom:13px}
  .net-card p{font-size:14px;color:var(--muted);line-height:1.65}

  /* ---------- roadmap ---------- */
  .road{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);margin-top:50px}
  @media(max-width:760px){.road{grid-template-columns:1fr;gap:36px}}
  .road-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;padding:7px 15px;border-radius:24px;margin-bottom:24px;border:1px solid var(--line2)}
  .road-badge .rb-dot{width:7px;height:7px;border-radius:50%}
  .road-badge.live{color:var(--green)}.road-badge.live .rb-dot{background:var(--green);box-shadow:0 0 9px var(--green)}
  .road-badge.soon{color:var(--gold)}.road-badge.soon .rb-dot{background:var(--gold);box-shadow:0 0 9px var(--gold)}
  .road-list{list-style:none}
  .road-list li{font-size:14.5px;color:var(--fg);line-height:1.6;padding:11px 0 11px 22px;position:relative;border-top:1px solid var(--line)}
  .road-list li::before{content:'';position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--green)}
  .road-list.dim li{color:var(--muted)}.road-list.dim li::before{background:var(--gold)}
  .road-note{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,19px);color:var(--muted);margin-top:40px;max-width:62ch;line-height:1.6}

  /* ---------- manifesto ---------- */
  .manifesto{max-width:780px}
  .man-line{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3.4vw,34px);line-height:1.35;
    color:var(--muted);margin-bottom:28px;letter-spacing:-.01em}
  .man-line em{color:var(--fg)}
  .man-line.big{color:var(--fg);font-size:clamp(28px,4.4vw,46px);margin-top:8px}
  .man-line.big em{color:var(--gold)}

  /* ---------- invest ---------- */
  .invest{max-width:880px}
  .invest-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap}
  .foot{margin-top:clamp(80px,12vh,140px);border-top:1px solid var(--line);padding:34px 0 50px}
  .foot-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
  .foot-tag{font-size:12px;color:var(--muted2);letter-spacing:.02em;text-align:center}
  .foot-mail a{font-family:var(--mono);font-size:12.5px;color:var(--gold)}
  /* ============ THE BENCH — the only thing here that makes a file ========= */
  #bench{background:var(--bg);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .bwrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .bhead{text-align:center;margin-bottom:34px}
  .bkick{font:600 11px/1 var(--mono);letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
  .bhead h2{font:400 clamp(30px,4.4vw,52px)/1.08 var(--serif);margin:14px 0 12px}
  .bhead p{color:var(--muted);max-width:62ch;margin:0 auto;font-size:16px;line-height:1.65}

  .bform{display:flex;gap:10px;align-items:stretch;max-width:860px;margin:0 auto}
  #bInput{flex:1;background:var(--panel);border:1px solid var(--line2);border-radius:3px;color:var(--fg);
    font:400 15px/1.5 var(--sans);padding:15px 17px;resize:none;min-height:58px;transition:border-color .18s}
  #bInput:focus{outline:none;border-color:var(--gold)}
  #bInput::placeholder{color:var(--muted2)}
  #bGo{background:var(--gold);color:#0a0a0c;border:0;border-radius:3px;padding:0 26px;cursor:pointer;
    font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:background .18s;white-space:nowrap}
  #bGo:hover{background:var(--gold-bright)}

  #bChips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px auto 0;max-width:860px}
  #bChips button{background:transparent;border:1px solid var(--line2);border-radius:999px;color:var(--muted);
    font:400 12px/1 var(--sans);padding:8px 14px;cursor:pointer;transition:color .18s,border-color .18s}
  #bChips button:hover{color:var(--fg);border-color:var(--gold)}

  .bstatus{max-width:860px;margin:18px auto 0;padding:14px 18px;border-radius:3px;font:400 14px/1.6 var(--sans)}
  .bstatus.refuse{background:rgba(216,196,154,.06);border:1px solid var(--gold-dim);color:var(--gold-bright)}

  #bOut{margin-top:38px}
  .bgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
  .bpanel{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .bpanel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
  .bpanel-h span{font:600 10px/1 var(--mono);letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
  #bViews{display:flex;gap:2px}
  #bViews button{background:transparent;border:1px solid transparent;color:var(--muted2);cursor:pointer;
    font:600 10px/1 var(--mono);letter-spacing:.14em;padding:6px 10px;border-radius:2px;text-transform:uppercase}
  #bViews button[aria-selected=true]{color:var(--gold);border-color:var(--gold-dim);background:rgba(216,196,154,.06)}
  #bStage{height:460px;width:100%}
  #bStage canvas{display:block;width:100%;height:100%}
  #bFlat{height:460px;padding:18px;display:flex;align-items:center;justify-content:center}
  .flatsvg{width:100%;height:100%}
  .flatsvg .f-cut{fill:none;stroke:var(--fg);stroke-width:2.4;vector-effect:non-scaling-stroke}
  .flatsvg .f-bend{stroke:#e2564d;stroke-width:1.6;stroke-dasharray:9 6;vector-effect:non-scaling-stroke}
  .flatsvg .f-lab{fill:var(--gold);font:600 15px var(--mono);letter-spacing:.1em}
  .flatsvg .f-dim{fill:var(--muted);font:400 13px var(--mono)}

  .bside{display:flex;flex-direction:column;gap:22px}
  .srow{display:grid;grid-template-columns:78px 1fr;gap:4px 12px;padding:9px 14px;border-bottom:1px solid var(--line)}
  .srow:last-child{border-bottom:0}
  .sk{font:600 10px/1.6 var(--mono);letter-spacing:.16em;color:var(--muted2);text-transform:uppercase}
  .sv{font:400 15px/1.4 var(--sans);color:var(--fg)}
  .ss{grid-column:2;font:400 11px/1.5 var(--sans);color:var(--muted2)}
  .s-stated .sv{color:var(--fg)}
  .s-inferred .sv{color:var(--blue)}
  .s-default .sv{color:var(--muted)}
  .s-inferred .ss::before,.s-default .ss::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
    margin-right:6px;vertical-align:middle}
  .s-inferred .ss::before{background:var(--blue)}
  .s-default .ss::before{background:var(--muted2)}

  .prow{display:grid;grid-template-columns:34px 1fr auto;gap:3px 10px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .prow:last-child{border-bottom:0}
  .pq{font:600 12px/1.4 var(--mono);color:var(--gold)}
  .pn{font:400 14px/1.4 var(--sans);color:var(--fg)}
  .pb{font:400 11px/1.4 var(--mono);color:var(--muted2);text-align:right}
  .pd{grid-column:2/4;font:400 11px/1.5 var(--mono);color:var(--muted)}

  #bTotals{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .tcell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
  .tcell:nth-child(2n){border-right:0}
  .tk{font:600 9px/1.4 var(--mono);letter-spacing:.16em;color:var(--muted2);text-transform:uppercase}
  .tv{font:400 15px/1.2 var(--sans);color:var(--fg)}

  .bship{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding:20px 22px;border:1px solid var(--gold-dim);border-radius:4px;background:rgba(216,196,154,.035)}
  .bship p{font:400 13px/1.65 var(--sans);color:var(--muted);max-width:60ch;margin:0}
  .bship strong{color:var(--fg);font-weight:500}
  #bDl{background:var(--gold);color:#0a0a0c;border:0;border-radius:3px;padding:14px 24px;cursor:pointer;
    font:600 12px/1 var(--mono);letter-spacing:.1em;transition:background .18s;white-space:nowrap}
  #bDl:hover{background:var(--gold-bright)}
  #bDl:disabled{background:var(--panel2);color:var(--muted2);cursor:not-allowed}
  .bacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .bghost{background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:3px;
    padding:13px 18px;cursor:pointer;font:600 11px/1 var(--mono);letter-spacing:.08em;transition:color .18s,border-color .18s}
  .bghost:hover:not(:disabled){color:var(--fg);border-color:var(--klein-lift)}
  .bghost:disabled{opacity:.4;cursor:not-allowed}

  /* arrival from the Imaginarium, or from a shared link */
  .bfrom{max-width:860px;margin:18px auto 0;padding:12px 18px;border-radius:3px;text-align:center;
    background:rgba(61,90,254,.10);border:1px solid rgba(143,160,255,.32);
    font:400 13px/1.5 var(--sans);color:var(--cyan)}

  /* TTY001 band */
  .tty-band{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
    border:1px solid var(--line2);border-radius:6px;padding:36px;background:var(--card-grad)}
  .tty-copy p{color:var(--muted);max-width:56ch;margin:14px 0 0;font-size:15px;line-height:1.7}
  .tty-copy .tty-proof{font-family:var(--mono);font-size:11.5px;color:var(--klein-lift);line-height:1.8}
  .tty-copy .btn{margin-top:22px;display:inline-block}
  .tty-term{background:var(--void);border:1px solid var(--line);border-radius:4px;padding:18px 16px;
    font:400 11.5px/1.9 var(--mono);overflow:hidden}
  .tt-line.sys{color:var(--fg)}
  .tt-line.dim{color:var(--muted)}
  .tt-line.ask{color:var(--filament)}
  .tt-caret{animation:ttblink 1.1s steps(1) infinite;color:var(--klein-lift)}
  @keyframes ttblink{50%{opacity:0}}
  @media(max-width:900px){.tty-band{grid-template-columns:1fr;padding:24px}}
  @media(prefers-reduced-motion:reduce){.tt-caret{animation:none}}

  /* beta notice + notify */
  .bbeta{margin-top:22px;padding:18px 20px;border:1px solid rgba(143,160,255,.3);border-radius:4px;
    background:rgba(61,90,254,.07);display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between}
  .bbeta-t{flex:1;min-width:280px}
  .bbeta-t p{font:400 13px/1.65 var(--sans);color:var(--muted);margin:8px 0 0;max-width:64ch}
  #bNotify{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  #bEmail{background:var(--panel);border:1px solid var(--line2);border-radius:3px;color:var(--fg);
    font:400 14px/1 var(--sans);padding:13px 15px;min-width:220px}
  #bEmail:focus{outline:none;border-color:var(--klein-lift)}
  #bNotifyGo{background:var(--klein);color:#fff;border:0;border-radius:3px;padding:13px 22px;cursor:pointer;
    font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
  #bNotifyGo:hover{background:var(--klein-lift);color:#041A4B}
  .hp{position:absolute;left:-9999px}
  .bnotify-msg{margin-top:12px;font:400 13px/1.6 var(--sans);color:var(--green)}

  /* the roster */
  #bSort{display:flex;gap:2px}
  #bSort button{background:transparent;border:1px solid transparent;color:var(--muted2);cursor:pointer;
    font:600 10px/1 var(--mono);letter-spacing:.14em;padding:6px 10px;border-radius:2px;text-transform:uppercase}
  #bSort button[aria-selected=true]{color:var(--klein-lift);border-color:rgba(143,160,255,.3);background:rgba(61,90,254,.12)}
  .shops-head{padding:13px 16px;border-bottom:1px solid var(--line);font:400 14px/1.55 var(--sans);color:var(--muted)}
  .shops-head strong{color:var(--fg);font-weight:500}
  .shop{padding:15px 16px;border-bottom:1px solid var(--line)}
  .shop:last-of-type{border-bottom:0}
  .shop.house{background:rgba(233,184,114,.045)}
  .shop.refused{opacity:.55}
  .shop-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .shop-n{font:400 16px/1.3 var(--sans);color:var(--fg)}
  .shop-tags{display:flex;gap:6px;flex-wrap:wrap}
  .tag{font:600 9px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:2px}
  .tag-house{background:rgba(233,184,114,.16);color:var(--gold-bright)}
  .tag-prov{background:rgba(143,160,255,.14);color:var(--klein-lift)}
  .tag-no{background:rgba(224,114,106,.14);color:#E0726A}
  .shop-m{font:400 11px/1.6 var(--mono);color:var(--muted2);margin-top:3px}
  .shop-b{font:400 12px/1.6 var(--sans);color:var(--muted);margin-top:6px;max-width:64ch}
  .shop-p{display:flex;align-items:baseline;gap:9px;margin-top:9px}
  .shop-total{font:400 25px/1 var(--serif);color:var(--fg)}
  .shop-inc{font:400 11px/1 var(--mono);color:var(--muted2)}
  .shop-d{margin-top:9px}
  .shop-d summary{font:400 11px/1.6 var(--mono);color:var(--klein-lift);cursor:pointer;list-style:none}
  .shop-d summary::-webkit-details-marker{display:none}
  .shop-d summary::before{content:'▸ ';font-size:9px}
  .shop-d[open] summary::before{content:'▾ '}
  .qline{display:grid;grid-template-columns:120px 90px 1fr;gap:3px 12px;padding:5px 0 5px 14px;
    border-left:1px solid var(--line);margin-top:5px}
  .ql-k{font:600 10px/1.5 var(--mono);letter-spacing:.1em;color:var(--muted2);text-transform:uppercase}
  .ql-v{font:400 13px/1.4 var(--sans);color:var(--fg);text-align:right}
  .ql-w{grid-column:1/4;font:400 11px/1.55 var(--sans);color:var(--muted2)}
  .shops-foot{padding:13px 16px;border-top:1px solid var(--line);background:var(--panel2);
    font:400 11px/1.7 var(--sans);color:var(--muted2)}
  .shops-foot em{color:var(--klein-lift);font-style:normal}
  @media(max-width:640px){.qline{grid-template-columns:1fr auto}.ql-w{grid-column:1/3}}

  /* the making sequence */
  .qrow{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .qrow:last-child{border-bottom:0}
  .qop{font:600 10px/1.7 var(--mono);letter-spacing:.18em;color:var(--klein-lift);text-transform:uppercase}
  .qt{font:400 14px/1.4 var(--sans);color:var(--fg);margin-bottom:3px}
  .qd{font:400 12px/1.65 var(--sans);color:var(--muted)}
  @media(max-width:640px){.qrow{grid-template-columns:1fr;gap:5px}}

  @media(max-width:900px){
    .bgrid{grid-template-columns:1fr}
    #bStage,#bFlat{height:340px}
    .bform{flex-direction:column}
    #bGo{padding:15px}
  }

/* ============ the engine section: one engine, three doors ============ */
.engine-doors{display:grid;gap:10px;margin:24px 0}
.edoor{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:baseline;
  padding:14px 16px;border:1px solid rgba(191,208,255,.16);border-radius:10px;
  background:rgba(10,43,102,.30);text-decoration:none;
  transition:border-color .22s ease, transform .22s ease, background .22s ease}
.edoor:hover{border-color:var(--gold);background:rgba(10,43,102,.5);transform:translateX(4px)}
.edoor b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.22em;color:var(--gold)}
.edoor span{color:var(--cyan);font-size:15px;line-height:1.5}
@media (max-width:640px){.edoor{grid-template-columns:1fr;gap:4px}}

/* ============ the gate: email is the key ============ */
.gate{max-width:520px;margin:0 auto;padding:26px;border:1px solid rgba(191,208,255,.18);
  border-radius:12px;background:rgba(10,43,102,.35)}
.gate .gk{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.gate form{display:flex;gap:10px;flex-wrap:wrap}
.gate input[type=email],.gate input[data-code]{flex:1;min-width:200px;padding:13px 15px;border-radius:8px;
  border:1px solid rgba(191,208,255,.25);background:rgba(4,26,75,.6);color:var(--fg);
  font-family:var(--sans);font-size:15px}
.gate input[data-code]{font-family:var(--mono);letter-spacing:.3em;text-align:center}
.gate input[type=email]:focus,.gate input[data-code]:focus{outline:none;border-color:var(--gold)}
.gate [data-resend]{background:none;border:0;color:var(--gold);cursor:pointer;
  font:inherit;padding:0;text-decoration:underline}
.gate [data-resend]:disabled{opacity:.5;cursor:wait}
.gate button{padding:13px 20px;border-radius:8px;border:0;cursor:pointer;
  background:var(--gold);color:#041A4B;font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.gate button:disabled{opacity:.6;cursor:wait}
.gate .gnote{margin-top:12px;font-size:13px;line-height:1.55;color:var(--cyan);opacity:.85}
.gate [data-gate-msg]{margin-top:10px;font-size:13px;color:var(--gold)}
.gate .hp{display:none}
.gate-ok{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--cyan);opacity:.8}
.gate-ok button{background:none;border:0;color:var(--gold);cursor:pointer;font:inherit;padding:0;margin-left:8px;text-decoration:underline}

/* the aura is wider than the phone; clip the page so it never side-scrolls */
html,body{overflow-x:clip}

/* ============ landscape phones: a short room needs smaller furniture ============
   The hero was composed for portrait — centered in 100svh with a wordmark scaled
   by viewport WIDTH. Rotate the phone and a 150px "AiAD." lands under the nav
   links while the buttons sink below the fold. In short viewports the hero stops
   pretending to be a poster: it takes padding under the nav, scales its type by
   HEIGHT, and lets the page scroll like the page it is. */
@media (max-height:560px){
  #hero{min-height:0;justify-content:flex-start;padding:96px 0 56px}
  .hero-mark{font-size:clamp(40px,17vh,88px)}
  .aiad{margin:16px 0 4px}
  .aiad .word{font-size:clamp(17px,5.4vh,26px)}
  .hero-sub{font-size:15px}
  .hero-cta-row{margin-top:18px}
  .scroll-hint{display:none}
}