/* ==========================================================================
   NITRATE — design tokens.  The shared visual language.
   A FILM LAB, not a streaming app.
     dark  = "the vault"       (browse — the default)
     light = "the light table" (inspect)
   Safety orange is the ONLY saturated colour in the interface and always means
   "this is what you sorted by / this needs attention".  Everything else is a
   warm grey scale.
   Owned by the server agent.  Views consume these, never redefine them.
   ========================================================================== */

/* --- THE MARQUEE FACE ----------------------------------------------------
   Big Shoulders Display — SIL Open Font License 1.1 (see fonts/OFL.txt).
   Patric King / The Big Shoulders Project.  A condensed industrial grotesque
   drawn for civic signage: flat-sided bowls, tight apertures, squared
   terminals.  It is the ONLY thing on this site that is allowed to shout, and
   it earns that at 60px+ where system-ui just looks like a settings screen.

   Self-hosted, no external request.  Two subsets with unicode-range so a page
   of plain-Latin titles downloads 35 KB and never touches the latin-ext file;
   "Amélie" is covered by latin, "Ostatni Etap" pulls the second only if the
   catalogue actually shows such a title.  Variable 400-900: use the weight
   axis for restraint, not a second family.
   Served from /static/fonts/ — the URLs below are relative to this file.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 400 900;          /* variable: one file covers the whole range */
  font-display: swap;            /* text is readable in the fallback from frame 1 */
  src: url("fonts/bigshoulders-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/bigshoulders-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- LIGHT: "the light table" -------------------------------------------- */
:root {
  --ground:#e6e2d9; --panel:#f2efe8; --panel-2:#dcd7cb; --rule:#c3bcac;
  --ink:#1a1714; --ink-2:#4a443c; --muted:#635d53;
  --accent:#9d4300; --accent-ink:#ffffff; --cool:#236675;
  --ok:#366932; --warn:#7a5810; --crit:#a7382a;
  color-scheme: light;

  /* TYPE — three roles.  Self-hosted only: no CDN, no external request. */
  --font-display: system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* MARQUEE — the big type only: front-board titles, section heads, the poster
     wall's one big word.  Never the Screener table, never a form label; it is
     condensed and would cost legibility at 12.5px.  Fallbacks are condensed-ish
     so a swap does not reflow the page into a different shape. */
  --font-marquee: "Big Shoulders Display", "Avenir Next Condensed",
                  "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --size-dense: 12.5px;

  /* --- THE CAPTION GRID ---------------------------------------------------
     Prose has a readable measure and a full-width block does not, so every
     block on this site that sets a caption under a picture used to cap that
     caption at some number of `ch` and leave the rest of the row empty.  John
     pointed at the same void three times on the night of 2026-08-11 — THE
     SPECTRUM, the broadcast-years block on #/anime, and NEW PRINTS — so the
     answer is not a cap per block, it is a column grid the whole paper shares.

     A COLUMN IS A WIDTH, NOT A COUNT.  330px is the old ~78ch measure at
     12.5px, taken as a physical width, which is 46 characters at 12.5px and
     52 at 10.5px — both inside the readable band.  The browser then fits as
     many of them as the row allows: three at ~1300px, two at ~1000px, one
     below ~700px, and it does that identically in every block that opts in,
     which is what makes it read as one grid rather than five local fixes.
     ⛔ No breakpoint of our own invention is needed for it (MOBILE_SPEC §1).

     ⚠️ `break-inside: avoid` is deliberately NOT part of this idiom.  With
     paragraphs of unequal length it forces the tallest to set the column
     height and leaves the last column empty — a new void where the old one
     was.  `orphans`/`widows` keep a single line from being stranded instead,
     and prose that runs on across a column boundary is what newsprint does.
     ⛔ A <details> must sit OUTSIDE the column flow: its own body is
     multi-column, and opening one nested inside a column reflows the caption
     around it. */
  --cap-col: 330px;
  --cap-gap: 34px;

  /* hairlines and rhythm */
  --hair: 1px;
  --gap: 12px;
  --pad: 16px;
}

/* --- DARK: "the vault" --------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#131110; --panel:#1b1817; --panel-2:#252120; --rule:#332e2b;
    --ink:#ece5da; --ink-2:#c3bab0; --muted:#8f887d;
    --accent:#f0790d; --accent-ink:#1a0f04; --cool:#63b6c7;
    --ok:#78b571; --warn:#d8a441; --crit:#d5685a;
    color-scheme: dark;
  }
}

/* the toggle wins in both directions */
:root[data-theme="dark"] {
  --ground:#131110; --panel:#1b1817; --panel-2:#252120; --rule:#332e2b;
  --ink:#ece5da; --ink-2:#c3bab0; --muted:#8f887d;
  --accent:#f0790d; --accent-ink:#1a0f04; --cool:#63b6c7;
  --ok:#78b571; --warn:#d8a441; --crit:#d5685a;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground:#e6e2d9; --panel:#f2efe8; --panel-2:#dcd7cb; --rule:#c3bcac;
  --ink:#1a1714; --ink-2:#4a443c; --muted:#635d53;
  --accent:#9d4300; --accent-ink:#ffffff; --cool:#236675;
  --ok:#366932; --warn:#7a5810; --crit:#a7382a;
  color-scheme: light;
}

/* --- base reset ---------------------------------------------------------- */
*, *::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: var(--size-dense);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.05;
}

p { margin: 0 0 .7em; }
a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }

img, svg, canvas { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: var(--hair) solid var(--rule);
  border-radius: 0;
}
button { cursor: pointer; }

/* ALL numbers, paths, codecs, ids — digits must line up in columns. */
code, kbd, samp, pre, .num, .mono, [data-num] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.num, td.num, th.num { text-align: right; }

table { border-collapse: collapse; width: 100%; }
/* hairline dividers, never zebra stripes */
th, td { border-bottom: var(--hair) solid var(--rule); }

hr { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* --- focus ---------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* hover uses outline, never border — a border resizes the box and shifts the grid */
.hoverable:hover { outline: var(--hair) solid var(--rule); }

/* --- severity ------------------------------------------------------------- */
.sev-crit { color: var(--crit); }
.sev-warn { color: var(--warn); }
.sev-info { color: var(--muted); }
.is-ok    { color: var(--ok); }
.accent   { color: var(--accent); }

/* --- scrollbars ----------------------------------------------------------- */
* { scrollbar-color: var(--rule) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --- motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}