/* Witsteen Studios website (7 Oct 2026). One stylesheet.
   Palette: ink #0d0f10, charcoal #141617, limestone #e7e2d8, oxblood #4b171d / #7a2a35, rose #c27c86,
   aged bronze #8f816a (the HaF brand tokens, so studio and game read as one family).
   Type: Cormorant Garamond (statements, matches the wordmark), Cinzel (labels, carved capitals),
   Literata (text). All SIL OFL, self-hosted. No third-party requests. */

@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Literata";src:url("../fonts/literata.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("../fonts/literata-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --ink:#0d0f10;--charcoal:#141617;--charcoal-2:#1a1d1f;--charcoal-3:#22262a;
  --line:rgba(231,226,216,.12);--line-strong:rgba(231,226,216,.26);
  --oxblood:#4b171d;--oxblood-2:#62202a;--oxblood-3:#7a2a35;--rose:#c27c86;--rose-dim:#a45c65;
  --bone:#e7e2d8;--bone-2:#ddd7ca;--ivory-2:#cfc9be;--body:#bdb6aa;--muted:#9b958b;
  --bronze:#8f816a;--bronze-light:#b8a98c;--bronze-deep:#6b5f48;
  --stone-ink:#141617;--stone-ink-2:#2c2f31;--stone-muted:#5a564e;--stone-line:rgba(20,22,23,.16);
  --display:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --label:"Cinzel","Trajan Pro",Georgia,serif;
  --text:"Literata",Georgia,"Times New Roman",serif;
  --wrap:1360px;--gutter:clamp(20px,4vw,56px);--section:clamp(88px,12vw,168px);
  --radius:2px;--ease:cubic-bezier(.2,.7,.2,1);--nav-h:72px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);background:var(--ink)}
body{margin:0;background:var(--charcoal);color:var(--body);font:400 1.0625rem/1.7 var(--text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,picture,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--oxblood-3);color:var(--bone)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.on-bone :focus-visible{outline-color:var(--stone-ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:16px;top:-80px;z-index:300;padding:12px 18px;background:var(--bone);color:var(--ink);font:600 .9rem var(--label);text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Shared type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;margin:0 0 20px;font:600 .78rem/1.2 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-light)}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7}
.on-bone .eyebrow{color:var(--bronze-deep)}
.num-inline{font:italic 500 1.05rem/1 var(--display);letter-spacing:.04em;text-transform:none}
.h2{font:500 clamp(2.5rem,5.6vw,5rem)/1.02 var(--display);letter-spacing:-.012em;color:var(--bone);text-wrap:balance}
.on-bone .h2{color:var(--stone-ink)}
.lede{max-width:52ch;font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:var(--ivory-2)}
.on-bone .lede{color:var(--stone-ink-2)}
.section-head{display:grid;gap:12px;margin-bottom:clamp(40px,5.5vw,76px)}
.section-head--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:clamp(24px,5vw,88px)}
.section-head--split .lede{justify-self:end}

/* ---------- Buttons ---------- */
.btn{--h:56px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--h);padding:0 28px;border:1px solid transparent;border-radius:var(--radius);font:600 .9375rem/1 var(--label);letter-spacing:.1em;text-decoration:none;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:19px;height:19px;flex:none}
.btn--primary{background:linear-gradient(180deg,#6a2029,#4b171d);border-color:#8a3743;color:var(--bone);box-shadow:0 10px 30px -12px rgba(122,42,53,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.btn--primary:hover{background:linear-gradient(180deg,#7d2833,#581b22);border-color:#b2505e;transform:translateY(-1px);box-shadow:0 16px 40px -14px rgba(160,52,66,.95),inset 0 1px 0 rgba(255,255,255,.12)}
.btn--ghost{background:rgba(13,15,16,.35);border-color:var(--line-strong);color:var(--bone)}
.btn--ghost:hover{border-color:rgba(231,226,216,.6);background:rgba(231,226,216,.06)}
.btn--sm{--h:44px;padding:0 18px;font-size:.78rem}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:28px;font:600 .8125rem/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line-strong);padding:6px 0 7px;transition:border-color .2s}
.text-link svg{width:14px;height:14px}
.text-link:hover{border-color:var(--bone)}

