@charset "UTF-8";
/* ==========================================================================
   POTHEAD GANG — WEBSITE VISUAL SYSTEM
   Implements POTHEAD_GANG_Website_Visual_Design_System_v3.md

   00  FONTS
   01  TOKENS
   02  RESET + BASE
   03  SURFACES  (light / dark / campaign inversion)
   04  TYPOGRAPHY ROLES
   05  LAYOUT PRIMITIVES
   06  EDITORIAL LABEL / BRACKETED METADATA / STATUS
   07  ACTIONS  (buttons, text CTAs, links)
   08  MEDIA  (photo artifact, plates, sequences, captions)
   09  HEADER + MOBILE EDITORIAL MENU
   10  HERO IMAGE STAGE
   11  EDITORIAL COMPONENTS
   12  PROGRAM COMPONENTS
   13  NEWS / ARTICLE
   14  PARTNERS
   15  EVENTS / ARCHIVE / EMPTY STATES
   16  FORMS
   17  FOOTER
   18  MOTION
   19  RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* ==========================================================================
   00  FONTS
   Licensed desktop files converted by tools/make_webfonts.py.
   RAWNER CREATES THE INTERRUPTION. REFINDER CREATES THE ORDER.
   ========================================================================== */
/* @font-face rules are injected by the build from the files that actually
   exist in assets/fonts/ — see build.py:font_face_css(). */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  /* ---- CORE IDENTITY ---- */
  --phg-asphalt: #101010;
  --phg-smoke: #F1EBDD;
  --phg-kush: #28D45C;

  /* ---- CAMPAIGN LAYER (activated, never wallpaper) ---- */
  --phg-fire: #FF5A1F;
  --phg-haze: #7B3FF2;

  /* ---- UTILITY LAYER ---- */
  --phg-concrete: #8B8B83;
  /* Concrete fails AA as small text on Smoke Cream (2.9:1).
     This is the tested light-surface metadata ink (5.5:1). */
  --phg-concrete-ink: #5E5E56;
  --phg-asphalt-raise: #171716;
  --phg-smoke-recess: #E7E0D0;

  /* ---- SURFACE ROLES — rebound by section classes in §03 ---- */
  --surface: var(--phg-asphalt);
  --surface-raise: var(--phg-asphalt-raise);
  --ink: var(--phg-smoke);
  --ink-quiet: var(--phg-concrete);
  --rule: rgba(241, 235, 221, 0.16);
  --rule-strong: rgba(241, 235, 221, 0.42);
  --accent: var(--phg-kush);
  --accent-ink: var(--phg-asphalt);
  --selection: var(--phg-kush);
  --selection-ink: var(--phg-asphalt);

  /* ---- TYPEFACES ---- */
  --font-display: "Rawner", "Oswald", "Haettenschweiler", "Arial Narrow",
    "HelveticaNeue-CondensedBold", sans-serif;
  --font-body: "Refinder", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- DISPLAY SIZES (Rawner) ---- */
  --display-xl: clamp(4rem, 12vw, 13.75rem);
  --display-l: clamp(3.25rem, 9vw, 10.5rem);
  --display-m: clamp(2.75rem, 7vw, 8rem);
  --h1: clamp(2.75rem, 6vw, 6.5rem);
  --h2: clamp(2.125rem, 4.4vw, 4.5rem);

  /* ---- FUNCTIONAL SIZES (Refinder) ---- */
  --h3: clamp(1.625rem, 2.4vw, 2.875rem);
  --h4: clamp(1.25rem, 1.5vw, 2rem);
  --lead: clamp(1.1875rem, 1.45vw, 1.75rem);
  --body: clamp(1rem, 1.1vw, 1.25rem);
  --small: clamp(0.9375rem, 1vw, 1.0625rem);
  --meta: clamp(0.8125rem, 0.85vw, 1rem);
  --meta-xs: clamp(0.6875rem, 0.72vw, 0.8125rem);
  --nav: clamp(0.875rem, 0.95vw, 1.0625rem);

  /* ---- LEADING ---- */
  --leading-display: 0.86;
  --leading-display-loose: 0.95;
  --leading-h3: 1.12;
  --leading-lead: 1.45;
  --leading-body: 1.58;
  --leading-meta: 1.4;

  /* ---- TRACKING ---- */
  --track-display: -0.02em;
  --track-display-tight: -0.03em;
  --track-meta: 0.14em;
  --track-nav: 0.1em;
  --track-label: 0.18em;

  /* ---- SPACE ---- */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --space-4xl: clamp(6rem, 11vw, 11.25rem);
  --space-3xl: clamp(4.5rem, 8vw, 8rem);
  --space-2xl: clamp(3.5rem, 6vw, 6rem);
  --space-xl: clamp(2.5rem, 4vw, 4rem);
  --space-l: clamp(1.75rem, 2.6vw, 2.5rem);
  --space-m: 1.25rem;
  --space-s: 0.75rem;
  --space-xs: 0.4rem;

  /* ---- MEASURE ---- */
  --max-page: 1440px;
  --measure-read: 68ch;
  --measure-wide: 900px;
  --measure-lead: 30ch;

  /* ---- SHAPE ---- */
  --radius-ui: 3px;
  --radius-tag: 2px;
  --radius-card: 4px;
  --radius-image: 6px;
  --radius-pill: 999px;
  --border-hair: 1px;
  --border-heavy: 2px;

  /* ---- MOTION ---- */
  --ease-editorial: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-cut: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;
  --dur-cinematic: 1400ms;

  /* ---- LAYERS ---- */
  --z-base: 0;
  --z-media: 1;
  --z-content: 2;
  --z-sticky: 50;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;

  /* ---- TEXTURE ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- BREAKPOINTS (documented; media queries use these values) ----
   xs  320px   sm  375px   ms  430px
   md  768px   lg 1024px   xl 1280px   2xl 1440px   3xl 1800px
------------------------------------------------------------------ */

/* ==========================================================================
   02  RESET + BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Display type is allowed to crop against the viewport edge; the document
     itself must never scroll sideways. Cropping is done per-component with
     overflow:clip, not by hiding page-level overflow. */
}

body {
  margin: 0;
  background: var(--phg-asphalt);
  color: var(--phg-smoke);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}
ul, ol { padding: 0; list-style: none; }

img, svg, video {
  display: block;
  max-width: 100%;
}
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

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

/* Visible focus is part of the design, not an afterthought. */
:focus-visible {
  outline: 2px solid var(--phg-kush);
  outline-offset: 3px;
  border-radius: 1px;
}
.s-light :focus-visible { outline-color: var(--phg-asphalt); }

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: 0;
  z-index: var(--z-skip);
  transform: translateY(-120%);
  background: var(--phg-kush);
  color: var(--phg-asphalt);
  font-weight: 600;
  font-size: var(--meta);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  padding: 0.9rem 1.25rem;
  border-radius: 0 0 var(--radius-ui) var(--radius-ui);
  transition: transform var(--dur-fast) var(--ease-cut);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03  SURFACES — dark-first, not dark-only
   The switch to Smoke Cream should feel like opening a printed page.
   ========================================================================== */
