@font-face{font-family:"Switzer";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/switzer-400.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/switzer-600.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/switzer-700.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/switzer-900.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/marcellus-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spectral-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/spectral-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/courier-prime-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* site.css */
/* Lolli Brands Entertainment. "The Record, in full frame."
   Light frame, dark stage. Colour comes from the key art only.
   Type: Switzer (display + text), Courier Prime (sluglines, metadata), Six Caps (billing block). */

:root {
  --paper: #F4F1EA;
  --paper-2: #EAE6DC;
  --ink: #131211;
  --ink-2: #55524B;
  --rule: rgba(19, 18, 17, .16);
  --stage: #0B0A0D;
  --stage-2: #16131B;
  --on-stage: #F2EEE6;
  --on-stage-2: rgba(242, 238, 230, .64);
  --rule-stage: rgba(242, 238, 230, .16);
  --rec: #E5352B;                 /* the REC light: the only structural accent, used tiny */
  --accent: var(--rec);           /* overridden per title from its key art */

  --f-sans: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --f-bill: "Six Caps", "Sofia Sans Extra Condensed", Impact, sans-serif;

  --t-hero: clamp(2.6rem, 9.6vw, 10.75rem);
  --t-h1: clamp(2.5rem, 6.4vw, 6.75rem);
  --t-h2: clamp(1.95rem, 4vw, 4.1rem);
  --t-h3: clamp(1.3rem, 1.9vw, 1.85rem);
  --t-lead: clamp(1.12rem, 1.45vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: .8125rem;
  --t-slug: .76rem;

  --margin: clamp(18px, 3.4vw, 60px);
  --gutter: clamp(14px, 1.9vw, 30px);
  --header-h: 76px;

  --ease-productive: cubic-bezier(.2, 0, .38, .9);
  --ease-expressive: cubic-bezier(.4, .14, .3, 1);
  --ease-out: cubic-bezier(0, 0, .38, .9);
  --ease-in: cubic-bezier(.2, 0, 1, .9);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; transition: top .2s var(--ease-out); }
.skip:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.stage { background: var(--stage); color: var(--on-stage); }
.frame { background: var(--paper); color: var(--ink); }
.frame-2 { background: var(--paper-2); color: var(--ink); }
section { position: relative; }
.pad { padding-block: clamp(72px, 11vw, 190px); }
.pad-s { padding-block: clamp(48px, 6vw, 110px); }

/* ---------- type ---------- */
.hero-t, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.042em; line-height: .92; text-wrap: balance; }
.hero-t { font-size: var(--t-hero); letter-spacing: -.05em; line-height: .88; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); line-height: .96; letter-spacing: -.036em; }
.h3 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.022em; font-weight: 600; }
.lead { font-size: var(--t-lead); line-height: 1.38; letter-spacing: -.012em; max-width: 46ch; text-wrap: pretty; }
.body { max-width: 62ch; text-wrap: pretty; }
.body p + p { margin-top: 1.05em; }
.muted { color: var(--ink-2); }
.stage .muted { color: var(--on-stage-2); }
.slug {
  font-family: var(--f-mono); font-size: var(--t-slug); letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.35; display: inline-flex; gap: .7em; align-items: baseline;
}
.slug::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: currentColor; transform: translateY(-.02em); flex: none; }
.slug.no-dot::before { display: none; }
.mono { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: .03em; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- status tag (REC logic) ---------- */
.status { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .6em; padding: .5em .8em .42em; border: 1px solid currentColor; border-radius: 2px; line-height: 1; white-space: nowrap; }
.status i { width: .62em; height: .62em; border-radius: 50%; background: currentColor; display: block; flex: none; }
.status[data-s="In production"] i { background: var(--rec); box-shadow: 0 0 0 0 rgba(229, 53, 43, .6); animation: rec 1.9s var(--ease-productive) infinite; }
.status[data-s="Completed"] i { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.status[data-s="Pre-production"] i { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: .7; }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(229, 53, 43, .55); } 70%, 100% { box-shadow: 0 0 0 .7em rgba(229, 53, 43, 0); } }

/* ---------- buttons and links ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .7em; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; padding: 1.02em 1.5em .98em; border-radius: 999px; border: 1px solid currentColor; line-height: 1; transition: background-color .25s var(--ease-productive), color .25s var(--ease-productive), transform .18s var(--ease-out); }
.btn svg { width: 1em; height: 1em; transition: transform .3s var(--ease-expressive); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage .btn--solid { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); }
.btn:active { transform: scale(.975); }
@media (hover: hover) {
  .btn:hover { background: var(--ink); color: var(--paper); }
  .stage .btn:hover { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); }
  .btn--solid:hover { background: transparent; color: var(--ink); }
  .stage .btn--solid:hover { background: transparent; color: var(--on-stage); }
  .btn:hover svg { transform: translate(3px, -3px); }
}
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .12em; transition: background-size .35s var(--ease-expressive); }
@media (hover: hover) { .ul:hover { background-size: 0 1px; background-position: 100% 100%; } }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--margin); color: var(--ink); transition: color .35s var(--ease-productive), transform .45s var(--ease-expressive), background-color .35s var(--ease-productive); }
.hdr[data-on="dark"] { color: var(--on-stage); }
.hdr.is-solid[data-on="light"] { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.hdr.is-solid[data-on="dark"] { background: color-mix(in srgb, var(--stage) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hdr.is-hidden { transform: translateY(-101%); }
.brand { display: inline-flex; align-items: center; height: 40px; }
.brand img { height: 40px; width: auto; }
.brand .lg-dark, .hdr[data-on="dark"] .brand .lg-light { display: none; }
.hdr[data-on="dark"] .brand .lg-dark { display: block; }
.brand-txt { font-weight: 700; letter-spacing: -.04em; font-size: 1.35rem; line-height: .9; }
.brand-txt small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; margin-top: .45em; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); font-weight: 500; font-size: .95rem; letter-spacing: -.01em; }
.nav a[aria-current="page"] { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .15em; }
.nav .btn { padding: .78em 1.2em .74em; font-size: .9rem; }
.menu-btn { display: none; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 10px 0 10px 14px; }
.menu { position: fixed; inset: 0; z-index: 79; background: var(--stage); color: var(--on-stage); display: grid; align-content: center; padding: calc(var(--header-h) + 24px) var(--margin) 48px; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease-in), visibility 0s linear .3s; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .4s var(--ease-out), visibility 0s; }
.menu a { display: block; font-weight: 700; font-size: clamp(2.6rem, 11vw, 5rem); letter-spacing: -.045em; line-height: 1.02; padding-block: .08em; }
.menu .slug { margin-top: 36px; color: var(--on-stage-2); }
@media (max-width: 860px) { .nav { display: none; } .menu-btn { display: block; } }

/* ---------- reveal vocabulary (two moves: mask rise, frame wipe) ---------- */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-expressive); transition-delay: var(--d, 0s); }
html.js .rv.is-in { opacity: 1; transform: none; }
html.js .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-expressive); transition-delay: var(--d, 0s); }
html.js .wipe > img, html.js .wipe > video, html.js .wipe > picture img { transform: scale(1.14); transition: transform 1.9s var(--ease-expressive); transition-delay: var(--d, 0s); }
html.js .wipe.is-in { clip-path: inset(0 0 0 0); }
html.js .wipe.is-in > img, html.js .wipe.is-in > video, html.js .wipe.is-in > picture img { transform: none; }
.line-mask { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.line-mask > span { display: block; }
html.js .line-mask > span { transform: translateY(108%); transition: transform 1.25s var(--ease-expressive); transition-delay: var(--d, 0s); }
html.js .is-in .line-mask > span, html.js .line-mask.is-in > span { transform: none; }

/* ---------- HERO: the reel that docks into the grid ---------- */
.dock { background: var(--stage); color: var(--on-stage); }
.dock__pin { position: relative; min-height: 100svh; overflow: clip; }
.dock__stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dock__reel { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 0; background: #000; will-change: top, left, width, height; }
.dock__reel video, .dock__reel img { width: 100%; height: 100%; object-fit: cover; }
.dock__reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 13, .55) 0%, rgba(11, 10, 13, 0) 26%, rgba(11, 10, 13, 0) 48%, rgba(11, 10, 13, .82) 100%); opacity: var(--veil, 1); pointer-events: none; }
.dock__copy { position: absolute; z-index: 3; left: var(--margin); right: var(--margin); bottom: clamp(28px, 5.5vh, 70px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.dock__copy h1 { grid-column: 1 / span 9; }
.dock__aside { grid-column: 10 / span 3; justify-self: end; text-align: right; display: grid; gap: 18px; justify-items: end; }
.dock__aside p { font-size: .98rem; line-height: 1.4; max-width: 26ch; color: var(--on-stage-2); }
.dock__top { position: absolute; z-index: 3; left: var(--margin); right: var(--margin); top: calc(var(--header-h) + 14px); display: flex; justify-content: space-between; gap: 20px; color: var(--on-stage-2); }
.dock__dest { position: absolute; z-index: 2; inset: 0; padding: calc(var(--header-h) + clamp(20px, 5vh, 56px)) var(--margin) clamp(24px, 4vh, 48px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(18px, 3.2vh, 40px); color: var(--ink); opacity: 0; pointer-events: none; }
.dock__dest-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.dock__slot { grid-column: 1 / span 7; align-self: stretch; min-height: 0; border-radius: 6px; }
.dock__side { grid-column: 9 / span 4; align-self: end; padding-bottom: clamp(8px, 2vh, 24px); display: grid; gap: clamp(14px, 2.4vh, 26px); }
.dock__side .big { font-weight: 700; font-size: clamp(3.4rem, 7vw, 7.4rem); letter-spacing: -.055em; line-height: .84; }
.dock__cap { margin-top: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.scrollcue { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; color: var(--on-stage-2); }
.scrollcue i { width: 1px; height: 40px; background: currentColor; display: block; transform-origin: top; animation: cue 2.4s var(--ease-expressive) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* static fallback (mobile, reduced motion, no JS): hero then the destination as a normal block */
html:not(.can-dock) .dock__pin { min-height: 0; }
html:not(.can-dock) .dock__stage { position: relative; height: 92svh; min-height: 560px; pointer-events: auto; }
html:not(.can-dock) .dock__copy { position: absolute; }
html:not(.can-dock) .dock__dest { position: relative; opacity: 1; pointer-events: auto; background: var(--paper); padding-top: clamp(48px, 8vw, 96px); grid-template-rows: auto; }
html:not(.can-dock) .dock__slot { display: none; }
html:not(.can-dock) .dock__side { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .dock__copy h1 { grid-column: 1 / -1; }
  .dock__aside { grid-column: 1 / -1; justify-self: start; text-align: left; justify-items: start; margin-top: 22px; }
  .dock__top .hide-s { display: none; }
}

/* ---------- THE STREAM: lopsided, work and proof interleaved ---------- */
.stream { padding-block: clamp(56px, 8vw, 140px) clamp(72px, 10vw, 180px); }
.stream__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.stream__row + .stream__row { margin-top: clamp(56px, 9vw, 160px); }
.row-a > :first-child { grid-column: 1 / span 7; }
.row-a > :last-child { grid-column: 9 / span 4; margin-top: clamp(40px, 12vw, 220px); }
.row-b > :first-child { grid-column: 1 / span 4; margin-top: clamp(40px, 9vw, 170px); }
.row-b > :last-child { grid-column: 6 / span 7; }
.row-c > :first-child { grid-column: 2 / span 10; }
.brick { display: block; }
.brick__media { position: relative; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.brick__media img, .brick__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-expressive); }
.brick--wide .brick__media { aspect-ratio: 16 / 10; }
.brick--tall .brick__media { aspect-ratio: 4 / 5; }
.brick--cine .brick__media { aspect-ratio: 21 / 9; }
.brick__poster { position: absolute; right: clamp(12px, 1.6vw, 26px); bottom: clamp(12px, 1.6vw, 26px); width: clamp(84px, 12%, 170px); border-radius: 3px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); overflow: hidden; }
.brick__cap { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: start; margin-top: 16px; }
.brick__cap h3 { grid-column: 1; }
.brick__cap .status { grid-column: 2; grid-row: 1; }
.brick__meta { grid-column: 1 / -1; color: var(--ink-2); font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.brick__line { grid-column: 1 / -1; max-width: 48ch; color: var(--ink-2); }
@media (hover: hover) { a.brick:hover .brick__media img, a.brick:hover .brick__media video { transform: scale(1.045); } }
.proof { border-top: 1px solid var(--rule); padding-top: 18px; display: grid; gap: 14px; }
.proof h3 { font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
.proof p { color: var(--ink-2); max-width: 40ch; }
.proof .brick__media { aspect-ratio: 4 / 3; margin-top: 6px; }
@media (max-width: 860px) {
  .row-a > *, .row-b > *, .row-c > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .row-a > :last-child, .row-b > :last-child { margin-top: 40px !important; }
  .row-b > :first-child { order: 2; margin-top: 40px !important; }
}

/* ---------- full-bleed plate ---------- */
.plate { position: relative; height: clamp(360px, 78vh, 900px); overflow: hidden; background: var(--stage); color: var(--on-stage); }
.plate > img, .plate > video { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 13, .18), rgba(11, 10, 13, .0) 40%, rgba(11, 10, 13, .78)); }
.plate__cap { position: absolute; z-index: 2; left: var(--margin); right: var(--margin); bottom: clamp(22px, 4vw, 56px); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.plate__cap .h2 { max-width: 16ch; }

/* ---------- THE RECORD band ---------- */
.record__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-stage); margin-top: clamp(36px, 5vw, 80px); }
.record__cell { padding: clamp(22px, 3vw, 44px) 0 clamp(26px, 3.4vw, 52px); border-bottom: 1px solid var(--rule-stage); padding-right: var(--gutter); }
.record__cell b { display: block; font-weight: 700; font-size: clamp(4rem, 10.5vw, 11rem); letter-spacing: -.06em; line-height: .84; }
.record__cell span { display: block; margin-top: 14px; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-stage-2); max-width: 28ch; }
@media (max-width: 720px) { .record__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.laurels { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 8.4vw, 132px), 1fr)); gap: clamp(18px, 2.6vw, 44px) clamp(14px, 2vw, 34px); margin-top: clamp(40px, 6vw, 96px); align-items: center; }
.laurels img { width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .78; }
.frame .laurels img { filter: brightness(0); opacity: .8; }

/* ---------- THE SLATE: wall of covers + list ---------- */
.slate__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; }
.slate__head > :first-child { grid-column: 1 / span 8; }
.slate__head .lead { grid-column: 9 / span 4; }
.tools { position: sticky; top: 0; transition: top .45s var(--ease-expressive); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 14px; margin-top: clamp(28px, 4vw, 60px); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .72em .95em .64em; border: 1px solid var(--rule); border-radius: 2px; line-height: 1; transition: background-color .2s var(--ease-productive), color .2s var(--ease-productive), border-color .2s var(--ease-productive); }
.tab sup { font-size: .82em; margin-left: .45em; opacity: .62; vertical-align: baseline; }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) { .tab:hover { border-color: var(--ink); } }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 12.2vw, 210px), 1fr)); gap: clamp(8px, 1vw, 16px); margin-top: clamp(20px, 2.6vw, 40px); }
.cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; background: var(--stage); color: var(--on-stage); transition: opacity .35s var(--ease-productive), transform .5s var(--ease-expressive), filter .35s var(--ease-productive); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover .status { position: absolute; left: 8px; top: 8px; font-size: .58rem; background: rgba(11, 10, 13, .72); color: var(--on-stage); border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover--type { display: grid; align-content: end; padding: 14px; background: linear-gradient(160deg, var(--stage-2), var(--stage)); }
.cover--type::before { content: ""; position: absolute; left: 14px; right: 14px; top: 44px; height: 2px; background: var(--accent); }
.cover--type b { font-weight: 700; font-size: clamp(1.02rem, 1.5vw, 1.55rem); letter-spacing: -.035em; line-height: .96; text-wrap: balance; }
.cover--type em { font-style: normal; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-stage-2); margin-top: 8px; display: block; }
.cover.is-out { display: none; }
@media (hover: hover) {
  .wall:hover .cover { opacity: .34; filter: saturate(.4); }
  .wall .cover:hover { opacity: 1; filter: none; transform: translateY(-6px); }
}
.readout { min-height: 3.4em; margin-top: clamp(18px, 2.2vw, 32px); display: flex; justify-content: space-between; gap: 24px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 16px; }
.readout b { font-weight: 700; font-size: clamp(1.5rem, 3vw, 3rem); letter-spacing: -.04em; line-height: 1; }
.readout span { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.stage .readout { border-color: var(--rule-stage); } .stage .readout span { color: var(--on-stage-2); }
/* list view */
.rows { margin-top: clamp(20px, 2.6vw, 40px); border-top: 1px solid var(--rule); }
.rowi { border-bottom: 1px solid var(--rule); }
.rowi.is-out { display: none; }
.rowi__btn { width: 100%; text-align: left; display: grid; grid-template-columns: 58px minmax(0, 1.6fr) minmax(0, 1fr) auto 28px; gap: var(--gutter); align-items: center; padding-block: 14px; }
.rowi__thumb { width: 58px; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden; background: var(--stage); }
.rowi__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rowi__t { font-weight: 700; font-size: clamp(1.25rem, 2.3vw, 2.35rem); letter-spacing: -.04em; line-height: 1; }
.rowi__t small { display: block; font-weight: 500; font-size: .92rem; letter-spacing: -.01em; color: var(--ink-2); margin-top: 6px; }
.rowi__m { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rowi__x { width: 28px; height: 28px; position: relative; }
.rowi__x::before, .rowi__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s var(--ease-expressive); }
.rowi__x::after { transform: translate(-50%, -50%) rotate(90deg); }
.rowi[open-state="1"] .rowi__x::after { transform: translate(-50%, -50%) rotate(0deg); }
.rowi__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-expressive); }
.rowi[open-state="1"] .rowi__body { grid-template-rows: 1fr; }
.rowi__in { overflow: hidden; }
.rowi__pad { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 6px 0 30px; }
.rowi__pad p { grid-column: 3 / span 6; max-width: 60ch; }
.rowi__pad .acts { grid-column: 10 / span 3; justify-self: end; display: grid; gap: 10px; justify-items: end; align-content: start; }
@media (max-width: 860px) {
  .rowi__btn { grid-template-columns: 46px minmax(0, 1fr) 24px; }
  .rowi__thumb { width: 46px; }
  .rowi__btn .rowi__m, .rowi__btn .status { display: none; }
  .rowi__pad p, .rowi__pad .acts { grid-column: 1 / -1; justify-self: start; justify-items: start; }
  .rowi__pad .acts { margin-top: 16px; }
  .slate__head > :first-child, .slate__head .lead { grid-column: 1 / -1; }
}
.view-toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.view-toggle button { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .72em .95em .64em; line-height: 1; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
[data-view="wall"] .rows, [data-view="list"] .wall, [data-view="list"] .readout { display: none; }

/* ---------- cast strip ---------- */
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 11vw, 180px), 1fr)); gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(28px, 4vw, 64px); }
.cast figure { display: grid; gap: 10px; }
.cast .ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--paper-2); }
.stage .cast .ph { background: var(--stage-2); }
.cast img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.04); transition: filter .5s var(--ease-productive), transform 1.1s var(--ease-expressive); }
@media (hover: hover) { .cast figure:hover img { filter: none; transform: scale(1.04); } }
@media (hover: none) { .cast img { filter: none; } }
.cast figcaption { font-weight: 600; font-size: .92rem; letter-spacing: -.012em; line-height: 1.2; }
.names { columns: 4 200px; column-gap: var(--gutter); margin-top: clamp(28px, 4vw, 56px); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.5; }

/* ---------- statement ---------- */
.statement .hero-t { max-width: 12ch; }
.statement__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px; margin-top: clamp(36px, 5vw, 80px); }
.statement__grid > div { grid-column: span 4; border-top: 1px solid var(--rule-stage); padding-top: 16px; }
.frame .statement__grid > div, .frame-2 .statement__grid > div { border-color: var(--rule); }
.statement__grid h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: 8px; }
@media (max-width: 860px) { .statement__grid > div { grid-column: 1 / -1; } }

/* ---------- FILM PAGE ---------- */
.fhero { position: relative; min-height: 100svh; display: grid; align-items: end; background: var(--stage); color: var(--on-stage); overflow: hidden; }
.fhero__bg { position: absolute; inset: 0; }
.fhero__bg img, .fhero__bg video { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.fhero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 30%, rgba(11, 10, 13, 0) 0%, rgba(11, 10, 13, .55) 55%, rgba(11, 10, 13, .94) 100%), linear-gradient(180deg, rgba(11, 10, 13, .5), rgba(11, 10, 13, 0) 30%, rgba(11, 10, 13, .9)); }
.fhero__bg--tint { background: radial-gradient(90% 80% at 80% 20%, color-mix(in srgb, var(--accent) 34%, var(--stage)) 0%, var(--stage) 62%); }
.fhero__in { position: relative; z-index: 2; width: 100%; padding: calc(var(--header-h) + 40px) var(--margin) clamp(28px, 5vh, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; row-gap: 28px; }
.fhero__txt { grid-column: 1 / span 8; display: grid; gap: clamp(16px, 2.4vh, 28px); }
.fhero__txt .hero-t { font-size: clamp(3rem, 9vw, 10rem); }
.fhero__meta { display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: center; }
.fhero__poster { grid-column: 10 / span 3; justify-self: end; width: min(100%, 300px); aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); background: var(--stage-2); }
.fhero__poster img { width: 100%; height: 100%; object-fit: cover; }
.fhero__rule { position: absolute; z-index: 2; left: var(--margin); right: var(--margin); bottom: 0; height: 2px; background: var(--accent); transform-origin: left; }
.subbar { position: sticky; top: 0; transition: top .45s var(--ease-expressive); z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.subbar__in { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px var(--margin); min-height: 60px; }
.subbar__t { font-weight: 700; letter-spacing: -.03em; font-size: 1.08rem; display: flex; align-items: center; gap: 14px; min-width: 0; }
.subbar__t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subbar .btn { padding: .7em 1.1em .66em; font-size: .86rem; }
.fbody { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; }
.fbody__main { grid-column: 1 / span 7; }
.fbody__main .lead { max-width: 30ch; font-size: clamp(1.5rem, 2.7vw, 2.75rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; margin-bottom: clamp(22px, 3vw, 44px); }
.fbody__main .body { font-size: clamp(1.06rem, 1.25vw, 1.25rem); line-height: 1.5; }
.fbody__rail { grid-column: 9 / span 4; }
.facts { border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); padding-top: .2em; }
.facts dd { font-size: .98rem; line-height: 1.42; }
@media (max-width: 860px) { .fbody__main, .fbody__rail, .fhero__txt { grid-column: 1 / -1; } .fhero__poster { grid-column: 1 / span 5; justify-self: start; order: -1; width: 46vw; max-width: 220px; } }
.parts { display: grid; gap: clamp(36px, 5vw, 84px); margin-top: clamp(36px, 5vw, 72px); }
.part { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: start; border-top: 1px solid var(--rule-stage); padding-top: clamp(18px, 2vw, 30px); }
.frame .part { border-color: var(--rule); }
.part__n { grid-column: 1 / span 1; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; color: var(--accent); }
.part__poster { grid-column: 2 / span 3; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; background: var(--stage-2); }
.part__poster img { width: 100%; height: 100%; object-fit: cover; }
.part__txt { grid-column: 6 / span 7; display: grid; gap: 16px; }
.part__txt h3 { font-size: clamp(1.8rem, 3.6vw, 3.7rem); font-weight: 700; letter-spacing: -.042em; line-height: .96; }
.watch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.watch a { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; padding: .68em .9em .6em; border: 1px solid var(--rule-stage); border-radius: 2px; line-height: 1; transition: background-color .2s var(--ease-productive), color .2s var(--ease-productive), border-color .2s var(--ease-productive); }
.frame .watch a { border-color: var(--rule); }
@media (hover: hover) { .stage .watch a:hover { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); } .frame .watch a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.watch-note { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .05em; color: var(--on-stage-2); margin-top: 10px; }
@media (max-width: 860px) { .part__n { grid-column: 1 / -1; } .part__poster { grid-column: 1 / span 5; } .part__txt { grid-column: 1 / -1; } }
.awards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.awards__nums { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; }
.awards__nums b { font-weight: 700; font-size: clamp(4rem, 8.5vw, 8.6rem); letter-spacing: -.06em; line-height: .84; display: block; }
.awards__nums span { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-stage-2); }
.awards__list { grid-column: 6 / span 7; columns: 2 240px; column-gap: var(--gutter); font-size: .95rem; line-height: 1.35; }
.awards__list li { break-inside: avoid; padding-block: 9px; border-bottom: 1px solid var(--rule-stage); display: flex; justify-content: space-between; gap: 14px; }
.awards__list li span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .05em; color: var(--on-stage-2); white-space: nowrap; padding-top: .2em; }
@media (max-width: 860px) { .awards__nums, .awards__list { grid-column: 1 / -1; } }
.billing { font-family: var(--f-bill); text-transform: uppercase; text-align: center; max-width: 1180px; margin-inline: auto; line-height: 1.04; letter-spacing: .045em; font-size: clamp(1.9rem, 4.1vw, 4.3rem); color: var(--on-stage); text-wrap: balance; }
.billing .r { font-size: .56em; letter-spacing: .1em; color: var(--on-stage-2); margin-inline: .35em .2em; position: relative; top: -.12em; }
.billing .n { white-space: nowrap; }
.billing-logos { display: flex; justify-content: center; align-items: center; gap: clamp(22px, 4vw, 60px); margin-top: clamp(28px, 4vw, 56px); opacity: .85; flex-wrap: wrap; }
.billing-logos img { height: clamp(30px, 3.4vw, 50px); width: auto; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.related a { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage-2); color: var(--on-stage); display: grid; align-content: end; padding: clamp(16px, 2vw, 30px); }
.related a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .5s var(--ease-productive), transform 1.4s var(--ease-expressive); }
.related a > * { position: relative; }
.related b { font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.6rem); letter-spacing: -.04em; line-height: .96; display: block; margin-top: 10px; }
@media (hover: hover) { .related a:hover img { opacity: .78; transform: scale(1.05); } }
@media (max-width: 720px) { .related { grid-template-columns: 1fr; } .related a { aspect-ratio: 16 / 10; } }

