/* 8 Knockin: one stylesheet for the company site and Ray's portfolio.
   Type and palette come from the existing logo (condensed bold sans, charcoal on paper).
   One accent (tally red), sharp corners everywhere, dark by default with a light theme. */

:root {
  --bg: #0c0c0d;
  --bg-2: #151516;
  --bg-3: #1d1d1f;
  --ink: #ecebe7;
  --ink-2: #a9a7a1;
  --line: rgb(236 235 231 / 0.14);
  --accent: #ef4f37;
  --accent-ink: #0c0c0d;
  --scrim: rgb(8 8 9 / 0.62);

  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-body: "Geist", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index scale: content 0, nav 20, overlay 30, grain 40 */
  --z-nav: 20;
  --z-overlay: 30;
  --z-grain: 40;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #efeeea;
    --bg-2: #e6e5e0;
    --bg-3: #dcdbd5;
    --ink: #161616;
    --ink-2: #57554f;
    --line: rgb(22 22 22 / 0.14);
    --accent: #c4321c;
    --accent-ink: #f6f5f1;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Film grain on a fixed, non-interactive layer (never on scrolling content) */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 72%;
  font-variation-settings: "wdth" 72;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
  margin: 0;
}
.h2 { font-size: clamp(2.6rem, 6vw, 5.25rem); }
.h3 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 0.95; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); max-width: 58ch; margin: 0; }
.meta {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
}
p { margin: 0 0 1em; }