.s-dark,
.s-light,
.s-campaign-fire,
.s-campaign-haze {
  background: var(--surface);
  color: var(--ink);
}

.s-dark {
  --surface: var(--phg-asphalt);
  --surface-raise: var(--phg-asphalt-raise);
  --ink: var(--phg-smoke);
  --ink-quiet: var(--phg-concrete);
  --rule: rgba(241, 235, 221, 0.16);
  --rule-strong: rgba(241, 235, 221, 0.42);
  --accent: var(--phg-kush);
  --accent-ink: var(--phg-asphalt);
}

.s-light {
  --surface: var(--phg-smoke);
  --surface-raise: var(--phg-smoke-recess);
  --ink: var(--phg-asphalt);
  --ink-quiet: var(--phg-concrete-ink);
  --rule: rgba(16, 16, 16, 0.16);
  --rule-strong: rgba(16, 16, 16, 0.5);
  /* Kush Green is 1.7:1 on Smoke Cream — never small text here.
     On light surfaces the accent survives as a FILL, a RULE or a MARK. */
  --accent: var(--phg-asphalt);
  --accent-ink: var(--phg-smoke);
  --accent-mark: var(--phg-kush);
}

.s-campaign-fire {
  --surface: var(--phg-fire);
  --surface-raise: #E64E17;
  --ink: var(--phg-asphalt);
  --ink-quiet: rgba(16, 16, 16, 0.72);
  --rule: rgba(16, 16, 16, 0.28);
  --rule-strong: rgba(16, 16, 16, 0.6);
  --accent: var(--phg-asphalt);
  --accent-ink: var(--phg-fire);
}

.s-campaign-haze {
  --surface: var(--phg-haze);
  --surface-raise: #6D34DC;
  --ink: var(--phg-smoke);
  --ink-quiet: rgba(241, 235, 221, 0.78);
  --rule: rgba(241, 235, 221, 0.3);
  --rule-strong: rgba(241, 235, 221, 0.6);
  --accent: var(--phg-smoke);
  --accent-ink: var(--phg-haze);
}

/* ---- THE KUSH TICK ----
   Every structural rule in the system opens with a short Kush segment: the
   registration mark of the archive layer. It is the one device that recurs
   everywhere, which is what makes Kush Green the chromatic shorthand for PHG
   without ever filling a surface with it. */
.index,
.principles,
.movements,
.pathways,
.ecosystem,
.interrupt,
.caption,
.rule-top,
.marquee {
  position: relative;
}
.index::before,
.principles::before,
.movements::before,
.pathways::before,
.ecosystem::before,
.interrupt::before,
.caption::before,
.rule-top::before,
.marquee::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(1.75rem, 3vw, 2.75rem);
  height: 2px;
  background: var(--phg-kush);
  pointer-events: none;
}
/* On a full-bleed section the tick starts at the page gutter, not the edge. */
.rule-top::before,
.interrupt::before { left: var(--gutter); }

/* A hairline where two sections of the same value meet. */
.rule-top { border-top: var(--border-hair) solid var(--rule); }
.rule-bottom { border-bottom: var(--border-hair) solid var(--rule); }

/* ==========================================================================
   04  TYPOGRAPHY ROLES
   ========================================================================== */

/* ---- RAWNER: interruption ---- */
.display-xl,
.display-l,
.display-m,
.display-h1,
.display-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  /* Rawner is a real condensed cut — never synthesise the condensing. */
  font-stretch: normal;
  text-wrap: balance;
}

.display-xl { font-size: var(--display-xl); letter-spacing: var(--track-display-tight); }
.display-l  { font-size: var(--display-l); letter-spacing: var(--track-display-tight); }
.display-m  { font-size: var(--display-m); }
.display-h1 { font-size: var(--h1); line-height: 0.94; }
.display-h2 { font-size: var(--h2); line-height: 0.98; }

/* Optical correction: POTHEAD / GANG / PHG set tighter than running display. */
.optical-phg { letter-spacing: -0.045em; }

/* Stacked display lines — the copy system supplies explicit line breaks. */
.display-stack { display: block; }
.display-stack > .line { display: block; }
.display-stack > .line--indent { padding-left: 0.12em; }

/* Outline treatment, used selectively (never as page wallpaper). */
.display-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  text-stroke: 1px var(--ink);
}

/* ---- REFINDER: order ---- */
.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--h3);
  line-height: var(--leading-h3);
  letter-spacing: -0.015em;
}
.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--lead);
  line-height: var(--leading-lead);
  letter-spacing: -0.005em;
  max-width: 30ch;
}
.lead--wide { max-width: 44ch; }

.prose {
  max-width: var(--measure-read);
  font-size: var(--body);
  line-height: var(--leading-body);
}
.prose > * + * { margin-top: 1.15em; }
.prose--wide { max-width: var(--measure-wide); }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }

/* A statement line inside prose — bold, its own air, still Refinder. */
.statement {
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.3vw, 1.4375rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 40ch;
}
.statement--accent { color: var(--accent); }
.s-light .statement--accent { color: var(--ink); }