/* ---------- Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0) * 110ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .plate[data-reveal]{transform:none}
.js .plate[data-reveal] picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease);transition-delay:calc(var(--d,0) * 140ms)}
.js .plate[data-reveal].is-in picture{clip-path:inset(0 0 0 0)}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);border-bottom:1px solid transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,16,.8),rgba(13,15,16,0));pointer-events:none;transition:opacity .35s}
.nav.is-solid{--nav-h:64px;background:rgba(13,15,16,.88);border-color:var(--line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.nav.is-solid::before{opacity:0}
.nav__inner{position:relative;display:flex;align-items:center;gap:28px;height:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.nav__brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--bone)}
.nav__brand img{width:42px;height:auto}
.nav__brand span{font:600 .9375rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s var(--ease)}
.nav.is-solid .nav__brand span{opacity:1;transform:none}
.nav__links{margin:0 auto}
.nav__links ul{display:flex;gap:clamp(18px,2.4vw,40px)}
.nav__links a{position:relative;display:inline-block;padding:10px 0;font:600 .78rem/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-2);text-decoration:none;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--bone)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:none}
.nav__cta{margin-left:auto}
.nav__menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:4px;border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(13,15,16,.4);cursor:pointer}
.nav__menu-btn svg,.menu__close svg{width:20px;height:20px}
.menu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;padding:20px var(--gutter) 32px;background:rgba(13,15,16,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto}
.menu[hidden]{display:none}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.menu__top img{width:42px}
.menu__close{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.menu ul{display:grid;margin:32px 0;border-top:1px solid var(--line)}
.menu li a{display:flex;align-items:center;justify-content:space-between;min-height:62px;border-bottom:1px solid var(--line);font:500 1.9rem/1 var(--display);letter-spacing:.01em;color:var(--bone);text-decoration:none}
.menu__stores{display:grid;gap:12px;margin-top:auto}
.menu__stores .btn{width:100%}

/* nav turns light over the limestone sections (site.js sets data-theme) */
.nav[data-theme="light"].is-solid{background:rgba(231,226,216,.92);border-color:var(--stone-line)}
.nav[data-theme="light"] .nav__brand{color:var(--stone-ink)}
.nav[data-theme="light"] .nav__brand img{filter:invert(1) brightness(.12)}
.nav[data-theme="light"] .nav__links a{color:var(--stone-ink-2)}
.nav[data-theme="light"] .nav__links a:hover,.nav[data-theme="light"] .nav__links a[aria-current]{color:var(--stone-ink)}
.nav[data-theme="light"] .nav__links a::after{background:var(--oxblood-3)}
.nav[data-theme="light"] .nav__menu-btn{border-color:var(--stone-line);background:rgba(231,226,216,.5);color:var(--stone-ink)}

/* ---------- Hero: carved limestone ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:max(640px,100svh);overflow:clip;background:var(--ink)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(13,15,16,.72) 0,rgba(13,15,16,0) 15%),linear-gradient(0deg,rgba(13,15,16,.96) 0,rgba(13,15,16,.80) 18%,rgba(13,15,16,.28) 38%,rgba(13,15,16,0) 56%)}
.hero__stage{position:absolute;inset:0;z-index:-2;container-type:size;--hall-clear:236px;--hall-ty:.725;--hall-ar:.625}
.hero__poster,.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
/* The poster is the whole scene. Poster and live canvas share one framing (hall.js resize() does the same sum): cover, centred
   across, and as high as needed for the name tablet (--hall-ty of the scene height) to clear the hero text by --hall-clear. */
