/* Future Proof Intelligence, next site v5 (2026-09-30). A mix of the live site (the information), the v2 proposal site
   (the path, glass where you touch) and the light (one 3D moment per page). Type from the connector rooms. */
:root{--ground:#07090d;--ground2:#0b0f15;--ink:#f1efe9;--ink2:rgba(241,239,233,.72);--ink3:rgba(241,239,233,.48);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);
 --iris:#8fd0f2;--copper:#e2b28a;--serif:'Inter',system-ui,-apple-system,sans-serif;--sans:'Inter',system-ui,-apple-system,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:var(--ground);scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.65 var(--sans);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}img{max-width:100%}
/* the bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(env(safe-area-inset-top) + 16px) 5vw 14px;
 transition:background .4s,backdrop-filter .4s}
.bar.solid{background:rgba(5,6,7,.62);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.bar .wm{height:19px;display:block}
.bar nav{display:flex;gap:26px;align-items:center}
.bar nav a{text-decoration:none;font:500 14.5px var(--sans);color:var(--ink2);transition:color .2s}.bar nav a:hover,.bar nav a.on{color:var(--ink)}
.bar nav a.on{box-shadow:0 1px 0 var(--iris)}
.bar nav a.pill,.pill{font:600 14px var(--sans);color:#0b0d10;background:var(--ink);border-radius:999px;padding:9px 16px;text-decoration:none;white-space:nowrap}
.menu{display:none;background:none;border:0;color:var(--ink);font:500 15px var(--sans);cursor:pointer}
/* type */
.k{font:500 14px var(--sans);color:var(--ink3);margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,4.6vw,64px)}h2{font-size:clamp(30px,3.4vw,46px)}h3{font-size:24px;line-height:1.2}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--ink2)}
.lead{font-size:18px;color:var(--ink2);max-width:36em;text-wrap:pretty;margin:18px 0 0}
p{text-wrap:pretty}
/* layout */
.hero{position:relative;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:3vw;padding:120px 5vw 60px}
.hero .copy{position:relative;z-index:2}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--sans);text-decoration:none;border-radius:999px;padding:12px 20px;cursor:pointer;border:0}
.btn.pri{background:var(--ink);color:#0b0d10}.btn.ghost{color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line2)}
.sec{position:relative;z-index:2;padding:110px 5vw;max-width:1280px;margin:0 auto}
.sec.hair{border-top:1px solid var(--line)}
.head{max-width:760px;margin-bottom:44px}.head .lead{margin-top:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* surfaces: glass only where you touch */
.card{border:1px solid var(--line);border-radius:22px;padding:26px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.card .n{font:500 13px var(--sans);color:var(--iris)}.card h3{margin:8px 0 8px}.card p{margin:0;color:var(--ink2);font-size:15.5px}
.card .was{font-size:14px;color:var(--ink3);margin:0 0 10px}
a.card{display:block;text-decoration:none;transition:border-color .3s,transform .5s var(--ease)}a.card:hover{border-color:var(--line2);transform:translateY(-3px)}
a.card .go{display:inline-block;margin-top:16px;font:500 14px var(--sans);color:var(--ink)}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 50%,rgba(255,255,255,.06)),rgba(12,15,19,.45);border:1px solid var(--line2);
 box-shadow:0 30px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border-radius:24px}
.rows{display:flex;flex-direction:column}.rows .r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.rows .r b{font:500 15px var(--sans);color:var(--ink)}.rows .r span{color:var(--ink2);font:400 19px/1.45 var(--serif)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.split>div{background:var(--ground);padding:28px}.split h3{font-size:20px;margin-bottom:14px}.split ul{margin:0;padding:0;list-style:none}.split li{padding:9px 0;border-top:1px solid var(--line);color:var(--ink2)}
.split .after li{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:10px}.tags span{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14.5px;color:var(--ink2)}
.quote{font:italic 400 clamp(24px,2.6vw,34px)/1.35 var(--serif);max-width:900px;color:var(--ink)}
.fine{font-size:13px;color:var(--ink3)}
.window{border-radius:24px;overflow:hidden;position:relative;min-height:340px;background:#0a0c0e center/cover no-repeat;display:flex;align-items:flex-end;padding:28px}
.window:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,0) 30%,rgba(5,6,7,.8))}
.window>*{position:relative;z-index:1}
/* reveal: things arrive as you reach them */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
/* the room (from v2): every question in one card */
.room{max-width:520px;padding:26px}
.room h3{font-size:28px}.room .url{font:500 13px var(--sans);color:var(--iris);margin-top:4px}
.room .ql{font:500 14px var(--sans);color:var(--ink2);margin:18px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font:500 13.5px var(--sans);color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:999px;padding:8px 13px;cursor:pointer;transition:all .25s}
.chip.on{background:var(--ink);color:#0b0d10;border-color:var(--ink)}
.room input{width:100%;font:15px var(--sans);color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:12px;padding:11px 12px;margin-top:9px;outline:none}
.room .made{display:none;text-align:center}.room.work .form,.room.work .headl{display:none}.room.work .made{display:block}
.room .made fp-thinking{width:170px;margin:0 auto;display:block}.room .made h4{font:500 26px var(--serif);margin:8px 0 6px}.room .made p{color:var(--ink2);font-size:14.5px;margin:0}
footer{border-top:1px solid var(--line);padding:46px 5vw 60px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;color:var(--ink3);font-size:14px;position:relative;z-index:2}
footer a{text-decoration:none;color:var(--ink2)}footer nav{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:900px){
 .bar nav a:not(.pill){display:none}.menu{display:inline-block}.bar.open nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;padding:20px 22px 26px;background:rgba(5,6,7,.94);border-bottom:1px solid var(--line)}
 .bar.open nav a{display:block}
 .hero{grid-template-columns:1fr;align-items:end;padding:110px 22px 50px;min-height:100dvh}.hero .copy{padding-top:44dvh}
 .sec{padding:80px 22px}.grid2,.grid3,.grid4,.split{grid-template-columns:1fr}.rows .r{grid-template-columns:1fr;gap:6px}
}

