/* Modernist: design-system tokens and component classes.
 *
 * Vendored from the Claude Design project "Files to review"
 * (_ds/modernist-ce171b97-44f7-4521-ba62-15d38dd0436a/styles.css).
 * This is the source of truth for the system's look. Do not hand-edit
 * to restyle a single page: change a token here, or add page CSS in
 * the template. Re-pull from the design project to update.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  /* 2026 SOS theme: maroon and gold on warm cream with deep-navy ink,
     aligned to the Special Operations Service crest. Replaces the original
     bright-red-on-grey modernist palette. From the "Paul Newman Cup"
     design (claude.ai/design), whose style overlay this vendors. */
  --color-bg: #f7f2e8;
  --color-surface: #efe7d6;
  --color-text: #182a3d;
  --color-accent: #8a1538;
  --color-accent-2: #a8842c;
  --color-divider: color-mix(in srgb, #182a3d 32%, transparent);

  /* Tonal ramps, generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #efe7d6;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #4a4442;
  --color-neutral-900: #2d2b2b;

  /* Maroon ramp. 100/600/700/800 are the design's values (the steps the
     components actually use); the rest interpolate around them. */
  --color-accent-100: #f3e5d9;
  --color-accent-200: #e6c8ce;
  --color-accent-300: #d29fac;
  --color-accent-400: #b86a80;
  --color-accent-500: #9c3a56;
  --color-accent-600: #75122f;
  --color-accent-700: #5f0f27;
  --color-accent-800: #6a1229;
  --color-accent-900: #45091b;

  /* Gold ramp (accent-2). Unused by any component today, kept coherent. */
  --color-accent-2-100: #f7ecd0;
  --color-accent-2-200: #eeddab;
  --color-accent-2-300: #e0c67f;
  --color-accent-2-400: #cca94e;
  --color-accent-2-500: #a8842c;
  --color-accent-2-600: #8c6c23;
  --color-accent-2-700: #6f551b;
  --color-accent-2-800: #574216;
  --color-accent-2-900: #3c2d0f;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation, derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components, built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* rules */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px,
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* forms */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
/* A visible NATIVE checkbox with its text. Used where ticking the box
   is itself the act that matters (the participation declaration) - the
   .radio pattern hides the real input behind a styled dot, and inside
   .field its `.field > label` override shrank the whole row to muted
   12px text that did not look (or reliably act) clickable. */
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.check input {
  width: 16px; height: 16px; flex: none; margin-top: 2px;
  accent-color: var(--color-accent); cursor: pointer;
}

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* cards */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* tags */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* navigation
 *
 * A dark maroon bar with gold accents, per the SOS theme: the crest's own
 * colours run across the top of every page. Nav ink is warm cream, hover
 * and the current page are gold, and the wordmark is white. */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #7a1230;
  border-bottom: 3px solid var(--color-accent-2);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: #f3e8d6; text-decoration: none; font-size: 14px; }
/* The brand renders as a link home; restated at (0,2,1) so it keeps its
   wordmark size and white colour against `.nav a`. */
.nav a.nav-brand {
  font-size: 18px; color: #fff;
  display: inline-flex; align-items: center; gap: var(--space-2);
}

/* The SOS crest, cut to a transparent circle so it sits on the page
   rather than in a white box. flex:none stops the nav's wrap from
   squashing it once the links run out of room. The gold ring ties it to
   the bar it now sits on. */
.nav-badge {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%; box-shadow: 0 0 0 1.5px #eccb6a;
}
.nav a:hover, .nav a[aria-current='page'] { color: #eccb6a; }
/* Sign-out and other muted links sit on the dark bar, so they need a light
   muted, not the page's dark one. */
.nav .text-muted { color: color-mix(in srgb, #f3e8d6 65%, transparent); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* dialog */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   App additions: tokens above are the design system's; these are the
   few repeated patterns the .dc.html design uses inline. Kept here so
   templates stay markup, not style sheets.
   ══════════════════════════════════════════════════════════════════════ */

.page { max-width: 1060px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.page-narrow { max-width: 560px; }

/* The small uppercase kicker above headings. */
.kicker {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: var(--space-2);
}
.lede { max-width: 60ch; margin: 0 0 var(--space-6); }
.note { font-size: 12px; opacity: 0.6; }

/* Equal-width cells divided by 2px rules, the system's "let the grid
   show" direction. Used for the scoring split and the profile stats. */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-divider);
}
.stat-grid.bounded { border-bottom: 2px solid var(--color-divider); }
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat { padding: var(--space-4); }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 2px solid var(--color-divider); }
.stat-value { font-family: var(--font-heading); font-size: 28px; font-weight: 700; }
.stat-label { font-size: 13px; }
.stat-note { font-size: 12px; opacity: 0.6; }

.num { font-variant-numeric: tabular-nums; }
.rank { font-family: var(--font-heading); font-size: 26px; font-weight: 700; }
.rank-first { color: var(--color-accent); }

/* Leaderboard leader treatment, from the design mock: gold-tinted row,
   gold bar on the rank cell, gold numeral, "Leader" pill by the name.
   The transparent border on every first cell keeps columns aligned
   whether or not a leader is highlighted. */
.table tbody td:first-child { border-left: 4px solid transparent; }
.row-leader { background: color-mix(in srgb, var(--color-accent-2) 13%, transparent); }
.row-leader td:first-child { border-left-color: var(--color-accent-2); }
.row-leader .rank { color: var(--color-accent-2); }
.leader-pill {
  display: inline-block; vertical-align: middle; margin-left: var(--space-2);
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #6b4e0f; background: #f0e2bd; padding: 2px 9px;
}

/* The poster statement, the one place red runs as a field. */
.poster {
  background: var(--color-accent); color: #fff;
  padding: var(--space-8) var(--space-6); margin-bottom: var(--space-6);
}
.poster-title {
  font-family: var(--font-heading); font-size: 52px; font-weight: 700;
  line-height: 1.05; max-width: 14ch;
}
.poster .kicker { opacity: 0.8; }

/* A button that sits on the red poster field: white fill, accent text.
   The outline variant is for a secondary action (e.g. "leave") on the
   same field. */
.poster-btn {
  display: inline-block; background: #fff; color: var(--color-accent-700);
  padding: var(--space-2) var(--space-4); font-weight: 600;
  font-family: var(--font-heading); font-size: 14px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid #fff;
}
.poster-btn:hover { background: var(--color-accent-100); color: var(--color-accent-700); }

.poster-beat { border-bottom: 4px solid var(--color-accent-2); }

/* Beat Piers hero: text and stats on the left, portrait with the "VS"
   badge on the right. Gold (#eccb6a) is the poster's own accent - the
   page-level gold is too muted against the red field. */
.poster-hero {
  display: grid; grid-template-columns: 1fr 260px;
  gap: var(--space-8); align-items: center;
}
.poster-gold { color: #eccb6a; }
.poster-stats {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--space-6);
  border-top: 1px solid rgba(236, 203, 106, 0.45);
}
.poster-stat { padding: var(--space-3) var(--space-6) 0 0; }
.poster-stat + .poster-stat {
  border-left: 1px solid rgba(236, 203, 106, 0.45);
  padding-left: var(--space-6);
}
.poster-stat-value {
  font-family: var(--font-heading); font-size: 34px; font-weight: 800;
  color: #eccb6a; font-variant-numeric: tabular-nums;
}
.poster-stat-label { font-size: 12px; opacity: 0.85; }
.poster-portrait-wrap { position: relative; justify-self: end; }
.poster-portrait {
  width: 230px; height: 280px; box-shadow: 0 0 0 3px #eccb6a;
  background: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.poster-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1);
}
.poster-portrait-placeholder {
  font-size: 12px; opacity: 0.6; text-align: center;
  padding: var(--space-3); max-width: 16ch;
}
.vs-badge {
  position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: #eccb6a; color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
@media (max-width: 720px) {
  .poster-hero { grid-template-columns: 1fr; }
  .poster-portrait-wrap { justify-self: start; margin-left: 26px; }
}
.poster-btn-outline {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6);
}
.poster-btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Stacked rows divided by rules: review queue, admin event list. */
.rule-row { border-top: 2px solid var(--color-divider); padding: var(--space-4) 0; }
.row-head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }

