:root { --up: max(1px, min(calc(100vw / 1920), calc(100vh / 904))); }   /* big-screen scale, see .claude/scale_css.py */
/* Site font: Plus Jakarta Sans (free, SIL Open Font License), served with the site itself (shared/PlusJakartaSans.ttf,
   every weight in one file) rather than from Google, so it shows even where Google Fonts is blocked */
@font-face { font-family: "Plus Jakarta Sans"; src: url("PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* Maxflix: shared styles for every prototype page */

/* --edge = side margin: 58px (Max's spec), shrinking on small screens so phones don't lose too much width.
   --gap = space between thumbnails. */
:root { --bg: #141414; --card-bg: #181818; --red: #e50914; --muted: #bcbcbc; --dim: #808080;
  --edge: min(calc(58 * var(--up)), 4vw); --gap: calc(.5vw + calc(5 * var(--up)));
  /* Background: #141414 with a very faint film-grain noise (tiling SVG, no image file needed). The grain lightens
     things slightly, so the colour under it is a touch darker: together they average out to #141414 */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bg-under: #090909; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-under) var(--noise) repeat; color: #fff; }
body { font-family: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button { font: inherit; }
/* Moving between Maxflix pages: a short crossfade instead of a hard cut (the browser's built-in page
   transitions; browsers without them just switch pages as before) */
@view-transition { navigation: auto; }
/* A fade THROUGH the dark: the old page fades out, then the new one fades in (a plain crossfade between two
   near-black pages was too subtle to notice) */
::view-transition-old(root) { animation: vt-out .22s ease-in both; }
::view-transition-new(root) { animation: vt-in .38s ease-out .16s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* Browsers without page transitions get the same fade from shared/nav.js */
html.page-fading body { opacity: 0; transition: opacity .2s ease-in; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* No orphans: the browser rebalances a paragraph's lines so a word or two never sits alone on the last line */
p, .ep-log, .tagline, .hero-text, .synopsis { text-wrap: pretty; }
/* No visible scrollbar (the page still scrolls normally) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* Header + nav */
header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: calc(28 * var(--up));
  padding: calc(18 * var(--up)) var(--edge); background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0)); }
header img { height: calc(28 * var(--up)); display: block; }
header nav { display: flex; align-items: center; gap: calc(20 * var(--up)); font-size: calc(14 * var(--up)); }
header nav a { color: #e5e5e5; text-decoration: none; transition: color .2s; white-space: nowrap; }
header nav a:hover { color: #b3b3b3; }
header nav a.active { color: #fff; font-weight: 700; }
/* Scrolled down (html.scrolled, set by shared/nav.js): the dark fade behind the menu deepens and reaches a little
   lower, so the menu stays readable over whatever is passing under it */
header::before { content: ""; position: absolute; inset: 0 0 calc(-34 * var(--up)); z-index: -1; opacity: 0; transition: opacity 1.1s ease; pointer-events: none;   /* slow and slight: it should never seem to pop in */
  background: linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.3) 38%, rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%); }
.scrolled header::before { opacity: 1; }
/* Phones: the menu drops to its own row under the logo (the bell and photo stay beside the logo) */
@media (max-width: 600px) {
  header { flex-wrap: wrap; row-gap: calc(10 * var(--up)); padding: calc(12 * var(--up)) var(--edge) calc(10 * var(--up)); background: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0)); }
  header img { height: calc(24 * var(--up)); }
  header nav { order: 5; flex: 0 0 100%; gap: calc(18 * var(--up)); font-size: calc(13.5 * var(--up)); }
  /* Once the page is scrolled (shared/nav.js), a solid bar fades in behind the menu so nothing shows through it */
  header::before { content: ""; position: absolute; inset: 0 0 calc(-14 * var(--up)); z-index: -1; opacity: 0; transition: opacity .3s ease; pointer-events: none;
    background: linear-gradient(to bottom, rgba(9,9,9,.97) 0%, rgba(9,9,9,.97) 78%, rgba(9,9,9,0) 100%); }
  .scrolled header::before { opacity: 1; }
  /* Search open: the links step aside and the box takes the whole row */
  header nav:has(.search.open) a { display: none; }
  header nav .search.open { flex: 1 1 0; min-width: 0; }
  header nav .search.open input { width: 100%; min-width: 0; flex: 1 1 0; font-size: calc(16 * var(--up)); }   /* 16px: iPhones zoom the page in on smaller text boxes */
}

/* ---------- Hero pages (season.html, title.html): <body class="hero-page"> ----------
   The film plays silently behind the info (or its still), fading into the page; one shared look. */
.hero-page header { position: fixed; left: 0; right: 0; top: 0; }
.hero-page { background: transparent; }   /* body: lets the background layers below the page show through */
/* The faded picture is as tall as 45.5% of the width (874px on a 1920-wide window), so the fade sits in the same
   place on the picture windowed or fullscreen (the picture itself is sized by the width); at most 92% of the window */
.hero-page { --bg-h: min(45.5vw, 92vh); }
.bg { position: absolute; left: 0; right: 0; top: 0; height: var(--bg-h); z-index: -2; overflow: hidden; background: var(--bg); }
.bg img, .bg .video { position: absolute; inset: 0; }
/* No picture on the site can be right-clicked as a picture ("Open image in new tab", "Save image as") or dragged off
   the page: logos (the Maxflix wordmark and every M, title and brand logos, the logos on posters), splashes, the Home
   spotlights, thumbnails, album covers, the profile photo. Clicks pass straight through to whatever the picture sits
   on, so a picture inside a link or button still works as that link or button (right-clicking a thumbnail offers
   "Open link in new tab"). Site-wide on purpose (Max, 2026-10-12), so new pictures are covered without being listed. */
img, video { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transform-origin: 50% 0; z-index: 0; }
/* The picture hangs from the top of the page: a 16:9 frame never loses the top (heads), only the bottom, which
   fades into the page anyway (Max's call, 2026-10-04; was centred, cutting top and bottom equally) */
.bg img, .bg video { object-position: 50% 0; }
.bg .video { opacity: 0; transition: opacity 1.6s ease; pointer-events: none; z-index: 1; }
.bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* local spotlight videos */
.bg .video.on { opacity: 1; }
/* Built-in fade, nothing else over the picture: a soft black shade on the left (for the text) and a gradual fade
   into the page at the bottom. The bottom fade sits ABOVE the left one, so the bottom edge always ends in exactly
   the page's colour (otherwise the left fade's grey leaves a hard line where the page begins). */
.bg::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, var(--bg-under) 0%, var(--bg-under) 6%, rgba(9,9,9,.88) 15%, rgba(9,9,9,.62) 26%,
                rgba(9,9,9,.34) 38%, rgba(9,9,9,.12) 50%, rgba(9,9,9,0) 62%),
              /* extra shade on the left on season pages (season.html sets --shade: 1 = full; data.js `shade` can tune one) */
              linear-gradient(90deg, rgba(0,0,0,calc(.6 * var(--shade, 0))) 0%, rgba(0,0,0,calc(.4 * var(--shade, 0))) 22%,
                rgba(0,0,0,calc(.15 * var(--shade, 0))) 42%, rgba(0,0,0,0) 60%),
              linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 25%, rgba(0,0,0,0) 50%); }
