/* Literata, self-hosted (SIL OFL 1.1, see /fonts/OFL.txt). Latin subset, variable weight and optical size. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/literata-latin.woff2") format("woff2");
}
:root {
  --navy: #172b3d;
  --ink: #14202e;
  --paper: #faf8f3;
  --gold: #b07a22;
  --muted: #5a6170;
  --tint: #f2ede4;
  --night: #0e1a26;
  --serif: "Literata", Georgia, serif;
  --sans: system-ui, "Segoe UI", -apple-system, sans-serif;
  --label: #8a5c17;
  --max: 1360px;
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --gutter: clamp(20px, 4.75vw, 80px);
  --section-space: clamp(52px, 5.5vw, 88px);
  /* One size for every page title: each page's top headline, the closing band's heading and the privacy and error pages. */
  --title-size: clamp(2.4rem, 4vw, 4rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-color: #929ca5 var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: normal; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
a[aria-disabled="true"] { cursor: default; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; line-height: normal; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.shell { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: absolute; top: -80px; left: 20px; z-index: 10; padding: 12px 20px; background: var(--paper); color: var(--ink); font: 1rem var(--sans); }
.skip-link:focus { top: 10px; }
.site-header { background: var(--navy); color: var(--paper); position: relative; z-index: 2; }
.navigation { display: flex; justify-content: space-between; align-items: center; min-height: 76px; gap: 30px; }
.wordmark { font: 2.12rem/1.2 var(--serif); letter-spacing: .21em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; font: 1.05rem/1.5 var(--sans); padding-block: 14px; }
.nav-links a[aria-current="page"], .nav-links a:not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--gold); }
.menu-toggle { display: none; }
/* The photo keeps close to its own proportions (7:4) so Andrew always shows from head to crossed arms;
   the hero grows to fit it rather than cropping him into a strip. */
.hero { display: grid; grid-template-columns: calc(var(--edge) + min(40vw, 620px)) minmax(0, 1fr); min-height: min(calc((100vw - var(--edge) - min(40vw, 620px)) / 1.75), 640px); }
/* Home sizes its text column to the tagline, so "Ideas that make you think," holds the first line, and gives the
   rest to the photo, which keeps close to 7:4. */
