/* ============================================================
   Systems Index — stylesheet
   Palette + type taken from the document's own spec:
   ground #0D0D0C · ink #ECE9E2 · dim #8E8C84 · accent #FF4D00
   Archivo (display/body) + IBM Plex Mono (.mono), self-hosted.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-400_900.woff2') format('woff2');
 font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
 font-weight:500;font-style:normal;font-display:swap}

:root{
 --ground:#0D0D0C; --ink:#ECE9E2; --dim:#8E8C84; --acc:#FF4D00;
 --line:rgba(236,233,226,.10); --line-2:rgba(236,233,226,.18);
 --panel:rgba(236,233,226,.028);
 --display:'Archivo',system-ui,sans-serif;
 --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --ease:cubic-bezier(.16,1,.3,1);
 --ease-io:cubic-bezier(.65,.05,.36,1);
 --dur:.72s;
 --gut:clamp(20px,4vw,64px);
 --wrap:1520px;
 --bar:34px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ground);color:var(--ink);
 font-family:var(--display);font-size:16px;line-height:1.55;
 font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
 overflow-x:hidden;padding-bottom:var(--bar)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,dt{margin:0}
::selection{background:var(--acc);color:#0D0D0C}

.mono{font-family:var(--mono);font-weight:400;font-size:.66rem;
 letter-spacing:.15em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.acc-ink{color:var(--acc)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:fixed;top:8px;left:8px;z-index:400;padding:.6rem .9rem;
 background:var(--acc);color:#0D0D0C;transform:translateY(-200%);transition:transform .25s var(--ease)}
.skip:focus-visible{transform:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* no background grid. plain ground, deliberately. */
.gridlay{display:none}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(0,0,0,.55) 100%)}
main,.hdr,.foot,.sbar{position:relative;z-index:2}

/* ── needs markers: never let a gap ship silently ── */
.needs{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:500;
 letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
 border:1px dashed rgba(255,77,0,.55);border-radius:2px;padding:.1em .45em;
 vertical-align:middle;white-space:nowrap}
.needs--inline{font-size:.55rem;padding:0 .3em}