/* The page's grain where the picture melts into the page, on every page, so there's no line where the page begins */
.bg::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--noise);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 6%, transparent 45%);
          mask-image: linear-gradient(0deg, #000 0%, #000 6%, transparent 45%); }

/* The info sits centred in the space between the bottom of the Maxflix logo and the next heading
   (38px top padding balances the header against the heading's own spacing; measured equal above and below) */
.hero { min-height: min(35.6vw, 72vh);   /* sized by the width like the picture, so windowed and fullscreen look the same */ display: flex; align-items: center; gap: calc(20 * var(--up)); padding: calc(38 * var(--up)) var(--edge) 0; overflow-x: clip; }
.hero-info { width: min(calc(600 * var(--up)), 90vw); }
.hero-info .film-badge { display: block; height: max(calc(22 * var(--up)), 1.6vw); width: auto; margin-bottom: calc(12 * var(--up)); }   /* M FILM, Originals only */
/* Season logos: flat (no drop shadow), all the SAME HEIGHT whatever their shape, so wide ones like 2022-23 aren't shrunk */
.hero-info .logo.season-logo { height: min(calc(157 * var(--up)), 17vh); width: auto; max-width: 90vw; max-height: none; filter: none; }
.hero-info .logo { display: block; max-width: min(calc(460 * var(--up)), 80vw); max-height: 26vh; object-fit: contain; object-position: left bottom;
  margin-bottom: calc(22 * var(--up)); filter: drop-shadow(0 calc(4 * var(--up)) calc(18 * var(--up)) rgba(0,0,0,.55)); }
.hero-info h1 { font-size: max(calc(34 * var(--up)), 3.6vw); line-height: 1.05; margin: 0 0 calc(18 * var(--up)); text-shadow: 0 calc(2 * var(--up)) calc(12 * var(--up)) rgba(0,0,0,.5); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--up)); font-size: calc(15 * var(--up)); color: #a8a8a8; margin-bottom: calc(12 * var(--up)); }   /* quieter than the description */
.hero-meta .dot { color: #777; }
.hero-meta b { font-weight: 700; color: #fff; }
.hero-meta .rating, .hero-meta .hd { position: relative; top: calc(1 * var(--up)); }   /* the boxes sit 1px lower to line up with the text beside them */
.hero-text { font-size: max(calc(14 * var(--up)), .95vw); font-weight: 500; line-height: 1.5; margin: 0 0 calc(22 * var(--up)); color: #eee; text-shadow: 0 calc(1 * var(--up)) calc(6 * var(--up)) rgba(0,0,0,.5); }
.hero-btns { display: flex; align-items: center; gap: calc(12 * var(--up)); flex-wrap: wrap; }
.btn-big { display: inline-flex; align-items: center; gap: calc(7 * var(--up)); border: 0; border-radius: calc(10 * var(--up)); padding: calc(13 * var(--up)) calc(32 * var(--up)) calc(13 * var(--up)) calc(22 * var(--up));   /* same corners as thumbnails */
  font-size: calc(20 * var(--up)); font-weight: 700; cursor: pointer; transition: background .2s, border-radius .25s ease; }
/* Hover: corners round off a touch more (the icon and label stay the same size) */
.btn-big:hover { border-radius: calc(13 * var(--up)); }
.btn-big svg { width: calc(34 * var(--up)); height: calc(34 * var(--up)); margin: calc(-3 * var(--up)) 0; }   /* rounded play triangle, bigger, without making the button taller */
.btn-big.primary { background: #e6e6e6; color: #000; }   /* soft white, easier on the eyes */
.btn-big.primary:hover { background: #c9c9c9; }   /* solid (not see-through), so the corners stay crisp on hover */
.btn-big.secondary { background: rgba(109,109,110,.7); color: #fff; }
.btn-big.secondary:hover { background: rgba(109,109,110,.55); }
/* Tablets and narrow windows: the picture band would be too short to hold the info, so the info starts below the
   menu and takes the room it needs, over a picture at least 460px tall. Phones: taller still (it sits behind the
   two-row menu too), the info fills the width, and the buttons are a little smaller. */
@media (max-width: 1000px) {
  .hero-page { --bg-h: max(45.5vw, calc(460 * var(--up))); }
  .hero { min-height: 0; padding: calc(92 * var(--up)) var(--edge) calc(36 * var(--up)); }
}
@media (max-width: 600px) {
  .hero-page { --bg-h: 112vw; }
  .hero { min-height: 0; padding: calc(124 * var(--up)) var(--edge) calc(34 * var(--up)); }
  .hero-info { width: 100%; }
  .hero-info .logo.season-logo { height: min(calc(92 * var(--up)), 25vw); }
  .hero-meta { font-size: calc(14 * var(--up)); gap: calc(8 * var(--up)); }
  .btn-big { font-size: calc(17 * var(--up)); padding: calc(11 * var(--up)) calc(24 * var(--up)) calc(11 * var(--up)) calc(16 * var(--up)); }
  .btn-big svg { width: calc(28 * var(--up)); height: calc(28 * var(--up)); }
}
/* Section headings on hero pages ("Episodes 8", "About …", "More Like This"): same look as row headings and
   search results ("Results for … 6"), with a divider spaced like the Movies page: 19px above, 19px below */
.section-head { font-size: max(calc(13.5 * var(--up)), 1vw); font-weight: 700; color: #e5e5e5; margin: 0; padding-bottom: calc(19 * var(--up));
  border-bottom: calc(1 * var(--up)) solid rgba(255,255,255,.18); }
.section-head .count { color: var(--dim); font-weight: 500; margin-left: calc(6 * var(--up)); }
.section-head + * { margin-top: calc(19 * var(--up)); }
.missing { padding: 30vh var(--edge); font-size: calc(20 * var(--up)); }

/* ---------- Episode cards (season pages, brand kit): approved layout 2026-10-01 ----------
   Markup: .ep > .card (art) + .ep-text > .ep-num + .ep-body > .ep-head (.ep-title + .ep-runtime), .meta, .ep-log, .ep-date */
/* Each episode is a site thumbnail (same corners, shadow, white outline, 1.06x lift) + its details */
.ep { cursor: default; outline: none; }
.ep.playable { cursor: pointer; }
.ep .card { flex: none; width: 100%; cursor: inherit; }
@media (hover: hover) { .ep:hover .card { z-index: 3; transform: scale(1.06); box-shadow: 0 calc(10 * var(--up)) calc(24 * var(--up)) rgba(0,0,0,.6); } }
.ep:hover .card::before, .ep:focus-visible .card::before { opacity: 1; }

/* Details, on the brand type scale */
/* The number sits in its own column; the title and everything under it line up where the title starts */
.ep-text { padding: calc(12 * var(--up)) calc(2 * var(--up)) 0; display: flex; gap: calc(10 * var(--up)); }
.ep-body { flex: 1; min-width: 0; }
.ep-head { display: flex; align-items: baseline; gap: calc(10 * var(--up)); margin-bottom: calc(7 * var(--up)); }   /* "Toyota: Recharge  1m 40s" on one line */
.ep-num { flex: none; font-size: calc(17 * var(--up)); font-weight: 500; line-height: 1.25; color: var(--dim); }   /* "1", "2"... like the count in "Episodes 8" */
.ep-title { font-size: calc(17 * var(--up)); font-weight: 500; line-height: 1.25; color: #fff; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* always one line */
.ep-runtime { flex: none; font-size: calc(13 * var(--up)); color: var(--muted); margin-left: calc(-2 * var(--up)); white-space: nowrap; }   /* "Tony  1h 46m": runtime beside the title */
/* Under the title: rating + genres (a lighter grey, medium weight), then the description (quiet grey), so the
   two read as different things. The title stays the whitest thing on the card. */
.ep-log { font-size: calc(12 * var(--up)); line-height: 1.5; color: #8f8f8f; margin: 0; }
.ep-text .meta { font-size: calc(12 * var(--up)); gap: calc(7 * var(--up)); margin: 0 0 calc(4 * var(--up)); color: var(--muted); font-weight: 500;
  flex-wrap: nowrap; align-items: baseline; }   /* rating box lines up with the genre text */
.ep-text .meta .rating { flex: none; white-space: nowrap; color: inherit; border-color: rgba(188,188,188,.45); }   /* same grey as the genres */
.ep-text .meta span:not(.rating) { min-width: 0; line-height: 1.45; }   /* long genre lists wrap beside the rating, not under it */
.ep-date { font-size: calc(12 * var(--up)); color: #6e6e6e; margin-top: calc(5 * var(--up)); font-style: italic; }   /* release date; upcoming ones read the same ("Airs 2027") */

/* Search (shared/search.js): a magnifying glass after "My List" that opens into a box */
/* Closed: the glass itself sits the same gap after "My List" as the links are from each other
   (pulled left by the box's border + the button's padding + the icon's own inner margin).
   Open: the box's outline takes that spot instead, so the glass slides right inside it. */
.search { position: relative; display: flex; align-items: center; height: calc(32 * var(--up)); margin-left: calc(-11 * var(--up)); border: calc(1 * var(--up)) solid transparent;
  border-radius: calc(6 * var(--up)); transition: border-color .25s, background-color .25s, margin-left .3s cubic-bezier(.25,.1,.25,1); }
.search.open { flex: 0 1 auto; margin-left: 0; border-color: rgba(255,255,255,.75); background: rgba(0,0,0,.7); }
.search button { border: 0; background: none; color: #e5e5e5; cursor: pointer; padding: 0 calc(8 * var(--up)); height: 100%;
  display: flex; align-items: center; }
.search button:hover { color: #fff; }
.search input { width: 0; padding: 0; border: 0; outline: none; background: none; color: #fff; font: inherit; font-size: calc(13 * var(--up));
  opacity: 0; transition: width .3s cubic-bezier(.25,.1,.25,1), opacity .2s; }
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: #8c8c8c; }
.search.open input { width: calc(280 * var(--up)); opacity: 1; }
/* In a narrow window the open box gives up width before the bell and name get pushed off screen */
header nav, .search, .search input { min-width: 0; }
header nav a, .search button, .notify, .profile-btn { flex-shrink: 0; }
.search .search-clear { font-size: calc(18 * var(--up)); line-height: 1; padding: 0 calc(9 * var(--up)) calc(2 * var(--up)) calc(4 * var(--up)); }
.search-suggest { position: absolute; top: calc(100% + calc(8 * var(--up))); left: calc(-1 * var(--up)); width: max-content; white-space: nowrap;
  display: flex; flex-wrap: nowrap; align-items: center; gap: calc(6 * var(--up)); padding: calc(10 * var(--up)) calc(12 * var(--up)); border-radius: calc(8 * var(--up));
  background: rgba(20,20,20,.96); box-shadow: 0 calc(8 * var(--up)) calc(24 * var(--up)) rgba(0,0,0,.6); }
.search-suggest span { color: var(--dim); font-size: calc(12 * var(--up)); margin-right: calc(2 * var(--up)); }
.search .search-suggest button { height: auto; padding: calc(4 * var(--up)) calc(10 * var(--up)); border-radius: calc(999 * var(--up)); font-size: calc(12 * var(--up));
  background: rgba(255,255,255,.08); color: #ddd; transition: background .15s, color .15s; }
.search .search-suggest button:hover { background: rgba(255,255,255,.18); color: #fff; }
#search-results { min-height: 50vh; }
/* Season / title pages: the menu floats over the page there, so results start below it (same spot as on Home) */
.hero-page #search-results { padding-top: calc(68 * var(--up)); }
/* Phones: the suggestions sit under the menu across the screen and may wrap; results clear the two-row menu */
@media (max-width: 600px) {
  .search-suggest { position: fixed; left: var(--edge); right: var(--edge); top: calc(92 * var(--up)); width: auto; flex-wrap: wrap; white-space: normal; }
  .hero-page #search-results { padding-top: calc(108 * var(--up)); }
}
#search-results h2 .count { color: var(--dim); font-weight: 500; margin-left: calc(6 * var(--up)); }
.no-results { margin: calc(40 * var(--up)) var(--edge); color: var(--muted); font-size: calc(15 * var(--up)); }
.no-results a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: calc(1 * var(--up)) solid rgba(255,255,255,.35); transition: border-color .15s; }
.no-results a:hover { border-bottom-color: #fff; }
/* The logo's link is as tall as the profile photo (40px, the tallest thing in the bar), with the logo centred in it. The
   bell and photo are added by scripts a moment after the page opens; without this the bar grew 8px when they arrived,
   and the logo and menu visibly jumped on every page change. */
header .home-logo { display: flex; align-items: center; height: calc(40 * var(--up)); flex: none; }
/* Page heading (e.g. "Movies") with a thin divider under it, like "Episodes" on season pages */
/* The line sits halfway in the original 38px space between the heading and the first row (19px above, 19px below) */
.page-title { margin: calc(18 * var(--up)) var(--edge) 0; padding-bottom: calc(19 * var(--up)); border-bottom: calc(1 * var(--up)) solid rgba(255,255,255,.18);
  font-size: max(calc(22 * var(--up)), 1.8vw); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--up)); flex-wrap: wrap; }
.page-title + main { padding-top: 0; }
/* "Group by  Role | Type" switch at the right end of the page title (Movies) */
.group-by { position: relative; display: inline-flex; align-items: center; gap: calc(4 * var(--up)); font-size: calc(13 * var(--up)); font-weight: 500; }
.group-by > span { color: var(--dim); margin-right: calc(8 * var(--up)); }
.group-by a { position: relative; z-index: 1; color: var(--muted); text-decoration: none; padding: calc(6 * var(--up)) calc(14 * var(--up)); border-radius: calc(999 * var(--up));
  transition: color .3s ease, background .15s; }
.group-by a:hover:not(.on) { color: #fff; background: rgba(255,255,255,.08); }
.group-by a.on { color: #000; }
/* The soft-white pill slides from one option to the other */
.group-by .pill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: calc(999 * var(--up)); background: #e6e6e6;
  transition: left .35s cubic-bezier(.3,.7,.2,1), width .35s cubic-bezier(.3,.7,.2,1); }
.page-title + main > .row:first-child { margin-top: calc(19 * var(--up)); }

/* Rows */
main { padding: calc(10 * var(--up)) 0 0; }   /* the footer brings its own space above it */
.row { margin: calc(28 * var(--up)) 0 calc(8 * var(--up)); position: relative; overflow-x: clip; }   /* the entrance slide never widens the page */
.row h2 { margin: 0 var(--edge) calc(12 * var(--up)); font-size: max(calc(13.5 * var(--up)), 1vw); font-weight: 700; color: #e5e5e5; }
/* Exactly --per cards fill the space between the side margins; nothing peeks in from the next page.
   clip-path (not overflow) so lifted cards can still rise above and below the row. */
/* Thumbnails sliding past the sides fade out into the arrows (instead of being cut off at the margin).
   The extra 30px above/below (cancelled by the negative margin) leaves room for the hover lift. */
.viewport { padding: calc(30 * var(--up)) var(--edge); margin: calc(-30 * var(--up)) 0; overflow-x: clip;   /* the off-screen thumbnails never widen the page (phones zoomed out to fit them) */
  /* fully solid a little way into the margin, so hovered cards (which grow from their centre) never fade at their edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(var(--edge) * .65), #000 calc(100% - var(--edge) * .65), transparent);
          mask-image: linear-gradient(to right, transparent, #000 calc(var(--edge) * .65), #000 calc(100% - var(--edge) * .65), transparent); }
.track { display: flex; gap: var(--gap); transition: transform .6s cubic-bezier(.5,0,.1,1); --per: 5; }
@media (max-width: 800px) { .track { --per: 3; } }
@media (max-width: 500px) { .track { --per: 2; } }

/* Grid rows (Movies page): 6 per row, every title visible, wrapping onto new lines; no sideways scrolling */
.grid { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: calc(var(--gap) * 1.6) var(--gap); padding: 0 var(--edge); }
@media (max-width: 800px) { .grid { --cols: 3; } }
@media (max-width: 500px) { .grid { --cols: 2; } }

/* Cards */
.card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); aspect-ratio: 16 / 9;
  border-radius: calc(10 * var(--up)); overflow: hidden; cursor: pointer; background: #222; position: relative; outline: none;
  box-shadow: 0 calc(2 * var(--up)) calc(6 * var(--up)) rgba(0,0,0,.4);   /* tiny resting drop shadow */
  transition: transform .6s cubic-bezier(.25,.1,.25,1), box-shadow .6s; will-change: transform; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* White outline the instant the mouse lands on a card (drawn inside so the row never clips it) */
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; border: calc(2 * var(--up)) solid #fff; border-radius: inherit;
  opacity: 0; transition: opacity .12s; pointer-events: none; }
.card:hover::before, .card:focus-visible::before { opacity: 1; }
/* Gentle lift on hover: slow, smooth ease before the big preview takes over */
@media (hover: hover) {
  .card:hover { z-index: 3; transform: scale(1.06); box-shadow: 0 calc(10 * var(--up)) calc(24 * var(--up)) rgba(0,0,0,.6); }
}
.card.soon::after { content: attr(data-label); text-transform: uppercase; position: absolute; left: 50%; translate: -50% 0; bottom: calc(8 * var(--up)); z-index: 1; white-space: nowrap;   /* centred along the bottom */
  font-size: calc(10 * var(--up)); font-weight: 700; letter-spacing: .08em; background: var(--red); padding: calc(3 * var(--up)) calc(6 * var(--up)); border-radius: calc(2 * var(--up)); }
.card.soon.tag-top::after { bottom: auto; top: calc(8 * var(--up)); }   /* thumbnails with the title built in along the bottom (rows.js) */
/* Top 10 badge: a red ribbon hanging from the top edge, hugging the right side, with a notched tail.
   Flat Maxflix red (no 3D: no gradient, highlight or shadow), "TOP" spaced out over a heavy "10". */
.top10 { position: absolute; top: calc(1 * var(--up)); right: 0; z-index: 1; width: clamp(calc(24 * var(--up)), 12.4%, calc(41 * var(--up))); aspect-ratio: 9 / 12.5; min-height: 0;   /* keeps its shape whatever the text */
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(2 * var(--up)) 0 .38em; color: #fff;   /* the 2px top moves the text 1px down (by eye); text centred above the notch (em, not %: a % here would be of the THUMBNAIL's width) */
  font-size: clamp(calc(13 * var(--up)), 1.36vw, calc(23 * var(--up))); font-weight: 800; line-height: .86; letter-spacing: -.04em; pointer-events: none; }
.top10::before { content: ""; position: absolute; inset: calc(-1 * var(--up)) 0 0; z-index: -1;   /* the badge sits 1px down and its red reaches 1px up: 1px taller from the top edge, text and tail 1px lower */ background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); }   /* the notched tail */
.top10 small { font-size: .4em; font-weight: 800; letter-spacing: .2em; margin: 0 0 .22em .2em; }   /* margin-left balances the letter-spacing */
/* Collection cards: the brand's white logo centred over a dimmed, softened frame from its work */
.card.collection { background: #0b0b0b; display: grid; place-items: center; }
.card.collection .collection-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(calc(4 * var(--up))) brightness(.5) contrast(.78); transform: scale(1.1); }   /* lightly faded: soft, a little low-contrast */
/* Brand colour wash over the blurred frame (keeps the frame's light and shadow, takes on the brand colour) */
.card.collection .collection-tint { position: absolute; inset: 0; background: var(--tint); mix-blend-mode: color; opacity: .85; }
.card.collection .collection-tint::after { content: ""; position: absolute; inset: 0; background: var(--tint); opacity: .14; }
/* The Lexus frame is a dark night shot: lifted so the grey reads as grey, not black */
.card[data-id="collection:lexus"] .collection-art { filter: blur(calc(4 * var(--up))) brightness(.8) contrast(.78); }
.card[data-id="collection:lexus"] .collection-tint::after { opacity: .22; }
/* PXO's neon green needs more light behind it to look neon rather than dark green */
.card[data-id="collection:pxo"] .collection-art { filter: blur(calc(4 * var(--up))) brightness(1.05) contrast(.78); }
.card[data-id="collection:pxo"] .collection-tint::after { opacity: .32; }
.card.collection .collection-logo { position: relative; width: auto; height: auto; max-width: 52%; max-height: 46%;
  filter: drop-shadow(0 calc(2 * var(--up)) calc(10 * var(--up)) rgba(0,0,0,.5)); }
.card.collection .collection-toyota { max-height: 58%; }   /* stacked emblem + name: give it a little more height */
.card.collection .collection-lexus { max-width: 66%; }     /* long and thin: a little wider so it reads as big as the others */
/* No thumbnail yet: still + title in the site font over a dark fade */
.title-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 8% 7%;
  font-weight: 800; font-size: clamp(calc(14 * var(--up)), 1.5vw, calc(26 * var(--up))); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 65%); text-shadow: 0 calc(2 * var(--up)) calc(8 * var(--up)) rgba(0,0,0,.6); }
.card.soon .title-overlay { padding-bottom: calc(8% + calc(22 * var(--up))); }
/* No thumbnail yet but there's a logo: still + logo in the lower left */
.logo-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 7%;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%); }
.logo-overlay img { width: auto !important; height: auto !important; max-width: 80%; max-height: 45%; object-fit: contain;
  filter: drop-shadow(0 calc(2 * var(--up)) calc(6 * var(--up)) rgba(0,0,0,.6)); }
.logo-overlay.tall img { max-height: 66%; max-width: 50%; }   /* stacked / near-square logos (logoTall) need more height to read */
.card.soon .logo-overlay { padding-bottom: calc(7% + calc(20 * var(--up))); }
.card.soon .logo-overlay img { max-height: 90%; }   /* the tag takes room at the bottom, so the logo may use the rest of the height */
/* Hover preview: logo sits bottom-left over the still, low, close to the info under it (left padding matches
   .preview .info, so the logo / M FILM line up with the rating, role, genres). The vignette handles the darkening. */
.preview .preview-logo { padding: 5% calc(16 * var(--up)) 1.5%; z-index: 1; background: none; }
/* full-height column pinned to the bottom, so the logo's % max-height is measured against the preview art */
.preview .logo-stack { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: calc(6 * var(--up)); width: 100%; height: 100%; }
.preview .preview-logo img { max-width: 58%; max-height: 42%; animation: none; }
/* "M FILM" badge above a Maxflix Original's logo */
.preview .preview-logo img.film-badge { max-width: none; max-height: none; height: clamp(calc(12 * var(--up)), 1.2vw, calc(22 * var(--up))) !important; }
.preview .preview-logo img.presents { max-width: none; max-height: none; height: clamp(calc(14 * var(--up)), 1.3vw, calc(24 * var(--up))) !important; }   /* e.g. Refreshing Films above Auditorium 4 */
.preview .logo-text { font-weight: 800; font-size: clamp(calc(16 * var(--up)), 1.6vw, calc(28 * var(--up))); line-height: 1.05; text-transform: uppercase;
  text-shadow: 0 calc(2 * var(--up)) calc(8 * var(--up)) rgba(0,0,0,.6); }
/* No artwork at all yet: plain title card */
.title-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8%; text-align: center;
  font-weight: 800; font-size: clamp(calc(14 * var(--up)), 1.5vw, calc(26 * var(--up))); line-height: 1.05; text-transform: uppercase; letter-spacing: .02em;
  color: #e5e5e5; background: radial-gradient(ellipse at 30% 20%, #3a3a3a, #1c1c1c 70%); }
.card.soon .title-card { padding-bottom: calc(8% + calc(18 * var(--up))); }
.preview .art { position: relative; }
.preview .title-overlay { font-size: clamp(calc(18 * var(--up)), 2vw, calc(34 * var(--up))); }

.resume { font-size: calc(13 * var(--up)); color: var(--muted); }
.resume b { color: #fff; margin-right: calc(4 * var(--up)); }
.tagline { font-size: calc(12 * var(--up)); line-height: 1.45; color: var(--muted); margin: 0 0 calc(8 * var(--up)); }

/* Row arrows */
/* Each arrow lives in the side margin as a soft dark fade (no box): clear where it meets the last thumbnail, so even
   a hovered, grown card is never covered, and darkest at the edge of the window. rows.js sizes it to the thumbnails,
   so the chevron sits level with their middle. The chevron is drawn (the font's own arrow glyph sat off-centre). */
.arrow { position: absolute; top: calc(34 * var(--up)); bottom: 0; width: var(--edge); z-index: 5; border: 0; padding: 0;
  --dark: .7; color: #fff; font-size: 0; cursor: pointer; opacity: 0;
  transition: opacity .2s; display: flex; align-items: center; justify-content: center; }
.arrow::before { content: ""; width: max(calc(9 * var(--up)), .62vw); height: max(calc(9 * var(--up)), .62vw); border: solid #fff; border-width: max(calc(2 * var(--up)), .15vw) max(calc(2 * var(--up)), .15vw) 0 0; border-radius: calc(1 * var(--up)); }
.arrow.left { left: 0; background: linear-gradient(to left, rgba(9,9,9,0) 0%, rgba(9,9,9,0) 24%, rgba(9,9,9,var(--dark)) 100%); }
.arrow.right { right: 0; background: linear-gradient(to right, rgba(9,9,9,0) 0%, rgba(9,9,9,0) 24%, rgba(9,9,9,var(--dark)) 100%); }
.arrow.left::before { rotate: -135deg; translate: 25% 0; }
.arrow.right::before { rotate: 45deg; translate: -25% 0; }
/* Rows in the episode look: tiles sit in the track like cards; the arrows only cover the pictures, not the text */
.track > .ep { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; }
.ep-row { --per: 5; }
@media (max-width: 800px) { .ep-row { --per: 3; } }
@media (max-width: 500px) { .ep-row { --per: 2; } }
.ep-row .arrow { bottom: auto; height: calc((100vw - 2 * var(--edge) - (var(--per) - 1) * var(--gap)) / var(--per) * 9 / 16); }
.row:hover .arrow { opacity: 1; }
/* Touch screens (no mouse to show the arrows): rows are swiped instead, snapping to a thumbnail, with the next one
   peeking in at the edge so it's clear there's more (rows.js leaves the track where it is) */
@media (hover: none) {
  .viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--edge); scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none; overscroll-behavior-x: contain; }
  .viewport::-webkit-scrollbar { display: none; }
  .track > * { scroll-snap-align: start; }
  .track, .ep-row { --per: 3.3; }
  .arrow { display: none !important; }
}
@media (hover: none) and (max-width: 800px) { .track, .ep-row { --per: 2.25; } }
@media (hover: none) and (max-width: 500px) { .track { --per: 2.2; } .ep-row .track { --per: 1.6; } }   /* episode tiles carry text: wider */
.arrow:hover { --dark: .92; }
.arrow[hidden] { display: none; }

/* Hover preview card */
.preview { position: absolute; z-index: 100; background: var(--card-bg); border-radius: calc(12 * var(--up)); overflow: hidden;
  box-shadow: 0 calc(8 * var(--up)) calc(28 * var(--up)) rgba(0,0,0,.75); opacity: 0;
  transition: transform .45s cubic-bezier(.25,.1,.25,1), opacity .35s ease; }
.preview.open { opacity: 1; }
.preview .art { aspect-ratio: 16 / 9; overflow: hidden; background: #222; }
.preview.clickable { cursor: pointer; }
/* Vignette blend: the bottom of the image melts into the info panel, no hard edge */
.preview .art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--card-bg) 0%, rgba(24,24,24,.7) 14%, rgba(24,24,24,0) 42%),
              radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); }
.preview .art .logo-overlay { z-index: 1; }
/* Only the picture itself drifts; the logo (and M FILM) on top stays perfectly still */
.preview .art > img { width: 100%; height: 100%; object-fit: cover; display: block; animation: drift 9s ease-in-out infinite alternate; }
.preview .art:has(> .still-clip) { overflow: visible; }   /* logos may hang past the picture; the still itself stays clipped */
.preview .still-clip { position: absolute; inset: 0; overflow: hidden; }
.preview .still-clip img { width: 100%; height: 100%; object-fit: cover; display: block; animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translateX(-2%); } }
.preview .info { padding: calc(5 * var(--up)) calc(16 * var(--up)) calc(16 * var(--up)); }   /* the image already fades into this panel, so little top padding */
.buttons { display: flex; align-items: center; gap: calc(8 * var(--up)); margin-bottom: calc(12 * var(--up)); }
.btn { width: calc(36 * var(--up)); height: calc(36 * var(--up)); border-radius: 50%; border: calc(2 * var(--up)) solid rgba(255,255,255,.5); background: rgba(42,42,42,.6);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s, background .15s; }
.btn:hover { border-color: #fff; }
.btn svg { width: calc(18 * var(--up)); height: calc(18 * var(--up)); }
.btn.play { background: #fff; border-color: #fff; color: #000; }
.btn.play:hover { background: #d6d6d6; }
.btn.play[disabled] { background: #555; border-color: #555; color: #999; cursor: not-allowed; }
.btn.more { margin-left: auto; }
.btn.on { border-color: #fff; background: #fff; color: #000; }
.original { display: flex; align-items: center; gap: calc(6 * var(--up)); font-size: calc(11 * var(--up)); letter-spacing: .12em; font-weight: 700; color: var(--muted); margin-bottom: calc(8 * var(--up)); }
.original img { height: calc(14 * var(--up)); }
.meta { display: flex; align-items: center; gap: calc(8 * var(--up)); font-size: calc(13 * var(--up)); color: var(--muted); margin-bottom: calc(8 * var(--up)); flex-wrap: wrap; }
.rating { border: calc(1 * var(--up)) solid rgba(255,255,255,.4); padding: 0 calc(5 * var(--up)); font-size: calc(11 * var(--up)); color: #fff; }
.hd { border: calc(1 * var(--up)) solid rgba(255,255,255,.4); border-radius: calc(3 * var(--up)); padding: 0 calc(4 * var(--up)); font-size: calc(9 * var(--up)); font-weight: 700; }
/* In the pop-up, the rating / HD / 4K / CC boxes sit half a pixel lower so their capitals line up optically with the runtime */
.preview .meta .rating, .preview .meta .hd { position: relative; top: calc(-.5 * var(--up)); }
.preview .meta .dot { font-style: normal; color: #6e6e6e; margin: 0 calc(6 * var(--up)); }   /* "Season 5 • 6 Episodes" */
.role { font-size: calc(13 * var(--up)); margin-bottom: calc(6 * var(--up)); color: var(--muted); }
.role b { color: #fff; }
.role .company { color: var(--muted); }
.genres { font-size: calc(13 * var(--up)); }
.genres i { font-style: normal; color: #646464; margin: 0 calc(5 * var(--up)); }

@media (prefers-reduced-motion: reduce) { .card, .preview { transition-duration: .01s !important; } }

/* ---------- Music player (shared/player.js): a compact player floating at the bottom centre, on every page ----------
   Row 1: cover + names | shuffle, prev, play, next, repeat | volume, close. Row 2: the seek bar. */
.player { position: fixed; left: 50%; bottom: calc(16 * var(--up)); z-index: 60; width: min(calc(700 * var(--up)), calc(100vw - calc(24 * var(--up))));
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "now controls side" "bar bar bar";
  align-items: center; gap: calc(8 * var(--up)) calc(16 * var(--up)); padding: calc(12 * var(--up)) calc(16 * var(--up)) calc(10 * var(--up)); border-radius: calc(14 * var(--up));
  background: rgba(14,14,14,.94); backdrop-filter: blur(calc(14 * var(--up))); box-shadow: 0 calc(14 * var(--up)) calc(40 * var(--up)) rgba(0,0,0,.6);
  transform: translate(-50%, calc(100% + calc(30 * var(--up)))); transition: transform .4s cubic-bezier(.2,.7,.25,1); isolation: isolate; }   /* no overflow clip: the shuffle/repeat note pops up above it */
.player.show { transform: translate(-50%, 0); }
.player.instant { transition: none; }
/* The glow: red light from the bottom edge, as bright as the music is loud (player.js sets its opacity) */
.player .glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(75% 130% at 50% 120%, rgba(229,9,20,.5), transparent 70%); }
.player .now { grid-area: now; display: flex; align-items: center; gap: calc(12 * var(--up)); min-width: 0; color: inherit; text-decoration: none; }
/* Cover + names lead to the album on Soundtracks: hovering either gets the title-page link look
   (text turns white, a thin soft line fades in underneath) */
.player .names b span, .player .names small span { display: inline-block; vertical-align: top; border-bottom: calc(1 * var(--up)) solid transparent; transition: color .15s, border-color .15s; }
.player .now:hover b span, .player .now:hover small span { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
/* Names too long to fit glide slowly to their end and back, pausing at each end (player.js sets --shift) */
.player .names b, .player .names small { max-width: 100%; text-overflow: clip !important; }
.player .names .glide span { animation: name-glide var(--glide, 8s) ease-in-out infinite alternate; }
@keyframes name-glide { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(calc(-1 * var(--shift))); } }
.player .names { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.player .names b { display: block; font-size: calc(13 * var(--up)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .names small { display: block; margin-top: calc(4 * var(--up)); font-size: calc(12 * var(--up)); color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .controls { grid-area: controls; position: relative; display: flex; flex-direction: column; align-items: center; }
.player .btns { display: flex; align-items: center; gap: calc(16 * var(--up)); }
.player button { border: 0; background: none; color: #e5e5e5; cursor: pointer; padding: 0; display: grid; place-items: center; position: relative; transition: color .15s, transform .15s; }
.player button:hover { color: #fff; }
.player button:active { transform: scale(.92); }
.player .btns svg { width: calc(20 * var(--up)); height: calc(20 * var(--up)); }
.player .toggle { color: #a3a3a3; }
.player .toggle svg { width: calc(18 * var(--up)); height: calc(18 * var(--up)); }
.player .toggle.on { color: var(--red); }
.player .toggle.on::after { content: ""; position: absolute; bottom: calc(-6 * var(--up)); left: 50%; width: calc(4 * var(--up)); height: calc(4 * var(--up)); margin-left: calc(-2 * var(--up)); border-radius: 50%; background: var(--red); }
.player .toggle.all::after { width: calc(4 * var(--up)); margin-left: calc(-5 * var(--up)); box-shadow: calc(6 * var(--up)) 0 0 var(--red); }   /* shuffle all songs: two dots */
/* The quick note over the controls ("Shuffling this album"): pops up, then fades almost straight away */
.player .note { position: absolute; bottom: calc(100% + calc(10 * var(--up))); left: 50%; translate: -50% calc(4 * var(--up)); padding: calc(4 * var(--up)) calc(10 * var(--up)); border-radius: calc(6 * var(--up));
  background: rgba(40,40,40,.95); color: #e5e5e5; font-size: calc(11 * var(--up)); font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, translate .25s ease; }
.player .note.show { opacity: 1; translate: -50% 0; transition-duration: .12s; }
/* Play/pause: the two icons swap */
.player .pp-btn { width: calc(36 * var(--up)); height: calc(36 * var(--up)); border-radius: 50%; background: #e6e6e6; color: #000; transition: background .15s, transform .15s; }
.player .pp-btn:hover { background: #fff; color: #000; transform: scale(1.06); }
.player .pp-btn svg { grid-area: 1 / 1; width: calc(18 * var(--up)); height: calc(18 * var(--up)); }   /* play/pause swap instantly, no transition */
.player .pp-btn .i-pause, .player .pp-btn.is-playing .i-play { opacity: 0; }
.player .pp-btn.is-playing .i-pause { opacity: 1; }
.player > .bar { grid-area: bar; }
.player .bar { display: flex; align-items: center; gap: calc(10 * var(--up)); width: 100%; font-size: calc(11 * var(--up)); color: #a3a3a3; font-variant-numeric: tabular-nums; }
/* Sliders: red fill up to the handle */
.player input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: calc(4 * var(--up)); border-radius: calc(2 * var(--up)); cursor: pointer; margin: 0;
  background: linear-gradient(90deg, var(--red) var(--fill, 0%), rgba(255,255,255,.22) var(--fill, 0%)); }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(12 * var(--up)); height: calc(12 * var(--up)); border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.player input[type=range]:hover::-webkit-slider-thumb, .player input[type=range]:active::-webkit-slider-thumb { opacity: 1; }
.player input[type=range]::-moz-range-thumb { width: calc(12 * var(--up)); height: calc(12 * var(--up)); border: 0; border-radius: 50%; background: #fff; }
.player .side { grid-area: side; justify-self: end; display: flex; align-items: center; gap: calc(8 * var(--up)); color: #b3b3b3; }
.player .side .vol { width: calc(70 * var(--up)); flex: none; }
.player .vol-btn { color: #b3b3b3; }
.player .vol-btn svg { width: calc(20 * var(--up)); height: calc(20 * var(--up)); }
.player .vol-btn path { transition: opacity .12s linear; }   /* quick crossfade between 1, 2, 3 waves and the mute cross */
.player .close { margin-left: calc(2 * var(--up)); width: calc(36 * var(--up)); height: calc(36 * var(--up)); border-radius: 50%; color: #b3b3b3; }
.player .close:hover { background: rgba(255,255,255,.1); }
.player .close svg { width: calc(20 * var(--up)); height: calc(20 * var(--up)); }
/* Maxflix cover (Selected Works) */
.cover-mx { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: calc(10 * var(--up));
  background: radial-gradient(120% 90% at 30% 20%, #3a0a0d 0%, #160405 55%, #0b0b0b 100%); }
.cover-mx.grey { background: radial-gradient(120% 90% at 30% 20%, #3a3a3a 0%, #1a1a1a 55%, #0b0b0b 100%); }   /* Selected Works */
.cover-mx.cream { background: radial-gradient(120% 90% at 30% 20%, #faf6ea 0%, #ebe3cf 55%, #d6ccb3 100%); color: #1c1a16; }   /* Other Compositions: off-white */
.cover-mx.ink { background: radial-gradient(120% 90% at 30% 20%, #2b3f6b 0%, #16213d 55%, #0a0f1d 100%); }   /* Other Compositions: deep ink blue */
.cover-mx.ink span { color: #d3def7; }   /* white with a soft blue tint */
/* Covers with no M (mark: false) show just the name, at every size: even the small thumbnails and the player */
.cover-mx.words span { display: block !important; }
.album .thumb .cover-mx.words span { font-size: calc(11 * var(--up)); letter-spacing: .14em; margin-right: -.14em; }
.cover-mx img { width: 16%; height: auto; object-fit: contain; }
.cover-mx span { font-size: clamp(calc(11 * var(--up)), 1vw, calc(15 * var(--up))); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-align: center; line-height: 1.35; padding: 0 8%; margin-right: -.18em; }   /* margin: the letter-spacing after the last letter would push it off centre */
/* The player floats over the footer (it doesn't push it up) */
@media (max-width: 700px) {
  .player { grid-template-columns: minmax(0, 1fr) auto auto; gap: calc(8 * var(--up)) calc(12 * var(--up)); }
  .player .side .vol, .player .vol-btn, .player .toggle { display: none; }
  .player .close { margin-left: 0; }
  body:has(.player.show) { padding-bottom: calc(104 * var(--up)); }   /* phones: room to scroll the footer out from under it */
}
/* ---------- Notifications (shared/notify.js): the bell at the far right of the menu bar, and its list ---------- */
.notify { position: relative; margin-left: auto; }
.notify .bell { position: relative; width: calc(36 * var(--up)); height: calc(36 * var(--up)); border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0;
  translate: calc(6 * var(--up)) 0; }   /* by eye: 6px right */
.notify .bell svg { width: calc(24 * var(--up)); height: calc(24 * var(--up)); transform-origin: 50% 8%; }   /* swings from the top, like a real bell */
.notify .bell.ring svg { animation: bell-ring .8s ease-in-out; }   /* set by notify.js on hover: the ring always plays to the end, even if the mouse has left */
@keyframes bell-ring { 0% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-13deg); } 45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.notify .badge { position: absolute; top: calc(3 * var(--up)); right: calc(2 * var(--up)); min-width: calc(16 * var(--up)); height: calc(16 * var(--up)); padding: 0 calc(4 * var(--up)); border-radius: calc(8 * var(--up)); background: var(--red);
  font-size: calc(10 * var(--up)); font-weight: 700; line-height: calc(16 * var(--up)); text-align: center; color: #fff; }
.notify .panel { position: absolute; right: 0; top: calc(100% + calc(12 * var(--up))); width: calc(330 * var(--up)); max-height: min(70vh, calc(520 * var(--up))); overflow-y: auto; scrollbar-width: thin;
  background: rgba(20,20,20,.97); border-radius: calc(8 * var(--up)); box-shadow: 0 calc(14 * var(--up)) calc(40 * var(--up)) rgba(0,0,0,.7); padding: calc(6 * var(--up)) 0;
  opacity: 0; visibility: hidden; translate: 0 calc(-6 * var(--up)); transition: opacity .2s ease, translate .2s ease, visibility 0s .2s; z-index: 70; }
.notify .panel::before { content: ""; position: absolute; right: calc(13 * var(--up)); top: calc(-7 * var(--up)); border: calc(7 * var(--up)) solid transparent; border-top: 0; border-bottom-color: rgba(20,20,20,.97); }
.notify.open .panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.notify .note { position: relative; display: flex; align-items: center; gap: calc(14 * var(--up)); padding: calc(10 * var(--up)) calc(14 * var(--up)) calc(10 * var(--up)) calc(26 * var(--up)); color: inherit; text-decoration: none; transition: background .15s; }
.notify .note + .note { border-top: calc(1 * var(--up)) solid rgba(255,255,255,.06); }
/* The little red line down the left of each one, like Netflix's */
.notify .note::before { content: ""; position: absolute; left: calc(12 * var(--up)); top: calc(7 * var(--up)); bottom: calc(7 * var(--up)); width: calc(2 * var(--up)); background: var(--red); }
.notify .note:hover { background: rgba(255,255,255,.06); }
.notify .art { flex: none; width: calc(112 * var(--up)); border-radius: calc(6 * var(--up)); pointer-events: none; }
.notify .art::before, .notify .art::after { display: none; }   /* no card outline or date tag in here */
.notify .words { min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--up)); }
.notify .words b { font-size: calc(14 * var(--up)); font-weight: 700; color: #fff; }
.notify .words span { font-size: calc(13 * var(--up)); color: #e5e5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notify .words small { font-size: calc(12 * var(--up)); color: #8f8f8f; margin-top: calc(1 * var(--up)); }
.notify .empty { margin: 0; padding: calc(18 * var(--up)); font-size: calc(13 * var(--up)); color: #8f8f8f; }
/* Phones: the list spans the screen under the menu's first row instead of hanging off the bell (it would run off the edge) */
@media (max-width: 600px) {
  .notify { position: static; }
  .notify .panel { position: fixed; left: calc(12 * var(--up)); right: calc(12 * var(--up)); top: calc(58 * var(--up)); width: auto; }
  .notify .panel::before { display: none; }
}
/* ---------- Profile button + "Maxflix Settings" (shared/profile.js): Max's headshot right of the bell ---------- */
.profile-btn { display: flex; align-items: center; gap: calc(12 * var(--up)); height: calc(40 * var(--up)); margin-left: calc(-8 * var(--up));   /* pulls in against the menu bar's 28px gap, so the name sits closer to the bell */
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
/* The photo shrinks by size (not by zooming the picture) so the browser never draws a light ring at its edge mid-animation */
.profile-btn .pname { font-size: calc(14 * var(--up)); font-weight: 500; color: #999; white-space: nowrap; transition: color .2s; }
.profile-btn:hover .pname { color: #bcbcbc; }
.profile-btn .pfp { display: block; flex: none; width: calc(40 * var(--up)); height: calc(40 * var(--up)); margin: 0; border-radius: 50%; overflow: hidden; transition: width .25s ease, height .25s ease, margin .25s ease; }
.profile-btn .pfp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-btn:hover .pfp { width: calc(36 * var(--up)); height: calc(36 * var(--up)); margin: 0 calc(2 * var(--up)); }   /* shrinks in place; nothing beside it moves */
.settings { width: min(calc(560 * var(--up)), calc(100vw - calc(32 * var(--up)))); max-height: min(86vh, calc(820 * var(--up))); overflow-y: auto; scrollbar-width: thin; padding: calc(30 * var(--up)) calc(32 * var(--up)) calc(28 * var(--up));
  border: 0; border-radius: calc(12 * var(--up)); background: #141414; color: #e5e5e5; box-shadow: 0 calc(30 * var(--up)) calc(80 * var(--up)) rgba(0,0,0,.75);
  font-family: inherit; font-size: calc(14 * var(--up)); line-height: 1.6; }
.settings::backdrop { background: rgba(0,0,0,.7); }
.settings[open], .settings[open]::backdrop { animation: legal-in .25s ease; }
.settings.closing, .settings.closing::backdrop { animation: legal-out .2s ease forwards; }
@keyframes legal-in { from { opacity: 0; } }
@keyframes legal-out { to { opacity: 0; } }
.settings .x { position: absolute; top: calc(14 * var(--up)); right: calc(14 * var(--up)); width: calc(36 * var(--up)); height: calc(36 * var(--up)); border: 0; border-radius: 50%; background: none; color: #9a9a9a;
  cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.settings .x:hover { background: rgba(255,255,255,.1); color: #fff; }
.settings h2 { margin: 0 0 calc(20 * var(--up)); font-size: calc(22 * var(--up)); font-weight: 800; color: #fff; }
.settings .who { display: flex; align-items: center; gap: calc(18 * var(--up)); padding-bottom: calc(20 * var(--up)); margin-bottom: 0; border-bottom: calc(1 * var(--up)) solid rgba(255,255,255,.1); }
.settings .who img { width: calc(84 * var(--up)); height: calc(84 * var(--up)); border-radius: 50%; object-fit: cover; flex: none; }
.settings .who b { display: block; font-size: calc(20 * var(--up)); font-weight: 700; color: #fff; }
.settings .who span { display: block; margin-top: calc(2 * var(--up)); color: #a3a3a3; font-size: calc(14 * var(--up)); }
/* Settings rows: Language, Kids Profile (for show; they don't change anything) */
.settings .prefs { margin: 0 0 calc(18 * var(--up)); padding: 0;   /* same gap above Language as below Kids Profile */ border-bottom: calc(1 * var(--up)) solid rgba(255,255,255,.1); }
.settings .prefs div { display: flex; justify-content: space-between; align-items: center; height: calc(34 * var(--up)); font-size: calc(13 * var(--up)); }   /* fixed height: both rows match */
.settings .prefs div + div { border-top: calc(1 * var(--up)) solid rgba(255,255,255,.06); }
.settings .prefs dt { color: #a3a3a3; }
.settings .prefs dd { margin: 0; color: #fff; font-weight: 500; display: flex; align-items: center; gap: calc(10 * var(--up)); }
.settings .switch { position: relative; width: calc(28 * var(--up)); height: calc(16 * var(--up)); padding: 0; border: 0; border-radius: calc(8 * var(--up)); background: #4a4a4a; cursor: pointer; transition: background .25s ease; }
.settings .switch::after { content: ""; position: absolute; left: calc(2 * var(--up)); top: calc(2 * var(--up)); width: calc(12 * var(--up)); height: calc(12 * var(--up)); border-radius: 50%; background: #bcbcbc;
  transition: transform .25s ease, background .25s ease; }
.settings .switch[aria-checked="true"] { background: #8f0a12; }   /* a darker red than the brand red */
.settings .switch[aria-checked="true"]::after { transform: translateX(calc(12 * var(--up))); background: #d2d2d2; }
.settings .state { min-width: calc(24 * var(--up)); }
/* The switch won't turn on: the knob budges a couple of pixels and springs back, and a note flashes above it */
.settings .sw-wrap { position: relative; display: inline-flex; }
.settings .switch.budge::after { animation: budge .45s ease; }
@keyframes budge { 0% { transform: none; } 30% { transform: translateX(calc(4 * var(--up))); } 55% { transform: translateX(calc(-1 * var(--up))); } 80% { transform: translateX(calc(1 * var(--up))); } 100% { transform: none; } }
.settings .nope { position: absolute; right: calc(-6 * var(--up)); bottom: calc(100% + calc(10 * var(--up))); padding: calc(6 * var(--up)) calc(10 * var(--up)); border-radius: calc(6 * var(--up)); background: #2a2a2a;
  color: #e5e5e5; font-size: calc(12 * var(--up)); font-weight: 500; white-space: nowrap; box-shadow: 0 calc(2 * var(--up)) calc(6 * var(--up)) rgba(0,0,0,.25); pointer-events: none;
  opacity: 0; translate: 0 calc(4 * var(--up)); transition: opacity .2s ease, translate .2s ease; }
.settings .nope::after { content: ""; position: absolute; right: calc(14 * var(--up)); top: 100%; border: calc(5 * var(--up)) solid transparent; border-top-color: #2a2a2a; }
.settings .nope.show { opacity: 1; translate: 0 0; }
.settings .bio p { margin: 0 0 calc(10 * var(--up)); color: #c9c9c9; font-size: calc(13 * var(--up)); line-height: 1.6; text-wrap: pretty; }
.settings .bio p:last-child { margin-bottom: 0; }
/* Links: the footer's round icons (styled with the footer's, below), then a CV pill */
.settings .links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(6 * var(--up)); margin-top: calc(22 * var(--up)); }
.settings .cv { margin-left: calc(8 * var(--up)); padding: calc(6 * var(--up)) calc(16 * var(--up)); border-radius: calc(999 * var(--up)); border: calc(1 * var(--up)) solid rgba(255,255,255,.2); color: #9a9a9a; text-decoration: none;   /* as quiet as the icons beside it */
  font-size: calc(13 * var(--up)); font-weight: 600; letter-spacing: .04em; transition: background .2s, border-color .2s, color .2s; }
.settings .cv:hover { background: rgba(255,255,255,.06); color: #c8c8c8; border-color: rgba(255,255,255,.3); }   /* a tiny bit brighter, like the icons (which go further, to white) */
@media (max-width: 600px) { .profile-btn { margin-left: calc(8 * var(--up)); } .profile-btn .pname { display: none; } .settings { padding: calc(24 * var(--up)) calc(20 * var(--up)); } }

/* Anything switched off with the hidden attribute (e.g. the reel billboard and page title while search results show)
   stays hidden, even when its own style says display: flex or grid */
[hidden] { display: none !important; }

/* Thumbnails, pop-ups, episode tiles and Play buttons are real links (so right-click > Open link in new tab works):
   they keep looking exactly as before */
a.card, a.ep, a.preview { display: block; color: inherit; text-decoration: none; }
a.btn-big { text-decoration: none; }
/* Icons whose size is written on the <svg> itself: repeated here so they grow on big screens like everything else
   (.claude/scale_css.py only reaches sizes written in CSS) */
.search-icon svg { width: calc(18 * var(--up)); height: calc(18 * var(--up)); }
.settings .x svg { width: calc(20 * var(--up)); height: calc(20 * var(--up)); }
/* "Lost Your Way?": the page for an address that doesn't exist (404.html). Menu bar above, footer below. The heading
   and line sit in the exact middle of the screen with the footer still in view: the block fills the space between the
   menu bar (76px) and the footer (74px + its 24px gap = 98px), and its 22px of top padding (98 - 76) evens that out. */
.lost { min-height: calc(100vh - calc(174 * var(--up))); padding: calc(22 * var(--up)) var(--edge) 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(14 * var(--up)); text-align: center; }
.lost h1 { margin: 0; font-size: clamp(calc(34 * var(--up)), 4.4vw, calc(64 * var(--up))); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.lost p { margin: 0; font-size: max(calc(15 * var(--up)), 1vw); color: #a8a8a8; }   /* one line on a computer; wraps only on a narrow phone */

/* ---------- Site footer (shared/footer.js): copyright + Legal on the left, round social icons on the right ---------- */
/* short pages: main grows so the footer always sits at the very bottom of the window */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
/* ~#0D0D0D overall: near-black base + a lighter grain than the page's (same texture, half the strength). No border on top. */
.site-footer { margin-top: calc(24 * var(--up)); padding: calc(16 * var(--up)) var(--edge, calc(58 * var(--up))); color: #7a7a7a; font-size: calc(11 * var(--up)); letter-spacing: .02em;
  background: #070707 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .045 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; }
.site-footer .f-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--up)); }
.site-footer .f-socials { display: flex; align-items: center; gap: calc(6 * var(--up)); }
/* The round icons, here and in Edit Profile: an identical box for every icon, pushed up a touch on hover */
.site-footer .social, .settings .social { width: calc(42 * var(--up)); height: calc(42 * var(--up)); border-radius: 50%; display: grid; place-items: center;
  color: #9a9a9a; transition: color .2s, background .2s, transform .2s; }
.site-footer .social svg, .settings .social svg { width: calc(22 * var(--up)); height: calc(22 * var(--up)); display: block; }
.site-footer a.social:hover, .settings .social:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateY(calc(-1 * var(--up))); }
.site-footer span.social { opacity: .6; cursor: default; }
@media (max-width: 600px) { .site-footer .f-row { flex-direction: column-reverse; align-items: flex-start; } }
/* "Legal": a small link after the copyright, darker than the rest of the footer, that opens a short note */
.site-footer .f-legal { margin-left: calc(26 * var(--up)); border: 0; padding: 0; background: none; font: inherit; letter-spacing: inherit; color: #555;
  cursor: pointer; border-bottom: calc(1 * var(--up)) solid transparent; transition: color .15s, border-color .15s; }
.site-footer .f-legal:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.legal-note { width: min(calc(560 * var(--up)), calc(100vw - calc(32 * var(--up)))); padding: calc(22 * var(--up)) calc(52 * var(--up)) calc(22 * var(--up)) calc(24 * var(--up)); border: 0; border-radius: calc(12 * var(--up)); color: #9a9a9a;
  background: #161616; box-shadow: 0 calc(24 * var(--up)) calc(60 * var(--up)) rgba(0,0,0,.7); font-family: inherit; font-size: calc(12 * var(--up)); line-height: 1.6; }
.legal-note::backdrop { background: rgba(0,0,0,.6); }
.legal-note[open], .legal-note[open]::backdrop { animation: legal-in .25s ease; }   /* fades in when opened, and out when closed */
.legal-note.closing, .legal-note.closing::backdrop { animation: legal-out .2s ease forwards; }
.legal-note p { margin: 0; text-wrap: pretty; }
.legal-note button { position: absolute; top: 50%; right: calc(12 * var(--up)); margin-top: calc(-16 * var(--up)); width: calc(32 * var(--up)); height: calc(32 * var(--up)); border: 0; border-radius: 50%;
  background: none; color: #9a9a9a; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.legal-note button:hover { background: rgba(255,255,255,.1); color: #fff; }
.legal-note button svg { width: calc(18 * var(--up)); height: calc(18 * var(--up)); }