:root {
  --ink: #17130F;
  --cream: #F4EEDD;
  --poster: #E29A26;
  --muted: #6B6152;
  --line: rgba(23, 19, 15, 0.15);
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Oswald', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* Paper texture on the cream inner pages: same fine-grain + large-scale
   mottle technique as the poster, just dialed way down since this is
   sitting under body copy, not a solid poster field — a fixed pseudo-
   element behind everything (negative z-index) rather than per-page
   markup, so every cream page gets it for free. Invisible on the poster
   page itself since .poster-frame is opaque and covers the viewport. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='pm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pm)'/%3E%3C/svg%3E");
  background-size: 220px 220px, cover;
  background-repeat: repeat, no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.2;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font-family: inherit; }

/* ============ Poster (landing) ============ */
.poster-frame {
  min-height: 100vh;
  /* Ink stays as the backdrop behind the poster — invisible at rest since
     .poster covers it edge to edge, but it's what shows through during the
     boot-up reveal below (the old border's color, repurposed). */
  background: var(--ink);
}
.poster {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--ink);
  color: var(--poster);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px) clamp(20px, 6vw, 64px) clamp(28px, 6vw, 56px);
  clip-path: inset(0 0 0 0);
}

/* Entrance: name and nav fade in while rising from below, staggered so the
   name settles first and the nav follows. The corner stars just fade in —
   they can't share the slide-up (a CSS transform animation on them would
   fight the JS-driven spin, which also sets .style.transform every frame). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-up-scale {
    from { opacity: 0; transform: translateY(28px) scaleY(1.2); }
    to { opacity: 1; transform: translateY(0) scaleY(1.2); }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .corner-star { animation: fade-in 0.7s ease-out both; }
  .poster-name { animation: fade-up-scale 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
  .poster-tabs { animation: fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }
}


/* Paper, not film: four stacked layers instead of one noise pattern.
   1) fine grain (overlay) — the paper's tooth on the yellow field.
   2) fine grain (screen), a second pass of the same noise — overlay barely
      touches near-black pixels (dark stays dark, blend-math-wise), so this
      is what actually makes the grain show up *on the ink*. Screen lightens
      based on the noise, which doubles as the "faded ink" look.
   3) mottle — big soft blotches from uneven fiber/ink absorption; this is
      what actually reads as "paper" rather than "screen noise."
   4) vignette — a multiply darkening toward the edges, like a real print
      run's uneven ink coverage. */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.grain-light {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='nl'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nl)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: screen;
  opacity: 0.22;
}
.mottle {
  position: absolute; inset: 0; pointer-events: none;
  /* One large non-repeating image (cover, not a tiled background-size) —
     tiling a low-frequency pattern like this leaves a visible seam where
     it repeats, which read as an accidental fold line. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.26;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: multiply;
}
/* Light-leak streak: a diagonal band (linear-gradient, not a radial blob —
   that's what gives it the streak shape instead of a corner glow), masked
   so it's strongest near the top-left and fades out toward the bottom
   right. Inverted from the reference: dark ink instead of white light,
   multiply instead of screen — same shape, opposite polarity. Uses the
   same coarser stippled-dot texture as .halftone-accent (not fine grain)
   so all these accent effects read as one consistent style. The mask's
   fade zone runs almost to 100% so it dissolves fully before any edge —
   a short fade is what makes a soft mask still read as a hard-edged box. */
.corner-glow {
  position: absolute; inset: 0; pointer-events: none;
  filter: blur(18px) invert(1);
  background-image:
    linear-gradient(108deg, transparent 6%, rgba(23, 19, 15, 0.6) 26%, rgba(23, 19, 15, 0.38) 40%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 16 -10'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cg)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 170px 170px;
  background-repeat: no-repeat, repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 2% 8%, black 0%, black 18%, transparent 97%);
  mask-image: radial-gradient(ellipse 70% 55% at 2% 8%, black 0%, black 18%, transparent 97%);
  mix-blend-mode: screen;
  opacity: 0.3;
}
/* Dust/fleck specks: real aged-paper photos (see reference) have scattered
   isolated dark spots of varying size, not just smooth blotchy noise. The
   feColorMatrix alpha row thresholds the turbulence — instead of the usual
   smooth gradient of gray values, only the brightest peaks of the noise
   survive as visible flecks, everything else clips to fully transparent. */
.specks {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 22 -15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
/* Halftone bursts: stippled dot-gradient accents (coarser than .specks,
   tiled rather than cover so a mask can shape each one cleanly), scattered
   at a few spots with different fade directions — linear, radial-off-
   center, radial-centered, diagonal — same idea as the four reference
   swatches, not a single uniform effect repeated. */
.halftone-accent {
  position: absolute; pointer-events: none;
  filter: blur(18px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 16 -10'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  mix-blend-mode: screen;
  opacity: 0.22;
}
/* Each mask ellipse is centered and sized to stay fully inside its own box
   (radius well under the distance to every edge) — so the fade reaches
   true zero before the box gets clipped, instead of getting cut off
   mid-fade (which is what read as a hard line). Centering it also avoids
   a renderer quirk where a radial-gradient positioned far off-center with
   a large radius silently fails to paint at all. The box's own offset
   position (near a corner, partly off-canvas) is what aims each blob —
   the gradient inside just needs to be a clean, fully-contained fade. */
.halftone-accent--tr,
.halftone-accent--bl,
.halftone-accent--r,
.halftone-accent--b {
  -webkit-mask-image: radial-gradient(ellipse 38% 38% at 50% 50%, black 0%, black 10%, transparent 85%);
  mask-image: radial-gradient(ellipse 38% 38% at 50% 50%, black 0%, black 10%, transparent 85%);
}
.halftone-accent--tr { top: 0%; right: -14%; width: 50%; height: 36%; }
.halftone-accent--bl { bottom: -2%; left: -16%; width: 52%; height: 32%; }
.halftone-accent--r { top: 58%; right: -18%; width: 46%; height: 40%; }
.halftone-accent--b { bottom: -14%; left: 12%; width: 62%; height: 32%; }

.corner { position: absolute; color: var(--poster); }
.corner-tr { right: clamp(18px, 3vw, 34px); top: clamp(18px, 3vw, 34px); }
.corner-bl { left: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px); }
.corner-star { width: clamp(24px, 4vw, 46px); height: clamp(24px, 4vw, 46px); fill: currentColor; transform-origin: 50% 50%; }

.poster-name {
  margin: clamp(48px, 9vw, 100px) 0 0;
  font-family: "podium-soft-variable", sans-serif; font-weight: 400;
  font-size: clamp(48px, 13vw, 168px); line-height: 0.86;
  text-align: center; text-transform: uppercase;
  position: relative;
  /* No height/weight axis on this font (only wdth, used by the breathing
     animation) — this is a plain vertical stretch, not a real taller cut. */
  transform: scaleY(1.2);
}

.poster-tabs {
  margin-top: clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2vw, 22px); row-gap: 10px; flex-wrap: wrap;
}
.poster-tabs a { white-space: nowrap; }
/* Class names are stale (kept from the original font picks) but the
   font-family values are current — renaming felt like unnecessary churn. */
.tab-anton { font-family: "walnut", sans-serif; font-weight: 400; font-size: clamp(15px, 2.6vw, 26px); text-transform: uppercase; }
.tab-black { font-family: "jaf-herb", serif; font-weight: 400; font-size: clamp(16px, 2.7vw, 27px); }
.tab-script { font-family: "shantell-sans-bouncy", sans-serif; font-weight: 300; font-size: clamp(19px, 3.4vw, 34px); }
.tab-caps { font-family: "gala", sans-serif; font-weight: 700; font-size: clamp(11px, 1.8vw, 18px); letter-spacing: 0.16em; text-transform: uppercase; }
.tab-star { width: clamp(8px, 1.2vw, 13px); height: clamp(8px, 1.2vw, 13px); fill: var(--poster); transform-origin: 50% 50%; }

/* Nav-link hover: a slight pop plus a hand-drawn oval that gets "drawn" around
   the link (an inline SVG path per link, injected by js/circle.js, revealed by
   animating stroke-dashoffset). Stroke uses currentColor so it matches each
   link's own color on both the dark landing page and the cream inner pages. */
.poster-tabs a, .site-nav a {
  position: relative;
  transition: transform 0.18s ease;
}
.poster-tabs a:hover, .poster-tabs a:focus-visible,
.site-nav a:hover, .site-nav a:focus-visible {
  transform: scale(1.045);
}
.site-nav a:hover, .site-nav a:focus-visible { animation: link-wiggle 0.32s ease-in-out; }
@keyframes link-wiggle {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -2.5deg; }
  65% { rotate: 2.5deg; }
}
.circle-draw {
  position: absolute; left: -12px; top: -9px;
  width: calc(100% + 24px); height: calc(100% + 18px);
  overflow: visible; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.poster-tabs .circle-draw { left: -20px; top: -14px; width: calc(100% + 40px); height: calc(100% + 28px); stroke-width: 1.9; }
.circle-draw { opacity: 0; transition: opacity 0.15s ease 0.15s; }
.poster-tabs a:hover .circle-draw, .poster-tabs a:focus-visible .circle-draw { opacity: 1; transition-delay: 0s; }
.circle-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.28s ease-in; }
.poster-tabs a:hover .circle-draw path, .poster-tabs a:focus-visible .circle-draw path {
  stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.circle-draw path { filter: url(#rough-ink); }
.squiggle-draw { position: absolute; left: -2px; bottom: -10px; width: calc(100% + 4px); height: 7.5px; overflow: visible; pointer-events: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.12s ease 0.15s; }
.squiggle-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; filter: url(#rough-ink); transition: stroke-dashoffset 0.22s ease-in; }
.site-nav a:hover .squiggle-draw, .site-nav a:focus-visible .squiggle-draw { opacity: 1; transition-delay: 0s; }
.site-nav a:hover .squiggle-draw path, .site-nav a:focus-visible .squiggle-draw path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.32s ease-out; }
@media (prefers-reduced-motion: reduce) { .circle-draw path, .squiggle-draw path { transition: none; } }

@media (max-width: 640px) {
  .poster-frame { min-height: auto; }
  .poster { min-height: 100svh; padding: clamp(28px, 8vw, 56px) clamp(20px, 6vw, 64px); }
}

/* ============ Inner pages ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 5vw, 56px) 96px;
  margin-bottom: -96px; /* the extra bottom padding is only room for the fade */
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 2; pointer-events: auto; }
/* Frosted, grainy fade, built as two stacked layers so it dissolves smoothly
   instead of ending on a visible edge: ::before is a strong blur that
   clears quickly, ::after is a lighter blur + paper-grain tint that carries
   the fade the rest of the way down. Each has an eased (multi-stop) mask. */
.site-header::before, .site-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.site-header::before {
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, rgba(0,0,0,.93) 24%, rgba(0,0,0,.8) 33%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.44) 51%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.15) 69%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.015) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 14%, rgba(0,0,0,.93) 24%, rgba(0,0,0,.8) 33%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.44) 51%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.15) 69%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.015) 88%, transparent 100%);
}
.site-header::after {
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hg)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, rgba(244, 238, 221, 0.45), rgba(244, 238, 221, 0.1));
  background-size: 200px 200px, 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0,0,0,.93) 33%, rgba(0,0,0,.8) 43%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.44) 61%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.15) 79%, rgba(0,0,0,.06) 88%, rgba(0,0,0,.015) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0,0,0,.93) 33%, rgba(0,0,0,.8) 43%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.44) 61%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.15) 79%, rgba(0,0,0,.06) 88%, rgba(0,0,0,.015) 95%, transparent 100%);
}
/* Podium Soft Variable, not Anton — needed so the letters have a wdth axis
   to animate at all (see the tame-wave script in js/main.js). */