/* ---------- worlds (WYNX) ---------- */
.worlds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule-stage); border: 1px solid var(--rule-stage); margin-top: clamp(28px, 4vw, 56px); }
.worlds li { background: var(--stage); padding: clamp(14px, 1.6vw, 24px); min-height: 8.5em; display: grid; align-content: space-between; gap: 18px; }
.worlds span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: var(--accent); }
.worlds b { font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.3rem); letter-spacing: -.02em; line-height: 1.1; }
@media (max-width: 860px) { .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- about / enquiries / record ---------- */
.phead { padding-top: calc(var(--header-h) + clamp(48px, 9vw, 150px)); padding-bottom: clamp(40px, 6vw, 100px); }
.phead .hero-t { max-width: 13ch; }
.phead .lead { margin-top: clamp(22px, 3vw, 44px); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.split > .k { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); }
.split > .v { grid-column: 6 / span 7; }
.split .h2 { max-width: 13ch; }
@media (max-width: 860px) { .split > .k, .split > .v { grid-column: 1 / -1; position: static; } }
.pull { font-weight: 700; font-size: clamp(2rem, 5vw, 5.4rem); letter-spacing: -.045em; line-height: .96; max-width: 17ch; text-wrap: balance; }
.roster { columns: 4 170px; column-gap: var(--gutter); font-size: .98rem; line-height: 1.75; margin-top: 28px; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(28px, 4vw, 60px); }
.founders figure { display: grid; gap: 14px; }
.founders .ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--paper-2); }
.founders img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.founders b { font-weight: 700; font-size: clamp(1.3rem, 2vw, 2rem); letter-spacing: -.035em; display: block; line-height: 1; }
.makes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); border-top: 1px solid var(--rule); margin-top: 28px; }
.makes > div { padding-block: 22px; border-bottom: 1px solid var(--rule); }
.makes h3 { font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.035em; margin-bottom: 8px; }
@media (max-width: 720px) { .makes, .founders { grid-template-columns: 1fr; } }
.lines { border-top: 1px solid var(--rule-stage); margin-top: clamp(32px, 5vw, 72px); }
.line { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 12px; padding-block: clamp(22px, 3vw, 40px); border-bottom: 1px solid var(--rule-stage); align-items: baseline; }
.line .slug { grid-column: 1 / span 3; color: var(--on-stage-2); }
.line h2 { grid-column: 4 / span 5; font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 3.2rem); letter-spacing: -.04em; line-height: 1; }
.line .go { grid-column: 9 / span 4; justify-self: end; display: grid; gap: 8px; justify-items: end; text-align: right; font-size: 1.02rem; }
@media (max-width: 860px) { .line .slug, .line h2, .line .go { grid-column: 1 / -1; justify-self: start; justify-items: start; text-align: left; } }
.rec-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: clamp(24px, 3vw, 44px); padding-block: 14px; border-block: 1px solid var(--rule); position: sticky; top: 0; transition: top .45s var(--ease-expressive); z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rec-tools select, .rec-tools input { font: inherit; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .03em; background: transparent; color: inherit; border: 1px solid var(--rule); border-radius: 2px; padding: .7em .9em .62em; min-height: 42px; }
.rec-tools input { flex: 1 1 220px; }
.rec-count { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-left: auto; }
.rec-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .96rem; }
.rec-table th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); padding: 16px 12px 10px 0; border-bottom: 1px solid var(--ink); }
.rec-table td { padding: 12px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.35; }
.rec-table td:nth-child(1) { font-weight: 600; letter-spacing: -.012em; }
.rec-table td.res { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.rec-table tr[data-r="Winner"] td.res { font-weight: 700; }
.rec-table td.dt { font-family: var(--f-mono); font-size: .76rem; white-space: nowrap; color: var(--ink-2); }
.rec-table td.vn { color: var(--ink-2); font-size: .88rem; }
.rec-table tr.is-out { display: none; }
@media (max-width: 860px) { .rec-table th:nth-child(5), .rec-table td.vn { display: none; } .rec-table { font-size: .88rem; } }
/* phones: the four columns share the width and wrap, and a screening line stacks its venue under its title (no sideways scroll) */
@media (max-width: 560px) {
  .rec-table { table-layout: fixed; font-size: .8rem; }
  .rec-table th:nth-child(1) { width: 31%; } .rec-table th:nth-child(2) { width: 24%; } .rec-table th:nth-child(4) { width: 17%; }
  .rec-table td, .rec-table th { padding-right: 8px; overflow-wrap: anywhere; }
  .rec-table td.res, .rec-table td.dt { white-space: normal; font-size: .64rem; }
  .awards__list li { flex-direction: column; gap: 3px; }
  .awards__list li span { white-space: normal; }
}

/* ---------- closer + footer ---------- */
.closer .hero-t { max-width: 11ch; }
.closer__row { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-top: clamp(32px, 5vw, 72px); }
.ftr { background: var(--stage); color: var(--on-stage); padding: clamp(40px, 5vw, 80px) var(--margin) 0; overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px; padding-bottom: clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--rule-stage); }
.ftr__col { grid-column: span 3; display: grid; gap: 10px; align-content: start; font-size: .98rem; }
.ftr__col .slug { color: var(--on-stage-2); margin-bottom: 8px; }
.ftr__legal { grid-column: 1 / -1; max-width: 96ch; font-size: .78rem; line-height: 1.5; color: var(--on-stage-2); }
.ftr__word { font-weight: 700; font-size: clamp(4.6rem, 23.5vw, 27rem); letter-spacing: -.07em; line-height: .78; white-space: nowrap; margin: clamp(18px, 3vw, 40px) 0 -.085em -.035em; user-select: none; }
.ftr__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px 22px; padding-left: 78px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--on-stage-2); }
@media (max-width: 860px) { .ftr__col { grid-column: span 6; } }

/* ---------- native cross-document transitions: the cover becomes the poster ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.4, .14, .3, 1); }
::view-transition-old(root) { animation: vt-out .35s cubic-bezier(.2, 0, 1, .9) both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(0, 0, .38, .9) .08s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- reduced motion: keep the destination, drop the journey ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .rv, html.js .wipe, html.js .wipe > img, html.js .wipe > video, html.js .line-mask > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .scrollcue i, .status i { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .brick__media img, .brick__media video, .cover, .cast img { transition: none !important; }
}

/* sticky bars sit under the header while it is shown */
html.hdr-shown .tools, html.hdr-shown .rec-tools, html.hdr-shown .subbar { top: var(--header-h); }
html:not(.can-dock) .dock__dest .dock__dest-head { flex-wrap: wrap; }

/* posters that are not 2:3 are fitted, never cropped (no head is ever cut) */
img.fit { object-fit: contain !important; background: #000; }

/* deterministic capture state: /?shot reveals everything and stops motion (for QA screenshots) */
html.shot .rv, html.shot .wipe, html.shot .wipe > img, html.shot .wipe > video, html.shot .line-mask > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
html.shot .hdr { position: absolute; }
html.shot .scrollcue i, html.shot .status i { animation: none !important; }
html.shot .wynx-hero, html.shot .woo-hero, html.shot .wtd-hero, html.shot .fhero, html.shot .phead[style*="100svh"] { min-height: 900px !important; }
html.shot .dock__stage { height: 900px !important; }
html.shot .plate { height: 700px !important; }

/* v2.css */
/* =====================================================================================
   v2 (2026-09-19): IMAGE-FIRST, after studying the reference sites screen by screen.
   Radical Media: framed reel under a giant wordmark, then a dense staggered 2-col wall of big
   stills with tiny captions and press bricks. NEON: full-bleed stills, tall condensed caps
   titles in the film's own colour, rails. Slick Films: wall-to-wall imagery, almost no text.
   ===================================================================================== */
:root { --f-cine: "League Gothic", "Oswald", "Arial Narrow", Impact, sans-serif; --t-hero: clamp(4.4rem, 15.5vw, 17.5rem); --t-h1: clamp(3.6rem, 10.4vw, 11.5rem); --t-h2: clamp(2.7rem, 6vw, 6.4rem); }
.hero-t, .h1, .h2, .cine, .pull, .record__cell b, .awards__nums b, .part__txt h3, .related b, .rowi__t, .readout b, .ftr__word, .dock__side .big, .proof h3 { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .86; }
.h2, .part__txt h3, .proof h3 { line-height: .9; }
.rowi__t { font-size: clamp(1.9rem, 3.4vw, 3.5rem); }
.rowi__t small { font-family: var(--f-sans); text-transform: none; letter-spacing: -.01em; line-height: 1.3; }
.readout b { font-size: clamp(2rem, 4.2vw, 4.2rem); }
.related b { font-size: clamp(2.2rem, 4.4vw, 4.6rem); }
.record__cell b { font-size: clamp(5rem, 14vw, 15rem); }
.awards__nums b { font-size: clamp(5rem, 11vw, 11.5rem); }
.ftr__word { font-size: clamp(4rem, 21.4vw, 27rem); letter-spacing: 0; line-height: .8; margin-left: -.01em; }
.fbody__main .lead { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .92; font-size: clamp(2.2rem, 4.2vw, 4.4rem); max-width: 22ch; }
body.wtd .hero-t, body.wtd .h1, body.wtd .h2, body.wynx .hero-t, body.wynx .h1, body.wynx .h2, body.woo .hero-t, body.woo .h1, body.woo .h2 { text-transform: none; }
.fhero .hero-t { color: var(--accent); font-size: clamp(4.4rem, 15vw, 17rem); }
.fhero__bg img, .fhero__bg video { opacity: .86; }

/* hero: the reel under the mark */
.dock__over { position: absolute; inset: 0; z-index: 3; }
.dock__logo { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.dock__logo img { width: min(44vw, 620px); height: auto; filter: drop-shadow(0 10px 50px rgba(0, 0, 0, .5)); }
.dock__copy .tag { grid-column: 1 / span 8; font-family: var(--f-cine); text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 3.6rem); line-height: .92; letter-spacing: .006em; max-width: 22ch; }
.dock__reel::after { background: linear-gradient(180deg, rgba(11, 10, 13, .7) 0%, rgba(11, 10, 13, .22) 22%, rgba(11, 10, 13, .16) 56%, rgba(11, 10, 13, .82) 100%); }
.dock__side { align-self: stretch; padding-bottom: 0; display: block; }
.dock__side .tile__media { height: min(50vh, 500px); aspect-ratio: auto; }
@media (max-width: 1023px) { .dock__copy .tag { grid-column: 1 / -1; } .dock__logo img { width: min(70vw, 420px); } }

/* the wall of work: dense, staggered, image-led */
.mason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; padding: clamp(20px, 3vw, 48px) var(--margin) clamp(64px, 8vw, 140px); }
.mason__col { display: grid; gap: clamp(34px, 4.4vw, 72px); align-content: start; }
.mason__col:nth-child(2) { margin-top: clamp(70px, 12vw, 210px); }
.tile { display: block; }
.tile__media { position: relative; overflow: hidden; border-radius: 4px; background: var(--stage); }
.tile__media > img, .tile__media > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.5s var(--ease-expressive); }
.tile--16x9 .tile__media { aspect-ratio: 16 / 9; }
.tile--3x2 .tile__media { aspect-ratio: 3 / 2; }
.tile--4x5 .tile__media { aspect-ratio: 4 / 5; }
.tile--21x9 .tile__media { aspect-ratio: 21 / 9; }
@media (hover: hover) { a.tile:hover .tile__media > img, a.tile:hover .tile__media > video { transform: scale(1.04); } }
.tile__bug { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.tile__media .status { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(11, 10, 13, .66); color: #fff; border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .62rem; }
.tile__cap { margin-top: 12px; font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.35rem); letter-spacing: -.022em; line-height: 1.2; }
.tile__cap span { display: block; color: var(--ink-2); font-weight: 600; }
.stage .tile__cap span { color: var(--on-stage-2); }
.tile--art .tile__media { display: flex; justify-content: center; align-items: center; gap: 3.5%; padding: 4.2% 6%; isolation: isolate; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 46%, #0B0A0D) 0%, #0B0A0D 78%); }
.tile--art .tile__media > img { width: auto; height: 100%; min-width: 0; flex: 0 1 auto; max-width: 31%; object-fit: contain; border-radius: 2px; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .85); }
.tile--art.one .tile__media > img { max-width: 62%; }
.tile--art .tile__media::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: var(--art) center / cover no-repeat; filter: blur(38px) saturate(1.25) brightness(.62); transform: translateZ(0); }
.tile--art .tile__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 90% at 50% 50%, rgba(11, 10, 13, 0) 30%, rgba(11, 10, 13, .55) 100%); }
.tile--paper .tile__media { background: #EFE9DD; }
.tile--type .tile__media { display: grid; align-content: end; padding: 6% 6% 9%; background: radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--accent) 42%, #0B0A0D) 0%, #0B0A0D 72%); color: var(--on-stage); }
.tile--type .tile__media b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 7vw, 7.5rem); line-height: .86; color: var(--accent); }
.press { display: grid; grid-template-columns: 40% 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.press__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: var(--paper-2); }
.press__img img { width: 100%; height: 100%; object-fit: cover; }
.press h3 { font-weight: 700; font-size: clamp(1.15rem, 1.75vw, 1.85rem); letter-spacing: -.032em; line-height: 1.06; text-wrap: balance; }
.press p { margin-top: 8px; font-size: .92rem; line-height: 1.4; color: var(--ink-2); }
.press .slug { margin-top: 12px; color: var(--ink-2); font-size: .66rem; }
.press--text { grid-template-columns: 1fr; border-top: 2px solid var(--ink); padding-top: 16px; }
.press--text h3 { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 4.2vw, 4.4rem); line-height: .9; letter-spacing: .004em; }
@media (max-width: 860px) { .mason { grid-template-columns: 1fr; } .mason__col:nth-child(2) { margin-top: clamp(34px, 8vw, 60px); } }

/* full-bleed bands */
.band { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--stage); color: var(--on-stage); }
.band--short { min-height: 78svh; }
.band__bg { position: absolute; inset: 0; }
.band__bg img, .band__bg video { width: 100%; height: 100%; object-fit: cover; }
.band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 13, .42) 0%, rgba(11, 10, 13, .1) 34%, rgba(11, 10, 13, .86) 100%); }
.band--dim .band__bg::after { background: linear-gradient(180deg, rgba(11, 10, 13, .38) 0%, rgba(11, 10, 13, .62) 40%, rgba(11, 10, 13, .9) 100%); }
.band__in { position: relative; z-index: 2; width: 100%; padding: clamp(90px, 12vh, 150px) var(--margin) clamp(30px, 5vw, 72px); display: grid; gap: clamp(14px, 1.8vw, 26px); }
.band__in .hero-t { max-width: 11ch; }
.band__in .lead { color: var(--on-stage-2); }
.band .record__grid { margin-top: clamp(18px, 3vw, 44px); }
.band .laurels { margin-top: clamp(24px, 3.4vw, 56px); }

/* rails */
.railhead { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--margin); margin-bottom: clamp(18px, 2.4vw, 36px); }
.rail { display: flex; gap: clamp(10px, 1.2vw, 18px); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--margin) 6px; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail > figure { flex: 0 0 min(74vw, 1180px); scroll-snap-align: start; }
.rail .ph { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--stage-2); }
.rail .ph img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.rail figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-weight: 700; letter-spacing: -.02em; }
.rail--faces > figure { flex: 0 0 clamp(170px, 17vw, 270px); }
.rail--faces .ph { aspect-ratio: 4 / 5; background: #E9E6E0; }
.rail--faces .ph img { object-position: 50% 18%; filter: grayscale(1) contrast(1.05); transition: filter .5s var(--ease-productive); }
@media (hover: hover) { .rail--faces figure:hover .ph img { filter: none; } }
@media (hover: none) { .rail--faces .ph img { filter: none; } }
.rail--faces figcaption { display: block; font-size: .98rem; }
.stage .tab { border-color: var(--rule-stage); }
.stage .tab[aria-pressed="true"] { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); }
html.shot .band { min-height: 900px !important; }

/* tall condensed caps need head room inside the mask, and sentences step down one size */
.line-mask { padding-top: .07em; margin-top: -.07em; }
.phead .hero-t, .closer .hero-t, .statement .hero-t, .band__in .hero-t { font-size: var(--t-h1); line-height: .88; }
.phead .hero-t { max-width: 15ch; }
.closer .hero-t { max-width: 17ch; }
.band__in .hero-t { max-width: 13ch; }
[data-slate] .hero-t, .fhero .hero-t { font-size: var(--t-hero); }
@media (max-width: 860px) { .hide-s { display: none !important; } }

/* hero reel: a wide cut for landscape screens, a vertical cut for phones (nobody gets cropped out) */
.reel-tall { display: none; }
@media (max-width: 700px) and (orientation: portrait) { .reel-wide { display: none; } .reel-tall { display: block; } }
.dock__copy h1.tag { grid-column: 1 / span 8; }
.dock__aside p { color: var(--on-stage); font-weight: 600; }

/* where the reel lands: the first row of the wall (7 + 5, the right tile hangs lower) */
.dock__dest { grid-template-rows: auto auto; align-content: start; }
.dock__dest-head { align-items: center; }
.dock__slotwrap { grid-column: 1 / span 7; min-width: 0; }
.dock__slot { grid-column: auto; aspect-ratio: 16 / 9; width: 100%; max-height: 58vh; border-radius: 4px; }
.dock__side { grid-column: 8 / span 5; min-width: 0; margin-top: clamp(40px, 11vh, 130px); gap: 0; }
.dock__side .tile__media { height: auto; aspect-ratio: 3 / 2; max-height: 46vh; }
html:not(.can-dock) .dock__slotwrap { display: none; }
html:not(.can-dock) .dock__side { grid-column: 1 / -1; margin-top: 0; }
html:not(.can-dock) .dock__side .tile__media { max-height: none; aspect-ratio: 16 / 9; }
html:not(.can-dock) .dock__dest { padding-bottom: 0; row-gap: clamp(22px, 4vw, 40px); }

/* the wall: 7 + 5 on desktop. On phones the two columns interleave by `order` */
.mason { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) {
  .mason { grid-template-columns: minmax(0, 1fr); row-gap: clamp(34px, 9vw, 56px); }
  .mason__col { display: contents; }
}
.tile--type .tile__media b { text-wrap: balance; max-width: 9ch; }
.tile--type .tile__media::before { content: "Key art to come"; position: absolute; right: 12px; top: 12px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2); }
.press:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* bands: overscan for the parallax on desktop. On phones the picture keeps its own shape and the words sit under it */
@media (min-width: 861px) { .band[data-parallax] .band__bg img { height: 116%; } }
.band--record .record__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.band--record .band__in { padding-top: clamp(110px, 16vh, 190px); }
.band--statement .band__bg::after { background: linear-gradient(180deg, rgba(11, 10, 13, .3) 0%, rgba(11, 10, 13, .05) 30%, rgba(11, 10, 13, .9) 100%); }
@media (max-width: 860px) {
  .band { display: block; min-height: 0 !important; }
  .band__bg { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
  .band__bg video { aspect-ratio: 16 / 9; }
  .band__bg::after { background: linear-gradient(180deg, rgba(11, 10, 13, 0) 60%, rgba(11, 10, 13, 1) 100%) !important; }
  .band__in { padding-top: 26px; }
  .band--record .band__bg { position: absolute; aspect-ratio: auto; }
  .band--record .band__bg::after { background: linear-gradient(180deg, rgba(11, 10, 13, .8), rgba(11, 10, 13, .88)) !important; }
  .band--record .band__in { padding-top: 72px; }
  .band--record .record__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* platforms, all in grey, right across the page */
.marks { margin-top: clamp(30px, 4vw, 64px); border-top: 1px solid var(--rule-stage); padding-top: clamp(18px, 2vw, 28px); }
.marks .slug { color: var(--on-stage-2); }
.marks__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; justify-items: center; gap: clamp(22px, 3vw, 46px) clamp(18px, 2.6vw, 44px); margin-top: clamp(22px, 3vw, 44px); }
@media (max-width: 860px) { .marks__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.marks__row img { height: clamp(24px, 2.9vw, 44px); width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(1.5) contrast(.9); opacity: .6; transition: opacity .3s var(--ease-productive), filter .3s var(--ease-productive); }
@media (hover: hover) { .marks__row img:hover { opacity: 1; filter: none; } }
.band .laurels { grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 6.6vw, 104px), 1fr)); }

/* rails: faces stay in frame */
.rail .ph img { object-position: 50% 30%; }
.rail:focus-visible { outline-offset: -3px; }
.railhead .h1 { line-height: .86; }
.stage .rail figcaption { color: var(--on-stage); }

/* film page: the still is the hero, the title wears the film's colour */
.fhero .hero-t { color: color-mix(in srgb, var(--accent) 86%, #fff); }
/* the still stays clean: nothing is printed over a face. The title sits under the picture and bites into its dark foot */
.fhero--plate { display: block; min-height: 0; }
.fhero--plate .fhero__bg { position: relative; inset: auto; height: min(60svh, 62vw); min-height: 260px; overflow: hidden; }
.fhero--plate .fhero__bg img, .fhero--plate .fhero__bg video { opacity: 1; object-position: 50% 25%; }
.fhero--plate .fhero__bg::after { background: linear-gradient(180deg, rgba(11, 10, 13, .5) 0%, rgba(11, 10, 13, 0) 20%, rgba(11, 10, 13, 0) 66%, rgba(11, 10, 13, 1) 100%); }
.fhero--plate .fhero__in { margin-top: calc(-1 * clamp(44px, 7.4vw, 124px)); padding-top: 0; }
.fhero--plate .fhero__poster { width: min(100%, 240px); }
html.shot .fhero--plate { min-height: 0 !important; }
html.shot .fhero--plate .fhero__bg { height: 700px; }
.related a img { object-position: 50% 20%; }
.fhero__txt .lead { max-width: 40ch; }
.slug.syn::before { background: var(--accent); width: .8em; height: .8em; }
.fbody__main .slug.syn { margin-bottom: 18px; }
.rowi__pad p .slug.syn { display: flex; margin-bottom: 10px; }

/* the slate index goes dark, wall to wall (Slick Films) */
.stage .tools { background: color-mix(in srgb, var(--stage) 90%, transparent); border-color: var(--rule-stage); }
@media (hover: hover) { .stage .tab:hover { border-color: var(--on-stage); } }
.stage .view-toggle { border-color: var(--rule-stage); }
.stage .view-toggle button[aria-pressed="true"] { background: var(--on-stage); color: var(--stage); }
.stage .rows, .stage .rowi { border-color: var(--rule-stage); }
.stage .rowi__t small, .stage .rowi__m, .stage .slate__head .lead { color: var(--on-stage-2); }
.stage .cover--type { box-shadow: inset 0 0 0 1px var(--rule-stage); }
[data-slate] .wall { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15.6vw, 270px), 1fr)); gap: clamp(6px, .7vw, 12px); }

/* sHEALed keeps its own casing everywhere, even inside uppercase display type */
.keepcase { text-transform: none; }

/* phones: the mark sits above the people in the vertical reel, and rail captions stack */
@media (max-width: 700px) and (orientation: portrait) { .dock__logo { place-items: start center; padding-top: 17svh; } .dock__logo img { width: min(58vw, 300px); } }
@media (max-width: 860px) {
  .rail > figure { flex-basis: 86vw; }
  .rail figcaption { display: block; }
  .rail figcaption .mono { display: block; margin-top: 4px; }
  .rail--faces > figure { flex-basis: 44vw; }
  .railhead { display: block; } .railhead .lead { margin-top: 14px; }
}
.nav { gap: clamp(14px, 2vw, 34px); }
@media (max-width: 1080px) { .nav { display: none; } .menu-btn { display: block; } }

/* group photographs: nothing is printed over the people. The picture runs full bleed and the words sit under it */
.band--stack { display: block; min-height: 0; }
.band--stack .band__bg { position: relative; aspect-ratio: 21 / 9; overflow: hidden; }
.band--stack .band__bg::after { background: linear-gradient(180deg, rgba(11, 10, 13, 0) 72%, rgba(11, 10, 13, 1) 100%); }
.band--stack .band__in { padding-top: clamp(20px, 3vw, 44px); }
html.shot .band--stack { min-height: 0 !important; }
@media (max-width: 860px) { .band--stack .band__bg { aspect-ratio: 3 / 2; } }

/* phones: the still stands alone in the film hero. The one-sheet comes back in the parts list */
@media (max-width: 860px) { .fhero--plate .fhero__poster { display: none; } .fhero--plate .fhero__in { margin-top: -28px; } }

/* 4:3 set stills, and a rail where every photograph keeps its own shape (portrait clapboards are never cropped) */
.tile--4x3 .tile__media { aspect-ratio: 4 / 3; }
.rail--natural > figure { flex: 0 0 auto; }
.rail--natural .ph { height: min(64vh, 600px); aspect-ratio: var(--ar, 1.5); background: var(--stage-2); }
.rail--natural .ph img { object-position: 50% 50%; }
.rail--natural figcaption { display: block; font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2.3rem); letter-spacing: .01em; line-height: 1; }
@media (max-width: 860px) { .rail--natural > figure { flex-basis: auto; } .rail--natural .ph { height: min(52vh, 420px); } }

/* the veil has a real starting value so the scrub can fade it (and the nav stays legible over bright frames) */
.dock__reel { --veil: 1; }

/* wall.css */
/* =====================================================================================
   v3 THE WALL (2026-09-19). Measured off the client's own references with tools/fingerprint.js
   at 1440: Radical Media /work = 0 side margin, 0 gutter, 3 equal tiles, title ON the image.
   Slick Films = 0 gutter key-art panels. NEON = 4px gutter, film title on the still at 160px.
   Highdive = 39 full-bleed stills stacked with a 0 row gap.
   v2 measured 17px gutters, 49px margins, 256px row gaps: cards on paper, not a wall.
   Base cell here is square (100vw / 12), so every span lands flush and nothing floats.
   ===================================================================================== */
.wall2 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: calc(100vw / 12); gap: 0; background: var(--stage); }
.cell { position: relative; display: block; overflow: hidden; margin: 0; background: var(--stage-2); color: var(--on-stage); grid-column: span var(--c); grid-row: span var(--r); }
.cell > img, .cell > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.8s var(--ease-expressive); }
.cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 10, 13, .34) 0%, rgba(11, 10, 13, 0) 26%, rgba(11, 10, 13, 0) 44%, rgba(11, 10, 13, .88) 100%); }
@media (hover: hover) { a.cell:hover > img, a.cell:hover > video { transform: scale(1.045); } a.cell:hover .cell__cap b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; } }

/* the title sits ON the picture and scales with the cell, the way the references set it */
.cell__cap { position: absolute; z-index: 2; left: clamp(14px, 1.5vw, 28px); right: clamp(14px, 1.5vw, 28px); bottom: clamp(12px, 1.3vw, 24px); display: grid; gap: .25em; }
.cell__cap b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .86; font-size: clamp(1.7rem, calc(var(--c) * 0.52vw), 7rem); text-wrap: balance; }
.cell__cap span { font-family: var(--f-mono); font-size: clamp(.58rem, .72vw, .76rem); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 238, 230, .78); }
.cell__bug { position: absolute; z-index: 2; right: clamp(14px, 1.5vw, 28px); top: clamp(12px, 1.3vw, 24px); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 238, 230, .82); text-align: right; max-width: 60%; }
.cell > .status { position: absolute; z-index: 2; left: clamp(14px, 1.5vw, 28px); top: clamp(12px, 1.3vw, 24px); background: rgba(11, 10, 13, .62); border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .6rem; }
.cell--art > img { object-fit: cover; }
.cell--type { background: radial-gradient(120% 120% at 70% 0%, color-mix(in srgb, var(--accent) 44%, #0B0A0D) 0%, #0B0A0D 74%); }
.cell--type .cell__cap b { color: var(--accent); font-size: clamp(2rem, calc(var(--c) * 0.62vw), 7rem); }
.cell--type::before { content: "Key art to come"; position: absolute; right: clamp(14px, 1.5vw, 28px); bottom: clamp(12px, 1.3vw, 24px); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2); }

/* a proof panel keeps the grid unbroken where there is no picture worth showing */
.cell--say { background: var(--stage); display: grid; align-content: end; padding: clamp(20px, 2.2vw, 40px); }
.cell--say::after { display: none; }
.cell--say .cell__say { display: grid; gap: .5em; }
.cell--say .slug { color: var(--on-stage-2); font-size: .6rem; }
.cell--say b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .9; font-size: clamp(1.7rem, calc(var(--c) * 0.5vw), 4rem); text-wrap: balance; }
.cell--say .p { color: var(--on-stage-2); font-size: clamp(.84rem, .95vw, 1rem); line-height: 1.42; }
@media (hover: hover) { a.cell--say:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; } }

