/* ============================================================
   WLTD Entertainment — /news/
   Self-contained on purpose. It deliberately does NOT link the SPA's
   /assets/site-<hash>.css: that file is content-hashed and immutable, so
   depending on it would break every article the next time the homepage
   is rebuilt. Tokens below are copied from the site's design system so
   the section reads as native; keep them in sync by hand if they change.
   Served from /news/, which Caddy sends no-cache — edits are live on
   the next reload, no rehashing.
   ============================================================ */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-400-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:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-400-latin-ext.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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-400-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-400-latin-ext.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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-500-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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-700-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400-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}

:root {
  --wltd-ink: #0A0A0A;
  --wltd-white: #FFFFFF;
  --wltd-signal: #E10600;
  --wltd-signal-pressed: #C8102E;

  --surface-0: #FFFFFF;
  --surface-2: #EFF3F7;
  --text-primary: #0A0A0A;
  --text-secondary: #4D5662;
  --text-muted: #8892A0;
  --border: #DBE1E8;
  --border-strong: #C9D1DA;
  --accent: var(--wltd-signal);
  --on-accent: #FFFFFF;
  --accent-wash: rgba(225, 6, 0, 0.07);
  --focus-ring: var(--wltd-signal);

  --ink-text: #F1F4F8;
  --ink-dim: #8892A0;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-text: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-body: 15px;
  --text-sm: 13px;
  --text-xs: 12px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --tracking-display: -0.01em;
  --tracking-caps: 0.06em;
  --radius-control: 6px;
  --radius-card: 12px;
  --gutter: clamp(16px, 3cqi, 32px);
  --dur-fast: 120ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* prose measure — long-form only; the SPA has no equivalent */
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-primary); text-decoration: none; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.page { container-type: inline-size; display: flex; flex-direction: column; min-height: 100vh; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--wltd-ink); color: var(--ink-text);
  padding: 10px 14px; border-radius: var(--radius-control); font-size: var(--text-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 8px; color: var(--ink-text); }

/* ── header ─────────────────────────────────────────────── */
.site-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-0);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { height: 22px; width: auto; display: block; }
.wltd-wordmark { font-family: var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.brand .wltd-wordmark { font-size: 19px; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: clamp(10px, 2cqi, 26px); margin-left: clamp(4px, 2cqi, 28px); }
.site-nav a { font-size: 14px; font-weight: var(--weight-medium); white-space: nowrap; }
.site-nav a[aria-current] { color: var(--accent); }

/* ── layout ─────────────────────────────────────────────── */
.wrap {
  flex: 1 0 auto;
  width: 100%;
  padding: clamp(32px, 6cqi, 72px) var(--gutter) clamp(48px, 8cqi, 96px);
}
.wltd-display { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); font-weight: 400; }

/* ── index ──────────────────────────────────────────────── */
.index__head { max-width: var(--measure); margin: 0 auto clamp(28px, 4cqi, 44px); }
.index__title { margin: 0; font-size: clamp(38px, 8cqi, 84px); text-transform: uppercase; }
.index__standfirst { margin: 12px 0 0; color: var(--text-secondary); font-size: clamp(15px, 1.6cqi, 18px); }

.cards { list-style: none; margin: 0 auto; padding: 0; max-width: var(--measure); display: flex; flex-direction: column; }
.card { border-top: 1px solid var(--border); }
.card:last-child { border-bottom: 1px solid var(--border); }
.card__link { display: block; padding: clamp(20px, 3cqi, 30px) 0; }
.card__link:hover { color: inherit; }
.card__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.card__title { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--leading-snug); font-weight: 400; font-size: clamp(22px, 3.2cqi, 32px); margin: 8px 0 0; transition: color var(--dur-fast) var(--ease-out); }
.card__link:hover .card__title { color: var(--accent); }
.card__standfirst { margin: 8px 0 0; color: var(--text-secondary); }
.cards__empty { border-top: 1px solid var(--border); padding: 32px 0; color: var(--text-muted); }

/* ── article ────────────────────────────────────────────── */
.entry { max-width: var(--measure); margin: 0 auto; }
.crumb { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: clamp(20px, 3cqi, 32px); }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--accent); }

.entry__head { margin-bottom: clamp(28px, 4cqi, 44px); }
.entry__title { margin: 0; font-size: clamp(30px, 5.6cqi, 58px); }
.entry__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.entry__author { color: var(--text-secondary); }
.entry__standfirst { margin: 16px 0 0; font-size: clamp(16px, 1.8cqi, 19px); line-height: 1.45; color: var(--text-secondary); }

/* ── prose ──────────────────────────────────────────────── */
.prose { font-size: clamp(16px, 1.7cqi, 18px); line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: var(--leading-snug); font-size: clamp(22px, 3.2cqi, 30px); margin: 2em 0 .6em; }
.prose h3 { font-size: clamp(17px, 2cqi, 20px); font-weight: var(--weight-bold); margin: 1.8em 0 .5em; }
.prose h4, .prose h5, .prose h6 { font-size: 1em; font-weight: var(--weight-bold); margin: 1.6em 0 .4em; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: var(--weight-bold); }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin: 0 0 .4em; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--text-secondary); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); padding: 2px 5px; border-radius: 4px; }
.prose pre { background: var(--surface-2); padding: 16px 18px; border-radius: var(--radius-card); overflow-x: auto; margin: 1.6em 0; }
.prose pre code { background: none; padding: 0; font-size: var(--text-sm); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
.prose img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-card); margin: 1.6em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--text-sm); }

.entry__foot { max-width: var(--measure); margin: clamp(40px, 6cqi, 72px) auto 0; padding-top: 24px; border-top: 1px solid var(--border); }
.back { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.back:hover { color: var(--accent); }

/* ── footer ─────────────────────────────────────────────── */
.site-footer { flex: none; background: var(--wltd-ink); color: var(--ink-dim); padding: clamp(28px, 4cqi, 44px) var(--gutter); }
.footer-end { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--ink-text); }
.footer-links a:hover { color: var(--accent); }
.footer-copy { font-size: 14px; color: var(--ink-dim); }

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

/* ── entity page additions (profiles, releases, videos, organisation) ──
   The facts grid is deliberately a two-column definition list rather than a
   table: it reads as key/value prose to a language model, and as a spec sheet
   to a person, without either needing the other's markup. */
.entry { max-width: var(--measure); margin: 0 auto; }
.entry__meta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
}

.facts {
  display: grid; grid-template-columns: minmax(96px, 22%) 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; margin: clamp(24px, 3cqi, 32px) 0;
}
.facts__k, .facts__v { background: var(--surface-0); padding: 11px 14px; font-size: var(--text-sm); }
.facts__k {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.facts__v { color: var(--text-primary); }
.facts__v code { font-family: var(--font-mono); font-size: .92em; }
.facts__v a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.video-card {
  display: block; position: relative; margin: clamp(24px, 3cqi, 32px) 0;
  border-radius: var(--radius-card); overflow: hidden; background: var(--wltd-ink);
  line-height: 0;
}
.video-card img { width: 100%; height: auto; display: block; opacity: .92; transition: opacity var(--dur-fast) var(--ease-out); }
.video-card:hover img { opacity: 1; }
.video-card__label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-text); background: rgba(10, 10, 10, .72);
  padding: 7px 11px; border-radius: var(--radius-control); line-height: 1;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(20px, 3cqi, 28px) 0; }
.chip {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  padding: 7px 11px; color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts__k { padding-bottom: 0; background: var(--surface-0); }
}