/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("fonts/chakra-petch-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("fonts/chakra-petch-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("fonts/chakra-petch-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/caveat.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --sans:"Archivo","Arial Narrow",Arial,sans-serif; --serif:"Chakra Petch","Archivo",sans-serif; --display:"Chakra Petch","Archivo",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace; --hand:"Caveat","Comic Sans MS",cursive;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --red:#C0625F; --green:#8DB08A;
}
/* ===== Paper theme: light and dark ===== */
:root,[data-theme="paper"]{
  --bg:#ECE7DD; --bg2:#E2DCD0; --deep:#D9D2C4; --line:#CBC3B4;
  --text:#1C1A17; --text-2:#3E3A34; --muted:#5C564D; --accent:#7A1F2B; --accent-soft:rgba(122,31,43,.07); --copper:#833F1E; --steel:#4E5B68;
  --grain:.35; --grain-blend:multiply; --vignette:rgba(70,50,30,.16); --dot:rgba(28,26,23,.13);
  --pat:rgba(28,26,23,.06); --term-acc:#D9737C; --globe-dim:#BDB4A4; --globe-grid:#3E3A34; --obj-shadow:rgba(60,40,20,.28); color-scheme:light;
}
[data-theme="paper-dark"]{
  --bg:#121110; --bg2:#1A1917; --deep:#0E0D0C; --line:#2E2B27;
  --text:#EEE7DA; --text-2:#CFC8BB; --muted:#A8A196; --accent:#C9A96E; --accent-soft:rgba(201,169,110,.07); --copper:#D0885A; --steel:#8E9AA6;
  --grain:.1; --grain-blend:overlay; --vignette:rgba(0,0,0,.5); --dot:rgba(238,231,218,.08); --pat:rgba(238,231,218,.045); --term-acc:#C9A96E;
  --globe-dim:#57524A; --globe-grid:#CFC6B5; --obj-shadow:rgba(0,0,0,.55); color-scheme:dark;
}
html{transition:background-color .4s}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-stretch:100%;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--bg)}
.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem}


/* ---------- Texture ---------- */
body::before{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;opacity:var(--grain);mix-blend-mode:var(--grain-blend);animation:grain 1.2s steps(6) infinite}
body::after{content:"";position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 55%,var(--vignette,rgba(0,0,0,.45)) 100%)}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--dot,rgba(238,231,218,.09)) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 75%)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:1.1rem var(--pad);color:#fff;mix-blend-mode:difference}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.nav nav{display:flex;gap:clamp(1rem,2.6vw,2rem)}
.nav nav a{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:.85}
.nav nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:.35em}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem var(--pad) 5rem;overflow:hidden}
.objects{position:absolute;inset:0;pointer-events:none;z-index:1}
.obj{position:absolute}
.obj svg{width:100%;height:auto;filter:drop-shadow(0 26px 30px var(--obj-shadow));animation:bob 6s ease-in-out infinite alternate;transform:rotate(var(--rot))}
@keyframes bob{from{transform:translateY(0) rotate(var(--rot))}to{transform:translateY(-12px) rotate(calc(var(--rot) + 3deg))}}
.o-router{top:13%;left:5%;width:clamp(110px,15vw,240px);--rot:-9deg}
.o-key{top:11%;right:12%;width:clamp(52px,6.5vw,105px);--rot:16deg}
.o-key svg{animation-duration:5s}
.o-lock{bottom:12%;left:11%;width:clamp(72px,8.5vw,135px);--rot:11deg}
.o-lock svg{animation-duration:7s}
.o-eth{bottom:8%;right:7%;width:clamp(100px,12vw,190px);--rot:-14deg}
.o-eth svg{animation-duration:5.5s}
.o-term{top:40%;right:2.5%;width:clamp(150px,17vw,270px);--rot:6deg}
.o-term svg{animation-duration:8s}
.hero-title{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-transform:uppercase;font-weight:850;font-stretch:72%;line-height:.82;letter-spacing:-.015em}
.ht{display:block;font-size:clamp(4.6rem,17vw,17.5rem);overflow:hidden;padding:0 .02em .04em}
.ht .ch{display:inline-block}
.ht-mid{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);margin:.02em 0 .06em}
.ht-mid em{font-size:clamp(3rem,8.5vw,8.5rem);line-height:.8;color:var(--accent)}
.ht-name{font-family:var(--mono);font-weight:500;font-size:clamp(.7rem,1.1vw,.95rem);letter-spacing:.28em;font-stretch:100%;color:var(--muted);text-align:left;max-width:9.5em;line-height:1.5}
.hero-sub{position:relative;z-index:2;margin-top:2rem;max-width:34ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--text-2)}
.hero-cta{position:relative;z-index:2;display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.2rem;border-radius:3px;background:var(--text);color:var(--bg);font-weight:500;transition:background .25s,color .25s}
.btn:hover{background:var(--accent)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--muted)}