/* Supporting display line — short, hard, all caps, still functional weight. */
.supporting {
  font-weight: 700;
  font-size: clamp(0.9375rem, 1.15vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 46ch;
}

.quiet { color: var(--ink-quiet); }
.accent-text { color: var(--accent); }

/* ==========================================================================
   05  LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--bleed { max-width: none; padding-inline: 0; }
.wrap--flush { padding-inline: var(--gutter); max-width: none; }

.section {
  padding-block: var(--space-3xl);
}
.section--tall { padding-block: var(--space-4xl); }
.section--compact { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Editorial grid: 12 columns on desktop, collapses to an editorial sequence. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-l) clamp(1rem, 2.4vw, 2.5rem);
}
.col-full { grid-column: 1 / -1; }
.col-1-5 { grid-column: 1 / 6; }
.col-1-6 { grid-column: 1 / 7; }
.col-1-7 { grid-column: 1 / 8; }
.col-1-8 { grid-column: 1 / 9; }
.col-2-8 { grid-column: 2 / 9; }
.col-3-11 { grid-column: 3 / 12; }
.col-4-13 { grid-column: 4 / -1; }
.col-5-13 { grid-column: 5 / -1; }
.col-6-13 { grid-column: 6 / -1; }
.col-7-13 { grid-column: 7 / -1; }
.col-8-13 { grid-column: 8 / -1; }
.col-9-13 { grid-column: 9 / -1; }

.stack > * + * { margin-top: var(--space-m); }
.stack-l > * + * { margin-top: var(--space-l); }
.stack-xl > * + * { margin-top: var(--space-xl); }
.stack-s > * + * { margin-top: var(--space-s); }

.flow-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
@media (min-width: 900px) {
  .flow-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 6rem);
  }
  .flow-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow-split--reverse > :first-child { order: 2; }
}

/* A deliberate crop frame — display type may run past its edge. */
.crop { overflow: clip; }

/* ==========================================================================
   06  EDITORIAL LABEL / BRACKETED METADATA / PROGRAM STATUS
   Pair tiny utility text with enormous Rawner. Metadata must mean something.
   ========================================================================== */
.label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.label--accent { color: var(--accent); }
.s-light .label--accent { color: var(--ink); }
.label--ink { color: var(--ink); }

/* Bracketed metadata: the brackets are real characters, not borders. */
.meta-bracket {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.meta-bracket::before { content: "["; color: var(--accent); }
.meta-bracket::after { content: "]"; color: var(--accent); }
.s-light .meta-bracket::before,
.s-light .meta-bracket::after { color: var(--phg-kush); }
.s-campaign-fire .meta-bracket::before,
.s-campaign-fire .meta-bracket::after,
.s-campaign-haze .meta-bracket::before,
.s-campaign-haze .meta-bracket::after { color: var(--ink); }

/* Metadata sitting directly on the page grid, no container. */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-s) clamp(1rem, 2.4vw, 2.25rem);
  font-size: var(--meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-quiet);
}
.meta-row dt { color: var(--ink-quiet); font-weight: 500; }
.meta-row dd { color: var(--ink); font-weight: 600; margin: 0; }
.meta-pair { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.meta-pair dt { font-size: var(--meta-xs); letter-spacing: var(--track-label); }

/* ---- PROGRAM STATUS ----
   Status is never communicated by colour alone: the word is always present,
   and ACTIVE additionally carries a filled dot, IN DEVELOPMENT a hollow one. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  line-height: 1;
  padding: 0.5em 0.85em 0.45em;
  border: var(--border-hair) solid currentColor;
  border-radius: var(--radius-pill); /* pills are reserved for status */
  color: var(--ink-quiet);
  width: fit-content;
  justify-self: start;
}
.status::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: none;
}
.status--active {
  color: var(--phg-kush);
}
.status--active::before {
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--phg-kush) 22%, transparent);
}
.s-light .status--active { color: #0B7A31; } /* AA-tested green on Smoke Cream */
.status--upcoming { color: var(--phg-fire); }
.status--upcoming::before { background: currentColor; }
.s-light .status--upcoming { color: #C23B08; }
.status--development { color: var(--ink-quiet); }
.status--future { color: var(--ink-quiet); border-style: dashed; }
.status--archive { color: var(--ink-quiet); }
.status--archive::before { border-radius: 0; }

/* Serial number set against the grid. */
.serial {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   07  ACTIONS
   Buttons feel like labels, not app controls.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  line-height: 1;
  padding: 1.05em 1.6em 0.95em;
  min-height: 48px;
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-ui);
  cursor: pointer;
  background: none;
  transition:
    background-color var(--dur-fast) var(--ease-cut),
    color var(--dur-fast) var(--ease-cut),
    border-color var(--dur-fast) var(--ease-cut),
    gap var(--dur-fast) var(--ease-cut);
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-editorial);
}
.btn:hover .arrow { transform: translateX(4px); }