.site-mark { display: inline-block; transform: scaleY(1.35); transform-origin: left center; font-family: "podium-soft-variable", sans-serif; font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: 0.02em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); flex-wrap: wrap; }
.site-nav a {
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: clamp(13px, 1.5vw, 16px); letter-spacing: 0.01em;
  color: var(--muted); padding-bottom: 3px; border-bottom: 3px solid transparent;
}
.site-nav a.is-active { color: var(--ink); }
/* the current page keeps a still squiggle under it (it boils on hover like the others) */
.site-nav a.is-active .squiggle-draw { opacity: 1; }
.site-nav a.is-active .squiggle-draw path { stroke-dashoffset: 0; }
.site-nav a:hover { color: var(--ink); }

.page-title { padding: clamp(30px, 6vw, 60px) clamp(20px, 5vw, 56px) 0; }
.page-title h1 { margin: 0; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(40px, 8vw, 84px); line-height: 0.9; text-transform: uppercase; }
.page-title .rule { width: 120px; height: 8px; background: var(--poster); margin-top: 14px; }

/* Staggered credit grid (acting page): a CSS-columns masonry rather than a
   grid, so card heights vary naturally, plus a small fixed rotation per
   card (via --rot) so nothing lines up too neatly. Deliberately not real
   poster art (nothing to hotlink/scrape from IMDb) — each card is a
   stylized initial-letter "poster" in the site's own print-poster voice,
   cycling through a few palettes so they don't all read as one template. */
