/* ============================================================
   PROJECT PHI — ART DIRECTION 2026  ·  refined
   Classy clash: bold Bricolage grotesk × Newsreader italic serif.
   Aretè timbres as full-bleed section grounds (bone · petrol ·
   navy · terracotta), ink/bone type, ONE warm terracotta accent
   (the periods, the cursor beam, the enter mark). Logo-derived
   forms only — line · dash · dot · sunburst. Tokens from ../styles.css.
   ============================================================ */

:root{
  --mx: clamp(22px, 5.6vw, 116px);
  --spine-x: clamp(20px, 3.2vw, 52px);
  --ink: #011D28;
  --bone: #F6F4EE;
  --petrol: var(--phi-petrol);
  --terracotta: var(--phi-terracotta);
  --ochre: var(--phi-ochre);
  --accent: var(--terracotta);
  --hero-bg: var(--bone);
  --hero-fade: 46;
  --rule: 1.5px;
  --img-filter: grayscale(.2) saturate(.8) contrast(1.05) brightness(.96);
  --sea-tint: .45;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bone); color:var(--ink); font-family:var(--font-body); overflow-x:hidden; }
html.js body{ overflow-y:hidden; }
html.js body.entered{ overflow-y:auto; }
img{ display:block; max-width:100%; }
em{ font-style:italic; }

/* ---------- the classy clash: grotesk × italic serif ---------- */
.h{ font-family:var(--font-display); font-weight:600; letter-spacing:-.045em; line-height:.9; margin:0; color:inherit; }
.h em{ font-family:'Newsreader', Georgia, serif; font-style:italic; font-weight:420; letter-spacing:-.005em; }
.stop{ color:var(--accent); }
.serif{ font-family:'Newsreader', Georgia, serif; font-style:italic; font-weight:400; }

/* ---------- wabi-sabi grain ---------- */
.grain{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:.4; mix-blend-mode:overlay; }

/* ---------- the lighthouse spine + travelling sunburst beam ---------- */
.spine{ position:fixed; top:0; bottom:0; left:var(--spine-x); width:1px; background:#fff; opacity:.26; mix-blend-mode:difference; z-index:40; pointer-events:none; }
.spine-fill{ position:absolute; top:0; left:0; right:0; height:0; background:#fff; opacity:.85; }
.spine-node{ position:fixed; left:var(--spine-x); top:0; width:46px; height:46px; margin:-23px 0 0 -23px; background-color:var(--ink); -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Cg%20stroke='%23fff'%20stroke-width='1.3'%20stroke-linecap='round'%3E%3Cline%20x1='27'%20y1='20'%20x2='34'%20y2='20'/%3E%3Cline%20x1='26.06'%20y1='23.5'%20x2='32.12'%20y2='27'/%3E%3Cline%20x1='23.5'%20y1='26.06'%20x2='27'%20y2='32.12'/%3E%3Cline%20x1='20'%20y1='27'%20x2='20'%20y2='34'/%3E%3Cline%20x1='16.5'%20y1='26.06'%20x2='13'%20y2='32.12'/%3E%3Cline%20x1='13.94'%20y1='23.5'%20x2='7.88'%20y2='27'/%3E%3Cline%20x1='13'%20y1='20'%20x2='6'%20y2='20'/%3E%3Cline%20x1='13.94'%20y1='16.5'%20x2='7.88'%20y2='13'/%3E%3Cline%20x1='16.5'%20y1='13.94'%20x2='13'%20y2='7.88'/%3E%3Cline%20x1='20'%20y1='13'%20x2='20'%20y2='6'/%3E%3Cline%20x1='23.5'%20y1='13.94'%20x2='27'%20y2='7.88'/%3E%3Cline%20x1='26.06'%20y1='16.5'%20x2='32.12'%20y2='13'/%3E%3C/g%3E%3C/svg%3E"); mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Cg%20stroke='%23fff'%20stroke-width='1.3'%20stroke-linecap='round'%3E%3Cline%20x1='27'%20y1='20'%20x2='34'%20y2='20'/%3E%3Cline%20x1='26.06'%20y1='23.5'%20x2='32.12'%20y2='27'/%3E%3Cline%20x1='23.5'%20y1='26.06'%20x2='27'%20y2='32.12'/%3E%3Cline%20x1='20'%20y1='27'%20x2='20'%20y2='34'/%3E%3Cline%20x1='16.5'%20y1='26.06'%20x2='13'%20y2='32.12'/%3E%3Cline%20x1='13.94'%20y1='23.5'%20x2='7.88'%20y2='27'/%3E%3Cline%20x1='13'%20y1='20'%20x2='6'%20y2='20'/%3E%3Cline%20x1='13.94'%20y1='16.5'%20x2='7.88'%20y2='13'/%3E%3Cline%20x1='16.5'%20y1='13.94'%20x2='13'%20y2='7.88'/%3E%3Cline%20x1='20'%20y1='13'%20x2='20'%20y2='6'/%3E%3Cline%20x1='23.5'%20y1='13.94'%20x2='27'%20y2='7.88'/%3E%3Cline%20x1='26.06'%20y1='16.5'%20x2='32.12'%20y2='13'/%3E%3C/g%3E%3C/svg%3E"); transition:background-color .5s var(--ease-out), opacity .6s var(--ease-out); z-index:41; pointer-events:none; }
html:not(.js) .spine, html:not(.js) .spine-node{ display:none; }
.spine, .spine-node{ opacity:0; transition:opacity .6s var(--ease-out); }
body.entered .spine{ opacity:.26; }
body.entered .spine-node{ opacity:.78; }

/* ---------- cursor: the moving circle, divided by the line ---------- */
.cursor{ position:fixed; inset:0; z-index:70; pointer-events:none; display:none; mix-blend-mode:difference; }
body.has-cursor .cursor, body.has-cursor .cur-beam{ display:block; }
body.has-cursor, body.has-cursor *{ cursor:none; }
.cur-dot,.cur-ring{ position:fixed; top:0; left:0; border-radius:50%; }
.cur-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#fff; }
.cur-ring{ width:30px; height:30px; margin:-15px 0 0 -15px; border:1px solid #fff; opacity:.75; transition:width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out); }
body.cur-lg .cur-ring{ width:50px; height:50px; margin:-25px 0 0 -25px; }
.cur-beam{ position:fixed; top:0; left:0; width:1.5px; height:48px; margin:-24px 0 0 -.75px; background:var(--terracotta); z-index:69; pointer-events:none; display:none; }
body.cur-lg .cur-beam{ height:64px; margin:-32px 0 0 -.75px; }

/* ---------- logo-derived marks ---------- */
.wm-mark{ height:clamp(22px,2.5vw,30px); width:auto; }
.wm-logo{ height:clamp(54px,5.4vw,82px); width:auto; }
.mk{ display:inline-block; flex:none; width:13px; height:13px; border-radius:50%; border:1.5px solid currentColor; background:transparent; }
.mk-dot{ background:currentColor; border:0; width:9px; height:9px; }
.chrome .mk{ width:9px; height:9px; }
.menu-list a .mk{ transition:background .3s var(--ease-out), border-color .3s; }
.menu-list a:hover .mk{ background:var(--accent); border-color:var(--accent); }
.shape{ position:absolute; pointer-events:none; z-index:0; }
.ring{ border-radius:50%; border:1.5px solid currentColor; }

/* ---------- language slider — bauhaus instrument: mono stops boven één doorlopende 1px rail, elke stop gemarkeerd met een open ring op de lijn, één massieve terracotta schijf glijdt over de rail naar de actieve taal en vult de ring — lijn + ring + cirkel, vlak en geometrisch; expo pace ---------- */
.toggle{ position:relative; display:inline-flex; align-items:stretch; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; padding-bottom:12px; }
.toggle::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:currentColor; opacity:.3; }
.toggle button{ position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer; color:inherit; padding:5px 0; line-height:1; width:34px; text-align:center; opacity:.42; transition:opacity .45s ease, color .3s ease .25s; font-size:inherit; letter-spacing:inherit; font-family:inherit; }
.toggle button:hover{ opacity:.8; }
.toggle button[aria-pressed="true"]{ opacity:1; }
.toggle button::after{ content:""; position:absolute; left:50%; bottom:-10px; width:5px; height:5px; border-radius:50%; border:1px solid currentColor; transform:translateX(-50%); }
.toggle i{ position:absolute; bottom:0; left:17px; width:9px; height:9px; border-radius:50%; background:var(--accent); transform:translateX(-50%); transition:left .68s cubic-bezier(.19,1,.22,1); pointer-events:none; z-index:1; }
.toggle[data-lang="en"] i{ left:17px; }
.toggle[data-lang="nl"] i{ left:51px; }
.toggle[data-lang="fr"] i{ left:85px; }
.close .toggle i{ background:var(--ochre); }
.chrome .toggle{ display:none; }
/* the gate stays pure — mark + line + tagline only; the language slider first appears once you move past it (menu, close) */
.gate .toggle{ display:inline-flex; }
.close .toggle{ align-self:flex-end; }
.legalline{ display:flex; align-items:center; gap:22px; margin-top:clamp(18px,2vw,28px); font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.legalline a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.legalline a:hover{ opacity:.75; }

/* ---------- chrome ---------- */
/* The chrome no longer needs the difference blend: it now rides on the
   thick frosted bar, so its content is set crisp in bone — which is what
   makes the logo's subheader legible (difference was washing out the
   tagline's light, semi-transparent pixels). */
.chrome{ position:fixed; top:0; left:0; right:0; z-index:38; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(18px,2.4vw,30px) var(--mx); color:var(--bone); }
.chrome-r{ display:flex; align-items:center; gap:clamp(18px,3vw,42px); }
.essence{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.chrome .essence{ display:none; }
@media (min-width:860px){ .chrome .essence{ display:inline; } }
.menu-btn{ appearance:none; background:none; border:0; color:inherit; cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; padding:0; }

/* ---------- top-banner legibility: a thick, progressively-blurred
   scrim that dissolves into the content below ----------
   Two stacked backdrop layers (light + broad, heavy + top-only) give a
   real blur RAMP rather than a hard band; a navy scrim on the heavy
   layer darkens the mid-tone grounds so the difference-blended chrome
   reads cleanly, then both fade to nothing via the mask gradients. */
.topfade{ position:fixed; top:0; left:0; right:0; z-index:37; pointer-events:none; height:clamp(170px,23vh,300px); opacity:0; transition:opacity .6s var(--ease-out); }
html:not(.js) .topfade{ display:none; }
body.entered .topfade{ opacity:1; }
.topfade::before, .topfade::after{ content:""; position:absolute; inset:0; }
.topfade::before{
  -webkit-backdrop-filter:blur(9px) saturate(102%); backdrop-filter:blur(9px) saturate(102%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 32%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 32%,transparent 96%);
}
.topfade::after{
  -webkit-backdrop-filter:blur(28px) saturate(105%); backdrop-filter:blur(28px) saturate(105%);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--ink) 38%, transparent) 0%, color-mix(in srgb, var(--ink) 14%, transparent) 52%, transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 16%,transparent 66%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 16%,transparent 66%);
}