/* phones: one column, full bleed, stacked with no gap at all (Highdive) */
@media (max-width: 860px) {
  .wall2 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: calc(100vw / 6); }
  .cell { grid-column: span 6; grid-row: span var(--rm); }
  .cell__cap b { font-size: clamp(2rem, 8.5vw, 3.6rem); }
  .cell--say b { font-size: clamp(1.8rem, 7vw, 3rem); }
  .cell--type .cell__cap b { font-size: clamp(2.4rem, 11vw, 4.4rem); }
}

/* the reel lands in a cell of the wall, so the dock ends where the wall begins */
.dock__side .cell { aspect-ratio: 12 / 7; grid-column: auto; grid-row: auto; }
.dock__dest { row-gap: clamp(14px, 2vh, 26px); }

/* section heads sit inside the dark, and the poster wall and faces lose their gutters too */
.wallhead { padding: clamp(60px, 8vw, 150px) var(--margin) clamp(22px, 2.6vw, 40px); display: grid; gap: clamp(14px, 1.6vw, 24px); justify-items: start; }
.wallhead .h1 { line-height: .86; }
.wallhead .lead { color: var(--on-stage-2); max-width: 44ch; }
.stage > .wall { gap: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 12.5vw, 240px), 1fr)); }
.stage > .wall .cover { border-radius: 0; }
.stage > .readout { padding-inline: var(--margin); padding-bottom: clamp(48px, 6vw, 96px); border: 0; }
.faces { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; cursor: grab; padding-bottom: clamp(48px, 6vw, 96px); }
.faces::-webkit-scrollbar { display: none; }
.faces.is-drag { cursor: grabbing; }
.faces > figure { flex: 0 0 clamp(150px, 12.5vw, 220px); position: relative; }
.faces .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage-2); }
.faces .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease-productive); user-select: none; pointer-events: none; }
@media (hover: hover) { .faces figure:hover .ph img { filter: none; } }
@media (hover: none) { .faces .ph img { filter: none; } }
.faces figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
@media (max-width: 860px) { .faces > figure { flex-basis: 44vw; } }

/* bands butt straight onto the wall, no seam */
.band--flush { min-height: 92svh; }
.band--flush + .band--flush { border-top: 1px solid rgba(242, 238, 230, .1); }
html.shot .band--flush { min-height: 880px !important; }

/* the dock hands over to the wall: dark all the way, no white flash between them */
.dock__dest { color: var(--on-stage); }
html:not(.can-dock) .dock__dest { background: var(--stage); }
.dock__dest .dock__dest-head .h2 { color: var(--on-stage); }
.dock__dest .btn { border-color: var(--rule-stage); }
@media (hover: hover) { .dock__dest .btn:hover { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); } }

/* the poster wall runs edge to edge like Radical Media's work index: fixed columns so the rows
   stay even, and the final cover stretches into whatever is left so the wall never ends in a hole */
.stage > .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stage > .wall .cover:last-child { grid-column-end: -1; aspect-ratio: auto; }
.stage > .wall .cover:last-child.cover--type::before { right: 14px; left: auto; width: 46px; }
.stage > .tools { padding-inline: var(--margin); margin-top: 0; }
.stage > .rows { padding-inline: var(--margin); padding-bottom: clamp(48px, 6vw, 96px); }
@media (max-width: 1100px) { .stage > .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .stage > .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-slate] .wallhead { padding-top: calc(var(--header-h) + clamp(48px, 9vw, 150px)); }
[data-slate] .wallhead .lead { max-width: 40ch; }

/* v4: every page opens on a full-height frame, and the closing frame repeats sitewide */
.band--tall { min-height: 100svh; align-items: end; }
.band--tall .band__in { padding-bottom: clamp(40px, 7vh, 96px); }
.band--tall .hero-t { font-size: var(--t-hero); max-width: 16ch; }
.band--tall .lead { max-width: 46ch; }
html.shot .band--tall { min-height: 900px !important; }
.band--tall .record__grid { border-top-color: rgba(242, 238, 230, .28); max-width: 1100px; }
.band--tall .record__cell b { font-size: clamp(3rem, 7vw, 7rem); }
.closer2 { padding: clamp(80px, 12vw, 200px) var(--margin) clamp(80px, 12vw, 190px); display: grid; gap: clamp(18px, 2vw, 30px); border-top: 1px solid var(--rule-stage); }
.closer2 .hero-t { font-size: var(--t-h1); max-width: 17ch; }
.closer2 .muted { color: var(--on-stage-2); }
.wallpad { height: clamp(48px, 6vw, 96px); }
.stage > .wrap .record__grid { border-top-color: var(--rule-stage); }

/* the work index keeps its sticky filter bar flush to the wall */
[data-slate] .tools { margin-top: 0; padding-inline: var(--margin); }
[data-slate] .rows { padding-inline: var(--margin); }

/* gallery walls on film pages sit straight under the body copy with no seam */
.wall2 + .wall2 { border-top: 1px solid rgba(242, 238, 230, .08); }

/* pitch pages keep their own brand voice inside the wall */
body.wtd .cell__cap b, body.wynx .cell__cap b, body.woo .cell__cap b { font-family: inherit; font-weight: 600; text-transform: none; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(1.25rem, calc(var(--c) * 0.30vw), 2.6rem); }
body.wtd .cell__cap span, body.wynx .cell__cap span, body.woo .cell__cap span { font-family: var(--f-mono, ui-monospace); }

/* SIGNATURE: the reel zooms out into the grid, the founders panel arrives beside it and zooms in.
   Both panels animate the same four properties so the two moves read as one camera move. */
.dock__two { position: absolute; z-index: 2; overflow: hidden; border-radius: 4px; background: var(--stage-2); opacity: 0; will-change: top, left, width, height; }
.dock__two > img { width: 100%; height: 100%; object-fit: cover; }
.dock__two::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 13, .3) 0%, rgba(11, 10, 13, 0) 30%, rgba(11, 10, 13, .86) 100%); }
.dock__two-cap { position: absolute; z-index: 3; left: var(--margin); right: var(--margin); bottom: clamp(30px, 6vh, 74px); display: grid; gap: .3em; opacity: 0; }
.dock__two-cap b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .88; font-size: clamp(2rem, 5.4vw, 6rem); max-width: 16ch; }
.dock__two-cap > span { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2); max-width: 44ch; }
.dock__slot2 { width: 100%; aspect-ratio: 12 / 7; }
html:not(.can-dock) .dock__two { display: none; }
html.shot .dock__two { display: none; }

/* phones get the same two beats, stacked: the reel, then the founders frame, then the wall */
html:not(.can-dock) .dock__two { display: block; position: relative; opacity: 1; border-radius: 0; aspect-ratio: 3 / 2; }
html:not(.can-dock) .dock__two-cap { opacity: 1; bottom: clamp(18px, 4vw, 34px); }
html:not(.can-dock) .dock__two-cap b { font-size: clamp(1.9rem, 8vw, 3.4rem); }
html:not(.can-dock) .dock__slot2, html:not(.can-dock) .dock__side { display: none; }
html.shot .dock__two { display: block; position: relative; opacity: 1; aspect-ratio: 3 / 2; }
html.shot .dock__two-cap { opacity: 1; }
html.shot .dock__slot2 { display: none; }

/* a single static grain plate over the moving frames: film texture, no per-frame cost */
.dock__reel > .grain, .band__bg > .grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .55; mix-blend-mode: overlay; }
.cell > .grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .4; mix-blend-mode: overlay; }
:root { --grain: 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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); }

/* v9: a cover whose title has its own footage plays it under the cursor */
.cover__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease-productive); pointer-events: none; }
.cover.is-playing .cover__vid { opacity: 1; }
.cover .status { z-index: 2; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cover__vid { display: none; } }

/* titles.css */
/* =====================================================================================
   SIGNATURE v7: THE TITLE CARD (2026-09-21)
   One opening-titles move, in three layers, the way studio title sequences are built:
     back   the footage, cutting through the slate as you scroll
     middle the Lolli Brands mark, traced to vector from the client's own file
     front  Anthony Lolli and TereZa Hakobyan-Lolli, cut out and standing in front of it
   Each new scene opens as an iris from the lens ring in the mark (the logo's own camera lens).
   The exit pushes the camera through that lens into the wall.
   ===================================================================================== */
.titles { position: relative; background: var(--stage); color: var(--on-stage); }
.titles__pin { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }

/* back: the scenes. Stacked; the active one sits on top and irises open from the lens */
.titles__scenes { position: absolute; inset: 0; z-index: 0; }
.titles__scene { position: absolute; inset: 0; overflow: hidden; clip-path: circle(var(--r, 0%) at var(--lx, 33%) var(--ly, 50%)); will-change: clip-path; }
.titles__scene:first-child { --r: 150%; }
html:not(.js) .titles__scene:not(:first-child), html.shot .titles__scene:not(:first-child) { display: none; }
.titles__scene > img, .titles__scene > video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--s, 1.06)); filter: saturate(.82) contrast(1.06); }
.titles__veil { --veil: 1; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 80% at 34% 42%, rgba(11, 10, 13, .38) 0%, rgba(11, 10, 13, .62) 75%), linear-gradient(180deg, rgba(11, 10, 13, .58) 0%, rgba(11, 10, 13, .2) 30%, rgba(11, 10, 13, .24) 60%, rgba(11, 10, 13, .92) 100%);
  opacity: var(--veil, 1); }

/* middle: the mark, huge, behind the people */
.titles__mark { position: absolute; z-index: 2; left: 14vw; width: 58vw; top: 8svh; opacity: .96; transform-origin: var(--mox, 33.16%) var(--moy, 61.71%); will-change: transform, opacity; pointer-events: none; }
.titles__mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 60px rgba(0, 0, 0, .35)); }

/* front: the founders, cut out, standing on the bottom edge and dissolving into the dark */
.titles__cut { position: absolute; z-index: 3; bottom: 0; right: 4vw; height: 83svh; aspect-ratio: 1682 / 2480; will-change: transform, opacity; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%), linear-gradient(270deg, transparent 0, #000 7%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 72%, transparent 99%), linear-gradient(270deg, transparent 0, #000 7%); mask-composite: intersect; }
.titles__cut img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .55)); }

/* type: the line, the scene caption and the cue */
.titles__type { position: absolute; z-index: 4; left: var(--margin); right: var(--margin); bottom: max(5svh, 84px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; pointer-events: none; }
/* the bottom line is a title card: the promise on the first cut, then each film's name on its own cut */
.titles__type { grid-template-columns: minmax(0, 1fr); }
.titles__h1, .titles__film { grid-area: 1 / 1; align-self: end; transition: opacity .5s var(--ease-productive), transform .7s var(--ease-expressive); }
.titles__h1 { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 4.1vw, 4.8rem); line-height: .88; letter-spacing: .006em; max-width: 24ch; }
.titles__film { display: grid; gap: .45em; opacity: 0; transform: translateY(24px); }
.titles__film b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 6.8rem); line-height: .86; letter-spacing: .006em; max-width: 13ch; }
.titles__film > span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2); }
.titles.is-film .titles__h1 { opacity: 0; transform: translateY(-18px); }
.titles.is-film .titles__film { opacity: 1; transform: none; }
.titles__lede { grid-area: 2 / 1; margin-top: 14px; font-size: .98rem; line-height: 1.4; color: var(--on-stage-2); max-width: 34ch; transition: opacity .4s var(--ease-productive); }
.titles.is-film .titles__lede { opacity: 0; }
.titles__slug { position: absolute; z-index: 4; left: var(--margin); right: var(--margin); top: calc(var(--header-h) + 10px); display: flex; justify-content: flex-end; gap: 16px; color: var(--on-stage-2); pointer-events: none; }
.titles__slug .mono { letter-spacing: .12em; }
.titles__cue { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-stage-2); display: grid; justify-items: center; gap: 8px; }
.titles__cue i { width: 1px; height: 34px; background: currentColor; display: block; transform-origin: top; animation: cue 2.4s var(--ease-expressive) infinite; }

/* the wall picks up directly under the titles */
.titles + .wallhead-bar { background: var(--stage); padding: clamp(40px, 6vw, 96px) var(--margin) clamp(18px, 2.4vw, 34px); display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.wallhead-bar .h2 { color: var(--on-stage); }
.wallhead-bar .btn { border-color: var(--rule-stage); }

/* phones: the same three layers, restaged. The mark bleeds off both edges up top, the pair stands on the bottom edge */
@media (max-width: 860px) {
  .titles__mark { left: -9vw; width: 118vw; top: 14svh; }
  .titles__film b { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .titles__lede { font-size: .9rem; }
  .titles__cut { left: 0; right: 0; margin-inline: auto; height: 62svh; width: calc(62svh * 1682 / 2480); }
  .titles__type { grid-template-columns: 1fr; bottom: 82px; }
  .titles__h1 { font-size: clamp(1.9rem, 8.6vw, 2.8rem); }
  .titles__cue { display: none; }
}

/* reduced motion and capture mode: the composed opening frame, no pin, no swaps, no zoom */
html.shot .titles__pin { height: 900px; }
@media (prefers-reduced-motion: reduce) { .titles__cue i { animation: none; } }

/* radical.css */
/* =====================================================================================
   v8 HOME (2026-09-21): TereZa's favourite, Radical Media, for Lolli Brands. Less is more.
   Measured off radicalmedia.com at 1440: 30 px page margin, 2 columns of 675 px, captions in a
   bold grotesk around 30 px, one hero video framed inside the page, nothing else on it but the
   wordmark. Her own words on the call: "whiter backgrounds", "not a plain white, graded very
   slightly", "very minimal, not so busy, but clean", "lopsided, very very pretty".
   ===================================================================================== */
body.home-r { background: var(--paper); }

/* the frame: one reel, inset in the page, only the mark on it */
.fh { position: relative; padding: calc(var(--header-h) + 2px) var(--margin) 0; background: var(--paper); }
/* v10 the lens: the page opens on paper with the mark in ink; an aperture opens inside its lens ring onto the reel and
   keeps opening until the reel fills the frame (site.js). The ink mark sits under the frame exactly where the white one is. */
.fh__win { position: relative; height: calc(100svh - var(--header-h) - clamp(64px, 9svh, 110px)); min-height: 440px; }
.fh__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--stage); }
html.js .fh__frame { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); }
html.js .fh.is-open .fh__frame { clip-path: none; }
.fh__ink { position: absolute; z-index: 0; left: 50%; top: 52%; width: min(34vw, 50svh * 1.226); transform: translate(-50%, -50%); }
.fh__ink img { width: 100%; height: auto; display: block; }
.fh.is-open .fh__ink { visibility: hidden; }
.fh__reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--push, 1)); will-change: transform; }
.fh__frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 55%, rgba(11, 10, 13, .1), rgba(11, 10, 13, .42)); pointer-events: none; }
.fh__mark { position: absolute; z-index: 2; left: 50%; top: 52%; width: min(34vw, 50svh * 1.226); transform: translate(-50%, -50%); will-change: transform, opacity; }
.fh__mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .35)); }
.fh__down { display: grid; place-items: center; height: clamp(64px, 9svh, 110px); color: var(--ink); }
.fh__down svg { width: 26px; height: 34px; transition: transform .4s var(--ease-expressive); }
@media (hover: hover) { .fh__down:hover svg { transform: translateY(6px); } }

/* the lopsided wall */
.rw { padding: clamp(20px, 3vw, 44px) var(--margin) clamp(70px, 9vw, 150px); background: var(--paper); }
.rw__intro { max-width: 1100px; margin-bottom: clamp(48px, 7vw, 120px); }
.rw__intro h1 { font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 5.2rem); letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.rw__intro p { margin-top: clamp(16px, 1.6vw, 26px); font-size: clamp(1.02rem, 1.3vw, 1.3rem); line-height: 1.4; color: var(--ink-2); max-width: 44ch; }
.rw__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 2.1vw, 34px); align-items: start; }
.rw__col { display: grid; gap: clamp(56px, 7vw, 128px); align-content: start; }
.rw__col--b { margin-top: clamp(90px, 16vw, 280px); will-change: transform; }
.rw__more { margin-top: clamp(60px, 7vw, 120px); }

/* a work: the picture at its own shape, the caption as three plain lines */
.rw__item { display: block; min-width: 0; }
.rb { display: block; color: var(--ink); }
.rb__media { position: relative; overflow: hidden; background: var(--paper-2); }
.rb--work:not(.rb--poster) .rb__media { aspect-ratio: var(--ar, 16 / 10); }
.rb--poster .rb__media { width: 62%; aspect-ratio: var(--par, 2 / 3); background: var(--stage); }
.rw__col--b .rb--poster .rb__media, .rw__col--b .rb--poster .rb__cap { margin-left: auto; width: 62%; }
.rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__media, .rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__cap { margin-left: 19%; width: 62%; }
.rb--poster .rb__cap { width: 62%; }
.rb__media > img, .rb__media > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease-expressive), opacity .6s var(--ease-productive); }
.rb--poster .rb__media > img { object-fit: contain; }
.rb__hover { position: absolute; inset: 0; opacity: 0; }
.rb.is-playing .rb__hover { opacity: 1; }
@media (hover: hover) { a.rb--work:hover .rb__media > img, a.rb--work:hover .rb__media > video { transform: scale(1.035); } }
.rb__bug { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.rb__media > .status { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(11, 10, 13, .66); color: #fff; border-color: transparent; font-size: .6rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rb__cap { margin-top: 14px; display: grid; gap: 2px; font-weight: 700; font-size: clamp(1.1rem, 1.55vw, 1.6rem); letter-spacing: -.028em; line-height: 1.12; }
.rb__cap span { color: var(--ink-2); font-weight: 600; }
@media (hover: hover) { a.rb--work:hover .rb__cap b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }

/* a press item, Radical Media style */
.rb--press { display: grid; grid-template-columns: 38% 1fr; gap: clamp(14px, 1.6vw, 26px); align-items: start; }
.rb--press:not(:has(.rb__thumb)) { grid-template-columns: 1fr; }
.rb__thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.rb__thumb { position: relative; }
.rb__thumb img, .rb__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-expressive); }
.rb__thumb .grain { display: none; }
.rb--press h3 { font-weight: 700; font-size: clamp(1.25rem, 2vw, 2rem); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.rb__src { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
@media (hover: hover) { a.rb--press:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; } a.rb--press:hover .rb__thumb img, a.rb--press:hover .rb__thumb video { transform: scale(1.05); } }

/* the one dark band: the record, Radical's black awards section */
.rp { background: var(--stage); color: var(--on-stage); padding: clamp(80px, 11vw, 190px) var(--margin); }
.rp__in { max-width: 1400px; }
.rp .slug { color: var(--on-stage-2); }
.rp__line { margin-top: 22px; font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 4.6rem); letter-spacing: -.045em; line-height: 1; max-width: 22ch; text-wrap: balance; }
.rp .laurels { margin-top: clamp(40px, 5vw, 80px); }
.rp .btn { border-color: var(--rule-stage); }

/* the close */
.rc { background: var(--paper); padding: clamp(90px, 12vw, 200px) var(--margin); display: grid; gap: clamp(18px, 2vw, 30px); }
.rc__h { font-weight: 700; font-size: clamp(2.2rem, 5.6vw, 6.4rem); letter-spacing: -.05em; line-height: .95; max-width: 17ch; text-wrap: balance; }

/* the cursor: a small pill that says what a click will do (desktop only) */
.cursor-pill { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transform: translate3d(-100px, -100px, 0); transition: opacity .25s var(--ease-productive); }
.cursor-pill span { display: block; transform: translate(-50%, -50%) scale(.6); transition: transform .35s var(--ease-expressive); background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .9em 1.2em .82em; border-radius: 999px; }
.cursor-pill.is-on { opacity: 1; }
.cursor-pill.is-on span { transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .cursor-pill { display: none; } }

/* phones: one column, the same order interleaved, the frame keeps its inset */
@media (max-width: 860px) {
  .fh__win { height: calc(78svh - var(--header-h)); }
  .fh__mark, .fh__ink { width: 68vw; }
  .rw__cols { grid-template-columns: 1fr; row-gap: clamp(56px, 12vw, 90px); }
  .rw__col, .rw__col--b { display: contents; }
  .rb--poster .rb__media, .rb--poster .rb__cap, .rw__col--b .rb--poster .rb__media, .rw__col--b .rb--poster .rb__cap, .rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__media, .rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__cap { width: 78%; margin-left: 0; }
  .rw__item:nth-child(even) .rb--poster .rb__media, .rw__item:nth-child(even) .rb--poster .rb__cap { margin-left: auto; }
  .rb--press { grid-template-columns: 34% 1fr; }
}
/* capture and reduced motion: open, still, readable */
html.shot .fh__win { height: 780px; }
html.shot .fh__frame { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { html.js .fh__frame { clip-path: none; } }

/* studio.css */
/* =====================================================================================================
   v10 STUDIO (2026-09-21): one language for the whole site, TereZa's favourite (Radical Media) made for
   Lolli Brands. Paper and ink, one grotesk, big type, pictures edge to edge, one dark band at a time.
   Measured off radicalmedia.com/work: title in a 700 grotesk at ~6vw, labels 700 at ~1.33vw, text 400 at
   ~1.45vw, credits as bold label over value, zero-gutter picture rows. No condensed display face, no mono.
   ===================================================================================================== */
body.studio { background: var(--paper); color: var(--ink); }
.studio .pj-wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: var(--margin); }
.studio .pj-label { font-weight: 700; font-size: clamp(1.02rem, 1.2vw, 1.3rem); letter-spacing: -.012em; line-height: 1.2; }
.studio .pj-lead { font-weight: 500; font-size: clamp(1.55rem, 2.45vw, 2.55rem); letter-spacing: -.03em; line-height: 1.14; text-wrap: balance; }
.studio .pj-link { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease-expressive); display: inline-flex; align-items: center; gap: .4em; }
.studio .pj-link svg { width: .8em; height: .8em; }
@media (hover: hover) { .studio .pj-link:hover { background-size: 0 1px; background-position: 100% 100%; } }
.studio .pj-btn { display: inline-flex; align-items: center; gap: .6em; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 1rem; padding: 1.05em 1.55em 1em; border-radius: 999px; transition: transform .45s var(--ease-expressive), background .3s; }
.studio .pj-btn svg { width: .85em; height: .85em; }
@media (hover: hover) { .studio .pj-btn:hover { transform: translateY(-2px); background: #000; } }

/* ---------- the stage: the film in full frame, the title in the corner ---------- */
.pj-hero { position: relative; height: 100svh; min-height: 560px; background: var(--stage); color: #fff; overflow: hidden; isolation: isolate; }
.pj-hero__media { position: absolute; inset: 0; z-index: -1; }
.pj-hero__media > img, .pj-hero__media > video, .pj-hero__wash > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-hero__media > video, .pj-hero__media > img { animation: pj-settle 2.6s var(--ease-out) both; }
.pj-hero__media .grain { display: none; }
.pj-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 7, 9, .78) 0%, rgba(8, 7, 9, .34) 34%, rgba(8, 7, 9, 0) 62%), linear-gradient(to bottom, rgba(8, 7, 9, .45), rgba(8, 7, 9, 0) 22%); pointer-events: none; }
.pj-hero__wash { position: absolute; inset: 0; background: var(--accent); }
.pj-hero__wash > img { filter: blur(40px) saturate(1.1); transform: scale(1.2); opacity: .7; }
@keyframes pj-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
.pj-hero__in { position: absolute; left: var(--margin); right: clamp(90px, 12vw, 200px); bottom: clamp(38px, 7svh, 92px); }
.pj-crumb { display: flex; gap: .6em; font-weight: 500; font-size: .95rem; color: rgba(255, 255, 255, .78); margin-bottom: clamp(14px, 1.6vw, 26px); animation: pj-rise .9s var(--ease-out) .15s both; }
.pj-crumb a { color: #fff; }
@media (hover: hover) { .pj-crumb a:hover { text-decoration: underline; text-underline-offset: .18em; } }
.pj-title { font-weight: 700; font-size: clamp(3.1rem, 7.6vw, 9rem); letter-spacing: -.058em; line-height: .88; max-width: 13ch; text-wrap: balance; animation: pj-rise 1.1s var(--ease-expressive) .05s both; }
.pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1.6em; margin-top: clamp(16px, 1.8vw, 28px); font-weight: 500; font-size: clamp(.95rem, 1.05vw, 1.1rem); color: rgba(255, 255, 255, .82); animation: pj-rise .9s var(--ease-out) .3s both; }
.pj-meta > span { display: inline-flex; align-items: center; gap: .55em; }
.pj-dot { width: .52em; height: .52em; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 4px rgba(229, 53, 43, .22); }
@keyframes pj-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pj-down { position: absolute; right: var(--margin); bottom: clamp(38px, 7svh, 92px); color: #fff; }
.pj-down svg { width: 24px; height: 32px; transition: transform .45s var(--ease-expressive); }
@media (hover: hover) { .pj-down:hover svg { transform: translateY(6px); } }

/* ---------- the details: synopsis large on the left, credits on the right ---------- */
.pj-details { background: var(--paper); padding-block: clamp(90px, 11vw, 190px); }
.pj-details__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.pj-syn { grid-column: 1 / span 7; }
.pj-syn .pj-lead { margin-top: clamp(18px, 2vw, 30px); max-width: 26ch; }
.pj-body { margin-top: clamp(26px, 3vw, 46px); max-width: 40em; display: grid; gap: 1.05em; font-size: clamp(1.08rem, 1.32vw, 1.38rem); line-height: 1.55; color: #2B2926; }
.pj-cta { margin-top: clamp(30px, 3.4vw, 52px); }
.pj-credits { grid-column: 9 / span 4; }
.pj-poster { width: min(100%, 300px); aspect-ratio: 2 / 3; background: var(--stage); margin-bottom: clamp(26px, 3vw, 44px); box-shadow: 0 30px 60px -30px rgba(19, 18, 17, .45); }
.pj-poster img { width: 100%; height: 100%; object-fit: cover; }
.pj-poster img.fit { object-fit: contain; }
.pj-dl > div { padding-block: 15px 16px; border-top: 1px solid var(--rule); }
.pj-dl > div:last-child { border-bottom: 1px solid var(--rule); }
.pj-dl dt { font-weight: 700; font-size: .98rem; letter-spacing: -.01em; }
.pj-dl dd { margin-top: .3em; font-size: clamp(1.02rem, 1.18vw, 1.22rem); line-height: 1.4; color: #2B2926; }
.pj-links { display: flex; flex-wrap: wrap; gap: .35em 1.1em; }

/* ---------- the parts of a series: one-sheets edge to edge ---------- */
.pj-parts { background: var(--paper); padding-bottom: clamp(90px, 10vw, 170px); }
.pj-parts .pj-label { margin-bottom: clamp(24px, 2.6vw, 40px); }
.pj-parts__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pj-part__art { aspect-ratio: 2 / 3; background: var(--stage); overflow: hidden; }
.pj-part__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-expressive); }
.pj-part__art img.fit { object-fit: contain; }
@media (hover: hover) { .pj-part:hover .pj-part__art img { transform: scale(1.03); } }
.pj-part__type { height: 100%; display: grid; place-content: center; text-align: center; gap: .5em; color: var(--on-stage); padding: 12%; }
.pj-part__type b { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2.4rem); letter-spacing: -.035em; }
.pj-part__type span { font-size: .85rem; color: var(--on-stage-2); }
.pj-part__n, .pj-part__t, .pj-part__s, .pj-part .pj-links { padding-inline: clamp(14px, 1.4vw, 24px); }
.pj-part__n { margin-top: 18px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.pj-part__t { font-weight: 700; font-size: clamp(1.2rem, 1.5vw, 1.6rem); letter-spacing: -.03em; line-height: 1.1; margin-top: .15em; }
.pj-part__s { margin-top: .7em; font-size: .98rem; line-height: 1.5; color: #3A3733; max-width: 34ch; }
.pj-part .pj-links { margin-top: .9em; font-size: .92rem; font-weight: 600; }

/* ---------- the pictures: the zero-gutter wall, captions in the house grotesk ---------- */
.studio .pj-pics { background: var(--stage); }
.studio .cell__cap b { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(1.1rem, calc(var(--c) * .19vw + .5rem), 2.1rem); color: #fff; }
.studio .cell__cap span { font-family: var(--f-sans); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: clamp(.82rem, .9vw, .95rem); color: rgba(255, 255, 255, .8); }
.studio .cell::after { background: linear-gradient(to top, rgba(8, 7, 9, .62), rgba(8, 7, 9, 0) 42%) !important; }

/* ---------- a map, a record, a cast ---------- */
.pj-worlds { background: var(--paper); padding-block: clamp(90px, 10vw, 170px); }
.pj-worlds .pj-lead { margin-top: 18px; }
.pj-worlds__list { margin-top: clamp(36px, 4vw, 64px); columns: 2 320px; column-gap: var(--gutter); }
.pj-worlds__list li { break-inside: avoid; display: flex; gap: 1.2em; padding: 16px 0; border-top: 1px solid var(--rule); font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.35rem); letter-spacing: -.015em; }
.pj-worlds__list li span { color: var(--ink-2); font-weight: 500; min-width: 1.6em; }
.pj-awards { background: var(--stage); color: var(--on-stage); padding-block: clamp(90px, 10vw, 170px); }
.pj-awards__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.pj-awards__grid > div { grid-column: 1 / span 5; }
.pj-nums { display: flex; gap: clamp(28px, 4vw, 70px); margin: clamp(26px, 3vw, 44px) 0 clamp(26px, 3vw, 40px); }
.pj-nums b { display: block; font-weight: 700; font-size: clamp(3.6rem, 7vw, 7.4rem); letter-spacing: -.06em; line-height: .9; }
.pj-nums span { display: block; margin-top: .6em; font-weight: 500; font-size: .95rem; color: var(--on-stage-2); }
.pj-awards__list { grid-column: 7 / span 6; }
.pj-awards__list li { display: flex; justify-content: space-between; gap: 1.4em; padding: 14px 0; border-top: 1px solid var(--rule-stage); font-size: 1rem; line-height: 1.35; }
.pj-awards__list li:last-child { border-bottom: 1px solid var(--rule-stage); }
.pj-awards__list b { font-weight: 600; }
.pj-awards__list span { color: var(--on-stage-2); white-space: nowrap; }
.pj-cast { background: var(--paper); padding-block: clamp(90px, 10vw, 170px) 0; }
.pj-cast .pj-lead { margin-top: 18px; }
.pj-cast__grid { margin-top: clamp(36px, 4vw, 64px); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pj-cast__ph { overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.pj-cast__grid figure img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; background: var(--paper-2); filter: grayscale(.12); }
.pj-cast__grid figcaption { padding: 12px 14px 26px; font-weight: 600; font-size: .92rem; letter-spacing: -.01em; line-height: 1.25; }
.pj-names { margin-top: 26px; padding-bottom: clamp(90px, 10vw, 170px); font-weight: 600; font-size: clamp(1.3rem, 2vw, 2.1rem); letter-spacing: -.03em; line-height: 1.3; }

/* ---------- the next film: the whole screen is the way forward ---------- */
.pj-next { position: relative; display: block; height: 92svh; min-height: 520px; background: var(--stage); color: #fff; overflow: hidden; isolation: isolate; }
.pj-next__media { position: absolute; inset: 0; z-index: -1; }
.pj-next__media > img, .pj-next__media > video, .pj-next__media .pj-hero__wash > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-expressive), opacity .8s; opacity: .62; }
.pj-next__media .grain { display: none; }
.pj-next__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 7, 9, .7), rgba(8, 7, 9, .1) 60%); }
.pj-next__in { position: absolute; left: var(--margin); right: var(--margin); bottom: clamp(38px, 7svh, 92px); display: grid; gap: .4em; }
.pj-next__k { font-weight: 600; font-size: 1rem; color: rgba(255, 255, 255, .8); display: inline-flex; align-items: center; gap: .6em; }
.pj-next__k::after { content: ""; width: 44px; height: 1px; background: currentColor; transition: width .6s var(--ease-expressive); }
.pj-next__t { font-weight: 700; font-size: clamp(3rem, 7.4vw, 8.6rem); letter-spacing: -.058em; line-height: .88; max-width: 13ch; }
.pj-next__s { margin-top: .3em; font-weight: 500; font-size: 1.02rem; color: rgba(255, 255, 255, .78); }
@media (hover: hover) { .pj-next:hover .pj-next__media > img, .pj-next:hover .pj-next__media > video { transform: scale(1.035); opacity: .8; } .pj-next:hover .pj-next__k::after { width: 90px; } }