.section-heading {
  margin: 0; padding: clamp(20px, 4vw, 32px) clamp(28px, 6vw, 72px) 0;
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(20px, 2.8vw, 28px);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted);
}
.section-heading + .stagger-grid, .section-heading + .mv-grid { padding-top: clamp(14px, 2.5vw, 22px); }

.stagger-grid {
  column-count: 4;
  column-gap: clamp(16px, 2.4vw, 28px);
  max-width: 1400px; margin: 0 auto;
  padding: clamp(26px, 5vw, 46px) clamp(28px, 6vw, 72px) 60px;
}
@media (max-width: 1000px) { .stagger-grid { column-count: 3; } }
@media (max-width: 760px) { .stagger-grid { column-count: 2; } }
@media (max-width: 480px) { .stagger-grid { column-count: 1; } }
.stagger-grid--empty { column-count: 1; }
.stagger-empty { font-size: 14px; font-style: italic; color: var(--muted); }

.stagger-card {
  display: block; width: 100%; break-inside: avoid;
  margin: 0 0 clamp(22px, 3vw, 36px);
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s ease;
}
.stagger-card:hover, .stagger-card:focus-visible {
  transform: rotate(var(--rot, 0deg)) translateY(-6px) scale(1.03);
}
.stagger-card__art {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; overflow: hidden; aspect-ratio: 2 / 3;
  box-shadow: 6px 6px 0 rgba(23, 19, 15, 0.14);
}
.stagger-card--video .stagger-card__art { aspect-ratio: 16 / 9; }
.stagger-card__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1.2px);
  background-size: 3px 3px; mix-blend-mode: multiply; opacity: 0.5;
}
.stagger-card__letter { font-family: 'Anton', sans-serif; font-size: clamp(46px, 9vw, 90px); opacity: 0.85; }
.stagger-card__soon {
  font-family: 'Anton', sans-serif; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.15;
  text-transform: uppercase; text-align: center; opacity: 0.9;
  transform: rotate(-6deg); border: 3px solid currentColor; border-radius: 10px;
  padding: 10px 14px;
}
.stagger-card__art img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stagger-card__play {
  position: relative; z-index: 1;
  width: clamp(44px, 6vw, 58px); height: clamp(44px, 6vw, 58px);
  border-radius: 50%; background: var(--cream); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; padding-left: 3px;
}
.stagger-card--video .stagger-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.stagger-card__meta { display: block; padding: 10px 2px 0; }
.stagger-card__title { display: block; font-size: clamp(14px, 1.6vw, 17px); font-weight: 600; line-height: 1.25; }
.stagger-card__sub { display: block; font-size: clamp(11px, 1.2vw, 13px); color: var(--muted); font-style: italic; margin-top: 2px; }

