/* ═══════════════════════════════════════════════════════════════
   YUVASCRIPT — Build. Explore. Create.
   Visual system: engineering notebook × technical journal × terminal
   Standalone from the parent portfolio; shares only its warm-paper DNA.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────── */
:root{
  /* surfaces — warm paper, aged stock */
  --paper:#efe5d6;
  --paper-deep:#e5d8c4;
  --card:#f7f1e6;
  --card-soft:rgba(247,241,230,0.62);

  /* ink */
  --ink:#1b1714;
  --ink-soft:#3d352c;
  --ink-dim:#584d3f;
  --ink-faint:#6f6355;

  /* accents — used strategically, never decoratively */
  --oxblood:#7d2b25;
  --orange:#df5e1a;      /* carried from the parent brand — fills & text on dark */
  --orange-ink:#a8410b;  /* AA-compliant orange for text on paper */
  --moss:#5d6a48;
  --term:#3d7a35;        /* terminal green, sparing */

  /* hairlines */
  --rule:rgba(27,23,20,0.16);
  --rule-firm:rgba(27,23,20,0.30);
  --rule-faint:rgba(27,23,20,0.08);

  /* type */
  --f-display:'Bricolage Grotesque','Helvetica Neue',sans-serif;
  --f-body:'Newsreader',Georgia,serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* motion */
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:56px;
  --gutter:clamp(1.15rem, 5vw, 4.5rem);
  --maxw:1280px;
}

/* cross-document page transitions (progressive enhancement) */
@view-transition { navigation: auto; }

.ymark{width:22px; height:22px; flex:none; color:currentColor; overflow:visible;}
.logo:hover .ymark{animation:markPulse .5s var(--ease);}
@keyframes markPulse{40%{transform:scale(1.14) rotate(-4deg);} 100%{transform:none;}}

/* ── 2. BASE ──────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background-color:var(--paper);
  /* engineering graph paper — 2 scales, no gradients */
  background-image:
    linear-gradient(var(--rule-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-faint) 1px, transparent 1px);
  background-size:88px 88px, 88px 88px;
  background-position:center top;
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  overflow-x:hidden;
  font-optical-sizing:auto;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
::selection{background:var(--orange); color:var(--card);}

.nav-back:hover{color:var(--orange-ink);}

:focus-visible{
  outline:2px solid var(--orange-ink);
  outline-offset:3px;
}

/* paper fibre — very subtle, multiply */
.fibre{
  position:fixed; inset:0; z-index:80;
  pointer-events:none; opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ── 3. LAYOUT ────────────────────────────────────────────────── */
.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  position:relative;
}
section{position:relative;}
.band{padding-block:clamp(4rem, 11vh, 8.5rem);}
.band + .band{border-top:1px solid var(--rule);}
.band.tight{padding-block:clamp(3rem, 7vh, 5rem);}

/* ── 4. TECHNICAL MARKINGS ────────────────────────────────────── */
.tag{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.tag-o{color:var(--orange-ink);}
.tag-x{color:var(--oxblood);}

/* section index: [002] / IDENTITY ──────────── */
.sec-idx{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:1.5rem;
}
.sec-idx .n{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:0.1em; color:var(--oxblood);
}
.sec-idx .t{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-dim);
}
.sec-idx .line{flex:1; height:1px; background:var(--rule-firm);}

h2.head{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.1rem, 5.4vw, 4.1rem);
  line-height:1.02;
  letter-spacing:-0.026em;
  margin:0 0 1.1rem;
  max-width:19ch;
}
h2.head .thin{font-weight:400; color:var(--ink-dim);}
h2.head em{font-style:italic; font-family:var(--f-body); font-weight:400;}

.lede{
  font-size:clamp(1.05rem, 1.9vw, 1.32rem);
  line-height:1.58;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0;
  font-weight:300;
}

