/* fonts.css — local @font-face rules replacing organic.css's Google Fonts
   @import (stripped at build time: the site's CSP is `default-src 'self'`
   with no font-src exception, so the remote @import would be dead on
   arrival). Fonts are copied to dist/assets/fonts/ alongside the
   concatenated dist/styles.css, so paths here are relative to dist/. */

@font-face {
  font-family: "Caprasimo";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/caprasimo-400.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  src:
    url("assets/fonts/figtree-var.woff2") format("woff2-variations"),
    url("assets/fonts/figtree-var.woff2") format("woff2");
}

/* Permanent Marker — the WORDMARK face only ("Escaped Creation" in the header
   and footer lockups). Chosen over Rubik Dirt and Caveat Brush by rendering all
   three against the channel's watermark: it alone has the slant and the
   tapering brush strokes of the original drybrush lettering, and it is 29KB
   against Rubik Dirt's 310KB.

   Deliberately NOT applied to headings. It is a display face — across 30
   release pages with multilingual titles it would wreck legibility. Caprasimo
   remains the heading face. */
@font-face {
  font-family: "Permanent Marker";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/permanent-marker.woff2") format("woff2");
}

/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, 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: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* 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, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 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); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   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: 1px; 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); }

/* — 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; }
.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 — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — 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: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.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); }

/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }

/* theme-dark.css — dark band for the light-only Organic system in
   design/organic.css (vendored, never edited directly).

   Model: each tonal ramp is REVERSED while every token name stays
   identical (dark -100 takes the light band's -900 value, -200 takes
   -800, … -900 takes -100). The component layer in organic.css hard-codes
   ramp steps (e.g. .tag-accent uses -100/-800, .btn-primary:hover uses
   -600), so reversal makes every one of those rules correct on a dark
   ground automatically, with zero changes to component CSS.

   Applied twice with an identical declaration body: prefers-color-scheme
   drives the default, and an explicit [data-theme] attribute wins in
   both directions. */

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1512;
    --color-surface: #241d18;
    --color-text: #f5ead8;
    --color-accent: #e08a4d;
    --color-accent-2: #aebf92;
    --color-divider: color-mix(in srgb, #f5ead8 18%, transparent);

    --color-neutral-100: #2e2b25;
    --color-neutral-200: #474238;
    --color-neutral-300: #645c50;
    --color-neutral-400: #82796a;
    --color-neutral-500: #a19786;
    --color-neutral-600: #c0b6a5;
    --color-neutral-700: #dcd3c4;
    --color-neutral-800: #eee7db;
    --color-neutral-900: #f9f4ed;

    --color-accent-100: #402310;
    --color-accent-200: #643312;
    --color-accent-300: #8c491a;
    --color-accent-400: #b2622d;
    --color-accent-500: #d67f48;
    --color-accent-600: #f6a06b;
    --color-accent-700: #ffc6a5;
    --color-accent-800: #ffe1d0;
    --color-accent-900: #fff2eb;

    --color-accent-2-100: #272e1b;
    --color-accent-2-200: #3d472b;
    --color-accent-2-300: #56633f;
    --color-accent-2-400: #728157;
    --color-accent-2-500: #8fa073;
    --color-accent-2-600: #aebf92;
    --color-accent-2-700: #ccdbb2;
    --color-accent-2-800: #e1eecc;
    --color-accent-2-900: #f0fae1;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #000 45%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #000 50%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #000 60%, transparent);
  }

  /* Reversal turns --color-neutral-900 into a near-white value, but
     .dialog-backdrop in organic.css assumes it's a near-black scrim
     color. Restore a black scrim explicitly, scoped to the dark band. */
  :root:not([data-theme="light"]) .dialog-backdrop {
    background: color-mix(in srgb, #000 62%, transparent);
  }
}