.stagger-card:nth-child(4n+1) .stagger-card__art { background: var(--ink); color: var(--cream); }
.stagger-card:nth-child(4n+2) .stagger-card__art { background: var(--poster); color: var(--ink); }
.stagger-card:nth-child(4n+3) .stagger-card__art { background: var(--muted); color: var(--cream); }
.stagger-card:nth-child(4n) .stagger-card__art { background: var(--cream); color: var(--ink); box-shadow: 6px 6px 0 rgba(23, 19, 15, 0.14), inset 0 0 0 3px var(--ink); }
.stagger-card--video .stagger-card__art { background: var(--ink); color: var(--cream); }
.stagger-grid--rows { display: grid; grid-template-columns: repeat(4, 1fr); column-count: auto; column-gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.stagger-grid--rows .stagger-card--wide { grid-column: span 2; align-self: center; justify-self: center; width: 84%; }
.stagger-card--wide .stagger-card__title { font-size: clamp(17px, 2vw, 21px); }
@media (max-width: 1000px) { .stagger-grid--rows { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .stagger-grid--rows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stagger-grid--rows { grid-template-columns: 1fr; } .stagger-grid--rows .stagger-card--wide { grid-column: 1; } }
.stagger-card:has(.stagger-card__soon) .stagger-card__art { background: var(--poster); color: var(--ink); }

/* Music videos: borderless 3-up grid of looping video previews. Each video
   is preload="none" with no <source src> until IntersectionObserver (in
   main.js) sees it enter the viewport, and it pauses again once scrolled
   past — a page full of these only ever downloads the 2-3 on screen. */
.mv-intro { margin: 0; padding: clamp(6px, 2vw, 16px) clamp(20px, 5vw, 56px) 0; max-width: 60ch; font-family: 'DM Sans', sans-serif; font-size: clamp(15px, calc(2.2vw - 2px), 21px); font-weight: 500; line-height: 1.55; color: var(--muted); }
.mv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px);
  padding: clamp(26px, 5vw, 46px) clamp(20px, 5vw, 56px) 60px;
}
@media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-card {
  display: block; width: 100%; background: none; border: none; padding: 0;
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  transition: transform 0.2s ease;
}
.mv-card:hover, .mv-card:focus-within { transform: translateY(-8px); }
.mv-card__media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: rgba(23, 19, 15, 0.15);
}
/* Music Videos only: a slight, uneven tilt on the thumbnails (not the text under them) */
.mv-grid--tilt .mv-card__media { transition: transform 0.2s ease; }
.mv-grid--tilt .mv-card:nth-child(7n+1) .mv-card__media { transform: rotate(-1.4deg); }
.mv-grid--tilt .mv-card:nth-child(7n+2) .mv-card__media { transform: rotate(1deg); }
.mv-grid--tilt .mv-card:nth-child(7n+3) .mv-card__media { transform: rotate(-0.7deg); }
.mv-grid--tilt .mv-card:nth-child(7n+4) .mv-card__media { transform: rotate(1.4deg); }
.mv-grid--tilt .mv-card:nth-child(7n+5) .mv-card__media { transform: rotate(-1.2deg); }
.mv-grid--tilt .mv-card:nth-child(7n+6) .mv-card__media { transform: rotate(0.6deg); }
.mv-grid--tilt .mv-card:nth-child(7n) .mv-card__media { transform: rotate(-1deg); }
.mv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-card__media::before {
  content: "\25B6"; position: absolute; z-index: 1; top: 50%; left: 50%; width: 52px; height: 52px;
  transform: translate(-50%, -50%) scale(0.85); border-radius: 50%; background: var(--cream); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px;
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
}
.mv-card:hover .mv-card__media::before, .mv-card:focus-visible .mv-card__media::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mv-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1.2px);
  background-size: 3px 3px; mix-blend-mode: multiply; opacity: 0.35;
}
.mv-card__play {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(23, 19, 15, 0.7); color: var(--cream); padding: 5px 9px; border-radius: 100px;
  opacity: 0; transition: opacity 0.2s ease;
}
.mv-card__media.is-loading .mv-card__play { opacity: 1; }
.mv-card__body { display: block; padding: 12px 2px 0; }
.mv-card__title { display: block; font-family: 'Anton', sans-serif; font-size: clamp(16px, 1.8vw, 19px); text-transform: uppercase; line-height: 1.15; color: var(--ink); }
.mv-card__artist { display: block; font-size: 13px; font-style: italic; color: var(--muted); margin-top: 3px; }