/* registration marks — engineering corner ticks */
.ticked{position:relative;}
.ticked::before,.ticked::after{
  content:''; position:absolute; width:9px; height:9px;
  border:1px solid var(--rule-firm); pointer-events:none;
}
.ticked::before{top:-1px; left:-1px; border-right:0; border-bottom:0;}
.ticked::after{bottom:-1px; right:-1px; border-left:0; border-top:0;}

/* margin annotation — lab-notebook note */
.note{
  font-family:var(--f-mono);
  font-size:10.5px; line-height:1.75;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  border-left:1px solid var(--rule-firm);
  padding-left:0.85rem;
}

/* ── 5. REVEAL ────────────────────────────────────────────────── */
.rv{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.rv.in{opacity:1; transform:none;}

/* rule that draws itself */
.draw{transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out) var(--d,0ms);}
.draw.in{transform:scaleX(1);}

/* ── 6. NAV ───────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:70;
  background:rgba(239,229,214,0.90);
  backdrop-filter:saturate(1.3) blur(10px);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--rule);
  transition:border-color .3s var(--ease);
}
.nav.stuck{border-bottom-color:var(--rule-firm);}
.nav-in{
  max-width:var(--maxw); margin:0 auto;
  padding-inline:var(--gutter);
  height:var(--nav-h);
  display:flex; align-items:center; gap:1.4rem;
}
.logo{
  font-family:var(--f-display); font-weight:800;
  font-size:16px; letter-spacing:-0.02em;
  text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:0.5rem;
}
.logo .sq{
  width:8px; height:8px; background:var(--orange);
  flex:none;
}
.nav-mid{
  display:flex; align-items:center; gap:0.15rem;
  margin-left:auto;
}
.nav-mid a{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-dim);
  padding:0.45rem 0.7rem; position:relative;
  transition:color .25s var(--ease);
}
.nav-mid a::after{
  content:''; position:absolute; left:0.7rem; right:0.7rem; bottom:0.25rem;
  height:1px; background:var(--orange);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-mid a:hover{color:var(--ink);}
.nav-mid a:hover::after,.nav-mid a.on::after{transform:scaleX(1);}
.nav-mid a.on{color:var(--ink);}

.nav-back{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.1em; color:var(--ink-faint);
  text-decoration:none; white-space:nowrap;
  border-left:1px solid var(--rule); padding-left:1rem;
  transition:color .25s var(--ease);
}
.nav-burger{
  display:none; margin-left:auto;
  width:38px; height:32px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--rule-firm); position:relative;
}
.nav-burger span{
  position:absolute; left:9px; right:9px; height:1.4px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger span:nth-child(1){top:10px;}
.nav-burger span:nth-child(2){top:15px;}
.nav-burger span:nth-child(3){top:20px;}
.nav-burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* ── 7. HERO ──────────────────────────────────────────────────── */
.hero{
  padding-block:clamp(3rem, 9vh, 7rem) clamp(3rem, 8vh, 6rem);
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,0.85fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}

.hero-label{
  display:flex; align-items:center; gap:0.85rem;
  margin-bottom:1.8rem;
}
.hero-label .bar{width:34px; height:1px; background:var(--orange);}

.wordmark{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.9rem, 9.2vw, 7.4rem);
  line-height:0.88;
  letter-spacing:-0.045em;
  margin:0 0 1.3rem;
}
.wordmark .sub{color:var(--ink);}

.tagline{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0.55rem 1rem;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.05rem, 2.5vw, 1.6rem);
  letter-spacing:-0.01em;
  margin:0 0 2rem;
  padding-bottom:1.7rem;
  border-bottom:1px solid var(--rule-firm);
}
.tagline b{font-weight:600;}
.tagline .dot{width:4px; height:4px; background:var(--orange); flex:none;}
.tagline .w1{color:var(--ink);}
.tagline .w2{color:var(--oxblood);}
.tagline .w3{color:var(--moss);}

.hero-statement{
  font-size:clamp(1.02rem, 1.75vw, 1.24rem);
  line-height:1.6; font-weight:300;
  color:var(--ink-soft); max-width:52ch;
  margin:0 0 2.1rem;
}