/* Primary — inverted surface. */
.btn--primary {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.btn--primary:hover {
  background: transparent;
  color: var(--ink);
}

/* Kush — reserved for the high-priority live action. */
.btn--kush {
  background: var(--phg-kush);
  color: var(--phg-asphalt);
  border-color: var(--phg-kush);
}
.btn--kush:hover {
  background: transparent;
  color: var(--phg-kush);
}
.s-light .btn--kush:hover { color: #0B7A31; border-color: #0B7A31; }

/* Secondary — outline. */
.btn--ghost {
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

/* Campaign fills. */
.btn--fire { background: var(--phg-fire); color: var(--phg-asphalt); border-color: var(--phg-fire); }
.btn--fire:hover { background: transparent; color: var(--phg-fire); }
.btn--haze { background: var(--phg-haze); color: var(--phg-smoke); border-color: var(--phg-haze); }
.btn--haze:hover { background: transparent; color: var(--phg-haze); }
.s-light .btn--haze:hover { color: #5A26C2; border-color: #5A26C2; }

.btn[aria-disabled="true"],
.btn:disabled {
  color: var(--ink-quiet);
  border-color: var(--rule);
  background: none;
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover .arrow,
.btn:disabled:hover .arrow { transform: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
}

/* ---- TEXT CTA — the site's default forward motion ---- */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.65em;
  min-height: 44px;
  align-content: center;
  position: relative;
}
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3em;
  height: 1.5px;
  background: var(--phg-kush);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-editorial),
    background-color var(--dur-fast) var(--ease-cut);
}
.cta:hover { color: var(--phg-kush); }
.s-light .cta:hover { color: var(--ink); }
.cta:hover::after { transform: scaleX(1.03); }
.cta .arrow { transition: transform var(--dur-fast) var(--ease-editorial); }
.cta:hover .arrow { transform: translateX(4px); }

/* ---- INLINE LINK ---- */
.link {
  color: inherit;
  background-image: linear-gradient(var(--phg-kush), var(--phg-kush));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 0.08em;
  transition: background-size var(--dur-mid) var(--ease-editorial),
    color var(--dur-fast) var(--ease-cut);
}
.link:hover {
  background-size: 100% 2px;
  color: var(--phg-kush);
}
.s-light .link:hover { color: var(--ink); }

/* ==========================================================================
   08  MEDIA — PHOTO ARTIFACT, PLATES, SEQUENCES, CAPTIONS
   Photography sits directly on the canvas. It is not put inside a card.
   ========================================================================== */
.artifact { display: block; }

.frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: clip;
  background: #0A0A0A;
  border-radius: var(--radius-image);
}
.frame--square { border-radius: 0; }
.frame--bleed { border-radius: 0; }

.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect ratios preserve the intended crop whether or not the photograph
   has been supplied yet. */
.ar-21-9 { aspect-ratio: 21 / 9; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-2-3  { aspect-ratio: 2 / 3; }
.ar-9-16 { aspect-ratio: 9 / 16; }
.ar-tall { aspect-ratio: 3 / 4; }

/* ---- MEDIA PLATE ----
   An intentional reservation, not a stock photograph. It holds the crop,
   the aspect ratio and the position in the hierarchy until the real
   photograph lands. Each plate names the frame it is holding. */
.plate {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(110% 85% at 24% 14%, rgba(241, 235, 221, 0.17), transparent 64%),
    radial-gradient(90% 110% at 86% 92%, rgba(241, 235, 221, 0.07), transparent 60%),
    linear-gradient(168deg, #2B2A27 0%, #1D1C1A 48%, #121110 100%);
}
/* Scrim beneath the documentation slug: the plate's tonal field varies, the
   legibility of the metadata on top of it must not. */
.plate::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.8), rgba(6, 6, 6, 0));
  z-index: 1;
  pointer-events: none;
}
.plate--print::before {
  background: linear-gradient(to top, rgba(243, 238, 227, 0.9), rgba(243, 238, 227, 0));
}
/* In a hero the slug sits top-right, so the scrim follows it. */
.stage__media .plate::before {
  inset: 0 0 auto 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0.72), rgba(6, 6, 6, 0));
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.32;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* Tonal registers — temperature without a permanent filter. */
.plate--room {
  background:
    radial-gradient(80% 66% at 28% 32%, rgba(255, 182, 104, 0.3), transparent 62%),
    radial-gradient(70% 90% at 84% 86%, rgba(255, 90, 31, 0.14), transparent 62%),
    linear-gradient(170deg, #2E2521 0%, #1E1917 54%, #100D0C 100%);
}
.plate--night {
  background:
    radial-gradient(88% 76% at 74% 20%, rgba(123, 63, 242, 0.34), transparent 62%),
    radial-gradient(76% 68% at 14% 90%, rgba(40, 212, 92, 0.12), transparent 60%),
    linear-gradient(174deg, #221C33 0%, #17151F 52%, #0D0D11 100%);
}
.plate--field {
  background:
    radial-gradient(92% 78% at 32% 24%, rgba(40, 212, 92, 0.24), transparent 62%),
    radial-gradient(78% 88% at 86% 90%, rgba(241, 235, 221, 0.09), transparent 58%),
    linear-gradient(168deg, #1E2A1F 0%, #161B16 52%, #0D100D 100%);
}
.plate--daylight {
  background:
    radial-gradient(88% 76% at 26% 20%, rgba(241, 235, 221, 0.34), transparent 64%),
    radial-gradient(78% 78% at 84% 88%, rgba(255, 176, 92, 0.16), transparent 60%),
    linear-gradient(170deg, #423F39 0%, #2A2724 54%, #161513 100%);
}
.plate--print {
  background:
    radial-gradient(85% 74% at 28% 18%, rgba(255, 252, 244, 0.85), transparent 62%),
    radial-gradient(70% 80% at 86% 90%, rgba(16, 16, 16, 0.14), transparent 60%),
    linear-gradient(168deg, #E9E2D2 0%, #D4CBB6 56%, #B9AF98 100%);
  color: var(--phg-asphalt);
}
.plate--print::after { mix-blend-mode: multiply; opacity: 0.22; }

/* The plate's own metadata — bottom-left, on the grid, small. */
.plate__slug {
  position: absolute;
  inset: auto auto clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: calc(100% - clamp(1.5rem, 3.2vw, 3rem));
  font-family: var(--font-body);
  text-transform: uppercase;
}
.plate__slug b {
  font-weight: 600;
  font-size: var(--meta-xs);
  letter-spacing: var(--track-label);
  color: rgba(241, 235, 221, 0.96);
}
.plate__slug span {
  font-weight: 500;
  font-size: var(--meta-xs);
  letter-spacing: var(--track-meta);
  color: rgba(241, 235, 221, 0.78);
}
.plate__slug-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: rgba(241, 235, 221, 0.64) !important;
  letter-spacing: var(--track-label) !important;
}
.plate__slug-note::before {
  content: "";
  width: 5px; height: 5px;
  border: 1px solid currentColor;
  flex: none;
}
.plate--print .plate__slug b { color: rgba(16, 16, 16, 0.92); }
.plate--print .plate__slug span { color: rgba(16, 16, 16, 0.72); }
.plate--print .plate__slug-note { color: rgba(16, 16, 16, 0.62) !important; }

/* Registration corner — a print artefact, top-right, very quiet. */
.plate__reg {
  position: absolute;
  top: clamp(0.75rem, 1.6vw, 1.5rem);
  right: clamp(0.75rem, 1.6vw, 1.5rem);
  z-index: 3;
  width: 14px;
  height: 14px;
  opacity: 0.9;
  color: var(--phg-kush);
}
.plate--print .plate__reg { color: #0B7A31; opacity: 0.8; }

/* ---- CAPTION ---- */
.caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: var(--border-hair) solid var(--rule);
  font-size: var(--meta);
  line-height: var(--leading-meta);
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
}
.caption b {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-size: var(--meta-xs);
}
.caption span { letter-spacing: var(--track-meta); text-transform: uppercase; font-size: var(--meta-xs); }

/* ---- PHOTO SEQUENCE — contact-sheet behaviour ---- */
.sequence {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .sequence--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sequence--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sequence--offset > :nth-child(even) { transform: translateY(clamp(1rem, 3vw, 3rem)); }
}

/* ---- HORIZONTAL RAIL — used only where lateral movement means something ---- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(76vw, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-m);
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 768px) { .rail { grid-auto-columns: minmax(38vw, 1fr); } }
@media (min-width: 1280px) { .rail { grid-auto-columns: minmax(27vw, 1fr); } }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule-strong); }

/* ==========================================================================
   09  HEADER + MOBILE EDITORIAL MENU
   ========================================================================== */
:root { --header-h: clamp(4.75rem, 6vw, 7rem); }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--phg-smoke);
  background: transparent;
  border-bottom: var(--border-hair) solid transparent;
  transition: background-color var(--dur-mid) var(--ease-cut),
    border-color var(--dur-mid) var(--ease-cut),
    color var(--dur-mid) var(--ease-cut);
}
.header::before {
  /* legibility scrim while the header is transparent over a photograph */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.66), transparent);
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-cut);
}
.header[data-state="solid"] {
  background: var(--phg-asphalt);
  border-bottom-color: rgba(241, 235, 221, 0.16);
}
.header[data-state="solid"]::before { opacity: 0; }
.header[data-theme="light"] {
  color: var(--phg-asphalt);
}
.header[data-theme="light"]::before {
  background: linear-gradient(to bottom, rgba(241, 235, 221, 0.9), transparent);
}
.header[data-theme="light"][data-state="solid"] {
  background: var(--phg-smoke);
  border-bottom-color: rgba(16, 16, 16, 0.16);
}

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding: clamp(0.85rem, 1.6vw, 1.25rem) var(--gutter);
}

/* ---- WORDMARK ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.35rem;
  flex: none;
}
.wordmark__logo {
  display: block;
  height: clamp(2.5rem, 3.9vw, 3.5rem);
  width: auto;
  transition: opacity var(--dur-fast) var(--ease-cut);
}
.wordmark:hover .wordmark__logo,
.wordmark:focus-visible .wordmark__logo { opacity: 0.72; }
/* The mark ships in Smoke Cream. If a header ever inverts to a light surface,
   render it in Asphalt rather than leaving cream on cream. */
.header[data-theme="light"] .wordmark__logo {
  filter: brightness(0) saturate(0) contrast(1) opacity(0.94);
}

