/* =====================================================================================================
   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; }
  .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: 100%; aspect-ratio: 16 / 9; max-height: 94vh; margin: 0 auto; overflow: hidden; cursor: pointer; color: #fff; }
.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: thin; scroll-padding: 0 var(--rm-m); overscroll-behavior-x: contain; }
.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: rgba(0, 0, 0, .94); 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; }
/* 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; }
  .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: the shorts' own frames carry captions low in the picture, so their cards show the upper square (the speaker) */
.rm-rail__i--v { flex-basis: clamp(220px, 19vw, 300px); }
.rm-rail__i--v .rm-rail__ph { aspect-ratio: 1 / 1; }
.rm-rail__i--v .rm-rail__ph img { object-position: 50% 4%; }
.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: 8px; 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; } }