/* ---------- the accessibility button: still blue, still bottom left, quieter ---------- */
.axb { width: 44px !important; height: 44px !important; box-shadow: 0 10px 22px -8px rgba(20, 103, 242, .5), 0 3px 8px rgba(0, 0, 0, .25) !important; }
.axb svg { width: 26px !important; height: 26px !important; }
.axm { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- phones: everything, restaged ---------- */
@media (max-width: 860px) {
  .pj-hero { height: 88svh; }
  .pj-hero__in { right: var(--margin); bottom: 32px; }
  .pj-down { display: none; }
  .pj-details__grid { display: block; }
  .pj-credits { margin-top: 56px; }
  .pj-poster { width: 62%; }
  .pj-parts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-part { margin-bottom: 28px; }
  .pj-awards__grid { display: block; }
  .pj-awards__list { margin-top: 36px; }
  .pj-awards__list span { white-space: normal; text-align: right; }
  .pj-cast__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pj-next { height: 72svh; }
}
@media (prefers-reduced-motion: reduce) { .pj-hero__media > video, .pj-hero__media > img, .pj-crumb, .pj-title, .pj-meta { animation: none; } }
html.shot .pj-hero, html.shot .pj-next { height: 820px; }

/* ---------- the footer, every page: the mark, four short lists, the small print ---------- */
.ft { background: var(--stage); color: var(--on-stage); padding: clamp(80px, 9vw, 150px) var(--margin) clamp(26px, 2.6vw, 40px); }
.ft__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
.ft__mark { display: block; width: min(100%, 420px); }
.ft__mark img { width: 100%; height: auto; display: block; }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.ft__cols > div { display: grid; gap: .55em; align-content: start; font-size: 1rem; }
.ft__k { font-weight: 700; font-size: .95rem; margin-bottom: .45em; color: var(--on-stage); }
.ft__cols a { color: var(--on-stage-2); width: fit-content; transition: color .25s; }
.ft__cols span { color: rgba(242, 238, 230, .42); font-size: .9rem; }
@media (hover: hover) { .ft__cols a:hover { color: var(--on-stage); } }
.ft__legal { margin-top: clamp(60px, 7vw, 120px); max-width: 78ch; font-size: .8rem; line-height: 1.6; color: rgba(242, 238, 230, .42); }
.ft__base { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule-stage); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; font-size: .82rem; color: rgba(242, 238, 230, .5); }
@media (max-width: 860px) {
  .ft__top { grid-template-columns: 1fr; gap: 56px; }
  .ft__mark { width: 62%; }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}

/* ---------- v10: the shared parts, re-voiced on every studio page (no condensed face, no typewriter) ---------- */
.studio { --f-cine: var(--f-sans); --f-mono: var(--f-sans); --f-bill: var(--f-sans); }
.studio .hero-t, .studio .h1, .studio .h2, .studio .cine, .studio .pull, .studio .record__cell b, .studio .awards__nums b, .studio .part__txt h3, .studio .related b, .studio .rowi__t, .studio .readout b, .studio .proof h3, .studio .fbody__main .lead, .studio .tile--type .tile__media b, .studio .press--text h3 { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.05em; line-height: .96; }
.studio .hero-t { font-size: clamp(2.8rem, 6.8vw, 8rem); line-height: .9; letter-spacing: -.058em; text-wrap: balance; }
.studio .h1 { font-size: clamp(2.2rem, 4.6vw, 5.2rem); line-height: .98; text-wrap: balance; }
.studio .h2 { font-size: clamp(1.8rem, 3.2vw, 3.6rem); letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.studio .record__cell b, .studio .awards__nums b { font-size: clamp(3rem, 5.6vw, 6.4rem); letter-spacing: -.06em; line-height: .9; }
.studio .slug { font-family: var(--f-sans); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; text-transform: none; }
.studio .slug::before { display: none; }
.studio .status { font-family: var(--f-sans); font-weight: 600; font-size: .78rem; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: .52em .9em .5em; }
.studio .mono { font-family: var(--f-sans); letter-spacing: 0; text-transform: none; font-size: .92rem; }
.studio .cell--say b { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(1.35rem, calc(var(--c) * .26vw + .6rem), 2.7rem); }
.studio .rail--natural figcaption { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.05rem, 1.4vw, 1.5rem); }
.studio .tabs button, .studio .view-toggle button, .studio .rowi__m, .studio .readout span, .studio .rec-table th, .studio .rec-table td.res, .studio .awards__list li span, .studio .watch a { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; }
.studio .rec-table th { font-weight: 700; font-size: .85rem; }
.studio .rec-table td.res { font-weight: 600; font-size: .85rem; }
.studio .awards__list li span { font-size: .85rem; }
.studio .lead { letter-spacing: -.012em; }
.ft { padding-bottom: 90px; }

/* ---------- page to page: the picture you clicked becomes the next page's stage (cross-document View Transitions) ---------- */
::view-transition-group(pj-stage) { animation-duration: .85s; animation-timing-function: cubic-bezier(.65, 0, .2, 1); }
::view-transition-old(pj-stage), ::view-transition-new(pj-stage) { height: 100%; object-fit: cover; overflow: hidden; }