/* Client-supplied content still missing. Visible on purpose so it can't ship by accident. */
.tbc {
  font-family: var(--f-mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--accent);
  border: 1px dashed currentColor;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  font: 600 14px/1 var(--f-body); letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn i { font-size: 16px; flex: none; }
.on-image .btn { background: #ecebe7; color: #0c0c0d; border-color: #ecebe7; }
.on-image .btn:hover { background: #ef4f37; border-color: #ef4f37; color: #0c0c0d; }
.on-image .btn--ghost { background: rgb(12 12 13 / 0.35); color: #ecebe7; border-color: rgb(236 235 231 / 0.45); backdrop-filter: blur(6px); }
.on-image .btn--ghost:hover { border-color: #ecebe7; color: #ecebe7; background: rgb(12 12 13 / 0.55); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link-arrow:hover { border-color: var(--accent); gap: 12px; }
.link-arrow i { font-size: 15px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.on-hero:not(.is-solid) { color: #ecebe7; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 46px; height: 35px; flex: none; color: currentColor; }
.brand__word {
  font-family: var(--f-display); font-weight: 800; font-stretch: 78%;
  font-variation-settings: "wdth" 78; font-size: 22px; letter-spacing: 0.01em; line-height: 1;
}
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { border-color: currentColor; }
.nav__links .btn { height: 38px; padding: 0 16px; font-size: 13px; }
.nav.on-hero:not(.is-solid) .nav__links .btn { background: #ecebe7; color: #0c0c0d; border-color: #ecebe7; }
.nav__toggle { display: none; background: none; border: 1px solid currentColor; height: 38px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; }

@media (max-width: 820px) {
  .nav__toggle { display: inline-flex; align-items: center; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; visibility: visible; }
  .nav.is-open { background: var(--bg); color: var(--ink); }
  .nav__links a { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav__links li:last-child a { border: 0; margin-top: 14px; display: inline-flex; }
}

/* ---------- Reveal motion (IntersectionObserver adds .is-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Clip the inner image, not the observed frame: a fully clipped target never reports as intersecting */
  .js [data-reveal="img"] { opacity: 1; transform: none; }
  .js [data-reveal="img"] > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease), transform 1.2s var(--ease); }
  .js [data-reveal="img"].is-in > img { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 9vw, 128px); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Media frame keeps aspect ratio and slow zoom on hover */
.frame { display: block; position: relative; overflow: hidden; background: var(--bg-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.frame:hover img, .frame:hover > img { transform: scale(1.03); }
.ar-wide { aspect-ratio: 16 / 9; }
.ar-cine { aspect-ratio: 2.1 / 1; }
.ar-four { aspect-ratio: 4 / 3; }
.ar-tall { aspect-ratio: 4 / 5; }
.ar-portrait { aspect-ratio: 2 / 3; }
.caption { margin-top: 10px; }

/* ================= HOME ================= */

/* Hero: title index over a full-bleed still (A24-style). Hovering or focusing a title swaps the still. */
.hero {
  position: relative; min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  color: #ecebe7; background: #0c0c0d; isolation: isolate;
}
.hero__stills { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__stills img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1s var(--ease), transform 6s linear;
}
.hero__stills img.is-active { opacity: 1; transform: scale(1); }
.hero__stills::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(8 8 9 / 0.55) 0%, rgb(8 8 9 / 0) 22%),
    linear-gradient(0deg, rgb(8 8 9 / 0.92) 0%, rgb(8 8 9 / 0.35) 55%, rgb(8 8 9 / 0.1) 100%),
    linear-gradient(90deg, rgb(8 8 9 / 0.55) 0%, rgb(8 8 9 / 0) 60%);
}
.hero__top { padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); }
.hero__intro { max-width: 34ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; color: rgb(236 235 231 / 0.86); margin: 0; }
.hero__bottom { padding-bottom: clamp(28px, 6vh, 64px); }

.titles { list-style: none; margin: 0; padding: 0; }
.titles li { border-top: 1px solid rgb(236 235 231 / 0.16); }
.titles li:last-child { border-bottom: 1px solid rgb(236 235 231 / 0.16); }
.titles a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
  padding: 10px 0 8px; text-decoration: none;
}
.titles .display {
  font-size: clamp(2.5rem, 7.2vw, 6.4rem);
  color: rgb(236 235 231 / 0.5);
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.titles .meta { color: rgb(236 235 231 / 0.62); text-align: right; transition: color 0.4s var(--ease); }
.titles a.is-active .display, .titles a:hover .display, .titles a:focus-visible .display { color: #ecebe7; transform: translateX(8px); }
.titles a.is-active .meta { color: #ecebe7; }
.titles a.is-active .display::after {
  content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin-left: 0.18em;
  background: var(--accent); vertical-align: 0.12em;
}
@media (max-width: 640px) {
  .titles a { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .titles .meta { text-align: left; }
}

/* Manifesto: the company line, set big */
.manifesto { text-align: center; }
.manifesto__text {
  font-family: var(--f-display); font-weight: 700; font-stretch: 80%; font-variation-settings: "wdth" 80;
  font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.01em;
  text-transform: uppercase; max-width: 20ch; margin: 0 auto; text-wrap: balance;
}
.manifesto__text .dim { color: var(--ink-2); }
.manifesto__text em { font-style: normal; color: var(--accent); }
.manifesto .meta { margin-top: 28px; }

/* Productions */
.prod-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 6vw, 80px); }

/* Feature: A Love Supreme. Big still + info column + offset pair */
.feature { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.feature__main { grid-column: 1 / span 8; }
.feature__info { grid-column: 9 / span 4; position: sticky; top: calc(var(--nav-h) + 24px); }
.feature__pair { grid-column: 1 / span 8; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(8px, 1vw, 16px); }
.feature__pair .frame:last-child { margin-top: clamp(40px, 6vw, 96px); }
.facts { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 15px; }
.facts .meta { padding-top: 2px; }
.pill {
  display: inline-block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em;
  border: 1px solid var(--line); padding: 4px 8px; text-transform: uppercase;
}
@media (max-width: 900px) {
  .feature__main, .feature__info, .feature__pair { grid-column: 1 / -1; }
  .feature__info { position: static; }
  .feature__pair .frame:last-child { margin-top: 0; }
}

/* Mosaic: Scumbags. Three stills in an asymmetric grid with the text block inset */
.mosaic {
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto;
  margin-top: clamp(80px, 11vw, 160px);
}
.mosaic__a { grid-column: 1; grid-row: 1 / span 2; }
.mosaic__a .frame { height: 100%; min-height: 420px; }
.mosaic__b { grid-column: 2; grid-row: 1; }
.mosaic__text { grid-column: 2; grid-row: 2; align-self: end; padding-top: 12px; }
.mosaic__band { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr; }
  .mosaic__a, .mosaic__b, .mosaic__text, .mosaic__band { grid-column: 1; grid-row: auto; }
  .mosaic__a .frame { min-height: 0; aspect-ratio: 3 / 2; }
}

/* Slate: typographic list of development projects */
.slate { margin-top: clamp(80px, 11vw, 160px); }
.slate__list { list-style: none; margin: 32px 0 0; padding: 0; }
.slate__row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 24px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.slate__row:last-child { border-bottom: 1px solid var(--line); }
.slate__row .h3 { transition: color 0.3s var(--ease); }
.slate__row:hover .h3 { color: var(--accent); }
.slate__row p { margin: 0; font-size: 15px; color: var(--ink-2); }
.status { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.status--live { color: var(--accent); }
@media (max-width: 900px) {
  .slate__row { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .slate__row > :nth-child(2), .slate__row > :nth-child(3) { grid-column: 1 / -1; }
  .slate__row > .status { grid-row: 1; grid-column: 2; }
}

/* Music: bento of the channel's releases. Featured video plays inline on click. */
.music { background: var(--bg-2); }
.music__grid {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "made made made made side side"
    "made made made made side2 side2"
    "a a b b c c"
    "note note note note note note";
  margin-top: clamp(36px, 5vw, 64px);
}
.music__grid > :nth-child(1) { grid-area: made; }
.music__grid > :nth-child(2) { grid-area: side; }
.music__grid > :nth-child(3) { grid-area: side2; }
.music__grid > :nth-child(4) { grid-area: a; }
.music__grid > :nth-child(5) { grid-area: b; }
.music__grid > :nth-child(6) { grid-area: c; }
.music__grid > :nth-child(7) { grid-area: note; }
.music__note {
  background: var(--accent); color: var(--accent-ink);
  padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.music__note .display { font-size: clamp(1.8rem, 3vw, 2.6rem); }
@media (min-width: 901px) {
  .music__note { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px 36px; }
  .music__note .display { flex: 0 0 auto; }
  .music__note p { flex: 1 1 280px; }
}
.music__note p { margin: 0; font-size: 15px; font-weight: 500; }
.music__note a { font-weight: 700; }
/* Smaller cells fill their grid area; only the featured video keeps a strict 16:9 */
.music__grid .video:not(.video--lg) { height: 100%; }
.music__grid .video:not(.video--lg) .frame { height: 100%; aspect-ratio: auto; min-height: 170px; }
.music__grid > :nth-child(n+4):nth-child(-n+6) .frame { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 900px) {
  .music__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "made made" "side side2" "a b" "c note"; }
}
@media (max-width: 560px) {
  .music__grid { grid-template-columns: 1fr; grid-template-areas: "made" "side" "side2" "a" "b" "c" "note"; }
}

.video { position: relative; display: block; width: 100%; text-align: left; padding: 0; border: 0; background: none; cursor: pointer; }
.video .frame { aspect-ratio: 16 / 9; }
.video .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgb(8 8 9 / 0.7), rgb(8 8 9 / 0) 55%);
}
.video__play {
  position: absolute; left: 16px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px; color: #ecebe7;
}
.video__play .vp {
  display: grid; place-items: center; width: 42px; height: 42px;
  background: #ecebe7; color: #0c0c0d; transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.video__play .vp i { font-size: 17px; }
.video:hover .video__play .vp { background: #ef4f37; transform: scale(1.06); }
.video__title { font-weight: 600; font-size: 15px; line-height: 1.25; }
.video__title small { display: block; font-family: var(--f-mono); font-size: 11.5px; font-weight: 400; opacity: 0.75; letter-spacing: 0.04em; }
.video--lg .video__play { left: 24px; bottom: 22px; }
.video--lg .video__play .vp { width: 58px; height: 58px; }
.video--lg .video__play .vp i { font-size: 22px; }
.video--lg .video__title { font-size: 19px; }
/* hqdefault thumbnails carry letterbox bars: zoom past them */
.video .frame img.lb { transform: scale(1.36); }
.video:hover .frame img.lb { transform: scale(1.4); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

/* Founder split */
.founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 96px); align-items: center; }
.founder .frame { aspect-ratio: 4 / 5; }
.founder__body .lede { margin: 22px 0 32px; }
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } .founder .frame { max-width: 460px; } }

/* Contact block + footer */
.contact { padding-block: clamp(96px, 13vw, 180px) clamp(40px, 5vw, 64px); }
.contact__big {
  font-family: var(--f-display); font-weight: 800; font-stretch: 72%; font-variation-settings: "wdth" 72;
  text-transform: uppercase; line-height: 0.88; font-size: clamp(3.4rem, 13vw, 12rem); margin: 0;
}
.contact__big a { text-decoration: none; transition: color 0.3s var(--ease); }
.contact__big a:hover { color: var(--accent); }
.contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 6vw, 80px); }
.contact__grid h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.contact__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact__grid a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s var(--ease); }
.contact__grid a:hover { border-color: var(--accent); }
.footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 28px; border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 112px); }
@media (max-width: 720px) { .contact__grid { grid-template-columns: 1fr; } }

/* ================= PORTFOLIO ================= */

.p-hero { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(56px, 7vw, 96px); }
.p-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); align-items: end; }
.p-hero__name { font-size: clamp(4rem, 12.5vw, 11.5rem); line-height: 0.84; }
.p-hero__name span { display: block; }
.p-hero__name span:last-child { color: var(--ink-2); }
.p-hero__sub { margin: 28px 0 32px; }
.p-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.p-hero .frame { aspect-ratio: 2 / 3; }
@media (max-width: 860px) {
  .p-hero__grid { grid-template-columns: 1fr; }
  .p-hero .frame { aspect-ratio: 4 / 5; max-width: 520px; order: -1; }
}