.hero__poster img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@supports (width:1cqh){.hero__poster img{object-position:50% clamp(calc(100cqh - max(100cqh, 100cqw * var(--hall-ar))), calc(100cqh - var(--hall-clear) - var(--hall-ty) * max(100cqh, 100cqw * var(--hall-ar))), 0px)}}
@media (max-aspect-ratio:19/20){.hero__stage{--hall-ty:.7031;--hall-ar:1.25}}
/* the still shows at once; the live picture fades in over it when it is ready, then the still stops being painted */
.hero__canvas{opacity:0;transition:opacity 1.2s var(--ease)}
.hero__stage.is-live .hero__canvas{opacity:1}
.hero__stage.is-live .hero__poster{visibility:hidden;transition:visibility 0s 1.4s}
.hero__ui{display:grid;justify-items:center;gap:22px;padding:0 var(--gutter) clamp(26px,4vh,44px);text-align:center}
.hero__kicker{font:600 clamp(.78rem,1vw,.9rem)/1 var(--label);letter-spacing:.42em;text-transform:uppercase;color:var(--bronze-light);padding-left:.42em}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero__foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;padding:0 var(--gutter) 26px;max-width:1600px;width:100%;margin-inline:auto;font:500 .78rem/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero__place{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.hero__place .clock{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:.06em;color:var(--ivory-2);font-variant-numeric:lining-nums tabular-nums}
.hero__status{justify-self:end;text-align:right}
.hero__scroll{display:grid;justify-items:center;gap:10px;color:var(--muted);text-decoration:none;font-size:.7rem;letter-spacing:.24em}
.hero__scroll i{width:1px;height:40px;background:linear-gradient(var(--bone),transparent);animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.hero__right{justify-self:end;display:grid;justify-items:end;gap:10px;text-align:right}
/* short landscape screens: a tighter text block, so it stays below the carved name tablet */
@media (max-height:860px) and (min-aspect-ratio:1/1){.hero__ui{gap:16px;padding-bottom:16px}.hero__foot{padding-bottom:18px}.hero__scroll i{height:30px}}

/* ---------- Limestone sections ---------- */
.on-bone{position:relative;background:var(--bone) url("../img/hero/limestone-tile.webp");background-size:512px;background-blend-mode:multiply;color:var(--stone-ink);isolation:isolate}
.on-dark{position:relative;background:var(--charcoal);isolation:isolate}
.on-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(231,226,216,.055),transparent 70%);opacity:var(--glow,0);transition:opacity .5s}

/* ---------- 01 Studio ---------- */
.studio{padding-block:var(--section);overflow:clip}
.studio__mark{position:absolute;z-index:-1;right:-12%;top:30%;width:min(62vw,860px);opacity:.065;pointer-events:none;mix-blend-mode:multiply}
.studio__grid{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr);gap:clamp(28px,5vw,88px)}
.studio__index{padding-top:.9rem;position:sticky;top:calc(var(--nav-h) + 28px);align-self:start}
.num{display:block;margin-bottom:14px;font:italic 400 clamp(3.4rem,6vw,5.5rem)/.9 var(--display);color:var(--oxblood-3)}
.statement{font:400 clamp(2rem,4.35vw,4.1rem)/1.12 var(--display);letter-spacing:-.012em;color:var(--stone-ink);text-wrap:pretty}
.statement .w{color:rgba(20,22,23,.2);transition:color .6s var(--ease)}
.statement .w.is-lit{color:var(--stone-ink)}
.studio__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px);padding-top:28px;border-top:1px solid var(--stone-line)}
.studio__cols h3,.disciplines h3,.creed h3{font:600 .86rem/1.3 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--stone-ink)}
.studio__cols p{margin-top:12px;max-width:44ch;color:var(--stone-ink-2)}
.disciplines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin-top:clamp(64px,8vw,120px)}
.disciplines li{position:relative;padding:26px 0 34px;border-top:1px solid var(--stone-line);transition:border-color .3s}
.disciplines li:hover{border-color:var(--stone-ink)}
.d-num{display:block;margin-bottom:18px;font:italic 500 1.35rem/1 var(--display);color:var(--oxblood-3)}
.disciplines p{margin-top:10px;color:var(--stone-muted);font-size:1rem;max-width:34ch}

