/* Josh Javier · Portfolio B.2
   Dark editorial system: Source Serif 4 (display), IBM Plex Sans (text), IBM Plex Mono (labels). */

@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-display.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  color-scheme:dark;
  /* surfaces */
  --ground:#142331; --deep:#0E1924; --ground-2:#172839; --panel:#1A2B3C; --charcoal:#202526; --charcoal-2:#272C2D; --foot:#0A131B;
  /* text */
  --text:#F3EFE7; --text-2:#D9D4CA; --muted:#9D9A91; --faint:#6F7A80;
  /* accents */
  --terra:#C8794D; --terra-hi:#D68A5F; --terra-bg:rgba(200,121,77,.12);
  --blue:#6F93B8; --blue-hi:#A9C3DC; --blue-lo:#3E5C7E; --blue-bg:rgba(111,147,184,.10);
  /* lines */
  --rule:#2B3B49; --rule-2:#344858; --grid:#1A2C3C;
  /* type */
  --f-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --nav-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--f-body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--deep)}
a{color:inherit}
img,svg{max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-0.02em;line-height:1.06;text-wrap:balance}
h3,h4{line-height:1.15;letter-spacing:-0.012em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
:focus-visible{outline:2px solid var(--terra-hi);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--text);color:var(--ground);padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ---------------- Buttons and links ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-weight:500;font-size:15.5px;border-radius:8px;padding:13px 20px;border:1px solid transparent;cursor:pointer;font-family:var(--f-body);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.btn .ic{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn-p{background:var(--terra);color:#1A120D;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -12px rgba(200,121,77,.7)}
.btn-p:hover{background:var(--terra-hi);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 12px 26px -12px rgba(200,121,77,.85)}
.btn-p:active{transform:none}
.btn-p:hover .ic{transform:translateX(3px)}
.btn-g{border-color:var(--rule-2);color:var(--text)}
.btn-g:hover{border-color:var(--text-2)}
.btn-sm{padding:9px 14px;font-size:14px}
.lnk{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:500;border-bottom:1px solid var(--rule-2);padding-bottom:3px;transition:border-color .2s,color .2s}
.lnk .ic{width:16px;height:16px;transition:transform .25s var(--ease)}
.lnk:hover{border-color:var(--terra-hi)}
.lnk:hover .ic{transform:translateX(3px)}
.lnk.ext:hover .ic{transform:translate(2px,-2px)}

/* ---------------- Navigation ---------------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(14,25,36,.82);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--rule);background:rgba(14,25,36,.94)}
.nav .wrap{display:flex;align-items:center;gap:28px;min-height:var(--nav-h)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap;margin-right:auto}
.brand b{font-family:var(--f-body);font-weight:600;letter-spacing:-0.01em;font-size:17px}
.brand span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav-ch{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-hi);min-width:0;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.nav-ch.on{opacity:1;transform:none}
.nav-ch b{font-weight:500;color:var(--muted)}
.menu{display:flex;gap:4px;list-style:none;padding:0}
.menu a{display:flex;gap:6px;align-items:baseline;text-decoration:none;font-size:14.5px;color:var(--text-2);padding:8px 10px;border-radius:6px;transition:color .2s,background .2s}
.menu a i{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--faint)}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.menu a[aria-current="page"],.menu a.on{color:var(--text)}
.menu a[aria-current="page"] i,.menu a.on i{color:var(--terra-hi)}
.menu-btn{display:none;background:none;border:1px solid var(--rule-2);color:var(--text);border-radius:8px;width:42px;height:42px;place-items:center;cursor:pointer}
@media (max-width:1060px){.nav-ch{display:none}}
@media (max-width:1180px){.nav .btn .lg,.cnav .btn .lg{display:none}.brand span{display:none}}
@media (max-width:880px){
  .menu-btn{display:grid}
  .nav .btn{display:none}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--deep);border-bottom:1px solid var(--rule);padding:8px max(18px,env(safe-area-inset-left,0px)) 18px;display:none}
  .menu.open{display:flex}
  .menu a{padding:14px 4px;font-size:17px;border-bottom:1px solid var(--rule);border-radius:0}
  .menu .m-cta{display:block;margin-top:14px}
  .menu .m-cta a{border:0;justify-content:center;background:var(--terra);color:#1A120D;border-radius:8px;font-weight:600}
}
@media (min-width:881px){.menu .m-cta{display:none}}
@media (max-width:880px){html:not(.js) .menu-btn{display:none}html:not(.js) .nav .wrap{flex-wrap:wrap}html:not(.js) .menu{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:0 4px;border:0;padding:0 0 10px;background:none}html:not(.js) .menu a{border:0;padding:6px 8px;font-size:15px}html:not(.js) .menu .m-cta{display:none}}
html:not(.js) [role="tablist"]{display:none}
html:not(.js) [role="tabpanel"]+[role="tabpanel"]{margin-top:40px}

/* ---------------- Chapters ---------------- */
.ch{position:relative;padding-block:clamp(64px,8vw,104px)}
.ch-deep{background:var(--deep)}
.ch-ground{background:var(--ground)}
.ch-blue{background:var(--ground-2)}
.ch-blue::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);opacity:.7;pointer-events:none}
.ch-char{background:var(--charcoal)}
.ch>.wrap{position:relative}
/* edge between chapters: a short terracotta tick on a hairline */
.edge{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--rule) 15%,var(--rule) 85%,transparent)}
.edge::after{content:"";position:absolute;left:50%;top:-1px;width:48px;height:3px;margin-left:-24px;background:var(--terra);border-radius:2px;opacity:.75}
.chhead{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,400px);gap:10px 28px;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.chhead .num{font-family:var(--f-display);font-weight:400;font-size:clamp(56px,7vw,88px);line-height:.82;color:transparent;-webkit-text-stroke:1px #3C5164;align-self:start}
.chhead .lab{display:flex;gap:12px;align-items:center;color:var(--terra-hi);margin-bottom:14px}
.chhead .lab::after{content:"";height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,var(--rule-2),transparent)}
.chhead h2{font-size:clamp(32px,4.2vw,52px)}
.chhead .intro{color:var(--text-2);font-size:16.5px;padding-bottom:6px}
@media (max-width:980px){.chhead{grid-template-columns:auto minmax(0,1fr)}.chhead .intro{grid-column:2}}
@media (max-width:560px){.chhead{grid-template-columns:minmax(0,1fr)}.chhead .num{font-size:52px}.chhead .intro{grid-column:1}}
.ch-char .chhead .num{-webkit-text-stroke-color:#4A5153}

/* strata seam into About */
.strata{position:relative;height:96px;background:linear-gradient(180deg,var(--ground),var(--charcoal))}
.strata i{position:absolute;height:1px;left:0;right:0}
.strata i:nth-child(1){top:30px;background:linear-gradient(90deg,transparent 5%,rgba(111,147,184,.38) 30%,transparent 62%)}
.strata i:nth-child(2){top:44px;background:linear-gradient(90deg,transparent 22%,rgba(200,121,77,.5) 48%,transparent 76%)}
.strata i:nth-child(3){top:58px;background:linear-gradient(90deg,transparent 38%,rgba(217,212,202,.2) 70%,transparent 96%)}

/* ---------------- Reveal on scroll (JS adds .js to <html>) ---------------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}

/* ---------------- Icon tile ---------------- */
.tile{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--text);transition:transform .35s var(--ease)}
.tile::before{content:"";position:absolute;inset:5px -4px -4px 5px;border-radius:9px;background:#0C1721;border:1px solid var(--rule);transition:transform .35s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;border-radius:9px;background:linear-gradient(160deg,#243A50,#1A2B3C 70%);border:1px solid #3A5269;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .35s,box-shadow .35s,background .35s}
.tile .ic{position:relative;z-index:1;transition:transform .35s var(--ease),color .35s}
.tile.hot{color:var(--terra-hi)}
.tile.hot::after{background:linear-gradient(160deg,#3A2E28,#231F1F 70%);border-color:rgba(200,121,77,.55)}
.tile.sm{width:34px;height:34px}.tile.sm .ic{width:17px;height:17px}.tile.sm::before{inset:4px -3px -3px 4px;border-radius:7px}.tile.sm::after{border-radius:7px}
.tile.lg{width:56px;height:56px}.tile.lg .ic{width:24px;height:24px}
/* hover: lift, light, nudge the icon */
.lift{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.lift::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px 220px at 30% 0%,rgba(111,147,184,.13),transparent 65%);opacity:0;transition:opacity .45s;pointer-events:none}
.lift.warm::before{background:radial-gradient(420px 220px at 30% 0%,rgba(200,121,77,.12),transparent 65%)}
@media (hover:hover){
  .lift:hover{transform:translateY(-4px);border-color:#3F5870;box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
  .lift:hover::before{opacity:1}
  .lift:hover .tile{transform:translateY(-2px)}
  .lift:hover .tile::before{transform:translate(2px,2px)}
  .lift:hover .tile::after{border-color:#6F93B8;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(111,147,184,.12),0 10px 22px -10px rgba(111,147,184,.55)}
  .lift:hover .tile .ic{transform:translateY(-1px) scale(1.06)}
  .lift:hover .tile.hot::after{border-color:var(--terra);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 3px rgba(200,121,77,.12),0 10px 22px -10px rgba(200,121,77,.55)}
}

/* ---------------- Hero ---------------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 520px at 50% 92%,#1B2F44 0,transparent 70%),var(--ground);padding-block:clamp(44px,6vw,72px) 0}
.kick{display:flex;gap:10px;align-items:center;color:var(--muted);margin-bottom:24px}
.kick i{width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px var(--terra-bg)}
.hero h1{font-size:clamp(42px,5.5vw,80px);max-width:17ch;letter-spacing:-0.025em;line-height:1.03}
.hero h1 em{font-style:normal;color:var(--blue-hi)}
.lede-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-top:28px}
.lede{color:var(--text-2);font-size:clamp(17px,1.5vw,19.5px);max-width:52ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hero-fig{margin:clamp(24px,4vw,40px) -12px 0;will-change:transform}
.figcap{display:flex;gap:14px;color:var(--muted);font-size:13.5px;border-top:1px solid var(--rule);padding-top:14px;margin-top:18px}
.figcap .mono{color:var(--terra-hi);font-size:10.5px;padding-top:2px;white-space:nowrap}
@media (max-width:860px){.lede-row{grid-template-columns:minmax(0,1fr)}.ctas{justify-content:flex-start}}
/* Fig. 2: the same system, explained */
.explain{position:relative;padding-block:clamp(16px,2vw,32px) clamp(64px,8vw,96px);background:linear-gradient(180deg,transparent,#112030 40%,var(--ground))}
.explain-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:16px 48px;align-items:end;margin-bottom:40px}
.explain-head h2{font-size:clamp(28px,3.4vw,42px)}
.explain-head p{color:var(--text-2)}
.explain-head .mono{color:var(--terra-hi);display:block;margin-bottom:12px}
.thread{position:absolute;left:50%;top:-24px;width:1px;height:48px;background:linear-gradient(180deg,transparent,var(--blue) 60%,transparent);opacity:.6}
@media (max-width:860px){.explain-head{grid-template-columns:minmax(0,1fr)}}
.stages{display:none;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.stages li{display:grid;grid-template-columns:34px 34px minmax(0,1fr);gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid var(--rule)}
.stages .mono{color:var(--terra-hi);padding-top:8px}
.stages b{display:block;font-weight:600}
.stages b+span{color:var(--muted);font-size:14.5px}
@media (max-width:720px){
  .hero .iso .lbl-n,.hero .iso .lbl-t,.hero .iso .lbl-rule,.hero .iso .lbl-s,.hero .iso .callout{display:none}
  .hero-fig{overflow:hidden;margin-left:-18px;margin-right:-18px}
  .hero svg.hero-iso{width:210%;max-width:none;margin-left:-55%;margin-top:-56px;margin-bottom:-62px}
  .explain .schem{display:none}
  .stages{display:block}
}

/* ---------------- Work previews ---------------- */
.feat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 48px;align-items:center;border:1px solid var(--rule);border-radius:18px;padding:clamp(24px,3.5vw,48px);background:radial-gradient(700px 400px at 78% 55%,#1A2E42,transparent 70%),linear-gradient(180deg,#132232,var(--deep));overflow:hidden}
.feat .mono.k{color:var(--terra-hi)}
.feat h3{font-size:clamp(28px,3.2vw,42px);margin-top:14px}
.feat .sub{color:var(--muted);margin-top:10px;font-size:15px}
.feat p.d{color:var(--text-2);margin-top:18px;max-width:46ch}
.feat .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.feat .acts{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:28px;align-items:center}
.feat .vis{margin:-12px -12px -20px}
@media (max-width:900px){.feat{grid-template-columns:minmax(0,1fr)}.feat .vis{order:-1;margin:-8px -14px 0}}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);padding:6px 11px;border:1px solid var(--rule-2);border-radius:999px;background:rgba(14,25,36,.4)}
.chip .ic{width:14px;height:14px;color:var(--blue-hi)}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.proj{position:relative;border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--ground-2);display:flex;flex-direction:column}
.proj .shot{position:relative;padding:28px 28px 0;background:radial-gradient(500px 240px at 50% 100%,#21384F,transparent 70%),#132233;overflow:hidden;aspect-ratio:16/9.4}
.proj .shot .frame{transform:translateY(6px);transition:transform .6s var(--ease)}
.proj .shot .frame.f2{position:absolute;right:20px;bottom:-30px;width:44%;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
@media (hover:hover){.proj:hover .shot .frame{transform:translateY(0)}.proj:hover .shot .frame.f2{transform:translateY(-8px)}}
.proj .pb{padding:24px 28px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.proj .mono{color:var(--muted)}
.proj h3{font-size:clamp(24px,2.4vw,30px)}
.proj p{color:var(--text-2);font-size:15.5px}
.proj .acts{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:auto;padding-top:12px}
@media (max-width:860px){.more{grid-template-columns:minmax(0,1fr)}}

/* interface frame */
.frame{border:1px solid var(--rule-2);border-radius:10px;overflow:hidden;background:#172839;box-shadow:0 30px 60px -32px rgba(0,0,0,.75)}
.frame .fb{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame .fb i{display:flex;gap:5px;flex:none}.frame .fb i b{width:7px;height:7px;border-radius:50%;background:var(--rule-2)}
.frame img{display:block;width:100%}

/* ---------------- Capabilities ---------------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap{position:relative;border:1px solid var(--rule);border-radius:16px;background:linear-gradient(180deg,var(--ground-2),var(--ground) 80%);display:flex;flex-direction:column;overflow:hidden}
.cap .chd{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 0;position:relative}
.cap .chd .mono{color:var(--faint)}
.cap .vis{padding:4px 22px 0;position:relative}
.cap .cb{padding:4px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1;position:relative}
.cap h3{font-size:22px}
.cap .d{color:var(--text-2);font-size:15.5px}
.po{display:grid;gap:12px;margin:8px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.po dt{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.po dt .ic{width:14px;height:14px}
.po .ok dt{color:var(--terra-hi)}
.po dd{margin:5px 0 0;font-size:15px;color:var(--text-2);line-height:1.5}
.po .ok dd{color:var(--text)}
.cap ul{list-style:none;padding:14px 0 0;margin-top:6px;border-top:1px solid var(--rule);display:grid;gap:9px}
.cap li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:14.5px;color:var(--text-2);line-height:1.45}
.cap li .ic{width:16px;height:16px;color:var(--terra-hi);margin-top:2px}
.cap li b{color:var(--text);font-weight:500}
.cap .iso{transition:transform .6s var(--ease)}
@media (hover:hover){.cap:hover .iso{transform:translateY(-4px)}}
@media (max-width:1000px){.caps{grid-template-columns:minmax(0,1fr)}.cap .vis{max-width:360px}}
@media (max-width:560px){.cap .vis{max-width:280px;margin:0 auto}}

/* ---------------- Route (C2) ---------------- */
.route{position:relative;border:1px solid var(--rule);border-radius:18px;padding:40px 28px 28px;background:linear-gradient(180deg,rgba(23,40,57,.9),rgba(20,35,49,.9))}
.route svg.line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.route .rl{fill:none;stroke:var(--blue);stroke-opacity:.5;stroke-width:1.5}
.route .rl-hot{fill:none;stroke:var(--terra);stroke-opacity:.7;stroke-width:1.5}
.route .pk{fill:var(--blue-hi)}
.stations{position:relative;list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 24px}
.stations li:nth-child(5){grid-column:4;grid-row:2}.stations li:nth-child(6){grid-column:3;grid-row:2}.stations li:nth-child(7){grid-column:2;grid-row:2}.stations li:nth-child(8){grid-column:1;grid-row:2}
.station{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:6px;width:100%}
.station .ph{font-size:10px;color:var(--faint)}
.station .t{font-weight:600;font-size:16.5px}
.station .q{font-size:14.5px;color:var(--text-2);max-width:26ch;line-height:1.5}
.station .tile{background:var(--ground-2);border-radius:9px}
@media (hover:hover){.station:hover .tile{transform:translateY(-2px)}.station:hover .tile::after{border-color:var(--blue)}}
.station[aria-pressed="true"] .tile{color:var(--terra-hi)}
.station[aria-pressed="true"] .tile::after{border-color:rgba(200,121,77,.75)}
.station[aria-pressed="true"] .t{color:var(--terra-hi)}
.rdetail{position:relative;margin-top:40px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:18px 32px;align-items:start;padding:22px 24px;border-radius:12px;background:rgba(14,25,36,.85);border:1px solid var(--rule-2)}
.rdetail .mono{color:var(--terra-hi)}
.rdetail h3{font-size:24px;margin-top:4px}
.rdetail p{font-size:15px;color:var(--text-2)}
.out{display:flex;gap:8px;font-size:14.5px;color:var(--text)}
.out .ic{width:16px;height:16px;color:var(--blue-hi);margin-top:3px}
.out b{font-weight:600}
.route-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.route-foot p{color:var(--muted);font-size:14.5px}
@media (max-width:900px){
  .stations{grid-template-columns:minmax(0,1fr);gap:18px}
  .stations li{grid-column:1!important;grid-row:auto!important}
  .station{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:4px 0}
  .station .q{max-width:none}
  .station .tx{display:grid;gap:2px}
  .rdetail{grid-template-columns:minmax(0,1fr)}
  .route{padding:24px 18px}
}
@media (min-width:901px){.station .tx{display:contents}}

/* ---------------- Principles ---------------- */
.standards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--ground-2),rgba(23,40,57,.4));position:relative}
.standards::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--terra) 50% 75%,var(--blue) 75%);opacity:.7}
.std{position:relative;padding:28px 26px 30px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;transition:background .35s}
.std:first-child{border-left:0}
.std .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.std .n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.std h3{font-size:23px}
.std p{font-size:15px;color:var(--text-2)}
@media (hover:hover){.std:hover{background:rgba(111,147,184,.06)}.std.warm:hover{background:rgba(200,121,77,.06)}.std:hover .tile{transform:translateY(-2px)}.std:hover .tile::after{border-color:var(--blue)}.std.warm:hover .tile::after{border-color:var(--terra)}}
@media (max-width:1000px){.standards{grid-template-columns:repeat(2,minmax(0,1fr))}.std:nth-child(3){border-left:0}.std:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:560px){.standards{grid-template-columns:minmax(0,1fr)}.std{border-left:0}.std+.std{border-top:1px solid var(--rule)}}
.princ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pr{position:relative;border:1px solid var(--rule);border-radius:16px;padding:24px 24px 26px;background:var(--ground-2);overflow:hidden;display:flex;flex-direction:column;gap:12px}
.pr::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:linear-gradient(30deg,transparent 49.4%,var(--rule) 49.6%,transparent 50.6%) 0 0/24px 14px,linear-gradient(-30deg,transparent 49.4%,var(--rule) 49.6%,transparent 50.6%) 0 0/24px 14px;mask-image:radial-gradient(closest-side,#000,transparent);-webkit-mask-image:radial-gradient(closest-side,#000,transparent);opacity:.8;pointer-events:none}
.pr .n{position:absolute;top:28px;right:24px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.pr h3{font-size:24px;margin-top:14px}
.pr p{font-size:15px;color:var(--text-2)}
@media (max-width:1000px){.princ{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.princ{grid-template-columns:minmax(0,1fr)}.pr{min-height:0}.pr h3{margin-top:12px}}

/* ---------------- About ---------------- */
.about{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,320px);gap:32px 56px;align-items:start}
.portrait{margin:0}
.portrait .box{aspect-ratio:4/5;border-radius:14px;background:linear-gradient(160deg,#2C3234,#1B1F20);border:1px solid #3A4143;display:grid;place-items:center;color:#6E7477;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;overflow:hidden}
.portrait .box img{width:100%;height:100%;object-fit:cover}
.portrait figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.portrait .box.todo{border:1.5px dashed rgba(200,121,77,.6);background:repeating-linear-gradient(135deg,#232829 0 12px,#1F2324 12px 24px)}
.portrait .box.todo span{display:grid;justify-items:center;gap:8px;color:var(--terra-hi);text-align:center}
.portrait .box.todo span .ic{width:22px;height:22px}
.portrait .box.todo b{font-family:var(--f-body);font-size:15px;letter-spacing:0;text-transform:none;color:var(--text-2);font-weight:500}
.about-text .lead{font-family:var(--f-display);font-size:clamp(22px,2.2vw,27px);line-height:1.3;letter-spacing:-0.012em;color:var(--text)}
.about-text p+p{margin-top:16px}
.about-text p{color:var(--text-2)}
.facts{display:grid;gap:0;margin:0}
.facts>div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid #363C3E}
.facts>div:first-child{border-top:0;padding-top:0}
.facts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:4px 0 0;font-size:15px;color:var(--text)}
.ch-char .tile::after{background:linear-gradient(160deg,#33393B,#262B2C 70%);border-color:#4A5153}
.ch-char .tile::before{background:#161A1B;border-color:#363C3E}
@media (max-width:1060px){.about{grid-template-columns:minmax(0,240px) minmax(0,1fr)}.facts{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.facts>div:nth-child(2){border-top:0;padding-top:0}}
@media (max-width:640px){.about{grid-template-columns:minmax(0,1fr)}.portrait{max-width:220px}.facts{grid-template-columns:minmax(0,1fr)}.facts>div:nth-child(2){border-top:1px solid #363C3E;padding-top:16px}}

/* ---------------- Contact ---------------- */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 64px;align-items:center}
.contact h2{font-size:clamp(36px,4.8vw,60px)}
.contact .intro{color:var(--text-2);margin-top:18px;max-width:48ch;font-size:17px}
.contact .bookend{display:block;width:240px;margin:24px 0 -20px -18px}
.crows{display:grid;gap:12px}
.crow{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--ground-2);text-decoration:none;overflow:hidden}
.crow b{display:block;font-weight:600;font-size:16px}
.crow div>span{display:block;font-size:14px;color:var(--muted);word-break:break-word}
.crow .go{width:18px;height:18px;color:var(--muted);transition:transform .3s var(--ease),color .3s}
@media (hover:hover){.crow:hover .go{transform:translate(2px,-2px);color:var(--text)}}
.crow.main{background:linear-gradient(135deg,#2A2320,#1C2228 60%);border-color:rgba(200,121,77,.45)}
.copy{font:500 13px var(--f-body);color:var(--text-2);background:none;border:1px solid var(--rule-2);border-radius:7px;padding:7px 12px;cursor:pointer;position:relative}
.copy:hover{border-color:var(--text-2)}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}.contact .bookend{display:none}}

/* ---------------- Footer ---------------- */
.foot{background:var(--foot);border-top:1px solid var(--rule);padding-block:56px 40px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot .brand{margin:0}
.foot p{color:var(--muted);margin-top:12px;max-width:34ch}
.foot h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--text-2)}
.foot a:hover{color:var(--text)}
.foot .base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--rule);color:var(--faint);font-size:13px}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1 / -1}}

/* ---------------- Page hero (Approach, case studies) ---------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);list-style:none;padding:0}
.crumbs li{display:flex;gap:8px;align-items:center}
.crumbs a{text-decoration:none;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.crumbs a:hover{color:var(--text)}
.crumbs .ic{width:14px;height:14px}
.crumbs [aria-current]{color:var(--text-2)}
.phero{position:relative;padding-block:clamp(36px,5vw,56px) clamp(48px,6vw,80px);background:radial-gradient(900px 400px at 85% 30%,#1A2E42,transparent 70%),var(--ground);overflow:hidden}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-top:clamp(36px,5vw,56px)}
.phero .k{color:var(--terra-hi)}
.phero h1{font-size:clamp(40px,5.4vw,72px);margin-top:16px;letter-spacing:-0.024em}
.phero .sub{font-family:var(--f-display);font-size:clamp(20px,2vw,25px);color:var(--text-2);margin-top:14px;line-height:1.3;letter-spacing:-0.01em}
.phero .lede{margin-top:22px}
.phero .note{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;margin-top:18px;max-width:56ch}
.phero .note .ic{width:16px;height:16px;margin-top:3px;color:var(--blue-hi)}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:900px){.phero-grid{grid-template-columns:minmax(0,1fr)}}
.meta{display:grid;margin:0}
.meta>div{display:grid;grid-template-columns:34px 92px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.meta>div:last-child{border-bottom:1px solid var(--rule)}
.meta dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:0;font-size:15px}
@media (max-width:480px){.meta>div{grid-template-columns:34px minmax(0,1fr)}.meta dd{grid-column:2}}

/* case chapter bar */
.cnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h));z-index:40;background:rgba(14,25,36,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--rule)}
.cnav .wrap{display:flex;align-items:center;gap:16px}
.cnav ol{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;list-style:none;padding:0;flex:1;min-width:0}
.cnav ol::-webkit-scrollbar{display:none}
.cnav a{flex:none;display:flex;gap:6px;align-items:baseline;text-decoration:none;font-size:14px;color:var(--muted);padding:15px 10px 13px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.cnav a i{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--faint)}
.cnav a:hover{color:var(--text)}
.cnav a.on{color:var(--text);border-bottom-color:var(--terra)}
.cnav a.on i{color:var(--terra-hi)}
.cnav .prog{height:2px;position:absolute;left:0;bottom:-1px;background:var(--blue);opacity:.6;width:0}
.cnav .cta{flex:none}
@media (max-width:760px){.cnav .cta{display:none}}

/* case chapters */
.cs{position:relative;padding-block:clamp(64px,8vw,104px)}
.cs:nth-of-type(even){background:var(--deep)}
.cs-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 24px;margin-bottom:clamp(28px,4vw,44px)}
.cs-head .num{font-family:var(--f-display);font-size:48px;line-height:.9;color:transparent;-webkit-text-stroke:1px #3C5164}
.cs-head .mono{color:var(--terra-hi);display:block;margin-bottom:10px}
.cs-head h2{font-size:clamp(28px,3.4vw,42px);max-width:22ch}
.cs-body{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px}
.cs-body>*{grid-column:2}
.prose{max-width:68ch;color:var(--text-2);font-size:17px}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:16px}
.prose b,.prose strong{color:var(--text);font-weight:600}
.prose ul{padding:0;list-style:none;display:grid;gap:10px}
.prose li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px}
.prose li::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--blue);margin-top:10px}
.prose.big{font-family:var(--f-display);font-size:clamp(21px,2.2vw,26px);line-height:1.35;color:var(--text);letter-spacing:-0.01em}
.pull{font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-0.014em;color:var(--text);border-left:2px solid var(--terra);padding-left:24px;max-width:30ch;margin-block:8px}
@media (max-width:700px){.cs-head,.cs-body{grid-template-columns:minmax(0,1fr)}.cs-body>*{grid-column:1}.cs-head .num{font-size:40px}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trio>div{position:relative;border:1px solid var(--rule);border-radius:14px;padding:22px;background:var(--ground-2)}
.trio .tile{margin-bottom:16px}
.trio b{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-hi);font-weight:500;margin-bottom:8px}
.trio p{font-size:15.5px;color:var(--text-2)}
@media (max-width:860px){.trio{grid-template-columns:minmax(0,1fr)}}
.logic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.logic>div{position:relative;border:1px solid var(--rule);border-radius:14px;padding:24px;background:var(--ground-2);display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.logic h3{font-size:21px}
.logic p{font-size:15.5px;color:var(--text-2);margin-top:8px}
@media (max-width:860px){.logic{grid-template-columns:minmax(0,1fr)}}
.panelfig{margin:0;border:1px solid var(--rule);border-radius:16px;padding:clamp(16px,2.4vw,28px);background:radial-gradient(800px 300px at 50% 40%,#1A2E42,transparent 70%),var(--ground-2)}
.figcap2{display:flex;gap:12px;margin-top:16px;color:var(--muted);font-size:14px}
.figcap2 .ic{width:16px;height:16px;flex:none;margin-top:3px;color:var(--blue-hi)}
.illus{display:inline-flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-hi);border:1px solid rgba(200,121,77,.45);border-radius:6px;padding:6px 10px}
.illus .ic{width:14px;height:14px}
.shots{display:grid;gap:28px}
.shotfig{margin:0}
.shotfig figcaption{display:flex;gap:12px;margin-top:14px;color:var(--text-2);font-size:15px;max-width:70ch}
.shotfig figcaption .ic{width:16px;height:16px;flex:none;margin-top:4px;color:var(--blue-hi)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pair .tag{display:inline-flex;margin-bottom:10px}
@media (max-width:760px){.pair{grid-template-columns:minmax(0,1fr)}}
.compose{position:relative;padding-bottom:8%}
.compose .frame.f2{position:absolute;right:-2%;bottom:0;width:46%}
@media (max-width:760px){.compose{padding-bottom:0}.compose .frame.f2{position:relative;right:auto;width:100%;margin-top:16px}}

/* flow of layered cards (WIP, HR) */
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 6px 16px;scrollbar-width:thin}
.flow .fc{position:relative;flex:1 0 150px;min-width:150px;border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);padding:16px 16px 18px;box-shadow:7px 7px 0 -1px #0F1C29,7px 7px 0 0 #23374A}
.flow .fc .mono{font-size:10px;color:var(--faint)}
.flow .fc b{display:block;font-weight:600;margin-top:10px;font-size:15px}
.flow .fc b+span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.flow .fc .tile{margin-bottom:4px}
.flow .fc.hot{border-color:rgba(200,121,77,.55);background:#1F2A31}
.flow .ar{flex:0 0 34px;display:grid;place-items:center;color:var(--blue)}
.flow .ar .ic{width:18px;height:18px}
@media (max-width:760px){.flow{flex-direction:column;overflow:visible}.flow .fc{min-width:0}.flow .ar{flex-basis:30px}.flow .ar .ic{transform:rotate(90deg)}}

/* section grid (HR) */
.sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sgrid>div{position:relative;border:1px solid var(--rule);border-radius:12px;padding:18px 16px;background:var(--ground-2)}
.sgrid b{display:block;font-weight:600;font-size:15px;margin-top:12px}
.sgrid b+span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.sgrid .mono{position:absolute;top:18px;right:16px;font-size:10px;color:var(--faint)}
.sgrid.funcs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.sgrid.funcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.sgrid{grid-template-columns:minmax(0,1fr)}}

/* tabs for redrawn layouts / screenshots */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tabs button{font:500 14px var(--f-body);color:var(--text-2);background:none;border:1px solid var(--rule-2);border-radius:999px;padding:9px 16px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:background .2s,border-color .2s,color .2s}
.tabs button .ic{width:15px;height:15px}
.tabs button:hover{border-color:var(--text-2)}
.tabs button[aria-selected="true"]{background:var(--text);color:var(--ground);border-color:var(--text)}
.bpgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.bp-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px 40px;align-items:start}
.bp-side .notes{margin-top:0;grid-row:1 / span 2;grid-column:2}
@media (max-width:860px){.bp-side{grid-template-columns:minmax(0,1fr)}.bp-side .notes{grid-row:auto;grid-column:1;margin-top:16px}}
.bpgrid .illus{margin-bottom:14px}
.bp-side h3{font-size:26px}
.bp-side>p{color:var(--text-2);margin-top:10px;font-size:15.5px}
.notes{list-style:none;padding:0;display:grid;gap:14px;margin-top:22px}
.notes li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;font-size:15px;color:var(--text-2)}
.notes li i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--terra);color:#142331;font:600 11px var(--f-body);font-style:normal;margin-top:1px}