/* ---------- About ---------- */
.about{padding:clamp(6rem,14vh,10rem) var(--pad) clamp(4rem,10vh,7rem);max-width:1320px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr;gap:3rem}
.about-art{display:flex;flex-direction:column;gap:1.5rem}
.lens{width:min(320px,70vw)}
.about-art blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;max-width:16ch;color:var(--text-2)}
.about-main h2{font-size:clamp(2.5rem,5.2vw,5rem);line-height:.95;text-transform:uppercase;font-weight:850;font-stretch:78%;letter-spacing:-.01em}
.about-main h2 em{display:block;color:var(--accent);font-size:1.08em;line-height:1}
.script{font-family:var(--hand);font-size:clamp(1.6rem,2.2vw,2rem);color:var(--copper);transform:rotate(-2deg);margin:.8rem 0 1.4rem;width:max-content}
.about-main>p:not(.label):not(.script){max-width:56ch;color:var(--text-2);margin-bottom:1rem}
.about-main h3{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:2.4rem 0 .8rem}
.timeline{list-style:none}
.timeline li{display:grid;grid-template-columns:4.5rem 1fr;gap:.2rem 1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline b{font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;padding-top:.2rem}
.timeline em{grid-column:2;color:var(--muted);font-size:1.05rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{font-family:var(--mono);font-size:.8rem;padding:.35rem .65rem;border:1px solid var(--line);border-radius:3px;color:var(--text-2)}
.polaroids{display:flex;justify-content:center;align-items:flex-start;margin-top:clamp(4rem,9vh,6rem);padding:1rem 0}
.pol{background:#F2F0EA;padding:.75rem .75rem 0;width:clamp(170px,23vw,290px);box-shadow:0 30px 40px -18px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#D9D6CE}
.pol figcaption{font-family:var(--hand);font-size:clamp(1.15rem,1.7vw,1.5rem);color:#2A2622;text-align:center;padding:.6rem .3rem .9rem;line-height:1.1}
.p1{transform:rotate(-7deg) translateY(18px);margin-right:-2.5rem;z-index:1}
.p2{transform:rotate(2.5deg);z-index:2}
.p3{transform:rotate(-2deg) translateY(30px);margin-left:-2.5rem;z-index:1}
.pol:hover{transform:rotate(0) translateY(-10px) scale(1.03);z-index:3}

/* ---------- Tapes ---------- */
.tapes{padding:clamp(3rem,8vh,5rem) 0;overflow:hidden}
.tape{width:112%;margin-left:-6%;overflow:hidden;padding:.65rem 0}
.tape-a{background:var(--bg2);transform:rotate(-2.6deg);border-block:1px solid var(--line)}
.tape-b{background:var(--accent);color:var(--bg);transform:rotate(2deg);margin-top:-1.2rem;position:relative}
.tape-track{display:flex;align-items:center;gap:clamp(1.2rem,2.5vw,2.4rem);width:max-content;animation:marquee 38s linear infinite;text-transform:uppercase;font-weight:850;font-stretch:70%;font-size:clamp(2rem,4.8vw,4.4rem);line-height:1}
.tape-b .tape-track{animation-direction:reverse;animation-duration:30s}
.tape-a span:nth-of-type(odd){color:transparent;-webkit-text-stroke:1.4px var(--text)}
.tape i{font-style:normal;font-size:.5em;color:var(--accent)}
.tape-b i{color:var(--bg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Orbit ---------- */
.orbit{padding:clamp(5rem,12vh,8rem) var(--pad);text-align:center;overflow:hidden}
.orbit-head{max-width:640px;margin:0 auto 2rem}
.orbit-head h2,.globe-copy h2,.work-head h2{font-size:clamp(2.6rem,6vw,5.6rem);line-height:.92;text-transform:uppercase;font-weight:850;font-stretch:74%;letter-spacing:-.01em;margin-bottom:1rem}
.orbit-head h2 em,.globe-copy h2 em,.work-head h2 em,.contact h2 em{color:var(--accent)}
.orbit-head p{color:var(--muted);max-width:52ch;margin:0 auto}
.orbit-wrap{position:relative;width:min(92vw,760px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.ring{position:absolute;inset:0;animation:spin var(--dur,60s) linear infinite}
.ring::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--r) * 200%);aspect-ratio:1;transform:translate(-50%,-50%);border:1px dashed var(--line);border-radius:50%}
.r1{--r:.2;--dur:48s}
.r2{--r:.34;--dur:70s;animation-direction:reverse}
.r3{--r:.48;--dur:110s}
.ring span{position:absolute;left:50%;top:50%;transform-origin:0 0;transform:rotate(var(--a,0deg)) translateX(calc(var(--r) * 100cqw)) rotate(calc(-1 * var(--a,0deg))) translate(-50%,-50%)}
.ring span b{display:inline-block;font-family:var(--mono);font-weight:500;font-size:clamp(.66rem,1.9cqw,.86rem);white-space:nowrap;padding:.35rem .65rem;border-radius:3px;background:var(--bg2);border:1px solid var(--line);animation:spin var(--dur,60s) linear infinite reverse}
.r2 span b{animation-direction:normal;color:var(--accent)}
.r1 span b{background:var(--text);color:var(--bg);border-color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}
.core{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 10px var(--accent-soft)}
.core b{font-size:clamp(1.6rem,6cqw,3rem);font-weight:900;font-stretch:80%;line-height:1}
.core span{font-family:var(--mono);font-size:clamp(.5rem,1.4cqw,.7rem);letter-spacing:.14em;text-transform:uppercase}
.proof{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.2rem;margin-top:2.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.proof i{font-style:normal;color:var(--accent)}

/* ---------- Globe ---------- */
.globe-sec{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;padding:clamp(4rem,10vh,7rem) var(--pad);max-width:1320px;margin:0 auto}
.globe-copy p:not(.label){color:var(--muted);max-width:44ch}
.globe-box{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1}
#globe{width:100%;height:100%;display:block}

/* ---------- Work grid ---------- */
.work{padding:clamp(5rem,12vh,8rem) var(--pad);max-width:1400px;margin:0 auto}
.work-head{margin-bottom:2.4rem}
.work-head p:not(.label){color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr;gap:1rem;grid-auto-rows:clamp(380px,60vw,470px)}
.proj{position:relative;border-radius:10px;overflow:hidden;background:var(--bg2);isolation:isolate}
.cover{position:absolute;inset:0;padding:1.3rem 1.4rem;display:flex;flex-direction:column;justify-content:space-between;z-index:1}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,var(--accent-soft),transparent 55%);z-index:-1}
.pnum{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.pcat{position:absolute;top:1.3rem;right:1.4rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--text-2)}
.ptitle{font-size:clamp(2.6rem,5vw,4.4rem);line-height:.88;text-transform:uppercase;font-weight:850;font-stretch:70%;margin-top:auto;hyphens:manual;overflow-wrap:anywhere}
.phint{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}
.reveal{position:absolute;inset:0;z-index:2;background:var(--deep);display:flex;align-items:center;justify-content:center;padding:1.4rem;clip-path:circle(0% at 50% 100%);transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
.proj:hover .reveal,.proj:focus-within .reveal{clip-path:circle(150% at 50% 100%)}
.open{position:absolute;inset:0;z-index:3;background:transparent;border:0;color:transparent;cursor:pointer;font-size:0;border-radius:10px}
.open:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.viz{width:100%;max-width:440px}

/* viz: scam */
.urlbar{display:flex;align-items:center;gap:.55rem;background:#1F1D1A;color:#E8E4DA;border-radius:6px;padding:.55rem .8rem;font-family:var(--mono);font-size:.78rem;white-space:nowrap;overflow:hidden}
.urlbar svg{flex:none;stroke:var(--copper)}
.gauge-wrap{position:relative;max-width:250px;margin:1rem auto .3rem}
.gauge-num{position:absolute;left:0;right:0;bottom:3%;text-align:center;line-height:1}
.gauge-num b{font-family:var(--mono);font-weight:500;font-size:2.7rem;display:block}
.gauge-num span{font-size:.85rem;color:var(--copper)}
.checks{list-style:none;display:grid;gap:.35rem;font-size:.88rem;color:var(--text-2)}
.checks li::before{content:"! ";font-family:var(--mono);color:var(--copper)}
/* viz: lab */
.v-lab{font-family:var(--mono);font-size:.82rem;line-height:1.5;background:#1F1D1A;color:#E8E4DA;border-radius:8px;padding:1.1rem;display:grid;gap:.35rem}
.v-lab .pr{color:var(--accent)}
.v-lab .out{color:var(--copper)}
.v-lab .ok{color:var(--green)}
/* viz: levels */
.v-levels{display:grid;gap:.65rem}
.lvl{display:grid;grid-template-columns:4.4rem 1fr;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.dots{display:flex;gap:.35rem;flex-wrap:wrap}
.dots i{width:.9rem;height:.9rem;border-radius:2px;background:var(--accent)}
.lvl:nth-child(n+4) .dots i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--steel)}
/* viz: funnel */
.v-funnel{display:grid;gap:.6rem}
.frow{display:grid;grid-template-columns:5rem 1fr 2rem;align-items:center;gap:.7rem;font-size:.85rem}
.frow span{color:var(--muted)}
.frow i{display:block;height:22px;border-radius:3px;background:var(--steel);width:var(--w)}
.frow:nth-child(1) i{--w:100%;background:#B7C0C9} .frow:nth-child(2) i{--w:17%} .frow:nth-child(3) i{--w:6%} .frow:nth-child(4) i{--w:2%}
.frow b{font-family:var(--mono);font-weight:500;font-size:.8rem;text-align:right}
.verdict{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--text-2)}
.verdict em{display:block;font-family:var(--mono);font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:.2rem}
/* viz: jd */
.jd{font-size:1.02rem;line-height:1.95;color:var(--text-2)}
.jd mark{color:inherit;background:linear-gradient(var(--c),var(--c)) no-repeat 0 100%/100% 100%;padding:.05em .2em;border-radius:2px}
.jd .bad{--c:rgba(192,98,95,.28)} .jd .good{--c:rgba(141,176,138,.25)}
.jd-sum{display:flex;gap:1.3rem;margin-top:1rem;font-family:var(--mono);font-size:.78rem}
.jd-sum .r{color:var(--red)} .jd-sum .g{color:var(--green)}
/* viz: pay */
.cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;align-items:end;height:190px}
.bar{display:flex;flex-direction:column;align-items:center;gap:.45rem;height:100%;justify-content:flex-end}
.bar i{display:block;width:100%;height:var(--h);background:var(--steel);border-radius:4px 4px 1px 1px}
.bar:nth-child(1) i{--h:72%} .bar:nth-child(2) i{--h:64%;background:var(--accent)} .bar:nth-child(3) i{--h:58%} .bar:nth-child(4) i{--h:80%}
.bar span{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
/* viz: bill */
.receipt{background:#F2F0EA;color:#1E1B17;border-radius:6px;padding:.9rem 1rem;font-size:.88rem}
.row{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;position:relative}
.row span:last-child{font-family:var(--mono);font-size:.82rem}
.row.flag{color:#A33B3B;font-weight:600}
.strike{position:absolute;left:-2%;right:-2%;top:50%;height:2px;background:#A33B3B;transform-origin:left}
.note{margin-top:.7rem;font-size:.88rem;color:var(--text-2)}
.note b{color:var(--copper)}
/* viz: trade */
.chart{width:100%;height:auto}
.legend{display:flex;gap:1.1rem;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.5rem}
.legend span{display:flex;align-items:center;gap:.4rem}
.legend i{width:1rem;height:2px}
.k-fast{background:var(--accent)} .k-slow{background:var(--copper)}

/* ---------- Modal ---------- */
.modal{margin:auto;width:min(680px,92vw);max-height:88vh;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:clamp(1.5rem,4vw,2.5rem);overflow:auto}
.modal::backdrop{background:rgba(8,7,6,.78);backdrop-filter:blur(4px)}
.m-close{position:absolute;top:1rem;right:1rem;background:transparent;border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .7rem;border-radius:3px;cursor:pointer}
.m-close:hover{border-color:var(--muted)}
.m-cat{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--accent);margin-bottom:.4rem}
.modal h3{font-size:clamp(2.4rem,6vw,3.8rem);line-height:.9;text-transform:uppercase;font-weight:850;font-stretch:72%;margin-bottom:1rem;padding-right:5rem}
.m-one{font-size:1.2rem;font-weight:600;margin-bottom:.8rem}
.m-desc{color:var(--text-2);margin-bottom:1rem}
.m-points{list-style:none;display:grid;gap:.45rem;margin-bottom:1.2rem}
.m-points li{padding-left:1.1rem;position:relative;color:var(--text-2)}
.m-points li::before{content:"";position:absolute;left:0;top:.65em;width:.45rem;height:.45rem;background:var(--accent)}
.m-stack{font-family:var(--mono);font-size:.8rem;color:var(--steel)}
.m-link{display:inline-block;margin-top:1.3rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.m-link[hidden]{display:none}

/* ---------- Contact ---------- */
.contact{padding:clamp(5rem,12vh,8rem) var(--pad) 2rem;border-top:1px solid var(--line);max-width:1400px;margin:0 auto}
.c-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(3rem,8vh,5rem)}
.c-kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.contact h2{font-size:clamp(3rem,9.5vw,9.5rem);line-height:.86;text-transform:uppercase;font-weight:850;font-stretch:70%;letter-spacing:-.015em}
.contact h2 em{display:inline-block}
.steps{list-style:none;display:grid;grid-template-columns:1fr;gap:0;margin:3rem 0}
.steps li{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.steps span{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.steps b{font-size:1.3rem;font-weight:650}
.mailbox{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.4rem 1rem;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:1.4rem 1.5rem;transition:background .3s,color .3s,border-color .3s}
.mailbox:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.mb-label{grid-column:1;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.mb-mail{grid-column:1;font-size:clamp(1.5rem,4vw,3rem);font-weight:750;font-stretch:85%;letter-spacing:-.01em;overflow-wrap:anywhere;line-height:1.05}
.mb-arrow{grid-column:2;grid-row:1/3;font-size:clamp(2rem,4vw,3rem);line-height:1}
.c-meta{display:flex;gap:3rem;flex-wrap:wrap;margin:1.8rem 0 3rem}
.c-meta span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.c-meta b{font-weight:650;text-transform:uppercase;font-stretch:85%;font-size:1.1rem}
.links{list-style:none;display:grid;grid-template-columns:1fr}
.links a{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);text-decoration:none;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:750;font-stretch:80%;text-transform:uppercase;transition:color .25s,padding .3s}
.links a span{font-family:var(--mono);font-size:.74rem;font-weight:400;color:var(--muted)}
.links a i{font-style:normal;margin-left:auto}
.links a:hover{color:var(--accent);padding-left:.4rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Breakpoints ---------- */
@media (min-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(380px,44vw,460px)}
  .steps{grid-template-columns:repeat(3,1fr);gap:2rem}
  .links{grid-template-columns:repeat(2,1fr);column-gap:2rem}
}
@media (min-width:1024px){
  .about-grid{grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:start}
  .about-art{position:sticky;top:7rem}
  .globe-sec{grid-template-columns:.9fr 1.1fr;gap:4rem}
  .grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(400px,32vw,480px)}
  .proj.wide{grid-column:span 2}
  .links{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:700px){
  .o-term{display:none}
  .o-router{top:9%;left:-3%}
  .o-key{top:10%;right:4%}
  .o-lock{bottom:7%;left:4%}
  .o-eth{bottom:4%;right:-2%}
  .ht-mid{flex-direction:column;gap:.4rem}
  .ht-name{text-align:center;max-width:none}
  .polaroids{flex-wrap:nowrap;transform:scale(.92)}
  .p1{margin-right:-4rem}.p3{margin-left:-4rem}
}
@media (hover:none){
  .grid{grid-auto-rows:auto}
  .proj{display:flex;flex-direction:column}
  .cover{position:relative;inset:auto;padding-bottom:1.2rem}
  .ptitle{margin-top:2.4rem;font-size:clamp(2.4rem,11vw,3.4rem)}
  .phint{display:none}
  .reveal{position:relative;inset:auto;clip-path:none;padding:0 1.1rem 1.3rem;background:transparent}
  .viz{background:var(--deep);border-radius:8px;padding:1rem}
}
@media (max-width:520px){
  .ht{font-size:23vw}
  .nav nav a[href="#skills"]{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Recolour hard-coded SVG colours with the active theme ===== */
.obj [fill="#C9A96E"],.lens [fill="#C9A96E"]{fill:var(--accent)}
.obj [stroke="#C9A96E"]{stroke:var(--accent)}
.obj [fill="#A88A52"]{fill:var(--accent);filter:brightness(.8)}
.o-term [fill="#C9A96E"]{fill:var(--term-acc)}
.lens [stroke="#EEE7DA"]{stroke:var(--text)}
.lens [stroke="#3A3632"]{stroke:var(--line)}
.lens [fill="#A8A196"]{fill:var(--muted)}
.gauge-arc{stroke:var(--copper)}
.gauge-wrap [stroke="#2E2B27"]{stroke:var(--line)}
.candles [stroke="#EEE7DA"]{stroke:var(--text)} .candles [fill="#EEE7DA"]{fill:var(--text)}
.candles [stroke="#8E9AA6"]{stroke:var(--steel)}
.ema-fast{stroke:var(--accent)} .ema-slow{stroke:var(--copper)}
.v-lab .pr{color:#C9A96E}

/* ===== Light / dark toggle ===== */
.themer{position:fixed;left:var(--pad);bottom:1.1rem;z-index:70;display:flex;align-items:center;gap:.55rem;padding:.55rem .85rem;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 10px 30px -14px var(--obj-shadow);transition:border-color .25s}
.themer:hover{border-color:var(--muted)}
.themer svg{width:16px;height:16px;flex:none}
.themer .i-sun{display:none}
[data-theme="paper-dark"] .themer .i-sun{display:block}
[data-theme="paper-dark"] .themer .i-moon{display:none}
@media (max-width:520px){.themer .t-label{display:none}.themer{bottom:.8rem;padding:.6rem}}

/* ===== Subtle section patterns (theme-aware, faded at the edges) ===== */
.about,.orbit,.globe-sec,.work,.contact{position:relative;isolation:isolate}
.about::before,.orbit::before,.globe-sec::before,.work::before,.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
/* About: blueprint grid */
.about::before{background-image:linear-gradient(var(--pat) 1px,transparent 1px),linear-gradient(90deg,var(--pat) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 30% 35%,#000 20%,transparent 75%)}
/* Skills: radar rings behind the orbit */
.orbit::before{background-image:repeating-radial-gradient(circle at 50% 58%,transparent 0 44px,var(--pat) 44px 45px);
  -webkit-mask-image:radial-gradient(circle at 50% 58%,#000 25%,transparent 70%);mask-image:radial-gradient(circle at 50% 58%,#000 25%,transparent 70%)}
/* Globe: scanlines */
.globe-sec::before{background-image:repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 6px);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 50%,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 70% 50%,#000 15%,transparent 70%)}
/* Projects: fine dot grid */
.work::before{background-image:radial-gradient(var(--pat) 1.1px,transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%)}
/* Contact: diagonal hatching */
.contact::before{background-image:repeating-linear-gradient(45deg,var(--pat) 0 1px,transparent 1px 14px);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 70% 20%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 80% 55% at 70% 20%,#000 10%,transparent 70%)}

/* ===== Footer legal links ===== */
.foot .legal-links{display:flex;gap:1.4rem}
.foot .legal-links a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.foot .legal-links a:hover{color:var(--accent);border-color:var(--accent)}

/* ===== Privacy / Terms pages ===== */
.legal-top{display:flex;justify-content:space-between;align-items:center;padding:1.4rem var(--pad);border-bottom:1px solid var(--line);max-width:1400px;margin:0 auto}
.legal-top .brand{color:var(--text)}
.legal-back{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.legal-back:hover{color:var(--accent)}
.legal{max-width:760px;margin:0 auto;padding:clamp(3.5rem,10vh,6rem) var(--pad) 5rem;position:relative;isolation:isolate}
.legal::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(45deg,var(--pat) 0 1px,transparent 1px 14px);-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%)}
.legal h1{font-size:clamp(3rem,10vw,6.5rem);line-height:.86;text-transform:uppercase;font-weight:850;font-stretch:70%;letter-spacing:-.015em;margin-bottom:2.2rem}
.legal h1 em{font-family:var(--serif);font-style:italic;font-weight:500;font-stretch:100%;text-transform:none;letter-spacing:0;color:var(--accent)}
.legal .lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.3;color:var(--text);margin-bottom:2.8rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.legal h2{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:2.4rem 0 .7rem}
.legal p{color:var(--text-2);max-width:65ch}
.legal a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.legal a:hover{color:var(--accent)}
.legal code{font-family:var(--mono);font-size:.88em;background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:.05em .35em}
.legal-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;max-width:760px;margin:0 auto;padding:1.2rem var(--pad) 5rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legal-foot span{display:flex;gap:1.4rem}
.legal-foot a{color:inherit;text-decoration:none}
.legal-foot a:hover{color:var(--accent)}

/* ===== Finale: Probe and Lock (original characters) ===== */
:root,[data-theme="paper"]{--ch-body:#E6E3DB;--ch-mid:#CBC7BE;--ch-limb:#B5B1A8;--ch-dark:#2A2724;--ch-screen:#2A2724;--ch-cable:#3E3A34}
[data-theme="paper-dark"]{--ch-body:#E6E0D4;--ch-mid:#BDB6A9;--ch-limb:#A39C90;--ch-dark:#1A1917;--ch-screen:#1A1917;--ch-cable:#8A8378}
.finale{position:relative;margin-top:2rem;padding-top:clamp(16rem,36vw,30rem);overflow:hidden;pointer-events:none;user-select:none}
.finale .c-body{fill:var(--ch-body)}.finale .c-mid{fill:var(--ch-mid)}.finale .c-dark{fill:var(--ch-dark)}.finale .c-screen{fill:var(--ch-screen)}
.finale .c-white{fill:#F6F3EC}.finale .c-gold{fill:var(--accent)}.finale .c-green{fill:var(--green)}
.finale .c-gold-s{stroke:var(--accent)}.finale .c-line-s{stroke:var(--ch-limb)}.finale .c-limb{stroke:var(--ch-mid)}
.finale .c-shackle{stroke:var(--ch-limb)}.finale .c-cable{stroke:var(--ch-cable);stroke-width:5;fill:none}
[data-theme="paper"] .finale .c-gold{fill:#C9A96E}[data-theme="paper"] .finale .c-gold-s{stroke:#C9A96E}
.finale svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 22px 26px var(--obj-shadow))}
.fin-bot{position:absolute;top:clamp(1.5rem,4vw,3.5rem);left:61%;width:clamp(84px,12vw,165px);z-index:3;transform-origin:50% 0}
.fin-bot .bot-svg{animation:sway 5s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.bot-eyes{animation:blink 5.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.fin-word{position:relative;isolation:isolate;line-height:.78}
.fin-name{position:relative;z-index:2;display:block;font-size:clamp(6.5rem,33vw,34rem);font-weight:850;font-stretch:70%;text-transform:uppercase;letter-spacing:-.02em;color:var(--text);margin-bottom:-.08em}
.fin-lock{position:absolute;z-index:1;left:13%;bottom:77%;width:clamp(64px,9.5vw,130px)}
.lock-eyes{animation:look 7s ease-in-out infinite}
@keyframes look{0%,40%{transform:translateX(0)}50%,85%{transform:translateX(7px)}100%{transform:translateX(0)}}
.bubble{position:absolute;font-family:var(--mono);font-size:clamp(.62rem,.9vw,.76rem);letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.3rem .55rem;white-space:nowrap}
.b-ping{left:100%;top:34%;margin-left:.5rem}
.b-pong{left:100%;top:-8%;margin-left:.3rem}
@media (prefers-reduced-motion:reduce){.fin-bot .bot-svg,.bot-eyes,.lock-eyes{animation:none}}

/* ===== Dimensional display type: ink face, oxblood side walls (light); cream face, brass side walls (dark) ===== */
:root,[data-theme="paper"]{--ex-deep:-.004em -.004em 0 rgba(255,255,255,.28),0.0040em 0.0040em 0 #8A2632,0.0080em 0.0080em 0 #862530,0.0120em 0.0120em 0 #81232F,0.0160em 0.0160em 0 #7D222D,0.0200em 0.0200em 0 #79202C,0.0240em 0.0240em 0 #751F2A,0.0280em 0.0280em 0 #701E28,0.0320em 0.0320em 0 #6C1C27,0.0360em 0.0360em 0 #681B25,0.0400em 0.0400em 0 #641924,0.0440em 0.0440em 0 #5F1822,0.0480em 0.0480em 0 #5B1720,0.0520em 0.0520em 0 #57151F,0.0560em 0.0560em 0 #53141D,0.0600em 0.0600em 0 #4E121C,0.0640em 0.0640em 0 #4A111A,.09em .11em .09em rgba(70,40,25,.35);--ex-hero:-.004em -.004em 0 rgba(255,255,255,.28),0.0040em 0.0040em 0 #8A2632,0.0080em 0.0080em 0 #862530,0.0120em 0.0120em 0 #81232F,0.0160em 0.0160em 0 #7D222D,0.0200em 0.0200em 0 #79202C,0.0240em 0.0240em 0 #751F2A,0.0280em 0.0280em 0 #701E28,0.0320em 0.0320em 0 #6C1C27,0.0360em 0.0360em 0 #681B25,0.0400em 0.0400em 0 #641924,0.0440em 0.0440em 0 #5F1822,0.0480em 0.0480em 0 #5B1720,0.0520em 0.0520em 0 #57151F,0.0560em 0.0560em 0 #53141D,0.0600em 0.0600em 0 #4E121C,0.0640em 0.0640em 0 #4A111A,.075em .085em .025em rgba(70,40,25,.28);--ex-soft:-.004em -.004em 0 rgba(255,255,255,.28),0.0050em 0.0050em 0 #8A2632,0.0100em 0.0100em 0 #80232E,0.0150em 0.0150em 0 #77202B,0.0200em 0.0200em 0 #6D1C27,0.0250em 0.0250em 0 #631923,0.0300em 0.0300em 0 #5A1620,0.0350em 0.0350em 0 #50131C,.05em .06em .06em rgba(70,40,25,.3)}
[data-theme="paper-dark"]{--ex-deep:-.004em -.004em 0 rgba(255,255,255,.55),0.0040em 0.0040em 0 #D4B67C,0.0080em 0.0080em 0 #CFB178,0.0120em 0.0120em 0 #CAAC74,0.0160em 0.0160em 0 #C4A670,0.0200em 0.0200em 0 #BFA16B,0.0240em 0.0240em 0 #BA9C67,0.0280em 0.0280em 0 #B59763,0.0320em 0.0320em 0 #B0925F,0.0360em 0.0360em 0 #AA8C5B,0.0400em 0.0400em 0 #A58757,0.0440em 0.0440em 0 #A08253,0.0480em 0.0480em 0 #9B7D4F,0.0520em 0.0520em 0 #96784A,0.0560em 0.0560em 0 #907246,0.0600em 0.0600em 0 #8B6D42,0.0640em 0.0640em 0 #86683E,.09em .11em .1em rgba(0,0,0,.6);--ex-hero:-.004em -.004em 0 rgba(255,255,255,.55),0.0040em 0.0040em 0 #D4B67C,0.0080em 0.0080em 0 #CFB178,0.0120em 0.0120em 0 #CAAC74,0.0160em 0.0160em 0 #C4A670,0.0200em 0.0200em 0 #BFA16B,0.0240em 0.0240em 0 #BA9C67,0.0280em 0.0280em 0 #B59763,0.0320em 0.0320em 0 #B0925F,0.0360em 0.0360em 0 #AA8C5B,0.0400em 0.0400em 0 #A58757,0.0440em 0.0440em 0 #A08253,0.0480em 0.0480em 0 #9B7D4F,0.0520em 0.0520em 0 #96784A,0.0560em 0.0560em 0 #907246,0.0600em 0.0600em 0 #8B6D42,0.0640em 0.0640em 0 #86683E,.075em .085em .025em rgba(0,0,0,.5);--ex-soft:-.004em -.004em 0 rgba(255,255,255,.55),0.0050em 0.0050em 0 #D4B67C,0.0100em 0.0100em 0 #C8AA73,0.0150em 0.0150em 0 #BD9F6A,0.0200em 0.0200em 0 #B19360,0.0250em 0.0250em 0 #A58757,0.0300em 0.0300em 0 #9A7C4E,0.0350em 0.0350em 0 #8E7045,.05em .06em .06em rgba(0,0,0,.55)}
.ht .ch{text-shadow:var(--ex-hero)}
.fin-name{text-shadow:var(--ex-deep);padding-right:.1em}
.contact h2{text-shadow:var(--ex-soft)}
.contact h2 em{text-shadow:none}
.ht{padding:0 .12em .13em .02em;margin-bottom:-.09em}

/* ===== Email actions: work even when no mail app is set up ===== */
.mb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.9rem}
.mb-actions button.btn{border:0;cursor:pointer}
.mb-status{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);min-height:1em}
.sr-copy{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}

/* ===== Shell section: interactive terminal (dark in both themes, like a real terminal) ===== */
.shell-sec{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:start;padding:clamp(4rem,10vh,7rem) var(--pad);max-width:1320px;margin:0 auto}
.shell-copy h2{font-size:clamp(2.6rem,6vw,5.6rem);line-height:.92;text-transform:uppercase;font-weight:850;font-stretch:74%;letter-spacing:-.01em;margin-bottom:1rem}
.shell-copy h2 em{color:var(--accent)}
.shell-copy p:not(.label){color:var(--muted);max-width:44ch}
.shell-copy p b{font-family:var(--mono);font-weight:500;font-size:.9em;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:0 .3em}
.term{--t-bg:#161412;--t-bar:#211E1B;--t-line:#35302B;--t-text:#E9E2D5;--t-dim:#A39C90;--t-acc:#C9A96E;--t-ok:#8DB08A;--t-err:#E08A8F;
  background:var(--t-bg);border:1px solid var(--t-line);border-radius:10px;overflow:hidden;box-shadow:0 34px 60px -30px var(--obj-shadow);font-family:var(--mono);font-size:.86rem;color:var(--t-text)}
.term-bar{display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;background:var(--t-bar);border-bottom:1px solid var(--t-line)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#5A534B}
.term-bar i:nth-child(1){background:#D9737C}.term-bar i:nth-child(2){background:var(--t-acc)}.term-bar i:nth-child(3){background:var(--t-ok)}
.term-bar span{margin-left:auto;margin-right:auto;color:var(--t-dim);font-size:.74rem;letter-spacing:.08em}
.term-out{height:clamp(260px,38vh,360px);overflow-y:auto;padding:1rem 1.1rem .4rem;line-height:1.6;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--t-line) transparent}
.term-out p{white-space:pre-wrap;overflow-wrap:anywhere}
.term-out .t-cmd{color:var(--t-text)}.term-out .t-cmd b{color:var(--t-acc);font-weight:500}
.term-out .t-dim{color:var(--t-dim)}.term-out .t-ok{color:var(--t-ok)}.term-out .t-err{color:var(--t-err)}.term-out .t-acc{color:var(--t-acc)}
.term-out a{color:var(--t-acc);text-underline-offset:3px}
.term-line{display:flex;align-items:center;gap:.6rem;padding:.35rem 1.1rem .9rem}
.term-prompt{color:var(--t-acc);white-space:nowrap}
.term-line input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--t-text);font:inherit;caret-color:var(--t-acc)}
.term:focus-within{border-color:#5A534B}
.term-chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:.8rem 1.1rem 1rem;border-top:1px solid var(--t-line)}
.term-chips button{font:inherit;font-size:.74rem;letter-spacing:.06em;color:var(--t-text);background:transparent;border:1px solid var(--t-line);border-radius:3px;padding:.35rem .6rem;cursor:pointer;transition:border-color .2s,color .2s}
.term-chips button:hover,.term-chips button:focus-visible{border-color:var(--t-acc);color:var(--t-acc);outline:0}
@media (min-width:1024px){.shell-sec{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}}
.shell-sec{position:relative;isolation:isolate}
.shell-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,var(--pat) 1px,transparent 1px);background-size:9px 100%;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 70% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 55% 60% at 70% 50%,#000 10%,transparent 70%)}

/* ===== Hero network mesh (canvas behind the floating objects) ===== */
.mesh{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ===== On the wire: encapsulation ===== */
.encap{--c-data:var(--accent);--c-tcp:var(--copper);--c-ip:var(--steel);--c-eth:var(--text-2);position:relative;isolation:isolate;height:230vh}
.encap-stick>*{min-width:0}
.encap-stick{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:1fr;gap:2rem;align-content:center;max-width:1320px;margin:0 auto;padding:5rem var(--pad) 3rem}
.encap-copy h2{font-size:clamp(2.6rem,6vw,5.6rem);line-height:.92;text-transform:uppercase;font-weight:850;font-stretch:74%;letter-spacing:-.01em;margin-bottom:1rem}
.encap-copy h2 em{color:var(--accent)}
.encap-copy>p:not(.label){color:var(--muted);max-width:44ch}
.osi{list-style:none;margin:1.6rem 0 1.2rem;border-top:1px solid var(--line)}
.osi li{display:grid;grid-template-columns:2.6rem 7.5rem 1fr;align-items:baseline;gap:.4rem;padding:.55rem 0;border-bottom:1px solid var(--line);color:var(--muted);transition:color .3s}
.osi span{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em}
.osi b{font-weight:700;text-transform:uppercase;font-stretch:85%;font-size:1rem}
.osi i{font-style:normal;font-size:.92rem}
.osi li.on{color:var(--text)}
.osi li[data-step="0"].on span{color:var(--c-data)}.osi li[data-step="1"].on span{color:var(--c-tcp)}.osi li[data-step="2"].on span{color:var(--c-ip)}.osi li[data-step="3"].on span{color:var(--text)}
.encap-size{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.encap-size b{color:var(--text);font-weight:500}
.frame{font-family:var(--mono);font-size:clamp(.66rem,.95vw,.8rem)}
.lyr{position:relative;border:1.5px solid var(--lc);border-radius:6px;padding:.55rem;background:color-mix(in srgb,var(--lc) 6%,transparent);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.l-eth{--lc:var(--c-eth)}.l-ip{--lc:var(--c-ip)}.l-tcp{--lc:var(--c-tcp)}.l-data{--lc:var(--c-data);border-style:solid}
.lyr>.lyr{margin-top:.55rem}
.lh{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.1rem}
.lh b{font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--lc);margin-right:.3rem}
.lh span{border:1px solid color-mix(in srgb,var(--lc) 45%,transparent);border-radius:3px;padding:.12rem .4rem;color:var(--text-2);white-space:nowrap}
.lh em{font-style:normal;margin-left:auto;color:var(--lc)}
.l-data code{display:block;margin:.6rem 0 .35rem;font-size:clamp(1rem,2vw,1.5rem);color:var(--text);letter-spacing:.02em}
.l-data small{display:block;color:var(--muted);font-size:.92em}
.fcs{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;border-top:1.5px dashed color-mix(in srgb,var(--c-eth) 50%,transparent);padding-top:.45rem}
.fcs b{font-weight:500;letter-spacing:.12em;color:var(--c-eth)}.fcs span{color:var(--text-2)}.fcs em{font-style:normal;margin-left:auto;color:var(--c-eth)}
/* layers the scroll has not reached yet: header and border fade out, the inner layer stays */
.lyr.off{border-color:transparent;background:transparent}
.lyr.off>.lh,.lyr.off>.fcs{opacity:0;transform:translateY(-4px)}
.lyr>.lh,.lyr>.fcs{transition:opacity .35s,transform .35s}
.encap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(90deg,var(--pat) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 22px);
  -webkit-mask-image:radial-gradient(ellipse 50% 40% at 70% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 50% 40% at 70% 50%,#000 10%,transparent 70%)}
@media (min-width:1024px){.encap-stick{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}}
@media (max-width:700px){.encap{height:auto}.encap-stick{position:relative;min-height:0}.osi li{grid-template-columns:2.2rem 6.3rem 1fr}}
@media (prefers-reduced-motion:reduce){.encap{height:auto}.encap-stick{position:relative;min-height:0}}

/* ===== Typeface: Chakra Petch for display type (angular, machined look). Body stays Archivo, labels Geist Mono. ===== */
.hero-title,.about-main h2,.tape-track,.orbit-head h2,.globe-copy h2,.work-head h2,.ptitle,.modal h3,.contact h2,.legal h1,.fin-name,.shell-copy h2,.encap-copy h2{font-family:var(--display);font-stretch:100%;font-weight:700;letter-spacing:-.02em}
.brand{font-family:var(--display);font-stretch:100%;font-weight:700;letter-spacing:-.01em}
.hero-title{line-height:.9}
.ht{font-size:clamp(3.9rem,15vw,15.5rem)}
.ht-mid em{font-size:clamp(2.6rem,7.4vw,7.4rem)}
.orbit-head h2,.globe-copy h2,.work-head h2,.shell-copy h2,.encap-copy h2{font-size:clamp(2.2rem,5.1vw,4.8rem);line-height:1}
.about-main h2{font-size:clamp(2.1rem,4.4vw,4.3rem);line-height:1}
.ptitle{font-size:clamp(2.1rem,4.2vw,3.7rem);line-height:.95}
.modal h3{font-size:clamp(2.1rem,5vw,3.3rem);line-height:.95}
.contact h2{font-size:clamp(2.6rem,8vw,8rem);line-height:.92}
.legal h1{font-size:clamp(2.6rem,8.5vw,5.6rem);line-height:.92}
.fin-name{font-size:clamp(5.6rem,28vw,29rem)}
.about-art blockquote,.pcat,.m-cat,.legal .lede{font-weight:500;letter-spacing:-.01em}
.tape-track{font-weight:600}
@media (max-width:520px){.ht{font-size:22vw}}