.home-hero { --home-copy: calc(min(49vw, 760px) + clamp(48px, 4vw, 96px)); grid-template-columns: var(--home-copy) minmax(0, 1fr); min-height: min(calc((100vw - var(--home-copy)) / 1.7), 680px); }
.hero-copy { padding: 40px 14px 40px var(--edge); display: flex; flex-direction: column; justify-content: center; }
.hero-copy h1, .closing h2, .privacy h1, .sent h1 { font-size: var(--title-size); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
/* The tagline's three key words (think, use, laugh) carry the line: brass italic, a touch heavier. */
.hero-copy h1 em { font-style: italic; font-weight: 500; color: var(--label); }
.gold-rule { width: 72px; height: 1px; background: var(--gold); margin: 26px 0 22px; }
.hero-copy p { font-size: clamp(1.15rem, 1.45vw, 1.45rem); line-height: 1.35; letter-spacing: -.01em; }
.hero-action { align-self: flex-start; margin-top: 48px; }
.hero-photo { position: relative; min-width: 0; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.credentials { padding: 52px 0 var(--section-space); }
.credentials-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr 1fr; gap: 28px 76px; }
.credentials-list li { position: relative; display: flex; align-items: baseline; gap: 16px; padding-top: 26px; }
/* A short gold accent marks each figure and each study column, in place of divider lines. */
.credentials-list li::before, .study-grid .eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--gold); }
.figure { font: 400 clamp(2.6rem, 3.6vw, 3.6rem)/1 var(--serif); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.figure-label { font: 1rem/1.4 var(--sans); color: var(--muted); max-width: 17ch; }
.study-band { background: var(--tint); scroll-margin-top: 24px; }
.study { padding: var(--section-space) 0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; margin-bottom: 40px; }
.section-heading h2 { font-size: clamp(2.2rem, 3vw, 2.9rem); letter-spacing: -.035em; }
.study-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr 1fr; gap: 56px 76px; }
.study-grid .eyebrow { position: relative; padding-top: 18px; }
.eyebrow { color: var(--label); font: 500 .875rem/1.4 var(--sans); margin-bottom: 16px; }
/* Every column reads the same way: media first, then its title and summary. */
.watch-row { display: grid; grid-template-columns: 1fr; gap: 24px; }
.study-grid h3 { font-size: clamp(1.6rem, 2vw, 1.875rem); line-height: 1.2; margin-bottom: 12px; letter-spacing: -.02em; text-wrap: balance; }
.study-grid h3 a { text-decoration: none; }
.study-grid h3 a:not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: 5px; }
.study-grid .story-copy > p, .speaking-story > p:not(.eyebrow), .listen-slide > p { color: var(--muted); font-size: 1.22rem; line-height: 1.42; max-width: 32ch; text-wrap: pretty; }
.video-frame, .read-frame { height: 250px; position: relative; background: var(--navy); }
/* The Speak column opens with a still photo, framed like the video so the titles share a line. */
.read-frame { margin-bottom: 24px; overflow: hidden; }
.read-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.video-cover { display: block; padding: 0; border: 0; width: 100%; height: 100%; background: var(--navy); position: relative; overflow: hidden; }
.video-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; transition: transform 450ms var(--ease); }
.video-cover::after { content: ""; position: absolute; inset: 0; background: #0c193121; }
.play-icon { display: grid; place-items: center; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; padding-left: 4px; border: 2px solid white; border-radius: 50%; color: white; background: #172b3d80; font: 1.7rem/1 var(--sans); transition: transform 220ms var(--ease), background-color 220ms var(--ease); }
.video-cover:focus-visible { outline-offset: -6px; }
.video-cover:active .play-icon { transform: translate(-50%, -50%) scale(.96); }
/* The episode's official square cover stands in for the Listen heading. */
/* Sized to the video's height so the Watch and Listen media line up across the row. */
.episode-frame { width: min(100%, 250px); aspect-ratio: 1; position: relative; margin-bottom: 24px; background: var(--navy); }
.episode-cover { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: var(--navy); overflow: hidden; }
.episode-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease); }
.episode-cover .play-icon { top: auto; left: auto; right: 12px; bottom: 12px; transform: none; width: 44px; height: 44px; font-size: 1.2rem; }
.episode-cover:focus-visible { outline-offset: -6px; }
.episode-cover:active .play-icon { transform: scale(.96); }
/* Centered pop-out player: the native dialog keeps focus inside and closes on Escape. */
.player-dialog { padding: 0; border: 0; background: transparent; width: min(1120px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px); overflow: visible; opacity: 0; transform: translateY(12px) scale(.97); transition: opacity 220ms var(--ease), transform 280ms var(--ease); }
.player-dialog.is-episode { width: min(660px, calc(100vw - 40px)); }
.player-dialog.is-open { opacity: 1; transform: none; }
.player-dialog::backdrop { background: #0c1931; opacity: 0; backdrop-filter: blur(6px); transition: opacity 220ms var(--ease); }
.player-dialog.is-open::backdrop { opacity: .82; }
.player-dialog-inner { position: relative; background: var(--ink); border-top: 2px solid var(--gold); }
.player-stage { position: relative; }
.is-video .player-stage { aspect-ratio: 16 / 9; max-height: calc(100vh - 100px); }
/* Apple's and Spotify's cards have their own rounded corners, so nothing frames them. */
.is-episode .player-dialog-inner { background: transparent; border-top: 0; }
.player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The podcast pop-out stacks one card per service: Apple, then Spotify. */
.is-episode .player-stage { display: flex; flex-direction: column; gap: 12px; }
.is-episode .player-stage iframe { position: static; display: block; height: 175px; border-radius: 12px; }
.is-episode .player-stage iframe.is-spotify { height: 152px; }
/* The whole show: Apple's tall player, with the episode list. */
.is-episode .player-stage iframe.is-apple-show { height: min(450px, calc(100vh - 60px)); }
/* Listen: two episodes take turns. With JavaScript they share one grid cell, so the column keeps the height of the
   taller one and nothing below it jumps; without it, both show. */
.js .listen-carousel { display: grid; }
.js .listen-slide { grid-area: 1 / 1; }
.listen-slide + .listen-slide { margin-top: 36px; }
/* A slow crossfade: the outgoing slide fades out while the next fades in, then the hidden one drops out of reach. */
.js .listen-slide { opacity: 0; visibility: hidden; transition: opacity 1.1s ease-in-out, visibility 0s linear 1.1s; }
.js .listen-slide + .listen-slide { margin-top: 0; }
.js .listen-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s ease-in-out, visibility 0s; }
/* Beside Watch and Speak, the square cover sits centered in its wider column; its words stay left-aligned like theirs. */
@media (min-width: 761px) {
  .listen-story .episode-frame { margin-inline: auto; }
}
.carousel-dots { display: flex; gap: 4px; margin: 14px 0 0 -10px; }
.carousel-dots button { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; }
.carousel-dots button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1.5px solid var(--gold); border-radius: 50%; transition: background-color 180ms var(--ease); }
.carousel-dots button[aria-current="true"]::before { background: var(--gold); }
.carousel-dots button:focus-visible { outline-offset: -2px; }
/* A full-width band between the study row and what follows, for students old and new. */
.students-band { background: var(--navy); color: var(--paper); }
.students { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 44px 0; }
.students h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.students .contact-link { flex: none; color: var(--navy); background: var(--paper); border-color: var(--paper); }
.students .contact-link:hover { color: var(--paper); background: transparent; }
/* It's been fun: an old clip beside a short note, the reverse of the introduction below it. */
.fun { padding-top: var(--section-space); }
/* Extra room before the introduction, so the two side-by-side sections read as separate parts. */
.fun + .introduction { margin-top: clamp(40px, 5vw, 88px); }
/* Home's text block sits centered in the open space beside the photo instead of hugging the page edge. Its lines
   stay left-aligned with one another. */