/* ---------- ENTER GATE — the calm opening, centred ---------- */
.gate{ position:fixed; inset:0; z-index:50; background:var(--bone); color:var(--ink); overflow:hidden; display:grid; grid-template-rows:auto 1fr; padding:clamp(22px,2.8vw,38px) var(--mx) clamp(26px,3vw,42px); }
html:not(.js) .gate{ position:static; min-height:100vh; min-height:100svh; }
/* gate: de escalatorclip (Shutterstock 1098096915) als ademend watermerk — vervaagd, vlak bij bone */
.gate-img{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.gate-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--img-filter) blur(6px); transform:scale(1.04); }
.gate-veil{ position:absolute; inset:0; background:color-mix(in srgb, var(--bone) 91%, transparent); }
.gate-top, .gate-body{ position:relative; z-index:1; }
.gate.leaving{ animation:gate-out .5s var(--ease-out) forwards; }
@keyframes gate-out{ to{ opacity:0; } }
.gate-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; position:relative; z-index:3; }
.gate-claim{ font-family:var(--font-mono); font-size:11px; line-height:1.7; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:.55; text-align:left; display:inline-flex; align-items:flex-start; gap:12px; white-space:nowrap; }
.gate-claim .phi-dash{ flex:none; margin-top:.85em; }
/* gate variants (tweak: data-gate) — both: kicker + tagline (default) · under: tagline, claim centred beneath · claim: the claim alone as the gate line */
.gate-alt{ display:none; margin:0; color:var(--ink); text-align:center; }
.gate-alt-serif{ display:none; font-family:'Newsreader', Georgia, serif; font-style:italic; font-weight:400; font-size:clamp(24px,3.4vw,46px); letter-spacing:-.01em; line-height:1.15; max-width:22ch; margin:clamp(20px,2.4vw,32px) auto 0; text-wrap:balance; }
.gate-alt-mono{ display:none; align-items:center; justify-content:center; gap:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:0; margin-top:clamp(16px,1.8vw,26px); animation:gate-alt-in 1.2s ease-in-out 5.6s forwards; }
@keyframes gate-alt-in{ to{ opacity:.55; } }
html[data-gate="under"] .gate-top .gate-claim{ visibility:hidden; }
html[data-gate="under"] .gate-alt{ display:block; }
html[data-gate="under"] .gate-alt-mono{ display:inline-flex; }
html[data-gate="claim"] .gate-top .gate-claim{ visibility:hidden; }
html[data-gate="claim"] .gate-line{ display:none; }
html[data-gate="claim"] .gate-alt{ display:block; }
html[data-gate="claim"] .gate-alt-serif{ display:block; }
@media (prefers-reduced-motion: reduce){ .gate-alt-mono{ animation:none; opacity:.55; } }
.gate-body{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gate-mark{ height:clamp(58px,6.6vw,88px); width:auto; }
.gate-line{ font-family:'Newsreader', Georgia, serif; font-style:italic; font-weight:400; font-size:clamp(24px,3.4vw,46px); letter-spacing:-.01em; margin-top:clamp(20px,2.4vw,32px); color:var(--ink); }
.gate-foot{ position:absolute; left:0; right:0; bottom:clamp(18px,3vw,42px); display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2vw,26px); }
/* the gate line — one gesture: the first phrase holds; the second arrives beneath it on the same curve and timing. Rest state: two centred lines, each with its stop. */
.gate-line{ display:grid; justify-items:center; text-align:center; row-gap:.08em; }
.gl{ white-space:nowrap; will-change:opacity; }
.gl-b{ opacity:0; animation:glB 1.8s ease-in-out 3.6s forwards; }
@keyframes glB{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .gl-a{ animation:none; opacity:1; } .gl-b{ animation:none; opacity:1; } }
/* the line and the dot (JS-driven): a hairline sweeps the second phrase left→right; its letters arrive as it passes — no blur, small travel. The first phrase stays put. */
.gate-line.wave{ position:relative; }
.gate-line.wave .gl-a{ animation:none; opacity:1; }
.gate-line.wave .gl-b{ position:relative; animation:none; opacity:1; visibility:hidden; }
.gate-line.wave.go .gl-b{ visibility:visible; }
.wv{ display:inline-block; white-space:pre; }
.gate-line.wave.go .gl-b .wv{ animation:wv-in 1.1s cubic-bezier(.22,1,.36,1) var(--d,0s) both; }
@keyframes wv-in{ from{ transform:translateY(-.22em); opacity:0; } to{ transform:none; opacity:1; } }
.wv-sweep{ position:absolute; top:-.14em; bottom:-.06em; left:0; width:1px; background:color-mix(in srgb, var(--ink) 42%, transparent); opacity:0; pointer-events:none; }
.gate-line.wave.go .wv-sweep{ animation:wv-sweep 1.7s cubic-bezier(.45,.05,.35,.95) both; }
@keyframes wv-sweep{ from{ left:0; opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } to{ left:100%; opacity:0; } }
.gate-foot .vline{ width:1px; height:clamp(38px,5vw,64px); background:color-mix(in srgb, var(--ink) 24%, transparent); }
.enter{ appearance:none; background:none; border:0; cursor:pointer; color:var(--ink); font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; padding:6px 10px; opacity:.75; transition:opacity .3s; }
.enter:hover{ opacity:1; }
.enter-shape{ width:7px; height:7px; border-radius:50%; background:var(--terracotta); transition:transform .4s var(--ease-out); }
.enter:hover .enter-shape{ transform:scale(1.6); }