:root[data-theme="dark"] {
  --color-bg: #1a1512;
  --color-surface: #241d18;
  --color-text: #f5ead8;
  --color-accent: #e08a4d;
  --color-accent-2: #aebf92;
  --color-divider: color-mix(in srgb, #f5ead8 18%, transparent);

  --color-neutral-100: #2e2b25;
  --color-neutral-200: #474238;
  --color-neutral-300: #645c50;
  --color-neutral-400: #82796a;
  --color-neutral-500: #a19786;
  --color-neutral-600: #c0b6a5;
  --color-neutral-700: #dcd3c4;
  --color-neutral-800: #eee7db;
  --color-neutral-900: #f9f4ed;

  --color-accent-100: #402310;
  --color-accent-200: #643312;
  --color-accent-300: #8c491a;
  --color-accent-400: #b2622d;
  --color-accent-500: #d67f48;
  --color-accent-600: #f6a06b;
  --color-accent-700: #ffc6a5;
  --color-accent-800: #ffe1d0;
  --color-accent-900: #fff2eb;

  --color-accent-2-100: #272e1b;
  --color-accent-2-200: #3d472b;
  --color-accent-2-300: #56633f;
  --color-accent-2-400: #728157;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #aebf92;
  --color-accent-2-700: #ccdbb2;
  --color-accent-2-800: #e1eecc;
  --color-accent-2-900: #f0fae1;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 45%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000 50%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000 60%, transparent);
}

:root[data-theme="dark"] .dialog-backdrop {
  background: color-mix(in srgb, #000 62%, transparent);
}

/* site.css — layout layer for Escaped Creation.
   Sits on top of design/organic.css (components + tokens) and
   src/theme-dark.css (dark band). Page scaffolding, grids, hero, cards,
   filter bar, embed facade, footer, responsive behaviour. Colour, type,
   spacing, radius and shadow values are pulled from tokens only — never
   hard-coded — so the dark band keeps working for free. */

html {
  scroll-behavior: smooth;
}
:root { --color-action-text: var(--color-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --color-action-text: var(--color-bg); }
}
:root[data-theme="dark"] { --color-action-text: var(--color-bg); }

/* The vendored accent is a strong fill but too light for small text on the
   cream band. The reversed -800 ramp gives readable ink in both themes. */
a { color: var(--color-accent-800); }
.btn-primary,
.chip.chip-active,
.embed-facade .embed-play { color: var(--color-action-text); }
.btn-primary:hover,
.btn-primary:active { background: var(--color-accent-500); }
.btn-ghost,
.card-kicker { color: var(--color-accent-800); }
.card-meta { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* Decorative circles (the hero blob) are allowed to bleed past the
     right edge; this keeps that from ever producing horizontal scroll. */
  overflow-x: clip;
}

/* ── layout primitives ─────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-8);
}
/* Sections part on whitespace alone — the system explicitly avoids .hr. */
.section + .section {
  padding-top: 0;
}

.section-heading {
  margin-bottom: var(--space-4);
}
.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.section-title-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-1);
  color: var(--color-accent-800);
  text-decoration: none;
}
.section-title-row a:hover,
.section-title-row a:focus-visible { text-decoration: underline; }

.page-intro-copy {
  max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* ── header / nav ──────────────────────────────────────────────────────── */

.site-header {
  padding-block: var(--space-2);
}
.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
}
main:focus { outline: none; }
.site-header .nav {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"] { color: var(--color-accent-800); }
/* The links are grouped so that when the bar runs out of room they move as a
   set. Left as individual flex children they wrap one at a time and strand the
   theme toggle alone on a second row, which reads as a bug rather than a
   layout. */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  /* Brand and toggle hold the first row; the whole link set takes the second. */
  .nav-links {
    order: 3;
    flex-basis: 100%;
  }
}

.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* ── reveal-on-scroll ──────────────────────────────────────────────────── *
 * Progressive enhancement: without the "js" class (main.js not running,
 * or JS disabled) everything is fully visible immediately — the site
 * must be complete with JavaScript off. Only once main.js has run does
 * .reveal start hidden and wait for .is-visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: clip;
  padding-block: var(--space-8) var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -14%;
  width: 48%;
  aspect-ratio: 1;
  min-width: 320px;
  border-radius: 50%;
  /* Mixed against the ground rather than taken from a fixed ramp step.
     The dark band reverses each ramp, which preserves the relationship
     between steps but NOT a step's relationship to --color-bg (the ground is
     not itself a ramp step). A fixed accent-2-200 whispers against the cream
     ground and then lands as a solid mid-sage disc against the dark one,
     fighting the headline. Mixing into the ground keeps it a whisper in both
     bands. */
  background: color-mix(in srgb, var(--color-accent-2) 14%, var(--color-bg));
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-6);
}
.hero-copy {
  max-width: 620px;
}
.hero-kicker {
  margin-bottom: var(--space-3);
}
.hero-headline {
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.08;
}
.hero-headline-line {
  display: block;
}
.hero-intro {
  font-size: 17px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.hero-art {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.25deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-art:hover,
.hero-art:focus-visible {
  transform: rotate(0);
}
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero-art-caption {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}
.hero-art-eyebrow {
  display: flex;
  justify-content: space-between;
  color: var(--color-accent-800);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-art-caption strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-heading);
  line-height: 1.25;
}
@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-art { transform: none; }
  .hero-headline { font-size: clamp(36px, 8vw, 54px); }
}

/* ── first paths into the catalogue ──────────────────────────────────── */

.home-browse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.home-browse-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-content: start;
  min-height: 132px;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.home-browse-card:hover,