@media (min-width: 761px) {
  .home-hero .hero-copy { align-items: center; padding: clamp(56px, 5vw, 80px) clamp(24px, 3vw, 40px) 14px; }
  /* The subtitle and button sit low, near the photo's bottom edge; the headline keeps its place. */
  .home-hero .gold-rule { margin-bottom: 48px; }
  .home-hero .hero-text { max-width: 100%; }
}
/* Where the tagline holds its set lines, the subtitle and the button share a row under the gold rule, the button at
   the row's right end. Narrower, the button sits under the subtitle. */
@media (min-width: 1001px) {
  .hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
  .hero-row .hero-action { flex: none; margin-top: 0; }
}
/* Below about 1000px the tagline's set breaks no longer fit; let it wrap on its own. */
@media (max-width: 1000px) { .home-hero .desktop-break { display: none; } }
.fun-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 80px; align-items: center; }
.fun h2 { font-size: clamp(2.3rem, 3.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.035em; margin-bottom: 24px; }
.fun-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.3rem; line-height: 1.6; max-width: 40ch; text-wrap: pretty; }
.fun-frame { aspect-ratio: 16 / 9; position: relative; background: var(--navy); }
/* The close button floats over the player's top-right corner, inside the box. Its X is drawn with
   two lines so it sits exactly in the middle of the circle, which a text glyph never quite does. */