/* ── header ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:120;
 border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease)}
.hdr.stuck{background:rgba(13,13,12,.82);backdrop-filter:blur(14px) saturate(140%);
 -webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
 height:clamp(56px,5.4vw,70px)}
.word{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.26em;
 text-transform:uppercase;white-space:nowrap}
.word::before{content:"";display:inline-block;width:8px;height:8px;background:var(--acc);
 margin-right:.7em;vertical-align:.05em}
.hdr-nav{display:none;gap:clamp(1rem,2.2vw,2.1rem)}
@media(min-width:900px){.hdr-nav{display:flex}}
.hdr-nav a{color:var(--dim);position:relative;padding-block:.35rem;transition:color .3s var(--ease)}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.hdr-nav a:hover,.hdr-nav a.on{color:var(--ink)}
.hdr-nav a.on::after{transform:scaleX(1)}
.hdr-read{display:flex;align-items:center;gap:.6rem;color:var(--dim);white-space:nowrap}
.hdr-read .sep{opacity:.4}
.sr-short{display:inline}.sr-full{display:none}
@media(min-width:640px){.sr-short{display:none}.sr-full{display:inline}}

/* ── hero ── */
.hero{padding-top:clamp(64px,7.5vw,104px);padding-bottom:clamp(40px,5vw,72px)}
.eyebrow{display:flex;justify-content:space-between;gap:1rem;color:var(--dim);
 padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.eyebrow-r{text-align:right}
.hero-core{display:grid;gap:clamp(30px,4vw,56px);
 padding-top:clamp(30px,4.4vw,64px);align-items:end}
@media(min-width:1080px){.hero-core{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.d-hero{font-size:clamp(2.15rem,5.55vw,5.5rem);font-weight:800;line-height:.9;
 letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.rl{display:block;overflow:hidden}
.rl-in{display:block}
.rl-acc{color:var(--acc)}
.hero-sub{margin-top:clamp(1.3rem,2.2vw,2rem);max-width:46ch;
 font-size:clamp(1rem,1.15vw,1.16rem);color:#C8C4BB;line-height:1.62}

/* terminal panel */
.term{border:1px solid var(--line-2);background:var(--panel);border-radius:3px;
 box-shadow:0 30px 70px -50px #000 inset,0 40px 90px -60px rgba(0,0,0,.9)}
.term-hd{display:flex;justify-content:space-between;align-items:center;color:var(--dim);
 padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.term-live{display:inline-flex;align-items:center;gap:.5em;color:var(--ink)}
.okdot{width:6px;height:6px;border-radius:50%;background:var(--acc);
 box-shadow:0 0 0 0 rgba(255,77,0,.7);animation:pulse 2.4s var(--ease-io) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,0,.55)}70%{box-shadow:0 0 0 7px rgba(255,77,0,0)}100%{box-shadow:0 0 0 0 rgba(255,77,0,0)}}
.term-bd{padding:1rem;display:grid;gap:.5rem;color:var(--dim);font-size:.63rem;min-height:170px;align-content:start}
.tl-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-dim{color:rgba(142,140,132,.65);margin-right:.6em}
.t-ok{color:var(--acc);margin-left:.5em}
.tl-cur{color:var(--ink)}
.caret{display:inline-block;width:7px;height:1em;background:var(--acc);
 margin-left:.4em;vertical-align:-.15em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.hero-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
 margin-top:clamp(36px,5vw,72px);background:var(--line);border-block:1px solid var(--line)}
@media(min-width:760px){.hero-meta{grid-template-columns:repeat(4,1fr)}}
.mc{background:var(--ground);padding:1.15rem 0 1.25rem;padding-right:1rem}
@media(min-width:760px){.mc{padding-left:1.15rem}.mc:first-child{padding-left:0}}
.mk{color:rgba(142,140,132,.7);margin-bottom:.55rem}
.mv{font-weight:500;font-size:.74rem;letter-spacing:.1em;color:var(--ink)}

.sig{position:relative;height:1px;background:var(--line);margin-top:clamp(30px,4vw,54px)}
.sig-fill{position:absolute;left:0;top:0;height:1px;width:0;background:var(--acc)}
.sig-node{position:absolute;top:-3px;left:0;width:7px;height:7px;background:var(--acc);
 transform:translateX(-50%) rotate(45deg)}

/* ── section frame ── */
.sec{padding-block:clamp(64px,8.5vw,148px)}
.slabel{display:flex;align-items:center;gap:1rem;color:var(--dim);margin-bottom:clamp(26px,3.6vw,52px)}
.slabel .n{color:var(--acc);font-weight:500}
.slabel .l{flex:0 0 clamp(28px,5vw,80px);height:1px;background:var(--line-2)}
.slabel .t{flex:1;min-width:0}

/* ── flagship ── */
.g{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:1000px){.g{grid-template-columns:minmax(0,.72fr) minmax(0,2fr)}}
.sticky{position:sticky;top:calc(clamp(56px,5.4vw,70px) + 26px)}
.aside-note{color:var(--dim);font-size:.94rem;line-height:1.65;max-width:34ch}
.card{border:1px solid var(--line-2);background:var(--panel);border-radius:3px;
 padding:clamp(22px,3vw,44px);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(150deg,rgba(255,77,0,.07),transparent 46%)}
.c-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
 padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.c-block{padding-block:clamp(20px,2.6vw,34px)}
.c-name{font-size:clamp(1.85rem,4.2vw,3.5rem);font-weight:800;line-height:1;
 letter-spacing:-.03em;text-transform:uppercase}
.c-lede{margin-top:.95rem;max-width:56ch;color:#C8C4BB;font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.65}
.c-why{border-top:1px solid var(--line)}
.c-why .mono{color:var(--dim)}
.spec{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;background:var(--ground);
 padding:.85rem 0;align-items:baseline}
.spec-row dt{color:rgba(142,140,132,.75)}
.spec-row dd{color:var(--ink);font-weight:500;letter-spacing:.09em;word-break:break-word}

.chip{display:inline-flex;align-items:center;gap:.55em;padding:.32em .7em;
 border:1px solid var(--line-2);border-radius:2px;color:var(--dim);font-weight:500}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.chip--live{color:var(--acc);border-color:rgba(255,77,0,.4);background:rgba(255,77,0,.07)}
.chip--live::before{animation:pulse 2.4s var(--ease-io) infinite}

/* ── registry ── */
.rrows{border-top:1px solid var(--line)}
.rrow{display:grid;align-items:center;gap:.35rem 1.2rem;position:relative;
 grid-template-columns:1fr auto;
 padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line);
 cursor:pointer;transition:padding-left .5s var(--ease),background .5s var(--ease)}
@media(min-width:960px){
 .rrow{grid-template-columns:5.2rem minmax(0,1fr) minmax(0,15rem) 7.5rem 4.2rem 1.6rem}
}
.rrow:hover{padding-left:clamp(10px,1.4vw,22px);background:rgba(236,233,226,.022)}
.rrow::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
 background:var(--acc);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.rrow:hover::before{transform:scaleY(1)}
.cell{display:grid;min-width:0}
.swap{grid-area:1/1;display:block;transition:clip-path .55s var(--ease),transform .55s var(--ease),
 color .45s var(--ease),letter-spacing .45s var(--ease)}
.swap.a{clip-path:inset(0)}
.swap.b{clip-path:inset(100% 0 0 0);transform:translateY(.42em)}
.rrow:hover .swap.a{clip-path:inset(0 0 100% 0);transform:translateY(-.42em)}
.rrow:hover .swap.b{clip-path:inset(0);transform:none}
.r-name{font-size:clamp(1.15rem,2.1vw,1.72rem);font-weight:700;letter-spacing:-.015em;
 text-transform:uppercase;line-height:1.15}
.r-name .swap{grid-row:1}
.r-sub{grid-row:2;margin-top:.5rem;font-size:.6rem;text-transform:uppercase}
@media(min-width:960px){.r-sub{display:none}}
.r-dom{display:none;font-size:.68rem;letter-spacing:.1em}
.r-dom .swap.b{color:var(--acc);letter-spacing:.19em}
.r-yr{display:none}
.r-status{grid-column:2;grid-row:1;justify-self:end}
@media(min-width:960px){
 .r-dom,.r-yr{display:grid}
 .r-status{grid-column:auto;grid-row:auto;justify-self:start}
}
.r-arrow{display:none;opacity:0;transform:translate(-6px,6px);
 transition:opacity .45s var(--ease),transform .45s var(--ease),color .45s var(--ease)}
@media(min-width:960px){.r-arrow{display:block}}
.rrow:hover .r-arrow{opacity:1;transform:none;color:var(--acc)}

/* ── map ── */
.sec-map{padding-block:clamp(64px,8.5vw,148px);border-block:1px solid var(--line);
 background:linear-gradient(180deg,rgba(236,233,226,.018),transparent 55%)}
.map-flex{display:grid;gap:clamp(28px,3.6vw,56px);align-items:center}
@media(min-width:1040px){.map-flex{grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr)}}
.map-read{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.mpanel{background:var(--ground);padding:1.15rem clamp(14px,1.6vw,22px);
 opacity:.42;transition:opacity .5s var(--ease),background .5s var(--ease)}
.mpanel.on{opacity:1;background:rgba(236,233,226,.03)}
.mp-name{font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.012em;
 text-transform:uppercase;margin-top:.5rem}
.mp-line{margin-top:.45rem;color:var(--dim);font-size:.92rem;line-height:1.6}
.map-viz{color:var(--dim)}
#topo{width:100%;height:auto}
#topo .tl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;fill:var(--dim)}
#topo .acc-t{fill:var(--acc)}
#topo .acc-on{opacity:0;transition:opacity .5s var(--ease)}
#topo .step.on .acc-on{opacity:1}
#topo .br{transition:opacity .5s var(--ease)}
#topo .step.on .br{opacity:.8;stroke:var(--acc)}

/* ── lab ── */
.lrows{border-top:1px solid var(--line)}
.lrow{display:grid;gap:.5rem 1.2rem;grid-template-columns:1fr auto;align-items:center;
 padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){
 .lrow{grid-template-columns:5.2rem minmax(0,1fr) 11rem minmax(0,1fr) 4rem}
}
.l-name{font-size:clamp(1rem,1.5vw,1.28rem);font-weight:600;letter-spacing:-.01em;text-transform:uppercase}
.l-status{justify-self:end}
@media(min-width:900px){.l-status{justify-self:start}}
.l-track{display:none;height:2px;background:var(--line-2);position:relative;overflow:hidden}
@media(min-width:900px){.l-track{display:block}}
.fillx{position:absolute;inset:0 auto 0 0;width:0;background:var(--acc)}
.l-pc{display:none;justify-self:end}
@media(min-width:900px){.l-pc{display:block}}
.l-note{display:none}
@media(min-width:900px){.l-note{display:block;grid-column:4/6}}

/* ── principles ── */
.prows{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.prow{background:var(--ground);display:grid;gap:.7rem 1.6rem;
 padding-block:clamp(26px,3.4vw,48px);align-items:start}
@media(min-width:900px){.prow{grid-template-columns:5.2rem minmax(0,1.5fr) minmax(0,1fr)}}
.p-st{font-size:clamp(1.5rem,3.4vw,2.9rem);font-weight:800;line-height:.98;
 letter-spacing:-.03em;text-transform:uppercase}
.p-gl{color:var(--dim);line-height:1.9;max-width:38ch;letter-spacing:.1em;font-size:.63rem}

/* ── contact ── */
.sec-contact{padding-bottom:clamp(72px,9vw,150px)}
.c-big{font-size:clamp(2.6rem,9vw,8rem);font-weight:800;line-height:.9;
 letter-spacing:-.038em;text-transform:uppercase;color:var(--acc)}
.cto{margin-top:clamp(32px,4.4vw,68px);border-top:1px solid var(--line)}
.cto-row{display:grid;gap:.6rem 1.4rem;padding-block:clamp(18px,2.4vw,30px);
 border-bottom:1px solid var(--line);align-items:baseline}
@media(min-width:760px){.cto-row{grid-template-columns:9rem 1fr}}
.mail{font-family:var(--mono);font-size:clamp(.95rem,2.2vw,1.6rem);font-weight:500;
 letter-spacing:.02em;text-transform:uppercase;word-break:break-word;
 background-image:linear-gradient(var(--acc),var(--acc));background-size:0% 1px;
 background-position:0 100%;background-repeat:no-repeat;
 transition:background-size .5s var(--ease),color .4s var(--ease);padding-bottom:.14em}
.mail:hover{color:var(--acc);background-size:100% 1px}
.socials{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;color:var(--dim)}
.socials a:hover{color:var(--acc)}

/* ── footer ── */
.foot{border-top:1px solid var(--line);padding-block:1.5rem}
.foot-in{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;color:rgba(142,140,132,.75);
 justify-content:space-between;align-items:center}
.toplink:hover{color:var(--acc)}

/* ── instrument bar ── */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:130;height:var(--bar);
 background:rgba(13,13,12,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 border-top:1px solid var(--line)}
.sbar-fill{position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--acc)}
.sbar-in{height:100%;display:flex;align-items:center;justify-content:space-between;
 gap:1rem;color:var(--dim);font-size:.58rem;white-space:nowrap;overflow:hidden}
.sb-log{display:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center}
@media(min-width:820px){.sb-log{display:block}}
.sb-r{display:flex;gap:.55rem;align-items:center}
.sb-r .sep{opacity:.4}
#sbpct{color:var(--acc);font-weight:500}
@media(max-width:520px){.sbar{display:none}body{padding-bottom:0}}

/* ── registry cursor inspector ── */
.rprev{position:fixed;top:0;left:0;z-index:150;width:190px;pointer-events:none;
 border:1px solid var(--line-2);background:rgba(13,13,12,.94);
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 opacity:0;transform:translate3d(0,0,0) scale(.96);
 transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rprev.on{opacity:1}
.rprev-svg{width:100%;height:auto;color:var(--acc);display:block}
.rprev-meta{display:flex;justify-content:space-between;gap:.6rem;font-size:.53rem;
 padding:.5rem .6rem;border-top:1px solid var(--line)}
@media(hover:none){.rprev{display:none}}

/* ── reticle ── */
.cur{position:fixed;top:0;left:0;z-index:300;pointer-events:none;opacity:0;
 transition:opacity .3s var(--ease)}
.cur.on{opacity:1}
/* The reticle REPLACES the pointer. Without this the OS arrow rides on top of
   it and you see two cursors. Text fields keep their own cursor, because a
   caret you cannot see is a genuine usability failure, not a style choice. */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,label,summary,[role="button"],.rrow,.crs,.mag{cursor:none}
  input,textarea,select,[contenteditable]{cursor:auto}
}
.cur-dot{position:absolute;width:4px;height:4px;background:var(--acc);
 transform:translate(-50%,-50%) rotate(45deg)}
.cur-box{position:absolute;width:26px;height:26px;border:1px solid rgba(255,77,0,.5);
 transform:translate(-50%,-50%) rotate(45deg);
 transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease)}
.cur.hot .cur-box{width:44px;height:44px;border-color:var(--acc)}
@media(hover:none),(pointer:coarse){.cur{display:none}}

/* ── reveals: visible by default, JS opts in ── */
html.js [data-reveal]{opacity:0}
html.js [data-reveal="rise"]{transform:translateY(26px)}
html.js .rl-in{transform:translateY(105%)}
@media(prefers-reduced-motion:reduce){
 html.js [data-reveal],html.js .rl-in{opacity:1!important;transform:none!important}
 *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}