/* ── Tokens ─────────────────────────────────────────────────────────────
   Lifted verbatim from ai-studio/bio-page/template.html so the agency site
   and the roster pages are visibly one house.

   A theme is a token swap — nothing outside this file hardcodes a colour.
   Every surface token ships with its paired ink token and its measured
   contrast ratio against that surface (iron rule #15).                    */
:root,
[data-theme="ember"]{
  --ground:#14100E;          /* warm near-black                */
  --ground-2:#1B1512;
  --ink:#F6EEE6;             /* on --ground   16.0:1           */
  --ink-2:#C6B5A7;           /*               9.4:1            */
  --ink-3:#9C8A7B;           /*               5.3:1            */
  --line:rgba(246,238,230,.13);
  --line-2:rgba(246,238,230,.07);
  --surface:rgba(246,238,230,.05);
  --accent:#E58C3E;          /* on --ground   7.1:1            */
  --accent-2:#B8501F;
  --accent-ink:#1B0D03;      /* on --accent   6.9:1            */
  --scrim:rgba(20,16,14,.74);
}

:root{
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --pad:20px;
  --r-card:16px;
  --r-row:10px;

  /* Timing. --t-copy is read by app.js — keep the two in step. */
  --t-copy:150ms;
  --t-cross:620ms;
  --ease:cubic-bezier(.2,.75,.3,1);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* The stage owns the viewport. Nothing scrolls — moving is a room change. */
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

:where(a,button):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* Film grain — kills the flat-gradient "generated page" look. Static. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.05; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}