/* Buttons rendered as <a> inside the nav.
 *
 * Restated at (0,2,1) so they win over `.nav a` inside the bar. On the
 * dark maroon nav the primary button is the gold fill with near-black
 * ink (high contrast), and the ghost button is gold text. Secondary keeps
 * the cream nav ink.
 */
.nav a.btn-primary,
.nav a.btn-primary:hover { background: var(--color-accent-2); color: #3a0c1c; }
.nav a.btn-primary:hover { background: #c39a38; }
.nav a.btn-ghost { color: #eccb6a; }
.nav a.btn-ghost:hover { background: color-mix(in srgb, #eccb6a 20%, transparent); }
.nav a.btn-secondary { color: #f3e8d6; border-color: color-mix(in srgb, #f3e8d6 45%, transparent); }

/* The segmented control as links. The design draws Manage as one screen
   with radio tabs; the app serves the two halves as separate routes, so
   the tabs navigate instead of toggling. Same appearance, no JS, and
   each tab keeps its own URL. */
.seg a.seg-opt { text-decoration: none; color: inherit; }
.seg a.seg-opt[aria-current='page'] { background: var(--color-accent); color: var(--color-bg); }
.seg a.seg-opt:not([aria-current='page']):hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

/* Wide tables scroll inside their own box. Without this the six-column
   activity tables push the whole page sideways on a phone, which makes
   every other page scroll horizontally too. */
.table-scroll { overflow-x: auto; }
.table-scroll > .table { min-width: 520px; }

/* "In development" placeholder, for a feature that is built but not yet
   switched on. */
.dev-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(44px, 7vw, 84px); line-height: 1;
  letter-spacing: -0.02em; max-width: 14ch;
  margin: 0 0 var(--space-3);
}
@keyframes pnc-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.dev-cursor { color: var(--color-accent); animation: pnc-blink 1.1s step-end infinite; }

/* A cursor that blinks forever is exactly what WCAG 2.2.2 is about, and
   blinking is a migraine and vestibular trigger for some people. Honour
   the OS setting: the underscore still reads as a caret standing still. */
@media (prefers-reduced-motion: reduce) {
  .dev-cursor { animation: none; }
}

/* The three cells reuse .stat-grid.bounded for their rules and their
   mobile collapse; only the taller padding and the cell type differ. */
.stat-grid.dev-grid .stat { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.dev-icon { display: block; margin-bottom: var(--space-3); }
.dev-cell-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.dev-cell-note { font-size: 13px; opacity: 0.6; margin-top: var(--space-1); }

/* Error pages. The oversized numeral is the whole idea: the code is the
   headline, the explanation sits under a rule beneath it. */
.error-code {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(96px, 18vw, 220px); line-height: 0.9;
  letter-spacing: -0.02em;
}
.error-code-accent { color: var(--color-accent); }
.error-panel {
  border-top: 2px solid var(--color-divider);
  margin-top: var(--space-6); padding-top: var(--space-4);
  max-width: 560px;
}
.error-panel h1 { font-size: 28px; margin: 0 0 var(--space-2); }
.error-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* The 500 runs red to the edges, so it carries its own copies of the few
   things it needs rather than inheriting the light theme. It is also
   standalone rather than extending base.html: see the errorhandler in
   routes.py for why a 500 page must not touch the database. */
.error-500 {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-body);
}
.error-500 .error-500-nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.error-500 .error-500-inner {
  flex: 1; width: 100%; max-width: 1060px; margin: 0 auto;
  padding: var(--space-8) var(--space-4); box-sizing: border-box;
}
.error-500 .error-panel { border-top-color: rgba(255, 255, 255, 0.4); }
.error-500 .error-panel h1 { color: #fff; }
.error-500 .kicker { opacity: 0.8; }
.error-500 .error-lede { max-width: 48ch; opacity: 0.9; margin: 0 0 var(--space-4); }
.error-500-btn {
  display: inline-block; background: #fff; color: var(--color-accent-700);
  padding: var(--space-2) var(--space-4); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.error-500-btn:hover { background: var(--color-accent-100); }

/* Site footer. Sits at the end of the document rather than pinned to the
   viewport: on a long leaderboard a fixed bar would eat a table row on
   every scroll, and the attribution is not worth that. */
.site-footer {
  border-top: 2px solid var(--color-divider);
  margin-top: var(--space-8);
  padding: var(--space-4);
}
.site-footer-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer-sep { opacity: 0.5; }

.flashes { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.flashes li {
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-100);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  font-size: 14px;
}

@media (max-width: 720px) {
  .stat-grid, .stat-grid.cols-4 { grid-template-columns: 1fr; }
  .stat, .stat:first-child { padding-left: 0; }
  .stat + .stat { border-left: 0; border-top: 2px solid var(--color-divider); }
  .poster-title { font-size: 34px; }
  h1 { font-size: 32px; }
  .nav { flex-wrap: wrap; gap: var(--space-3); }
}