/* ---- PRIMARY NAV ---- */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }
}
.nav__link {
  position: relative;
  font-weight: 600;
  font-size: var(--nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  padding-block: 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-cut);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--phg-kush);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-editorial);
}
.nav__link:hover { color: var(--phg-kush); }
.header[data-theme="light"] .nav__link:hover { color: var(--phg-asphalt); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--phg-kush); }
.header[data-theme="light"] .nav__link[aria-current="page"] { color: var(--phg-asphalt); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  margin-left: clamp(0.5rem, 1vw, 1rem);
  padding: 0.75em 1.2em 0.65em;
  min-height: 44px;
  background: var(--phg-kush);
  color: var(--phg-asphalt);
  border: var(--border-hair) solid var(--phg-kush);
  border-radius: var(--radius-ui);
  font-weight: 600;
  font-size: var(--nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--dur-fast) var(--ease-cut),
    color var(--dur-fast) var(--ease-cut);
}
.nav__cta:hover { background: transparent; color: var(--phg-kush); }
.header[data-theme="light"] .nav__cta:hover { color: var(--phg-asphalt); border-color: var(--phg-asphalt); }

/* ---- RIGHT ZONE: one contextual status ---- */
.header__status {
  display: none;
  align-items: center;
  gap: 0.55em;
  font-weight: 600;
  font-size: var(--meta-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: 0.85rem;
  min-height: 44px;
}
@media (min-width: 1280px) { .header__status { display: inline-flex; } }
.header__status .dot {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--phg-kush);
  box-shadow: 0 0 0 3px rgba(40, 212, 92, 0.2);
  flex: none;
}
.header__status:hover { color: var(--phg-kush); }
.header[data-theme="light"] .header__status { color: var(--phg-concrete-ink); }
.header[data-theme="light"] .header__status:hover { color: var(--phg-asphalt); }

/* ---- MENU BUTTON ---- */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: 0;
  padding: 0.7rem 0;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: inherit;
}
@media (min-width: 1024px) { .menu-btn { display: none; } }
.menu-btn__bars {
  position: relative;
  width: 22px;
  height: 10px;
  flex: none;
}
.menu-btn__bars::before,
.menu-btn__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-editorial);
}
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-4.25px) rotate(-45deg); }

/* ---- MOBILE EDITORIAL MENU — a contents page, not a drawer ---- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--phg-asphalt);
  color: var(--phg-smoke);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--dur-mid) var(--ease-cut),
    transform var(--dur-mid) var(--ease-editorial),
    visibility 0s linear var(--dur-mid);
}
.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(0.85rem, 1.6vw, 1.25rem) var(--gutter);
  border-bottom: var(--border-hair) solid rgba(241, 235, 221, 0.16);
  position: sticky;
  top: 0;
  background: var(--phg-asphalt);
  z-index: 2;
}
.menu__body {
  padding: var(--space-l) var(--gutter) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  flex: 1;
}
.menu__index { border-top: var(--border-hair) solid rgba(241, 235, 221, 0.16); }
.menu__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.5rem, 1.4vw, 0.9rem) 0;
  border-bottom: var(--border-hair) solid rgba(241, 235, 221, 0.16);
  transition: color var(--dur-fast) var(--ease-cut);
}
.menu__item:hover,
.menu__item:focus-visible { color: var(--phg-kush); }
.menu__num {
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--phg-concrete);
  font-variant-numeric: tabular-nums;
  flex: none;
  width: 2.25rem;
}
.menu__word {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.menu__item[aria-current="page"] { color: var(--phg-kush); }
.menu__sub {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .menu__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu__col h3 {
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--phg-concrete);
  margin-bottom: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: var(--border-hair) solid rgba(241, 235, 221, 0.16);
}
.menu__col li + li { margin-top: 0.15rem; }
.menu__col a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  min-height: 44px;
  font-size: var(--small);
  font-weight: 500;
}
.menu__col a:hover { color: var(--phg-kush); }
.menu__col .st {
  font-size: var(--meta-xs);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--phg-concrete);
  flex: none;
}
.menu__col .st--active { color: var(--phg-kush); }
body[data-menu="open"] { overflow: hidden; }

/* ==========================================================================
   10  HERO IMAGE STAGE
   THE IMAGE ESTABLISHES THE WORLD. THE HEADLINE ESTABLISHES THE POSITION.
   ========================================================================== */
.stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
  background: var(--phg-asphalt);
  color: var(--phg-smoke);
}
.stage--short { min-height: min(78svh, 780px); }
.stage--page { min-height: min(72svh, 700px); }

.stage__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}
.stage__media .plate,
.stage__media img { width: 100%; height: 100%; }
/* In a hero the documentation slug moves clear of the display type. */
.stage__media .plate__slug {
  inset: auto clamp(0.75rem, 1.6vw, 1.5rem) auto auto;
  top: calc(clamp(0.75rem, 1.6vw, 1.5rem) + var(--header-h));
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 767px) {
  /* On a phone the hero belongs to the headline and the two actions.
     The frame's documentation layer steps out rather than competing. */
  .stage__media .plate__slug { display: none; }
}
.stage__media img { object-fit: cover; }
.stage__media::after {
  /* Directional scrim: keeps Rawner and Refinder legible over any frame
     without flattening the photograph into a grey wash. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.34) 44%, rgba(8, 8, 8, 0.04) 74%),
    linear-gradient(to right, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.1) 54%, transparent 80%);
  z-index: 4;
  pointer-events: none;
}

.stage__content {
  position: relative;
  z-index: var(--z-content);
  grid-row: 1;
  align-self: end;
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding: calc(var(--space-4xl) + var(--header-h)) var(--gutter) var(--space-2xl);
  display: grid;
  gap: var(--space-l);
}
.stage__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
}
.stage__title { max-width: 15ch; }
.stage__support { display: grid; gap: var(--space-m); max-width: 62ch; }

/* Bottom rail: the stage's own documentation strip. */
.stage__rail {
  position: relative;
  z-index: var(--z-content);
  grid-row: 2;
  border-top: var(--border-hair) solid rgba(241, 235, 221, 0.2);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: none;
}
.stage__rail-inner {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding: var(--space-m) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--phg-concrete);
}
.scroll-cue__line {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: clip;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--phg-kush);
  transform-origin: left;
  animation: cue 2.6s var(--ease-editorial) infinite;
}
@keyframes cue {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ==========================================================================
   11  EDITORIAL COMPONENTS
   ========================================================================== */

/* ---- SECTION HEAD: metadata → Rawner → lead ---- */
.head { display: grid; gap: var(--space-m); }
.head__tick {
  display: block;
  width: clamp(2rem, 4vw, 3.25rem);
  height: 3px;
  background: var(--phg-kush);
  margin-bottom: calc(var(--space-s) * -1 + 0.25rem);
}
.head__title { max-width: 18ch; }
.head--wide .head__title { max-width: 26ch; }

/* ---- MANIFESTO BLOCK — no container, 60–100% of the width ---- */
.manifesto {
  display: grid;
  gap: var(--space-xl);
}
.manifesto__statement { max-width: 16ch; }
.manifesto__body { max-width: var(--measure-read); }

/* ---- TYPOGRAPHIC INTERRUPTION — a full-bleed statement between chapters --- */
.interrupt {
  position: relative;
  padding-block: var(--space-4xl);
  border-top: var(--border-hair) solid var(--rule);
  border-bottom: var(--border-hair) solid var(--rule);
}
.interrupt__text { max-width: 20ch; }
.interrupt__meta { margin-bottom: var(--space-l); }

/* ---- INDEX LIST — culture categories, editorial index, archive index ---- */
.index { border-top: var(--border-hair) solid var(--rule); }
.index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs) var(--space-l);
  padding-block: clamp(1.1rem, 2.2vw, 1.75rem);
  border-bottom: var(--border-hair) solid var(--rule);
  transition: background-color var(--dur-fast) var(--ease-cut),
    padding-inline var(--dur-mid) var(--ease-editorial);
}
@media (min-width: 768px) {
  /* The term column has to hold the longest term at the largest step of
     --h4, or a word like ENTERTAINMENT runs into the description beside it.
     The column therefore scales on the same curve as the type it carries
     (measured: 142px at 768, 191px at 1800, 227px at 2200). */
  .index__row {
    grid-template-columns: 3.5rem minmax(0, clamp(9.5rem, 11vw, 15rem)) minmax(0, 1fr);
    align-items: baseline;
  }
  .index--wide .index__row {
    grid-template-columns: 3.5rem minmax(0, clamp(11rem, 12.5vw, 17rem)) minmax(0, 1fr);
  }
}
a.index__row:hover {
  background: var(--surface-raise);
  padding-inline: clamp(0.5rem, 1.4vw, 1.25rem);
}
.index__num {
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}
.index__term {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--h4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  min-width: 0;
  /* A long single word wraps inside its column rather than overlapping the
     description — the last-resort guard behind the sized column above. */
  overflow-wrap: break-word;
}
a.index__row:hover .index__term { color: var(--phg-kush); }
.s-light a.index__row:hover .index__term { color: var(--ink); }
.index__desc {
  color: var(--ink-quiet);
  font-size: var(--small);
  line-height: 1.5;
  max-width: 62ch;
}