/* craft: transitions between pages, a skip link, visible focus, motion that respects the reader */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--ink);color:#0b0d10;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{left:14px}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:6px}
canvas{outline:none}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.95}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }
.who .card{display:flex;flex-direction:column}.who .card p{flex:1}.who .go{margin-top:18px}
.what{font:400 clamp(22px,2.3vw,30px)/1.45 var(--serif);max-width:980px;color:var(--ink)}
.what b{font-weight:500}.pillars{margin-top:34px}
.steps4{counter-reset:s}

/* ── v7 (2026-09-30): a living ground instead of flat black, film grain, editorial imagery, the way in ── */
body{background:var(--groundbg);background-attachment:fixed}
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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")}
.split>div{background:rgba(9,12,17,.92)}
/* every 3D canvas lets the ground through: black is transparent under screen */
.hero canvas,.stage canvas,canvas.fx{mix-blend-mode:screen}
.hero{background:radial-gradient(900px 700px at 70% 45%,rgba(40,64,98,.20),transparent 65%)}
/* the way in (replaces "room") */
.bar nav a.pill .s{display:none}
@media (max-width:900px){ .bar nav a.pill .l{display:none} .bar nav a.pill .s{display:inline} }
/* big editorial imagery */
.plate{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);transition:transform 2.4s var(--ease)}
.plate.in>img{transform:scale(1)}
.plate::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,9,13,.85) 0%,rgba(7,9,13,0) 22%,rgba(7,9,13,0) 45%,rgba(7,9,13,.82) 100%)}
.plate .in-copy{padding:0 5vw 9vh;max-width:1280px;margin:0 auto;width:100%}
.plate .in-copy h2{font-size:clamp(34px,4.4vw,66px);max-width:14em}
.plate .in-copy p{max-width:34em;color:var(--ink2);font-size:18px;margin:16px 0 0}
/* the window that opens as you scroll (from v2) */
.win{position:relative;height:190vh}
.win .stick{position:sticky;top:0;height:100dvh;overflow:hidden}
.win .pic{position:absolute;inset:0;background:center/cover no-repeat;clip-path:inset(var(--i,16%) calc(var(--i,16%)*1.5) var(--i,16%) round var(--rr,30px));will-change:clip-path}
.win .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,13,.35),rgba(7,9,13,0) 35%,rgba(7,9,13,.15) 60%,rgba(7,9,13,.75))}
.win .over{position:absolute;left:0;right:0;bottom:0;padding:0 5vw 10vh;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*24px))}
.win .over h2{font-size:clamp(36px,5vw,76px);max-width:13em}
.win .over p{color:var(--ink2);max-width:32em;font-size:18px}
/* glass, the v7 grade */
.glass2{background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,rgba(255,255,255,.07)),rgba(14,18,24,.5);
 border:1px solid rgba(255,255,255,.16);border-radius:26px;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04);
 -webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%)}