/* Known-for strip */
.known { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.known > div { padding: 22px 20px 22px 0; }
.known > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.known .display { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1; margin-bottom: 8px; }
@media (max-width: 860px) {
  .known { grid-template-columns: 1fr 1fr; }
  .known > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .known > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Roles bento: 6 cells, varied sizes */
.roles {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
  margin-top: clamp(36px, 5vw, 64px);
}
.role { position: relative; display: flex; flex-direction: column; text-decoration: none; }
.role .frame { flex: 1; min-height: 220px; }
.role__cap { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-top: 12px; }
.role__cap strong { font-weight: 600; }
.role--1 { grid-column: span 4; grid-row: span 2; }
.role--2 { grid-column: span 2; grid-row: span 2; }
.role--3 { grid-column: span 2; }
.role--4 { grid-column: span 2; }
.role--5 { grid-column: span 2; }
.role--text {
  grid-column: span 2; background: var(--bg-3); padding: 22px; justify-content: space-between; gap: 22px;
  border-top: 3px solid var(--accent);
}
.role--text .display { font-size: clamp(2rem, 3.4vw, 3rem); }
.role--text p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) {
  .roles { grid-template-columns: 1fr 1fr; }
  .role--1 { grid-column: 1 / -1; grid-row: auto; }
  .role--2, .role--3, .role--4, .role--5, .role--text { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .roles { grid-template-columns: 1fr; }
  .role, .role--text { grid-column: 1 / -1 !important; }
}

/* Reels: horizontal scroll-snap strip */
.reels {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 42%);
  gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 18px; margin-top: clamp(32px, 4vw, 56px);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.reels > * { scroll-snap-align: start; }
.reel { text-decoration: none; }
.reel .frame { aspect-ratio: 16 / 9; }
.reel .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 8 9 / 0.65), transparent 50%); }
.reel__len { position: absolute; right: 14px; bottom: 12px; z-index: 1; color: #ecebe7; }
.reel h3 { margin: 14px 0 4px; font-size: 17px; font-weight: 600; }
@media (max-width: 640px) { .reels { grid-auto-columns: 86%; } }

/* Bio */
.bio { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 96px); }
.bio__text { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; max-width: 62ch; }
.bio__text p:first-child::first-line { font-weight: 600; }
.bio aside .frame { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } .bio aside { max-width: 380px; } }