/* ---------- MENU (navy) ---------- */
.menu{ position:fixed; inset:0; z-index:60; background:var(--ink); color:var(--bone); display:none; grid-template-rows:auto 1fr auto; gap:clamp(20px,4vh,48px); padding:clamp(18px,2.4vw,30px) var(--mx) clamp(28px,3.2vw,46px); overflow:hidden auto; }
body.menu-open .menu{ display:grid; animation:menu-bloom .7s var(--ease-out); }
@keyframes menu-bloom{ from{ clip-path:circle(0 at var(--ox,92%) var(--oy,30px)); } to{ clip-path:circle(150% at var(--ox,92%) var(--oy,30px)); } }
.menu-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.menu-close{ appearance:none; background:none; border:0; color:var(--bone); cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:0; }
.menu-list{ list-style:none; margin:0; padding:0; align-self:center; min-height:0; overflow-y:auto; }
.menu-list li{ border-top:1px solid color-mix(in srgb, var(--bone) 20%, transparent); }
.menu-list li:last-child{ border-bottom:1px solid color-mix(in srgb, var(--bone) 20%, transparent); }
.menu-list a{ display:flex; align-items:center; gap:clamp(20px,3vw,46px); font-family:var(--font-display); font-weight:380; text-decoration:none; color:var(--bone); font-size:clamp(34px,min(7.6vw,6.5vh),100px); line-height:1.04; letter-spacing:-.045em; padding:clamp(6px,1.2vw,16px) 0; transition:padding-left .45s var(--ease-out), font-weight .2s; }
.menu-list a em{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400; }
.menu-list a:hover{ padding-left:clamp(16px,2.4vw,40px); }
.menu-foot{ color:var(--bone); display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.menu-foot-l{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(17px,1.5vw,22px); letter-spacing:-.01em; line-height:1.15; }
.menu-foot-l em{ font-style:italic; }
.menu-foot-t{ display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; }
.menu-foot .thread{ font-size:11px; letter-spacing:.14em; gap:8px; opacity:.5; }
.menu-foot .thread .phi-dash{ width:12px; }
.menu-list li{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
body.menu-open .menu-list li{ opacity:1; transform:none; }
body.menu-open .menu-list li:nth-child(1){ transition-delay:.16s; }
body.menu-open .menu-list li:nth-child(2){ transition-delay:.23s; }
body.menu-open .menu-list li:nth-child(3){ transition-delay:.30s; }
body.menu-open .menu-list li:nth-child(4){ transition-delay:.37s; }
body.menu-open .menu-list li:nth-child(5){ transition-delay:.44s; }
body.menu-open .menu-list li:nth-child(6){ transition-delay:.51s; }

/* ---------- shared section frame ---------- */
main{ position:relative; z-index:1; }
.sec{ position:relative; overflow:hidden; padding:clamp(104px,15vh,196px) var(--mx) clamp(80px,12vh,140px); }
.tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.6; display:inline-flex; align-items:center; gap:12px; position:relative; z-index:2; }
.lead{ position:relative; z-index:2; font-size:clamp(18px,1.5vw,23px); line-height:1.5; opacity:.84; font-weight:400; }
.lead b{ font-weight:600; opacity:1; }

/* ---------- HERO (bone · the white front page) ----------
   The displaced petrol timbre is now a TWEAK (data-hero); bone is the
   default ground, ink type either way. A B&W architectural plate fades
   in from the right INTO the ground — the move ported from the earlier
   black-&-white direction. --hero-fade (set by tweaks.js) controls how
   deep the veil reaches across the plate. */
.hero{ background:var(--hero-bg); color:var(--ink); min-height:100vh; min-height:100svh; }
.hero .h{ font-size:clamp(62px,12vw,188px); max-width:9ch; position:relative; z-index:2; margin-top:clamp(12px,1.6vw,26px); }
.hero .lead{ max-width:42ch; margin-top:clamp(30px,5vw,72px); }
.hero .proof{ position:relative; z-index:2; display:flex; align-items:baseline; gap:clamp(18px,2.2vw,34px); margin-top:clamp(30px,4vw,56px); }
.fig{ font-family:var(--font-mono); font-size:clamp(54px,7.5vw,120px); font-weight:500; line-height:.86; letter-spacing:-.04em; }
.fig-lab{ font-size:clamp(15px,1.3vw,18px); line-height:1.45; opacity:.84; max-width:30ch; }
.scrollcue{ position:absolute; left:var(--mx); bottom:clamp(28px,4vh,52px); z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; display:flex; align-items:center; gap:12px; }
.scrollcue .cue-d{ width:1px; height:34px; background:currentColor; opacity:.5; }
/* the B&W plate, fading from the right into the ground */
.hero-img{ position:absolute; top:0; right:0; width:min(38vw,540px); height:100%; z-index:0; overflow:hidden; }
.hero-plate{ position:absolute; inset:0; --ps:1; --py:0px; transform:translateY(var(--py)) scale(var(--ps)); transform-origin:70% 40%; }
.hero-plate image-slot{ width:100%; height:100%; filter:var(--img-filter); }
.hero-plate .hero-video{ display:block; width:100%; height:100%; object-fit:cover; object-position:62% 32%; filter:var(--img-filter); }
.hero-img .veil{ position:absolute; inset:0; background:linear-gradient(90deg, var(--hero-bg) 3%, color-mix(in srgb, var(--hero-bg) 38%, transparent) calc(var(--hero-fade) * 1%), transparent 100%); }
/* full-bleed plate: the video takes the whole front page; bone dissolves over it from the text side */
@media (min-width:881px){
  html[data-plate="full"] .hero-img{ left:0; width:auto; }
  html[data-plate="full"] .hero-img .veil{ background:linear-gradient(90deg, var(--hero-bg) 26%, color-mix(in srgb, var(--hero-bg) 46%, transparent) calc(26% + var(--hero-fade) * .9%), transparent 98%); }
}
/* ---- hero entrance scene: brutalist glass door built in CSS — a stand-in until a real photograph lands. Self-toned (no --img-filter) so the terracotta handle-dot stays the single accent. ---- */
.phi-entrance{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(115deg,#d6d1c8 0%,#c9c4bb 46%,#b5b0a7 100%); }
.phi-entrance::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(30,26,20,.05) 0 1px, transparent 1px 74px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 122px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.06'/></svg>"); }
.phi-entrance::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(180deg, transparent 64%, rgba(20,16,12,.16) 100%); }
.pe-brand{ position:absolute; left:70%; top:24%; transform:translateX(-50%); display:grid; justify-items:center; gap:13px; width:max-content; }
.pe-brand img{ height:clamp(30px,3vw,42px); width:auto; filter:grayscale(1) contrast(.92); opacity:.8; }
.pe-word{ font-family:var(--font-mono); font-size:clamp(7px,.6vw,8.5px); letter-spacing:.3em; text-transform:uppercase; white-space:nowrap; color:color-mix(in srgb, var(--ink) 62%, transparent); text-shadow:0 1px 0 rgba(255,255,255,.4); }
.pe-floor{ position:absolute; left:0; right:0; bottom:0; height:11%; background:linear-gradient(180deg,#aca79e,#98938a); box-shadow:0 -1px 0 rgba(30,26,20,.24); }
.pe-floor::before{ content:""; position:absolute; left:13%; width:41%; top:0; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 70%); }
.pe-door{ position:absolute; left:13%; width:41%; top:9%; bottom:11%; }
.pe-door::before{ content:""; position:absolute; inset:-12px -12px 0; border:12px solid rgba(30,26,20,.09); border-bottom:0; }
.pe-int{ position:absolute; inset:0; background:linear-gradient(180deg,#17191d 0%,#2c2f33 42%,#43464a 80%,#4e5155 100%); }
.pe-glass{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(104deg, rgba(215,222,224,.14) 0%, rgba(122,134,138,.1) 38%, rgba(226,230,231,.17) 60%, rgba(96,106,110,.12) 100%); box-shadow:inset 0 0 36px rgba(0,0,0,.2); }
.pe-glass::after{ content:""; position:absolute; top:0; bottom:0; left:64%; right:0; background:rgba(14,18,22,.3); }
.pe-streak{ position:absolute; top:-12%; bottom:-12%; width:34%; transform:skewX(-16deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); }
.pe-sa{ left:6%; }
.pe-sb{ left:52%; width:22%; opacity:.7; animation:pe-drift 26s ease-in-out infinite alternate; }
@keyframes pe-drift{ to{ transform:skewX(-16deg) translateX(46%); } }
.pe-sheen{ position:absolute; inset:0; background:radial-gradient(90% 60% at 22% 0%, rgba(255,255,255,.13), transparent 58%); }
.pe-fig{ position:absolute; bottom:4%; width:7%; background:#eae5da; opacity:.24; filter:blur(3px); border-radius:40% 40% 8% 8% / 14% 14% 4% 4%; }
.pe-fig::before{ content:""; position:absolute; top:-11%; left:50%; transform:translateX(-50%); width:58%; aspect-ratio:1; border-radius:50%; background:inherit; }
.pe-f1{ left:22%; height:34%; }
.pe-f2{ left:33%; height:29%; opacity:.14; }
.pe-f3{ height:36%; opacity:0; transform:skewX(-4deg); animation:pe-walk 34s linear 6s infinite; }
@keyframes pe-walk{ 0%{ left:-14%; opacity:0; } 6%{ opacity:.22; } 30%{ opacity:.22; } 38%{ left:108%; opacity:0; } 100%{ left:108%; opacity:0; } }
.pe-frame{ position:absolute; inset:0; border:3px solid #1d1f22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.pe-frame::before{ content:""; position:absolute; top:0; bottom:0; left:64%; width:3px; background:#1d1f22; }
.pe-frame::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5.5%; background:#1d1f22; }
.pe-handle{ position:absolute; left:56%; top:38%; height:24%; width:3px; background:#17191c; box-shadow:1px 0 0 rgba(255,255,255,.16); }
.pe-handle::before{ content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:var(--terracotta); }
.pe-shadow{ position:absolute; left:-6%; right:-6%; bottom:-7%; height:7%; background:radial-gradient(50% 100% at 50% 0%, rgba(20,16,12,.2), transparent 70%); }
@media (prefers-reduced-motion:reduce){ .pe-sb{ animation:none; } .pe-f3{ display:none; } }
@media (min-width:880px){ .hero{ padding-right:calc(min(38vw,540px) + clamp(30px,3vw,64px)); } }

/* ---------- FABRIC — the four principles (navy) ---------- */
.fabric{ color:var(--bone); background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--bone) 3%, transparent) 0 1px, transparent 1px 92px), radial-gradient(130% 90% at 76% -8%, color-mix(in srgb, var(--phi-navy-600) 42%, transparent) 0%, transparent 54%), linear-gradient(180deg, color-mix(in srgb, var(--phi-navy-700) 55%, var(--fabric-bg)) 0%, color-mix(in srgb, var(--fabric-bg) 93%, var(--phi-petrol)) 46%, var(--phi-navy-ink) 100%); }
.fabric .tag{ color:var(--bone); }
.fabric-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,5vw,64px); }
.fabric-head .h{ font-size:clamp(40px,6vw,92px); }
.principle{ display:grid; grid-template-columns:clamp(58px,7vw,116px) 1fr; gap:clamp(18px,3.4vw,56px); padding:clamp(28px,4vw,54px) 0; border-top:1px solid color-mix(in srgb, var(--bone) 18%, transparent); align-items:start; }
.principle:last-child{ border-bottom:1px solid color-mix(in srgb, var(--bone) 18%, transparent); }
.pnum{ font-family:var(--font-mono); font-size:clamp(15px,1.4vw,19px); letter-spacing:.1em; opacity:.5; padding-top:.4em; }
.pverb{ font-size:clamp(32px,4.8vw,72px); }
.pessence{ margin:0; max-height:0; opacity:0; overflow:hidden; font-size:clamp(16px,1.3vw,19px); line-height:1.5; max-width:60ch; transition:max-height .5s var(--ease-out), opacity .42s var(--ease-out), padding-top .5s var(--ease-out); }
.principle{ cursor:default; }
.pverb{ transition:transform .45s var(--ease-out); }
.principle:hover .pessence, .principle:focus-within .pessence{ max-height:13em; opacity:.82; padding-top:clamp(14px,1.7vw,24px); }
.principle:hover .pverb, .principle:focus-within .pverb{ transform:translateX(clamp(6px,1vw,16px)); }
.principle:hover .pnum, .principle:focus-within .pnum{ opacity:.85; }
.principle:focus-visible{ outline:none; }
@media (hover:none){ .pessence{ max-height:none; opacity:.78; padding-top:clamp(14px,1.6vw,22px); } }

/* ---------- FABRIC — the disciplines referenced inside each principle (revealed with the essence) ---------- */
.pdisc{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:clamp(13px,1.6vw,20px); font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; opacity:.58; }
.pdisc .phi-dash{ opacity:.7; }
.pessence .pproof{ display:block; margin-top:14px; font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; opacity:.6; }

/* ---------- CAPITAL NOTE — the coda on the petrol ground, given room to breathe ---------- */
.capital{ position:relative; isolation:isolate; overflow:hidden; background:color-mix(in srgb, var(--petrol) 78%, var(--bone)); color:var(--ink); padding-top:clamp(110px,13vw,190px); padding-bottom:clamp(110px,13vw,190px); }
/* the escalator shadow from the gate returns as an imprint on the petrol — multiply so only the shadows print, masked away from the type */
.capital-shadow{ position:absolute; top:0; bottom:0; left:0; width:min(60%,980px); pointer-events:none; }
.capital-video{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 55%; transform:scale(1.06); filter:grayscale(1) contrast(1.12) brightness(1.04) blur(6px); mix-blend-mode:multiply; opacity:.26; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%), linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%), linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; }
.capital-in{ z-index:1; padding-top:clamp(30px,4vw,56px); position:relative; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
@media (max-width:760px){ .capital-in{ align-items:flex-start; text-align:left; } .capital-shadow{ width:100%; } .capital-video{ opacity:.14; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%); } }
.capital .h{ font-size:clamp(40px,6vw,96px); margin-top:clamp(20px,2.6vw,40px); }
.capital .lead{ max-width:60ch; margin-top:clamp(24px,3vw,44px); }
.capital .lead + .lead{ margin-top:clamp(14px,1.6vw,22px); }
.capital .invite-line{ margin-top:clamp(40px,5vw,76px); }
.capital a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition:border-color .25s var(--ease-out); }
.capital a:hover{ border-bottom-color:var(--accent); }