/* Brand work: client logos sit right on the page (greyscale, color on hover),
   loosely staggered via per-logo --h/--dy/--rot so the row reads as
   hand-arranged rather than a rigid grid. */
.brand-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(22px, 4vw, 44px) clamp(30px, 5vw, 56px);
  padding: clamp(14px, 3vw, 26px) clamp(20px, 5vw, 56px) clamp(34px, 6vw, 54px);
}
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; box-shadow: none; padding: 0;
  transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg));
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.75;
}
.brand-chip:hover, .brand-chip:focus-visible {
  opacity: 1;
  transform: translateY(calc(var(--dy, 0px) - 5px)) rotate(var(--rot, 0deg)) scale(1.08);
}
.brand-chip img { height: var(--h, 32px); width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); transition: filter 0.2s ease; }
.brand-chip:hover img, .brand-chip:focus-visible img { filter: none; }

/* One shared column so the intro, headings, logos, and panels all start on the
   same left edge as the page title (instead of each centering on its own). */
.brand-page { max-width: 1312px; padding: 0 clamp(20px, 5vw, 56px) 60px; }
.brand-page > .brand-intro, .brand-page > .brand-logos, .brand-page > .brand-panels, .brand-page > .section-heading { padding-left: 0; padding-right: 0; max-width: none; margin-left: 0; margin-right: 0; }
.brand-page > .brand-panels { padding-top: 8px; padding-bottom: 8px; }
.brand-intro { padding: clamp(6px, 2vw, 16px) clamp(20px, 5vw, 56px) clamp(10px, 2vw, 20px); max-width: 1100px; font-family: 'DM Sans', sans-serif; }
.brand-intro__title { margin: 0 0 14px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(26px, 4.4vw, 48px); line-height: 1; text-transform: uppercase; color: var(--muted); opacity: 0.8; }
.brand-intro__lead { margin: 0; max-width: 52ch; font-size: clamp(15px, calc(2.2vw - 2px), 21px); font-weight: 500; line-height: 1.55; color: var(--muted); }
.brand-intro__lead strong { font-weight: 600; color: var(--ink); }
.section-heading--gap { margin-top: 20px; }

