/* Age in Sports: "screening room" theme.
   One loud element, the ages, set in condensed marquee numerals; everything else stays quiet.
   Follows the device's light/dark setting. Mobile first. */

/* Fonts are served from this site (no Google Fonts), both under the SIL Open Font License. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/big-shoulders-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark light;
  --bg: #16131f;        /* screening-room violet-black */
  --surface: #201c2c;
  --surface-2: #2b2639;
  --line: #3a3449;
  --text: #f3efe7;      /* projector-light off-white */
  --muted: #a9a2b9;
  --faint: #6f6883;
  --marquee: #f4b740;   /* the ages */
  --younger: #6fd3c7;
  --good: #7bd88f;
  --warn: #e9b1a2;
  --focus: #f4b740;
  --shadow: 0 18px 50px rgb(0 0 0 / .45);
  --sc-great: #2fb7a0; --sc-good: #8cc9b9; --sc-mixed: #9a93a8; --sc-poor: #e07a6a; /* score bands */
  --c-actor: #c4850e;   /* chart pair, validated for CVD on the dark surface */
  --c-char: #0e9688;

  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --pad: max(18px, env(safe-area-inset-left));
  --measure: 1200px; /* page width; was 880px before the wide layout (commit 5199451) */
}
/* Dark colour choices (Settings > Dark color). Placed before the light rules so light mode still wins. */
:root[data-tone="midnight"] { --bg: #0f1520; --surface: #17202e; --surface-2: #212c3d; --line: #31405a; --muted: #a3aec2; --faint: #66728a; }
:root[data-tone="charcoal"] { --bg: #151517; --surface: #1e1e21; --surface-2: #29292d; --line: #3a3a40; --muted: #a8a8b2; --faint: #6e6e78; }
:root[data-tone="black"] { --bg: #000; --surface: #0e0e10; --surface-2: #1a1a1d; --line: #2c2c31; --muted: #a8a8b2; --faint: #6e6e78; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f1f8; --surface: #ffffff; --surface-2: #e9e6f1; --line: #d9d4e5;
    --text: #1b1824; --muted: #5e5872; --faint: #9c96ad;
    --marquee: #9a5b00; --younger: #0e7c72; --good: #237a3b; --warn: #9b4a33; --focus: #9a5b00;
    --shadow: 0 18px 40px rgb(40 30 70 / .14);
    --c-actor: #a35f00; --c-char: #008a7d;
    --sc-great: #0b7f6e; --sc-good: #4d9a8a; --sc-mixed: #8a8399; --sc-poor: #b8513f;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1f8; --surface: #ffffff; --surface-2: #e9e6f1; --line: #d9d4e5;
  --text: #1b1824; --muted: #5e5872; --faint: #9c96ad;
  --marquee: #9a5b00; --younger: #0e7c72; --good: #237a3b; --warn: #9b4a33; --focus: #9a5b00;
  --shadow: 0 18px 40px rgb(40 30 70 / .14);
  --c-actor: #a35f00; --c-char: #008a7d;
  --sc-great: #0b7f6e; --sc-good: #4d9a8a; --sc-mixed: #8a8399; --sc-poor: #b8513f;
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { font-size: calc(100% * var(--ts, 1.15)); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.5 var(--body); text-rendering: optimizeLegibility;
}
/* The hidden attribute must beat any display set by a rule below (the wide film layout sets display: grid on #film). */
[hidden] { display: none !important; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--marquee) 35%, transparent); }

.app { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad) calc(48px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------------------ top bar */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) 0 12px;
}
/* The frosted strip and its rule run the full width of the window; the controls stay in the page column. */
.bar::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.bar::after {
  content: ""; position: absolute; inset: auto calc(50% - 50vw) 0; height: 1px; background: var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font: 800 1.5rem/1 var(--display); letter-spacing: .01em; text-decoration: none; color: var(--text);
}
/* A tiny row of marquee bulbs. */
.mark {
  width: 22px; height: 22px; border-radius: 6px; background:
    radial-gradient(circle, var(--marquee) 2.2px, transparent 2.6px) 0 0 / 7.3px 7.3px,
    var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.searchbox { position: relative; flex: 1; min-width: 0; }
.glass {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
#q {
  width: 100%; height: 48px; padding: 0 44px 0 42px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: max(16px, 1rem); /* 16px keeps iOS from zooming */
  transition: border-color .15s, box-shadow .15s;
}
#q::placeholder { color: var(--faint); }
#q:focus { outline: none; border-color: var(--marquee); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marquee) 22%, transparent); }
#q::-webkit-search-cancel-button { display: none; }
.clear {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: none; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.clear svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.clear:hover { background: var(--surface-2); }
.clear:hover svg { stroke: var(--text); }
.clear:focus-visible { outline: 2px solid var(--marquee); outline-offset: 0; }
#q:not(:placeholder-shown) ~ .clear { display: grid; }

/* Settings: a small popover anchored under the top-right button. */
.gear {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); transition: border-color .15s;
}
.gear:hover { border-color: var(--marquee); }
.gear svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings {
  position: fixed; inset: auto; top: 72px; right: max(16px, calc((100vw - var(--measure)) / 2));
  margin: 0; width: min(24rem, calc(100vw - 32px)); padding: 10px; /* grows with the text size; full width on phones */
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.sethead { margin: 4px 8px 4px; font: 800 1.125rem/1 var(--display); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px;
  border-radius: var(--r-sm); cursor: pointer; }
.setrow:hover { background: var(--surface-2); }
.settext { display: grid; gap: 1px; }
.setlabel { font-weight: 600; font-size: 0.9375rem; }
.sethelp { color: var(--muted); font-size: 0.7812rem; }
.setnote { margin: 6px 8px 4px; color: var(--faint); font-size: 0.7188rem; }
/* Text size */
.sizerow { padding: 10px 8px 8px; display: grid; gap: 8px; }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); }
.sizebtn { min-height: 40px; border: 0; border-radius: calc(var(--r-sm) - 2px); background: none; color: var(--muted);
  font: 700 var(--sz, 1rem)/1 var(--display); cursor: pointer; }
.sizebtn:hover { color: var(--text); }
.sizebtn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sizebtn:focus-visible { outline: 2px solid var(--marquee); outline-offset: 2px; }
/* Switch */
.setrow input[type="checkbox"] {
  appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: background-color .15s;
}
.setrow input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: translate .15s, background-color .15s;
}
.setrow input[type="checkbox"]:checked { background: var(--marquee); border-color: var(--marquee); }
.setrow input[type="checkbox"]:checked::after { translate: 16px 0; background: var(--bg); }

#results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
#results li {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer;
}
#results .rtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Person, TV or film, as a quiet icon on a soft tile; people get a round tile like their photos elsewhere. */
#results .ricon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
#results .ricon.person { border-radius: 50%; }
#results .ricon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#results li.on .ricon { color: var(--marquee); }
#results .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#results li.on, #results li:hover { background: var(--surface-2); }
#results .t { font-weight: 600; }
#results .d { color: var(--muted); font-size: 0.8438rem; }

/* ------------------------------------------------------------------ status */
.status { min-height: 1.5em; margin: 14px 0 0; color: var(--muted); font-size: 0.875rem; }
.status:empty { margin: 0; min-height: 0; }
.status.busy::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
  background: var(--marquee); vertical-align: 1px; animation: bulb 1s ease-in-out infinite;
}
.status.warn { color: var(--warn); }
.status.err {
  color: var(--text); background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--r-sm); padding: 10px 14px;
}
@keyframes bulb { 50% { opacity: .25; } }

/* ------------------------------------------------------------------ home */
#home { padding: clamp(28px, 6vw, 56px) 0 8px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: clamp(24px, 4vw, 48px);
  align-items: center; margin-bottom: clamp(36px, 6vw, 56px);
}
#home h1 {
  margin: 0 0 16px; max-width: 16ch;
  font: 800 clamp(2.75rem, 7vw, 4.75rem)/1 var(--display); letter-spacing: .005em; text-wrap: balance;
}
.lede { max-width: 46ch; margin: 0; font-size: clamp(1.0312rem, 1.9vw, 1.1562rem); color: color-mix(in srgb, var(--text) 86%, var(--muted)); text-wrap: pretty; }