.big{font:500 clamp(40px,6.2vw,96px)/1.0 var(--serif);letter-spacing:-.025em;text-wrap:balance;margin:0}
.big em{font-style:italic;font-weight:400;color:var(--ink2)}
.eyebrow{font:500 12.5px var(--sans);color:var(--ink3)}
.demo-note{font:500 12.5px var(--sans);color:var(--ink3);margin-top:12px}

/* ── v8 type (2026-09-30, Daniel: "the titles still feel AI"): Newsreader Light, set large and tight like print; the
   italic turn keeps the ink colour (the grey second half was the generated-page signature) ── */
h1,h2,h3,.big{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;font-optical-sizing:auto}
h1{font-size:clamp(52px,6.9vw,118px);line-height:.94;letter-spacing:-.045em}
h2{font-size:clamp(38px,5vw,80px);line-height:.98;letter-spacing:-.038em}
h3{font-weight:400;letter-spacing:-.015em}
.big{font-size:clamp(46px,7.4vw,120px);line-height:.95;letter-spacing:-.045em}
h1 em,h2 em,h3 em,.big em{font-style:italic;font-weight:400;color:inherit}
.hero .copy h1{max-width:10.5em}
@media (max-width:700px){ h1{font-size:clamp(46px,13.5vw,60px)} h2{font-size:clamp(34px,9.6vw,44px)} .big{font-size:clamp(42px,12vw,56px)} }

/* ── v8 components: glass defined by light, never by boxes ──
   .lens   see-through glass; no border, a light edge only where the light falls (follows pointer / device tilt: --lx --ly)
   .lpill  a choice or button as a quiet glass pill with a slow ring of light; .on = chosen */
.lens{position:relative;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
 -webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);isolation:isolate;overflow:hidden}
.lens::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:radial-gradient(420px 260px at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.55),rgba(255,255,255,.08) 55%,rgba(255,255,255,.03));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lens::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:radial-gradient(520px 320px at var(--lx,30%) var(--ly,0%),rgba(143,208,242,.10),transparent 60%),radial-gradient(400px 300px at calc(100% - var(--lx,30%)) 110%,rgba(226,178,138,.07),transparent 60%)}
.lpill{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 15px var(--sans);color:var(--ink);padding:12px 20px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
 background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .5s var(--ease),transform .5s var(--ease),color .4s}
