/* =========================================================================
   site.css — shared by every page.

   Lives in /site/ rather than /assets/ on purpose: _headers pins /assets/* as
   immutable for a year, so a tweak here would never reach anyone who had
   already visited. /site/* revalidates on every load, like the HTML.

   What is here: fonts, colour/spacing tokens, the top bar, the menu, buttons
   and the footer. Page-specific layout stays inline in each page.

   index.html still carries its own inline copies of the bar/button/footer
   rules from before this file existed. They are identical, so the two agree;
   they can be deleted from index.html whenever it is next touched.
   ========================================================================= */

@font-face{font-family:"Neutral Face";src:url("/assets/fonts/NeutralFace.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neutral Face";src:url("/assets/fonts/NeutralFace-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* DM Mono and Archivo are self-hosted (latin subset, from Fontsource; OFL, see
   assets/fonts/OFL.txt) rather than loaded from Google Fonts, so visitors'
   browsers never contact Google and the CSP doesn't have to allow it. */
@font-face{font-family:"DM Mono";src:url("/assets/fonts/DMMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/assets/fonts/DMMono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#0A0A0A; --fg:#EDEDED; --muted:#A8A8A8; --dim:#6E6E6E;
  --amber:#F0A53B; --amber-hi:#F6CD94;
  --line:rgba(255,255,255,.10);
  --gut:clamp(20px,4.4vw,40px); --bar:clamp(52px,5.5vw,68px);
  --display:"Neutral Face",Helvetica,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,0,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x:hidden;overflow-x:clip;min-width:0}
img,canvas,iframe,video{max-width:100%}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hi)}
.caps{font-family:var(--display);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:var(--muted)}

/* ---- Top bar -------------------------------------------------------------- */
.bar{position:fixed;top:0;left:0;right:0;min-height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:40;
  backdrop-filter:saturate(120%) blur(18px);-webkit-backdrop-filter:saturate(120%) blur(18px);background:rgba(10,10,10,.55);border-bottom:1px solid var(--line);
  padding:0 max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left))}
.bar img{height:clamp(24px,3vw,30px);width:auto;display:block;flex:none}
.bar .home{display:block;flex:none;-webkit-tap-highlight-color:transparent}
.bar-r{display:flex;align-items:center;gap:clamp(14px,2vw,22px);min-width:0}
/* The trailing .28em of letter-spacing reads as a phantom right margin. */
.bar .caps{margin-right:-.28em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Menu button ---------------------------------------------------------- */
/* Two equal lines that turn into an X. Open and closed states use the SAME
   list of transform functions (translateY then rotate) so the browser animates
   each one directly: the lines slide to the centre and rotate in one motion.
   v06 went from translateY(...) to rotate(...), two different lists, which
   forces the browser to blend them as matrices and made the lines swing on an
   odd path. The button is 44px square for touch; the icon is 22px. */
.nav-btn{position:relative;width:44px;height:44px;margin-right:-11px;flex:none;border:0;padding:0;background:transparent;cursor:pointer;color:var(--fg);-webkit-tap-highlight-color:transparent}
.nav-btn i{position:absolute;left:11px;top:21px;width:22px;height:1.5px;background:currentColor;border-radius:1px;transition:transform 180ms ease-out}
.nav-btn i:nth-child(1){transform:translateY(-4px) rotate(0deg)}
.nav-btn i:nth-child(2){transform:translateY(4px) rotate(0deg)}
.nav-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.nav-open .nav-btn i:nth-child(1){transform:translateY(0) rotate(45deg)}
.nav-open .nav-btn i:nth-child(2){transform:translateY(0) rotate(-45deg)}

/* ---- Menu overlay --------------------------------------------------------- */
/* Hidden with visibility as well as opacity so its links drop out of the tab
   order and the accessibility tree while closed.
   Solid background, no backdrop-filter. Fading an element that has a backdrop
   blur is unreliable in Chrome and Safari: the blur pops in late or flickers
   mid-fade, and on the reel page it was re-blurring the live fluid simulation
   every frame. A near-opaque fill fades cleanly and costs nothing. */
.nav{position:fixed;inset:0;z-index:39;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--bar) + clamp(28px,7vh,72px)) max(var(--gut),env(safe-area-inset-right)) calc(clamp(24px,4vh,40px) + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left));
  background:rgba(10,10,10,.97);
  opacity:0;visibility:hidden;transition:opacity 160ms ease-out,visibility 0s linear 160ms;overflow-y:auto;overscroll-behavior:contain}
.nav-open .nav{opacity:1;visibility:visible;transition:opacity 160ms ease-out,visibility 0s}
.nav ol{list-style:none;margin:0;padding:0;counter-reset:n}
.nav li{counter-increment:n;border-bottom:1px solid var(--line)}
.nav li:first-child{border-top:1px solid var(--line)}
.nav li a{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);padding:clamp(14px,2.6vh,26px) 0;
  font-family:var(--display);font-weight:700;font-size:clamp(34px,7vw,88px);line-height:1;letter-spacing:0;color:#fff;
  transition:color 150ms ease}
.nav li a::before{content:"0" counter(n);font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--dim);
  transform:translateY(-.4em);min-width:2ch;transition:color 220ms var(--ease)}
.nav li a small{margin-left:auto;align-self:center;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--dim);text-align:right}
.nav li a:hover,.nav li a:focus-visible{color:var(--amber);outline:none}
.nav li a:hover::before,.nav li a[aria-current="page"]::before{color:var(--amber)}
.nav-foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding-top:32px}
.nav-foot a{color:var(--muted)}
.nav-foot a:hover{color:var(--fg)}
/* Deliberately simple: the whole menu fades, nothing slides. The page behind is
   NOT scroll-locked — locking it hides the scrollbar, which shifts the whole
   layout sideways by its width on desktop. The menu covers the page anyway, and
   overscroll-behavior keeps a swipe inside the menu from scrolling the page. */
@media(prefers-reduced-motion:reduce){.nav,.nav-btn i{transition:none}}
@media(max-width:600px){.nav li a small{display:none}}
@media(max-width:400px){.bar .caps{display:none}}

/* ---- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border-radius:6px;font-size:14px;transition:background 180ms var(--ease);-webkit-tap-highlight-color:transparent}
.btn-a{background:var(--amber);color:#0A0A0A;font-weight:700}
.btn-a:hover{background:#F3B963;color:#0A0A0A}
.btn-b{border:1px solid rgba(255,255,255,.16);color:var(--fg);font-weight:600}
.btn-b:hover{background:rgba(255,255,255,.06);color:var(--fg)}

/* ---- Footer --------------------------------------------------------------- */
footer{border-top:1px solid var(--line);min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;gap:10px;flex-wrap:wrap;
  padding:14px max(var(--gut),env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left))}
footer>*{min-width:0}
@media(max-width:860px){
  footer .sep{display:none}
  footer{flex-direction:column;line-height:1.6;gap:8px}
}