/* ============================================================
   eski design tokens. the one shared stylesheet.
   loaded by index.html, read.html, studio.html, spec.html.

   TOKENS ONLY. component css stays in each page, because the four
   surfaces are genuinely different shapes: a cover grid, a reader that
   must disappear, a three column studio, a spec document.

   the look is swiss grid in sage: one hue, square corners, hairline
   dividers instead of shadows, and density treated as a feature. this
   site hosts other people's artwork, so the chrome stays quiet and the
   content is the only thing that gets to be loud.
   ============================================================ */

@font-face{
  font-family:'Gnomon';
  src:url(data:font/woff2;base64,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) format('woff2');
  font-display:swap;
}

:root{
  /* ---------- the sage ramp. the only hue, locked values ---------- */
  --sage-50:#F6F9F7; --sage-100:#E9F1ED; --sage-200:#D1E1D9; --sage-300:#ABC4B8;
  --sage-400:#7A9F8D; --sage-500:#5B7A6B; --sage-600:#486356; --sage-700:#354D41;
  --sage-800:#23362D; --sage-900:#14221B;

  --white:#FFFFFF; --paper-0:#F8FAF9; --paper-1:#EFF3F1;
  --line-1:#CDD6D1; --black:#000000;

  --void:#0C130F; --surf-1:#14221B; --surf-2:#1C2C24; --surf-3:#23362D;
  --line-dark:#3A5045; --muted-dark:#98AEA4;

  --success:#486356; --warning:#8A5A12; --danger:#A33028;

  /* page state bars in the studio. two stacked bars under every page card.
     the two soundtrack states are shades of ONE colour on purpose, so the
     reading is "same thing, different intensity" rather than two arbitrary
     colours to memorise. dialogue is a different hue because it is a
     different kind of thing. */
  --pg-song:#354D41;        /* a soundtrack starts on this page */
  --pg-song-cont:#ABC4B8;   /* the same soundtrack, carried over */
  --pg-lines:#8A5A12;       /* this page has one-shots */

  /* ---------- type. jost only, weight and colour carry the hierarchy ---------- */
  --font-body:'Jost','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --font-display:'Gnomon',var(--font-body);

  --fs-display:clamp(32px,5vw,60px);
  --fs-title:clamp(20px,2.4vw,28px);
  --fs-lg:17px;
  --fs:15px;
  --fs-sm:13.5px;
  --fs-xs:12px;
  --fs-micro:11px;

  /* readouts: page counts, timecodes, durations, queue positions. jost with
     tabular figures so digits stop jittering as they tick. */
  --num:tabular-nums;

  /* ---------- space. 4px scale, and this ui lives at the low end ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px;

  /* ---------- shape. structure is square, and so is almost everything else.
     round survives only where a thing is genuinely a disc or a track. ---------- */
  --r:0;
  --r-round:50%;
  --r-track:999px;
  --bw:1px;

  /* ---------- density. one place to retune every control at once ---------- */
  --hdr:52px;
  --ctl:30px;          /* pointer sized control */
  --ctl-touch:42px;    /* coarse pointer, see the media query at the end */
  --max:1100px;

  /* ---------- motion ---------- */
  --ease:cubic-bezier(0.4,0,0.2,1);
  --t-fast:160ms; --t-mid:220ms; --t-slow:300ms;

  /* ============================================================
     compatibility layer.
     the four pages grew two different vocabularies: index and studio
     speak --bg-0..--bg-3 / --edge / --shadow, while read and spec speak
     --paper / --surface / --line. rather than rewrite 847 lines of
     component css, both vocabularies are defined here in terms of the
     ramp above. every page changes palette at once and nothing drifts.
     ============================================================ */

  /* the reader recolours these two live from the cover art, so anything
     derived from them has to stay in hsl. neutral until tint is on. */
  --hue:151; --tintsat:0%;

  --ink:var(--sage-900);
  --soft-ink:#45544D;
  --muted:#62746B;

  --accent:var(--sage-500);
  --accent-deep:var(--sage-700);
  --accent-soft:var(--sage-200);
  /* what goes ON an accent fill. this MUST flip with the theme: in dark mode
     the accent steps up the ramp to sage-300, and white text on sage-300 is
     about 1.9:1, which is both unreadable and the source of the glare. */
  --on-accent:var(--white);
  /* borders on things you can click. --line is for dividers, which may be
     quiet; an interactive boundary needs to be seen. */
  --line-strong:#7F948A;

  --paper:var(--paper-0);
  --surface:var(--white);
  --line:var(--line-1);

  --bg-0:var(--paper-1);
  --bg-1:var(--paper-0);
  --bg-2:var(--white);
  --bg-3:var(--white);
  --edge:var(--line-1);
  --edge-strong:var(--sage-300);

  /* elevation is a change of ground and a hairline, never a shadow.
     these stay defined so no existing rule breaks. */
  --shadow:none;
  --shadow-lg:none;

  /* reader page bands */
  --band:var(--sage-900); --band-fg:var(--sage-100); --band-dim:var(--sage-400);
  --page-bg:var(--white);
}

[data-theme="dark"]{
  --ink:#EAF0EC;
  --soft-ink:var(--sage-200);
  --muted:var(--muted-dark);

  /* sage-500 is 3.5:1 on a dark ground and fails for body text, so the
     primary interactive colour steps up the ramp instead. */
  --accent:var(--sage-300);
  --accent-deep:var(--sage-200);
  --accent-soft:var(--surf-3);
  /* dark accents are light, so what sits on them must be dark */
  --on-accent:var(--sage-900);
  --line-strong:var(--sage-400);

  --paper:var(--surf-1);
  --surface:var(--surf-2);
  --line:var(--line-dark);

  --bg-0:var(--void);
  --bg-1:var(--surf-1);
  --bg-2:var(--surf-2);
  --bg-3:var(--surf-3);
  --edge:var(--line-dark);
  --edge-strong:var(--sage-700);

  --band:var(--void); --band-fg:var(--sage-100); --band-dim:var(--sage-400);
  --page-bg:var(--paper-1);
}

/* ============================================================
   base. everything below is shared by all four pages.
   ============================================================ */

*{box-sizing:border-box}

/* controls do not inherit the page font on their own. every surface needs
   this or button based ui silently renders in arial. */
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}

/* readouts. any element that ticks or counts gets steady digit widths. */
.num,[data-num]{font-variant-numeric:var(--num)}

::selection{background:var(--sage-200);color:var(--sage-900)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

*{scrollbar-width:thin;scrollbar-color:var(--sage-300) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--sage-300);border:3px solid transparent;
  background-clip:content-box;border-radius:var(--r-track)}
*::-webkit-scrollbar-thumb:hover{background:var(--sage-500);border:3px solid transparent;
  background-clip:content-box}

/* the rule bar, the one piece of ornament the brand keeps */
.rule{width:min(50%,220px);height:5px;background:var(--accent);border:0;border-radius:var(--r)}

/* [hidden] loses to any component rule that sets display, which is a bug
   every single time. */
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:120ms!important;
    transition-property:opacity,background-color,color,border-color!important;
  }
}

/* coarse pointers get the bigger control size. this is a token change, so
   every page picks it up without its own media query. */
@media (pointer:coarse){
  :root{ --ctl:var(--ctl-touch); }
}