/* ---------- About: the title card in the house grotesk, then the statement ---------- */
.studio .titles__h1 { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.05em; line-height: .95; font-size: clamp(2rem, 3.8vw, 4.4rem); }
.studio .titles__film b { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.045em; line-height: .95; font-size: clamp(2.2rem, 4.6vw, 5.4rem); }
.studio .titles__film span, .studio .titles__slug, .studio .titles__cue { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; }
.st-statement { background: var(--paper); padding-block: clamp(100px, 12vw, 210px); }
.st-statement__h { margin-top: clamp(18px, 2vw, 30px); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 6.4rem); letter-spacing: -.055em; line-height: .94; max-width: 15ch; text-wrap: balance; }
.st-statement__p { margin-top: clamp(26px, 3vw, 46px); max-width: 36ch; font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.45; color: #2B2926; }

/* =====================================================================================================
   v11 MOTION (motion.js): everything under the header moves with the scroll. These are the static
   structures it drives; without JS or under reduced motion the page stays calm and complete.
   ===================================================================================================== */
.m-on, .m-on > img, .m-on > video, .m-on > picture > img { transition: none !important; }
.m-on > img, .m-on > video { transform-origin: 50% 50%; will-change: transform; }

/* the filmstrip: a stack everywhere by default; motion.js pins it into a strip on desktop */
.pj-strip { display: contents; }
.pj-strip__intro { grid-column: 1 / -1; grid-row: span 2; align-self: end; padding: clamp(28px, 4vw, 60px) var(--margin) clamp(18px, 2vw, 28px); color: var(--on-stage); }
@media (max-width: 860px) { .pj-strip__intro { grid-row: span 3; } }
.pj-strip__t { margin-top: 10px; font-weight: 700; font-size: clamp(2rem, 4vw, 4.4rem); letter-spacing: -.05em; line-height: .95; }
.pj-strip__s { margin-top: 12px; color: var(--on-stage-2); font-weight: 500; }
@media (min-width: 861px) {
  html.js .pj-pics.m-strip { display: block; height: 100svh; overflow: hidden; background: var(--stage); }
  html.js .m-strip .pj-strip { display: flex; align-items: center; height: 100%; width: max-content; padding-inline: var(--margin) 12vw; will-change: transform; }
  html.js .m-strip .cell { flex: none; height: 76svh; width: calc(76svh * var(--c) / var(--r)); margin-right: clamp(10px, 1vw, 18px); grid-column: auto; grid-row: auto; }
  html.js .m-strip .pj-strip__intro { flex: none; width: clamp(260px, 26vw, 440px); height: 76svh; display: grid; align-content: end; padding: 0 4vw 0 0; }
}

/* the slate in the round */
.m-slate { position: relative; background: var(--stage); color: var(--on-stage); overflow: hidden; padding-block: clamp(30px, 3vw, 60px) clamp(60px, 7vw, 110px); }
.m-slate__stage { position: relative; height: clamp(420px, 44vw, 700px); perspective: 1500px; perspective-origin: 50% 30%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.m-slate__stage.is-grab { cursor: grabbing; }
.m-slate__ring { --w: clamp(120px, 10.6vw, 190px); --r: calc(var(--w) * .54 / tan(180deg / var(--n))); position: absolute; left: 50%; top: 38%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; transform: translate3d(-50%, -50%, 0) rotateX(-6deg); }
.m-slate__card { position: absolute; width: var(--w); aspect-ratio: 2 / 3; left: calc(var(--w) / -2); top: calc(var(--w) * -.75); transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #000; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .9); filter: brightness(.55); transition: filter .6s var(--ease-productive); -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255, 255, 255, .16)); }
.m-slate__card.is-front { filter: none; }
.m-slate__card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.m-slate__card img.fit { object-fit: contain; }
.m-slate__cap { position: relative; text-align: center; margin-top: clamp(40px, 5vw, 80px); padding-inline: var(--margin); }
.m-slate__t { margin-top: 12px; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 3.4rem); letter-spacing: -.045em; line-height: 1; min-height: 1em; }
.m-slate__s { margin-top: 10px; color: var(--on-stage-2); font-weight: 500; }
.m-slate__hint { margin-top: 18px; font-size: .85rem; color: rgba(242, 238, 230, .45); }
@media (max-width: 860px) {
  .m-slate__stage { height: 104vw; perspective: 1000px; }
  .m-slate__ring { --w: 30vw; }
}

/* laurels and platform marks as running rows (margins, not gaps, so the loop is seamless) */
.m-marquee { display: block !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.m-marquee__track { display: flex; align-items: center; width: max-content; padding-block: 6px; will-change: transform; }
.m-marquee__track > * { flex: none; margin-right: clamp(30px, 3.6vw, 64px); }
.laurels.m-marquee .m-marquee__track > img { width: clamp(84px, 7.4vw, 124px); height: auto; }
.marks__row.m-marquee .m-marquee__track > img { height: clamp(24px, 2.6vw, 40px); width: auto; max-width: none; }

/* home tiles that rotate through their own pictures */
.rb__cyc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.m-on.m-cycling > img, .m-cycling > img { transition: opacity 1.3s var(--ease-productive) !important; }
.m-cycling > img:not(.is-on) { opacity: 0; }
.m-cycling > img.is-on { opacity: 1; }

/* rm.css */
/* =====================================================================================================
   v12 rm.css (2026-09-21): radicalmedia.com, measured on their live site at 1440 and 390, for Lolli Brands.
   Helvetica Neue (their stack), black on white, 30 px margins and gutters, 92 px sticky header, 30 px bold card
   lines, 48 px curtain menu, 32 px tabs, 85 px project titles, 24/36 px body, grey #757575 / #666 / #999.
   No scroll animation: that is how their site behaves.
   ===================================================================================================== */
body.rm { --rm-m: 30px; --rm-g: 30px; --g1: #757575; --g2: #666; --g3: #999; background: #fff; color: #000; font-family: "Helvetica Neue", Switzer, Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 24px; letter-spacing: -.02em; line-height: normal; }
.rm .rv, .rm .wipe, .rm .wipe > img, .rm .wipe > video, .rm .line-mask > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
.rm .grain, .cursor-pill { display: none !important; }
@view-transition { navigation: none; }
.rm video.ar-169 { aspect-ratio: 16 / 9; } .rm video.ar-21 { aspect-ratio: 1920 / 912; } .rm video.ar-23 { aspect-ratio: 2 / 3; }

/* ---------- header: sticky, white, the mark left, the burger right ---------- */
.rm-hdr { position: sticky; top: 0; z-index: 80; height: 92px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--rm-m); }
.rm-logo { display: block; }
.rm-logo img { height: 62px; width: auto; display: block; }
.rm-burger { position: relative; z-index: 2; width: 55px; height: 62px; display: grid; align-content: center; justify-items: end; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: #000; }
.rm-burger i { display: block; width: 40px; height: 5px; background: currentColor; transition: transform .3s cubic-bezier(.7, 0, .2, 1), opacity .2s; }
.rm-menu-open .rm-burger i:nth-of-type(1) { transform: translateY(13px) rotate(45deg); }
.rm-menu-open .rm-burger i:nth-of-type(2) { opacity: 0; }
.rm-menu-open .rm-burger i:nth-of-type(3) { transform: translateY(-13px) rotate(-45deg); }

/* ---------- the curtain: a white page of big bold links ---------- */
.rm-menu { position: fixed; inset: 0; z-index: 75; background: #fff; padding: 112px var(--rm-m) 40px; overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .55s; }
.rm-menu-open .rm-menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.rm-menu nav { display: grid; justify-items: start; }
.rm-menu nav a { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; padding: 2px 0; color: #000; }
.rm-menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
@media (hover: hover) { .rm-menu nav a:hover { color: var(--g3); } }

/* ---------- footer: black, the mark bottom left, small links right ---------- */
.rm-ftr { background: #000; color: #fff; padding: 44px var(--rm-m) 88px; letter-spacing: 0; }
.rm-ftr__legal { max-width: 96ch; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .45); margin-bottom: 44px; }
.rm-ftr__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; }
.rm-ftr__logo img { height: 62px; width: auto; display: block; }
.rm-ftr__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 13px; }
.rm-ftr__links > * { padding: 0 12px; border-left: 1px solid rgba(255, 255, 255, .35); line-height: 1; }
.rm-ftr__links > *:first-child { border-left: 0; }
.rm-ftr__links a { text-decoration: underline; text-underline-offset: 3px; }
.rm-ftr__links span { color: rgba(255, 255, 255, .65); }

/* ---------- home: the framed reel with the wordmark, the arrow ---------- */
.rm-hero { padding: 0 var(--rm-m); }
.rm-hero__frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.rm-hero__reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-hero__mark { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 50px rgba(0, 0, 0, .28)); }
.rm-down { display: grid; place-items: center; height: 131px; color: #000; }
.rm-down svg { width: 34px; height: 46px; }

/* ---------- the masonry: two columns of cards and news ---------- */
.rm-wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rm-g); align-items: start; padding: 0 var(--rm-m) 90px; }
.rm-col { display: grid; row-gap: 42px; align-content: start; }
.rm-item { min-width: 0; }
.rm-card__link, .rm-news__link { position: relative; display: block; color: #000; isolation: isolate; }
.rm-card__link::before, .rm-news__link::before { content: ""; position: absolute; inset: -12px; z-index: -1; background: transparent; transition: background .12s; }
.rm-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.rm-card__media > img:not(.rm-mark), .rm-card__media > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.rm-card__copy { display: grid; padding-top: 12px; font-size: 30.5px; font-weight: 700; letter-spacing: -.03em; line-height: 1.07; }
.rm-card__copy > span { color: var(--g1); }
a.rm-card__link:hover::before, a.rm-card__link:focus-visible::before, a.rm-news__link:hover::before, a.rm-news__link:focus-visible::before { background: #000; }
a.rm-card__link:hover .rm-card__copy, a.rm-card__link:focus-visible .rm-card__copy, a.rm-news__link:hover h3, a.rm-news__link:focus-visible h3 { color: #fff; }
a.rm-card__link:hover .rm-card__copy > span, a.rm-news__link:hover .rm-news__copy > span { color: var(--g3); }
.rm-mark { position: absolute; right: 14px; bottom: 12px; z-index: 2; height: 28px; width: auto; max-width: 120px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, .5)); }
.rm-status { position: absolute; left: 14px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: #fff; background: rgba(0, 0, 0, .62); padding: 6px 10px 5px; }
.rm-status i { width: 8px; height: 8px; border-radius: 50%; background: #E5352B; }
.rm-news__link { display: grid; grid-template-columns: 48.6% minmax(0, 1fr); column-gap: 22px; align-items: start; }
.rm-news--text .rm-news__link { grid-template-columns: 1fr; }
.rm-news__media { position: relative; }
.rm-news__media > img, .rm-news__media > video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.rm-news__copy h3 { font-size: 30px; font-weight: 700; letter-spacing: -.022em; line-height: 1.1; }
.rm-news__copy > span { display: inline-block; margin-top: 14px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--g1); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- work: tabs over a three-column zero-gutter wall ---------- */
.rm-tabs { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 22px; }
.rm-tab { font: inherit; font-size: 31.7px; font-weight: 700; letter-spacing: -.03em; padding: 7.9px; background: none; border: 0; color: #000; cursor: pointer; line-height: 1.15; }
.rm-tab[aria-pressed="true"] { background: #000; color: #fff; }
@media (hover: hover) { .rm-tab:not([aria-pressed="true"]):hover { color: var(--g3); } }
.rm-tabs__d { padding: 10px var(--rm-m) 28px; max-width: 76ch; font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }
.rm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm-tile { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; color: #fff; }
.rm-tile[hidden] { display: none; }
.rm-tile > img, .rm-tile__vid, .rm-tile__wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-tile__vid { opacity: 0; transition: opacity .3s; }
.rm-tile.is-playing .rm-tile__vid { opacity: 1; }
.rm-tile__wash > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.5) saturate(1.1); transform: scale(1.25); }
.rm-tile__wash > .rm-tile__fit { position: absolute; left: 0; top: 7%; width: 100%; height: 86%; object-fit: contain; }
.rm-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 46%); pointer-events: none; }
.rm .nw { white-space: nowrap; }
.rm-tile__type { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; padding: 10%; background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--accent, #333) 32%, #000), #000); }
.rm-tile__type b { font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rm-tile__type span { font-size: 14px; font-weight: 700; color: var(--g3); letter-spacing: 0; }
.rm-tile:has(.rm-tile__type) .rm-tile__cap b { display: none; }
.rm-tile__cap { position: absolute; left: 23px; right: 23px; bottom: 18px; z-index: 2; display: grid; gap: 5px; }
.rm-tile__cap b { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rm-tile__cap > span { font-size: 16px; font-weight: 700; }

/* ---------- a project: breadcrumb, stage, details, modules, awards, related ---------- */
.rm-crumb { display: flex; align-items: center; gap: 12px; height: 49px; padding: 0 var(--rm-m); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.rm-crumb select { font: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 2l10 10L22 2' fill='none' stroke='white' stroke-width='3.4'/%3E%3C/svg%3E") no-repeat right 10px center / 20px 12px; border: 0; border-radius: 0; padding: 3px 40px 3px 10px; width: 240px; height: 34px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.rm-crumb__t { font-weight: 700; }
.rm-crumb--title { height: auto; padding: 0 22px; }
.rm-crumb__h { font-size: 31.7px; font-weight: 700; letter-spacing: -.03em; padding: 7.9px; background: #000; color: #fff; line-height: 1.15; }
.rm-stage { position: relative; height: calc(100svh - 141px); min-height: 460px; background: #000; color: #fff; overflow: hidden; }
.rm-stage__media > video, .rm-stage__media > img, .rm-stage__media > .rm-tile__wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 40%); pointer-events: none; }
.rm-stage__t { position: absolute; left: var(--rm-m); bottom: 28px; z-index: 2; max-width: 72%; font-size: 84.9px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.rm-stage .rm-mark { right: var(--rm-m); bottom: 44px; height: 40px; max-width: 170px; }
.rm-stage__st { left: var(--rm-m); top: 22px; }
.rm-caret { position: absolute; left: 50%; bottom: 10px; z-index: 2; transform: translateX(-50%); color: #fff; }
.rm-caret svg { width: 22px; height: 13px; display: block; }
.rm-details { padding: 80px 0 90px; }
.rm-details__in { max-width: 1137px; margin: 0 auto; padding: 0 30px; display: grid; grid-template-columns: minmax(0, 1fr) 358px; column-gap: 41px; align-items: start; }
.rm-label { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--g2); padding-bottom: 15px; }
.rm-syn p { font-size: 24px; line-height: 36px; letter-spacing: -.02em; }
.rm-syn p + p { margin-top: 36px; }
.rm-syn__lead { font-weight: 700; }
.rm-syn__cta { margin-top: 36px; }
.rm-btn { display: inline-block; background: #000; color: #fff !important; font-size: 20px; font-weight: 700; letter-spacing: -.02em; padding: 12px 18px 11px; }
@media (hover: hover) { .rm-btn:hover { background: #333; } }
.rm-credits { padding-top: 39px; }
.rm-credits > div { margin-bottom: 20px; }
.rm-credits dt { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #000; }
.rm-credits dd { font-size: 24px; line-height: 36px; letter-spacing: -.02em; color: var(--g3); }
.rm-credits dd a { color: var(--g3); text-decoration: underline; text-underline-offset: 3px; }
.rm-mod { max-width: 1440px; margin: 0 auto; padding: 0 var(--rm-m) 90px; }
.rm-parts { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--rm-g); }
.rm-part__art { aspect-ratio: 2 / 3; background: #000; overflow: hidden; }
.rm-part__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-part__art img.fit { object-fit: contain; }
.rm-part__type { height: 100%; display: grid; place-content: center; text-align: center; gap: 6px; color: #fff; padding: 12%; }
.rm-part__type b { font-size: 28px; font-weight: 700; }
.rm-part__type span { font-size: 14px; color: var(--g3); }
.rm-part__n { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--g1); }
.rm-part h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.rm-part__s { margin-top: 8px; font-size: 16px; line-height: 1.45; letter-spacing: -.01em; color: #333; }
.rm-part__w { margin-top: 8px; font-size: 14px; color: var(--g1); }
.rm-part__w a { text-decoration: underline; text-underline-offset: 2px; }
.rm-pics__row { display: flex; }
.rm-pic { position: relative; flex: var(--ar) 1 0; aspect-ratio: var(--ar); margin: 0; overflow: hidden; background: #000; }
.rm-pic > img, .rm-pic > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-pic figcaption { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; display: grid; gap: 2px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.rm-pic figcaption b { font-size: 20px; font-weight: 700; }
.rm-pic figcaption span { font-size: 14px; font-weight: 700; }
.rm-cast { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 0; }
.rm-cast__ph { aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.rm-cast__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rm-cast figcaption { padding: 8px 12px 0 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.rm-names { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.rm-worlds { columns: 2 320px; font-size: 24px; font-weight: 700; line-height: 1.6; list-style: decimal inside; }
.rm-awards, .rm-related { background: #000; color: #fff; }
.rm-awards__in, .rm-related__in { max-width: 1440px; margin: 0 auto; padding: 52px var(--rm-m) 76px; }
.rm-awards .rm-label, .rm-related .rm-label { color: #fff; border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 14px; margin-bottom: 22px; font-size: 16px; }
.rm-awards__grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--rm-g); align-items: start; }
.rm-nums { display: flex; gap: 60px; }
.rm-nums b { display: block; font-size: 97px; font-weight: 700; letter-spacing: -.03em; line-height: .95; }
.rm-nums span { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--g3); }
.rm-awards__list li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 18px; line-height: 1.3; }
.rm-awards__list span { color: var(--g3); white-space: nowrap; }
.rm-awards__more { margin-top: 30px; font-size: 16px; color: var(--g3); }
.rm-awards__more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rm-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 46px 30px; align-items: center; justify-items: center; padding: 26px 0 10px; }
.rm-logos > span { width: 100%; display: grid; place-items: center; }
.rm-logos img { width: 100%; max-width: 190px; height: auto; filter: brightness(0) invert(1); }
.rm-awards--logos .marks { margin-top: 50px; }
.rm-related__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm-related .rm-tile__cap b { font-size: 24px; }

/* ---------- about: who we are, centred ---------- */
.rm-about { max-width: 820px; margin: 0 auto; padding: 66px var(--rm-m) 100px; text-align: center; }
.rm-about__h { font-size: 54px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; line-height: 1.1; }
.rm-about__rule { display: block; width: 88px; height: 4px; margin: 40px auto 32px; background: #000; }
.rm-about__p p { margin-top: 25px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 34px; }
.rm-about__p p:first-child { margin-top: 0; }
.rm-founders { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--rm-g); padding: 0 var(--rm-m) 90px; }
.rm-founders__ph { aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.rm-founders__ph img { width: 100%; height: 100%; object-fit: cover; }
.rm-founders figcaption { display: grid; padding-top: 12px; font-size: 30.5px; font-weight: 700; letter-spacing: -.03em; line-height: 1.07; }
.rm-founders figcaption span { color: var(--g1); }

/* ---------- enquiries: Radical's contact page, black ---------- */
body.rm-contactpage { background: #000; color: #fff; }
.rm-contact__in { padding: 34px var(--rm-m) 100px; }
.rm-contact .rm-label { color: var(--g3); font-size: 16px; border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 12px; margin-top: 26px; }
.rm-contact__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 14px 0 34px; }
.rm-contact__k { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.rm-contact__grid p { font-size: 14px; line-height: 1.55; letter-spacing: 0; color: #bbb; }
.rm-contact__grid a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rm-contact__note { margin-top: 30px; font-size: 16px; color: var(--g3); }

/* ---------- the record: Radical's news list, then every line ---------- */
.rm-newslist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px var(--rm-g); padding: 0 var(--rm-m) 70px; }
.rm-newsrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; color: #000; }
.rm-newsrow__ph { aspect-ratio: 3 / 2; overflow: hidden; background: #eee; }
.rm-newsrow__ph img { width: 100%; height: 100%; object-fit: cover; }
.rm-newsrow__ph--none { background: #000; }
.rm-newsrow__t b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.rm-newsrow__t > span { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--g1); }
.rm-newsrow__t i { font-style: normal; font-weight: 400; margin-left: 14px; }
@media (hover: hover) { .rm-newsrow:hover b { text-decoration: underline; } }
.rm-table { padding: 0 var(--rm-m) 90px; }
.rm .rec-table, .rm .rec-tools { font-family: inherit; }
.rm .rec-table th { font-family: inherit; text-transform: none; letter-spacing: -.01em; font-size: 14px; font-weight: 700; color: #000; }
.rm .rec-table td { font-size: 15px; letter-spacing: -.01em; }
.rm .rec-table td.res, .rm .rec-table td.dt { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; }
.rm .rec-table td.vn, .rm .rec-table td.dt { color: var(--g1); }
.rm .rec-tools select, .rm .rec-tools input { font-family: inherit; }
.rm .marks .slug, .rm .marks p { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700; color: var(--g3); }

/* ---------- phones: their one column ---------- */
@media (max-width: 860px) {
  body.rm { --rm-m: 15px; --rm-g: 15px; font-size: 18px; }
  .rm-hdr { height: 64px; }
  .rm-logo img { height: 44px; }
  .rm-burger { width: 44px; height: 44px; gap: 6px; }
  .rm-burger i { width: 30px; height: 4px; }
  .rm-menu-open .rm-burger i:nth-of-type(1) { transform: translateY(10px) rotate(45deg); }
  .rm-menu-open .rm-burger i:nth-of-type(3) { transform: translateY(-10px) rotate(-45deg); }
  .rm-menu { padding-top: 84px; }
  .rm-menu nav a { font-size: 34px; }
  .rm-down { height: 96px; }
  .rm-wall { grid-template-columns: 1fr; row-gap: 34px; }
  .rm-col { display: contents; }
  .rm-card__copy { font-size: 20px; }
  .rm-news__link { grid-template-columns: 1fr; row-gap: 10px; }
  .rm-news__copy h3 { font-size: 20px; }
  .rm-news__copy > span { margin-top: 8px; font-size: 13px; }   /* v26: the source line only; a descendant rule shrank the sHEALed inside a headline (keepcase) */
  .rm-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
  .rm-tab { font-size: 21px; white-space: nowrap; }
  .rm-tabs__d { font-size: 15px; }
  .rm-tiles, .rm-related__row { grid-template-columns: 1fr; }
  .rm-tile__cap b { font-size: 24px; }
  .rm-crumb { height: 46px; font-size: 16px; }
  .rm-crumb select { width: 150px; height: 28px; }
  .rm-crumb__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-crumb select { font-size: 15px; min-width: 150px; }
  .rm-crumb__h { font-size: 21px; }
  .rm-stage { height: auto; min-height: 0; aspect-ratio: 5 / 3; }
  .rm-stage__t { font-size: 28px; max-width: 76%; bottom: 16px; }
  .rm-stage .rm-mark { height: 22px; bottom: 18px; }
  .rm-details { padding: 44px 0 60px; }
  .rm-details__in { grid-template-columns: 1fr; padding: 0 var(--rm-m); }
  .rm-syn p { font-size: 17px; line-height: 1.55; }
  .rm-syn p + p { margin-top: 18px; }
  .rm-credits { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; padding-top: 30px; }
  .rm-credits dt { font-size: 15px; } .rm-credits dd { font-size: 15px; line-height: 1.45; }
  .rm-label { font-size: 17px; }
  .rm-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .rm-pics__row { flex-wrap: wrap; }
  .rm-pic { flex-basis: 100%; }
  .rm-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rm-awards__grid { grid-template-columns: 1fr; row-gap: 30px; }
  .rm-nums b { font-size: 60px; }
  .rm-awards__list li { font-size: 15px; } .rm-awards__list span { white-space: normal; text-align: right; }
  .rm-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
  .rm-founders { grid-template-columns: 1fr; row-gap: 30px; }
  .rm-founders figcaption { font-size: 20px; }
  .rm-contact__grid { grid-template-columns: 1fr 1fr; }
  .rm-newslist { grid-template-columns: 1fr; }
  .rm-newsrow { grid-template-columns: 120px minmax(0, 1fr); }
  .rm-ftr__base { flex-direction: column; align-items: flex-start; }
}

/* ---------- 404 ---------- */
.rm-404 { padding: 60px var(--rm-m) 160px; }
.rm-404__h { font-size: 84.9px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; max-width: 13ch; }
.rm-404__p { margin-top: 26px; font-size: 24px; line-height: 36px; color: var(--g1); }
.rm-404__a { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .rm-about__h { font-size: 34px; } .rm-about__rule { margin: 26px auto 28px; } .rm-about__p p { font-size: 18px; line-height: 28px; } .rm-404 { padding: 36px 15px 110px; } .rm-404__h { font-size: 44px; } .rm-404__p { font-size: 18px; line-height: 27px; } }
@media (prefers-reduced-motion: reduce) { .rm-menu, .rm-menu-open .rm-menu, .rm-burger i, .rm-tile__vid, .rm-card__link::before, .rm-news__link::before { transition: none; } }

/* v13: The New Woo's stage is its trilogy of one-sheets (no footage exists yet: principal photography is October 2026) */
.rm-stage__trio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.2%; padding: 4% 6% 9%; background: radial-gradient(90% 80% at 50% 40%, color-mix(in srgb, var(--accent, #C9A24B) 22%, #000), #000 70%); }
.rm-stage__trio img { height: 100%; width: auto; max-width: 30%; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.rm-tile--type .rm-tile__cap b { display: none; }
@media (max-width: 860px) { .rm-stage__trio { padding: 13% 4% 15%; gap: 3%; } }

/* v13 QA: a matted picture (its file is smaller than its slot) stands whole and centred, capped at --pw */
.rm-pic--mat .rm-tile__fit { left: 0; right: 0; max-width: var(--pw); margin: 0 auto; }

/* v13 QA: a news row without a picture of its own shows its festival's laurel or a type mark from its own words, never an
   empty box */
.rm-newsrow__ph--mark { display: grid; place-content: center; justify-items: center; background: #000; color: #fff; text-align: center; }
.rm-newsrow__ph--mark b { font-size: clamp(30px, 3.4vw, 60px); font-weight: 700; letter-spacing: -.04em; line-height: .9; }
.rm-newsrow__ph--mark i { margin-top: .45em; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.rm-newsrow__ph--mark { position: relative; }
.rm-newsrow__ph .rm-newsrow__laurel { position: absolute; inset: 0; margin: auto; width: 76%; height: 76%; object-fit: contain; }

/* v14 (2026-09-23): every page opens on its own reel. Section pages reuse the project stage; the pitch pages get a
   moving backdrop behind their title (object-position set per clip where a face sits off centre). */
.rm-stage--page { height: calc(100svh - 150px); }
.rm-stage--page .rm-stage__t { text-transform: none; }
.rm-contactpage .rm-stage--page, .rm-aboutpage .rm-stage--page { background: #000; }
.wtd-hero__bg--vid { opacity: .62; }
.wtd-hero__bg--vid video { position: absolute; inset: 0; }
.wynx-hero--vid { background: #0b0a09; color: #fff; }
.wynx-hero--vid .wtd-lock i { background: rgba(255, 255, 255, .35); }
@media (max-width: 860px) { .rm-stage--page { height: auto; aspect-ratio: 4 / 3; } .wtd-hero__bg--vid { opacity: .5; } }
/* v14: About's family photograph under the founders; Enquiries' two founders beside their own addresses */
.rm-family { padding: 0 var(--rm-m) 90px; }
.rm-family img { display: block; width: 100%; height: auto; }
.rm-family figcaption { display: grid; gap: 4px; padding-top: 12px; max-width: 900px; font-size: 30.5px; font-weight: 700; letter-spacing: -.03em; line-height: 1.07; }
.rm-family figcaption span { color: var(--g1); font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.rm-contact__people { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 30px; padding: 14px 0 30px; }
.rm-contact__ph { aspect-ratio: 2 / 3; overflow: hidden; background: #111; }
.rm-contact__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.rm-contact__people figcaption { display: grid; gap: 2px; padding-top: 12px; }
.rm-contact__people figcaption b { font-size: 20px; color: #fff; }
.rm-contact__people figcaption span { font-size: 14px; color: #bbb; }
.rm-contact__people figcaption a { font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .rm-family { padding: 0 var(--rm-m) 60px; } .rm-family figcaption { font-size: 22px; } .rm-family figcaption span { font-size: 16px; } .rm-contact__people { grid-template-columns: 1fr 1fr; gap: 15px; } }
/* v14 cast grids (Bye Ol' Dentistry, sHEALed): professional portraits, name over credentials, a hairline gutter */
.rm-cast--v14 { gap: 26px 2px; }
.rm-cast--v14 .rm-cast__ph img { object-position: 50% 50%; }
.rm-cast--v14 figcaption { display: grid; gap: 2px; }
.rm-cast--v14 figcaption span { font-size: 12.5px; font-weight: 400; color: var(--g1); letter-spacing: 0; line-height: 1.35; }
@media (min-width: 701px) and (max-width: 1100px) { .rm-cast--v14 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* v15 (Ori, 2026-09-23: "no dead space when you go onto the top section of each page", "at least four video clips"):
   the opening reel fills the first screen on every device. Phones play the reel's own portrait cut (-m.mp4, each clip
   cropped on its people by tools/render_media.py) in a 4:5 stage; tablets see the widescreen reel whole (16:9, nothing
   cropped); a desktop stage is never narrower than 16:9 (so nothing is cut at the sides) nor wider than about 2.2:1, and
   its crop comes off the bottom only, where no heads are (tools/v15_plan.py and tools/cropcheck.py check that crop). */
.rm-stage__media > video { object-position: 50% 0%; }
@media (min-width: 861px) { .rm-stage, .rm-stage--page { min-height: max(460px, 46vw); max-height: 56.25vw; } }
@media (min-width: 601px) and (max-width: 860px) { .rm-stage, .rm-stage--page { aspect-ratio: 16 / 9; } }
@media (max-width: 600px) {
  .rm-stage:has(video[data-m]), .rm-stage--page:has(video[data-m]) { aspect-ratio: 4 / 5; }
  .rm-hero { position: relative; padding: 0; }
  .rm-hero__frame:has(video[data-m]) { aspect-ratio: 4 / 5; }
  .rm-hero__mark { width: 80%; }
  .rm-hero .rm-down { position: absolute; left: 50%; bottom: 14px; z-index: 2; height: auto; transform: translateX(-50%); color: #fff; }
  .rm-hero .rm-down svg { width: 24px; height: 32px; }
  .rm-hero .rm-down + * { margin-top: 0; }
  .rm-home .rm-wall { padding-top: 24px; }
}
/* v15: the synopsis column's moving picture (only when the credits beside it run longer), and the rows of clips */
.rm-syn__media { margin: 44px 0 0; }
.rm-motion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px var(--rm-g); }
.rm-motion--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rm-motion--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rm-motion figure, .rm-syn__media { margin-left: 0; margin-right: 0; }
.rm-motion__f { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.rm-motion__f > video, .rm-motion__f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-motion figcaption, .rm-syn__media figcaption { display: grid; gap: 2px; padding-top: 11px; }
.rm-motion figcaption b, .rm-syn__media figcaption b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.rm-motion figcaption span, .rm-syn__media figcaption span { font-size: 15px; font-weight: 700; color: var(--g1); letter-spacing: -.01em; }
.rm-contactpage .rm-motion figcaption b { color: #fff; } .rm-contactpage .rm-motion figcaption span { color: #bbb; }
@media (max-width: 860px) { .rm-motion, .rm-motion--4 { grid-template-columns: 1fr 1fr; gap: 20px 15px; } .rm-motion figcaption b { font-size: 17px; } .rm-motion figcaption span { font-size: 13px; } }
@media (max-width: 600px) { .rm-motion, .rm-motion--2, .rm-motion--4 { grid-template-columns: 1fr; } }
/* v15: on a phone the pitch pages' opening reel is its own 4:5 picture at the top (the portrait cut, placed on the
   people), with the title under it on the dark ground, not a faded backdrop cropped behind the text */
@media (max-width: 600px) {
  .wtd-hero:has(.wtd-hero__bg--vid), .woo-hero:has(.wtd-hero__bg--vid), .wynx-hero--vid { display: block; min-height: 0; }
  .wtd-hero__bg--vid { position: relative; inset: auto; aspect-ratio: 4 / 5; opacity: 1; }
  .wtd-hero__bg--vid::after { background: linear-gradient(180deg, rgba(8, 11, 13, .45), rgba(8, 11, 13, 0) 26%, rgba(8, 11, 13, 0) 72%, #080B0D 100%); }
  .wynx-hero--vid .wtd-hero__bg--vid::after { background: linear-gradient(180deg, rgba(11, 10, 9, .45), rgba(11, 10, 9, 0) 26%, rgba(11, 10, 9, 0) 72%, #0b0a09 100%); }
  .wtd-hero__bg--vid + .wtd-hero__in { padding-top: 8px; }
}

/* v15 depth (Ori: "dig deep into all the documentary pages ... the different people that they work with"): the people
   of a title, its episodes, its press and interviews; on About the story and the team; on the home page the names on camera */
.rm-lead { max-width: 980px; margin: 0 0 26px; font-size: 24px; line-height: 36px; letter-spacing: -.02em; }
.rm-also { max-width: 1100px; margin-top: 22px; font-size: 17px; line-height: 1.55; letter-spacing: 0; color: var(--g1); }
.rm-pics--wall .rm-pic figcaption b { font-size: 17px; }
.rm-cast.rm-cast--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rm-cast.rm-cast--c8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rm-parts--eps { row-gap: 34px; }
.rm-parts--eps .rm-part { border-top: 1px solid #000; }
.rm-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rm-g); }
.rm-links li { border-top: 1px solid #000; }
.rm-links a { display: grid; justify-items: start; gap: 8px; padding: 14px 0 28px; color: #000; }
.rm-links__src { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--g1); }
.rm-links__src i { font-style: normal; font-weight: 400; margin-left: 14px; }
.rm-links b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.rm-links__go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--g1); }
.rm-links__go svg { width: 12px; height: 12px; }
@media (hover: hover) { .rm-links a:hover b { text-decoration: underline; text-underline-offset: 4px; } .rm-links a:hover .rm-links__go { color: #000; } }
.rm-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--rm-g); align-items: end; }
.rm-feature__ph { aspect-ratio: 4 / 5; max-width: 460px; overflow: hidden; background: #eee; }
.rm-feature__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-feature h3 { font-size: 60px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rm-feature p { max-width: 760px; margin-top: 18px; font-size: 24px; line-height: 36px; letter-spacing: -.02em; }
.rm-time { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--rm-g); }
.rm-time li { border-top: 1px solid #000; padding-top: 12px; }
.rm-time b { display: block; font-size: 48px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rm-time span { display: block; margin-top: 12px; font-size: 17px; line-height: 1.5; letter-spacing: 0; color: #333; }
.rm-oncam { max-width: 1440px; margin: 0 auto; padding: 60px var(--rm-m) 90px; }
.rm-oncam__t { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 var(--rm-g); padding: 16px 0 26px; border-top: 1px solid #000; }
.rm-oncam__w { align-self: start; padding-top: 9px; font-size: 16px; font-weight: 700; color: var(--g1); }
.rm-oncam__t p { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.rm-oncam__t p span { white-space: nowrap; }
.rm-oncam__t p i { font-style: normal; font-weight: 400; color: #c4c4c4; }
.rm-oncam__t p a { color: var(--g1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap; }
@media (hover: hover) { .rm-oncam__w:hover, .rm-oncam__t p a:hover { color: #000; } }
@media (max-width: 1100px) { .rm-cast.rm-cast--c8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .rm-lead { font-size: 17px; line-height: 1.55; margin-bottom: 18px; }
  .rm-also { font-size: 15px; }
  .rm-links { grid-template-columns: 1fr; }
  .rm-links b { font-size: 19px; }
  .rm-feature { grid-template-columns: 1fr; }
  .rm-feature__ph { max-width: none; }
  .rm-feature h3 { font-size: 34px; }
  .rm-feature p { font-size: 17px; line-height: 1.55; }
  .rm-time { grid-template-columns: 1fr 1fr; gap: 26px 15px; }
  .rm-time b { font-size: 32px; }
  .rm-time span { font-size: 15px; }
  .rm-oncam { padding: 40px var(--rm-m) 60px; }
  .rm-oncam__t { grid-template-columns: 1fr; }
  .rm-oncam__w { padding: 0 0 6px; }
  .rm-oncam__t p { font-size: 20px; }
  .rm-parts--eps { grid-template-columns: 1fr 1fr; }
  /* the wall of bodybuilders: two columns, each photograph whole, instead of one long stack */
  .rm-pics--wall { columns: 2; column-gap: 2px; }
  .rm-pics--wall .rm-pics__row { display: contents; }
  .rm-pics--wall .rm-pic { display: block; width: 100%; margin: 0 0 2px; break-inside: avoid; }
  .rm-pics--wall .rm-pic figcaption { left: 10px; right: 10px; bottom: 8px; }
  .rm-pics--wall .rm-pic figcaption b { font-size: 14px; }
}
@media (max-width: 600px) { .rm-parts--eps { grid-template-columns: 1fr; } .rm-cast.rm-cast--c5, .rm-cast.rm-cast--c8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v15: the synopsis column's picture keeps its own shape; Skin Deep's portrait sits beside its caption; Fat Lolli's
   interviews fill its column */
.rm-syn__media--side { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 24px; align-items: end; }
.rm-syn__ph { aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.rm-syn__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-syn__media--side figcaption { padding-top: 0; }
.rm-syn__media--side figcaption i { font-style: normal; font-size: 16px; font-weight: 700; color: var(--g1); }
.rm-syn__media--side figcaption b { font-size: 30px; letter-spacing: -.03em; }
.rm-syn__media--side figcaption span { font-size: 17px; font-weight: 400; line-height: 1.5; color: #333; letter-spacing: 0; }
.rm-syn__links { margin-top: 44px; }
.rm-syn__links .rm-links { grid-template-columns: 1fr; }
.rm-syn__links .rm-links b { font-size: 20px; }
.rm-syn__links .rm-links a { padding: 12px 0 18px; }
@media (max-width: 600px) { .rm-syn__media--side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 15px; } .rm-syn__media--side figcaption b { font-size: 22px; } .rm-syn__media--side figcaption span { font-size: 14px; } }
/* v15b: The Guru's bodybuilders named in type (the on-set photographs were phone snapshots) */
.rm-namewall { max-width: 1200px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.35; }
.rm-namewall span { white-space: nowrap; }
.rm-namewall i { font-style: normal; font-weight: 400; color: #c4c4c4; }
@media (max-width: 860px) { .rm-namewall { font-size: 20px; } }
/* v16: a stage caption, where a title's reel is another title's footage (World's Top Dentist, filmed for Bye Ol' Dentistry) */
.rm-stage__cap { position: absolute; right: var(--rm-m); top: 22px; z-index: 2; max-width: 360px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #fff; background: rgba(0, 0, 0, .62); padding: 6px 10px 5px; text-align: right; }
@media (max-width: 860px) { .rm-stage__cap { top: 12px; right: 12px; max-width: 58%; font-size: 12px; padding: 4px 7px 3px; } }

/* ---------- v17: full-bleed bands, the trailer player, the rail of more to watch, edge-to-edge picture rows ---------- */
.rm-bleed { position: relative; width: 100%; height: clamp(560px, 86vh, 1000px); overflow: hidden; background: #000; color: #fff; margin: 0 0 90px; }
.rm-bleed__media { position: absolute; inset: 0; }
.rm-bleed__media > img, .rm-bleed__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12) 42%, rgba(0, 0, 0, 0) 60%); pointer-events: none; }
.rm-bleed__copy { position: absolute; left: var(--rm-m); right: var(--rm-m); bottom: 44px; z-index: 2; max-width: 1180px; }
.rm-bleed__k { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.rm-bleed__t { font-size: clamp(44px, 6.6vw, 112px); font-weight: 700; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.rm-bleed__s { margin-top: 16px; font-size: 20px; font-weight: 700; line-height: 1.35; max-width: 760px; }
.rm-bleed--flush { margin-bottom: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rm-bleed__media { inset: -7% 0; animation: rm-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes rm-drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
  }
}
.rm-watch { position: relative; width: 100%; background: #000; margin: 0 0 90px; }
.rm-watch__frame { position: relative; width: min(100%, calc((100vh - 92px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: calc(100vh - 92px); margin: 0 auto; overflow: hidden; cursor: pointer; color: #fff; }   /* v23: the whole frame fits under the sticky header; v23b: always 16:9, never cropped (the trailers play whole), standing in black on short, wide screens */
.rm-watch__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.rm-watch__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .25)); pointer-events: none; transition: opacity .4s; }
.rm-watch__play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 118px; height: 118px; margin: -59px 0 0 -59px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .28); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s; }
.rm-watch__play svg { width: 54px; height: 54px; margin-left: 6px; }
.rm-watch__play:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.rm-watch__copy { position: absolute; left: var(--rm-m); right: var(--rm-m); bottom: 40px; z-index: 2; pointer-events: none; transition: opacity .4s; }
.rm-watch__k { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: flex; gap: 14px; align-items: baseline; }
.rm-watch__k span { letter-spacing: .04em; opacity: .75; }
.rm-watch__t { margin-top: 12px; font-size: clamp(38px, 5.4vw, 92px); font-weight: 700; letter-spacing: -.04em; line-height: 1; max-width: 1200px; text-wrap: balance; }
.rm-watch__s { margin-top: 12px; font-size: 20px; font-weight: 700; max-width: 760px; line-height: 1.35; }
.rm-watch__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; background: #000; }
.rm-watch__frame.is-playing { cursor: default; }
.rm-watch__frame.is-playing::after, .rm-watch__frame.is-playing .rm-watch__copy { opacity: 0; }
@media (hover: hover) { .rm-watch__frame:hover > img { transform: scale(1.03); } .rm-watch__frame:hover .rm-watch__play { transform: scale(1.08); background: rgba(0, 0, 0, .45); } }
.rm-mod--rail { max-width: none; padding-left: 0; padding-right: 0; }
.rm-mod--rail > .rm-label { max-width: 1440px; margin: 0 auto; padding-left: var(--rm-m); padding-right: var(--rm-m); }
.rm-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--rm-m) 18px; scrollbar-width: none; scroll-padding: 0 var(--rm-m); overscroll-behavior-x: contain; }
/* v24: no bottom bar; a row slides under a mouse drag (rm.js), a finger or a trackpad */
.rm-rail::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .rm-rail, .rm-rail .rm-rail__i { cursor: grab; } }
.rm-rail.is-drag { scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.rm-rail.is-drag, .rm-rail.is-drag .rm-rail__i, .rm-rail.is-drag .rm-rail__i * { cursor: grabbing; }
.rm-rail__i { flex: 0 0 clamp(300px, 31vw, 520px); scroll-snap-align: start; display: grid; gap: 6px; align-content: start; text-align: left; background: none; border: 0; padding: 0; color: #000; cursor: pointer; font: inherit; }
.rm-rail__i--v { flex-basis: clamp(200px, 17vw, 280px); }
.rm-rail__ph { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; margin-bottom: 8px; }
.rm-rail__i--v .rm-rail__ph { aspect-ratio: 9 / 16; }
.rm-rail__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.rm-rail__ph i { position: absolute; left: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .3); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rm-rail__ph i svg { width: 26px; height: 26px; margin-left: 3px; }
.rm-rail__ph em { position: absolute; right: 12px; bottom: 14px; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .6); padding: 3px 7px; }
.rm-rail__i b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.rm-rail__i > span:not(.rm-rail__ph) { font-size: 15px; font-weight: 700; color: var(--g1); line-height: 1.35; }
.rm-rail__i:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
@media (hover: hover) { .rm-rail__i:hover .rm-rail__ph img { transform: scale(1.05); } }
.rm-lb { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; padding: 70px 24px 30px; }
.rm-lb__f { position: relative; width: min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.rm-lb--v .rm-lb__f { width: min(100%, calc((100vh - 120px) * 9 / 16)); aspect-ratio: 9 / 16; }
.rm-lb__f iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rm-lb__x { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font: inherit; font-size: 18px; font-weight: 700; letter-spacing: .02em; cursor: pointer; padding: 8px 4px; }
.rm-lb__x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.rm-lb-open, html.rm-lb-open body { overflow: hidden; }
/* v25c (Ori, 9/28: "preload as soon as the page opens"): the videos that open full screen wait, loaded, in lightboxes of
   their own: unseen, small (so their openings buffer light) and behind the page until one opens; a card's short opens in
   the card's own player, lifted out of its row (src/js/player.js), its place in the row kept */
.rm-lb--hold:not(.is-open) { opacity: 0; pointer-events: none; z-index: -1; }
.rm-lb--hold:not(.is-open) .rm-lb__f { width: 480px; }
.rm-lb--hold.rm-lb--v:not(.is-open) .rm-lb__f { width: 270px; }
.rm-rail__i { position: relative; }
.rm-rail__go { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: inherit; }
.rm-rail__go:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.rm-rail__keep { display: block; aspect-ratio: 16 / 9; margin-bottom: 8px; background: #000; }
.rm-rail__i--v .rm-rail__keep { aspect-ratio: 9 / 16; }
.rm-rail__ph.lbp-lift { position: fixed; inset: 0; z-index: 200; margin: auto; aspect-ratio: auto; width: min(100vw - 48px, calc((100vh - 120px) * 16 / 9)); height: min(100vh - 120px, calc((100vw - 48px) * 9 / 16)); background: #000; box-shadow: 0 0 0 100vmax #000; cursor: default; }
.rm-rail__i--v .rm-rail__ph.lbp-lift { width: min(100vw - 48px, calc((100vh - 120px) * 9 / 16)); height: min(100vh - 120px, calc((100vw - 48px) * 16 / 9)); }
.rm-rail__ph.lbp-lift > img { object-fit: contain; transform: none !important; }
.rm-rail__ph.lbp-lift > i, .rm-rail__ph.lbp-lift > em { display: none; }
.rm-rail__ph.lbp-lift .rm-lb__x { position: fixed; z-index: 8; }
/* the on-set rows, from edge to edge (the section the studio liked best, now on every page) */
.rm-mod--bleed { max-width: none; padding-left: 0; padding-right: 0; }
.rm-mod--bleed > .rm-label, .rm-mod--bleed > .rm-lead { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--rm-m); padding-right: var(--rm-m); }
@media (max-width: 860px) {
  .rm-bleed { height: auto; aspect-ratio: 4 / 5; margin-bottom: 60px; }
  .rm-bleed__copy { bottom: 22px; }
  .rm-bleed__k { font-size: 12px; margin-bottom: 8px; }
  .rm-bleed__t { font-size: 34px; }
  .rm-bleed__s { font-size: 16px; margin-top: 10px; }
  .rm-watch { margin-bottom: 60px; }
  .rm-watch__frame { aspect-ratio: 4 / 5; max-height: none; }
  .rm-watch__play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .rm-watch__play svg { width: 40px; height: 40px; }
  .rm-watch__copy { bottom: 22px; }
  .rm-watch__k { font-size: 12px; }
  .rm-watch__t { font-size: 32px; }
  .rm-watch__s { font-size: 16px; }
  .rm-watch__frame.is-playing { aspect-ratio: 16 / 9; }
  @media (orientation: landscape) { .rm-watch__frame { aspect-ratio: 16 / 9; max-height: calc(100vh - 64px); width: min(100%, calc((100vh - 64px) * 16 / 9)); } }
  /* v23b: every trailer plays whole: its poster and its film sit whole in the 4:5 frame, over a blurred, darker copy of the poster */
  .rm-watch__frame--fit::before { content: ""; position: absolute; inset: -40px; background: var(--poster) center / cover no-repeat; filter: blur(26px) brightness(.5); }
  .rm-watch__frame--fit > img { object-fit: contain; object-position: 50% 30% !important; }
  @media (orientation: portrait) { .rm-watch__frame--fit:not(.is-playing) .rm-watch__play { top: 39%; } }   /* the centre of the 16:9 picture placed 30% down a 4:5 frame */
  .rm-rail { gap: 14px; }
  .rm-rail__i { flex-basis: 78vw; }
  .rm-rail__i--v { flex-basis: 46vw; }
  .rm-rail__i b { font-size: 17px; }
  .rm-rail__i > span:not(.rm-rail__ph) { font-size: 14px; }
}

/* v17b: title art from edge to edge (the whole card on a wash of itself), statements in type, the players' extra buttons */
.rm-bleed__media > .rm-tile__wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.rm-bleed--bare::after { display: none; }
.rm-bleed--type { height: auto; min-height: clamp(420px, 64vh, 780px); display: flex; align-items: flex-end; background: radial-gradient(110% 90% at 88% 8%, color-mix(in srgb, var(--accent, #555) 58%, transparent), transparent 62%), #0b0b0b; }
.rm-bleed--type::after { display: none; }
.rm-bleed--type .rm-bleed__copy { position: relative; left: auto; right: auto; bottom: auto; padding: clamp(70px, 9vw, 140px) var(--rm-m) clamp(44px, 5vw, 72px); max-width: 1500px; }
.rm-bleed--type .rm-bleed__t { font-size: clamp(46px, 7.6vw, 138px); max-width: 17ch; }
.rm-bleed--type .rm-bleed__k { color: var(--accent, #fff); filter: brightness(1.35); }
.rm-watch__more { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px var(--rm-m) 26px; background: #000; }
.rm-watch__btn, .rm-part__play { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 700; letter-spacing: -.01em; }
.rm-watch__btn { background: #fff; color: #000; font-size: 17px; padding: 11px 18px 11px 12px; }
.rm-watch__btn svg, .rm-part__play svg { width: 26px; height: 26px; margin-left: 2px; }
.rm-watch__btn em, .rm-part__play em { font-style: normal; font-weight: 400; opacity: .7; }
.rm-part__play { margin-top: 12px; background: #000; color: #fff; font-size: 15px; padding: 8px 14px 8px 8px; }
.rm-watch__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rm-part__play:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
@media (hover: hover) { .rm-watch__btn:hover { background: #d9d9d9; } .rm-part__play:hover { background: #333; } }
.rm-rail__lead { max-width: 1440px; margin: -6px auto 18px; padding: 0 var(--rm-m); font-size: 18px; color: var(--g1); }
@media (max-width: 860px) {
  .rm-watch--bare .rm-watch__frame { aspect-ratio: 16 / 9; }
  .rm-bleed--bare { aspect-ratio: 16 / 10; }
  .rm-bleed--type { min-height: 0; }
  .rm-bleed--type .rm-bleed__t { font-size: 40px; }
  .rm-watch__btn { font-size: 15px; }
  .rm-rail__lead { font-size: 16px; }
}
/* v17c showed the shorts' upper square (their captions sit low); v23b: they play whole, so each card is its short's own 9:16 */
.rm-rail__i--v { flex-basis: clamp(200px, 16vw, 250px); }
.rm-bleed__more { margin-top: 26px; }
@media (max-width: 860px) { .rm-rail__i--v { flex-basis: 58vw; } }
/* v17c: a band whose people span the frame keeps its whole 16:9 frame on phones (no face is cropped) */
@media (max-width: 860px) { .rm-bleed--wide { aspect-ratio: 16 / 10; } .rm-bleed--wide .rm-bleed__t { font-size: 26px; } .rm-bleed--wide .rm-bleed__s { display: none; } }

/* ---------- v19 (the 9/25 call): The Record in full, Production, Press ---------- */
/* the numbers: huge, bold, on white, a rule above each */
.rec-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--rm-g); max-width: 1440px; margin: 0 auto; padding: 10px var(--rm-m) 90px; }
.rec-nums > div { border-top: 4px solid #000; padding-top: 14px; }
.rec-nums b { display: block; font-size: clamp(64px, 7.4vw, 128px); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.rec-nums span { display: block; margin-top: 12px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--g1); }
.rec-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-nums--sm { padding: 6px 0 44px; }
.rec-nums--sm > div { border-top-width: 2px; }
.rec-nums--sm b { font-size: clamp(44px, 4.6vw, 76px); }
.rm-mod--news .rm-newslist { padding: 0; }
/* on the big screen: the venue large, its screenings beside it */
.rec-screens__list { list-style: none; margin: 0; padding: 0; }
.rec-screens__list > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px var(--rm-g); padding: 22px 0 26px; border-top: 1px solid #000; }
.rec-screens__v b { display: block; font-size: clamp(30px, 3.3vw, 54px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.rec-screens__v > span { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--g1); }
.rec-screens__v em { display: inline-block; margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0; color: #fff; background: #E5352B; padding: 4px 9px 3px; }
.rec-screens__list ul { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 12px; }
.rec-screens__list ul li { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; }
.rec-screens__list ul li a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rec-screens__list ul li i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--g1); white-space: nowrap; }
/* the awards band: the laurels, then the awards title by title */
.rec-awards__h { margin-top: 64px; }
.rec-wins { list-style: none; margin: 0; padding: 0; }
.rec-wins li { display: grid; grid-template-columns: minmax(0, 4fr) 190px minmax(0, 7fr); gap: 8px var(--rm-g); align-items: baseline; padding: 20px 0 22px; border-top: 1px solid rgba(255, 255, 255, .25); }
.rec-wins__t { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.rec-wins__n { font-size: clamp(40px, 3.8vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: .9; }
.rec-wins__n span { margin-left: 4px; font-size: 15px; letter-spacing: 0; color: var(--g3); }
.rec-wins p { font-size: 16px; line-height: 1.5; letter-spacing: 0; color: #bdbdbd; }
@media (hover: hover) { .rec-wins__t:hover { text-decoration: underline; text-underline-offset: 4px; } }
.rec-awards .marks { margin-top: 60px; }
/* nominations and finals */
.rec-noms__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rm-g); }
.rec-noms__list li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 14px 0 16px; border-top: 1px solid #000; }
.rec-noms__list li b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.rec-noms__list li > span:not(.rec-b) { grid-column: 2; font-size: 15px; font-weight: 700; color: var(--g1); }
.rec-noms__list li > span a { text-decoration: underline; text-underline-offset: 3px; }
.rec-noms__list li i { grid-column: 3; grid-row: 1; font-style: normal; font-size: 15px; font-weight: 700; color: var(--g1); }
/* a result as a tag: a win filled, a nomination or a final outlined in black, the rest in grey */
.rec-b { display: inline-block; justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; padding: 5px 8px 4px; border: 1.5px solid currentColor; color: var(--g1); white-space: nowrap; }
.rec-b[data-r="Winner"] { background: #000; border-color: #000; color: #fff; }
.rec-b[data-r="Nominee"], .rec-b[data-r="Finalist"] { color: #000; }
.rm .rec-table td.res { white-space: nowrap; }
@media (max-width: 1100px) { .rec-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } .rec-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rec-wins li { grid-template-columns: minmax(0, 1fr) auto; } .rec-wins p { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .rec-nums, .rec-nums--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 15px; padding-bottom: 60px; }
  .rec-nums b { font-size: 56px; }
  .rec-nums span { font-size: 15px; }
  .rec-nums--sm b { font-size: 40px; }
  .rec-screens__list > li { grid-template-columns: 1fr; }
  .rec-screens__list ul li { font-size: 17px; }
  .rec-wins__n { font-size: 40px; }
  .rec-noms__list { grid-template-columns: 1fr; }
  .rec-noms__list li { grid-template-columns: auto minmax(0, 1fr); }
  .rec-noms__list li b { grid-column: 1 / -1; grid-row: 2; font-size: 18px; }
  .rec-noms__list li > span:not(.rec-b) { grid-column: 1 / -1; }
  .rec-noms__list li i { grid-column: 2; grid-row: 1; justify-self: end; }
}
/* every line: on a phone each row becomes a card (the title and its result, the festival, the date and the venue) */
@media (max-width: 700px) {
  .rm .rec-table { table-layout: auto; font-size: 15px; }
  .rm .rec-table thead { display: none; }
  .rm .rec-table, .rm .rec-table tbody { display: block; }
  .rm .rec-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0 15px; border-bottom: 1px solid #ddd; }
  .rm .rec-table tr.is-out { display: none; }
  .rm .rec-table td { padding: 0; border: 0; overflow-wrap: normal; }
  .rm .rec-table td:nth-child(1) { font-size: 16px; font-weight: 700; }
  .rm .rec-table td.res { grid-column: 2; grid-row: 1; }
  .rm .rec-table td:nth-child(3) { grid-column: 1 / -1; font-size: 16px; }
  .rm .rec-table td.dt { grid-column: 1; font-size: 13px; }
  .rm .rec-table td.vn { display: block; grid-column: 1 / -1; font-size: 13px; }
  .rm .rec-table td.vn:empty { display: none; }
}
/* production: two ways in (the crew, the partners) */
.prod-cta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rm-g); }
.prod-cta__grid > div { border-top: 4px solid #000; padding-top: 18px; display: grid; align-content: start; gap: 14px; }
.prod-cta__grid h3 { font-size: clamp(34px, 3.6vw, 60px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.prod-cta__grid p { font-size: 20px; line-height: 1.45; letter-spacing: -.01em; color: #333; max-width: 42ch; }
.prod-cta__grid .rm-btn { justify-self: start; margin-top: 6px; }
@media (max-width: 860px) { .prod-cta__grid { grid-template-columns: 1fr; gap: 40px; } .prod-cta__grid p { font-size: 17px; } }
/* press: the "As seen on" marks, all grey, across the page (David's brief) */
.press-seen__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 40px; align-items: center; justify-items: center; }
.press-seen__row span { width: 100%; display: grid; place-items: center; }
.press-seen__row img { width: 100%; max-width: 170px; height: 56px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .72; }
@media (max-width: 860px) { .press-seen__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; } }

/* =====================================================================================================
   v22 (2026-09-27): every page back in the Radical layout TereZa chose, set in Schibsted Grotesk (the house face since
   v20b), with the merged pitch sections in its grammar (tools/merged.mjs) and presenter mode on every page (show.js).
   ===================================================================================================== */
body.rm { font-family: "Schibsted Grotesk", "Helvetica Neue", Switzer, Helvetica, Arial, sans-serif; }
/* a photograph placed on a desktop (--p) and on a phone (--pm), checked by tools/headcheck.mjs */
.rm .rm-cov { object-position: var(--p, 50% 50%); }
@media (max-width: 860px) { .rm .rm-cov { object-position: var(--pm, var(--p, 50% 50%)); } }

/* a statement at Radical's home H2 size, under a module's label */
.rm-say { max-width: 24ch; margin: 0 0 22px; font-size: clamp(36px, 3.9vw, 56px); font-weight: 700; letter-spacing: -.035em; line-height: 1.03; text-wrap: balance; }
.rm-mod > .rm-say + .rm-lead { margin-top: -2px; }
.rm-mod__note { margin-top: 26px; }
.rm-mod--bleed > .rm-say, .rm-mod--bleed > .rm-mod__note { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--rm-m); padding-right: var(--rm-m); }
.rm-mod--bleed > .rm-say { max-width: calc(24ch + 2 * var(--rm-m)); margin-left: max(0px, calc((100% - 1440px) / 2)); }

/* the numbers inside a module: a size a long figure ($70,000) fits at, four across */
.rec-nums--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-nums--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rm-mod > .rec-nums, .rm-band .rec-nums { max-width: none; padding: 12px 0 0; }
.rm-mod > .rec-nums b, .rm-band .rec-nums b { font-size: clamp(48px, 5vw, 84px); }
.rm-band .rec-nums > div { border-top-color: #fff; }
.rm-band .rec-nums span { color: var(--g3); }

/* cards: the picture, then the bold lines under it (the home wall's card grammar) */
.rm-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px var(--rm-g); }
.rm-cards--2 { --n: 2; } .rm-cards--3 { --n: 3; } .rm-cards--4 { --n: 4; }
.rm-cardx { margin: 0; min-width: 0; }
.rm-cardx__f { position: relative; aspect-ratio: var(--ar, 4 / 5); overflow: hidden; background: #111; }
.rm-cardx__f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-cardx figcaption { display: grid; padding-top: 12px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.07; }
.rm-cardx figcaption i { font-style: normal; font-size: 16px; letter-spacing: 0; color: var(--g1); margin-bottom: 6px; }
.rm-cardx figcaption span { margin-top: 8px; font-size: 18px; letter-spacing: -.01em; line-height: 1.35; color: var(--g1); }
.rm-cardx figcaption span + span { margin-top: 4px; font-size: 15px; color: var(--g3); }

/* a wall of tiles with the words on the picture (the Work wall's grammar) */
.rm-tiles--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rm-tiles--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rm-tile--still { margin: 0; }
.rm-tiles--w .rm-tile::after { background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 0) 72%); }
.rm-tiles--w .rm-tile__cap b { font-size: 26px; line-height: 1.05; }
.rm-tiles--w .rm-tile__cap > span { font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.rm-tiles--c4 .rm-tile__cap b { font-size: 22px; }
.rm-tiles--c4 .rm-tile__cap > span { font-size: 14px; }
/* who is pictured, in the corner of a picture */
.rm-who { position: absolute; left: 14px; top: 12px; z-index: 2; max-width: calc(100% - 28px); font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: #fff; background: rgba(0, 0, 0, .62); padding: 5px 9px 4px; }
.rm-who--r { left: auto; right: 14px; text-align: right; }

/* a pair of pictures, the words on each */
.rm-duo { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 90px; background: #000; }
.rm-duo__i { position: relative; height: clamp(560px, 100svh, 62.5vw); margin: 0; overflow: hidden; color: #fff; }
.rm-duo__i > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-duo__i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .14) 46%, rgba(0, 0, 0, 0) 64%); pointer-events: none; }
.rm-duo__c { position: absolute; left: var(--rm-m); right: var(--rm-m); bottom: 38px; z-index: 2; display: grid; justify-items: start; }
.rm-duo__t { max-width: 15ch; font-size: clamp(34px, 3.3vw, 58px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.rm-duo__s { margin-top: 12px; max-width: 36ch; font-size: 18px; font-weight: 700; line-height: 1.4; }
.rm-duo__a { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* short lines under a rule; people under a heavy rule; a numbered list; lists side by side */
.rm-points { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 var(--rm-g); }
.rm-points li { border-top: 1px solid currentColor; padding: 12px 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.rm-people { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 30px var(--rm-g); }
.rm-people--2 { --n: 2; } .rm-people--3 { --n: 3; }
.rm-people > div { display: grid; gap: 6px; align-content: start; border-top: 4px solid #000; padding-top: 14px; }
.rm-people b { font-size: clamp(26px, 2.3vw, 38px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.rm-people span { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--g1); }
.rm-offer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rm-g); }
.rm-offer li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0 22px; border-top: 1px solid #000; }
.rm-offer i { grid-row: span 2; padding-top: 6px; font-style: normal; font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--g1); }
.rm-offer b { font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.rm-offer span { font-size: 17px; line-height: 1.5; letter-spacing: 0; color: #333; }
.rm-lists { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px var(--rm-g); }
.rm-lists--2 { --n: 2; } .rm-lists--3 { --n: 3; }
.rm-lists > div { border-top: 4px solid #000; padding-top: 16px; }
.rm-lists h3 { margin-bottom: 14px; font-size: clamp(26px, 2.3vw, 38px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.rm-lists ul { list-style: none; margin: 0; padding: 0; }
.rm-lists li { padding: 10px 0 11px; border-top: 1px solid #ddd; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }

/* the questions */
.rm-faq { max-width: 1100px; }
.rm-faq details { border-top: 1px solid #000; }
.rm-faq details:last-child { border-bottom: 1px solid #000; }
.rm-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 20px; align-items: start; padding: 18px 0 20px; font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.rm-faq summary::-webkit-details-marker { display: none; }
.rm-faq summary::after { content: "+"; justify-self: end; font-size: 34px; font-weight: 400; line-height: .8; }
.rm-faq details[open] summary::after { content: "\2212"; }
.rm-faq summary:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.rm-faq p { max-width: 70ch; padding: 0 0 26px; font-size: 20px; line-height: 1.55; letter-spacing: -.01em; color: #333; }
@media (hover: hover) { .rm-faq summary:hover { color: var(--g2); } }

/* the black bands: the network (Radical's awards band), and the closing one (Radical's home closer) */
.rm-band { margin-bottom: 90px; }
.rm-band .rm-say { color: #fff; }
.rm-band .rm-lead { max-width: 900px; color: #bdbdbd; }
.rm-band__logo { display: block; width: auto; height: 44px; margin: 8px 0 30px; }
.rm-band .rm-namewall { margin-top: 38px; font-size: 24px; color: #fff; }
.rm-band .rm-namewall i { color: #555; }
.rm-band__a { margin-top: 34px; }
.rm-closer { background: #000; color: #fff; }
.rm-closer__in { max-width: 1440px; margin: 0 auto; padding: 100px var(--rm-m) 116px; }
.rm-closer__k { margin-bottom: 18px; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g3); }
.rm-closer__t { max-width: 16ch; font-size: clamp(46px, 6.4vw, 112px); font-weight: 700; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.rm-closer__s { margin-top: 26px; max-width: 46ch; font-size: 22px; font-weight: 700; line-height: 1.4; color: #bdbdbd; }
.rm-closer__a { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.rm-closer__n { margin-top: 22px; font-size: 15px; color: var(--g3); }
/* white and outlined buttons, for a black band or a picture */
.rm-btn--w { background: #fff; color: #000 !important; }
.rm-btn--o { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px #fff; }
@media (hover: hover) { .rm-btn--w:hover { background: #d9d9d9; } .rm-btn--o:hover { background: rgba(255, 255, 255, .14); } }
.rm-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.rm-bleed__more { display: flex; flex-wrap: wrap; gap: 12px; }
/* who is pictured on a band, as on a stage */
.rm-bleed__cap { position: absolute; right: var(--rm-m); top: 22px; z-index: 2; max-width: 380px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #fff; background: rgba(0, 0, 0, .62); padding: 6px 10px 5px; text-align: right; }
/* a statement in type carries a list under it */
.rm-bleed--type .rm-namewall { margin-top: 30px; max-width: 1100px; font-size: 24px; color: #fff; }
.rm-bleed--type .rm-namewall i { color: rgba(255, 255, 255, .4); }
.rm-bleed--type .rm-points { margin-top: 30px; color: #fff; }
.rm-bleed--type .rm-points li { border-top-color: rgba(255, 255, 255, .55); font-size: 20px; }
/* the attached practitioner beside the names */
.rm-feature--att { align-items: start; }
.rm-feature--att .rm-feature__ph { margin: 0; }
.rm-feature--att h3 { max-width: 18ch; margin-bottom: 30px; font-size: clamp(36px, 3.9vw, 56px); letter-spacing: -.035em; line-height: 1.03; }
.rm-feature--att .rm-people { --n: 1; gap: 22px; max-width: 720px; }
.rm-feature--att .rm-also { margin-top: 28px; }
/* the small print */
.rm-mod--legal { padding-bottom: 60px; }
.rm-legal { max-width: 110ch; font-size: 13px; line-height: 1.6; letter-spacing: 0; color: var(--g1); }

/* HNN Originals: the ident is light, so the page title sits on it in the network's ink, and the slate is project rows in two
   unequal columns that swap sides as they go down the page (the lopsided rhythm of Radical's home) */
.rm-stage--light { background: #b7e3d2; }
.rm-stage--light::after { display: none; }
.rm-stage--light .rm-stage__t, .rm-stage--light .rm-caret { color: #0D2A18; }
.rm-slate > .rm-label { margin-bottom: 8px; }
.rm-show { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--rm-g); align-items: start; padding: 26px 0 64px; border-top: 1px solid #000; }
.rm-show:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rm-show:nth-of-type(even) .rm-show__f { order: 2; }
.rm-show__f { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; color: #fff; }
.rm-show__f > img, .rm-show__f > .rm-tile__wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-show__type { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 8%; text-align: center; background: radial-gradient(120% 90% at 50% 30%, #2d2c2a, #000); }
.rm-show__type b { font-size: clamp(40px, 5vw, 80px); font-weight: 700; letter-spacing: -.04em; line-height: .95; }
.rm-show__type span { font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--g3); }
.rm-show__n { font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--g1); }
.rm-show h3 { margin-top: 8px; font-size: clamp(40px, 4.4vw, 72px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rm-show__l { margin-top: 16px; max-width: 34ch; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.rm-show__t { margin-top: 14px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--g1); }
.rm-show__ways { margin: 22px 0 0; display: grid; gap: 0; }
.rm-show__ways > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0 11px; border-top: 1px solid #ddd; }
.rm-show__ways dt { font-size: 16px; font-weight: 700; }
.rm-show__ways dd { font-size: 16px; color: #333; letter-spacing: -.005em; }
.rm-show__a { margin-top: 24px; }
@media (hover: hover) { a.rm-show__f:hover > img, a.rm-show__f:hover .rm-tile__fit { opacity: .86; } }

/* ---------- v26b (Ori, 2026-09-29: "Take off the option to present."): presenter mode is gone. An in-page link lands its
   section under the sticky header (the presenter marks carried that margin until now) ---------- */
.rm main [id] { scroll-margin-top: 92px; }
@media (max-width: 860px) { .rm main [id] { scroll-margin-top: 64px; } }

/* ---------- v22 on tablets and phones: every section restaged, nothing hidden ---------- */
@media (max-width: 1100px) {
  .rm-cards--4, .rm-tiles--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-lists--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-show, .rm-show:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sp-a { scroll-margin-top: 64px; }
  .rm .sp-present-btn { display: none; }
  .rm-say { font-size: 30px; margin-bottom: 16px; }
  .rm-mod > .rec-nums b, .rm-band .rec-nums b { font-size: 40px; }
  .rm-cards, .rm-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 15px; }
  .rm-cardx__f { aspect-ratio: var(--arm, var(--ar, 4 / 5)); }
  .rm-cardx figcaption { font-size: 20px; }
  .rm-cardx figcaption i { font-size: 13px; }
  .rm-cardx figcaption span { font-size: 15px; }
  .rm-cardx figcaption span + span { font-size: 13px; }
  .rm-tiles--c2, .rm-tiles--c3, .rm-tiles--c4 { grid-template-columns: 1fr; }
  .rm-tiles--w .rm-tile__cap b, .rm-tiles--c4 .rm-tile__cap b { font-size: 22px; }
  .rm-tiles--w .rm-tile__cap > span, .rm-tiles--c4 .rm-tile__cap > span { font-size: 14px; }
  .rm-who { left: 10px; top: 10px; font-size: 12px; }
  .rm-who--r { left: auto; right: 10px; }
  .rm-duo { grid-template-columns: 1fr; margin-bottom: 60px; }
  .rm-duo__i { height: auto; aspect-ratio: 4 / 5; }
  .rm-duo__c { bottom: 22px; }
  .rm-duo__t { font-size: 30px; }
  .rm-duo__s { font-size: 15px; }
  .rm-points { grid-template-columns: 1fr 1fr; }
  .rm-points li { font-size: 17px; }
  .rm-people, .rm-people--2, .rm-people--3 { grid-template-columns: 1fr; gap: 22px; }
  .rm-people b { font-size: 26px; }
  .rm-people span { font-size: 15px; }
  .rm-offer { grid-template-columns: 1fr; }
  .rm-offer li { grid-template-columns: 40px minmax(0, 1fr); }
  .rm-offer b { font-size: 20px; }
  .rm-offer span { font-size: 15px; }
  .rm-lists, .rm-lists--2, .rm-lists--3 { grid-template-columns: 1fr; }
  .rm-lists h3 { font-size: 26px; }
  .rm-lists li { font-size: 16px; }
  .rm-faq summary { font-size: 19px; gap: 14px; }
  .rm-faq p { font-size: 16px; }
  .rm-band { margin-bottom: 60px; }
  .rm-band__logo { height: 32px; margin-bottom: 22px; }
  .rm-band .rm-namewall, .rm-bleed--type .rm-namewall { font-size: 18px; }
  .rm-bleed--type .rm-points li { font-size: 16px; }
  .rm-closer__in { padding: 60px var(--rm-m) 72px; }
  .rm-closer__t { font-size: 40px; }
  .rm-closer__s { font-size: 17px; }
  .rm-bleed__cap { top: 12px; right: 12px; max-width: 70%; font-size: 12px; padding: 4px 7px 3px; }
  .rm-bleed__more { margin-top: 18px; }
  .rm-bleed--cta { aspect-ratio: auto; height: auto; min-height: 125vw; display: flex; align-items: flex-end; }
  .rm-bleed--cta .rm-bleed__copy { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--rm-m) 26px; }
  .rm-feature--att h3 { font-size: 30px; margin-bottom: 20px; }
  .rm-show, .rm-show:nth-of-type(even) { grid-template-columns: 1fr; row-gap: 18px; padding-bottom: 44px; }
  .rm-show:nth-of-type(even) .rm-show__f { order: 0; }
  .rm-show h3 { font-size: 40px; }
  .rm-show__l { font-size: 18px; }
  .rm-show__ways > div { grid-template-columns: 96px minmax(0, 1fr); }
  .rm-show__ways dt, .rm-show__ways dd { font-size: 15px; }
}
/* v22: a closing band with a portrait beside the words (World's Top Dentist: the dentist stands centre frame, so no line may
   sit on the picture); a band that carries the way in keeps its line smaller and its shade deeper */
.rm-closer--pic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rm-closer__f { position: relative; min-height: clamp(560px, 86vh, 900px); margin: 0; overflow: hidden; }
.rm-closer__f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-closer--pic .rm-closer__in { align-self: end; max-width: 980px; margin: 0; padding: 80px var(--rm-m) 96px clamp(30px, 4vw, 64px); }
.rm-closer--pic .rm-closer__t { font-size: clamp(44px, 5.4vw, 92px); }
.rm-bleed--cta::after { background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .34) 48%, rgba(0, 0, 0, 0) 72%); }
.rm-bleed--cta .rm-bleed__t { max-width: 20ch; font-size: clamp(40px, 5vw, 80px); }
@media (max-width: 860px) {
  .rm-closer--pic { grid-template-columns: 1fr; }
  .rm-closer__f { min-height: 0; aspect-ratio: 4 / 5; }
  .rm-closer--pic .rm-closer__in { padding: 36px var(--rm-m) 60px; }
  .rm-closer--pic .rm-closer__t { font-size: 38px; }
  .rm-bleed--cta .rm-bleed__t { font-size: 32px; }
}
/* v22 phone QA: four numbers go two by two (a label or $70,000 ran into its neighbour); an odd last card or one-sheet in a
   two-column row stands centred instead of alone on the left */
@media (max-width: 860px) {
  .rec-nums--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .rm-cards--3 > :last-child, .rm-parts > .rm-part:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7.5px); }
}
/* v22 QA: on a phone or a portrait tablet a band's drift made its picture box 14 % taller than the band, so a 1600 px
   photograph (the largest file of the pitch sets) was drawn 3 % past its own pixels; the drift is halved there */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    .rm-bleed__media { inset: -4% 0; animation-name: rm-drift-s; }
    @keyframes rm-drift-s { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
  }
}
/* v22 head check: World's Top Dentist's stage reel is framed tight (a face fills the height), so on a desktop its stage is
   never wider than 2:1 (the Radical stage reaches about 2.2:1 on a laptop and trimmed a chin) */
@media (min-width: 861px) { .rm-stage--tight { min-height: max(460px, 50vw); } }
/* v22: a band whose people span the frame (rm-bleed--wide) is restaged on phones: the whole picture, then its words under it
   on black (v17c hid the line under the title there; phones get everything) */
@media (max-width: 860px) {
  .rm-bleed--wide { height: auto; aspect-ratio: auto; display: block; }
  .rm-bleed--wide .rm-bleed__media { position: relative; inset: auto; aspect-ratio: 16 / 10; animation: none; }
  .rm-bleed--wide::after { display: none; }
  .rm-bleed--wide .rm-bleed__copy { position: relative; left: auto; right: auto; bottom: auto; padding: 16px var(--rm-m) 24px; }
  .rm-bleed--wide .rm-bleed__t { font-size: 28px; }
  .rm-bleed--wide .rm-bleed__s { display: block; font-size: 15px; }
}

/* =====================================================================================================
   v22b (Ori, 2026-09-27: every page with the high-end look of the pitch pages): the awards band with its headline, tiles
   at their pictures' own shape and as links, the panorama band, the logo on a closing band, Radical's home closer
   ===================================================================================================== */
.rm-awards .rm-say { color: #fff; }
.rm-awards .rm-lead { max-width: 900px; color: #bdbdbd; }
.rm-awards__next { margin-top: 30px; max-width: 900px; font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; color: #fff; }
/* tiles: their own shape when given one, the source line above the title, and as links the Work wall's hover */
.rm-tiles--w .rm-tile { aspect-ratio: var(--tar, 16 / 10); }
.rm-tiles--w .rm-tile__cap em { display: block; margin-bottom: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.rm-tile--a { color: #fff; }
.rm-tile--a > img, .rm-tile--a .rm-tile__fit { transition: opacity .25s; }
@media (hover: hover) { .rm-tile--a:hover > img, .rm-tile--a:hover .rm-tile__fit { opacity: .8; } .rm-tile--a:hover .rm-tile__cap b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }
.rm-tile--a:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.rm-newslist--marks { padding-top: 30px; }
/* a panorama at its own shape, the words on it; a phone puts them under it */
.rm-pano { position: relative; margin: 0 0 90px; background: #000; color: #fff; }
.rm-pano__f { position: relative; aspect-ratio: var(--ar); overflow: hidden; }
.rm-pano__f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-pano::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0)); pointer-events: none; }
.rm-pano__c { position: absolute; left: var(--rm-m); right: var(--rm-m); bottom: 30px; z-index: 2; }
.rm-pano__t { font-size: clamp(40px, 5vw, 88px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rm-pano__s { margin-top: 10px; max-width: 46ch; font-size: 18px; font-weight: 700; line-height: 1.4; }
/* a closing band can carry a logo above its words */
.rm-closer__logo { display: block; width: auto; height: 46px; margin-bottom: 30px; }
/* Radical's home closer: the statement, the ways in under heavy white rules, the wordmark bleeding off the bottom */
.rm-hclose { position: relative; overflow: hidden; background: #000; color: #fff; }
.rm-hclose__in { max-width: 1440px; margin: 0 auto; padding: 110px var(--rm-m) 30px; }
.rm-hclose__ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px var(--rm-g); margin-top: 72px; }
.rm-hclose__ways > div { display: grid; gap: 8px; align-content: start; border-top: 4px solid #fff; padding-top: 14px; }
.rm-hclose__ways b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.rm-hclose__ways span { font-size: 16px; line-height: 1.45; color: #bdbdbd; }
.rm-hclose__ways a { justify-self: start; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rm-hclose__ways a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rm-hclose__mark { max-width: 1440px; height: clamp(110px, 21vw, 330px); margin: 40px auto 0; padding: 0 var(--rm-m); overflow: hidden; }
.rm-hclose__mark img { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) { .rm-hclose__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .rm-awards__next { font-size: 15px; }
  .rm-tiles--w .rm-tile__cap em { font-size: 12px; }
  .rm-newslist--marks { padding-top: 20px; }
  .rm-pano { margin-bottom: 60px; }
  .rm-pano::after { display: none; }
  .rm-pano__c { position: relative; left: auto; right: auto; bottom: auto; padding: 16px var(--rm-m) 22px; }
  .rm-pano__t { font-size: 28px; }
  .rm-pano__s { font-size: 15px; }
  .rm-closer__logo { height: 34px; margin-bottom: 22px; }
  .rm-hclose__in { padding: 64px var(--rm-m) 24px; }
  .rm-hclose__ways { gap: 24px 15px; margin-top: 44px; }
  .rm-hclose__ways b { font-size: 18px; }
  .rm-hclose__ways span, .rm-hclose__ways a { font-size: 14px; }
  .rm-hclose__mark { margin-top: 26px; }
}

/* v22b: a long wall of portraits opens on three rows (four on a phone), Show all opens the rest in place (src/js/rm.js) */
html.js .rm-cast--clip > figure:nth-child(n+25) { display: none; }
.rm-cast__more { margin-top: 30px; }
html:not(.js) .rm-cast__more { display: none; }
@media (max-width: 860px) { html.js .rm-cast--clip > figure:nth-child(n+13) { display: none; } .rm-cast__more { margin-top: 22px; } }

/* =====================================================================================================
   v23 (Ori, 2026-09-27: "I don't want it to look like it's a YouTube video", previews that play by themselves, and only
   play, pause, back, forward, mute, volume and quality): the site's own player (src/js/player.js). The upload sits under
   our poster and takes no clicks; our layer and our bar sit over it.
   ===================================================================================================== */
.lbp-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; }
.lbp-stage iframe, .rm-lb__f .lbp-stage iframe, .rm-watch__frame .lbp-stage iframe { position: absolute; left: 0; top: 0; right: auto; bottom: auto; border: 0; background: #000; transform-origin: 0 0; pointer-events: none; z-index: 0; }
.lbp > img { transition: opacity .6s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.lbp-moving > img { opacity: 0; pointer-events: none; }
/* nothing of the player shows until its picture moves (YouTube's own load screen stays behind our poster or black) */
.lbp:not(.lbp-moving) > .lbp-stage { opacity: 0; }
/* a preview that stops (off screen, over the limit of moving cards, or held still) shows its poster again */
.lbp-moving.lbp-paused:not(.lbp-full) > img { opacity: 1; }
/* v26: and a preview that stalls, after a quarter second (src/js/player.js lbp-wait): its still, not YouTube's spinner */
.lbp-moving.lbp-wait:not(.lbp-full) > img { opacity: 1; }
/* paused while watching: our own play button over the middle of the picture */
.lbp-mid { position: absolute; left: 50%; top: 50%; z-index: 6; width: 96px; height: 96px; margin: -48px 0 0 -48px; display: none; place-items: center; padding: 0; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; }
.lbp-mid svg { width: 44px; height: 44px; margin-left: 5px; }
.lbp-full.lbp-paused.lbp-moving .lbp-mid { display: grid; }
.lbp-mid:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.lbp-full.lbp-bezel .lbp-mid { display: grid; pointer-events: none; animation: lbp-bezel .85s ease-out forwards; }
.lbp-full.lbp-intro.lbp-moving .lbp-mid { display: grid; animation: lbp-intro 4.8s ease-out forwards; }
@keyframes lbp-intro { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lbp-bezel { 0%, 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.rm-watch__frame.is-playing .rm-watch__play { display: none; }
.rm-watch__frame.is-playing { cursor: default; }
/* the preview can be held still where it plays (WCAG 2.2.2) */
.lbp-still { position: absolute; right: 24px; bottom: 24px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; cursor: pointer; opacity: .85; transition: opacity .2s; }
.lbp-still svg { width: 18px; height: 18px; }
.lbp-still:hover { opacity: 1; }
.lbp-still:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rm-watch__frame.is-playing .lbp-still { display: none; }
/* while watching: a layer that takes the clicks, and the bar */
.lbp-hit { position: absolute; inset: 0; z-index: 5; cursor: pointer; display: none; }
.lbp-full .lbp-hit { display: block; }
.lbp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 46px 18px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, 0)); color: #fff; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.lbp-full .lbp-bar { opacity: 1; visibility: visible; }
.lbp-full.lbp-idle .lbp-bar { opacity: 0; visibility: visible; pointer-events: none; }   /* faded, never hidden: keyboard focus stays in the player */
.lbp-full.lbp-idle, .lbp-full.lbp-idle .lbp-hit { cursor: none; }
.lbp-b { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.lbp-b svg { width: 27px; height: 27px; }
.lbp-b svg text { font-family: inherit; }
@media (hover: hover) { .lbp-b:hover, .lbp-qb:hover { opacity: .75; } }
.lbp-b:focus-visible, .lbp-qb:focus-visible, .lbp-qm button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbp-seek { flex: 1 1 auto; min-width: 80px; margin: 0 12px; }
.lbp-time { flex: none; margin-right: 8px; font-size: 14px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lbp-vol { flex: none; width: 92px; margin-right: 6px; }
.lbp-q { position: relative; flex: none; }
.lbp-qb { height: 44px; padding: 0 8px; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
.lbp-qm { position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; min-width: 132px; padding: 6px 0; background: rgba(10, 10, 10, .95); display: grid; }
.lbp-qm[hidden] { display: none; }
.lbp-qm button { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.lbp-qm button[aria-checked="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
@media (hover: hover) { .lbp-qm button:hover { background: rgba(255, 255, 255, .12); } }
/* the two sliders: a thin white line, filled to where you are */
.lbp-bar input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; margin-top: 0; margin-bottom: 0; background: transparent; cursor: pointer; }
.lbp-bar input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--p, 0%), rgba(255, 255, 255, .32) var(--p, 0%)); }
.lbp-bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; }
.lbp-bar input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .32); }
.lbp-bar input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.lbp-bar input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.lbp-bar input[type=range]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* a phone that refused sound: the next tap goes to the player itself */
.lbp-taphint { display: none; position: absolute; left: 50%; top: 50%; z-index: 7; margin: 0; padding: 12px 18px; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .72); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.lbp-tap .lbp-taphint { display: block; }
.lbp-tap .lbp-stage, .lbp-tap .lbp-stage iframe { z-index: 6; pointer-events: auto; }
.lbp-tap .lbp-hit { display: none; }
/* the lightbox waits on its own quiet spinner, never YouTube's */
.lbp-spin { position: absolute; left: 50%; top: 50%; z-index: 1; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: lbp-spin .9s linear infinite; }
.lbp-moving .lbp-spin { display: none; }
@keyframes lbp-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  /* two rows on a phone: the timeline and the time, then the buttons, the volume and the quality */
  .lbp-bar { display: grid; grid-template-columns: 40px 40px 40px minmax(0, 1fr) 40px auto auto; align-items: center; gap: 0; padding: 34px 8px 4px; }
  .lbp-seek { grid-column: 1 / 7; grid-row: 1; min-width: 0; margin: 0 10px 0 6px; }
  .lbp-time { grid-column: 7; grid-row: 1; margin: 0 4px 0 0; font-size: 12px; text-align: right; }
  .lbp-pp { grid-column: 1; grid-row: 2; }
  .lbp-bar [data-skip="-10"] { grid-column: 2; grid-row: 2; }
  .lbp-bar [data-skip="10"] { grid-column: 3; grid-row: 2; }
  .lbp-mu { grid-column: 5; grid-row: 2; }
  .lbp-vol { grid-column: 6; grid-row: 2; width: 64px; margin: 0 4px 0 0; }
  .lbp-q { grid-column: 7; grid-row: 2; justify-self: end; }
  .lbp-b { width: 40px; height: 40px; }
  .lbp-b svg { width: 24px; height: 24px; }
  .lbp-qb { height: 40px; font-size: 13px; padding: 0 4px; }
  /* the quality choices in one row above the bar: a phone's 16:9 frame is too short for a list */
  .lbp-qm { display: flex; right: -4px; bottom: 100%; margin-bottom: 4px; min-width: 0; padding: 0; }
  .lbp-qm button { padding: 9px 11px; font-size: 13px; gap: 6px; }
  .lbp-still { right: 14px; bottom: 16px; width: 36px; height: 36px; }
  .lbp-mid { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .lbp-mid svg { width: 34px; height: 34px; margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .lbp-spin { animation-duration: 2.4s; } }
/* an interview plays in the site's own player: the row stays a link row in looks */
.rm-links__a { display: grid; justify-items: start; gap: 8px; width: 100%; padding: 14px 0 28px; border: 0; background: none; color: #000; font: inherit; text-align: left; cursor: pointer; }
.rm-links__a .rm-links__go svg { width: 16px; height: 16px; margin-left: -2px; }
@media (hover: hover) { .rm-links__a:hover b { text-decoration: underline; text-underline-offset: 4px; } .rm-links__a:hover .rm-links__go { color: #000; } }
.rm-links__a:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
/* v23: under a title's stage, where its arrow lands now that the synopsis sits lower (the sticky header clear) */
.rm-anchor { display: block; height: 0; scroll-margin-top: 92px; }
@media (max-width: 860px) { .rm-anchor { scroll-margin-top: 64px; } }

/* =====================================================================================================
   v23 QA (Ori, 2026-09-27: "make sure that all the spelling is visible"): every line of type readable. Measured on every
   page at 1440 and 393 px (the text against what it actually sits on): grey on white now clears 4.5:1, and white type
   on a picture is carried by a deeper shade where the words sit and a soft shadow under the letters.
   ===================================================================================================== */
.rm-credits dd, .rm-credits dd a, .rm-cardx figcaption span + span { color: #6e6e6e; }
.rm-ftr__legal { color: rgba(255, 255, 255, .52); }
.rec-screens__v em { background: #C8281F; }
.rm-bleed::after { background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .42) 36%, rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, 0) 80%); }
.rm-bleed--cta::after { background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .46) 44%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, 0) 82%); }
.rm-duo__i::after { background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .1) 66%, rgba(0, 0, 0, 0) 80%); }
.rm-tile::after { background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .26) 44%, rgba(0, 0, 0, 0) 68%); }
.rm-tiles--w .rm-tile::after { background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .32) 48%, rgba(0, 0, 0, 0) 74%); }
.rm-bleed__copy, .rm-duo__c, .rm-tile__cap, .rm-watch__copy, .rm-pano__c, .rm-stage__t, .rm-stage__cap { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 22px rgba(0, 0, 0, .5); }
.rm-stage--light .rm-stage__t, .rm-bleed--type .rm-bleed__copy { text-shadow: none; }
@media (max-width: 860px) { .rm-bleed--wide .rm-bleed__copy { text-shadow: none; } }

/* ================= v25 (Ori, 2026-09-28: "more like a million dollar site ... the homepage ... just kind of flat") and v26
   (9/29: "I want the layout to be like the site she likes but with the videos"). Of v25 these stay: the header's way in,
   pages that dissolve into each other, the reel with the name across it (v25b) and every video loaded as the page opens
   (src/js/player.js, v25c). The home page is radicalmedia.com's wall again (tools/build.mjs home()), and its film cards play
   their trailers ===== */
/* site-wide: the way in to a project from every page, and pages that dissolve into each other instead of flashing white */
.rm-cta { margin: 0 12px 0 auto; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; background: #000; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background .25s; }
@media (hover: hover) { .rm-cta:hover { background: #333; } }
.rm-cta:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
@media (max-width: 860px) { .rm-cta { height: 36px; padding: 0 13px; font-size: 13px; margin-right: 10px; } }
@media (max-width: 359px) { .rm-cta { display: none; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* the reel (v25b, Ori 9/28: "I'd like the home page to say Lolli Brands Entertainment across the screen ... like the
   reference site that she wanted"; v26b, 9/29: "make the Lolli brands Entertainment look better to be more like WOW"). The
   name opens as the picture itself: on the white page, two lines in the heaviest cut of the house face with the reel playing
   inside the letters (.hm-knock: a white layer with the words knocked out of it, blended by screen: white stays white, the
   black letters show what is under them). A second in, the white dissolves and the film fills the frame, while the name
   stays where it is, in the middle, turning white (the h1 fades in over its knocked-out twin). v26c (Ori 9/29: "I want it
   to go from opposite to full, but instead of it being at the bottom, I want it to stay centered"): no glide to the foot any
   more, and the shade is v25b's again, round the middle. Each line fits 88% of the frame's width (cqw) from its measured
   width at 1 px in Schibsted Grotesk 900 at -0.035em (5.636 and 6.938; the spacing is set on each line, so the heading and
   its knocked-out twin match).
   v26c (Ori 9/29: "on the home page at the top I want the video to be from edge to edge and same with the mobile version"):
   the frame runs the full width, straight under the header, and fills the first screen, never taller than 16:9 nor wider
   than 2.1:1 (47.62vw; at 2.17:1, a title page stage's limit, the bottom edge took the chin of a seated guest in the
   Cineum theatre shot). A wider screen crops the reel off the bottom only (object-position 50% 0%: the heads at the top
   stay whole; tools/cropcheck.py checks the 2.1:1 crop, "stage": 2.1 in the plan), and on a window too short even for
   that the title is centred in the part of the frame on the first screen (--ov: what runs past it). On a frame
   wider than 16:9 the title is 27.6% of the height on the first screen (the share it has at 16:9), so it covers no more of the
   picture.
   No script: CSS animations, run once; reduced motion and the accessibility menu's Pause motion show the title card. */
.hm-hero { --hm-hdr: 92px; background: #fff; color: #000; }
.hm-hero__media { position: relative; isolation: isolate; container-type: size; width: 100%; height: 56.25vw; height: clamp(47.62vw, calc(100svh - var(--hm-hdr)), 56.25vw); overflow: hidden; background: #000; }
.hm-hero__reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* the title's ground: a soft shade round the middle of the frame, behind the name */
.hm-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 72% 58% at 50% 50%, rgba(0, 0, 0, .36), rgba(0, 0, 0, .1) 72%), rgba(0, 0, 0, .08); }
.hm-wm, .hm-knock { --ov: max(0px, 100cqh - (100svh - var(--hm-hdr))); --fs1: min(calc(88cqw / 5.636), calc((100cqh - var(--ov)) * .276)); --fs2: calc(var(--fs1) * 5.636 / 6.938);
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 0 0 var(--ov); font-weight: 900; line-height: .84; white-space: nowrap; pointer-events: none; }
.hm-wm { color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); animation: hm-show .8s cubic-bezier(.4, 0, .2, 1) 1.55s both; }
.hm-knock { z-index: 3; background: #fff; color: #000; mix-blend-mode: screen; animation: hm-open 1s cubic-bezier(.4, 0, .2, 1) 1.2s forwards; }
.hm-wm__l { display: block; font-size: 15vw; font-size: var(--fs1); letter-spacing: -.035em; }   /* the vw sizes: a browser without container units */
.hm-wm__l + .hm-wm__l { font-size: 12.2vw; font-size: var(--fs2); }
/* the line and the arrow sit centred under the reel, as the reference's arrow does, clear of the accessibility button */
.hm-hero__foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px var(--rm-m) 30px; text-align: center; }
.hm-hero__s { margin: 0; font-size: 17px; line-height: 1.4; color: #3a3a3a; animation: hm-fade .9s cubic-bezier(.2, .7, .2, 1) 2.1s both; }
.hm-hero__down { display: grid; place-items: center; width: 76px; height: 76px; color: #000; }
.hm-hero__down svg { width: 62px; height: 62px; animation: hm-nudge 2.8s ease-in-out 2.8s infinite; }   /* v26: as heavy as the reference's arrow */
.hm-hero__down:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
@keyframes hm-open { to { opacity: 0; visibility: hidden; } }
@keyframes hm-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hm-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(7px); } }
.shot .hm-knock, .lbe-ax-still .hm-knock { display: none; }
.shot .hm-wm, .shot .hm-hero__s, .shot .hm-hero__down svg, .lbe-ax-still .hm-wm { animation: none; }

/* v26: the wall's film cards. A card's picture is its trailer: the still first (the frame the trailer fades in on), then the
   film, muted and whole, from its own point; a press opens it full screen with sound in the card's own player, lifted out of
   the wall as a short's card is (src/js/player.js), and its three lines go to the film. Its mark and a play mark sit on
   it, as the network's mark sits on radicalmedia.com's pictures */
.rm-home .rm-wall { scroll-margin-top: 104px; }
.rm-card--yt { transition: background .12s, box-shadow .12s; }
.rm-card__ph { position: absolute; inset: 0; display: block; overflow: hidden; background: #000; }
.rm-card__ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-card--yt .rm-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 36%); pointer-events: none; }
.rm-card--yt .rm-mark { z-index: 2; }
.rm-card__play { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s; }
.rm-card__play svg { width: 26px; height: 26px; margin-left: 3px; }
.rm-card__go { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.rm-card__go:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.rm-card__cap { display: block; color: #000; }
/* Radical's hover, as on every card: a black block and white lines. It is drawn with a shadow, never a layer of its own:
   a layer around the player would hold it under the sticky header when it opens full screen */
@media (hover: hover) {
  .rm-card--yt:hover { background: #000; box-shadow: 0 0 0 12px #000; }
  .rm-card--yt:hover .rm-card__copy { color: #fff; }
  .rm-card--yt:hover .rm-card__copy > span { color: var(--g3); }
  .rm-card--yt:hover .rm-card__play { transform: scale(1.08); background: rgba(0, 0, 0, .45); }
}
.rm-card--yt:has(.rm-card__cap:focus-visible) { background: #000; box-shadow: 0 0 0 12px #000; }
.rm-card--yt:has(.rm-card__cap:focus-visible) .rm-card__copy { color: #fff; }
.rm-card--yt:has(.rm-card__cap:focus-visible) .rm-card__copy > span { color: var(--g3); }
/* full screen: the card's own player over a black screen; the card keeps its box in the wall */
.rm-card__ph.lbp-lift { position: fixed; inset: 0; z-index: 200; margin: auto; width: min(100vw - 48px, calc((100vh - 120px) * 16 / 9)); height: min(100vh - 120px, calc((100vw - 48px) * 9 / 16)); background: #000; box-shadow: 0 0 0 100vmax #000; cursor: default; }
.rm-card__ph.lbp-lift > img { object-fit: contain; }
.rm-card__ph.lbp-lift .rm-lb__x { position: fixed; z-index: 8; }

/* phones and small tablets: the same reel and the same wall, in one column */
@media (max-width: 860px) {
  .hm-hero { --hm-hdr: 64px; }
  .hm-hero__foot { flex-direction: row; justify-content: space-between; gap: 16px; padding: 18px var(--rm-m) 30px; text-align: left; }
  .hm-hero__s { font-size: 16px; }
  .hm-hero__down { flex: none; width: 52px; height: 52px; }
  .hm-hero__down svg { width: 40px; height: 40px; }
  .rm-home .rm-wall { scroll-margin-top: 72px; }
  .rm-card__play { left: 10px; bottom: 10px; width: 44px; height: 44px; }
  .rm-card__play svg { width: 21px; height: 21px; }
}
@media (max-width: 600px) and (orientation: portrait) { .hm-hero__media { height: 125vw; } }   /* the phone cut, 4:5, edge to edge */
@media (prefers-reduced-motion: reduce) {
  .hm-knock { display: none; }
  .hm-wm, .hm-hero__s, .hm-hero__down svg { animation: none; }
  .rm-card--yt, .rm-card__play { transition: none; }
}

/* ---------- v26b QA (Ori, 2026-09-29: "do a spacing check"): one rhythm between sections, measured on every page at four
   sizes by tools/spacing.mjs: 90 px between modules on a computer, 60 px on a phone ---------- */
/* a module on the white ground already ends in its own space: the film's details, the studio's own words and On camera add
   none on top of it (they read 170, 150 and 150 px apart, 134 and 100 on a phone) */
.rm-mod + .rm-details { padding-top: 0; }
.rm-band + .rm-oncam, .rm-band + .rm-about { padding-top: 0; }
/* two dark sections in a row meet: the strip of white between them read as a mistake (Production, The New Woo) */
.rm-bleed--type:has(+ .rm-bleed--type), .rm-bleed--type:has(+ .rm-closer), .rm-bleed--type:has(+ .rm-hclose) { margin-bottom: 0; }
/* the Record's headlines keep the page's margins inside a module that runs edge to edge (their words ran to 6 px of it) */
.rm-mod--bleed > .rm-newslist { padding-left: var(--rm-m); padding-right: var(--rm-m); }
@media (max-width: 860px) {
  /* 60 px between modules, as between every other section on a phone (the modules kept the computer's 90) */
  .rm-mod { padding-bottom: 60px; }
  /* a long title in the breadcrumb takes a second line instead of an ellipsis ("From Fat Lolli to 6 Pa...") */
  .rm-crumb { height: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
  .rm-crumb__t { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
}
/* the words of a band whose people stand left of the middle go on the right on a computer (About's family: the heading had
   run across Legend's face); phones set them under the picture as before (rm-bleed--wide) */
@media (min-width: 861px) {
  .rm-bleed--right .rm-bleed__copy { left: auto; right: var(--rm-m); max-width: min(38%, 560px); text-align: right; }
  .rm-bleed--right .rm-bleed__t { font-size: clamp(40px, 5vw, 84px); }   /* four lines in the column over the doors, clear of the family */
  .rm-bleed--right .rm-bleed__more { justify-content: flex-end; }
}
/* v26b QA: on a phone the words of a photo band reach further up the picture, so its shade does too, and the kicker is
   13 px (the small kickers over photographs measured 3.2 to 4.4 : 1 against the real pixels behind them) */
@media (max-width: 860px) {
  .rm-bleed:not(.rm-bleed--type):not(.rm-bleed--bare)::after { background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .56) 40%, rgba(0, 0, 0, .2) 66%, rgba(0, 0, 0, 0) 82%); }
  .rm-bleed__k { font-size: 13px; }
  .rm-bleed:not(.rm-bleed--type) .rm-bleed__k, .rm-duo .rm-bleed__k { text-shadow: 0 0 10px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .55); }
  .rm-duo__i::after { background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .56) 42%, rgba(0, 0, 0, .2) 68%, rgba(0, 0, 0, 0) 84%); }
}
/* v26b QA: a title tile whose picture is shown whole (a poster, or a portrait) sets it on the right, and its title and credits
   sit beside it on the blurred ground: at the bottom left they ran over the poster's own lettering (World's Top Dentist's
   billing block, WYNX's title), worst on a phone. The picture's own focal point (an inline style) is for cropping, not here */
a.rm-tile:has(.rm-tile__fit) .rm-tile__wash > .rm-tile__fit { left: auto; right: 5%; width: 40%; object-position: 100% 50% !important; }
a.rm-tile:has(.rm-tile__fit) .rm-tile__cap { right: 46%; }

/* ---------- v27 QA (the screen review, 9/29: three reviewers over every screen, each finding measured on the live build) ---------- */
/* the span that keeps sHEALed's own capitals (keepCase, tools/lib.mjs) takes its look from the words around it, never from a
   rule meant for them: ".rm-tile__type span" set it 14 px and grey inside a tile's title, ".rm-time span" broke About's 2026
   line after it */
span.keepcase.keepcase.keepcase { display: inline; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
/* two dark sections in a row meet: the white strip between two pictures (60 px on a phone, 90 on a computer) read as a
   mistake on ten pages */
:is(.rm-bleed, .rm-watch, .rm-duo, .rm-pano):has(+ :is(.rm-bleed, .rm-watch, .rm-duo, .rm-pano, .rm-awards, .rm-closer, .rm-hclose)) { margin-bottom: 0; }
/* what follows a black band that has no margin of its own gets its space back ("Stars and cast" sat 0 px under the awards
   band, the legal lines 2 px under a closer, the first line of The Record, Work and Press 0 to 11 px under the page's stage) */
:is(.rm-awards, .rm-closer) + :is(.rm-mod, .rm-mod--legal) { padding-top: 60px; }
.rm-stage + :is(.rm-tabs__d, .rm-tabs, .rm-mod) { padding-top: 44px; }
@media (max-width: 860px) {
  :is(.rm-awards, .rm-closer) + :is(.rm-mod, .rm-mod--legal) { padding-top: 40px; }
  .rm-stage + :is(.rm-tabs__d, .rm-tabs, .rm-mod) { padding-top: 30px; }
}
/* a white button over a picture loses the shadow meant for white words (it blurred the button's black label) */
.rm-btn--w { text-shadow: none; }
/* a film's title clears the accessibility button (bottom left) on a computer's first screen, where the stage ends at the
   bottom of the window, and the arrow in the middle on a phone */
@media (min-width: 861px) { .rm-stage__t { bottom: 72px; } .rm-stage .rm-mark { bottom: 88px; } }
@media (max-width: 860px) { .rm-stage__t { bottom: 34px; } .rm-stage .rm-mark { bottom: 36px; } }
/* The Record's filters stick right under the header (site.css placed them 12 px lower, and the table showed through) */
html .rm .rec-tools { top: 92px; }
@media (max-width: 860px) { html .rm .rec-tools { top: 64px; } }
/* the HNN mark is the network's own version for dark grounds (green circles, white letters): the white filter every other
   mark takes turned it into three white discs */
.rm-mark--hnn { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .5)); }
/* headings, captions and labels over pictures break into even lines, never one word left alone on the last */
.rm :is(h2, h3, figcaption, .rm-who, .rm-stage__cap, .rm-say, .rm-bleed__s, .rm-lead) { text-wrap: balance; }
/* small links far enough apart to tap (the footer, the contact lists) */
.rm-ftr__links a { display: inline-block; padding-block: 8px; }
.rm-contact__grid a { display: inline-block; padding-block: 4px; }
/* a film page ends on its related projects without a band of empty black before the footer */
.rm-related__in { padding-bottom: 40px; }

/* ---------- v27: the home page in the client's categories (Latest, Released, Coming soon, Where to watch, Events, Press,
   the team, the studio, the close), each section one idea under its name ---------- */
.hm-sec { max-width: 1440px; margin: 0 auto; padding: 0 var(--rm-m) 90px; }
.hm-sec__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; border-top: 1px solid #000; padding-top: 14px; margin-bottom: 26px; }
.hm-sec__h .rm-label { padding-bottom: 0; color: #000; font-size: 30px; letter-spacing: -.03em; }
.hm-more { font-size: 16px; font-weight: 700; color: var(--g1); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hm-news.rm-newslist { padding: 0; }
/* a row of equal cards: four across a computer, two on a small one, a row to swipe on a phone (every card still in it) */
.hm-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--rm-g); align-items: start; }
.hm-row .rm-card__copy { font-size: 21px; line-height: 1.12; }
.hm-row .rm-card__copy > span { font-size: 15px; line-height: 1.35; }
.hm-row .rm-card__play { left: 10px; bottom: 10px; width: 44px; height: 44px; }
.hm-row .rm-card__play svg { width: 21px; height: 21px; }
.hm-row .rm-mark { right: 10px; bottom: 10px; height: 22px; max-width: 96px; }
.hm-row .rm-tile__type b { font-size: 26px; }
.hm-all { display: grid; align-content: end; gap: 6px; aspect-ratio: 16 / 9; padding: 16px 18px; background: #000; color: #fff; }
.hm-all b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.hm-all span { font-size: 14px; font-weight: 700; color: var(--g3); line-height: 1.35; }
@media (hover: hover) { .hm-all:hover b { text-decoration: underline; text-underline-offset: 4px; } }
.hm-oncam { margin-top: 34px; max-width: 120ch; font-size: 18px; line-height: 1.55; color: var(--g1); }
.hm-oncam b, .hm-oncam span { color: #000; }
.hm-oncam span { white-space: nowrap; }
.hm-oncam a { color: var(--g1); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hm-press__logos { margin-bottom: 34px; }
@media (max-width: 1100px) { .hm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .hm-sec { padding-bottom: 60px; }
  .hm-sec__h { margin-bottom: 18px; }
  .hm-sec__h .rm-label { font-size: 24px; }
  .hm-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--rm-m)); padding: 0 var(--rm-m) 10px; scroll-padding: 0 var(--rm-m); scrollbar-width: none; overscroll-behavior-x: contain; }
  .hm-row::-webkit-scrollbar { display: none; }
  .hm-row__i { flex: 0 0 80%; scroll-snap-align: start; }
  .hm-oncam { margin-top: 24px; font-size: 16px; }
}
/* the platform marks, white on black wherever they stand (grey on black left DIRECTV, Telus, Filmzie and Spark TV unreadable);
   HNN in its own version for dark grounds */
.rm .marks__row img { filter: brightness(0) invert(1); opacity: .88; }
.rm .marks__row img.mk-hnn { filter: none; opacity: 1; }
.rm-band .marks__row { margin: 8px 0 30px; }

/* ---------- v27: Events (next first, the premieres, the screenings, the award nights, the stages) ---------- */
.rm-ev__pics { margin-bottom: 26px; }
.ev-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #000; }
.ev { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 320px); gap: 8px var(--rm-g); padding: 18px 0; border-bottom: 1px solid #ddd; align-items: start; }
.ev__when { font-size: 16px; font-weight: 700; color: var(--g1); }
.ev__when em { display: block; width: max-content; margin-top: 8px; padding: 3px 7px 2px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #000; }
.ev__what b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ev__what a { color: #000; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .3); text-underline-offset: 4px; }
.ev__what > span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--g1); }
.ev__where b { display: block; font-size: 16px; font-weight: 700; }
.ev__where span { display: block; font-size: 15px; color: var(--g1); }
@media (max-width: 860px) { .ev { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; } .ev__what b { font-size: 19px; } .ev__when em { display: inline-block; margin: 0 0 0 10px; } }

/* ---------- v27: Films, where to watch (film by film, on black) and everyone on camera ---------- */
.rm-w2w .rm-say { max-width: 30ch; }
.rm-w2w__also { max-width: 96ch; margin: 0 0 34px; font-size: 16px; line-height: 1.55; color: var(--g3); }
.rm-w2w__t { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 4px var(--rm-g); padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.rm-w2w__t .rm-oncam__w { padding-top: 0; font-size: 18px; color: #fff; }
.rm-w2w__t p { margin: 0 0 4px; font-size: 17px; line-height: 1.55; color: var(--g3); }
.rm-w2w__t p span { margin-right: 8px; font-weight: 700; color: #fff; }
.rm-w2w__t a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rm-w2w__t i { font-style: normal; color: rgba(255, 255, 255, .45); }
.rm-oncam--all .rm-oncam__t p { font-size: 18px; line-height: 1.55; letter-spacing: -.01em; }
.rm-oncam--all .rm-oncam__w span { margin-left: 6px; font-weight: 400; color: var(--g3); }
@media (max-width: 860px) { .rm-w2w__t { grid-template-columns: 1fr; } .rm-oncam--all .rm-oncam__t p { font-size: 16px; } }

/* ---------- v27: the menu, in the client's categories, and a second line for the rest ---------- */
.rm-menu .rm-menu__more { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 30px; padding-top: 18px; border-top: 1px solid #000; }
.rm-menu .rm-menu__more a { font-size: 22px; letter-spacing: -.02em; color: var(--g1); }
@media (max-width: 860px) { .rm-menu nav a { font-size: 36px; } .rm-menu .rm-menu__more a { font-size: 19px; } }
/* v27 home, after its first captures: a row of words alone (the press pieces), the band that meets the close, Sunn Stream
   and HNN in their own colours (white on black made a disc of Sunn Stream's sun), the type card's words in white */
.rm-newsrow--text { grid-template-columns: 1fr; }
.rm-band:has(+ :is(.rm-hclose, .rm-closer, .rm-bleed, .rm-awards, .rm-duo, .rm-watch, .rm-pano)) { margin-bottom: 0; }
.rm .marks__row img[src*="sunn-stream"] { filter: none; opacity: 1; }
.rm-card--type .rm-tile__type { color: #fff; }
.rm-card--type .rm-tile__type span { color: rgba(255, 255, 255, .7); }
/* v27: where a film page turns to what it offers a partner (World's Top Dentist, WYNX, The New Woo), under its own heading */
.rm-partner { padding-top: 90px; }
.rm-partner .rm-label { color: #000; border-top: 4px solid #000; padding-top: 16px; font-size: 26px; }
@media (max-width: 860px) { .rm-partner { padding-top: 60px; } .rm-partner .rm-label { font-size: 22px; } }
/* v27 speed: a video's poster as its own background, the phone's file on a phone (tools/lib.mjs video()); the stages and
   the home reel crop from the top, as their videos do */
video[data-poster] { background: var(--pd) 50% 50% / cover no-repeat; }
.hm-hero__reel[data-poster], .rm-stage__media > video[data-poster] { background-position: 50% 0%; }
@media (max-width: 600px) { video[data-poster][data-m] { background-image: var(--pm); } }
@media (max-width: 860px) and (orientation: portrait) { video[data-poster][data-mq="wide"] { background-image: var(--pm); } }
/* v27: the captions button in the player's bar (only when the video has captions) */
.lbp-cc { width: auto; min-width: 44px; padding: 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.lbp-cc.is-on { box-shadow: inset 0 -3px 0 #fff; }
/* v27: the Contact form (on the black Contact page), shown only when it can deliver */
.rm-form { padding-top: 30px; }
.rm-form .rm-label { color: #fff; }
.rm-form__f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px var(--rm-g); max-width: 1100px; }
.rm-form__row { display: grid; gap: 6px; }
.rm-form__row--wide { grid-column: 1 / -1; }
.rm-form__row label { font-size: 14px; font-weight: 700; color: #bbb; }
.rm-form__row :is(input, select, textarea) { width: 100%; font: inherit; font-size: 17px; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 0; padding: 12px 14px; }
.rm-form__row select option { color: #000; }
.rm-form__row :is(input, select, textarea):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rm-form__a { grid-column: 1 / -1; }
.rm-form__msg { grid-column: 1 / -1; min-height: 1.5em; font-size: 16px; color: #fff; }
.rm-form__msg a { color: #fff; text-decoration: underline; }
@media (max-width: 860px) { .rm-form__f { grid-template-columns: 1fr; } }
/* v27: On camera on a phone, each film's list on five lines until Show all (src/js/rm.js); a computer shows every name */
.rm-oncam__more { display: none; }
@media (max-width: 860px) {
  html.js .rm-oncam__t--clip > p:not(.rm-oncam__more) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
  html.js .rm-oncam__t--clip > .rm-oncam__more { display: block; margin-top: 16px; }
}
/* v27: a coming title's stage, above its name on the home page's Coming soon cards (tools/build.mjs rmCard) */
.rm-card__stage { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.rm-card__stage i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E5352B; }
/* v27 QA: a tablet's rows to swipe show two cards and the edge of the next (one card at 80% of 768 px read as a phone
   scaled up) */
@media (min-width: 600px) and (max-width: 860px) { .hm-row__i { flex-basis: 46%; } }
/* v27 QA: a poster set whole in the middle of a home card leaves little room beside it: at 22 px the platform mark reached
   into the poster (the X of WYNX) wherever the cards are narrow (a 320 px phone, a 600 px tablet, four across at 1101 to
   1280 px); 16 px clears it at every width (the posters carry their network's logo in their own art) */
.hm-row .rm-card__media:has(.rm-tile__fit) .rm-mark { height: 16px; }
/* v27b QA: on a phone the wall's poster cards (World's Top Dentist, WYNX: the poster set whole in the middle) leave little
   room beside the poster: the 28 px network mark reached into it (the X of WYNX, 28 px at a 320 px screen); 18 px clears it */
@media (max-width: 600px) { .rm-wall .rm-card__media:has(.rm-tile__fit) .rm-mark { height: 18px; } }
/* v27b QA: the wall's status on a phone is a line above the name (the chip over the picture covered a face and a poster's
   printed title at 320 px); a computer and a tablet keep the chip */
.rm-card__stage--m { display: none; }
@media (max-width: 600px) {
  .rm-wall .rm-card__stage--m { display: flex; }
  .rm-wall .rm-card__media .rm-status { display: none; }
}

/* ---------- v28: the pitch pages' new pieces (tools/merged.mjs, tools/rmkit.mjs) ---------- */
/* a partner's package over a picture, the way a film's credits run (creditsBand, .rm-pkgband: .rm-credits is the film pages' credits column): a deep shade on a computer; a phone shows
   the picture as a band above the list */
.rm-pkgband { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; }
.rm-pkgband__media { position: absolute; inset: 0; z-index: -1; }
.rm-pkgband__media > .rm-cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-pkgband__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 48%, rgba(0, 0, 0, .58) 100%); }
/* the picture keeps its own shape at the top of the band and fades into black where the list runs on (it covered the whole
   band, drawn larger than its file) */
@media (min-width: 861px) {
  .rm-pkgband__media { inset: 0 0 auto 0; height: min(100%, 66.7vw); }
  .rm-pkgband__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #000 100%), linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 48%, rgba(0, 0, 0, .58) 100%); }
}
.rm-pkgband__media .rm-who { z-index: 2; }
.rm-pkgband__in { position: relative; max-width: 1440px; margin: 0 auto; padding: 90px var(--rm-m) 100px; }
.rm-pkgband .rm-label { color: #fff; border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 14px; margin-bottom: 22px; font-size: 16px; }
.rm-pkgband__t { max-width: 15ch; margin: 0 0 46px; font-size: clamp(36px, 4.4vw, 66px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.rm-pkgband__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--rm-g); max-width: 1180px; margin: 0; padding: 0; list-style: none; }
.rm-pkgband__l li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; padding: 18px 0 20px; border-top: 1px solid rgba(255, 255, 255, .3); }
.rm-pkgband__l i { grid-row: span 2; padding-top: 5px; font-style: normal; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .62); }
.rm-pkgband__l b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.rm-pkgband__l span { margin-top: 4px; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.rm-pkgband__n { max-width: 70ch; margin: 30px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
@media (max-width: 860px) {
  .rm-pkgband__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .rm-pkgband__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, #000 100%); }
  .rm-pkgband__in { padding: 22px var(--rm-m) 64px; }
  .rm-pkgband__t { margin-bottom: 30px; }
  .rm-pkgband__l { grid-template-columns: 1fr; }
  .rm-pkgband__l li { grid-template-columns: 40px minmax(0, 1fr); padding: 15px 0 17px; }
  .rm-pkgband__l b { font-size: 20px; }
}
/* the closing band's second line of ways in (closer more): the interviews and the payment on World's Top Dentist */
.rm-closer__more { display: grid; gap: 14px; margin-top: 28px; font-size: 16px; color: #d6d6d6; }
.rm-closer__more p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.rm-closer__more b { color: #fff; font-weight: 700; }
.rm-closer__more a:not(.rm-btn) { display: inline-block; padding-block: 6px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rm-closer__more i { font-style: normal; color: #8a8a8a; }
/* the payment page's one action */
.rm-pay__a { margin-top: 34px; }
.rm-pay__a .rm-btn { padding: 18px 40px; font-size: 20px; }
/* the stars on camera: two across on a phone (a single column ran six screens) */
@media (max-width: 860px) {
  .rm-stars .rm-tiles--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-stars .rm-tile__cap b { font-size: 17px; }
  .rm-stars .rm-tile__cap > span { font-size: 12.5px; }
}
/* a magazine cover on its own wash with the words beside it (The Lyon Report): the cover stands to the right of the words on
   a computer (the line sat on the cover's own printed headline), and above them on a phone */
/* (img() writes the picture's focal point inline, so a placement that moves fitted art says !important, as the Work tiles do) */
@media (min-width: 861px) { .rm-bleed--cover .rm-tile__fit { object-position: 86% 50% !important; } .rm-bleed--cover .rm-bleed__copy { max-width: min(46%, 640px); } }
@media (max-width: 860px) {
  .rm-bleed--cover { height: auto; aspect-ratio: auto; }
  .rm-bleed--cover .rm-bleed__media { position: relative; aspect-ratio: 4 / 5; }
  .rm-bleed--cover::after { display: none; }
  .rm-bleed--cover .rm-bleed__copy { position: relative; left: auto; right: auto; bottom: auto; padding: 24px var(--rm-m) 34px; }
}
/* v28: a page that opens on key art or a tall portrait (the World's Top Dentist payment page, Star-led shows): the picture
   whole on its own wash, to the right of the title (pageStage fit 'wash', cls rm-stage--fit; a full-width crop of the
   red-carpet portrait cut either her chin or the heads behind her on a short, wide screen) */
.rm-stage--fit .rm-tile__wash > .rm-tile__fit { left: auto; right: var(--rm-m); width: 44%; object-position: 100% 50% !important; }
@media (min-width: 861px) { .rm-stage--fit .rm-stage__t { max-width: 54%; } }
@media (max-width: 860px) { .rm-stage--fit .rm-tile__wash > .rm-tile__fit { right: 4%; width: 46%; top: 6%; height: 88%; } .rm-stage--fit .rm-stage__t { max-width: 50%; } }
/* v28: a panorama no wider than its file, centred on the black band (the Lyon launch photograph is 1,400 px) */
.rm-pano--contain .rm-pano__f { max-width: 1360px; margin: 0 auto; }
/* v28: a page's opening picture shown whole on a phone (HNN Originals: a 4:3 crop of its 3:2 photograph took a head at one
   edge or the other) */
@media (max-width: 600px) { .rm-stage--whole { aspect-ratio: 3 / 2; } }

/* ---------- v29: more video, more pictures, more information (tools/rmkit.mjs) ---------- */
/* a pair item and a package band that run a clip */
.rm-duo__i > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-pkgband__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* words from the people behind the work (quoteBand): black, a portrait beside each quote */
.rm-quotes { background: #000; color: #fff; }
.rm-quotes__in { max-width: 1440px; margin: 0 auto; padding: 90px var(--rm-m) 100px; }
.rm-quotes .rm-label { color: #fff; border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 14px; margin-bottom: 34px; font-size: 16px; }
.rm-quotes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px var(--rm-g); }
.rm-quote { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 0 28px; align-items: start; margin: 0; }
.rm-quote__ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; grid-row: span 2; }
.rm-quote__ph > .rm-cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-quote blockquote { margin: 0; }
.rm-quote__big { font-size: clamp(30px, 2.9vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.rm-quote__big::before { content: "\201C"; } .rm-quote__big::after { content: "\201D"; }
.rm-quote__t { margin-top: 16px; font-size: 17px; line-height: 1.5; color: #c9c9c9; }
.rm-quote figcaption { display: grid; gap: 3px; margin-top: 18px; align-self: end; }
.rm-quote figcaption b { font-size: 18px; font-weight: 700; }
.rm-quote figcaption span { font-size: 15px; font-weight: 700; color: var(--g3); }
@media (max-width: 860px) {
  .rm-quotes__in { padding: 60px var(--rm-m) 64px; }
  .rm-quotes__grid { grid-template-columns: 1fr; gap: 44px; }
  .rm-quote { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 0 16px; }
  .rm-quote__big { font-size: 26px; }
  .rm-quote__t { font-size: 15px; }
}
/* v29: names under rules, then numbers under rules, in one module (the screens, the house behind the series): a breath
   between the two sets of rules */
.rm-people + .rec-nums { margin-top: 56px; }
@media (max-width: 860px) { .rm-people + .rec-nums { margin-top: 36px; } }

/* v29 round 2: a clip shown whole at its own shape (pano vid); a panorama without words is not shaded; the network's own app
   on the black band, its edges dissolving into the black (a UI picture, so no frame of its own) */
.rm-pano__f > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-pano--bare::after { display: none; }
.rm-band__screen { margin: 34px 0 8px; max-width: 1330px; }
.rm-band__screen img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 80%, transparent); mask-composite: intersect; }
.rm-band__screen figcaption { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--g3); }
@media (max-width: 860px) { .rm-band__screen { margin-top: 24px; } .rm-band__screen figcaption { font-size: 13px; } }
/* v29 QA: a caption never sits on a face. A panorama without words carries its caption under the picture (the cast of Bye Ol'
   Dentistry fills its frame to the top edge); a band restaged on phones (rm-bleed--wide) can put it under its words
   (rm-bleed--capunder: a face sits at the top right of the Cannes and The Journey clips) */
.rm-pano--bare .rm-bleed__cap { position: static; max-width: none; margin: 0; padding: 10px var(--rm-m) 14px; background: none; text-align: right; color: rgba(255, 255, 255, .78); }
@media (max-width: 860px) {
  .rm-bleed--capunder .rm-bleed__cap { position: static; max-width: none; margin: 0; padding: 0 var(--rm-m) 20px; background: none; text-align: left; color: rgba(255, 255, 255, .7); }
  /* the stars, two across: the fifteenth stands whole across both columns instead of alone in half the row */
  .rm-stars .rm-tiles--w > .rm-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
/* a quote without a portrait takes the whole column (The Lyon Report: the founders' words on the night) */
.rm-quote:not(:has(.rm-quote__ph)) { grid-template-columns: minmax(0, 1fr); }
/* v29: a band whose person stands just right of the middle keeps its words in a left column on a computer (The Lyon Report:
   her words, left of her on stage), as rm-bleed--right does on the other side */
@media (min-width: 861px) {
  .rm-bleed--left .rm-bleed__copy { max-width: min(38%, 560px); }
  .rm-bleed--left .rm-bleed__t { font-size: clamp(40px, 5vw, 84px); }
}