.lpill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:conic-gradient(from var(--ang,0deg),rgba(255,255,255,.08),rgba(143,208,242,.55),rgba(255,255,255,.08) 30%,rgba(226,178,138,.45) 60%,rgba(255,255,255,.08) 75%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lring 9s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lring{to{--ang:360deg}}
.lpill:hover{background:rgba(255,255,255,.09)}.lpill.on{background:rgba(241,239,233,.94);color:#0b0d10}.lpill.on::before{opacity:0}
@media (prefers-reduced-motion:reduce){ .lpill::before{animation:none} }
.k+h1,.k+h2,.eyebrow+h1,.eyebrow+h2{margin-top:16px}
html,body{overflow-x:clip}

/* ── v9 type (2026-09-30 late, Daniel: "big and thin is not doing it; timeless, think Apple; something that reshapes an
   industry"): Inter at display optical size, semibold, tight; the second clause in quiet grey, upright (Apple's register).
   Tested against Inter 700 with a cyan-to-copper clause (kept for one moment at most) and Inter Tight. ── */
h1,h2,h3,.big{font-family:var(--serif);font-weight:600!important;font-style:normal;letter-spacing:-.035em;font-optical-sizing:auto}
h1{font-size:clamp(46px,6.6vw,104px);line-height:1.0}
h2{font-size:clamp(34px,4.3vw,66px);line-height:1.04;letter-spacing:-.032em}
h3{letter-spacing:-.02em;line-height:1.15}
.big{font-size:clamp(42px,6.2vw,98px);line-height:1.0}
h1 em,h2 em,h3 em,.big em{font-style:normal!important;font-weight:600!important;color:rgba(241,239,233,.46)!important}
.hero .copy h1{max-width:11em}
@media (max-width:700px){ h1{font-size:clamp(40px,11.4vw,50px)} h2{font-size:clamp(30px,8.6vw,38px)} .big{font-size:clamp(38px,10.6vw,48px)} }
.bar .wm{height:26px}
@media (max-width:700px){ .bar .wm{height:22px} }

/* ── v9 images grow out of the dark: a soft iris opening (Daniel: "maybe it grows into it"), shared by every .win and .plate.
   --r = the opening (0 to 1), set from scroll by site.js; the image sharpens and settles as it opens. ── */
.win .pic,.plate>img,.plate.in>img{clip-path:none!important;-webkit-mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0) * 118% - 14%),transparent calc(var(--r,0) * 118%));
 mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0) * 118% - 14%),transparent calc(var(--r,0) * 118%));
 transform:scale(calc(1.16 - var(--r,0) * .16));filter:saturate(calc(.55 + var(--r,0) * .45)) brightness(calc(.7 + var(--r,0) * .3));transition:none!important;will-change:transform,mask-image}
.plate::before{z-index:-1}
.plate .in-copy{opacity:calc(var(--r,0) * 1.6 - .5);transform:translateY(calc((1 - var(--r,0)) * 20px))}
@media (prefers-reduced-motion:reduce){ .win .pic,.plate>img{-webkit-mask-image:none;mask-image:none;transform:none;filter:none} .plate .in-copy{opacity:1;transform:none} }
.win .pic::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,9,13,.62) 0%,rgba(7,9,13,.25) 45%,rgba(7,9,13,0) 70%)}
.win .over{z-index:2}.win .over h2,.win .over p,.win .over .eyebrow,.plate .in-copy>*{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.win .over .eyebrow,.plate .in-copy .eyebrow{color:rgba(241,239,233,.8)}


/* ── v15 titles first: the heading arrives alone, then (about a second later) what follows it ── */
.js .tf{opacity:0;transform:translateY(22px);filter:blur(8px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.js .tf.in{opacity:1;transform:none;filter:none}
.js .tf-after{opacity:0!important;transform:translateY(12px);transition:opacity .9s var(--ease) var(--d,1s),transform .9s var(--ease) var(--d,1s)!important}
.js .tf-after.tf-in{opacity:1!important;transform:none}
.js body.home #herocopy{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){ .js .tf,.js .tf-after{opacity:1!important;transform:none;filter:none;transition:none!important} }
@media (max-width:980px){ .bar.v15 .b-mid .wm{height:25px} }
/* before site.js takes over (an inline script in the header adds .tfx at once), the first title and what follows it
   wait hidden, so nothing flashes; if the script never arrives they appear on their own after a few seconds */
@media (prefers-reduced-motion:no-preference){ .tfx:not(.tfr) main h1,.tfx:not(.tfr) main h1~*{opacity:0;animation:tfSafe .8s ease 5s forwards} }
@keyframes tfSafe{to{opacity:1}}

/* ── v16 masthead (Daniel 2026-10-01: grounded, almost institutional, modern; nothing overdone) ──
   A full-width bar between hairlines. The wordmark centred and confident. One flourish only: the hairline beneath
   carries a slow copper to cyan light, and the page you are on is marked by that same line. On scroll the bar
   condenses to a single line with the wordmark and the title of what you are reading. site.js builds it. */
.bar.v16{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
 height:calc(env(safe-area-inset-top) + 68px);padding:env(safe-area-inset-top) 4vw 0;border:0;
 background:rgba(7,9,13,.82);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);transition:height .5s var(--ease),background .5s}
.bar.v16::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.09)}
.bar.v16::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;opacity:.85;
 background:linear-gradient(90deg,transparent 0%,rgba(226,178,138,.0) 20%,rgba(226,178,138,.9) 42%,rgba(143,208,242,.9) 58%,rgba(143,208,242,0) 80%,transparent 100%);
 background-size:200% 100%;animation:mhLight 14s linear infinite}