/* Credits tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: clamp(28px, 4vw, 48px) 0 8px; }
.tab {
  height: 40px; padding: 0 16px; background: transparent; border: 1px solid var(--line); cursor: pointer;
  font-size: 14px; font-weight: 500; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab sup { font-family: var(--f-mono); font-size: 10px; margin-left: 4px; opacity: 0.7; }
.credits { width: 100%; border-collapse: collapse; }
.credits th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 18px 12px 10px 0; }
.credits td { padding: 14px 12px 14px 0; vertical-align: baseline; border-top: 1px solid var(--line); }
.credits td:first-child { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); width: 92px; }
.credits td:nth-child(2) { font-weight: 600; }
.credits td:nth-child(2) small { display: block; font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
.credits td:last-child { color: var(--ink-2); }
.credits tr.is-upcoming td:first-child { color: var(--accent); }
[role="tabpanel"][hidden] { display: none; }
@media (max-width: 640px) {
  .credits thead { display: none; }
  .credits tr { display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid var(--line); padding: 12px 0; }
  .credits td { border: 0; padding: 0 8px 0 0; }
  .credits td:last-child { grid-column: 2; font-size: 14px; }
}

/* Recognition: two big nominations + festival list */
.honors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 4vw, 56px); }
.honor { padding: clamp(22px, 3vw, 40px); background: var(--bg-2); display: flex; flex-direction: column; gap: 18px; }
.honor .display { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.honor p { margin: 0; color: var(--ink-2); }
.honor strong { color: var(--ink); font-weight: 600; }
.festivals { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(16px, 2vw, 28px); align-items: stretch; }
.festivals .frame { min-height: 320px; }
.festivals ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.festivals li { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.festivals li strong { font-weight: 600; }
@media (max-width: 860px) { .honors, .festivals { grid-template-columns: 1fr; } }

/* Gallery marquee (the one marquee on the site) */
.gallery { overflow: hidden; }
.gallery__track { display: flex; gap: 16px; width: max-content; }
.gallery__track .frame { height: clamp(200px, 26vw, 340px); flex: none; }
.gallery__track .frame img { width: auto; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gallery__track { animation: marquee 70s linear infinite; }
  .gallery:hover .gallery__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .gallery { overflow-x: auto; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* RNL band */
.rnl { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.rnl .display { font-size: clamp(5rem, 16vw, 13rem); line-height: 0.8; color: var(--accent); }
@media (max-width: 860px) { .rnl { grid-template-columns: 1fr; } }

/* Social / listen link rows */
.socials, .listen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.socials { margin-top: 28px; }
.socials a, .listen a {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  border: 1px solid var(--line); transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.socials a:hover { border-color: var(--accent); color: var(--accent); }
.socials i, .listen i { font-size: 17px; }
.listen a { border-color: rgb(12 12 13 / 0.3); color: var(--accent-ink); font-weight: 600; }
.listen a:hover { border-color: var(--accent-ink); }