.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){.scroll-x>svg{min-width:720px}}
.swipe{display:none;font-size:13px;color:var(--muted);margin:0 0 10px;gap:8px;align-items:center}
@media (max-width:760px){.swipe{display:flex}}

/* interactive system map */
.smap-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.sysmap .clu{cursor:pointer;outline:none}
.sysmap .clu .cl{transition:fill .3s,stroke .3s}
.sysmap .clu:hover .cl,.sysmap .clu:focus-visible .cl{fill:#1C3247;stroke:#5B7FA6}
.sysmap .clu:focus-visible .cl{stroke:var(--terra-hi);stroke-width:2}
.sysmap .clu.on .cl{fill:#1E354B;stroke:var(--blue-hi)}
.sysmap .clu-x.on .cl{stroke:var(--terra-hi)}
.sysmap[data-active] .clu:not(.on){opacity:.42}
.sysmap[data-active] .cw:not(.on){opacity:.18}
.sysmap .cw.on{stroke-width:2.4}
.sysmap .clu,.sysmap .cw{transition:opacity .35s}
.sdetail{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);gap:16px 28px;align-items:start;border:1px solid var(--rule-2);border-radius:14px;padding:22px 24px;background:rgba(14,25,36,.85);min-height:118px}
.sdetail .mono{color:var(--terra-hi)}
.sdetail h3{font-size:24px;margin-top:4px}
.sdetail p{font-size:15px;color:var(--text-2)}
.sdetail ul{list-style:none;padding:0;display:grid;gap:8px}
.sdetail li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:14.5px;color:var(--text-2)}
.sdetail li .ic{width:16px;height:16px;color:var(--blue-hi);margin-top:3px}
.sdetail .mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sdetail .mods button{font:500 13px var(--f-body);color:var(--text-2);background:none;border:1px solid var(--rule-2);border-radius:999px;padding:5px 11px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.sdetail .mods button .ic{width:13px;height:13px;color:var(--terra-hi)}
.sdetail .mods button:hover{border-color:var(--terra-hi);color:var(--text)}
.sdetail .mods span{font-size:13px;color:var(--muted);border:1px dashed var(--rule-2);border-radius:999px;padding:5px 11px}
@media (max-width:860px){.sdetail{grid-template-columns:minmax(0,1fr)}}
.mclusters{display:none;gap:10px}
.mclusters button{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;width:100%;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--ground-2);color:inherit;font:inherit;cursor:pointer}
.mclusters button b{display:block;font-weight:600}
.mclusters button div>span{font-size:13.5px;color:var(--muted)}
.mclusters button[aria-pressed="true"]{border-color:var(--blue-hi)}
.mclusters .mono{color:var(--faint);font-size:10.5px}
@media (max-width:760px){.smap-svg{display:none}.mclusters{display:grid}}
.msrc{display:none}
@media (max-width:760px){.msrc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}.msrc .ic.ar{width:16px;height:16px;color:var(--blue)}}