.home-browse-card:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.home-browse-name {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.2;
}
.home-browse-description {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: 14px;
}
.home-browse-arrow { color: var(--color-accent-800); }
@media (max-width: 760px) {
  .home-browse-grid { grid-template-columns: 1fr; }
  .home-browse-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-art:hover,
  .hero-art:focus-visible,
  .home-browse-card,
  .home-browse-card:hover,
  .home-browse-card:focus-visible {
    transform: none;
    transition: none;
  }
}

/* ── grids ─────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── video card ────────────────────────────────────────────────────────── */

.video-card-media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.video-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
picture[data-thumbnail] { display: block; }
.video-card-media picture,
.popular-lead-media picture,
.embed-facade picture { width: 100%; height: 100%; }
.video-card .card-title a {
  color: inherit;
  text-decoration: none;
}
.video-card .card-title a:hover,
.video-card .card-title a:focus-visible {
  color: var(--color-accent-800);
}
.card-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── about teaser / listen strip ──────────────────────────────────────── */

.about-teaser-inner,
.listen-strip-inner {
  max-width: 640px;
}
.about-teaser-copy {
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.listen-strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ── releases archive + filter ────────────────────────────────────────── */

.filter-bar {
  margin-bottom: var(--space-4);
  max-width: 420px;
}
.filter-bar .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filter-summary {
  margin-top: var(--space-2);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.video-card[hidden] {
  display: none;
}

/* ── release page ──────────────────────────────────────────────────────── */

.release-page-inner {
  max-width: 800px;
}
.release-header {
  margin-top: var(--space-4);
}
.release-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.release-eyebrow a { color: inherit; }
.release-meta {
  margin-top: var(--space-1);
}
.release-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-4);
}
.release-description {
  white-space: pre-line;
  max-width: 68ch;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.release-lead {
  max-width: 62ch;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}
.release-notes {
  max-width: 68ch;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-3);
}
.release-notes summary {
  width: fit-content;
  color: var(--color-accent-800);
  cursor: pointer;
}
.release-notes[open] .release-description { margin-top: var(--space-3); }
.release-clips {
  margin-top: var(--space-6);
}
.release-clips h2 { margin-bottom: var(--space-3); }
.release-clips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.release-clip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.release-clip:hover,
.release-clip:focus-visible { border-color: var(--color-accent); }
.release-clip img {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.release-clip-arrow { color: var(--color-accent-800); }
@media (max-width: 600px) {
  .release-clips-grid { grid-template-columns: 1fr; }
}
.release-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* ── embed facade ──────────────────────────────────────────────────────── */

.embed-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: var(--color-surface);
}
.embed-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.embed-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transition: background 0.2s ease, transform 0.2s ease;
}
.embed-facade:hover .embed-play {
  background: var(--color-accent-600);
  transform: scale(1.05);
}
.embed-play:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── listen page ───────────────────────────────────────────────────────── */

.listen-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.listen-card .btn {
  margin-top: var(--space-2);
}

/* ── about page ────────────────────────────────────────────────────────── */

.about-body {
  max-width: 68ch;
}

/* ── footer ────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-surface);
  padding-block: var(--space-8);
  margin-top: var(--space-8);
}
.site-footer-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.site-footer-brand {
  font-size: 20px;
  margin-bottom: var(--space-1);
}
.site-footer-note {
  max-width: 48ch;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
}
.site-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--color-accent-800);
}
.site-footer-copy {
  font-size: 12px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* ── chip rail (collections) ──────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-size: 14px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover,
.chip:focus-visible {
  border-color: var(--color-accent);
}
.chip-active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: transparent;
}
.chip-active:hover,
.chip-active:focus-visible {
  border-color: transparent;
}
.chip-count {
  font-size: 11px;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.chip-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.chip-row[data-axis="all"] {
  margin-bottom: var(--space-1);
}
.chip-row-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  flex: none;
}
.chip-row-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 560px) {
  /* Chips are the widest interactive element on the page at this width, so a
     wrapped row reads as clutter; scroll the row instead and hint that there
     is more with a fade rather than a hard edge. */
  .chip-row {
    position: relative;
    /* The label sits above its own track, so the row stacks. Leaving this a
       nowrap row and giving the label a full-width basis would push the
       track off the edge at zero width, taking the chips with it. */
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    /* nowrap matters as much as the column direction: a wrapping column sizes
       each line to its own content, so the track would stretch to the full
       width of the chips instead of the screen, and the page would scroll
       sideways rather than the track. */
    flex-wrap: nowrap;
    min-width: 0;
  }
  .chip-row-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  .chip-row-track::-webkit-scrollbar {
    display: none;
  }
  /* The fade hints that the track scrolls, so it covers the track band only —
     the row is taller than the track now that the label stacks above it. */
  .chip-row::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 44px;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--color-bg));
  }
}