/* the Yuva lockup — language, under the brand */
.lockup{
  display:grid; grid-template-columns:auto 1fr; gap:0 1.3rem;
  align-items:start;
  padding:1.35rem 1.5rem;
  background:var(--card-soft);
  border:1px solid var(--rule-firm);
  max-width:52ch; margin-bottom:2.2rem;
}
.lockup .mark{
  font-family:var(--f-display); font-weight:800;
  font-size:2.05rem; line-height:1; letter-spacing:-0.035em;
  color:var(--oxblood);
}
.lockup .txt{font-size:15px; line-height:1.55; color:var(--ink-soft); font-weight:300;}
.lockup .txt em{font-style:italic;}
.lockup .rule{
  grid-column:1/-1; height:1px; background:var(--rule);
  margin:0.9rem 0 0.75rem;
}
.lockup .meta{
  grid-column:1/-1;
  display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem;
}

.hero-actions{display:flex; flex-wrap:wrap; gap:0.9rem; align-items:center;}

/* buttons — square, engineered, no rounding */
.btn{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  padding:0.95em 1.5em;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  position:relative; overflow:hidden;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn .arw{transition:transform .35s var(--ease);}
.btn:hover{background:var(--oxblood); border-color:var(--oxblood);}
.btn:hover .arw{transform:translateX(4px);}
.btn.line{background:transparent; color:var(--ink); border-color:var(--rule-firm);}
.btn.line:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}

/* hero side column — system metadata + terminal */
.hero-side{display:flex; flex-direction:column; gap:1.15rem;}

.specsheet{
  border:1px solid var(--rule-firm);
  background:var(--card-soft);
  padding:1.1rem 1.2rem;
}
.specsheet .row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:0.5rem 0;
  border-bottom:1px dotted var(--rule);
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em;
}
.specsheet .row:last-child{border-bottom:none;}
.specsheet .row .k{color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.16em; font-size:10px;}
.specsheet .row .v{color:var(--ink); font-weight:500; text-align:right;}
.specsheet .row .v.exp{color:var(--oxblood);}
.specsheet .row .v.dev{color:var(--orange-ink);}