/* ---------- 02 Antwerp ---------- */
.place{padding-block:var(--section)}
.plate{position:relative;margin:0}
.plate picture{display:block;overflow:hidden;background:var(--ink)}
.plate img{width:100%;height:100%;object-fit:cover}
.plate--wide{margin-bottom:clamp(40px,5vw,72px)}
.plate--wide picture{aspect-ratio:3/1}
.plate--wide figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:clamp(18px,2.4vw,34px);background:linear-gradient(0deg,rgba(13,15,16,.78),rgba(13,15,16,0));pointer-events:none}
.cap-title{font:italic 500 clamp(1.3rem,2.2vw,2rem)/1.1 var(--display);color:var(--bone)}
.cap-coords{font:500 1rem/1 var(--display);letter-spacing:.14em;color:var(--ivory-2);font-variant-numeric:lining-nums}
.plate__credit{margin:12px 0 0;font:400 .8125rem/1.55 var(--text);color:var(--body)}
.plate__credit--section{margin-top:clamp(32px,4vw,56px);max-width:76ch}
.plate__credit a{padding:5px 1px;white-space:nowrap;color:var(--ivory-2);text-decoration:underline;text-underline-offset:3px}
.place[data-triptych="off"] .plate__credit--section{display:none}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px);align-items:start}
.triptych .plate:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.triptych .plate picture{aspect-ratio:3/4}
.triptych figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:16px;margin-top:20px}
.cap-num{grid-row:1/3;font:italic 400 2.6rem/.9 var(--display);color:var(--rose-dim)}
.triptych h3{font:600 .86rem/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);align-self:center}
.triptych figcaption p{margin-top:8px;font-size:.98rem;line-height:1.6;color:var(--body);max-width:34ch}

/* Antwerp without photographs (build_media.py --text-only, or a missing plate): the captions stand on their own */
.place[data-wide="off"] .plate--wide{display:none}
.place[data-triptych="off"] .triptych .plate picture{display:none}
.place[data-triptych="off"] .triptych .plate:nth-child(2){margin-top:0}
.place[data-triptych="off"] .triptych figcaption{margin-top:0;padding-top:26px;border-top:1px solid var(--line);grid-template-columns:1fr;row-gap:12px}
.place[data-triptych="off"] .cap-num{grid-row:auto;font-size:clamp(3.4rem,6vw,5.2rem)}
.place[data-triptych="off"] .triptych figcaption p{max-width:36ch}