.rail-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  margin-bottom: var(--space-4);
}
.rail-result #rail-result-clear {
  color: var(--color-accent-800);
}

.card-kicker-also {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.rail-siblings {
  margin-top: var(--space-6);
}
.rail-siblings-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-bottom: var(--space-2);
}
.rail-siblings-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rail-siblings-list a {
  color: var(--color-accent-800);
  text-decoration: none;
}
.rail-siblings-list a:hover,
.rail-siblings-list a:focus-visible {
  text-decoration: underline;
}

/* ── collections index ────────────────────────────────────────────────── */

.collection-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.collection-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fewer than four members: fill the frame rather than leaving empty cells.
   One fills it, two split it down the middle, three give the newest the
   full-height left half. Four or more use the 2x2 above. */
.collection-mosaic.mosaic-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.collection-mosaic.mosaic-2 {
  grid-template-rows: 1fr;
}
.collection-mosaic.mosaic-3 img:first-child {
  grid-row: span 2;
}

/* ── most played band ─────────────────────────────────────────────────── */

.popular-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 760px) {
  .popular-band-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.popular-lead {
  text-decoration: none;
  color: inherit;
  padding: var(--space-4);
  min-width: 0;
}
.popular-lead-media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.popular-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.popular-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-800);
  margin: 0;
}
.popular-lead .card-title {
  margin: 0;
}
.popular-rows {
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.popular-row > a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}
.popular-row > a:hover,
.popular-row > a:focus-visible {
  background: var(--color-surface);
}
.popular-rank {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  flex: none;
  width: 1.4em;
}
.popular-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .popular-row > a { gap: var(--space-2); }
  .popular-row .popular-bar-track { display: none; }
}
.popular-count {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  flex: none;
}
.popular-bar-track {
  display: block;
  /* The bar is what makes the ranking readable at a glance, so it takes a
     real share of the row and grows with the column rather than sitting at a
     fixed width. It shrinks before the title does on a narrow screen. */
  flex: 0 1 180px;
  min-width: 56px;
}
.popular-lead .popular-bar-track {
  width: 100%;
  flex: none;
}
.popular-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent-700);
}

/* Fixed width ladder for the popular-band proportional bars: the CSP's
   style-src 'self' blocks inline style="width:…" attributes, so the build
   picks the nearest 5% step and hands over a class name instead. */
.bar-w5 { width: 5%; }
.bar-w10 { width: 10%; }
.bar-w15 { width: 15%; }
.bar-w20 { width: 20%; }
.bar-w25 { width: 25%; }
.bar-w30 { width: 30%; }
.bar-w35 { width: 35%; }
.bar-w40 { width: 40%; }
.bar-w45 { width: 45%; }
.bar-w50 { width: 50%; }
.bar-w55 { width: 55%; }
.bar-w60 { width: 60%; }
.bar-w65 { width: 65%; }
.bar-w70 { width: 70%; }
.bar-w75 { width: 75%; }
.bar-w80 { width: 80%; }
.bar-w85 { width: 85%; }
.bar-w90 { width: 90%; }
.bar-w95 { width: 95%; }
.bar-w100 { width: 100%; }

/* ── not found ─────────────────────────────────────────────────────────── */

.not-found {
  max-width: 640px;
}

/* ── brand lockup ──────────────────────────────────────────────────────────
   The watermark-derived EC/headphone mark and its uppercase brush wordmark,
   used identically in the header and footer. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  /* Sized in em so the mark tracks the wordmark wherever the lockup is used,
     rather than needing a separate rule per context. */
}
.wordmark {
  font-family: "Permanent Marker", var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: uppercase;
  /* Permanent Marker sits high in its em box; nudge it back onto the mark's
     optical centre. */
  transform: translateY(0.04em);
}
.platform-group-title {
  font-size: 25px;
  margin-bottom: var(--space-1);
}
.platform-group-blurb {
  margin-bottom: var(--space-4);
  max-width: 52ch;
}
.contact-card {
  max-width: 34rem;
}
.contact-card .card-title {
  /* An address is data, not a headline — keep it in the body face so it stays
     readable and selectable rather than styled as a display line. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  word-break: break-word;
}

/* organic.css sets `.nav a { font-size: 14px }` (specificity 0,1,1) which beats
   its own `.nav-brand { font-size: 18px }` (0,1,0), so the brand was rendering
   at link size and reading as just another nav item. Restore the hierarchy. */
.site-header .nav a.nav-brand {
  font-size: 19px;
}
.site-footer-brand {
  font-size: 19px;
}