/* ---------- CLOSE (terracotta) — with the faded, enlarging banner ---------- */
.close{ background:var(--close-bg); color:var(--ink); }
.banner{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.banner-img{ position:absolute; inset:-5%; --ps:1; --pr:0deg; --py:0px; transform:translateY(var(--py)) scale(var(--ps)); transform-origin:60% 40%; }
.banner-img image-slot{ width:100%; height:100%; filter:var(--img-filter); }
.banner-img image-slot:not([data-filled]){ visibility:hidden; } /* empty slot never shows its placeholder on the live site */
.banner::after{ content:""; position:absolute; inset:0; background:var(--close-bg); opacity:.6; }
.close > *{ position:relative; z-index:2; }
.close > .banner{ z-index:0; }
.close .h{ font-size:clamp(56px,11vw,170px); max-width:11ch; margin-top:clamp(16px,1.8vw,26px); }
.tag .tm{ font-size:.66em; line-height:0; vertical-align:super; margin-left:1px; letter-spacing:0; color:inherit; }
.close .close-cta{ margin-top:clamp(28px,3.4vw,52px); }
.close .close-cta a{ color:inherit; text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; transition:opacity .25s var(--ease-out); }
.close .close-cta a:hover{ opacity:.72; }
.close-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; border-top:1px solid color-mix(in srgb, var(--ink) 24%, transparent); margin-top:clamp(48px,7vw,96px); padding-top:clamp(22px,3vw,40px); }
.close-logo{ height:clamp(54px,7vw,88px); width:auto; }
.contact{ font-family:var(--font-mono); font-size:13px; line-height:1.7; opacity:.7; text-align:right; }
.alphabet{ display:flex; align-items:center; gap:16px; margin-top:clamp(28px,4vw,56px); }
.alphabet .bar{ width:34px; height:var(--rule); background:currentColor; opacity:.6; }
.alphabet .vbar{ width:var(--rule); height:26px; background:currentColor; opacity:.6; }