/* terminal */
.term{
  border:1px solid var(--ink);
  background:#171310;
  color:#d9cfc0;
  font-family:var(--f-mono);
  font-size:12.5px; line-height:1.75;
  overflow:hidden;
}
.term-bar{
  display:flex; align-items:center; gap:0.5rem;
  padding:0.5rem 0.8rem;
  border-bottom:1px solid rgba(217,207,192,0.18);
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:#8d8175;
}
.term-bar .d{width:6px; height:6px; background:#8d8175; flex:none;}
.term-bar .d.g{background:var(--term);}
.term-body{padding:0.95rem 1rem 1.15rem; min-height:172px;}
.term-body .ln{white-space:pre-wrap; word-break:break-word;}
.cur{
  display:inline-block; width:7px; height:1em;
  background:var(--term); vertical-align:-2px;
  animation:blink 1.05s steps(2,start) infinite;
}

/* code colouring — shared */
.k{color:#c98a4b;}   /* keyword */
.s{color:#9bb36a;}   /* string  */
.f{color:#7fa8cc;}   /* fn      */
.c{color:#7d7264;}   /* comment */
.n{color:#cf8f7d;}   /* number/bool */

/* ── 8. MARQUEE STRIP ─────────────────────────────────────────── */
.strip{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.strip-track{
  display:flex; width:max-content;
  animation:slide 48s linear infinite;
  padding-block:0.62rem;
}
.strip:hover .strip-track{animation-play-state:paused;}
.strip-track span{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.2em; text-transform:uppercase;
  padding-inline:1.5rem; white-space:nowrap; opacity:0.72;
}
.strip-track span i{font-style:normal; color:var(--orange); opacity:1;}

/* ── 9. DEFINITION / WHAT IS ──────────────────────────────────── */
.def-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4.5vw,4rem); align-items:start;
}
.def-list{border-top:1px solid var(--rule-firm);}
.def-row{
  display:grid; grid-template-columns:2.6rem 1fr;
  gap:1.2rem; align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.def-row:hover{padding-left:0.6rem; background:rgba(247,241,230,0.5);}
.def-row .num{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  color:var(--orange-ink); letter-spacing:0.06em;
}
.def-row h3{
  font-family:var(--f-display); font-weight:700;
  font-size:1.16rem; letter-spacing:-0.015em;
  margin:0 0 0.2rem;
}
.def-row p{margin:0; font-size:14.5px; line-height:1.58; color:var(--ink-dim); font-weight:300;}

.prose p{
  font-size:clamp(1rem,1.55vw,1.1rem); line-height:1.68;
  color:var(--ink-soft); font-weight:300; margin:0 0 1.15rem;
  max-width:54ch;
}
.prose p strong{font-weight:500; color:var(--ink);}
.prose p:last-child{margin-bottom:0;}

/* ── 10. BRAND → LANGUAGE DIAGRAM ─────────────────────────────── */
.rel{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,3vw,2.5rem); align-items:center;
  margin-top:0.5rem;
}
.rel-box{
  border:1px solid var(--rule-firm);
  background:var(--card-soft);
  padding:clamp(1.4rem,3vw,2.3rem);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.rel-box:hover{border-color:var(--ink); background:var(--card);}
.rel-box .m{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem,3.6vw,2.5rem);
  letter-spacing:-0.035em; line-height:1; margin:0 0 0.75rem;
}
.rel-box.brand .m{color:var(--ink);}
.rel-box.lang .m{color:var(--oxblood);}
.rel-box .roles{display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.9rem;}
.rel-box p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-dim); font-weight:300;}
.rel-arrow{
  display:grid; place-items:center; gap:0.5rem;
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:0.18em; color:var(--ink-faint);
  text-transform:uppercase;
}
.rel-arrow .stem{width:1px; height:44px; background:var(--rule-firm);}
.rel-arrow .head{color:var(--orange-ink); font-size:15px; line-height:1;}

.pill{
  font-family:var(--f-mono); font-size:9.5px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  border:1px solid var(--rule-firm); color:var(--ink-dim);
  padding:0.28em 0.6em; background:var(--card-soft);
}

/* ── 11. LINEAGE (WHY YUVA EXISTS) ────────────────────────────── */
.lineage{margin-top:2.6rem; border-top:1px solid var(--rule-firm);}
.lin{
  display:grid;
  grid-template-columns:7.5rem 10rem 1fr;
  gap:1.4rem; align-items:baseline;
  padding:0.92rem 0;
  border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.lin:hover{background:rgba(247,241,230,0.55); padding-left:0.5rem;}
.lin .yr{font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.08em;}
.lin .nm{font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:-0.01em;}
.lin .q{font-size:14.5px; color:var(--ink-dim); font-weight:300; line-height:1.55;}
.lin.self{background:rgba(223,94,26,0.07); border-bottom-color:var(--orange);}
.lin.self .nm{color:var(--oxblood);}
.lin.self .q{color:var(--ink-soft);}
.lin.self .yr{color:var(--orange-ink);}

/* ── 12. PHILOSOPHY ───────────────────────────────────────────── */
.phi-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule-firm);
  border-left:1px solid var(--rule);
}
.phi{
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1.7rem 1.5rem 1.9rem;
  position:relative; overflow:hidden;
  transition:background .4s var(--ease);
}
.phi::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--orange); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.phi:hover{background:var(--card);}
.phi:hover::before{transform:scaleY(1);}
.phi .n{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:0.14em; color:var(--orange-ink); display:block; margin-bottom:0.85rem;
}
.phi h3{
  font-family:var(--f-display); font-weight:800;
  font-size:1.42rem; letter-spacing:-0.025em; margin:0 0 0.5rem;
}
.phi p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-dim); font-weight:300;}

