/* shared.css — c9.pt + w9.pt, v2. Same file on both sites. */
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/IBMPlexSans-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/IBMPlexSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
/* w9 only also loads IBMPlexSerif-Regular / -Italic / -SemiBold the same way */

:root{
  color-scheme:light dark;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"IBM Plex Serif",Charter,Georgia,serif;

  /* light */
  --bg:#FAFAF8; --surface:#FFFFFF; --tint:#F4F4F1; --line:#E0E0DA; --field:#D6D6D0; --ink:#111111; --ink-2:#3D3D39; --ink-3:#6A6A64;

  /* type — fluid, no breakpoint font sizes */
  --t-meta:.75rem;            /* 12  mono labels, dates, stamps */
  --t-small:.875rem;          /* 14  captions, notes */
  --t-body:1.0625rem;         /* 17  body (w9 article 1.1875rem / 19) */
  --t-lead:clamp(1.0625rem,1.6vw,1.25rem);      /* 17 → 20 */
  --t-h3:1.1875rem;           /* 19 */
  --t-h2:clamp(1.625rem,3vw,2.375rem);          /* 26 → 38 */
  --t-h1:clamp(2.375rem,5.5vw,4.25rem);         /* 38 → 68 */
  --t-reel-s:clamp(2.25rem,4vw,3.5rem);         /* 36 → 56  stat rows */
  --t-reel-m:clamp(2.5rem,6vw,4.5rem);          /* 40 → 72  piece numbers, countdown */
  --t-reel-l:clamp(4.5rem,10vw,8rem);           /* 72 → 128 article numerals */
  --t-reel-xl:clamp(6rem,15vw,11.25rem);        /* 96 → 180 404, w9 about */
  --lh-text:1.55; --lh-tight:1.03; --track-h:-.035em; --measure:62ch;

  /* space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6.875rem;   /* 110: between sections, desktop */
  --gutter:clamp(1.25rem,4vw,3rem); --max:74rem;

  --radius:6px; --radius-lg:10px; --pill:999px;
  --shadow-shot:0 24px 48px -32px rgb(0 0 0/.25);
  --ease-reel:cubic-bezier(.2,.8,.2,1); --dur-reel:1.3s; --step-reel:70ms;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111111; --surface:#1A1A18; --tint:#1F1F1D; --line:#2A2A28; --field:#3A3A37; --ink:#EDEDEA; --ink-2:#B5B5AF; --ink-3:#8A8A84;}}
[data-theme=dark]{--bg:#111111; --surface:#1A1A18; --tint:#1F1F1D; --line:#2A2A28; --field:#3A3A37; --ink:#EDEDEA; --ink-2:#B5B5AF; --ink-3:#8A8A84;}

/* rolling digits — markup per digit:
   <span class="reel" style="--d:7"><span>0 1 2 3 4 5 6 7 8 9</span></span>
   PHP writes --d (the final digit). Without JS it simply sits there. */
.reel{display:inline-block;height:1em;width:.6em;overflow:hidden;font-family:var(--font-mono);font-weight:500;line-height:1;vertical-align:bottom}
.reel>span{display:block;white-space:pre-line;line-height:1em;transform:translateY(calc(var(--d)*-1em));transition:transform var(--dur-reel) var(--ease-reel) var(--delay,0ms)}
.reels{display:inline-flex;letter-spacing:-.03em}
.reels[data-armed]>.reel>span{transform:translateY(-9em)}   /* JS adds data-armed, then removes it on view */
@media (prefers-reduced-motion:reduce){.reel>span{transition:none}}

/* shared pieces */
.pill{display:inline-block;padding:5px 10px;border:1px solid var(--ink);border-radius:var(--pill);font:500 var(--t-meta) var(--font-mono);color:var(--ink)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dot.quiet{background:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.meta{font:500 var(--t-meta) var(--font-mono);color:var(--ink-3)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows>li{padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s-6)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-8);align-items:start;margin-top:var(--s-9)}
.split>:first-child{position:sticky;top:var(--s-5)}
@media (max-width:48em){.split{grid-template-columns:1fr;gap:var(--s-5);margin-top:3.5rem}.split>:first-child{position:static}}
.btn{font:500 .9375rem var(--font-sans);padding:12px 18px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--field);background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.shot{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:10px;box-shadow:var(--shadow-shot)}

@media print{
  :root{--bg:#FAFAF8; --surface:#FFFFFF; --tint:#F4F4F1; --line:#E0E0DA; --field:#D6D6D0; --ink:#111111; --ink-2:#3D3D39; --ink-3:#6A6A64;}
  header nav,.btn,.theme,.lang,.reels[data-armed]{display:none}
  .split{display:block}.split>:first-child{position:static}
  .shot{box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:var(--ink-3)}
}