/* ---------- THE BENCH (petrol · collaborators) ----------
   Breathes the fabric: the same dash-led, hairline-list vocabulary as
   the four principles, inverted into an invitation. Petrol is the timbre
   displaced from the hero — so the flow now rotates bone → navy → petrol
   → terracotta instead of three saturated grounds back-to-back. */
.bench{ background:var(--petrol); color:var(--ink); }
.bench-ring{ color:var(--ink); width:min(26vw,300px); aspect-ratio:1; top:clamp(90px,12vh,160px); right:calc(var(--mx) - min(6vw,60px)); opacity:.16; }
.bench-head{ position:relative; z-index:2; }
.bench-head .h{ font-size:clamp(40px,6.4vw,96px); max-width:14ch; margin-top:clamp(14px,1.6vw,22px); }
.bench-head .lead{ max-width:52ch; margin-top:clamp(22px,2.6vw,36px); }
.crit{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,52px); margin-top:clamp(48px,7vw,96px); }
.crit-i{ border-top:1px solid color-mix(in srgb, var(--ink) 26%, transparent); padding-top:clamp(16px,1.8vw,24px); }
.crit-i .phi-dash{ opacity:.7; }
.crit-h{ font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; line-height:1.04; font-size:clamp(21px,2vw,30px); margin:clamp(12px,1.4vw,18px) 0 0; }
.crit-h em{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:430; }
.crit-p{ margin-top:10px; font-size:clamp(14px,1.1vw,16px); line-height:1.5; opacity:.78; }
.bench-invite{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,64px); flex-wrap:wrap; margin-top:clamp(44px,6vw,84px); border-top:1px solid color-mix(in srgb, var(--ink) 26%, transparent); padding-top:clamp(22px,3vw,40px); }
.invite-line{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(22px,2.6vw,38px); letter-spacing:-.01em; line-height:1.15; max-width:20ch; margin:0; }
.invite-lead{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(12px,1.4vw,18px); }
.invite-cta{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:clamp(13px,1.2vw,16px); letter-spacing:.02em; color:var(--ink); text-decoration:none; white-space:nowrap; padding-bottom:4px; border-bottom:1px solid color-mix(in srgb, var(--ink) 40%, transparent); transition:border-color .3s; }
.invite-cta:hover{ border-color:var(--ink); }
.cta-mk{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }

/* ---------- CLOSE · contact + connect points ---------- */
.contact{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-family:var(--font-mono); font-size:13px; line-height:1.5; text-align:right; }
.contact a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:color-mix(in srgb, var(--ink) 32%, transparent); opacity:.82; transition:opacity .25s, text-decoration-color .25s; }
.contact a:hover{ opacity:1; text-decoration-color:var(--ink); }
.contact .contact-deal{ font-size:clamp(15px,1.4vw,19px); opacity:1; letter-spacing:.01em; }
.contact .contact-place{ opacity:.6; }
.connect{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); flex-wrap:wrap; margin-top:clamp(26px,3.4vw,46px); }
.connect-lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.connect-row{ display:flex; align-items:center; gap:clamp(14px,1.8vw,28px); flex-wrap:wrap; }
.connect-i{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--ink); text-decoration:none; opacity:.82; transition:opacity .25s; }
.connect-i:hover{ opacity:1; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:color-mix(in srgb, var(--ink) 45%, transparent); }
.connect-i .mk{ width:8px; height:8px; }

/* ============================================================
   LAST-LAYER REFINEMENT — Fabric (navy) & Close (terracotta)
   Tonal blocking stays within each family (canon: no gradients);
   colour, accent and logo-mark detail are tweakable via data-*
   on <html>, set by art2026/tweaks.js. Defaults also live on the
   tag so the refined state paints on the first frame (no flash).
   ============================================================ */
:root{
  --navy-base:  var(--ink);
  --navy-deep:  var(--phi-navy-ink);
  --terra-asis: var(--phi-terracotta);
  --terra-muted:#9E5B46;
  --terra-deep: #93503B;
  --fabric-bg:  var(--navy-base);
  --close-bg:   var(--terra-muted);
  --teal-deep:  #1E4340;
  --fabric-band:color-mix(in srgb, var(--fabric-bg) 65%, var(--phi-navy-700) 35%);
  --close-band: color-mix(in srgb, var(--close-bg) 78%, var(--phi-navy-ink) 22%);
}
html[data-navy="deeper"]{ --fabric-bg: var(--navy-deep); }
html[data-terra="asis"]{ --close-bg: var(--terra-asis); }
html[data-terra="deep"]{ --close-bg: var(--terra-deep); }
html[data-accent="ochre"]{ --accent: var(--ochre); }
html[data-hero="petrol"]{ --hero-bg: var(--petrol); }
/* ---- Mazarine experiment (data-maz) · manifest typography over cinema-grade full bleed ---- */
.h-manifest{ display:none; }
html:is([data-maz="type"],[data-maz="hybrid"],[data-maz="cinema"]) .hero > .h:not(.h-manifest){ display:none; }
html:is([data-maz="type"],[data-maz="hybrid"],[data-maz="cinema"]) .h-manifest{ display:block; font-weight:380; font-size:clamp(36px,5.6vw,98px); line-height:1.04; letter-spacing:-.03em; max-width:19ch; }
html:is([data-maz="type"],[data-maz="hybrid"],[data-maz="cinema"]) .h-manifest b{ font-weight:620; letter-spacing:-.028em; }
html:is([data-maz="type"],[data-maz="hybrid"],[data-maz="cinema"]) .h-manifest em{ font-weight:420; }
html:is([data-maz="type"],[data-maz="hybrid"],[data-maz="cinema"]) .hero .lead{ max-width:38ch; }
@media (min-width:881px){
  html:is([data-maz="hybrid"],[data-maz="cinema"]) .hero-img{ left:0; width:auto; }
  /* hybrid: the water breathes through bone — a watermark, not a picture */
  html[data-maz="hybrid"] .hero-img .veil{ background:linear-gradient(90deg, color-mix(in srgb, var(--hero-bg) 94%, transparent) 0%, color-mix(in srgb, var(--hero-bg) 82%, transparent) 42%, color-mix(in srgb, var(--hero-bg) 46%, transparent) 72%, color-mix(in srgb, var(--hero-bg) 22%, transparent) 100%); }
  /* cinema: full-bleed dark frame, bone type on top */
  html[data-maz="cinema"] .hero{ color:var(--bone); }
  html[data-maz="cinema"] .hero-img .veil{ background:linear-gradient(100deg, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 58%, transparent) 55%, color-mix(in srgb, var(--ink) 74%, transparent) 100%); }
  html[data-maz="cinema"] .hero-plate .hero-video{ filter:grayscale(1) contrast(1.08) brightness(.92); }
  html[data-maz="cinema"] .hero .lead{ opacity:.9; }
}
/* the close period would vanish on terracotta — lift it to ochre */
html[data-accent="terracotta"] .close .stop{ color: var(--ochre); }

/* ---- IMAGERY tweak: B&W / warm / cool treatment on the plates ---- */
html[data-img="warm"]{ --img-filter: grayscale(1) contrast(1.04) brightness(.96) sepia(.18) saturate(.65); }
html[data-img="bw"]{ --img-filter: grayscale(1) contrast(1.06) brightness(.985); }
html[data-img="cool"]{ --img-filter: grayscale(1) contrast(1.05) brightness(.9) sepia(.55) hue-rotate(150deg) saturate(.8); }
/* sea (default): the footage keeps a fifth of its own colour, muted; a petrol colour-blend pulls the water into the brand's own teal-green while foam, light and skin keep their warmth. Tint only lands once the clip has a src — the lazy loader sets it — so nothing washes the bone before the video paints. */
html[data-img="sea"]{ --img-filter: grayscale(.2) saturate(.8) contrast(1.05) brightness(.96); }
html[data-img="sea"] .hero-plate:has(.hero-video[src])::after, html[data-img="sea"] .band-media:has(.band-video[src])::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--petrol); mix-blend-mode:color; opacity:var(--sea-tint); }
html[data-img="sea"] .hero-plate, html[data-img="sea"] .band-media{ isolation:isolate; }

/* ---- TYPE tweak: the classy clash (serif italic) ↔ all-grotesk ---- */
html[data-type="grotesk"] .h em,
html[data-type="grotesk"] .crit-h em,
html[data-type="grotesk"] .menu-list a em{ font-family:var(--font-display); font-weight:500; }
html[data-type="grotesk"] .gate-line,
html[data-type="grotesk"] .invite-line,
html[data-type="grotesk"] .serif{ font-family:var(--font-display); font-style:normal; font-weight:480; letter-spacing:-.02em; }

/* ---- tonal blocking: a deeper, full-bleed band per section ---- */
html[data-tonal="on"] .principles{
  background:var(--fabric-band);
  margin-inline:calc(var(--mx) * -1);
  padding:clamp(6px,1.4vw,20px) var(--mx) clamp(10px,1.8vw,26px);
}
html[data-tonal="on"] .plinth{
  background:var(--close-band);
  margin:clamp(40px,6vw,82px) calc(var(--mx) * -1) 0;
  padding:clamp(30px,4vw,54px) var(--mx) clamp(30px,4vw,50px);
}
html[data-tonal="on"] .plinth .close-foot{ border-top:0; margin-top:0; padding-top:0; }
html[data-tonal="on"] .plinth .alphabet{ margin-top:clamp(24px,3.2vw,44px); }

/* ---- logo-mark detail ---- */
html[data-marks="on"] .pnum::after{ content:""; display:block; width:1.5px; height:clamp(16px,2vw,26px); margin-top:12px; background:var(--accent); opacity:.85; }
html[data-marks="on"] .alphabet .mk-dot{ background:var(--accent); }