/* Brand panels: each brand is a poster-style color block with a giant
   name, echoing the Acting posters. --fg/--bg drive text and surface colors. */
.brand-panels { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); padding: 8px clamp(20px, 5vw, 56px) 8px; max-width: 1200px; margin: 0 auto; }
.brand-panel { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(22px, 4vw, 44px); background: var(--bg); color: var(--fg); box-shadow: 8px 8px 0 rgba(23, 19, 15, 0.14); }
.brand-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1.2px); background-size: 3px 3px; mix-blend-mode: multiply; opacity: 0.3; }
.brand-panel > * { position: relative; z-index: 1; }
.brand-panel--poster { --bg: var(--poster); --fg: var(--ink); }
.brand-panel--ink { --bg: var(--ink); --fg: var(--cream); }
.brand-panel--taupe { --bg: var(--muted); --fg: var(--cream); }
.brand-panel--cream { --bg: var(--cream); --fg: var(--ink); box-shadow: 8px 8px 0 rgba(23, 19, 15, 0.14), inset 0 0 0 3px var(--ink); }
.brand-panel__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: clamp(18px, 3vw, 30px); }
.brand-panel__name { margin: 0; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(44px, 9vw, 112px); line-height: 0.9; text-transform: uppercase; letter-spacing: 0.01em; }
.brand-panel__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid currentColor; padding: 5px 12px; border-radius: 100px; white-space: nowrap; }
.brand-panel__body--split { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(22px, 4vw, 48px); align-items: center; }
.brand-panel__info--text { flex: 1 1 300px; max-width: 520px; }
.brand-panel__row--fit { flex: 0 0 auto; justify-content: center; }
.brand-panel__still { flex: 0 0 min(240px, 100%); display: block; transform: rotate(-3deg); }
.brand-panel__still img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; box-shadow: 8px 8px 0 rgba(23, 19, 15, 0.2); }
.brand-panel__info { flex: 0 1 540px; min-width: 0; }
.brand-panel__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.brand-panel__bullets li { position: relative; padding-left: 18px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px; line-height: 1.55; }
.brand-panel__bullets strong { font-weight: 700; }
.brand-panel__bullets--spaced { margin: 0 auto 26px; max-width: 60ch; }
.brand-panel__bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.brand-panel__bigstats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px clamp(28px, 5vw, 64px); margin: 0 0 clamp(18px, 3vw, 28px); }
.brand-panel__bigstat { display: flex; align-items: center; gap: 12px; }
.brand-panel__bigstat + .brand-panel__bigstat { padding-left: clamp(28px, 5vw, 64px); border-left: 2px solid rgba(244, 238, 221, 0.25); }
.brand-panel__bigstat strong { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(48px, 7vw, 84px); line-height: 1; color: var(--poster); letter-spacing: 0.01em; }
.brand-panel__bigstat span { max-width: 6.5em; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(11px, 1.3vw, 14px); line-height: 1.25; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 480px) { .brand-panel__bigstat + .brand-panel__bigstat { padding-left: 0; border-left: none; } }
.brand-panel--poster .brand-panel__bigstat strong { color: var(--ink); }
.brand-panel--poster .brand-panel__bigstat + .brand-panel__bigstat { border-left-color: rgba(23, 19, 15, 0.25); }
.brand-panel__caption { margin: 8px 0 22px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.brand-panel__still { position: relative; transition: transform 0.2s ease; }
.brand-panel__still:hover, .brand-panel__still:focus-visible { transform: rotate(-3deg) translateY(-8px); }
.brand-panel__still::after { content: "\25B6"; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%) scale(0.85); border-radius: 50%; background: var(--cream); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.brand-panel__still:hover::after, .brand-panel__still:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.brand-panel__bullets a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--poster); }
.brand-panel__bullets a:hover, .brand-panel__bullets a:focus-visible { color: var(--poster); }
.brand-panel__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.brand-panel .mv-card { color: inherit; }
.brand-panel .mv-card__title { color: inherit; }
.brand-panel .mv-card__artist { color: inherit; opacity: 0.7; }
.brand-panel .mv-card__media { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25); }
.mv-card--tall { width: 190px; transform: rotate(var(--rot, 0deg)); }
.mv-card--tall:hover, .mv-card--tall:focus-visible { transform: rotate(var(--rot, 0deg)) translateY(-8px); }
.mv-card--tall .mv-card__media { aspect-ratio: 9 / 16; }
.mv-card--wide { width: min(360px, 100%); transform: rotate(var(--rot, 0deg)); }
.mv-card--wide:hover, .mv-card--wide:focus-visible { transform: rotate(var(--rot, 0deg)) translateY(-8px); }
.brand-panel__desc strong { font-weight: 700; }
.brand-panel__desc { margin: 0 auto 16px; text-align: center; max-width: 52ch; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; }
.brand-panel__visual { margin: 6px auto 16px; max-width: 520px; }
.brand-panel__visual img, .brand-panel__visual video { width: 100%; display: block; border-radius: 14px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25); }
.brand-panel__note { margin: 6px 0 0; font-size: 13px; font-style: italic; opacity: 0.75; }
@media (max-width: 640px) {
  .brand-panel__still { margin: 0 auto; flex-basis: 220px; }
  .brand-panel__row { justify-content: center; }
  }