@keyframes mhLight{from{background-position:100% 0}to{background-position:-100% 0}}
.bar.v16>nav,.bar.v16>.menu{display:none!important}
.bar.v16 .m-l{display:flex;align-items:stretch;gap:30px;justify-self:start;height:100%}
.bar.v16 .m-r{display:flex;align-items:center;gap:26px;justify-self:end}
.bar.v16 a.lk{display:flex;align-items:center;position:relative;text-decoration:none;font:500 14px var(--sans);color:var(--ink2);letter-spacing:.005em;transition:color .25s}
.bar.v16 a.lk:hover{color:var(--ink)}
.bar.v16 .m-l a.lk.on{color:var(--ink)}
.bar.v16 .m-l a.lk.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;background:linear-gradient(90deg,var(--copper),var(--iris))}
.bar.v16 .m-mid{justify-self:center;position:relative;display:grid;place-items:center;text-decoration:none;height:100%}
.bar.v16 .m-mid .wm{height:30px;width:auto;display:block;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bar.v16 .m-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis;
 font:500 14px var(--sans);color:var(--ink2);opacity:0;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bar.v16 .m-title b{font-weight:600;color:var(--ink)}
.bar.v16 .m-sign{font:500 14px var(--sans);color:var(--ink2);text-decoration:none;transition:color .25s}.bar.v16 .m-sign:hover{color:var(--ink)}
.bar.v16 .m-enter{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px 0 16px;border-radius:6px;text-decoration:none;
 font:600 13.5px var(--sans);color:#0b0d10;background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);transition:background .25s,gap .35s var(--ease)}
.bar.v16 .m-enter svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.bar.v16 .m-enter:hover{background:#fff}.bar.v16 .m-enter:hover svg{transform:translateX(3px)}
/* condensed while reading */
.bar.v16.solid{height:calc(env(safe-area-inset-top) + 52px);background:rgba(7,9,13,.9)}
.bar.v16.solid .m-mid .wm{height:22px}
.bar.v16.reading .m-mid .wm{opacity:0;transform:translateY(-8px)}
.bar.v16.reading .m-title{opacity:1;transform:translate(-50%,-50%)}
/* phones */
.bar.v16 .m-menu{display:none;align-self:center;width:40px;height:40px;margin-left:-10px;border:0;background:none;cursor:pointer;position:relative}
.bar.v16 .m-menu i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.bar.v16 .m-menu i:nth-child(1){top:16px}.bar.v16 .m-menu i:nth-child(2){top:23px}
.bar.v16.open .m-menu i:nth-child(1){top:19.5px;transform:rotate(45deg)}.bar.v16.open .m-menu i:nth-child(2){top:19.5px;transform:rotate(-45deg)}
.m-sheet{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 60px);bottom:0;z-index:59;display:flex;flex-direction:column;padding:10px 6vw 40px;
 background:rgba(7,9,13,.97);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.m-sheet a{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08);
 font:600 26px/1.1 var(--serif);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.m-sheet a::after{content:"\2192";font:400 18px var(--sans);color:var(--ink3)}
.m-sheet a.on{color:var(--ink3)}
.m-sheet .sm{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:22px}
.m-sheet .sm a{font:500 15px var(--sans);letter-spacing:0;color:var(--ink2);padding:10px 0;border:0}.m-sheet .sm a::after{content:none}
.m-sheet.open{opacity:1;pointer-events:auto}
@media (max-width:980px){
 .bar.v16{grid-template-columns:auto 1fr auto;height:calc(env(safe-area-inset-top) + 60px);padding:env(safe-area-inset-top) 18px 0}
 .bar.v16.solid{height:calc(env(safe-area-inset-top) + 52px)}
 .bar.v16 .m-l a.lk,.bar.v16 .m-sign{display:none}.bar.v16 .m-menu{display:block}
 .bar.v16 .m-mid .wm{height:24px}.bar.v16.solid .m-mid .wm{height:20px}
 .bar.v16 .m-title{max-width:52vw;font-size:13.5px}
 .bar.v16 .m-enter{height:34px;padding:0 12px 0 14px}
}
@media (min-width:981px){ .m-sheet{display:none} }
@media (prefers-reduced-motion:reduce){ .bar.v16::before{animation:none} }

/* ── v16 footer: a typographic close. The wordmark engraved across the width in light, one line, the index in clean
   columns between hairlines, the address, the email. The one precise detail: the engraved wordmark catches a slow
   band of copper to cyan light as you reach it. ── */
footer.fx16{display:block;position:relative;z-index:2;margin:0;padding:0;border:0;color:var(--ink2);font-size:14.5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
footer.fx16 .f-in{max-width:1240px;margin:0 auto;padding:0 4vw}
footer.fx16 .f-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:72px 0 34px;border-top:1px solid rgba(255,255,255,.1)}
footer.fx16 .f-line{font:600 clamp(26px,3vw,40px)/1.1 var(--serif);letter-spacing:-.035em;color:var(--ink);margin:0;max-width:18em}
footer.fx16 .f-line em{font-style:normal;color:rgba(241,239,233,.46)}
footer.fx16 .f-enter{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 20px;border-radius:6px;text-decoration:none;
 font:600 14.5px var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .25s}
footer.fx16 .f-enter:hover{background:rgba(255,255,255,.06)}footer.fx16 .f-enter svg{width:14px;height:14px}
footer.fx16 .f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
footer.fx16 .f-cols>div{padding:26px 22px 30px 0}footer.fx16 .f-cols>div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.08)}
footer.fx16 .f-cols b{display:block;font:500 13px var(--sans);color:var(--ink3);margin-bottom:14px}
footer.fx16 .f-cols a{display:block;color:var(--ink2);text-decoration:none;padding:4px 0;transition:color .2s;overflow-wrap:anywhere}footer.fx16 .f-cols a:hover{color:var(--ink)}
footer.fx16 .f-cols p{margin:0;color:var(--ink2);line-height:1.7}
footer.fx16 .f-mark{position:relative;margin:46px 0 0;line-height:0;overflow:hidden}
footer.fx16 .f-mark svg{display:block;width:100%;height:auto}
footer.fx16 .f-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 calc(30px + env(safe-area-inset-bottom));color:var(--ink3);font-size:13px}
@media (max-width:900px){ footer.fx16 .f-in{padding:0 22px} footer.fx16 .f-top{padding:56px 0 28px} footer.fx16 .f-cols{grid-template-columns:1fr 1fr}
 footer.fx16 .f-cols>div:nth-child(3){padding-left:0;border-left:0} footer.fx16 .f-cols>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)} }