/* ---- CODE / PRINCIPLE LIST ---- */
.principles { display: grid; gap: 0; border-top: var(--border-hair) solid var(--rule); }
.principle {
  display: grid;
  gap: var(--space-xs) var(--space-l);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: var(--border-hair) solid var(--rule);
}
@media (min-width: 768px) {
  .principle { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.principle__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.8vw, 1.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 22ch;
}
.principle__body { color: var(--ink-quiet); max-width: 52ch; font-size: var(--small); }

/* ---- CADENCE LIST — "The playlist matters. The room matters." ---- */
.cadence { display: grid; gap: 0; }
.cadence li {
  padding-block: clamp(0.45rem, 1vw, 0.7rem);
  border-bottom: var(--border-hair) solid var(--rule);
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cadence li:last-child { border-bottom: 0; }

/* ---- FLOW DIAGRAM — built from rules, type and spacing ---- */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding-block: var(--space-m);
  border-top: var(--border-hair) solid var(--rule);
  border-bottom: var(--border-hair) solid var(--rule);
}
.flow__node {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  padding: 0.5em 0.75em 0.42em;
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-tag);
  white-space: nowrap;
}
.flow__node--accent {
  border-color: var(--phg-kush);
  color: var(--phg-kush);
}
.s-light .flow__node--accent {
  border-color: var(--phg-kush);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--phg-kush);
}
.flow__arrow { color: var(--ink-quiet); font-size: var(--meta); flex: none; }

/* ---- PULL QUOTE ---- */
.pullquote {
  margin-block: var(--space-2xl);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: var(--border-heavy) solid var(--phg-kush);
  max-width: 24ch;
}
.pullquote p { font-family: var(--font-display); }

/* ---- CTA STRIP ---- */
.cta-strip {
  display: grid;
  gap: var(--space-l);
  align-items: end;
}
@media (min-width: 900px) {
  .cta-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

/* ---- CAMPAIGN TAKEOVER / GHOST BAND ----
   A single outlined word running the full measure and cropped by the band's
   bottom edge — a poster device, not a floating decoration behind content. */
.takeover { position: relative; }
.takeover__inner { position: relative; z-index: 2; }


/* ==========================================================================
   12  PROGRAM COMPONENTS
   ========================================================================== */

/* ---- PROGRAM FEATURE — a full-width editorial moment, never a card ---- */
.program {
  position: relative;
  border-top: var(--border-hair) solid var(--rule);
  padding-block: var(--space-3xl);
}
.program__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 960px) {
  .program__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5.5rem); }
  .program--flip .program__media { order: -1; }
}
.program__head { display: grid; gap: var(--space-m); }
.program__title { max-width: 9ch; }
.program__statement { max-width: 26ch; }
.program__body { max-width: 52ch; color: var(--ink-quiet); }
.program--muted .program__title { color: var(--ink-quiet); }
.program--muted .plate { opacity: 0.78; }