/* ---- Discipline: bauhaus toggles — the structure shows itself, the accent is rationed, everything moves to one clock ---- */
.ghostgrid{ position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; transition:opacity 1.4s var(--ease-out); }
.ghostgrid i{ position:absolute; top:0; bottom:0; width:1px; background:#8a857c; opacity:.06; }
.ghostgrid i:nth-child(1){ left:var(--mx); }
.ghostgrid i:nth-child(2){ left:calc(var(--mx) + clamp(44px,9vw,132px)); bottom:44%; opacity:.045; }
.ghostgrid i:nth-child(3){ display:none; }
.ghostgrid i:nth-child(4){ right:var(--mx); top:28%; opacity:.045; }
html[data-grid="off"] .ghostgrid, html:not(.js) .ghostgrid{ display:none; }
body.entered.is-scrolling .ghostgrid{ opacity:1; }
.tag{ position:relative; }
html[data-rules="on"] .sec .tag::before{ content:""; position:absolute; right:calc(100% + 18px); top:calc(50% - .5px); width:calc(var(--mx) - 30px); height:1px; background:currentColor; opacity:.32; }
html[data-axis="offset"] .sec .lead, html[data-axis="offset"] .hero .proof{ margin-left:clamp(44px,9vw,132px); }
@media (max-width:760px){ html[data-axis="offset"] .sec .lead, html[data-axis="offset"] .hero .proof{ margin-left:0; } }
html[data-motion="one"]{ --g-dur:.55s; }
html.js[data-motion="one"] .reveal.in{ animation-duration:var(--g-dur); animation-timing-function:var(--ease-out); }
html[data-motion="one"] body.menu-open .menu{ animation-duration:var(--g-dur); }
html[data-motion="one"] .pessence, html[data-motion="one"] .pverb, html[data-motion="one"] .enter-shape, html[data-motion="one"] .toggle i, html[data-motion="one"] .menu-list a .mk, html[data-motion="one"] .dnum, html[data-motion="one"] .capital a, html[data-motion="one"] .spine, html[data-motion="one"] .spine-node, html[data-motion="one"] .topfade{ transition-duration:var(--g-dur); transition-timing-function:var(--ease-out); }
html[data-motion="one"] .toggle i{ transition:left .68s cubic-bezier(.19,1,.22,1); }
html[data-motion="one"] .toggle button{ transition:opacity .55s ease, letter-spacing .68s cubic-bezier(.19,1,.22,1); }
html[data-budget="one"] .cur-beam{ background:var(--ink); }
html[data-budget="one"] .tape-mk{ background:color-mix(in srgb, var(--bone) 45%, transparent); }
html[data-budget="one"] .cta-mk{ background:var(--ink); }
html[data-budget="one"] .toggle i{ background:currentColor; }
html[data-budget="one"] .menu-list a:hover .mk{ background:var(--bone); border-color:var(--bone); }
html[data-budget="one"] .deal:hover .dnum{ color:inherit; }
html[data-budget="one"] .capital a{ color:inherit; border-bottom:1.5px solid currentColor; padding-bottom:2px; }
html[data-budget="one"] .capital a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
html[data-budget="one"][data-marks="on"] .pnum::after{ background:color-mix(in srgb, currentColor 40%, transparent); }
html[data-budget="one"][data-marks="on"] .alphabet .mk-dot{ background:currentColor; }

/* ---- Tweaks panel ---- */
.twk{ position:fixed; right:18px; bottom:18px; z-index:2147483646; width:250px; max-height:calc(100vh - 36px); display:none; flex-direction:column; cursor:auto; background:color-mix(in srgb, var(--bone) 80%, transparent); color:var(--ink); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius:14px; box-shadow:0 18px 54px rgba(1,20,28,.30); overflow:hidden; }
.twk *{ cursor:auto; }
.twk-hd{ display:flex; align-items:center; justify-content:space-between; padding:13px 12px 11px 16px; border-bottom:1px solid color-mix(in srgb,var(--ink) 9%, transparent); }
.twk-hd b{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; }
.twk-x{ appearance:none; border:0; background:none; color:inherit; opacity:.45; font-size:12px; line-height:1; cursor:pointer; padding:5px; }
.twk-x:hover{ opacity:1; }
.twk-body{ padding:6px 16px 16px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; min-height:0; }
.twk-sect{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; padding-top:7px; }
.twk-row{ display:flex; flex-direction:column; gap:7px; }
.twk-rl{ font-size:12.5px; font-weight:500; opacity:.82; }
.twk-seg{ display:flex; border:1px solid color-mix(in srgb,var(--ink) 14%, transparent); border-radius:8px; overflow:hidden; }
.twk-seg button{ flex:1; appearance:none; border:0; border-right:1px solid color-mix(in srgb,var(--ink) 10%, transparent); background:none; color:inherit; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; padding:7px 3px; cursor:pointer; transition:background .15s, color .15s; }
.twk-seg button:last-child{ border-right:0; }
.twk-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--bone); }
.twk-tg{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.twk-sw{ position:relative; width:34px; height:19px; flex:none; border:0; border-radius:999px; background:color-mix(in srgb,var(--ink) 22%, transparent); cursor:pointer; padding:0; transition:background .2s; }
.twk-sw[data-on="1"]{ background:var(--accent); }
.twk-sw i{ position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--bone); transition:transform .2s; }
.twk-sw[data-on="1"] i{ transform:translateX(15px); }
.twk-rt{ display:flex; align-items:center; justify-content:space-between; }
.twk-val{ font-family:var(--font-mono); font-size:11px; opacity:.6; }
.twk-range{ -webkit-appearance:none; appearance:none; width:100%; height:2px; margin:2px 0; background:color-mix(in srgb,var(--ink) 22%, transparent); border-radius:2px; outline:none; }
.twk-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; }
.twk-range::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:var(--accent); cursor:pointer; }

/* ---------- reveals ---------- */
/* content is always visible; the fade-up only plays in real browsers
   when it scrolls in — never a sticky hidden state (the editor freezes
   opacity unreliably, so we never depend on it to reveal content). */
html.js .reveal.in{ animation:revealup .8s var(--ease-out) both; }
@keyframes revealup{ from{ transform:translateY(18px); } to{ transform:none; } }