footer.fx16 .f-mark{aspect-ratio:2400/437;-webkit-mask:url(/img/wordmark-mask.png) center/100% 100% no-repeat;mask:url(/img/wordmark-mask.png) center/100% 100% no-repeat;
 background:linear-gradient(90deg,rgba(241,239,233,.07) 0%,rgba(241,239,233,.07) var(--a,0%),rgba(226,178,138,.55) calc(var(--a,0%) + 8%),rgba(143,208,242,.5) calc(var(--a,0%) + 16%),rgba(241,239,233,.07) calc(var(--a,0%) + 26%),rgba(241,239,233,.07) 100%);
 box-shadow:none;margin-top:52px}
@media (prefers-reduced-motion:reduce){ footer.fx16 .f-mark{background:rgba(241,239,233,.1)} }
@media (max-width:900px){ footer.fx16 .f-cols>div:nth-child(3){grid-column:1/-1;order:5;border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.08)} footer.fx16 .f-cols>div:nth-child(4){border-left:1px solid rgba(255,255,255,.08);padding-left:22px;border-top:0} }
@media (max-width:900px){ footer.fx16 .f-cols>div:nth-child(4){border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.08)} footer.fx16 .f-cols>div:nth-child(3){padding-top:26px} }
footer a[href^="mailto:"]{overflow-wrap:normal;word-break:keep-all;white-space:nowrap;font-size:.92em}

/* ── the ground under every sticky 3D stage (2026-10-01 audit). A sticky element is its own stacking context, so a
   screen-blended canvas inside it blends with nothing and its black shows as a dark box with hard edges. Each stage
   therefore carries the page ground itself, fixed to the viewport so it lines up pixel for pixel. ── */