/* Programs index: the four-way ecosystem, set as a typographic system. */
.ecosystem {
  display: grid;
  gap: 0;
  border-top: var(--border-hair) solid var(--rule);
}
@media (min-width: 768px) { .ecosystem { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ecosystem__cell {
  justify-items: start;
  padding: clamp(1.25rem, 2.6vw, 2.25rem) 0;
  border-bottom: var(--border-hair) solid var(--rule);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
@media (min-width: 768px) {
  .ecosystem__cell { padding-inline: clamp(1rem, 2vw, 1.75rem); border-left: var(--border-hair) solid var(--rule); }
  .ecosystem__cell:first-child { padding-left: 0; border-left: 0; }
}
.ecosystem__verb {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.ecosystem__name {
  font-weight: 700;
  font-size: var(--meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

/* ---- SEQUENCE OF MOVEMENTS: ARRIVAL → IMMERSION → … ---- */
.movements { border-top: var(--border-hair) solid var(--rule); counter-reset: mv; }
.movement {
  display: grid;
  gap: var(--space-xs) var(--space-l);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: var(--border-hair) solid var(--rule);
  counter-increment: mv;
}
@media (min-width: 768px) {
  .movement { grid-template-columns: 3.5rem minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}
.movement__num::before {
  content: "0" counter(mv);
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}
.movement__term {
  font-weight: 700;
  font-size: var(--h4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.movement__body { color: var(--ink-quiet); font-size: var(--small); max-width: 58ch; }

/* ---- IS / IS NOT ---- */
.contrast { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .contrast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } }
.contrast__col h3 {
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  padding-bottom: var(--space-s);
  border-bottom: var(--border-heavy) solid var(--rule-strong);
  margin-bottom: var(--space-m);
}
.contrast__col--yes h3 { border-bottom-color: var(--phg-kush); }
.contrast__col li {
  padding-block: 0.6rem;
  border-bottom: var(--border-hair) solid var(--rule);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 500;
}
.contrast__col--no { color: var(--ink-quiet); }
.contrast__col--no h3::after { content: " ✕"; color: var(--ink-quiet); }
.contrast__col--yes h3::after { content: " ✓"; color: var(--phg-kush); }
.s-light .contrast__col--yes h3::after { color: #0B7A31; }

/* ---- EDITION / FORMAT LIST ---- */
.editions { display: grid; gap: var(--space-l); }
@media (min-width: 700px) { .editions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .editions--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.edition {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-m);
  border-top: var(--border-heavy) solid var(--phg-kush);
}
.edition h3 {
  font-weight: 700;
  font-size: var(--h4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.edition p { color: var(--ink-quiet); font-size: var(--small); }

/* ==========================================================================
   13  NEWS / ARTICLE
   ========================================================================== */
.news-hero { display: grid; gap: var(--space-xl); }
@media (min-width: 960px) {
  .news-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
}
.news-hero__title { max-width: 16ch; }
.news-hero__deck { max-width: 52ch; color: var(--ink-quiet); }

.news-row {
  display: grid;
  gap: var(--space-s) var(--space-l);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: var(--border-hair) solid var(--rule);
  transition: padding-inline var(--dur-mid) var(--ease-editorial),
    background-color var(--dur-fast) var(--ease-cut);
}
@media (min-width: 860px) {
  .news-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 12rem); align-items: baseline; }
}
a.news-row:hover { background: var(--surface-raise); padding-inline: clamp(0.5rem, 1.4vw, 1.25rem); }
.news-row__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
a.news-row:hover .news-row__title { color: var(--phg-kush); }
.s-light a.news-row:hover .news-row__title { color: var(--ink); }

/* ---- ARTICLE ---- */
.article { display: block; }
.article__header { display: grid; gap: var(--space-l); max-width: 24ch; }
.article__deck {
  font-size: var(--lead);
  line-height: var(--leading-lead);
  max-width: 56ch;
  color: var(--ink-quiet);
}
.article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  padding-top: var(--space-m);
  border-top: var(--border-hair) solid var(--rule);
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.article__byline b { color: var(--ink); font-weight: 600; }

.article__body { max-width: var(--measure-read); margin-inline: auto; }
.article__body > * + * { margin-top: 1.2em; }
.article__body h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-top: var(--space-2xl);
  max-width: 24ch;
}
.article__body h3 {
  font-weight: 700;
  font-size: var(--h4);
  letter-spacing: -0.01em;
  margin-top: var(--space-xl);
}
.article__body p { font-size: var(--body); line-height: var(--leading-body); }
.article__body figure { margin-block: var(--space-xl); }
.article__wide {
  width: min(100vw - (2 * var(--gutter)), var(--measure-wide));
  max-width: none;
  margin-inline: auto;
}

/* ==========================================================================
   14  PARTNERS
   ========================================================================== */
.partner-feature { display: grid; gap: var(--space-xl); }
@media (min-width: 960px) {
  .partner-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
}
.partner-lockup { display: grid; }
/* The × is a divider between two equals, not a footnote: it carries a rule
   across the remaining measure. */
.partner-lockup__x {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1;
  color: var(--ink);
  padding-block: clamp(0.4rem, 1.2vw, 0.9rem);
}
.partner-lockup__x::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}

.pathways { display: grid; gap: 0; border-top: var(--border-hair) solid var(--rule); }
.pathway {
  display: grid;
  gap: var(--space-xs) var(--space-l);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: var(--border-hair) solid var(--rule);
}
@media (min-width: 860px) {
  .pathway { grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}
.pathway__term {
  font-weight: 700;
  font-size: var(--h4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.pathway__body { color: var(--ink-quiet); font-size: var(--small); max-width: 60ch; }

/* ==========================================================================
   15  EVENTS / ARCHIVE / EMPTY STATES
   ========================================================================== */
.record {
  display: grid;
  gap: var(--space-s) var(--space-l);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: var(--border-hair) solid var(--rule);
}
@media (min-width: 900px) {
  .record { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; }
}
.record__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

/* Honest empty state — a deliberate editorial moment, not placeholder cards. */
.empty {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-3xl);
  border-top: var(--border-heavy) solid var(--phg-kush);
  border-bottom: var(--border-hair) solid var(--rule);
}
.empty__title { max-width: 16ch; }
.empty__body { max-width: 52ch; color: var(--ink-quiet); }

/* ==========================================================================
   16  FORMS
   Flat surfaces. Obvious labels. No floating-label gimmicks.
   ========================================================================== */
.form { display: grid; gap: var(--space-l); max-width: 46rem; }
.field-row { display: grid; gap: var(--space-l); }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.5rem; }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--meta-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
}
.field__req {
  font-weight: 500;
  color: var(--ink-quiet);
  letter-spacing: var(--track-meta);
}
.field__req--required { color: var(--phg-kush); }
.s-light .field__req--required { color: #0B7A31; }

.input,
.select,
.textarea {
  width: 100%;
  background: var(--surface-raise);
  color: var(--ink);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-ui);
  padding: 0.95rem 1rem;
  min-height: 48px;
  font-size: var(--small);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-cut),
    background-color var(--dur-fast) var(--ease-cut);
  appearance: none;
}
.textarea { min-height: 8.5rem; resize: vertical; }
.select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-quiet); opacity: 1; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ink-quiet); }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--phg-kush);
  outline: 2px solid var(--phg-kush);
  outline-offset: 1px;
}
.s-light .input:focus-visible,
.s-light .select:focus-visible,
.s-light .textarea:focus-visible { outline-color: var(--phg-asphalt); border-color: var(--phg-asphalt); }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea {
  border-color: var(--phg-fire);
  /* never colour alone: the error text below states the problem */
}
.field__error {
  display: none;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--meta-xs);
  font-weight: 600;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--phg-fire);
}
.s-light .field__error { color: #C23B08; }
.field__error::before { content: "✕"; }
.field[data-invalid="true"] .field__error { display: flex; }

.field__hint {
  font-size: var(--meta-xs);
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
}

/* Inline newsletter form */
.subscribe { display: grid; gap: var(--space-s); max-width: 34rem; }
.subscribe__row { display: grid; gap: var(--space-s); }
@media (min-width: 520px) { .subscribe__row { grid-template-columns: minmax(0, 1fr) auto; } }

/* Form outcome messages — success is only ever shown on a real acceptance. */
.form-status {
  display: none;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  border-left: var(--border-heavy) solid var(--ink-quiet);
  background: var(--surface-raise);
  border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
}
.form-status[data-visible="true"] { display: grid; }
.form-status__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.form-status__body { font-size: var(--small); color: var(--ink-quiet); max-width: 52ch; }
.form-status[data-tone="success"] { border-left-color: var(--phg-kush); }
.form-status[data-tone="error"] { border-left-color: var(--phg-fire); }
.form-status[data-tone="pending"] { border-left-color: var(--ink-quiet); }

.form-note {
  font-size: var(--meta-xs);
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
  max-width: 60ch;
}

/* ---- FILTER PILLS — one of the sanctioned pill uses ---- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.filter {
  font-weight: 600;
  font-size: var(--meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  padding: 0.6em 1em 0.5em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-quiet);
  background: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-cut),
    border-color var(--dur-fast) var(--ease-cut),
    background-color var(--dur-fast) var(--ease-cut);
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

/* ==========================================================================
   17  FOOTER — the closing page of the issue
   ========================================================================== */
.footer {
  border-top: 3px solid var(--phg-kush);
  background: var(--phg-asphalt);
  color: var(--phg-smoke);
  --surface: var(--phg-asphalt);
  --ink: var(--phg-smoke);
  --ink-quiet: var(--phg-concrete);
  --rule: rgba(241, 235, 221, 0.16);
  --rule-strong: rgba(241, 235, 221, 0.42);
  --accent: var(--phg-kush);
  padding-top: var(--space-3xl);
}
.footer__index {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
}
@media (min-width: 640px) { .footer__index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__index { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } }
.footer__col h2 {
  font-size: var(--meta-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--phg-concrete);
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-s);
  border-bottom: var(--border-hair) solid var(--rule);
}
.footer__col a,
.footer__col .item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  min-height: 44px;
  font-size: var(--small);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-cut);
}
.footer__col a:hover { color: var(--phg-kush); }
.footer__col .st {
  font-size: var(--meta-xs);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--phg-concrete);
  flex: none;
}
.footer__col .st--active { color: var(--phg-kush); }