.player-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #0c1931b3; color: var(--paper); transition: background-color 180ms var(--ease); }
.player-close::before, .player-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; border-radius: 1px; transform: rotate(45deg); }
.player-close::after { transform: rotate(-45deg); }
.player-close:hover { background: #0c1931; }
/* Kept small and tight in the corner so YouTube's settings icon beside it stays clickable. */
.is-video .player-close { top: 6px; right: 6px; width: 34px; height: 34px; }
.is-video .player-close::before, .is-video .player-close::after { width: 14px; margin-left: -7px; }
.player-close:focus-visible { outline-offset: 2px; }
body:has(.player-dialog[open]) { overflow: hidden; }
.text-link { display: inline-block; background: none; border: 0; border-bottom: 1px solid var(--gold); padding: 0 0 5px; margin-top: 20px; color: var(--ink); text-decoration: none; font: 1rem/1.5 var(--sans); }
.text-link span { margin-left: 8px; }
.text-link:not([aria-disabled="true"]):hover { border-bottom-color: var(--ink); }
.introduction { padding: var(--section-space) 0; }
.introduction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.introduction-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 40%; }
.introduction h2 { font-size: clamp(2.3rem, 3.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.035em; margin-bottom: 28px; text-wrap: balance; }
.introduction-copy .lead { color: var(--ink); font-size: clamp(1.3rem, 1.6vw, 1.5rem); line-height: 1.5; }
.introduction-copy p { color: var(--muted); font-size: 1.3rem; line-height: 1.65; max-width: 50ch; text-wrap: pretty; }
.introduction-copy p + p { margin-top: 22px; }
.closing-band { background: var(--navy); color: var(--paper); }
.closing { padding: 104px 0 96px; }
.closing > p { font-size: 1.3rem; line-height: 1.55; color: #c9d1d9; margin: 24px 0 36px; max-width: 34em; }
.contact-link { display: inline-flex; min-height: 48px; align-items: center; padding: 12px 28px; color: var(--paper); background: var(--navy); text-decoration: none; font: 1rem/1.5 var(--sans); border: 1px solid var(--navy); }
.contact-link:not([aria-disabled="true"]):hover { color: var(--navy); background: transparent; }
.closing .contact-link { color: var(--navy); background: var(--paper); border-color: var(--paper); }
.closing .contact-link:not([aria-disabled="true"]):hover { color: var(--paper); background: transparent; }
/* A deeper navy sets the footer apart from the closing band. It overlaps the band by a pixel so display scaling can't leave a seam. */
.site-footer { background: var(--night); color: var(--paper); padding: 64px 0 32px; margin-top: -1px; }
.footer-top { display: flex; gap: 40px; justify-content: space-between; }
.site-footer .wordmark { font-size: 1.6rem; }
.footer-top p { font-size: 1.1rem; margin-top: 15px; }
.footer-top nav { display: flex; align-items: start; flex-wrap: wrap; gap: 28px; font: .86rem/1.6 var(--sans); }
.footer-top nav a { text-decoration: none; }
.footer-top nav a[aria-current="page"], .footer-top nav a:not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; font: .8rem/1.6 var(--sans); color: #c9d1d9; }
.footer-bottom a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--gold); }
/* The studio credit sits at the row's right end, with the studio's leaf mark (drawn in CSS, as on its own site). */
.site-credit { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.credit-mark { flex: none; width: 1em; height: 1em; font-size: 12px; border-radius: 70% 15% 70% 20%; background: linear-gradient(145deg, #a8c49f, #1d6339); box-shadow: .4em -.267em 0 -.21em #0c3b29; transform: rotate(-35deg); }
@media (max-width: 1200px) {
  .navigation .wordmark { font-size: 1.8rem; }
  .nav-links { gap: 26px; }
  .study-grid, .credentials-list { column-gap: 48px; }
  .video-frame, .read-frame { height: 200px; }
  .episode-frame { width: min(100%, 200px); }
  .credentials-list li { flex-direction: column; gap: 8px; }
}
@media (max-width: 900px) {
  .video-frame, .read-frame { height: 160px; }
  .episode-frame { width: min(100%, 160px); }
  .wordmark { font-size: 1.45rem !important; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: .9rem; }
  .hero { grid-template-columns: 44% 56%; min-height: 32vw; }
  .hero-copy { padding-inline: 4.75vw 18px; }
  .hero-copy p { font-size: 1.15rem; }
  .desktop-break { display: none; }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .introduction-grid, .fun-grid { gap: 45px; }
}
@media (max-width: 760px) {
  :root { --title-size: clamp(2.1rem, 8.6vw, 3.2rem); }
  .shell { width: calc(100% - 40px); }
  .navigation { min-height: 78px; padding-block: 16px; flex-wrap: wrap; gap: 0; }
  .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 12px; background: none; color: var(--paper); border: 1px solid #ffffff60; font: .9rem var(--sans); transition: border-color 180ms var(--ease), background-color 180ms var(--ease); }
  .menu-toggle[aria-expanded="true"] { background: #ffffff0a; border-color: var(--paper); }
  .menu-icon { display: inline-block; width: 16px; height: 16px; position: relative; }
  .menu-icon span { position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; transform-origin: center; transition: transform 220ms var(--ease); }
  .menu-icon span:first-child { top: 5px; }
  .menu-icon span:last-child { top: 11px; }
  .menu-toggle[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav-links { width: 100%; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px 26px; }
  .js .nav-links { display: grid; grid-template-columns: 1fr 1fr; position: absolute; top: calc(100% - 1px); left: 20px; right: 20px; width: auto; margin: 0; padding: 16px 20px 24px; gap: 4px 16px; background: var(--navy); border-top: 1px solid #ffffff26; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 220ms; }
  .js .nav-links.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 44px 20px 36px; }
  .hero-copy h1 { max-width: 620px; }
  .hero-copy p { font-size: clamp(1.15rem, 4.8vw, 1.35rem); max-width: 500px; }
  .hero-copy .gold-rule { margin: 26px 0 24px; }
  .hero-photo { height: 320px; }
  .hero-photo img { object-position: 58% 38%; }
  .study { padding-block: 48px 56px; }
  .section-heading { margin-bottom: 28px; }
  .study-grid { grid-template-columns: 1fr; gap: 52px; }
  .video-frame, .read-frame { height: auto; aspect-ratio: 16 / 9; }
  .credentials-list { grid-template-columns: 1fr; gap: 28px; }
  .credentials-list li { flex-direction: row; gap: 16px; padding-top: 20px; }
  .figure { min-width: 5.2ch; font-size: 2.4rem; }
  .credentials { padding: 40px 0 48px; }
  .episode-frame { width: min(100%, 220px); }
  .study-grid h3 { font-size: 1.8rem; }
  .study-grid .story-copy > p, .speaking-story > p:not(.eyebrow), .listen-slide > p { font-size: 1.15rem; line-height: 1.45; }
  .students { flex-direction: column; align-items: flex-start; padding: 40px 0; }
  .fun-grid { grid-template-columns: 1fr; gap: 28px; }
  .fun-frame { order: -1; }
  .fun h2 { font-size: 2.7rem; }
  .fun-copy > p:not(.eyebrow) { font-size: 1.2rem; }
  .introduction { padding-block: var(--section-space); }
  .introduction-grid { grid-template-columns: 1fr; gap: 28px; }
  .introduction h2 { font-size: 2.7rem; }
  .introduction h2 br { display: none; }
  .introduction-copy p { font-size: 1.2rem; }
  .closing { padding-block: 64px 56px; }
  .footer-top { flex-direction: column; gap: 30px; }
  .footer-top nav { gap: 16px 24px; }
  .footer-bottom { flex-wrap: wrap; }
  .site-footer { padding-top: 48px; }
}
@media (max-width: 480px) {
  .hero-photo { height: 260px; }
  .navigation .wordmark { font-size: clamp(1rem, 4.7vw, 1.35rem) !important; letter-spacing: .14em; }
  .study-grid h3 { font-size: 1.95rem; }
}
@media (hover: hover) and (pointer: fine) {
  .video-cover:hover img { transform: scale(1.025); }
  .video-cover:hover .play-icon { background: var(--navy); transform: translate(-50%, -50%) scale(1.06); }
  .episode-cover:hover img { transform: scale(1.025); }
  .episode-cover:hover .play-icon { background: var(--navy); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video-cover img, .episode-cover img, .play-icon, .menu-toggle, .menu-icon span, .js .nav-links, .player-dialog, .player-dialog::backdrop, .player-close { transition: none; }
  .player-dialog { transform: none; }
  .js .listen-slide, .js .listen-slide.is-active { transition: none; }
  .carousel-dots button::before { transition: none; }
  .episode-cover:hover img { transform: none; }
  .episode-cover:hover .play-icon, .episode-cover:active .play-icon { transform: none; }
  .video-cover:hover img { transform: none; }
  .video-cover:hover .play-icon, .video-cover:active .play-icon { transform: translate(-50%, -50%); }
}
@media (forced-colors: active) {
  html { scrollbar-color: auto; }
  .play-icon, .menu-toggle, .player-close { border-color: ButtonText; }
  .carousel-dots button::before { border-color: ButtonText; }
  .carousel-dots button[aria-current="true"]::before { background: ButtonText; }
  .player-close::before, .player-close::after { background: ButtonText; }
}