:root{--groundbg:radial-gradient(1400px 900px at 85% -10%,rgba(46,78,122,.22),transparent 60%),
 radial-gradient(1100px 800px at -10% 105%,rgba(128,86,52,.14),transparent 60%),
 linear-gradient(180deg,#07090d 0%,#090c11 50%,#07090d 100%)}
#four .stick,#strata .stick,#cosmos .stick,#stage .stick,#readin .stick,.iq-stick,.shelf .stage,.walk .stage,#see.nv .nv-stick{background:var(--groundbg)!important;background-attachment:fixed!important}
#night .stick{background:radial-gradient(1000px 700px at 70% calc(100% - var(--night,0)*40%),rgba(226,178,138,calc(var(--night,0)*.12)),transparent 60%),var(--groundbg)!important;background-attachment:scroll,fixed,fixed,fixed!important}
/* image plates and windows dissolve into the ground at both ends (no horizontal edge) */
.plate::before{background:linear-gradient(180deg,#080a0f 0%,rgba(8,10,15,.55) 9%,rgba(8,10,15,0) 24%,rgba(8,10,15,0) 48%,rgba(8,10,15,.78) 80%,#080a0f 100%)!important}
.win .pic::after{background:linear-gradient(180deg,#080a0f 0%,rgba(8,10,15,.3) 12%,rgba(8,10,15,0) 32%,rgba(8,10,15,.15) 60%,rgba(8,10,15,.8) 88%,#080a0f 100%)!important}
/* the way in: the glass fits its content (no tall empty card) */
.wi-convo{min-height:0!important}.wi-stage{flex:none!important}
@media (min-width:901px){ .wi{align-items:start} }
/* plates and windows: the photo itself fades to transparent at both ends (combined with the iris opening), so the real
   ground shows through and no colour band can mismatch */
.win .pic,.plate>img,.plate.in>img{
 -webkit-mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0) * 118% - 14%),transparent calc(var(--r,0) * 118%)),linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0) * 118% - 14%),transparent calc(var(--r,0) * 118%)),linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);
 mask-composite:intersect}
.plate::before{background:linear-gradient(180deg,rgba(8,10,15,0) 0%,rgba(8,10,15,0) 45%,rgba(8,10,15,.7) 82%,rgba(8,10,15,0) 100%)!important}
.win .pic::after{background:linear-gradient(180deg,rgba(8,10,15,0) 0%,rgba(8,10,15,0) 40%,rgba(8,10,15,.6) 80%,rgba(8,10,15,0) 100%)!important}
@media (prefers-reduced-motion:reduce){ .win .pic,.plate>img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)} }
/* v17: the engraved wordmark almost disappears into the dark; only the passing light reveals it */
footer.fx16 .f-mark{background:linear-gradient(90deg,rgba(241,239,233,.028) 0%,rgba(241,239,233,.028) var(--a,0%),rgba(226,178,138,.34) calc(var(--a,0%) + 9%),rgba(143,208,242,.3) calc(var(--a,0%) + 17%),rgba(241,239,233,.028) calc(var(--a,0%) + 26%),rgba(241,239,233,.028) 100%)}
@media (prefers-reduced-motion:reduce){ footer.fx16 .f-mark{background:rgba(241,239,233,.05)} }
/* v17 masthead refinements: calmer weights and spacing, a lighter outlined Enter on phones */
.bar.v16 a.lk,.bar.v16 .m-sign{font-weight:450;font-size:13.5px;letter-spacing:.01em}
.bar.v16 .m-l{gap:34px}
.bar.v16 .m-enter{height:34px;padding:0 13px 0 15px;font-size:13px;border-radius:5px}
@media (max-width:980px){ .bar.v16 .m-enter{height:32px;padding:0 11px 0 13px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(241,239,233,.38)} .bar.v16 .m-enter:hover{background:rgba(255,255,255,.06)} }
/* v17: on Home the label waits with the title until the eye has formed */
.js body.home #herocopy .k{opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js body.home.formed #herocopy .k{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js body.home #herocopy .k{opacity:1;transform:none} }