/* Read Me structure */
.readme{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.doc{border:1px solid var(--rule-2);border-radius:14px;background:#172839;padding:24px;position:relative;box-shadow:10px 10px 0 -1px #0F1C29,10px 10px 0 0 #23374A}
.doc .dh{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:18px}
.doc .dh b{font-weight:600}
.doc .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.doc .sec{display:grid;gap:7px;margin-bottom:16px}
.doc .sec b{font-size:13px;font-weight:600;color:var(--text);display:flex;gap:8px;align-items:center}
.doc .sec b::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue-lo)}
.doc .sec.hot b::before{background:var(--terra)}
.doc .sk{height:6px;border-radius:3px;background:#22374B}
.doc .sk.s{width:70%}.doc .sk.m{width:85%}
.audit{border:1px solid var(--rule);border-radius:14px;padding:22px;background:var(--ground-2);display:flex;flex-direction:column;gap:12px}
.audit p{font-size:15px;color:var(--text-2)}
@media (max-width:900px){.readme{grid-template-columns:minmax(0,1fr)}.doc .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.doc .cols{grid-template-columns:minmax(0,1fr)}}

/* limitations list */
.lims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lims>div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;border:1px solid var(--rule);border-radius:12px;padding:18px;background:var(--ground-2)}
.lims b{display:block;font-weight:600}
.lims p{font-size:15px;color:var(--text-2);margin-top:4px}
@media (max-width:860px){.lims{grid-template-columns:minmax(0,1fr)}}