/* ── 13. LABORATORY STATUS BOARD ──────────────────────────────── */
.board{border:1px solid var(--ink); background:var(--card-soft);}
.board-hd{
  display:grid; grid-template-columns:1fr 9.5rem 5.5rem;
  gap:1rem; padding:0.72rem 1.2rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:0.2em; text-transform:uppercase;
}
.board-row{
  display:grid; grid-template-columns:1fr 9.5rem 5.5rem;
  gap:1rem; padding:0.85rem 1.2rem; align-items:center;
  border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.board-row:last-child{border-bottom:none;}
.board-row:hover{background:var(--card);}
.board-row .comp{
  font-family:var(--f-mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
}
.board-row .desc{font-size:13px; color:var(--ink-dim); font-weight:300; line-height:1.5;}
.st{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:var(--f-mono); font-size:9.5px; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase;
  justify-self:start;
}
.st .led{width:6px; height:6px; flex:none;}
.st.building{color:var(--orange-ink);}      .st.building .led{background:var(--orange); animation:led 1.9s ease-in-out infinite;}
.st.exploring{color:var(--moss);}       .st.exploring .led{background:var(--moss);}
.st.planned{color:var(--ink-dim);}      .st.planned .led{background:var(--ink-faint);}
.st.future{color:var(--ink-faint);}     .st.future .led{background:transparent; border:1px solid var(--ink-faint);}

/* ── 14. PIPELINE ─────────────────────────────────────────────── */
.pipe-wrap{
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(1.8rem,4vw,3.5rem); align-items:start;
}
.pipe{display:flex; flex-direction:column; gap:0;}
.stage{
  display:flex; align-items:center; gap:1rem;
  width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  background:var(--card-soft);
  border:1px solid var(--rule-firm);
  padding:0.85rem 1.1rem;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.stage:hover{background:var(--card); transform:translateX(4px);}
.stage[aria-selected="true"]{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.stage[aria-selected="true"] .sn{color:var(--orange);}
.stage .sn{
  font-family:var(--f-mono); font-size:10px; font-weight:700;
  letter-spacing:0.1em; color:var(--ink-faint); flex:none; width:1.6rem;
}
.stage .sl{
  font-family:var(--f-mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
}
.stage .io{
  margin-left:auto; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:0.1em; color:var(--ink-faint); text-transform:uppercase;
}
.stage[aria-selected="true"] .io{color:rgba(239,229,214,0.6);}
.pipe-link{
  height:16px; width:1px; background:var(--rule-firm);
  margin-left:calc(1.1rem + 0.8rem);
}
.pipe-panel{
  border:1px solid var(--rule-firm);
  background:var(--card-soft);
  padding:clamp(1.4rem,3vw,2.1rem);
  min-height:290px;
}
.pipe-panel .pn{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--orange-ink); margin:0 0 0.7rem;
}
.pipe-panel h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem,3vw,2.05rem); letter-spacing:-0.03em;
  margin:0 0 0.85rem;
}
.pipe-panel p{margin:0 0 1.1rem; font-size:15px; line-height:1.62; color:var(--ink-soft); font-weight:300;}
.pipe-panel .ex{
  font-family:var(--f-mono); font-size:12px; line-height:1.75;
  background:#171310; color:#d9cfc0;
  padding:0.9rem 1rem; overflow-x:auto;
  border:1px solid var(--ink);
}
.pipe-panel .ex pre{margin:0; white-space:pre;}

/* ── 15. CODE LAB ─────────────────────────────────────────────── */
.lab-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.snip{
  border:1px solid var(--rule-firm);
  background:var(--card-soft);
  display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.snip:hover{border-color:var(--ink); transform:translateY(-3px);}
.snip-hd{
  display:flex; justify-content:space-between; align-items:center; gap:0.8rem;
  padding:0.62rem 0.9rem; border-bottom:1px solid var(--rule-firm);
}
.snip-hd .ttl{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
}
.snip pre{
  margin:0; padding:1rem;
  font-family:var(--f-mono); font-size:12.5px; line-height:1.78;
  background:#171310; color:#d9cfc0;
  overflow-x:auto; flex:1;
}
.snip .cap{
  padding:0.65rem 0.9rem; font-size:12.5px; line-height:1.5;
  color:var(--ink-dim); font-weight:300;
  border-top:1px solid var(--rule-firm);
}

/* concept-syntax warning — honesty device */
.concept{
  display:flex; align-items:flex-start; gap:0.8rem;
  border:1px dashed var(--oxblood);
  background:rgba(125,43,37,0.05);
  padding:0.85rem 1.1rem; margin-bottom:1.8rem;
}
.concept .ic{color:var(--oxblood); font-family:var(--f-mono); font-size:13px; flex:none; line-height:1.5;}
.concept p{
  margin:0; font-family:var(--f-mono); font-size:11.5px;
  line-height:1.7; letter-spacing:0.03em; color:var(--ink-soft);
}
.concept p b{color:var(--oxblood); font-weight:700;}

/* ── 16. ROADMAP ──────────────────────────────────────────────── */
.road{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-left:1px solid var(--rule);}
.mile{
  border-right:1px solid var(--rule);
  border-top:2px solid var(--rule-firm);
  padding:1.5rem 1.3rem 1.8rem;
  transition:border-top-color .4s var(--ease), background .4s var(--ease);
}
.mile:hover{background:var(--card);}
.mile.now{border-top-color:var(--orange);}
.mile:hover{border-top-color:var(--ink);}
.mile .v{
  font-family:var(--f-display); font-weight:800;
  font-size:1.85rem; letter-spacing:-0.035em; margin:0 0 0.2rem;
}
.mile.now .v{color:var(--oxblood);}
.mile .ph{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 1rem;
  display:block;
}
.mile ul{list-style:none; margin:0; padding:0;}
.mile li{
  font-family:var(--f-mono); font-size:11.5px; line-height:1.5;
  color:var(--ink-dim); padding:0.32rem 0 0.32rem 0.95rem;
  position:relative;
}
.mile li::before{
  content:''; position:absolute; left:0; top:0.78em;
  width:4px; height:1px; background:var(--ink-faint);
}

/* ── 17. MANIFESTO ────────────────────────────────────────────── */
.manifesto{background:var(--ink); color:var(--paper);}
.manifesto .sec-idx .t,.manifesto .sec-idx .n{color:rgba(239,229,214,0.55);}
.manifesto .sec-idx .line{background:rgba(239,229,214,0.22);}
.manifesto h2.head{color:var(--paper);}
.mani-list{margin-top:2.2rem; border-top:1px solid rgba(239,229,214,0.16);}
.mani{
  display:grid; grid-template-columns:3rem 1fr;
  gap:1.5rem; align-items:baseline;
  padding:1.35rem 0;
  border-bottom:1px solid rgba(239,229,214,0.16);
  transition:padding-left .4s var(--ease);
}
.mani:hover{padding-left:0.7rem;}
.mani .i{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  color:var(--orange); letter-spacing:0.08em;
}
.mani p{
  margin:0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.18rem,2.7vw,1.92rem);
  line-height:1.28; letter-spacing:-0.022em;
  color:rgba(239,229,214,0.93);
  transition:color .35s var(--ease);
}
.mani:hover p{color:var(--paper);}
.mani p b{font-weight:800; color:var(--orange);}

/* ── 18. ECOSYSTEM ────────────────────────────────────────────── */
.eco{border-top:1px solid var(--rule-firm);}
.eco-row{
  display:grid; grid-template-columns:3.2rem minmax(0,14rem) 1fr auto;
  gap:1.5rem; align-items:center;
  padding:1.3rem 0; border-bottom:1px solid var(--rule);
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.eco-row:hover{padding-left:0.7rem; background:rgba(247,241,230,0.55);}
.eco-row .n{font-family:var(--f-mono); font-size:10.5px; font-weight:700; color:var(--orange-ink);}
.eco-row h3{
  font-family:var(--f-display); font-weight:800;
  font-size:1.3rem; letter-spacing:-0.025em; margin:0;
}
.eco-row p{margin:0; font-size:14.5px; color:var(--ink-dim); font-weight:300; line-height:1.55;}

/* ── 19. BUILD EXPLORE CREATE ─────────────────────────────────── */
.bec{border-top:1px solid var(--rule-firm);}
.bec-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding:clamp(2rem,4.5vh,3.2rem) 0;
  border-bottom:1px solid var(--rule);
}
.bec-word{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.8rem,9.5vw,7rem);
  line-height:0.86; letter-spacing:-0.05em;
  margin:0; display:flex; align-items:baseline; gap:1rem;
}
.bec-word .ix{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:0.14em; color:var(--orange-ink);
  align-self:flex-start; padding-top:0.6rem;
}
.bec-row:nth-child(1) .bec-word .t{color:var(--ink);}
.bec-row:nth-child(2) .bec-word .t{color:var(--oxblood);}
.bec-row:nth-child(3) .bec-word .t{color:var(--moss);}
.bec-row p{
  margin:0; font-size:clamp(1rem,1.9vw,1.26rem);
  line-height:1.55; color:var(--ink-soft); font-weight:300; max-width:44ch;
}

/* ── 20. CTA ──────────────────────────────────────────────────── */
.cta-band{
  border:1px solid var(--ink);
  background:var(--card-soft);
  padding:clamp(2.2rem,6vw,4.2rem);
  text-align:center;
  position:relative;
}
.cta-band h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2rem,5.6vw,4rem); line-height:1.02;
  letter-spacing:-0.035em; margin:0 0 1.1rem;
}
.cta-band p{
  margin:0 auto 2rem; max-width:50ch;
  font-size:clamp(1rem,1.8vw,1.18rem); line-height:1.6;
  color:var(--ink-soft); font-weight:300;
}
.cta-band .acts{display:flex; justify-content:center; flex-wrap:wrap; gap:0.9rem;}