/* A real result, shown as the hero: what the site does, at a glance. */
.sample {
  display: grid; gap: 0; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s, translate .2s ease;
}
.sample:hover, .sample:focus-visible { border-color: var(--marquee); translate: 0 -2px; }
.samplehead { display: grid; gap: 2px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.samplehead strong { font: 800 1.625rem/1 var(--display); }
.samplehead span { color: var(--good); font-size: 0.8125rem; }
.samplehead span.atrel { color: var(--muted); }
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.sname { display: grid; font-weight: 700; font-size: 1.0625rem; }
.sname small { color: var(--muted); font-weight: 400; font-size: 0.8125rem; }
.sage { font: 800 2rem/1 var(--display); color: var(--marquee); font-variant-numeric: tabular-nums; }
.samplefoot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px 12px; color: var(--faint); font-size: 0.7812rem; }
.samplefoot .open { color: var(--muted); font-weight: 500; }
.sample:hover .open { color: var(--text); }

.trending { margin: 0 0 var(--sgap, 40px); }
.trendhead { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.trendhead h2 { margin: 0; font: 800 1.75rem/1 var(--display); }
.shuffle {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 500; transition: border-color .15s;
}
.shuffle:hover { border-color: var(--marquee); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pick {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 12px 8px 8px; text-align: left; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, background-color .15s;
}
.pick:hover { border-color: var(--marquee); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.pposter { flex: none; width: 72px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; display: block;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.pposter.none { display: grid; place-items: center; font: 800 1.25rem/1 var(--display); color: var(--muted); }
.ptext { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pt { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pk {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: var(--surface-2); color: var(--muted);
}
.fine { max-width: 62ch; margin: 0; color: var(--muted); font-size: 0.875rem; text-wrap: pretty; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
}
/* Once someone has used the site a while the headline goes. Nothing replaces it on a phone; on a wide
   screen Recently viewed sits beside the example card, or the card centres when there is no history. */
html.vet .herotext { display: none; }
html.vet #home { padding-top: clamp(20px, 3vw, 32px); }
html.vet .hero { margin-bottom: clamp(24px, 4vw, 40px); }
html.vet .hero:not(.withrecent) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.hero.withrecent { align-items: start; }
.hero.withrecent #recentsec { margin: 0; }
.hero.withrecent .picks { grid-template-columns: 1fr 1fr; }
.hero.withrecent #recent > :nth-child(n+5) { display: none; }
/* Phones: a compact headline so the example card is on screen straight away. */
@media (max-width: 560px) {
  #home { padding-top: 18px; }
  #home h1 { font-size: 2.125rem; max-width: none; margin-bottom: 8px; }
  .lede { font-size: 0.9688rem; line-height: 1.45; }
  .hero { gap: 18px; margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .picks { grid-template-columns: 1fr 1fr; }
  .pick { gap: 10px; }
  .pposter { width: 60px; }
}

/* ------------------------------------------------------------------ title page */
#film { padding-top: 20px; }
.filmhead h2 {
  margin: 8px 0 6px; font: 800 clamp(2.5rem, 8vw, 4.5rem)/.95 var(--display); text-wrap: balance;
}
/* Title row: poster on the left, title, details and scores beside it. */
.titlerow { display: grid; grid-template-columns: clamp(96px, 17vw, 168px) minmax(0, 1fr); gap: clamp(16px, 3vw, 28px);
  align-items: start; margin: 4px 0 18px; }
.titletext { min-width: 0; }
.titletext h2 { margin-top: 0; }
.titletext .ratings { margin-bottom: 0; }
.poster {
  display: block; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow), 0 0 0 1px var(--line);
}
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.poster { transition: translate .2s ease; }
a.poster:hover { translate: 0 -2px; }
.titlerow.noposter { grid-template-columns: minmax(0, 1fr); }
.sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 18px; color: var(--muted); }
.sub span:first-child:not(:only-child) { flex-basis: 100%; }

.summarywrap { margin: 0 0 16px; max-width: 68ch; }
.summary { margin: 0; color: color-mix(in srgb, var(--text) 88%, var(--muted)); text-wrap: pretty; }
.summary.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.summaryfoot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.morebtn { padding: 6px 0; border: 0; background: none; color: var(--text); font-weight: 600; font-size: 0.875rem;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.morebtn:hover { text-decoration-color: var(--marquee); }
.credit { color: var(--faint); font-size: 0.7188rem; text-decoration: none; }
.credit:hover { color: var(--muted); }

.ratings { margin: 0 0 18px; }
.scores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.score {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: border-color .15s;
}
a.score:hover { border-color: var(--marquee); }
.sv { font: 800 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
/* Score bands: a thin meter along the bottom, filled to the score, colored by band. */
.score { position: relative; overflow: hidden; }
.score .meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.score .meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--band); border-radius: 0 2px 2px 0; }
.score.great { --band: var(--sc-great); } .score.good { --band: var(--sc-good); }
.score.mixed { --band: var(--sc-mixed); } .score.poor { --band: var(--sc-poor); }
.score.great .sv, .score.poor .sv { color: var(--band); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sn { color: var(--muted); font-size: 0.8125rem; }
.lookup { margin: 0; color: var(--faint); font-size: 0.75rem; }
.lookup a { color: var(--muted); }
.lookup a:hover { color: var(--text); }

.filming {
  display: grid; gap: 6px; padding: 14px 16px; margin: 0 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 600;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ok .pill { color: var(--good); }
.none .pill { color: var(--warn); }
.filming details { color: var(--muted); font-size: 0.875rem; }
.filming summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.filming summary:hover { color: var(--text); }
.filming blockquote {
  margin: 8px 0; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font-style: normal;
}

.chip {
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: var(--marquee); }
.seasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.seasons .chip { position: relative; min-width: 48px; padding: 0 14px; font-weight: 500; }
.seasons .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.seasons .dot { position: absolute; top: 5px; right: 6px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.legend { margin: 0 0 18px; }
.legend .dot { margin-right: 7px; vertical-align: 2px; }

.tools { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.tools label { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.875rem; }
.tools select {
  min-height: 40px; padding: 0 34px 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9a2b9' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
  appearance: none;
}

/* ------------------------------------------------------------------ TV backdrop */
#film { position: relative; isolation: isolate; }
.backdrop {
  position: absolute; z-index: -1; top: calc(-1 * var(--bar-h, 76px)); left: 50%; width: 100vw; translate: -50% 0;
  height: clamp(320px, 52vw, 560px); overflow: hidden; pointer-events: none;
}
.backdrop img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
/* A poster used as a backdrop: blurred and enlarged so it reads as colour and mood. */
.backdrop.soft img { filter: blur(22px) saturate(1.2); scale: 1.25; object-position: center 25%; opacity: .34; }
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 45%, transparent 100%);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .backdrop img { opacity: .28; } }
:root[data-theme="light"] .backdrop img { opacity: .28; }

/* ------------------------------------------------------------------ age chart */
.agechart { position: relative; margin: 0 0 24px; padding: 14px 16px 10px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); }
.agechart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.ac-title { font: 800 1.25rem/1 var(--display); }
.ac-legend { display: flex; gap: 14px; color: var(--muted); font-size: 0.8125rem; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 50%; }
.sw.dot { background: var(--c-actor); }
.sw.ring { border: 2px solid var(--c-char); }
.ac-plot { position: relative; display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
  grid-template-rows: repeat(var(--rows), 28px) 22px; column-gap: 12px; }
.ac-name { grid-column: 1; align-self: center; font-size: 0.8438rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.ac-track { grid-column: 2; position: relative; align-self: stretch; border-radius: 6px; outline-offset: 0; }
.ac-track:hover, .ac-track:focus-visible { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ac-grid { grid-column: 2; grid-row: 1 / span var(--rows); position: relative; pointer-events: none; }
.ac-grid span { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.ac-axis { grid-column: 2; grid-row: calc(var(--rows) + 1); position: relative; }
.ac-axis span { position: absolute; top: 4px; translate: -50% 0; color: var(--faint); font-size: 0.7188rem; font-variant-numeric: tabular-nums; }
.ac-dot, .ac-char { position: absolute; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; }
.ac-dot { background: var(--c-actor); box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.ac-char { border: 2px solid var(--c-char); background: var(--surface); z-index: 1; }
.ac-link { position: absolute; top: 50%; height: 2px; translate: 0 -50%; background: color-mix(in srgb, var(--c-char) 55%, transparent); }
.ac-tip {
  position: absolute; z-index: 5; max-width: 260px; padding: 7px 10px; translate: 0 -100%; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
  font-size: 0.8125rem; color: var(--text);
}
@media (max-width: 560px) {
  .ac-plot { grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr); column-gap: 8px; }
  .agechart { padding: 12px 12px 8px; }
}

/* ------------------------------------------------------------------ key facts bar */
.keybar {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 22px; container: keybar / inline-size;
}
/* The season's filming/premiere note sits under the tiles, full width of the bar. */
.keybar > .filming { flex: 1 1 100%; margin: 0; }
.keys {
  flex: 1; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.key { padding: 12px 14px; min-width: 0; }
.key + .key { box-shadow: -1px 0 0 var(--line); }
.key dt { color: var(--muted); font-size: 0.8125rem; }
/* Long values (names) wrap onto a second line rather than being cut off. */
/* No clamp or overflow clipping here: Safari slices the descenders of this tall display font
   (the g in Minghella) at the line box. Long values simply wrap. */
.key dd { margin: 4px 0 0; font: 800 1.875rem/1.2 var(--display); letter-spacing: .01em; overflow-wrap: break-word; }
.key dd .more { margin-left: .35em; padding: 0 .4em; font: inherit; font-size: .6em; line-height: 1.5; vertical-align: .15em; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.key dd .more:hover, .key dd .more:focus-visible { border-color: var(--marquee); color: var(--marquee); }
.key.accent dd { color: var(--marquee); }
.key.muted dd { color: var(--faint); }
.ks { display: block; margin-top: 4px; color: var(--muted); font-size: 0.7812rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detailsbtn {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 96px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.875rem;
  transition: border-color .15s;
}
.detailsbtn:hover { border-color: var(--marquee); }
/* Five or six tiles on a wide bar: rows of three rather than cramped columns. */
@container keybar (min-width: 701px) {
  .keys:has(> .key:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
  .keys:has(> .key:nth-child(5)) .key:nth-child(n + 4) { border-top: 1px solid var(--line); }
  /* Seven or more pinned: rows of four. */
  .keys:has(> .key:nth-child(7)) { grid-template-columns: repeat(4, 1fr); }
  .keys:has(> .key:nth-child(7)) .key:nth-child(n + 4) { border-top: 0; }
  .keys:has(> .key:nth-child(7)) .key:nth-child(n + 5) { border-top: 1px solid var(--line); }
  /* A short last row: the last tile stretches to fill it. */
  .keys:has(> .key:nth-child(5)):not(:has(> .key:nth-child(7))) .key:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .keys:has(> .key:nth-child(7)) .key:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
/* Narrow bar (tablets, side panes, phones): numbers 2 x 2, button full width beneath. */
@container keybar (max-width: 700px) {
  .keys { grid-template-columns: 1fr 1fr; }
  .key + .key { box-shadow: none; }
  .key:nth-child(even) { box-shadow: -1px 0 0 var(--line); }
  .key:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .key:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container keybar (max-width: 560px) {
  .key dd { font-size: 1.625rem; }
}
.detailsbtn .n {
  min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
  color: var(--muted); font-size: 0.75rem; font-weight: 600;
}

/* ------------------------------------------------------------------ details sheet */
html.sheet-open { overflow: hidden; }
.sheet {
  margin: 0 0 0 auto; padding: 0; border: 0; max-height: 100dvh; height: 100dvh; width: min(440px, 100vw);
  background: var(--bg); color: var(--text); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgb(8 6 14 / .55); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheet-in-side .22s cubic-bezier(.2,.8,.2,1); }
.sheet[open]::backdrop { animation: fade .22s ease; }
@keyframes sheet-in-side { from { translate: 40px 0; opacity: 0; } }
@keyframes sheet-in-up { from { translate: 0 60px; opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheethead {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 20px 14px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.sheethead h3 { margin: 0; font: 800 2rem/1 var(--display); text-wrap: balance; }
.sheethead p { margin: 4px 0 0; color: var(--muted); font-size: 0.875rem; }
.close {
  flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
}
.close span::before, .close span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; border-radius: 2px;
  background: var(--text); translate: -50% -50%; rotate: 45deg;
}
.close span::after { rotate: -45deg; }
.close:hover { border-color: var(--marquee); }
.dgroup { padding: 14px 20px 2px; }
.dgroup + .dgroup { border-top: 1px solid var(--line); }
.dgroup h4 { margin: 0 0 2px; font: 800 1.25rem/1 var(--display); color: var(--muted); }
.dlist { margin: 0; padding: 0; }
.drow {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.drow:last-child { border-bottom: 0; }
.drow dt { color: var(--muted); font-size: 0.875rem; }
.drow dd { margin: 0; display: grid; gap: 2px; }
.dv { font-weight: 600; overflow-wrap: anywhere; }
.dv a { color: var(--text); }
.drow.accent .dv { color: var(--marquee); }
.ds { color: var(--muted); font-size: 0.8125rem; }
.sheet .src { padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
.src { margin: 10px 0 0; color: var(--faint); font-size: 0.7188rem; }

/* ------------------------------------------------------------------ cast list */
.cast { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.row, .head {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; gap: 12px; align-items: center;
}
.cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 5.5rem; }
.head { padding: 6px 0 8px; color: var(--muted); font-size: 0.8125rem; border-bottom: 1px solid var(--line); }
.head span:not(:first-child), .age, .gapcell { text-align: right; }
.row { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.row:last-child { border-bottom: 0; }

.who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.whotext { min-width: 0; display: grid; gap: 1px; }
.who strong { font-weight: 700; overflow-wrap: anywhere; }
.whotext span { color: var(--muted); font-size: 0.9062rem; overflow-wrap: anywhere; }
/* The actor's name leads: full-strength text and larger, over the muted character line. (The
   name sits in a span.nameline, which the muted rule above would otherwise catch.) */
.whotext span.nameline { color: var(--text); font-size: 1.1875rem; }

.avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.avatar.none { color: var(--muted); font-size: 0.875rem; font-weight: 600; }

/* The loud element: ages in marquee numerals. */
.age {
  font: 800 2.125rem/1 var(--display); color: var(--marquee); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.age.rng { font-size: 1.625rem; }
.age.none { color: var(--faint); font-weight: 600; }
.cast .age + .age { color: color-mix(in srgb, var(--marquee) 55%, var(--muted)); font-size: 1.625rem; }
.cast .age + .age.rng { font-size: 1.375rem; }

.gapcell { font: 800 1.625rem/1 var(--display); font-variant-numeric: tabular-nums; }
.gapcell small { display: block; margin-top: 3px; font: 500 0.75rem/1.2 var(--body); color: var(--muted); }
.gapcell.older { color: var(--marquee); }
.gapcell.younger { color: var(--younger); }

.note { color: var(--muted); font-size: 0.875rem; margin: 14px 0 0; max-width: 70ch; }

/* ------------------------------------------------------------------ season grid */
.gridwrap {
  overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.seasongrid { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.seasongrid th, .seasongrid td {
  padding: 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.seasongrid tbody tr:last-child > * { border-bottom: 0; }
.seasongrid thead th { padding-top: 10px; padding-bottom: 10px; }
.seasongrid thead th { color: var(--muted); font-size: 0.8125rem; font-weight: 500; border-bottom-color: var(--line); }
.seasongrid .name {
  position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 400; background: var(--bg);
}
@media (max-width: 760px) { .seasongrid .name { box-shadow: 1px 0 0 var(--line); } }
.seasongrid .name { min-width: 17rem; max-width: 17rem; padding-left: 0; }
.seasongrid td, .seasongrid thead th:not(.name) { min-width: 3.75rem; }
.seasongrid .whotext { min-width: 0; }
.seasongrid .whotext span:not(.nameline) { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seasongrid .avatar { width: 48px; height: 48px; }
.seasongrid .who { gap: 14px; }
.seasongrid td { font: 800 1.625rem/1 var(--display); color: var(--marquee); }
.seasongrid td.rng { font-size: 1.25rem; }
.seasongrid td.none { color: var(--faint); font-weight: 600; }
.seasongrid tbody tr:hover > * { background: color-mix(in srgb, var(--surface-2) 60%, var(--bg)); }
.colbtn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 8px;
  border: 0; border-radius: 999px; background: none; color: var(--text); font-weight: 600;
}
.colbtn:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ loading */
.sk {
  display: block; height: 12px; border-radius: 999px; background: var(--surface-2);
  animation: bulb 1.4s ease-in-out infinite;
}
.whotext .sk + .sk { height: 10px; margin-top: 6px; }
.row > .sk { justify-self: end; height: 26px; }
.avatar.sk { height: 48px; border-radius: 50%; }
.skh { color: var(--faint); }

/* ------------------------------------------------------------------ tip card */
.tipcard { position: relative; display: flex; align-items: center; gap: 16px; margin: 28px 0 8px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(90deg, rgb(244 183 64 / .08), transparent 60%), var(--surface); }
.tipcard .cup { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(244 183 64 / .14); }
.tipcard .cup img { width: 26px; height: 26px; }
.tipcard .tx { flex: 1; min-width: 0; padding-right: 14px; }
.tipcard .tx b { display: block; color: var(--text); font: 600 1rem/1.3 var(--body); }
.tipcard .tx span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.4; margin-top: 2px; }
.tipcard a { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--marquee); color: #1b1408;
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.tipcard a:hover { filter: brightness(1.06); }
.tipcard .x { position: absolute; top: 6px; right: 8px; padding: 4px 6px; border: 0; background: none;
  color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.tipcard .x:hover { color: var(--muted); }
@media (max-width: 560px) {
  .tipcard { flex-wrap: wrap; align-items: flex-start; padding: 16px; }
  .tipcard .tx { flex-basis: calc(100% - 56px); }
  .tipcard a { flex: 1; margin-left: 56px; text-align: center; }
}

/* ------------------------------------------------------------------ footer */
footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 56px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--faint); font-size: 0.7188rem;
}
footer nav { display: flex; gap: 14px; }
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--muted); }
footer .kofi { display: inline-flex; align-items: center; gap: 0.45em; }
footer .kofi img { width: 1.45em; height: 1.45em; position: relative; top: -0.25em; }
footer .data { margin-left: auto; }
footer > span:first-child a { margin: 0 0.2em; }

/* ------------------------------------------------------------------ lists */
.homelists { margin-bottom: var(--sgap, 40px); }
.listcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lcwrap > a {
  display: grid; gap: 6px; height: 100%; padding: 16px 18px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .15s;
}
.lcwrap > a { grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; }
.lcwrap > a:hover { border-color: var(--marquee); }
.lc-icon {
  grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--surface-2); color: var(--marquee);
}
.lc-icon svg { width: 26px; height: 26px; }
.lcwrap > a:hover .lc-icon { background: color-mix(in srgb, var(--marquee) 18%, var(--surface-2)); }
.lc-title { font: 800 1.5rem/1.05 var(--display); }
.lc-blurb { color: var(--muted); font-size: 0.875rem; }
.lc-count { color: var(--faint); font-size: 0.7812rem; align-self: end; }
.listpage { padding-top: 8px; }
.listpage h2 { margin: 8px 0 6px; font: 800 clamp(2.25rem, 6vw, 3.75rem)/1 var(--display); text-wrap: balance; }
.listpage .lede.small { font-size: 1.0312rem; margin-bottom: 8px; }
.back { display: inline-block; color: var(--muted); font-size: 0.875rem; }
.listpage > a { text-decoration: none; }
.pstats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 16px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pchip b { color: var(--marquee); font-weight: 800; }
.pnote { color: var(--faint); font-size: 0.8125rem; }
.listmeta { margin: 2px 0 14px; color: var(--faint); font-size: 0.8125rem; }
.listtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.segbtn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 500; }
.segbtn.on { background: var(--text); color: var(--bg); }
.sortlab { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); font-size: 0.875rem; }
.sortlab select {
  min-height: 38px; padding: 0 34px 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9a2b9' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
  appearance: none;
}
/* ------------------------------------------------------------------ tropes */
.lc-icon.emo { font-size: 22px; line-height: 1; }
.lc-count.data { color: var(--marquee); }
.tropes .genrechips { margin: 14px 0 4px; }
.tcat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 24px 0 10px; }
.tcat h3 { margin: 0; font: 800 1.5rem/1 var(--display); }
.tcat em { font-style: normal; color: var(--faint); font-size: 0.8125rem; }
.tmore { color: var(--muted); font-size: 0.875rem; }
.trendhead a { text-decoration: none; }
.trendhead a:hover .tmore { color: var(--marquee); }
.tkicker { margin: 18px 0 0; color: var(--faint); font-size: 0.875rem; }
.texamples { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.texamples li { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.texamples a { color: var(--text); text-decoration: none; font-size: 1.0625rem; }
.texamples a:hover b { color: var(--marquee); }
.texamples .yr { color: var(--faint); font-weight: 400; }
.texamples p { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; }
.tseen { margin-top: 18px; color: var(--faint); font-size: 0.875rem; }
.tseen a { color: var(--muted); }
.tropecards .lcwrap { position: relative; }
.tvote {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 0.8125rem; font-weight: 600;
}
.tvote:hover { border-color: var(--marquee); color: var(--text); }
.tvote.on { border-color: var(--marquee); background: color-mix(in srgb, var(--marquee) 18%, var(--surface)); color: var(--text); }
.tropecards .tvote { position: absolute; right: 12px; bottom: 12px; }
.tvote.big { min-height: 40px; padding: 0 16px; margin-top: 8px; font-size: 0.9375rem; }
.tvote.big .n { padding-left: 9px; border-left: 1px solid var(--line); }
.spotted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 0.8438rem; }
.spotted .lab { color: var(--faint); }
.spotted a { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; }
.spotted a:hover { border-color: var(--marquee); color: var(--text); }
@media (max-width: 560px) {
  /* 54 tall cards is a lot of scrolling on a phone: one compact row per trope. */
  .tropecards { gap: 6px; }
  .tropecards .lcwrap > a { grid-template-rows: auto auto; padding: 10px 12px; row-gap: 2px; }
  .tropecards .lc-icon { grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  .tropecards .lc-title { font-size: 1.1875rem; }
  .tropecards .lc-blurb { font-size: 0.8125rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .tropecards .lc-count { display: none; }
  .tropecards .lcwrap > a { padding-right: 70px; }
  .tropecards .tvote { bottom: auto; top: 50%; transform: translateY(-50%); right: 10px; }
}

.lgroup + .lgroup { margin-top: 26px; }
.lgroup h3 { margin: 0 0 4px; font: 800 1.5rem/1 var(--display); }
.lgroup .note { margin: 0 0 6px; }

.toplist { list-style: none; margin: 0; padding: 0; }
.lrow {
  display: grid; grid-template-columns: 2rem 40px minmax(0, 1fr) 10.5rem 5.5rem; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  counter-increment: rank;
}
.toplist:not(.unranked) .lrow::before { content: ""; }
/* The rank sits in the row's first column but on the title's line: drawn from the title row with
   only a left offset, so it sits on the title's first line wherever the row's content is placed. */
.toplist:not(.unranked) .lrow { position: relative; --rankw: 2rem; }
.toplist:not(.unranked) .lrow .lr-top::before {
  content: counter(rank); position: absolute; left: 0; width: var(--rankw); box-sizing: border-box; align-self: flex-start; margin-top: 2px;
  color: var(--muted); font: 800 1.25rem/1 var(--display); text-align: right; padding-right: 0.3rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .toplist:not(.unranked) .lrow { --rankw: 1.4rem; } }
.lrow > .avatar { width: 40px; height: 40px; }
.lrow.grow { grid-template-columns: 2rem 40px minmax(0, 1fr) auto 8.5rem; }
/* On laptops the age range moves out of the card to its left; phones keep it inside. */
.lrow.grow .lr-age.wide { padding-right: 0.5rem; }
.lrow.grow .lr-badge.span .span-big { display: none; }
.lrow.bp { grid-template-columns: 3.2rem minmax(0, 1fr) 8.5rem 8.5rem; }
.lrow.gen { grid-template-columns: 2rem minmax(0, 1fr) 6.5rem; align-items: start; }
.lrow.gen::before, .lrow.gen .lr-badge { margin-top: 2px; }
/* The rating badge sits at the bottom of every list row, on laptops as on phones. */
.lrow.gen .lr-badge { align-self: end; margin-top: 0; margin-bottom: 2px; }
/* Sit the rank numeral on the same baseline as the title beside it. */
.lrow.gen::before { margin-top: 3.7px; }
/* Profit rows: the return badge sits at the bottom of the row. */
.lrow.gen.profit .lr-badge { align-self: end; margin-top: 0; margin-bottom: 2px; }
.lrow.gen .yr { flex: none; color: var(--faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.lrow.gen .lr-sub b { color: var(--marquee); font-weight: 600; }
/* Awards under a film in the most-awarded list: chips that open to category names. */
.awd { margin-top: 2px; }
.awd summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  min-height: 36px; border-radius: var(--r-sm); }
.awd summary::-webkit-details-marker { display: none; }
.awd summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  rotate: 45deg; translate: 0 -2px; transition: rotate .18s ease; }
.awd[open] summary::after { rotate: 225deg; translate: 0 2px; }
.awd summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.awd-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.awd-chip { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--marquee) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--marquee) 26%, transparent);
  color: var(--text); font-size: 0.75rem; white-space: nowrap; }
.awd-chip b { color: var(--marquee); font-weight: 700; font-variant-numeric: tabular-nums; }
.awd-chip.dim { background: none; border-color: var(--line); color: var(--muted); }
.awd-list { margin: 4px 0 6px; padding: 10px 12px; display: grid; gap: 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.awd-list dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.awd-list dt span { color: var(--marquee); }
.awd-list dd { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--text); }
.genrechips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.genrechips .chip { min-height: 36px; padding: 0 14px; font-weight: 500; }
.genrechips .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.year { font: 800 1.375rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lr-main { display: grid; gap: 2px; min-width: 0; }
.lr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-top strong { font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.lr-top strong a { color: var(--text); }
.lr-sub { color: var(--muted); font-size: 0.8438rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.lr-sub a { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.tag { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.7188rem; font-weight: 500; }
.lr-age { display: grid; justify-items: end; text-align: right; gap: 2px; min-width: 0; }
.lr-age .big { font: 800 1.875rem/1 var(--display); color: var(--marquee); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-age.post .small { font-style: italic; line-height: 1.25; }
.lr-age .big.dim { color: color-mix(in srgb, var(--marquee) 55%, var(--muted)); }
.lr-age .small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lr-badge {
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--marquee) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--marquee) 30%, transparent);
  font: 800 1.375rem/1 var(--display); color: var(--text);
}
.lr-badge small { font: 500 0.6875rem/1.1 var(--body); color: var(--muted); }
/* Kids who grew up on screen: age at season 1 to age at the last season, then years and seasons. */
.lr-badge.span .span-big { font: 800 1.375rem/1 var(--display); white-space: nowrap; }
.lr-badge.span .span-big i { font-style: normal; color: var(--faint); margin: 0 .2em; font-size: .85em; }
.lr-badge.span small { line-height: 1.25; }
.lr-badge.none { background: none; border-color: var(--line); color: var(--faint); }
@media (max-width: 560px) {
  .lrow { grid-template-columns: 1.4rem 34px minmax(0, 1fr) auto; gap: 9px; }
  .lrow > .avatar { width: 34px; height: 34px; }
  .lr-badge { display: none; }
  .lrow.grow { grid-template-columns: 1.4rem 34px minmax(0, 1fr) 6.6rem; }
  .lrow.grow .lr-age.wide { display: none; }
  .lrow.grow .lr-badge.span .span-big { display: block; }
  .lrow.grow .lr-badge { display: grid; }
  .lrow.bp { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .lrow.bp .lr-age:last-child { display: none; }
  .lrow.gen { grid-template-columns: 1.4rem minmax(0, 1fr) 4.2rem; }
  .lrow.gen .lr-badge { display: grid; font-size: 1.125rem; align-self: end; margin-top: 0; margin-bottom: 2px; }
  .lrow.gen .lr-badge small { font-size: 0.625rem; }
  .genrechips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scrollbar-width: none; }
  .genrechips .chip { flex: none; }
  .lr-age .big { font-size: 1.5rem; }
  .lrow:not(.bp) > .lr-age { margin-right: 0.6rem; }
  .lr-top .tag { display: none; }
  .sortlab { margin-left: 0; }
}

/* ------------------------------------------------------------------ text pages (credits, terms, privacy) */
.doc { max-width: 68ch; padding: clamp(24px, 5vw, 48px) 0 8px; }
.doc h1 { margin: 0 0 6px; font: 800 clamp(2.5rem, 6vw, 3.75rem)/1 var(--display); }
.doc .updated { margin: 0 0 28px; color: var(--faint); font-size: 0.8125rem; }
.doc h2 { margin: 30px 0 8px; font: 800 1.5rem/1.1 var(--display); }
.doc p, .doc li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--text); }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 560px) {
  .bar { gap: 12px; }
  .brand { font-size: 0; gap: 0; }        /* keep only the bulb mark */
  .gear { width: 44px; height: 44px; }
  .settings { top: 64px; right: 16px; }
  .mark { width: 30px; height: 30px; }
  #film { padding-top: 12px; }
  .titlerow { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .titlerow.noposter { grid-template-columns: minmax(0, 1fr); }
  .titletext h2 { font-size: 2.125rem; }
  .titletext .sub { font-size: 0.875rem; }
  .titletext .scores { gap: 6px; }
  .titletext .score { min-height: 36px; padding: 5px 10px; }
  .titletext .sv { font-size: 1.25rem; }
  .titletext .lookup { display: none; }
  .row, .head { gap: 10px; grid-template-columns: minmax(0, 1fr) 3.2rem 3.2rem; }
  .cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 3rem 3rem 3.8rem; }
  .avatar { width: 40px; height: 40px; }
  .who { gap: 10px; }
  .age { font-size: 1.75rem; }
  .cast .age + .age { font-size: 1.375rem; }
  .gapcell { font-size: 1.375rem; }
  /* Key facts: Details button full width beneath the numbers. */
  .keybar { flex-direction: column; gap: 8px; }
  .detailsbtn { flex-direction: row; min-height: 44px; }
  /* Details open as a bottom sheet. */
  .sheet {
    margin: auto 0 0; width: 100vw; max-width: 100vw; height: auto; max-height: 88dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .sheet[open] { animation-name: sheet-in-up; }
  .sheethead { padding-top: 26px; }
  .sheethead::before {
    content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0;
    width: 40px; height: 4px; border-radius: 4px; background: var(--line);
  }
  .drow { grid-template-columns: 8rem minmax(0, 1fr); }
  /* Season grid: a slim name column so several seasons fit beside it. */
  .seasongrid th, .seasongrid td { padding: 9px 8px; }
  .seasongrid .name { min-width: 7.5rem; max-width: 9.5rem; }
  .seasongrid td, .seasongrid thead th:not(.name) { min-width: 0; }
  .seasongrid .who { gap: 8px; }
  .seasongrid .avatar { width: 30px; height: 30px; }
  .seasongrid .whotext strong { font-size: 0.875rem; line-height: 1.3; white-space: normal; overflow-wrap: break-word; }
  .seasongrid .whotext span:not(.nameline) { display: none; }
  .seasongrid td { font-size: 1.375rem; }
  .seasongrid td.rng { font-size: 1.0625rem; }
  .colbtn { padding: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* Cast rows: name line with tags, filming age with the release age under it on phones. */
.nameline { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.nameline .tag.young { background: color-mix(in srgb, var(--marquee) 18%, var(--surface-2)); color: var(--text); }
.nameline .tag.old { background: var(--surface-2); color: var(--text); }
.agestack { display: grid; justify-items: end; gap: 3px; }
.relsub { display: none; color: var(--muted); font-size: 0.7188rem; white-space: nowrap; }
@media (max-width: 560px) {
  .cast .row > .age:nth-child(3), .cast .head span:nth-child(3) { display: none; }
  .cast .row, .cast .head { grid-template-columns: minmax(0, 1fr) 5.6rem; }
  .cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 5.6rem 3.8rem; }
  /* "37–38 at release" is wider than the numeral above it: let it wrap inside the column. */
  .relsub { display: block; white-space: normal; text-align: right; line-height: 1.15; max-width: 100%; }
  .cast .head span:nth-child(2) { text-align: right; }
}

/* ------------------------------------------------------------------ more settings */
/* Reduce motion: the device setting above, or the switch in the settings menu. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* High contrast: stronger secondary text and borders, on whichever theme is showing. */
:root[data-contrast="high"] { --muted: #d9d3e6; --faint: #b9b2cc; --line: #6f6888; }
@media (prefers-color-scheme: light) {
  :root[data-contrast="high"]:not([data-theme="dark"]) { --muted: #36304a; --faint: #4d4763; --line: #7a7390; }
}
:root[data-theme="light"][data-contrast="high"] { --muted: #36304a; --faint: #4d4763; --line: #7a7390; }
:root[data-contrast="high"] .row { border-bottom-color: var(--line); }

/* Compact rows. */
.cast.compact .row { padding: 6px 0; }
.cast.compact .avatar { width: 32px; height: 32px; }
.cast.compact .who { gap: 10px; }
.cast.compact .age { font-size: 1.375rem; }
.cast.compact .age.rng { font-size: 1.125rem; }
.cast.compact .age + .age { font-size: 1.25rem; }
.cast.compact .gapcell { font-size: 1.25rem; }
.cast.compact .whotext span { font-size: 0.78rem; }
.cast.compact .whotext span.nameline { font-size: 0.9688rem; }

/* Without the release column. */
.cast.norel .row, .cast.norel .head { grid-template-columns: minmax(0, 1fr) 4.5rem; }
.cast.norel.hasgap .row, .cast.norel.hasgap .head { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; }
.cast.norel .relsub { display: none; }

/* Ages with months are wider. */
:root[data-agefmt="months"] .age { font-size: 1.25rem; }
:root[data-agefmt="months"] .age.rng { font-size: 1.125rem; }
:root[data-agefmt="months"] .seasongrid td { font-size: 1.0625rem; }
:root[data-agefmt="months"] .key dd { font-size: 1.5rem; }
:root[data-agefmt="months"] .cast .age + .age { font-size: 1.125rem; }
:root[data-agefmt="months"] .cast { --agew: 5.5rem; }
:root[data-agefmt="months"] .cast .row, :root[data-agefmt="months"] .cast .head { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem; }
:root[data-agefmt="months"] .cast.hasgap .row, :root[data-agefmt="months"] .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 5.5rem; }
:root[data-agefmt="months"] .cast.norel .row, :root[data-agefmt="months"] .cast.norel .head { grid-template-columns: minmax(0, 1fr) 5.5rem; }
:root[data-agefmt="months"] .cast.norel.hasgap .row, :root[data-agefmt="months"] .cast.norel.hasgap .head { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem; }
@media (max-width: 560px) {
  :root[data-agefmt="months"] .cast .row, :root[data-agefmt="months"] .cast .head { grid-template-columns: minmax(0, 1fr) 5rem; }
  :root[data-agefmt="months"] .cast.hasgap .row, :root[data-agefmt="months"] .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 5rem 3.8rem; }
}


/* Settings menu: grouped, scrolls on short screens, text size and theme as button rows. */
.settings { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
.setgroup { margin: 12px 8px 2px; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; }
.sizerow .sizes.three { grid-template-columns: repeat(3, 1fr); }
.sizerow .sizes.tx4 { grid-template-columns: repeat(2, 1fr); } /* four word buttons: two by two */
.sizerow .sizes.two { grid-template-columns: repeat(2, 1fr); }
.sizebtn.txt { font: 600 0.875rem/1 var(--body); }
.setselect { min-height: 40px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-size: 0.9375rem; }

/* Pin a fact to the key bar from the details sheet. */
.pinhelp { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 20px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 0.8125rem; color: var(--muted); }
.pinhelp strong { display: block; color: var(--text); font-size: 0.9375rem; }
.pinhelp p { margin: 2px 0 0; }
.pinstar { color: var(--marquee); font-size: 1rem; line-height: 1; }
.pinside { display: grid; justify-items: end; gap: 4px; flex: none; }
.pincount { color: var(--marquee); font-weight: 700; white-space: nowrap; }
.pinhelp .morebtn { padding: 0; font-size: 0.8125rem; color: var(--muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pinhelp .morebtn[hidden] { display: none; }
.pinhelp .morebtn:hover { color: var(--text); }
.drow { position: relative; }
.pin { position: absolute; right: 0; top: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pin svg { width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linejoin: round; }
.pin:hover svg { stroke: var(--text); }
.pin[aria-pressed="true"] svg { fill: var(--marquee); stroke: var(--marquee); }
.pin:disabled { cursor: not-allowed; opacity: .4; }
.pin:focus-visible { outline: 2px solid var(--marquee); }
.drow dd { padding-right: 34px; }

/* ------------------------------------------------------------------ wide screens
   Page is 1200px wide. Film pages and all-seasons TV pages put the key facts in a sticky left column
   and the cast on the right; other pages stay one column, capped so rows stay readable. */
#film:not(.wide2) .tools, #film:not(.wide2) .cast, #film:not(.wide2) .note { max-width: 880px; }
@media (min-width: 1040px) {
  #film.wide2:has(> .keybar) { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  #film.wide2:has(> .keybar) > .filmhead { grid-column: 1 / -1; }
  #film.wide2:has(> .keybar) > .keybar { grid-column: 1; grid-row: 2 / span 8; position: sticky; top: 88px; flex-direction: column; gap: 8px; }
  #film.wide2:has(> .keybar) > .keybar .key dd { font-size: 1.25rem; }
  #film.wide2:has(> .keybar) > .keybar .detailsbtn { flex-direction: row; min-height: 44px; }
  #film.wide2:has(> .keybar) > :not(.filmhead):not(.keybar):not(.backdrop) { grid-column: 2; min-width: 0; }
  /* Start the key facts level with the top of the cast heading text, which sits under the Sort control
     (the list heading has 6px padding, the season table 10px, so the tiles drop by that much). */
  #film.wide2:has(> .keybar):not(:has(> .agechart)) > .keybar { margin-top: 58px; }
  /* Single-season and film cast lists sit at the same height as the All seasons grid. */
  #film.wide2:has(> .keybar):not(:has(> .agechart)):not(:has(> .gridwrap)) > .cast .head { box-sizing: border-box; min-height: 53px; padding: 10px 0; }
  #film.wide2:has(> .keybar):not(:has(> .agechart)):has(> .gridwrap) > .keybar { margin-top: 58px; }
  #film.wide2:has(> .keybar) > .tools { height: 40px; }
}

/* Footer on phones: a centred stack (links, sources, copyright) instead of a ragged wrapped row. */
@media (max-width: 560px) {
  footer { flex-direction: column; align-items: center; gap: 10px; margin-top: 44px; padding: 20px 0 28px;
    text-align: center; font-size: 0.8125rem; line-height: 1.5; }
  footer nav { order: 1; gap: 8px; flex-wrap: wrap; justify-content: center; }
  footer nav a { color: var(--muted); padding: 8px 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
  footer .data { order: 2; margin-left: 0; max-width: 26ch; text-wrap: balance; }
  footer .data a { text-decoration: underline; text-underline-offset: 2px; }
  footer > span:first-child { order: 3; }
}

/* Share button: top right of a title or list page. */
.sharebtn { display: inline-flex; align-items: center; gap: 6px; font: 600 0.8125rem/1 var(--body); color: var(--text);
  background: transparent; border: 1.5px solid var(--text); border-radius: 999px; padding: 7px 12px; cursor: pointer; float: right; margin: 0 0 8px 12px; }
.sharebtn svg { width: 16px; height: 16px; }
.sharebtn:hover, .sharebtn:focus-visible { background: var(--surface-2); }
.listtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listtop .sharebtn { float: none; margin: 0; }

/* A person's page. */
.phead { display: flex; align-items: center; gap: 16px; margin: 4px 0 8px; }
.phead .avatar { width: 72px; height: 72px; flex: none; }
.phead h2 { margin: 0; }
.phead .lede { margin: 4px 0 0; }
/* Age now (gold, like every age on the site), small beside the birthday; grey with the years lived for someone who has died. */
.lifebadge { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; padding: 1px 8px 0; border-radius: 999px; vertical-align: -1px;
  border: 1px solid color-mix(in srgb, var(--marquee) 45%, transparent); background: color-mix(in srgb, var(--marquee) 10%, transparent); line-height: 1.35; }
.lifebadge b { font: 800 1.05rem/1.2 var(--display); color: var(--marquee); }
.lifebadge.gone { border-color: var(--line); background: var(--surface); }
.lifebadge.gone b { color: var(--muted); }
.lifebadge i { font-style: normal; font-size: .78rem; color: var(--faint); }
/* A slightly smaller cake beside the birthday on actor pages, centered on the same spot as before. */
.phead .cake { width: 1.15em; height: 1.15em; vertical-align: -0.18em; }
.phead .bday { white-space: normal; }
.phead .bday > span:first-child, .lifebadge { white-space: nowrap; }
.lrow.cred { grid-template-columns: 3.2rem 72px minmax(0, 1fr) 5.5rem; align-items: center; }
.lrow.cred .yearcol { color: var(--faint); font: 800 1.125rem/1 var(--display); font-variant-numeric: tabular-nums; }
.lrow.cred .lr-age { align-self: center; }
.who-tag { font: 600 0.6875rem/1 var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; margin-right: 8px; }
.who strong a { color: inherit; text-decoration: none; }
.who strong a:hover, .who strong a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .lrow.cred { grid-template-columns: 2.6rem 60px minmax(0, 1fr) 4.2rem; } }

.lrow.kid { grid-template-columns: 2rem 40px minmax(0, 1fr) 6.5rem; }
@media (max-width: 560px) { .lrow.kid { grid-template-columns: 1.4rem 34px minmax(0, 1fr) auto; } }

/* Status tags: ended shows, and cast who have died. */
.tag.ended, .tag.died { background: transparent; border: 1px solid var(--faint); color: var(--muted); }
h2 .tag.ended { margin-left: 10px; vertical-align: middle; font-size: 0.75rem; }
.setfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.setreset { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: 600 0.8125rem/1 var(--body); padding: 8px 12px; cursor: pointer; }
.setreset:hover, .setreset:focus-visible { background: var(--surface-2); }
.setreset { flex: none; white-space: nowrap; }
.setreset.armed { border-color: #e5484d; color: #e5484d; }
.settings > .setnote { margin: 10px 10px 4px; }

/* Dragging a key-fact tile. */
.keys .key { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.keys .key .more { cursor: pointer; }
.keys.reordering { cursor: grabbing; }
.keys .key.dragging { position: relative; z-index: 5; cursor: grabbing; background: var(--surface-2); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: none; }

/* Trending period switch beside Shuffle. */
.trendtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.picks[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* Poster beside each credit on a person's page. */
.cposter { width: 72px; aspect-ratio: 2 / 3; border-radius: 5px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.cposter.none { display: grid; place-items: center; font: 800 1.125rem/1 var(--display); color: var(--muted); }
@media (max-width: 560px) { .cposter { width: 60px; } }

.bday { white-space: nowrap; }
.cake { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -0.28em; margin-right: .1em; color: var(--marquee); }
.cake svg { width: 100%; height: 100%; display: block; }

/* On phones the facts stack, one per line, instead of leaving a dot at the end of a line. */
@media (max-width: 560px) { .phead .sep { display: none; } .phead .fact { display: block; } }
.phead .sep { padding: 0 .35em; color: var(--faint); }

/* Click a poster on an actor's page to see it larger. */
.cpbtn { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; border-radius: 5px; }
.cpbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lightbox { border: 0; padding: 8px; border-radius: var(--r-md); background: var(--surface); color: var(--text); max-width: 96vw; max-height: 100dvh; cursor: zoom-out; }
.lightbox::backdrop { background: rgb(8 6 14 / .72); backdrop-filter: blur(3px); }
/* As big as the screen allows: nearly the full width, or the full height less room for the caption, whichever is smaller. */
.lightbox img { display: block; width: min(100vw - 32px, (100dvh - 92px) * 2 / 3); aspect-ratio: 2 / 3; height: auto; object-fit: contain;
  background: center / contain no-repeat; border-radius: 6px; }
.lbcap { margin: 10px 2px 0; font-size: .8125rem; color: var(--muted); }
.lbcap strong { color: var(--text); }
.lbcap a { color: var(--muted); }

/* The actor's photo is larger: 132px on laptops, 104px on phones. */
.phead .avatar { width: 104px; height: 104px; }
@media (min-width: 761px) { .phead { gap: 24px; } .phead .avatar { width: 132px; height: 132px; } }

/* Phones: Shuffle sits beside the heading; the period switch gets its own full-width row. */
@media (max-width: 560px) {
  .trendhead:has(#trendtabs) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .trendhead:has(#trendtabs) .trendtools { display: contents; }
  .trendhead:has(#trendtabs) #shuffle { grid-column: 2; grid-row: 1; }
  .trendhead:has(#trendtabs) #trendtabs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
  .trendhead:has(#trendtabs) #trendtabs button { padding-inline: 6px; white-space: nowrap; }
}

/* Numbers never break across lines. Ranges get a little less size and room on phones. */
.age, .gapcell, .lr-badge, .lr-badge .span-big { white-space: nowrap; }
@media (max-width: 560px) {
  .age.rng, .cast .age + .age.rng { font-size: 1.375rem; }
  .row, .head { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; }
  .cast.hasgap .row, .cast.hasgap .head { grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem 3.8rem; }
}

/* Show posters in list rows (longest-running shows). */
.lposter { width: 72px; aspect-ratio: 2 / 3; border-radius: 5px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.lposter.none { display: grid; place-items: center; font: 800 1.125rem/1 var(--display); color: var(--muted); }
.lrow.gen.pst { grid-template-columns: 2rem 72px minmax(0, 1fr) 6.5rem; align-items: center; }
.lrow.gen.pst::before { margin-top: 0; }
.lrow.gen.pst .lr-badge { align-self: center; margin-bottom: 0; }
@media (max-width: 560px) { .lrow.gen.pst { grid-template-columns: 1.4rem 60px minmax(0, 1fr) 4.2rem; } .lposter { width: 60px; } }
.lrow.bp.pst { grid-template-columns: 3.2rem 72px minmax(0, 1fr) 8.5rem 8.5rem; }
@media (max-width: 560px) { .lrow.bp.pst { grid-template-columns: 2.6rem 60px minmax(0, 1fr) auto; } }

/* Actor lists: the title's poster sits beside the actor's photo. */
.lrow.pst2 { grid-template-columns: 2rem 40px 72px minmax(0, 1fr) 10.5rem 5.5rem; }
.lrow.grow.pst2 { grid-template-columns: 2rem 40px 72px minmax(0, 1fr) auto 8.5rem; }
.lrow.kid.pst2 { grid-template-columns: 2rem 40px 72px minmax(0, 1fr) 6.5rem; }
.lrow.pst2 .lposter { width: 72px; }
@media (max-width: 560px) {
  .lrow.pst2 { grid-template-columns: 1.4rem 34px 60px minmax(0, 1fr) auto; }
  .lrow.grow.pst2 { grid-template-columns: 1.4rem 34px 60px minmax(0, 1fr) 6.6rem; }
  .lrow.kid.pst2 { grid-template-columns: 1.4rem 34px 60px minmax(0, 1fr) auto; }
  .lrow.pst2 .lposter { width: 60px; }
}

/* Actor page: the year of each film or show leads the row. */
.lrow.cred .yearcol { color: var(--text); font-size: 1.75rem; letter-spacing: .01em; }
.lrow.cred { grid-template-columns: 4.2rem 72px minmax(0,1fr) 5.5rem; }
@media (max-width: 560px) {
  .lrow.cred .yearcol { font-size: 1.375rem; }
  .lrow.cred { grid-template-columns: 3.2rem 60px minmax(0, 1fr) 4.2rem; }
}

/* Born today: actors with a birthday today. */
.borns { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
.bcard { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s; }
.bcard:hover { border-color: var(--marquee); }
.bphoto { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 22%; background: var(--surface-2); }
.bphoto.none { display: grid; place-items: center; font: 800 1.25rem/1 var(--display); color: var(--muted); }
.btext { min-width: 0; display: grid; gap: 2px; }
.btext strong { font-weight: 700; overflow-wrap: anywhere; }
.btext span { color: var(--marquee); font: 800 1rem/1 var(--display); }
@media (max-width: 560px) { .borns { grid-template-columns: 1fr; } .bphoto { width: 44px; height: 44px; } }
@media (min-width: 561px) { .borns { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .bphoto { width: 60px; height: 60px; } }

/* "Show all" under Born today. */
.bornmore { display: flex; justify-content: center; margin-top: 14px; }
.bornmore:empty { display: none; }
.bornmore button { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: 600 0.9375rem/1 var(--body); cursor: pointer; }
.bornmore button:hover { border-color: var(--marquee); }

/* A cake beside the name on someone's birthday: icon only, so it never crowds the youngest/oldest tag. */
.tag.bday { padding: 1px 5px; background: transparent; color: var(--marquee); line-height: 1; }
.tag.bday .cake { width: 1.15em; height: 1.15em; margin: 0; vertical-align: -0.2em; }
.btext span .cake { width: 1.1em; height: 1.1em; margin-right: 4px; vertical-align: -0.103em; } /* plate sits on the text baseline */
.btext .known { color: var(--muted); font: 500 0.75rem/1.3 var(--body); }
.btext .known em { font-style: normal; color: var(--text); }

/* Best-picture rows: show the full youngest/oldest names (wrap rather than cut off) */
.lrow.bp .lr-age .small { white-space: normal; overflow: visible; text-overflow: clip; }
@media (min-width: 900px) {
  .lrow.bp { grid-template-columns: 3.2rem minmax(0, 1fr) 15rem 15rem; }
  .lrow.bp.pst { grid-template-columns: 3.2rem 72px minmax(0, 1fr) 15rem 15rem; }
  .lrow.bp .lr-age .small { white-space: nowrap; }
}
.btext span { white-space: nowrap; }

.rangerow { align-items: flex-start; flex-direction: column; gap: 6px; }
.rangerow .setrange { width: 100%; accent-color: var(--marquee); margin: 0; }
.rangeval { margin-left: 8px; color: var(--muted); font-weight: 500; font-size: 0.8125rem; }

/* Settings section headers: a divider above each group, an accent dot, and the display face */
.setgroup, .sethead { display: flex; align-items: center; gap: 8px; margin: 14px 8px 4px; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--text); font: 800 0.9375rem/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.setgroup::before, .sethead::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marquee); flex: none; }
.sethead { margin-top: 4px; padding-top: 0; border-top: 0; }
/* Grouped settings: icon tile + title above a card holding that section's rows. */
.setgroup, .sethead { border-top: 0; padding-top: 0; margin: 20px 6px 8px; gap: 10px; text-transform: none; letter-spacing: .01em;
  font: 800 1.25rem/1 var(--display); }
.sethead { margin-top: 6px; }
.setgroup::before, .sethead::before { display: none; }
.shi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--marquee) 16%, var(--surface-2)); color: var(--marquee); }
.shi svg { width: 16px; height: 16px; }
.setcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 2px 4px; }
.setcard > * + * { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.setcard .setrow:hover { background: transparent; }

/* Watch trailer: an outlined pill beside the score pills. */
.trailerbtn { display: inline-flex; align-items: center; gap: 7px; align-self: stretch; padding: 0 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: 600 0.875rem/1 var(--body); text-decoration: none; transition: border-color .15s; }
.trailerbtn svg { width: 14px; height: 14px; color: var(--marquee); }
.trailerbtn:hover, .trailerbtn:focus-visible { border-color: var(--marquee); }

/* Trailer window: a big 16:9 player over the page; the player's own button goes full screen. */
.trailerbox { border: 0; padding: 12px; border-radius: var(--r-md); background: var(--surface); color: var(--text);
  width: min(96vw, 1000px); max-width: none; }
.trailerbox::backdrop { background: rgb(8 6 14 / .8); backdrop-filter: blur(3px); }
.tbhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.tbclose { font: 600 0.8125rem/1 var(--body); color: var(--text); background: transparent; border: 1.5px solid var(--text);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.tbclose:hover, .tbclose:focus-visible { background: var(--surface-2); }
.tbframe { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.tbframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Phone-only "← Home" link above film, show, actor and list pages */
.backhome { display: none; }
@media (max-width: 560px) {
  main:has(> #film:not([hidden])) .backhome { display: inline-block; margin: 14px 0 -6px; font-size: .9rem; color: var(--muted, #6b7280); text-decoration: none; }
}

/* Genre lists on phones: score on the title line, full-width text, award chips on one row. */
.lr-inscore { display: none; }
@media (max-width: 560px) {
  .lrow.genre, .lrow.genre.pst { grid-template-columns: 1.4rem 60px minmax(0, 1fr); align-items: start; }
  .lrow.genre:not(.pst) { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .lrow.genre > .lr-badge { display: none; }
  .lrow .lr-top:has(> .yr) { display: block; }
  .lrow .lr-top:has(> .yr) strong { display: inline; }
  .lrow .lr-top .yr { margin-left: 6px; }
  .lrow.genre .lr-inscore { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; }
  .lrow.genre .lr-inscore b { color: var(--marquee); font: 800 1rem/1 var(--display); }
  .lrow.genre .lr-sub { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .lrow.genre .lr-main, .lrow.genre .awd, .lrow.genre .awd summary { min-width: 0; }
  .lrow.genre .awd-chips { gap: 4px; }
  .lrow.genre .awd-chip { white-space: nowrap; padding: 2px 7px; font-size: 0.8125rem; }
}

/* Lists with posters: poster, title and number line up along the top; the score stays centered. */
.toplist .lrow.pst, .toplist .lrow.pst2 { align-items: start; }
.toplist .lrow.pst > .lr-badge, .toplist .lrow.pst2 > .lr-badge,
.toplist .lrow.pst > .lr-age, .toplist .lrow.pst2 > .lr-age { align-self: center; margin-top: 0; margin-bottom: 0; }
.toplist .lrow.pst > .lr-main, .toplist .lrow.pst2 > .lr-main { margin-top: -3px; }

/* Made-up poster for titles without one: deep two-tone color from the title, title set like a poster. */
.ptile.none {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 6px 5px 5px; box-sizing: border-box;
  place-items: initial; overflow: hidden; color: #fff; text-align: left;
  background:
    radial-gradient(120% 70% at 20% 0%, hsl(var(--ph) 70% 55% / .45), transparent 60%),
    linear-gradient(165deg, hsl(var(--ph) 45% 28%), hsl(calc(var(--ph) + 35) 50% 11%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 0 0 1px var(--line);
}
.ptile .pt-kind { font: 700 0.5rem/1 var(--body); letter-spacing: .12em; opacity: .7; }
.ptile .pt-title { font: 800 0.8125rem/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: normal; word-break: normal; hyphens: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.ptile .pt-year { font: 600 0.5625rem/1 var(--body); opacity: .75; font-variant-numeric: tabular-nums; }

.ptile.pt-long .pt-title { font-size: 0.6875rem; }
.ptile.pt-xlong .pt-title { font-size: 0.5625rem; }

/* Recently viewed: people get a round photo in place of a poster. */
.pposter.rface { aspect-ratio: 1; border-radius: 50%; align-self: center; }
.pposter.rface.none { font-size: 1.125rem; background: var(--surface-2); }

/* "You were 12 when it came out." under the title, from a birthday kept in this browser. */
.youwere { margin: 10px 0 0; color: var(--muted); font-size: 0.9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.youwere > span:first-child { color: var(--text); }
.ywlink { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line); cursor: pointer; }
.ywlink:hover, .ywlink:focus-visible { color: var(--marquee); text-decoration-color: currentColor; }
.ywdate { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px; color-scheme: light dark; }
.ywbtn { font: 600 0.875rem/1 var(--body); color: var(--bg); background: var(--text); border: 0; border-radius: var(--r-sm);
  padding: 8px 12px; cursor: pointer; }
.ywnote { flex-basis: 100%; color: var(--faint); font-size: 0.75rem; }

/* What's next for a running show: the next episode or season, with a countdown when it has a date. */
.nextup { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; padding: 12px 16px; width: fit-content; max-width: 100%; box-sizing: border-box;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.nextup .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--marquee) 14%, transparent); color: var(--marquee); }
.nextup .ic svg { width: 19px; height: 19px; }
.nextup .tx { flex: 1; min-width: 0; }
.nextup .lb { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--marquee); font-weight: 600; }
.nextup .mn { font-weight: 600; line-height: 1.3; margin-top: 1px; }
.nextup .sb { color: var(--muted); font-size: .85rem; line-height: 1.35; margin-top: 1px; }
.nextup .cd { flex: none; text-align: center; line-height: 1; margin-left: 10px; }
.nextup .cd b { display: block; font: 800 1.9rem/1 var(--display); color: var(--marquee); }
.nextup .cd b.word { font-size: 1.4rem; }
.nextup .cd span { font-size: .72rem; color: var(--muted); }
.nextup.tbd .ic { background: var(--surface-2); color: var(--muted); }
/* Phones: the column beside the poster is too narrow for the card, so it sits under both instead. */
.nextup.below { display: none; }
@media (max-width: 560px) {
  .titlerow:not(.noposter) .nextup.beside { display: none; }
  .titlerow:not(.noposter) + .nextup.below { display: flex; width: 100%; margin-top: 14px; }
}

/* Recently viewed: a small × in the corner removes one card. Shown on hover; always on touch screens. */
.rwrap { position: relative; display: grid; }
.rclose { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  font: 400 17px/1 var(--body); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.rwrap:hover .rclose, .rclose:focus-visible { opacity: 1; }
.rclose:hover { color: var(--text); border-color: var(--marquee); }
@media (hover: hover) { .rwrap .pick { padding-right: 30px; } }
/* Touch screens: always shown, smaller and tucked into the corner so names keep their room. */
@media (hover: none) { .rclose { opacity: .85; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 15px; } }
.pposter.listtile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; align-self: center; font-size: 1.125rem; background: var(--surface-2); color: var(--marquee); }

/* ------------------------------------------------------------------ sports: Super Bowls */
.sbscore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; margin: 14px 0 4px; padding: 16px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: center; }
.sbside { display: grid; gap: 4px; justify-items: center; }
.sbside b { font: 800 2.75rem/1 var(--display); }
.sbside.won b { color: var(--marquee); }
.sbteam { font-weight: 600; }
.sbcoach { color: var(--muted); font-size: 0.8125rem; }
.sbfinal { align-self: center; color: var(--faint); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .08em; }
.agestack .exact { color: var(--muted); font-size: 0.7188rem; white-space: nowrap; }
.sbcast .row.inactive .who { opacity: .72; }
.sblist .row { grid-template-columns: 1fr auto; }
.psub { color: var(--muted); font-size: 0.8125rem; line-height: 1.3; }
.pposter.listtile.sbtile { width: 48px; }