/* closing CTA */
.final{position:relative;padding-block:clamp(72px,9vw,112px);background:var(--deep);overflow:hidden}
.final .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.final h2{font-size:clamp(32px,4vw,50px);max-width:18ch}
.final p{color:var(--text-2);margin-top:14px}
.final .acts{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.final .wrap{grid-template-columns:minmax(0,1fr)}}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.next a{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border:1px solid var(--rule);border-radius:14px;text-decoration:none;background:var(--ground-2)}
.next a span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.next a b{display:block;font-family:var(--f-display);font-weight:400;font-size:24px;margin-top:6px;letter-spacing:-0.01em}
.next .ic{width:20px;height:20px;color:var(--muted);transition:transform .3s var(--ease)}
@media (hover:hover){.next a:hover .ic{transform:translateX(4px);color:var(--text)}}
@media (max-width:760px){.next{grid-template-columns:minmax(0,1fr)}}

/* Approach build (C1) */
.build{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.build .stage{overflow:hidden;position:sticky;top:calc(var(--nav-h) + 24px);border:1px solid var(--rule);border-radius:18px;background:radial-gradient(700px 360px at 50% 70%,#1B3045,transparent 70%),var(--ground-2);padding:18px 12px 8px}
.js .proc-scene .st{opacity:0;transform:translateY(-16px);transition:opacity .5s ease,transform .7s var(--ease)}
.proc-scene .st.on{opacity:1;transform:none}
.proc-scene .st.on.cur{filter:drop-shadow(0 0 10px rgba(169,195,220,.35))}
.proc-scene .st.on.dim{opacity:.22}
.build[data-mode="assembled"] .stage{top:calc(var(--nav-h) + 24px)}
.stage-ctl{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 10px;gap:10px}
.stage-ctl .mono{color:var(--muted)}
.stage-ctl .btns{display:flex;gap:6px}
.icobtn{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;border:1px solid var(--rule-2);background:none;color:var(--text);cursor:pointer}
.icobtn:hover{border-color:var(--text-2)}
.icobtn .ic{width:18px;height:18px}
.prog{height:2px;background:var(--rule);margin:0 10px 8px;border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;width:12.5%;background:var(--terra);transition:width .5s ease}
.steplist{list-style:none;padding:0;display:grid;gap:6px}
.sbtn{position:relative;width:100%;text-align:left;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start;padding:14px 16px;border-radius:12px;border:1px solid transparent;background:none;color:var(--text-2);cursor:pointer;font:inherit;transition:background .25s,border-color .25s}
.sbtn:hover{background:rgba(255,255,255,.02);border-color:var(--rule)}
.sbtn .mono{display:block;font-size:10.5px;color:var(--faint)}
.sbtn .t{display:block;font-weight:600;color:var(--text);font-size:17px;margin-top:2px}
.sbtn .q{display:block;font-size:14.5px;color:var(--muted)}
.sbtn[aria-current="step"]{background:var(--ground-2);border-color:var(--rule-2)}
.sbtn[aria-current="step"] .mono{color:var(--terra-hi)}
.sbtn[aria-current="step"] .tile{color:var(--terra-hi)}
.sbtn .more-d{display:grid;grid-column:2;margin-top:4px;padding-top:12px;border-top:1px solid var(--rule);gap:10px}
.js .sbtn .more-d{display:none}
.js .sbtn[aria-current="step"] .more-d{display:grid}
.sbtn .more-d p{font-size:15px;color:var(--text-2)}
@media (max-width:960px){.build{grid-template-columns:minmax(0,1fr)}.build .stage{position:relative;top:0}}
.applied{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.applied a{position:relative;border:1px solid var(--rule);border-radius:14px;padding:22px;text-decoration:none;background:var(--ground-2);display:flex;flex-direction:column;gap:10px}
.applied a .mono{color:var(--muted)}
.applied a b{font-family:var(--f-display);font-weight:400;font-size:23px;letter-spacing:-0.01em;line-height:1.2}
.applied a p{font-size:14.5px;color:var(--text-2)}
.applied a .lnk{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.applied{grid-template-columns:minmax(0,1fr)}}

/* 404 */
.nf{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;background:radial-gradient(900px 400px at 70% 60%,#1A2E42,transparent 70%),var(--ground)}
.nf h1{font-size:clamp(44px,7vw,88px);max-width:14ch;margin-top:18px}
.nf p{color:var(--text-2);font-size:18px;margin-top:20px;max-width:46ch}

/* motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}

/* ---------------- Isometric artwork ---------------- */
.iso{display:block;width:100%;height:auto;overflow:visible}
.iso .gr{fill:none;stroke:#1E3346;stroke-width:1}
.iso .gr2{fill:none;stroke:#2A4056;stroke-width:.6;opacity:.5}
.iso .shadow{fill:#060D14;opacity:.55}
.iso .bx path{stroke-linejoin:round;stroke-width:.8}
.iso .plat .ft{fill:#1F3346;stroke:#30475D}.iso .plat .fl{fill:#172838;stroke:#2A3F53}.iso .plat .fr{fill:#0F1D2A;stroke:#243848}
.iso .plat-m .ft{fill:#22394F}
.iso .src .ft{fill:#2C4359;stroke:#4A6580}.iso .src .fl{fill:#203345;stroke:#3A5269}.iso .src .fr{fill:#17283A;stroke:#33495E}
.iso .glass .ft{fill:rgba(126,160,196,.16);stroke:#7FA2C4;stroke-opacity:.8}.iso .glass .fl{fill:rgba(126,160,196,.10);stroke:#7FA2C4;stroke-opacity:.5}.iso .glass .fr{fill:rgba(126,160,196,.06);stroke:#7FA2C4;stroke-opacity:.4}
.iso .plinth .ft{fill:#2A4560;stroke:#4A6A8A}.iso .plinth .fl{fill:#1F354B;stroke:#3A5670}.iso .plinth .fr{fill:#162839;stroke:#324B63}
.iso .panel .ft{fill:#33495F;stroke:#4C6680}.iso .panel .fl{fill:#1D3044;stroke:#3F5871}.iso .panel .fr{fill:#14243A;stroke:#2F465C}
.iso .cy .cs{stroke:#7FA2C4;stroke-opacity:.35;stroke-width:.8}
.iso .cy .ct{fill:#4E739A;stroke:#8FB0D0;stroke-opacity:.6;stroke-width:.8}
.iso .mtop{fill:url(#gTop);stroke:#B9CFE3;stroke-opacity:.7;stroke-width:.8}
.iso .glow{fill:#7FA2C4;opacity:.35}
.iso .sch{stroke:#203A55;stroke-width:1.2;opacity:.9}
.iso .snode{fill:#F3EFE7;stroke:#203A55;stroke-width:1}
.iso .score{fill:#C8794D;stroke:#F3EFE7;stroke-width:1.2}
.iso .tl{stroke:#5F7D9B;stroke-width:.8}
.iso .port{fill:#7FA2C4}
.iso .rod{stroke:#7FA2C4;stroke-opacity:.45;stroke-width:1}
.iso .chk{fill:none;stroke:#A9C3DC;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iso .ph{fill:#7FA2C4;opacity:.7}
.iso .pb{fill:#6F93B8}.iso .pbt{fill:#6F93B8;opacity:.85}
.iso .pline{fill:none;stroke:#A9C3DC;stroke-width:1.6;stroke-linejoin:round}
.iso .pax{fill:#4A6580}
.iso .pt{fill:#2D4A66;stroke:#5B7FA6;stroke-width:.6}
.iso .pt-hot{fill:#C8794D}
.iso .dtile{fill:#24394D;stroke:#3C566F;stroke-width:.8}
.iso .dtile-hot{fill:rgba(200,121,77,.28);stroke:#C8794D;stroke-width:1}
.iso .fbase{fill:#2A4157;stroke:#4C6680}
.iso .pole{stroke:#D9D4CA;stroke-width:1.6}
.iso .flag{fill:#C8794D}
.iso .track{fill:none;stroke:#6F93B8;stroke-width:1.4;stroke-opacity:.55}
.iso .track-hot{fill:none;stroke:#C8794D;stroke-width:1.4;stroke-opacity:.7}
.iso .pulse{fill:#A9C3DC}.iso .pulse-hot{fill:#E09A6E}
.iso .lbl-n{font:500 11px var(--f-mono,monospace);letter-spacing:.12em;fill:#C8794D}
.iso .lbl-t{font:500 15px var(--f-body,sans-serif);fill:#F3EFE7}
.iso .lbl-rule{stroke:#30475D}
.iso .lbl-s{font:500 10px var(--f-mono,monospace);letter-spacing:.1em;fill:#9D9A91}
.iso .lbl-s.hot{fill:#D68A5F}
.iso .callout .cc{fill:rgba(20,35,49,.88);stroke:#3A5269}
.iso .callout .leader{fill:none;stroke:#C8794D;stroke-opacity:.6;stroke-dasharray:2 3}
.iso .callout .ci{font:400 12.5px var(--f-body,sans-serif);fill:#D9D4CA}
.iso .callout .cm{fill:#3A5269}.iso .callout .cm-hot{fill:#C8794D}
.iso .orbit{fill:none;stroke:#6F93B8;stroke-opacity:.6;stroke-dasharray:3 4}
.iso .tick{fill:#C8794D;stroke:#142331;stroke-width:2}
.iso .qmark{font:600 20px var(--f-body,sans-serif);fill:#D68A5F}
.iso .badge circle{fill:#142331;stroke:#7FA2C4}.iso .badge path{fill:none;stroke:#A9C3DC;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iso .scan{fill:none;stroke:#C8794D;stroke-width:1.2;stroke-dasharray:4 4}
.iso .scan2{fill:none;stroke:#C8794D;stroke-opacity:.35;stroke-width:1}

.iso .glass-hot .ft{fill:rgba(200,121,77,.14);stroke:#C8794D;stroke-opacity:.8}.iso .glass-hot .fl{fill:rgba(200,121,77,.08);stroke:#C8794D;stroke-opacity:.5}.iso .glass-hot .fr{fill:rgba(200,121,77,.05);stroke:#C8794D;stroke-opacity:.4}
.iso .panel-hot .fl{fill:#3A2E28;stroke:#C8794D}.iso .panel-hot .ft{fill:#4A3A30;stroke:#D68A5F}
.iso .lbl-n,.iso .lbl-s{font-family:var(--f-mono)}.iso .lbl-t,.iso .callout .ci{font-family:var(--f-body)}
.eco{display:block;width:100%;height:auto}
.bookend{overflow:visible}

/* ---------------- Layered schematic ---------------- */

.hero-b{display:block;width:100%;height:auto;overflow:visible}
.hero-b .sh{fill:#050C13;opacity:.5}
.hero-b .fc{fill:#1A2B3C;stroke:#33495E;stroke-width:1}
.hero-b .ex-r,.hero-b .ex-b{fill:#0F1C29;stroke:#23374A;stroke-width:1;stroke-linejoin:round}
.hero-b .ex-b{fill:#122130}
.hero-b .m0.fc{fill:#1C3247;stroke:#3F5F80}.hero-b .m1.fc{fill:#20394F;stroke:#557AA0}.hero-b .m2.fc{fill:#25415C;stroke:#7FA2C4}
.hero-b .m.ex-r{fill:#142638;stroke:#2C4762}.hero-b .m.ex-b{fill:#172B3F;stroke:#2C4762}
.hero-b .dc.fc{fill:#1F2A31;stroke:rgba(200,121,77,.55)}
.hero-b .w,.hero-b .wh{fill:none;stroke-width:1.3}
.hero-b .w{stroke:#5B7FA6}.hero-b .wh{stroke:#C8794D}
.hero-b .wu{fill:none;stroke:#0B1621;stroke-width:5;stroke-linecap:round}
.hero-b .cm path{stroke:url(#gComet);stroke-width:2.4;stroke-linecap:round}.hero-b .cm circle{fill:#BFD3E6}
.hero-b .cm-h path{stroke:url(#gCometH);stroke-width:2.4;stroke-linecap:round}.hero-b .cm-h circle{fill:#E8A57C}
.hero-b .t{font:500 14px var(--f-body,sans-serif);fill:#F3EFE7}
.hero-b .s{font:500 9.5px var(--f-mono,monospace);letter-spacing:.1em;fill:#9D9A91}
.hero-b .s-acc{font:500 9.5px var(--f-mono,monospace);letter-spacing:.1em;fill:#D68A5F}
.hero-b .li{font:400 12.5px var(--f-body,sans-serif);fill:#D9D4CA}
.hero-b .chk{fill:none;stroke:#7FA2C4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-b .sch{stroke:#7FA2C4;stroke-width:1.2;opacity:.8}
.hero-b .sn{fill:#142331;stroke:#A9C3DC;stroke-width:1.4}
.hero-b .sc{fill:#C8794D}.hero-b .sh-c{fill:#C8794D;opacity:.14}
.hero-b .b{fill:#4A6A8A}.hero-b .bh{fill:#C8794D}
.hero-b .pl{transition:transform .6s cubic-bezier(.2,.7,.2,1)}

.hero-b .s,.hero-b .s-acc,.sysmap .k{font-family:var(--f-mono)}.hero-b .t,.hero-b .li,.sysmap .ct{font-family:var(--f-body)}
.sysmap .k{font-size:10px;letter-spacing:.14em;fill:#C8794D;font-weight:500}
.sysmap .cl{fill:#172839;stroke:#2B3F53}.sysmap .clu-x .cl{stroke:rgba(200,121,77,.5)}
.sysmap .chip{fill:#1D3044;stroke:#33495E}
.sysmap .ct{font-size:12px;fill:#E6E1D7}
.sysmap .star{fill:#C8794D}
.sysmap .reuse{fill:none;stroke:#C8794D;stroke-width:1.2;stroke-dasharray:3 3}
/* Fig. 2 builds itself: blocks settle, wires draw, the model stacks, decisions light up */
.js .schem .sx{opacity:0;transform:translate(var(--dx,0),var(--dy,18px)) rotate(var(--r,0deg));transform-box:fill-box;transform-origin:center;transition:opacity .7s ease,transform 1.1s var(--ease)}
.js .schem .wr path.w,.js .schem .wr path.wh{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease}
.js .schem .wr .wu{opacity:0;transition:opacity .6s}
.js .schem .ly{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s var(--ease)}
.js .schem .comets{opacity:0;transition:opacity .8s 2.4s}
.js .schem.in .sx,.js .schem.in .ly{opacity:1;transform:none}
.js .schem.in .wr path.w,.js .schem.in .wr path.wh{stroke-dashoffset:0}
.js .schem.in .wr .wu,.js .schem.in .comets{opacity:1}
.js .schem .sx.s1{transition-delay:0s}.js .schem .wr.s1 path{transition-delay:.45s}
.js .schem .sx.s2{transition-delay:.55s}.js .schem .wr.s2 path{transition-delay:.9s}
.js .schem .ly0{transition-delay:1s}.js .schem .ly1{transition-delay:1.15s}.js .schem .ly2{transition-delay:1.3s}.js .schem .ly3{transition-delay:1.45s}
.js .schem .wr.s3 path{transition-delay:1.6s}.js .schem .sx.s4{transition-delay:1.75s}
.js .schem .wr.s4 path{transition-delay:2.05s}.js .schem .sx.s5{transition-delay:2.2s}
@media (prefers-reduced-motion:reduce){.js .schem .sx,.js .schem .ly,.js .schem .comets,.js .schem .wr .wu{opacity:1;transform:none}.js .schem .wr path.w,.js .schem .wr path.wh{stroke-dashoffset:0}}

/* ---------------- Redrawn dashboards ---------------- */

.blueprint{display:block;width:100%;height:auto}
.blueprint text{font-family:var(--f-body)}
.bp-bg{fill:#15263A;stroke:#2B3F53}
.bp-h{font-size:22px;font-weight:600;fill:#F3EFE7}
.bp-sub{font-size:12px;fill:#9D9A91}
.bp-ctl{fill:none;stroke:#3A5269}.bp-ct{font-size:11.5px;fill:#D9D4CA}.bp-ln{fill:none;stroke:#9D9A91}
.bp-fl{font-size:10px;font-weight:600;fill:#9DB7D0}
.bp-band{fill:none;stroke:#2F4559}.bp-panel{fill:#132233;stroke:#26394B}
.bp-pill{fill:#22374B}.bp-pt{font:500 10px var(--f-mono)!important;letter-spacing:.12em;text-transform:uppercase;fill:#D9D4CA}
.bp-t{font-size:12px;font-weight:600;fill:#D9D4CA}.bp-t-hot{fill:#D68A5F}
.bp-note{font-size:9.5px;fill:#8C939A;font-style:normal}
.bp-a{fill:#6F93B8}.bp-tg{fill:none;stroke:#6F93B8;stroke-opacity:.55;stroke-dasharray:2 2}
.bp-s1{fill:#3E5C7E}.bp-s2{fill:#9D9A91;opacity:.55}
.bp-w{fill:#3A5269}.bp-ax{stroke:#3A5269}.bp-ref{stroke:#C8794D;stroke-dasharray:4 3}
.bp-row{fill:#1B2E41}.bp-hot{fill:#C8794D}
.bp-th{fill:#22374B}.bp-thl{font-size:10px;font-weight:600;fill:#D9D4CA}
.bp-kv{fill:#2C4359}.bp-kl{font-size:10.5px;font-weight:600;fill:#D9D4CA}
.bp-cell{fill:#2C4359}
.bp-flag{fill:rgba(111,147,184,.35)}.bp-flag-hot{fill:rgba(200,121,77,.75)}
.bp-donut{fill:none;stroke:#3E5C7E;stroke-width:14}.bp-donut-2{fill:none;stroke:#6F93B8;stroke-width:14}.bp-donut-hot{fill:none;stroke:#C8794D;stroke-width:14}
.bp-pie{fill:none;stroke:#2C4359}.bp-pie0{fill:none;stroke:#3E5C7E}.bp-pie1{fill:none;stroke:#6F93B8}.bp-pie2{fill:none;stroke:#C8794D}
.bp-l0,.bp-l1,.bp-l2,.bp-l3,.bp-l4{fill:none;stroke-width:1.8;stroke-linejoin:round}
.bp-l0{stroke:#9D9A91}.bp-l1{stroke:#6F93B8}.bp-l2{stroke:#A9C3DC}.bp-l3{stroke:#3E5C7E}.bp-l4{stroke:#C8794D;stroke-opacity:.6}
.bp-g0{fill:none;stroke:#2C4359;stroke-width:18}.bp-g1{fill:none;stroke:#6F93B8;stroke-width:18}
.bp-m circle{fill:#C8794D}.bp-m text{font:600 11px var(--f-body);fill:#142331}