/* =====================================================================================================
   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; }