/* ---------- THE WORK — deals we carry (bone ledger) ---------- */
.work{ background:var(--bone); color:var(--ink); padding-bottom:0; }
.work-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,52px); }
.work-head .h{ font-size:clamp(40px,6vw,92px); }
.work-head .lead{ max-width:30ch; }
.deal{ display:grid; grid-template-columns:clamp(58px,7vw,116px) minmax(0,1.05fr) minmax(0,1fr); gap:clamp(18px,3.4vw,56px); align-items:baseline; padding:clamp(22px,3vw,42px) 0; border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.deal:last-of-type{ border-bottom:1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.dnum{ font-family:var(--font-mono); font-size:clamp(15px,1.4vw,19px); letter-spacing:.1em; opacity:.45; transition:color .3s var(--ease-out), opacity .3s; }
.deal:hover .dnum{ opacity:1; color:var(--accent); }
.deal-h{ font-family:var(--font-display); font-weight:600; letter-spacing:-.035em; line-height:1.02; font-size:clamp(26px,3.4vw,52px); margin:0; }
.deal-h em{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:430; letter-spacing:-.005em; }
.deal-p{ margin:0; font-size:clamp(15px,1.2vw,18px); line-height:1.55; opacity:.78; max-width:44ch; }
.work-lead{ max-width:58ch; margin:0 0 clamp(26px,4vw,52px); }
.deal-forms{ display:block; font-family:var(--font-mono); font-size:clamp(11px,.95vw,13px); letter-spacing:.15em; text-transform:uppercase; opacity:.5; margin-top:12px; }
.work-threads{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); flex-wrap:wrap; margin-top:clamp(30px,4.4vw,60px); }
.work-team{ margin-top:clamp(30px,4.4vw,60px); }
.team-line{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(18px,1.5vw,22px); letter-spacing:-.01em; line-height:1.2; margin:0; text-align:left; text-wrap:pretty; }
.work-team .work-threads{ margin-top:10px; justify-content:flex-start; flex-wrap:wrap; gap:6px 18px; }
.work-team .thread{ font-size:11px; letter-spacing:.14em; gap:8px; opacity:.55; }
.work-team .thread .phi-dash{ width:12px; }
@media (max-width:880px){ .work-team .work-threads{ display:grid; grid-template-columns:repeat(2,max-content); justify-content:start; gap:6px 22px; } }
.threads-lab{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(18px,1.8vw,26px); letter-spacing:-.01em; margin-right:clamp(4px,1vw,14px); }
.thread{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:clamp(12px,1.05vw,15px); letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
@media (max-width:760px){ .deal{ grid-template-columns:clamp(40px,10vw,58px) 1fr; } .deal-p{ grid-column:2; } }
.tape-head{ margin-top:clamp(34px,5vw,64px); }
.work-tape{ position:relative; z-index:2; margin:clamp(14px,1.8vw,24px) calc(-1 * var(--mx)) 0; background:var(--ink); color:var(--bone); overflow:hidden; padding:clamp(13px,1.5vw,19px) 0; }
.tape-track{ display:flex; width:max-content; animation:tape-scroll 46s linear infinite; }
.work-tape:hover .tape-track{ animation-play-state:paused; }
.tape-group{ display:flex; }
.tape-i{ display:inline-flex; align-items:center; gap:13px; padding:0 clamp(17px,2.2vw,32px); font-family:var(--font-mono); font-size:clamp(11px,.95vw,13px); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.tape-mk{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.tape-sec{ opacity:.55; }
@keyframes tape-scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tape-track{ animation:none; } }

/* ============================================================
   STATEMENT BAND — full-bleed media + the two media devices.
   Background mode: media full-bleed under a navy scrim, solid
   bone type over. Through-text mode: a black knockout overlay
   whose only transparent shapes are the letters — mix-blend
   multiply reveals the media (photo OR muted video) inside the
   type, black everywhere else. Media defaults to a striped,
   labelled placeholder; set .band-img / .band-video [src] to
   fill. Treatment follows the Imagery tweak (--img-filter).
   ============================================================ */
.statement{ position:relative; isolation:isolate; min-height:min(88vh,780px); min-height:min(88svh,780px); overflow:hidden; background:#05161d; color:var(--bone); }
.band-media{ position:absolute; inset:0; z-index:0; }
.band-place{ position:absolute; inset:0; background:#07202b; }
.band-place::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--bone) 6%, transparent) 0 1px, transparent 1px 16px); }
.band-place::after{ content:""; position:absolute; top:clamp(22px,3.4vh,44px); left:var(--mx); max-width:40ch; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--bone) 38%, transparent); }
.band-img, .band-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; filter:var(--img-filter); }
.band-img:not([src]), .band-video:not([src]):not([data-src]){ display:none; }
.band-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; display:none; background:color-mix(in srgb, #05161d 42%, transparent); }
.band-knock{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:clamp(72px,11vh,140px) var(--mx); pointer-events:none; }
.band-h{ font-size:clamp(58px,13.5vw,220px); line-height:.84; letter-spacing:-.05em; margin:0; text-align:center; }
.band-foot{ position:absolute; left:0; right:0; bottom:clamp(26px,4vh,50px); z-index:4; display:flex; justify-content:center; padding:0 var(--mx); }
.band-sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); opacity:.7; display:inline-flex; align-items:center; gap:12px; text-align:center; }
/* Background mode (default): scrim on, type solid bone. */
html[data-statement="bg"] .band-scrim{ display:block; }
html[data-statement="bg"] .band-h{ color:var(--bone); }
/* Through-text mode: black multiply knockout reveals media inside the letters. */
html[data-statement="text"] .statement{ background:#04050a; }
html[data-statement="text"] .band-knock{ background:#000; mix-blend-mode:multiply; }
html[data-statement="text"] .band-h{ color:#fff; }
html[data-statement="text"] .band-h .stop{ color:#fff; }
/* Off: hide the whole band. */
html[data-statement="off"] .statement{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .threads-lab{ flex-basis:100%; margin-right:0; }
}
@media (max-width:880px){
  .hero .h{ max-width:none; }
  /* mobile: the clip is the ground of the whole front page — one composition, the gate's principle: full-bleed layer, bone veil over it, the manifest on top. Veil thins toward the foot so the water breathes under the proof. */
  .hero-img{ position:absolute; inset:0; width:auto; height:auto; margin:0; }
  .hero-img .veil{ background:linear-gradient(180deg, color-mix(in srgb, var(--hero-bg) 93%, transparent) 0%, color-mix(in srgb, var(--hero-bg) 89%, transparent) 50%, color-mix(in srgb, var(--hero-bg) 78%, transparent) 100%); }
  .scrollcue{ display:none; }
  .principle{ grid-template-columns:1fr; gap:10px; }
  .pnum{ padding-top:0; }
  .crit{ grid-template-columns:1fr; gap:clamp(16px,5vw,28px); }
  .bench-invite{ flex-direction:column; align-items:flex-start; }
  .contact{ align-items:flex-start; text-align:left; }
  .close-foot{ flex-direction:column; align-items:flex-start; }
  .close .toggle{ align-self:flex-start; }
}
@media (max-width:760px){
  .spine-node{ display:none; }
  .deal{ align-items:start; }
  .statement{ min-height:min(78vh,640px); }
}
/* touch ergonomics — hit targets ≥44px without moving the layout */
@media (pointer:coarse){
  .menu-btn{ padding:14px 0 14px 14px; margin:-14px 0; }
  .menu-close{ padding:14px; margin:-14px; }
  .enter{ padding:14px 18px; }
  .toggle button{ padding:12px 6px; }
  .legalline a, .connect-i, .invite-cta{ padding-top:8px; padding-bottom:8px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gate.leaving{ animation:none; }
  body.menu-open .menu{ animation:none; }
  .menu-list li{ opacity:1; transform:none; transition:none; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .pessence{ max-height:none; opacity:.78; padding-top:clamp(14px,1.6vw,22px); transition:none; }
  .pverb{ transition:none; }
  .plate, .banner-img, .hero-plate{ --ps:1; --pr:0deg; --py:0px; }
}