/* ── 21. CLOSING COMPOSITION ──────────────────────────────────── */
.closing{
  background:var(--ink); color:var(--paper);
  text-align:center;
  padding-block:clamp(4rem,12vh,8rem);
}
.closing .big{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3.4rem,16vw,11rem);
  line-height:0.84; letter-spacing:-0.055em;
  margin:0 0 1.5rem; color:var(--paper);
}
.closing .three{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(0.92rem,2.7vw,1.65rem);
  letter-spacing:0.06em; margin:0 0 2.4rem;
  display:flex; justify-content:center; flex-wrap:wrap; gap:0.5rem 1.1rem;
}
.closing .three .a{color:var(--paper);}
.closing .three .b{color:#c9705a;}
.closing .three .c{color:#9aae7e;}
.closing .cur-lg{
  display:inline-block; width:12px; height:2.1rem;
  background:var(--term); margin-bottom:2rem;
  animation:blink 1.05s steps(2,start) infinite;
}
.closing .last{
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(0.98rem,2vw,1.22rem);
  color:rgba(239,229,214,0.6); margin:0; font-weight:300;
}

/* ── 22. FOOTER ───────────────────────────────────────────────── */
.foot{
  background:var(--ink);
  color:rgba(239,229,214,0.75);
  border-top:1px solid rgba(239,229,214,0.16);
  padding-block:2.6rem 2rem;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:2rem; padding-bottom:2rem;
  border-bottom:1px solid rgba(239,229,214,0.16);
}
.foot-brand .m{
  font-family:var(--f-display); font-weight:800; font-size:1.5rem;
  letter-spacing:-0.03em; color:var(--paper); margin:0 0 0.35rem;
}
.foot-brand .t{
  font-family:var(--f-display); font-weight:600; font-size:13px;
  letter-spacing:0.04em; color:var(--orange); margin:0 0 1.1rem;
}
.foot-brand .y{
  font-size:13.5px; line-height:1.6; color:rgba(239,229,214,0.6);
  font-weight:300; margin:0; max-width:34ch;
}
.foot-brand .y b{color:rgba(239,229,214,0.9); font-weight:500;}
.foot-col h3{
  font-family:var(--f-mono); font-size:9.5px; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(239,229,214,0.45); margin:0 0 0.9rem;
}
.foot-col a,.foot-col span{
  display:block; font-family:var(--f-mono); font-size:12px;
  color:rgba(239,229,214,0.75); text-decoration:none;
  padding:0.32rem 0; transition:color .25s var(--ease);
}
.foot-col a:hover{color:var(--orange);}
.foot-col span{color:rgba(239,229,214,0.35);}
.foot-btm{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  padding-top:1.4rem;
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(239,229,214,0.42);
}

/* ── 23. KEYFRAMES ────────────────────────────────────────────── */
@keyframes blink{50%{opacity:0;}}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes led{0%,100%{opacity:1;} 50%{opacity:0.3;}}

/* ── 24. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1080px){
  .lab-grid{grid-template-columns:1fr 1fr;}
  .road{grid-template-columns:1fr 1fr;}
  .mile{border-bottom:1px solid var(--rule);}
  .phi-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:2.4rem;}
  .def-grid{grid-template-columns:1fr; gap:2.2rem;}
  .pipe-wrap{grid-template-columns:1fr;}
  .rel{grid-template-columns:1fr; gap:0;}
  .rel-arrow{flex-direction:row; padding:1.1rem 0;}
  .rel-arrow .stem{height:26px;}
  .bec-row{grid-template-columns:1fr; gap:0.9rem;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:1.8rem;}
  .foot-brand{grid-column:1/-1;}

  .nav-mid{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule-firm);
    padding:0.4rem var(--gutter) 1rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-mid.open{transform:none; opacity:1; pointer-events:auto;}
  .nav-mid a{padding:0.8rem 0.2rem; font-size:12px; border-bottom:1px solid var(--rule);}
  .nav-mid a::after{left:0.2rem; right:auto; width:22px;}
  .nav-burger{display:block;}
  .nav-back{margin-left:auto; border-left:0; padding-left:0;}
}

@media (max-width:640px){
  body{font-size:16px; background-size:56px 56px, 56px 56px;}
  .lab-grid,.phi-grid,.road{grid-template-columns:1fr;}
  .phi{border-left:1px solid var(--rule);}
  .road{border-left:none;}
  .mile{border-left:1px solid var(--rule);}

  .lin{grid-template-columns:4.6rem 1fr; gap:0.5rem 1rem;}
  .lin .q{grid-column:1/-1; padding-top:0.15rem;}

  .board-hd{display:none;}
  .board-row{
    grid-template-columns:1fr auto; gap:0.45rem 1rem;
    padding:0.95rem 1rem;
  }
  .board-row .desc{grid-column:1/-1; order:3;}
  .st{justify-self:end;}

  .eco-row{grid-template-columns:2.4rem 1fr; gap:0.35rem 1rem;}
  .eco-row p{grid-column:2/-1;}
  .eco-row .pill{grid-column:2/-1; justify-self:start; margin-top:0.3rem;}

  .specsheet .row{flex-direction:column; gap:0.15rem;}
  .specsheet .row .v{text-align:left;}
  .lockup{grid-template-columns:1fr; gap:0.5rem;}
  .foot-grid{grid-template-columns:1fr;}
  .stage{padding:0.75rem 0.85rem; gap:0.7rem;}
  .stage .io{display:none;}
  .pipe-link{margin-left:calc(0.85rem + 0.8rem);}
}

/* ── 25. REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1; transform:none;}
  .draw{transform:scaleX(1);}
  .strip-track{animation:none;}
  .cur,.cur-lg{animation:none; opacity:1;}
}

/* ── 26. PRINT ────────────────────────────────────────────────── */
@media print{
  .nav,.strip,.fibre,.term{display:none !important;}
  body{background:#fff; color:#000; font-size:11pt;}
  .manifesto,.closing,.foot{background:#fff !important; color:#000 !important;}
  .manifesto h2.head,.closing .big,.mani p{color:#000 !important;}
  .rv{opacity:1 !important; transform:none !important;}
  .band{page-break-inside:avoid;}
}