/* SHARED BASE — tokens, reset, @font-face. Linked by the five element pages.
   ⚠️ index.html (the spine) carries an INLINE copy of this block because it is
   the LCP-critical page and there is no build step to re-inline it. If you
   change a token here, change it there too. scripts/verify.sh asserts that
   --paper resolves identically on the spine and on a sub-page. */

@font-face{font-family:Garamond;src:url(/assets/fonts/garamond-roman.woff2)format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:Garamond;src:url(/assets/fonts/garamond-italic.woff2)format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@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:"Garamond Fallback";src:local("Georgia");size-adjust:89%;ascent-override:105%;descent-override:28%;line-gap-override:0%}

:root{
  --paper:#FAF8F4; --paper-2:#F2EDE4; --paper-3:#E7E0D4;
  --ink:#15171B; --ink-2:#3B3E44;
  /* --muted was #777167 until 2026-08-17. It cleared AA on --paper (4.56:1) but
     failed on the tinted plates: 4.15:1 on --paper-2 and 3.69:1 on --paper-3,
     which is the mark-plate's HOVER state — so the roster labels got LESS legible
     the moment you pointed at them. #696359 is the lightest value in the same warm
     family that clears 4.5:1 against the worst case (--paper-3, now 4.54:1), and it
     lifts the plain-paper case to 5.61:1. Any new value must be checked against
     --paper-3, not --paper. */
  --muted:#696359; --muted-2:#716B61;
  --copper:#B87333; --copper-ink:#8A5626;
  --rule:rgba(138,86,38,.3);

  --font-display:Garamond,"Garamond Fallback",Georgia,serif;
  --font-body:Garamond,"Garamond Fallback",Georgia,serif;
  --font-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;

  --text-hero:clamp(3.25rem,1.6rem + 7.4vw,9rem);
  --text-section:clamp(2rem,1rem + 4.5vw,5rem);
  --text-num:clamp(4.5rem,2.5rem + 8vw,12rem);
  --text-display:clamp(1.375rem,.8rem + 2.2vw,2.75rem);
  --text-body:clamp(1.0625rem,.95rem + .55vw,1.3125rem);
  --text-caption:clamp(.875rem,.8rem + .3vw,1.0625rem);
  --text-label:clamp(.625rem,.55rem + .2vw,.75rem);

  --sp-xs:clamp(.5rem,.4rem + .25vw,.75rem);
  --sp-sm:clamp(.75rem,.6rem + .5vw,1.25rem);
  --sp-md:clamp(1.25rem,1rem + 1vw,2rem);
  --sp-lg:clamp(2rem,1.5rem + 2.5vw,4.5rem);
  --sp-xl:clamp(4rem,2.5rem + 6vw,10rem);
  --sp-2xl:clamp(6rem,3.5rem + 9vw,15rem);
  --gutter:clamp(1.25rem,.6rem + 3vw,5rem);

  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-cubic:cubic-bezier(.32,0,.67,0);
  --dur-fast:180ms; --dur-normal:320ms; --dur-slow:560ms; --dur-cine:900ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--font-body);font-size:var(--text-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip, NOT hidden. overflow-x:hidden computes overflow-y to auto, which makes
     <body> a scroll container — and that silently freezes every anonymous
     animation-timeline:view() on the page. Every .reveal was stuck: short ones
     frozen at opacity 1, and any plate taller than the viewport frozen at 0.07,
     i.e. the full-bleed photographs were rendering invisible. overflow:clip
     contains the 100vw bleed images without creating a scroll container. */
  overflow-x:clip}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.02;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:var(--copper-ink);text-decoration-color:rgba(138,86,38,.35);text-underline-offset:.25em;
  transition:text-decoration-color var(--dur-fast) linear,color var(--dur-fast) linear}
a:hover,a:focus-visible{color:var(--ink);text-decoration-color:var(--copper-ink)}
:focus-visible{outline:2px solid var(--copper-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;font-family:var(--font-mono);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.08em}
.skip:focus{left:0}
main{position:relative;z-index:1;background:var(--paper)}