/* video modal */
.video-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: fixed; inset: 0; background: rgba(23, 19, 15, 0.82); border: none; padding: 0; cursor: pointer; }
.video-modal__panel { position: relative; background: var(--cream); max-width: 900px; width: 100%; margin: auto; padding: 50px 20px 20px; border: 3px solid var(--ink); }
.video-modal__close {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--cream); border: none; font-size: 20px; line-height: 1; cursor: pointer;
}
.video-modal__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; color: var(--cream); display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Oswald', sans-serif; font-size: 14px; padding: 0; border-radius: 6px; overflow: hidden; }
.video-modal__embed:not(:has(iframe, video)) { padding: 24px; }
.video-modal__ext { position: relative; display: block; width: 100%; height: 100%; }
.video-modal__ext img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-modal__ext span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--cream); color: var(--ink); font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 100px; white-space: nowrap; }
.video-modal__ext:hover span { background: var(--poster); }
.video-modal__embed iframe, .video-modal__embed video { width: 100%; height: 100%; border: 0; }
.video-modal__caption { margin-top: 14px; font-size: 14px; text-align: center; }
.video-modal__caption strong { display: block; font-size: 16px; margin-bottom: 2px; }
.video-modal__credits { margin: 18px auto 6px; padding: 0; max-width: 540px; text-align: left; }
.video-modal__credits::before { content: ""; display: block; width: 44px; height: 3px; background: var(--poster); margin: 0 auto 16px; }
.video-modal__credits > div { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.video-modal__credits dt { flex: 0 0 auto; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.video-modal__credits > div::after { content: ""; order: 1; flex: 1 1 auto; min-width: 12px; border-bottom: 1px dotted rgba(23, 19, 15, 0.3); transform: translateY(-3px); }
.video-modal__credits dd { order: 2; margin: 0; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 14px; text-align: right; }
@media (max-width: 560px) {
  .video-modal__credits > div { flex-wrap: wrap; row-gap: 1px; padding: 9px 0 0; }
  .video-modal__credits > div + div { margin-top: 4px; border-top: 1px solid rgba(23, 19, 15, 0.12); padding-top: 11px; }
  .video-modal__credits > div::after { display: none; }
  .video-modal__credits dt { flex-basis: 100%; }
  .video-modal__credits dd { text-align: left; }
}

/* footer */
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 26px clamp(20px, 5vw, 56px); border-top: 2px solid var(--ink); flex-wrap: wrap; gap: 14px; }
.site-footer .socials { display: flex; gap: 16px; }
.site-footer .socials a { display: flex; color: var(--ink); opacity: 0.75; transition: opacity 0.15s ease; }
.site-footer .socials a:hover, .site-footer .socials a:focus-visible { opacity: 1; }
.site-footer svg { width: 18px; height: 18px; }
.site-footer small { color: var(--muted); font-size: 12px; }

/* about page */
.about-hero { display: flex; align-items: center; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; padding: clamp(50px, 9vw, 110px) clamp(20px, 5vw, 56px) clamp(30px, 5vw, 50px); max-width: 1200px; margin: 0 auto; }
.about-hero__text { flex: 1 1 360px; min-width: 0; }
.about-hero__title { margin: 0 0 24px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(48px, 9vw, 108px); line-height: 0.92; text-transform: uppercase; }
.about-hero__title span { display: inline-block; background: var(--poster); padding: 0 0.12em; transform: rotate(-1.5deg); }
.about-socials { display: flex; justify-content: flex-start; gap: clamp(18px, 3vw, 28px); margin: 22px 0 0; }
.about-socials a { display: flex; color: var(--muted); transition: color 0.15s ease, transform 0.15s ease; }
.about-socials a:hover, .about-socials a:focus-visible { color: var(--ink); transform: translateY(-3px) rotate(-4deg); }
.about-socials svg { width: 24px; height: 24px; fill: currentColor; }
.about-bio { max-width: 520px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.65; margin: 0 0 24px; }
.about-cta { display: inline-block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; background: var(--ink); color: var(--cream); padding: 13px 24px; border-radius: 100px; transition: transform 0.15s ease, background 0.15s ease; }
.about-cta:hover, .about-cta:focus-visible { background: var(--poster); color: var(--ink); transform: translateY(-3px) rotate(-1.5deg); }
.about-hero__photo { position: relative; flex: 0 1 340px; margin: 0 auto; }
.about-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; transform: rotate(3deg); box-shadow: 10px 10px 0 rgba(23, 19, 15, 0.16); }
.about-star { position: absolute; fill: var(--ink); animation: about-spin 9s linear infinite; }
.about-star--a { width: 54px; height: 54px; top: -22px; left: -18px; }
.about-star--b { width: 36px; height: 36px; bottom: 18px; right: -14px; fill: var(--poster); animation-duration: 6s; animation-direction: reverse; }
@keyframes about-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .about-star { animation: none; } }

.about-facts { display: flex; justify-content: center; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 56px) 60px; }
.about-facts h2 { margin: 0 0 6px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.about-facts p { margin: 0; font-size: 15px; }

/* Scroll-in entrance (see main.js) — .reveal is added by JS, so pages stay
   fully visible without it. */
@keyframes reveal-up {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}
.reveal { opacity: 0; }
.reveal.is-in { animation: reveal-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both; }