/* ---------- 03 Our game ---------- */
.game{position:relative;isolation:isolate;display:flex;align-items:center;min-height:max(720px,100svh);overflow:clip;background:var(--ink)}
.game::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(13,15,16,.97) 0%,rgba(13,15,16,.9) 24%,rgba(13,15,16,.55) 44%,rgba(13,15,16,.08) 64%,rgba(13,15,16,0) 80%),linear-gradient(0deg,var(--charcoal) 0%,rgba(20,22,23,.6) 10%,rgba(20,22,23,0) 26%),linear-gradient(180deg,var(--charcoal) 0%,rgba(20,22,23,.5) 8%,rgba(20,22,23,0) 22%)}
.game__art{position:absolute;inset:0;z-index:-2}
.game__art picture{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.game__art picture.is-active{opacity:1}
.game__art img{width:100%;height:100%;object-fit:cover;object-position:72% 30%}
.game__inner{width:100%;max-width:1600px;margin-inline:auto;padding:calc(var(--nav-h) + 56px) var(--gutter) clamp(72px,9vh,120px)}
.game__content{max-width:min(620px,46vw)}
.game__title img{width:clamp(300px,34vw,560px);filter:drop-shadow(0 18px 40px rgba(0,0,0,.65))}
.game__tagline{margin-top:clamp(20px,3vh,32px);font:500 clamp(1.9rem,3vw,2.8rem)/1.08 var(--display);color:var(--bone)}
.game__tagline em{display:block;font-style:italic;color:var(--rose);transition:color .6s}
.game__desc{max-width:44ch;margin-top:14px;font-size:clamp(1.0625rem,1.25vw,1.1875rem);color:var(--ivory-2)}
.game__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,4vh,38px)}
.game__actions .btn{--h:60px}
.game__side{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:26px}
.game__side-label{font:600 .72rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.side-switch{display:inline-flex;align-items:stretch;padding:4px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(13,15,16,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.side-switch button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 .78rem/1 var(--label);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .25s,background-color .25s}
.side-switch button svg{width:16px;height:16px}
.side-switch button:hover{color:var(--bone)}
.side-switch button[aria-pressed="true"]{color:var(--bone);background:rgba(231,226,216,.12);box-shadow:inset 0 0 0 1px rgba(231,226,216,.55)}
.side-switch button[data-side="Shadow"][aria-pressed="true"]{color:#f1d9dc;background:rgba(194,124,134,.16);box-shadow:inset 0 0 0 1px rgba(194,124,134,.7)}
.game__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font:500 .9rem/1.3 var(--text);color:var(--muted)}
.game__meta li{display:inline-flex;align-items:center;gap:8px}
.game__meta li::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--bronze)}
.game[data-side="light"] .game__tagline em{color:#d9cdb3}
.game__caption{position:absolute;right:var(--gutter);bottom:clamp(26px,5vh,52px);display:grid;justify-items:end;gap:6px;text-align:right}
.game__caption strong{font:600 clamp(1.05rem,1.5vw,1.4rem)/1 var(--label);letter-spacing:.14em;color:var(--bone);text-transform:uppercase}
.game__caption span{font:italic 400 1rem/1.3 var(--display);color:var(--ivory-2)}

.moments{padding-block:clamp(56px,8vw,120px)}
.moments__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(18px,2.6vw,40px);align-items:stretch}
.moment{display:flex;flex-direction:column;gap:20px}
.moment picture{display:block;overflow:hidden;background:var(--ink)}
.moment .versus{overflow:hidden;background:var(--ink)}
.moment--mythic picture{flex:1;min-height:0}
.moment--mythic img{width:100%;height:100%;object-fit:cover}
.versus{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0}
.versus picture{aspect-ratio:4/5}
.versus img{width:100%;height:100%;object-fit:cover}
.versus__seam{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;transform:translate(-50%,-50%) rotate(45deg);background:var(--charcoal);border:1px solid var(--line-strong)}
.versus__seam span{transform:rotate(-45deg);font:600 .72rem/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.moment figcaption{display:grid;gap:8px;max-width:48ch}
.moment h3{font:500 clamp(1.5rem,2.2vw,2rem)/1.1 var(--display);color:var(--bone)}
.moment p{color:var(--body);font-size:.98rem}
.moment .text-link{justify-self:start;margin-top:8px}

.finale{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(86svh,820px);overflow:clip;background:var(--ink)}
.finale__art{position:absolute;inset:0;z-index:-2}
.finale__art img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.finale::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,15,16,.9) 0%,rgba(13,15,16,.55) 34%,rgba(13,15,16,0) 62%),linear-gradient(0deg,var(--charcoal),rgba(20,22,23,0) 24%),linear-gradient(180deg,var(--charcoal),rgba(20,22,23,0) 18%)}
.finale__inner{padding-block:clamp(72px,10vh,120px)}
.finale__title{max-width:12ch;font:500 clamp(2.4rem,5.2vw,4.6rem)/1.02 var(--display);color:var(--bone)}
.finale__desc{max-width:40ch;margin-top:16px;color:var(--ivory-2)}
.finale__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---------- 04 Principles ---------- */
.principles{padding-block:var(--section)}
.creed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(22px,3vw,48px)}
.creed li{padding-top:26px;border-top:1px solid var(--stone-line)}
.creed__num{display:block;margin-bottom:18px;font:italic 400 clamp(3.6rem,6vw,5.6rem)/.85 var(--display);color:var(--oxblood-3)}
.creed p{margin-top:12px;color:var(--stone-ink-2);max-width:30ch}
.creed p a{color:var(--stone-ink);text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- 05 Contact ---------- */
.contact{padding-block:var(--section) calc(var(--section) * .8)}
.contact__mail{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin:clamp(28px,4vw,56px) 0 clamp(44px,6vw,88px)}
.contact__big{position:relative;font:400 clamp(2.3rem,7.4vw,7.2rem)/1 var(--display);letter-spacing:-.025em;color:var(--bone);text-decoration:none;overflow-wrap:anywhere}
.contact__big::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:1px;background:var(--rose);transform:scaleX(.18);transform-origin:left;transition:transform .6s var(--ease)}
.contact__big:hover::after,.contact__big:focus-visible::after{transform:none}
.copy{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ivory-2);font:600 .74rem/1 var(--label);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s,background-color .25s}
.copy svg{width:16px;height:16px}
.copy:hover{border-color:var(--bone);color:var(--bone)}
.copy.is-done{border-color:var(--rose);color:var(--rose)}
.contact__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
.contact__list div{padding-top:20px;border-top:1px solid var(--line)}
.contact__list dt{font:600 .74rem/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.contact__list dd{margin-top:10px;font:500 1.35rem/1.25 var(--display);color:var(--bone);overflow-wrap:anywhere}
.contact__list a{text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .2s}
.contact__list a:hover{border-color:var(--bone)}

/* ---------- Footer ---------- */
.footer{padding:clamp(56px,7vw,96px) 0 36px;background:var(--ink);border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.footer__brand img{width:min(230px,60vw);margin-left:-8px}
.footer__brand p{margin-top:14px;color:var(--muted);font-size:.95rem}
.footer h2{margin-bottom:16px;font:600 .74rem/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-light)}
.footer li+li{margin-top:10px}
.footer li a{display:inline-block;padding:3px 0;text-decoration:none;color:var(--ivory-2);font-size:.98rem;transition:color .2s}
.footer li a:hover{color:var(--bone);text-decoration:underline;text-underline-offset:4px}
.footer__time{margin-top:22px;display:flex;gap:10px;align-items:baseline;font:600 .72rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.footer__time time{font:500 1.05rem/1 var(--display);letter-spacing:.06em;color:var(--ivory-2);font-variant-numeric:lining-nums tabular-nums}
.footer__legal{margin-top:clamp(40px,5vw,72px);padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem;line-height:1.7;max-width:118ch}

/* ---------- Legal pages ---------- */
.legal-page{background:var(--charcoal)}
.legal{padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(72px,9vw,128px)}
.legal__inner{max-width:880px;margin-inline:auto;padding-inline:var(--gutter)}
.legal h1{font:500 clamp(2.4rem,5vw,4rem)/1.04 var(--display);color:var(--bone);margin-bottom:12px}
.legal__intro{font-size:1.125rem;color:var(--ivory-2);margin-bottom:8px}
.legal__date{font:600 .74rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(32px,5vw,56px)}
.legal h2{margin:44px 0 12px;font:500 1.9rem/1.15 var(--display);color:var(--bone)}
.legal h3{margin:24px 0 8px;font:600 .86rem/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-light)}
.legal p,.legal li{color:var(--body)}
.legal p+p{margin-top:1em}
.legal ul{margin:12px 0 0 1.1em;list-style:disc}
.legal li+li{margin-top:6px}
.legal a{color:var(--bone);text-underline-offset:3px}
.legal dl.facts{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--line)}
.legal dl.facts>div{display:grid;grid-template-columns:minmax(150px,.4fr) 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.legal dt{font:600 .74rem/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.legal dd{color:var(--bone)}
.legal__contact{margin-top:32px;padding:20px 22px;border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(231,226,216,.03)}
.legal__contact p{margin:0}
.legal__contact p+p{margin-top:8px}
.legal__back{display:inline-flex;margin-top:56px}
.nav--page .nav__brand span{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav__links,.nav__cta{display:none}
  .nav__menu-btn{display:inline-flex;margin-left:auto}
  .game__content{max-width:min(620px,62vw)}
  .contact__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .creed{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
}
@media (max-width:900px){
  .section-head--split{grid-template-columns:1fr}
  .section-head--split .lede{justify-self:start}
  .studio__grid{grid-template-columns:1fr}
  .studio__index{position:static;display:flex;align-items:baseline;gap:18px}
  .num{margin:0}
  .disciplines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .triptych{grid-template-columns:1fr;gap:44px}
  .triptych .plate:nth-child(2){margin-top:0}
  .triptych .plate picture{aspect-ratio:4/5}
  .moments__grid{grid-template-columns:1fr}
  .moment--mythic picture{flex:none;aspect-ratio:4/3}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:760px){
  .hero__foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
  .hero__scroll,.hero__right{display:none}
  .hero__place{justify-content:center}
  .plate--wide picture{aspect-ratio:16/9}
  /* phones: the Leader portrait (4:5) keeps its own shape at the top and fades into the dark; the text starts below the face */
  .game{align-items:flex-start}
  .game::after{background:linear-gradient(180deg,var(--charcoal) 0%,rgba(20,22,23,0) 10%)}
  .game__art{inset:0 0 auto;height:min(125vw,92svh)}
  .game__art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 0%,rgba(13,15,16,.86) 18%,rgba(13,15,16,0) 46%)}
  .game__art img{object-position:50% 22%}
  .game__inner{padding-top:calc(min(125vw,92svh) * .76)}
  .game__content{max-width:none}
  .game__caption{display:none}
  .finale{align-items:flex-end}
  .finale::after{background:linear-gradient(0deg,rgba(13,15,16,.95) 0%,rgba(13,15,16,.7) 40%,rgba(13,15,16,0) 75%),linear-gradient(180deg,var(--charcoal),rgba(20,22,23,0) 14%)}
}
@media (max-width:560px){
  .disciplines,.creed,.contact__list{grid-template-columns:1fr}
  .studio__cols{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .hero__actions .btn,.game__actions .btn,.finale__actions .btn{width:100%}
  .hero__actions,.game__actions,.finale__actions{width:100%}
  .legal dl.facts>div{grid-template-columns:1fr;gap:4px}
}
@media (hover:none){.on-dark::before{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js .plate[data-reveal] picture{opacity:1;transform:none;clip-path:none;transition:none}
  .hero__scroll i{animation:none}
  .statement .w{color:var(--stone-ink);transition:none}
  .hero__canvas{transition:none}
}

/* Build tool only: ?poster renders one still frame of the stone full-bleed (see tools/render_poster.py) */
html.poster-mode body{background:#000}
html.poster-mode .nav,html.poster-mode .menu,html.poster-mode .skip-link,html.poster-mode .hero__ui,html.poster-mode .hero__foot,html.poster-mode .hero__poster,html.poster-mode .hero::after,html.poster-mode .footer,html.poster-mode main>section:not(.hero){display:none!important}
html.poster-mode .hero{min-height:0;height:100vh;display:block;background:#000}
html.poster-mode .hero__stage{position:fixed;inset:0}
html.poster-mode .hero__canvas{opacity:1!important;transition:none}

/* ---------- Legal page chrome and 404 ---------- */
.legal-back{margin-left:auto;font:600 .78rem/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-2);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:6px;transition:color .2s,border-color .2s}
.legal-back:hover{color:var(--bone);border-color:var(--bone)}
.nav--page .nav__cta{margin-left:20px}
.legal__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.legal__tabs a{padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;font:600 .72rem/1 var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ivory-2);transition:border-color .2s,color .2s}
.legal__tabs a:hover{border-color:var(--bone);color:var(--bone)}
.legal__tabs a[aria-current="page"]{background:rgba(231,226,216,.12);border-color:rgba(231,226,216,.55);color:var(--bone)}
.footer--page{padding:40px 0}
.footer__legal--page{margin-top:0;border-top:0;padding-top:0}
.footer__legal--page p+p{margin-top:12px}
.footer__legal--page a{color:var(--ivory-2)}
.notfound{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:18px;padding:40px var(--gutter);text-align:center}
.notfound h1{font:500 clamp(2.4rem,6vw,4.4rem)/1.04 var(--display);color:var(--bone)}
.notfound p{color:var(--ivory-2)}