/* The cropped wordmark: huge, flush, cut by the viewport edge. */
.footer__mark {
  border-top: var(--border-hair) solid var(--rule);
  padding-top: var(--space-l);
  overflow: clip;
}
/* --em-w is the word's width in em at -0.05em tracking, measured from the
   Rawner outlines by tools/measure_display.py. Scaling by it fills the measure
   exactly — the typeface is scaled, never horizontally distorted. */
.fill-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.78;
  display: block;
  white-space: nowrap;
  font-size: calc(
    (min(var(--max-page), 100vw) - 2 * var(--gutter)) / var(--em-w, 2.575)
  );
}
.footer__mark-type {
  margin-top: -0.06em;
  margin-bottom: 0.02em;
}
.footer__mark-type .kush { color: var(--phg-kush); }

.footer__legal {
  border-top: var(--border-hair) solid var(--rule);
  padding-block: var(--space-l) var(--space-xl);
  display: grid;
  gap: var(--space-m);
}
.footer__disclaimer {
  font-size: var(--meta-xs);
  line-height: 1.6;
  color: var(--phg-concrete);
  max-width: 78ch;
  letter-spacing: 0.02em;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--meta-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--phg-concrete);
}
.footer__social { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.footer__social a { padding-block: 0.7rem; display: inline-flex; align-items: center; min-height: 44px; }
.footer__social a:hover { color: var(--phg-kush); }

/* ==========================================================================
   18  MOTION — editorial, cinematic, controlled
   ========================================================================== */

/* Every motion state below is opt-in via html[data-js]. Without JavaScript
   the page renders fully composed — nothing is hidden waiting for a script. */

/* Masked Rawner reveal: the line enters from beneath a clipping edge. */
.reveal { display: block; overflow: clip; }
.reveal > * { display: block; }
[data-js="true"] .reveal > * {
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease-editorial);
}
[data-js="true"] [data-inview="true"] .reveal > *,
[data-js="true"] .reveal[data-inview="true"] > * { transform: none; }
.reveal--d1 > * { transition-delay: 90ms; }
.reveal--d2 > * { transition-delay: 180ms; }
.reveal--d3 > * { transition-delay: 270ms; }

/* Metadata and supporting copy arrive after the headline. */
[data-js="true"] .fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-cut),
    transform var(--dur-slow) var(--ease-editorial);
}
[data-js="true"] [data-inview="true"] .fade,
[data-js="true"] .fade[data-inview="true"] { opacity: 1; transform: none; }
.fade--d1 { transition-delay: 140ms; }
.fade--d2 { transition-delay: 260ms; }
.fade--d3 { transition-delay: 380ms; }
.fade--d4 { transition-delay: 500ms; }

/* Slow photographic reveal + drift. */
.media-reveal { overflow: clip; }
[data-js="true"] .media-reveal > * {
  transform: scale(1.06);
  opacity: 0.55;
  transition: transform var(--dur-cinematic) var(--ease-editorial),
    opacity var(--dur-slow) var(--ease-cut);
}
[data-js="true"] [data-inview="true"] .media-reveal > *,
[data-js="true"] .media-reveal[data-inview="true"] > * { transform: scale(1); opacity: 1; }

/* Hover crop change on linked media — no shadow, no lift. */
.media-hover { overflow: clip; }
.media-hover > * { transition: transform var(--dur-cinematic) var(--ease-editorial); }
a:hover .media-hover > *,
a:focus-visible .media-hover > * { transform: scale(1.035); }

/* Marquee — only for genuinely repeating information. */
.marquee {
  overflow: clip;
  border-block: var(--border-hair) solid var(--rule);
  padding-block: var(--space-s);
}
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee__track > span {
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-quiet);
  white-space: nowrap;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Non-animated equivalents: everything is simply present. */
  .reveal > *,
  .fade,
  .media-reveal > * { transform: none !important; opacity: 1 !important; }
  .marquee__track { animation: none; }
  .scroll-cue__line::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   19  RESPONSIVE ADJUSTMENTS
   Mobile is art-directed, not a compressed desktop page.
   ========================================================================== */
@media (max-width: 1023px) {
  .grid { gap: var(--space-l) 1rem; }
  .col-1-5, .col-1-6, .col-1-7, .col-1-8, .col-2-8,
  .col-3-11, .col-4-13, .col-5-13, .col-6-13, .col-7-13, .col-8-13,
  .col-9-13 { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root {
    /* Reduce copy before reducing personality — display type stays large. */
    --leading-body: 1.55;
  }
  .stage { min-height: 100svh; }
  .stage__content { padding-top: calc(var(--space-3xl) + var(--header-h)); gap: var(--space-m); }
  .stage__title { max-width: 11ch; }
  .lead { max-width: 34ch; }
  .interrupt__text { max-width: 12ch; }
  .pullquote { margin-block: var(--space-xl); }
  .fill-display { letter-spacing: -0.055em; }
}

@media (max-width: 430px) {
  .stage__rail-inner { justify-content: flex-start; }
  .caption { gap: 0.3rem 0.9rem; }
}

@media (max-width: 359px) {
  :root { --gutter: 1rem; }
}

/* Long, unbreakable words in display type must not push the page sideways. */
.display-xl, .display-l, .display-m, .display-h1, .display-h2,
.menu__word, .fill-display, .news-row__title, .record__name,
.ecosystem__verb {
  overflow-wrap: break-word;
  hyphens: none;
}
.fill-display { overflow-wrap: normal; }

@media print {
  .header, .menu, .footer__mark, .scroll-cue, .stage__rail { display: none !important; }
  body { background: #fff; color: #000; }
  .plate { background: #eee !important; }
}