/* ReelCritix design system.
   60% deep cinematic navy (the immersive medium)
   30% electric cyan (the AI technology layer)
   10% warm amber (the verified human touch)

   Dark only, on purpose. The contrast between the deep ground and a luminous accent is the
   brand; a light variant would wash out the one thing that makes it read as an authority
   rather than another content site. */

:root {
  color-scheme: dark;

  /* The ground is sampled from the supplied logo artwork (mean of the background band
     across both files), so the brand navy is the logo's navy rather than one picked to
     look similar. The rest of the ramp is mixed from it, keeping a single hue. */
  --navy-950: #020a1a;
  --navy-900: #04132f;
  --navy-850: #0a1d3c;
  --navy-800: #102749;
  --navy-700: #173257;

  --cyan-600: #1aa6d6;
  --cyan-500: #2bc0f0;
  --cyan-400: #55d2fa;
  --cyan-300: #8ae3ff;

  --amber-600: #d98b14;
  --amber-500: #f5a623;
  --amber-400: #ffbc4d;

  --green-500: #35c77f;
  --rose-500: #f2545b;

  --bg: var(--navy-900);
  --bg-elev: var(--navy-850);
  --bg-sunken: var(--navy-950);
  --bg-raised: var(--navy-800);

  --text: #eaf3fb;
  --text-dim: #a8bfd4;
  --text-mute: #6f8aa6;

  --line: rgba(85, 210, 250, 0.16);
  --line-strong: rgba(85, 210, 250, 0.34);

  --accent: var(--cyan-500);
  --accent-soft: rgba(43, 192, 240, 0.13);
  --human: var(--amber-500);
  --human-soft: rgba(245, 166, 35, 0.14);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  --glow: 0 0 0 1px rgba(85, 210, 250, 0.35), 0 8px 32px rgba(43, 192, 240, 0.18);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 14px; top: 14px; z-index: 100;
  background: var(--accent); color: var(--navy-950);
  padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 700;
}
:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 19, 47, 0.88);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* nowrap on purpose. In a wrapping flex row the browser fills line one and pushes the
   overflow down, so the search field never gives up its width and Sign in drops to a second
   row instead. With nowrap the flexible item shrinks, which is what should happen. Phones
   re-enable wrapping so search can take its own row. */
.site-header .wrap { display: flex; align-items: center; gap: 14px; min-height: 96px; flex-wrap: nowrap; }

.brand {
  display: inline-flex; align-items: center; text-decoration: none;
  /* Shrinkable, with a floor. A fixed width here is what pushed the menu button past the
     gutter on a phone: brand + account + toggle + gaps exceeded the content box and flex
     had nothing it was allowed to compress. */
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 310px;
}
.brand .wordmark { width: 100%; height: auto; display: block; }
.brand .wordmark.sm { width: 230px; }
.footer-brand { margin-bottom: 14px; }

/* Never wraps. The header is one line, so when space runs short the search field gives it
   up (it is the only flexible item) rather than a link dropping to a second row. */
.nav { display: flex; align-items: center; gap: 2px; flex: none; flex-wrap: nowrap; margin-left: auto; }
.nav a {
  text-decoration: none; color: var(--text-dim);
  padding: 10px 13px; border-radius: 999px;
  font-size: 1rem; font-weight: 600; white-space: nowrap;
  transition: background 0.16s, color 0.16s;
}
.nav a:hover { color: var(--text); background: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--cyan-300); background: var(--accent-soft); }


/* An element carrying the hidden attribute stays hidden whatever a layout rule says. The
   drawer links and the watchlist link are both toggled that way from script. */
[hidden] { display: none !important; }

/* The hamburger is always present. On a wide screen it holds the pages people read once;
   on a phone it holds the whole menu. */
.nav-more { position: relative; flex: none; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 15px;
  background: none; border: 1px solid var(--line-strong);
  color: var(--text); border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; white-space: nowrap;
  transition: background 0.16s, border-color 0.16s;
}
.menu-toggle svg { width: 21px; height: 21px; flex: none; }
.menu-toggle:hover { background: var(--accent-soft); border-color: var(--cyan-500); }
.menu-toggle[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--cyan-500); }

.more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 210px; display: flex; flex-direction: column; gap: 2px;
  background: var(--navy-800); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px;
}
.more-menu a {
  text-decoration: none; color: var(--text-dim);
  padding: 11px 14px; border-radius: 10px;
  font-size: 0.96rem; font-weight: 600; white-space: nowrap;
}
.more-menu a:hover { color: var(--text); background: var(--accent-soft); }
.more-menu a[aria-current="page"] { color: var(--cyan-300); background: var(--accent-soft); }

/* Copies of the primary links, for when the inline row is gone. */
.drawer-only { display: none; }

/* 1120, not 980. Below roughly 1100 the brand, three links, the search field, Menu and
   Sign in stop fitting on one row, and the header silently became two rows tall in the band
   between. The inline links collapse into the hamburger before that can happen. */
@media (max-width: 1120px) {
  .nav { display: none; }
  .drawer-only { display: block; }

  /* The panel is absolute against .nav-more, which is only as wide as the button, so
     `left: 0; right: 0` gave it 91px and every label spilled out of the box and off the
     screen. Taking .nav-more out of the positioning chain anchors the panel to the header
     instead, so it spans the full width at any device size. */
  .nav-more { position: static; }
  .more-menu {
    left: 0; right: 0; min-width: 0;
    top: 100%; margin-top: -1px;
    border-radius: 0 0 var(--radius) var(--radius);
    border-left: 0; border-right: 0;
    padding: 10px 18px 16px;
    max-height: calc(100vh - 100%); overflow-y: auto;
  }
  .more-menu a { padding: 14px 12px; font-size: 1rem; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  padding-block: 44px 38px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 480px at 8% -20%, rgba(43, 192, 240, 0.20), transparent 62%),
    radial-gradient(760px 420px at 96% 4%, rgba(245, 166, 35, 0.14), transparent 60%),
    linear-gradient(180deg, var(--navy-850), var(--navy-900));
}
.hero-grid {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { order: -1; max-width: 320px; }
}

/* Two steps down from where this started (4.4rem). The headline was pushing the first row
   of thumbnails to 771px on a 900px-tall window, so the catalogue barely appeared without
   scrolling, and the catalogue is the thing worth seeing first. */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.06; letter-spacing: -0.032em; font-weight: 800;
  margin: 0 0 16px; max-width: 17ch;
}
.hero h1 .hl { color: var(--cyan-400); }
.hero h1 .hl-human, .hero p.lede .hl-human { color: var(--amber-500); font-weight: 700; }
.hero h1 .hl, .hero p.lede .hl { color: var(--cyan-400); }
.hero p.lede { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--text-dim); max-width: 46ch; margin: 0 0 22px; }
/* The second sentence of the lede always starts its own line. Left to wrap naturally,
   "Only" ended up stranded at the end of line one at most widths. */
.lede-line { display: block; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-art { width: 100%; filter: drop-shadow(0 18px 50px rgba(43, 192, 240, 0.28)); }
.hero-art img { width: 100%; height: auto; max-width: 420px; margin-inline: auto; }


.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: 1.05rem;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.14s, background 0.16s, box-shadow 0.16s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cyan-500); color: var(--navy-950); box-shadow: var(--glow); }
.btn-primary:hover { background: var(--cyan-400); }
.btn-human {
  background: var(--amber-500); color: var(--navy-950);
  box-shadow: 0 0 0 1px rgba(255, 188, 77, 0.35), 0 8px 32px rgba(245, 166, 35, 0.22);
}
.btn-human:hover { background: var(--amber-400); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: rgba(43, 192, 240, 0.06); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--cyan-500); }
.btn.sm { padding: 10px 18px; font-size: 0.95rem; }

/* Lives on How It Works now rather than the home page, where it was four claims a visitor
   had to take on trust. Here each one summarises the section it links to. */
.promise { display: grid; gap: 18px; margin: 30px 0 44px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.promise span a { color: var(--cyan-400); text-decoration: none; white-space: nowrap; }
.promise span a:hover { text-decoration: underline; }
.promise div {
  background: rgba(16, 39, 67, 0.7); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.promise strong { display: block; font-size: 1.08rem; margin-bottom: 6px; font-weight: 700; color: var(--text); }
.promise span { font-size: 0.96rem; color: var(--text-dim); }
.promise .ico { display: block; width: 30px; height: 30px; margin-bottom: 14px; color: var(--cyan-400); }
.promise .ico.human { color: var(--amber-500); }

/* ---------------------------------------------------------------- sections */

section.band { padding-block: 52px; }
section.band.sunken { background: var(--bg-sunken); border-block: 1px solid var(--line); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.section-head h1, .section-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 2.9vw, 2.1rem);
  letter-spacing: -0.026em; margin: 0; line-height: 1.15;
}
.section-head p { margin: 10px 0 0; color: var(--text-dim); font-size: 1.05rem; max-width: 62ch; }
.section-head a.more { color: var(--cyan-400); text-decoration: none; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.section-head a.more:hover { color: var(--cyan-300); }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }

.card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow), var(--glow); border-color: var(--cyan-500); }

.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--navy-800); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 800;
  color: rgba(234, 243, 251, 0.26);
}
.poster .ph { font-size: 6rem; }

.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card h3 { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.card .by { font-size: 0.92rem; color: var(--text-dim); }
.card .meta { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-mute); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid var(--line); background: rgba(43, 192, 240, 0.08);
  color: var(--cyan-300); white-space: nowrap;
}
.chip.award { background: var(--human-soft); border-color: rgba(245, 166, 35, 0.4); color: var(--amber-400); }
.chip svg { width: 14px; height: 14px; }

.score {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  font-weight: 800; font-size: 1.25rem; color: var(--navy-950); flex: none;
}
.score.good { background: var(--green-500); }
.score.mixed { background: var(--amber-500); }
.score.bad { background: var(--rose-500); }
.score.none { background: transparent; color: var(--text-mute); border: 2px dashed var(--line-strong); font-size: 0.8rem; font-weight: 700; }

/* ---------------------------------------------------------------- title page */

.title-hero { padding-block: 44px 10px; }
.crumbs { font-size: 0.95rem; color: var(--text-mute); margin-bottom: 20px; }
.crumbs a { color: var(--cyan-400); text-decoration: none; }
.crumbs a:hover { color: var(--cyan-300); }

.title-layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .title-layout { grid-template-columns: 1fr; } }

.poster {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--navy-800);
  aspect-ratio: 16 / 9; box-shadow: var(--shadow);
}
.poster img { width: 100%; height: 100%; object-fit: cover; }

/* ---- click-to-play facade -------------------------------------------------
   Nothing here loads a player. The still is already on the page, so the whole
   affordance costs one button and one gradient until someone clicks. */
.player { cursor: pointer; }
.player img { transition: transform 0.4s ease, filter 0.3s ease; }
.player::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 19, 47, 0) 45%, rgba(4, 19, 47, 0.78) 100%);
  transition: opacity 0.3s ease;
}
.player:hover img, .player:focus-within img { transform: scale(1.03); filter: brightness(1.05); }

.player-btn {
  position: absolute; inset: 0; margin: auto;
  width: 82px; height: 82px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245, 166, 35, 0.55);
  background: rgba(4, 19, 47, 0.72);
  backdrop-filter: blur(6px);
  color: var(--amber-400); cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* The label is for assistive tech and for the runtime; the circle is the visual. */
.player-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.player-btn .ico { width: 34px; height: 34px; margin-left: 4px; }
.player:hover .player-btn { transform: scale(1.08); background: var(--amber-500); color: var(--navy-900); box-shadow: 0 0 0 10px rgba(245, 166, 35, 0.14); }
.player-btn:focus-visible { outline: 3px solid var(--amber-400); outline-offset: 4px; }

.player-note {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 10px 16px; font-size: 0.82rem; color: rgba(233, 240, 252, 0.82);
  pointer-events: none;
}

.player.is-playing { cursor: default; }
.player.is-playing::after { opacity: 0; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Playback disabled by the uploader: link out rather than render a dead black frame. */
.player-out {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 20px; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, rgba(4, 19, 47, 0.35), rgba(4, 19, 47, 0.88));
}
.player-out .ico { width: 30px; height: 30px; color: var(--amber-400); }
.player-out span { font-weight: 700; }
.player-out small { color: var(--text-mute); font-size: 0.82rem; }

@media (max-width: 720px) {
  .player-btn { width: 64px; height: 64px; }
  .player-btn .ico { width: 26px; height: 26px; }
  .player-note { font-size: 0.76rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .player img, .player-btn { transition: none; }
  .player:hover img { transform: none; }
}

h1.film-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.08; letter-spacing: -0.032em; margin: 0 0 12px;
}
.film-sub { color: var(--text-dim); font-size: 1.05rem; margin: 0 0 22px; }
.film-synopsis { font-size: 1.12rem; line-height: 1.75; margin: 0 0 26px; color: var(--text); }

.panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; }
.panel h2, .panel h3 {
  margin: 0 0 16px; font-size: 0.86rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--cyan-400);
}

.scorebox { display: flex; gap: 32px; flex-wrap: wrap; }
.scorebox > div { display: flex; align-items: center; gap: 14px; }
.scorebox .label { font-size: 0.92rem; color: var(--text-dim); line-height: 1.4; }
.scorebox .label b { display: block; color: var(--text); font-size: 1.02rem; font-weight: 700; }

.axes { display: grid; gap: 11px; }
.axis-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  align-items: center; font-size: 0.98rem;
  padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.axis-row:last-child { border-bottom: 0; padding-bottom: 0; }
.axis-row .k { color: var(--text-dim); }
.val { font-size: 0.82rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.val.generated { background: var(--accent-soft); color: var(--cyan-300); }
.val.none { background: var(--human-soft); color: var(--amber-400); }
.val.hybrid { background: rgba(53, 199, 127, 0.14); color: var(--green-500); }
.val.assisted { background: rgba(53, 199, 127, 0.1); color: var(--green-500); }
.val.unknown, .val.not_applicable { background: rgba(111, 138, 166, 0.14); color: var(--text-mute); }

.watch-list { display: grid; gap: 11px; }
.watch-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 17px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 700; font-size: 1rem;
  background: var(--bg-raised); transition: border-color 0.16s, background 0.16s;
}
.watch-list a:hover { border-color: var(--cyan-500); background: var(--accent-soft); }
.watch-list .where { font-size: 0.86rem; color: var(--text-mute); font-weight: 600; }

.credit-list { display: grid; gap: 10px; font-size: 1rem; }
.credit-list div { display: flex; justify-content: space-between; gap: 16px; }
.credit-list .role { color: var(--text-mute); font-size: 0.9rem; }

.empty {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: 28px; text-align: center; color: var(--text-dim);
  background: rgba(16, 39, 67, 0.4);
}
.empty strong { display: block; color: var(--text); margin-bottom: 8px; font-size: 1.15rem; font-weight: 700; }
.empty p { margin: 0; font-size: 0.98rem; max-width: 54ch; margin-inline: auto; }
.empty a { color: var(--cyan-400); }

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line-strong); border-left: 4px solid var(--amber-500);
  background: var(--human-soft);
  border-radius: var(--radius-sm); padding: 16px 19px;
  font-size: 0.98rem; color: var(--text-dim); margin-bottom: 24px;
}
.notice b { color: var(--text); }
.notice a { color: var(--cyan-400); }
.notice .ico { width: 22px; height: 22px; flex: none; color: var(--amber-500); margin-top: 3px; }

/* ---------------------------------------------------------------- prose */

.prose { max-width: 74ch; }
.prose h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.03em; margin: 0 0 18px; }
.prose h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em; margin: 46px 0 14px; color: var(--cyan-300); }
.prose h3 { font-size: 1.25rem; margin: 30px 0 10px; font-weight: 700; }
.prose p, .prose li { color: var(--text-dim); font-size: 1.05rem; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose a { color: var(--cyan-400); }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 1rem; }
.prose th, .prose td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--cyan-400); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; }

/* ---------------------------------------------------------------- filters */

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filters a {
  text-decoration: none; font-size: 1rem; font-weight: 700;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
  background: var(--bg-elev); transition: all 0.16s;
}
.filters a:hover { border-color: var(--cyan-500); color: var(--text); }
.filters a[aria-current="true"] { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-950); }
.filters a .n { opacity: 0.65; font-weight: 600; }

/* ---------------------------------------------------------------- stats */

.stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; color: var(--cyan-400); line-height: 1.1; }
.stat.human b { color: var(--amber-500); }
.stat span { font-size: 0.95rem; color: var(--text-dim); }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-sunken); padding-block: 56px 34px; margin-top: 80px; }
.footer-grid { display: grid; gap: 38px; grid-template-columns: 1.7fr repeat(3, 1fr); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { margin: 0 0 14px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--cyan-400); font-weight: 800; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { color: var(--text-dim); text-decoration: none; font-size: 1rem; }
.footer-grid a:hover { color: var(--cyan-400); }
.footer-grid p { margin: 0; font-size: 1rem; color: var(--text-dim); max-width: 36ch; }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.92rem; color: var(--text-mute);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ================================================================ community */

.account-widget { display: flex; align-items: center; flex: none; }

.btn-signin {
  background: none; border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 999px; padding: 10px 18px; font-size: 1rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-signin:hover { border-color: var(--cyan-500); color: var(--cyan-300); }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--cyan-300);
  font-weight: 800; font-size: 0.95rem; border: 1px solid var(--line-strong);
}
.avatar.sm { width: 38px; height: 38px; font-size: 0.85rem; }

details.account { position: relative; }
details.account > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
details.account > summary::-webkit-details-marker { display: none; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  width: 290px; padding: 20px;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; gap: 13px;
}
.account-head { display: flex; align-items: center; gap: 13px; }
.account-head b { display: block; font-size: 1.02rem; }
.account-menu a, .account-menu .linklike {
  font-size: 0.98rem; color: var(--text-dim); text-decoration: none;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit;
}
.account-menu a:hover, .account-menu .linklike:hover { color: var(--cyan-400); }
.fine { font-size: 0.9rem; color: var(--text-mute); margin: 0; }
.fine.ok { color: var(--green-500); }
.fine a { color: var(--cyan-400); }

.verify-progress { display: grid; gap: 8px; }
.verify-progress .bar { height: 8px; border-radius: 999px; background: var(--navy-800); overflow: hidden; }
.verify-progress .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-500), var(--amber-500)); }

.gate {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--amber-500);
  background: var(--bg-elev); border-radius: var(--radius);
  padding: 26px; margin-bottom: 26px; display: grid; gap: 14px; justify-items: start;
}
.gate strong { font-size: 1.2rem; font-weight: 700; }
.gate p { margin: 0; color: var(--text-dim); font-size: 1rem; max-width: 62ch; }
.gate a { color: var(--cyan-400); }
.gate .ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; width: 100%; max-width: 360px; }
.gate .ladder li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 0.98rem; color: var(--text-mute);
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.gate .ladder li.done { color: var(--text); border-color: var(--green-500); }
.gate .ladder li span { font-variant-numeric: tabular-nums; font-weight: 800; }

.board-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.board-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.028em; margin: 0; display: flex; align-items: center; gap: 14px; }
.board-head h1 svg { width: 34px; height: 34px; color: var(--cyan-400); }

.forum-list { display: grid; gap: 16px; }
.forum-item {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px;
  text-decoration: none; color: inherit;
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.forum-item:hover { border-color: var(--cyan-500); transform: translateY(-3px); box-shadow: var(--glow); }
.forum-icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--cyan-400); border: 1px solid var(--line-strong);
}
.forum-icon svg { width: 26px; height: 26px; }
.forum-item h3 { margin: 0 0 5px; font-size: 1.2rem; font-weight: 700; }
.forum-item p { margin: 0; font-size: 1rem; color: var(--text-dim); }
.forum-item .count { margin-left: auto; font-size: 0.92rem; color: var(--text-mute); white-space: nowrap; }
@media (max-width: 660px) { .forum-item .count { display: none; } }

.thread-row {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px; margin-bottom: 13px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: border-color 0.16s, transform 0.16s;
}
.thread-row:hover { border-color: var(--cyan-500); transform: translateY(-2px); }
.thread-main { min-width: 0; }
.thread-row h3 { margin: 0 0 5px; font-size: 1.12rem; line-height: 1.35; font-weight: 700; }
.thread-row p {
  margin: 0 0 7px; font-size: 0.98rem; color: var(--text-dim);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.thread-meta { font-size: 0.88rem; color: var(--text-mute); }
.pin { color: var(--amber-500); }

.post { display: flex; gap: 18px; align-items: flex-start; padding: 24px; margin-bottom: 15px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); }
.post.op { border-left: 4px solid var(--cyan-500); }
.post-main { min-width: 0; flex: 1; }
.post-main h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.028em; margin: 0 0 9px; line-height: 1.15; }
.post-meta { font-size: 0.92rem; color: var(--text-mute); margin-bottom: 13px; }
.post-body { font-size: 1.05rem; line-height: 1.75; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 13px; }
.post-body p:last-child { margin-bottom: 0; }

.replies-head { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--cyan-400); margin: 38px 0 18px; font-weight: 800; }

.composer { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 26px; display: grid; gap: 13px; }
.composer input, .composer textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--navy-950); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; resize: vertical;
}
.composer input::placeholder, .composer textarea::placeholder { color: var(--text-mute); }
.composer input:focus, .composer textarea:focus { outline: 2px solid var(--cyan-500); outline-offset: -1px; border-color: transparent; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.form-error { margin: 0; font-size: 0.96rem; color: #fff; background: var(--rose-500); padding: 11px 15px; border-radius: var(--radius-sm); }
.loading { color: var(--text-mute); font-size: 1rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(5, 13, 26, 0.78); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 22px; }
.modal { position: relative; width: 100%; max-width: 440px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); display: grid; gap: 16px; }
.modal h2 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; letter-spacing: -0.028em; font-weight: 800; }
.modal form { display: grid; gap: 11px; }
.modal label { font-size: 0.92rem; color: var(--text-dim); }
.modal input { font: inherit; color: var(--text); background: var(--navy-950); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--text-mute); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--text); }

/* icon sizing */
.ico { width: 20px; height: 20px; flex: none; }
.ico.xs { width: 15px; height: 15px; }
.ico.sm { width: 17px; height: 17px; }
.hero-mark { width: 100%; max-width: 380px; height: auto; margin-inline: auto; }
.promise .ico { width: 30px; height: 30px; }
.chip .ico { width: 14px; height: 14px; }
.gate .ladder li { align-items: center; }
.gate .ladder li .ico { margin-right: 8px; vertical-align: -3px; }

/* ---------------------------------------------------------------- apply form */

.apply-form {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  display: grid; gap: 20px; margin-top: 26px; max-width: 640px;
}
.apply-form .field { display: grid; gap: 8px; }
.apply-form .row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .apply-form .row { grid-template-columns: 1fr; } }

.apply-form label,
.apply-form legend {
  font-size: 0.92rem; font-weight: 700; color: var(--text);
  display: flex; align-items: baseline; gap: 10px; padding: 0;
}
.apply-form .req {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--amber-500);
}
.apply-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }

.apply-form input,
.apply-form textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--navy-950); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; resize: vertical;
}
.apply-form input::placeholder,
.apply-form textarea::placeholder { color: var(--text-mute); }
.apply-form input:focus,
.apply-form textarea:focus {
  outline: 2px solid var(--cyan-500); outline-offset: -1px; border-color: transparent;
}

.apply-form .hint { margin: 0; font-size: 0.86rem; color: var(--text-mute); line-height: 1.55; }
.apply-form .honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.apply-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.apply-actions .hint { flex: 1; min-width: 200px; }

.form-status {
  margin: 0; padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: 0.96rem; line-height: 1.6;
}
.form-status.ok { background: rgba(53, 199, 127, 0.14); border: 1px solid var(--green-500); color: var(--text); }
.form-status.err { background: rgba(242, 84, 91, 0.14); border: 1px solid var(--rose-500); color: var(--text); }
.form-status a { color: var(--cyan-400); }

.apply-form label.sub { font-weight: 600; font-size: 0.9rem; color: var(--text-dim); margin-top: 6px; }
.apply-form select {
  width: 100%; font: inherit; color: var(--text);
  background: var(--navy-950); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.apply-form select:focus { outline: 2px solid var(--cyan-500); outline-offset: -1px; border-color: transparent; }
.apply-form legend { margin-bottom: 6px; }

/* ================================================================ small screens

   The header is the tight one: logo, account control and menu toggle all compete for a
   360-440px content box. The brand shrinks (see .brand above), and everything else gets
   proportionally smaller here rather than relying on a single breakpoint guess. */

@media (max-width: 720px) {
  .wrap { padding-inline: 18px; }
  /* Padding rather than min-height, so the header breathes above and below whatever it
     holds instead of relying on one row being a fixed height. */
  .site-header .wrap {
    gap: 10px; row-gap: 12px;
    min-height: 0; padding-block: 14px;
    align-items: center;
  }
  .brand { min-width: 120px; max-width: 200px; }

  .btn-signin { padding: 8px 14px; font-size: 0.92rem; }
  /* Icon only on a phone. The label is what the owner asked for on the browser version,
     and its 50-odd pixels are the difference between the brand, the menu and the account
     control sharing one row or the menu being pushed onto its own. */
  .menu-toggle { height: 40px; width: 40px; padding: 0; gap: 0; justify-content: center; }
  .menu-toggle span { display: none; }
  /* Ordering targets .nav-more, not .menu-toggle: the button is nested inside it now, so a
     rule on the button orders nothing, which is what left search squeezed onto row one.
     Source order puts the menu before the account control; on a phone the menu belongs at
     the outside edge where a thumb reaches it. */
  .account-widget { order: 1; }
  .nav-more { order: 2; }

  section.band { padding-block: 48px; }
  .hero { padding-block: 44px 46px; }
  .site-footer { padding-block: 40px 26px; margin-top: 52px; }

  .hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); max-width: 100%; }
  .hero p.lede { font-size: 1.08rem; }
  .hero-actions { gap: 10px; }
  .btn { padding: 13px 22px; font-size: 1rem; }
  /* Full-width CTAs read as buttons on a phone rather than as stranded pills. */
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .card h3 { font-size: 1.02rem; }
  .card-body { padding: 14px 15px 16px; }
  .score { width: 44px; height: 44px; font-size: 1.05rem; }

  .section-head { margin-bottom: 20px; }
  .section-head h1, .section-head h2 { font-size: clamp(1.45rem, 5.6vw, 1.8rem); }
  .panel { padding: 20px; }
  .title-layout { gap: 28px; }
  .promise { margin-top: 36px; gap: 14px; }
  .stats { gap: 14px; }
  .stat { padding: 20px; }
  .stat b { font-size: 2.1rem; }

  .forum-item { padding: 18px 18px; gap: 14px; }
  .forum-icon { width: 44px; height: 44px; }
  .post { padding: 18px; gap: 14px; }
  .apply-form { padding: 20px; }
  .modal { padding: 24px; }

  .filters { gap: 8px; margin-bottom: 24px; }
  .filters a { padding: 9px 15px; font-size: 0.95rem; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 14px; }
  .site-header .wrap { gap: 9px; }
  .brand { min-width: 132px; max-width: 190px; }
  .btn-signin { padding: 7px 11px; font-size: 0.88rem; }
  .menu-toggle { padding: 8px 11px; font-size: 0.9rem; }
  .nav { padding: 10px 14px 14px; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
  .scorebox { gap: 18px; }
  .apply-form .row { gap: 14px; }
  .composer { padding: 18px; }
}

/* Anything that genuinely cannot reflow scrolls inside its own box rather than forcing the
   page sideways. Prose tables are the usual culprit on the methodology page. */
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 721px) {
  .prose table { display: table; white-space: normal; }
}

/* Long unbroken strings (URLs in credits, slugs) must not widen the page. */
.post-body, .film-synopsis, .credit-list, .watch-list a, .thread-row p { overflow-wrap: anywhere; }

/* ---- contributions -------------------------------------------------------
   The form is on every title page, so it has to read as part of the page
   rather than as an ad for itself. */
.contribute-lead { margin: -6px 0 16px; font-size: 0.92rem; color: var(--text-dim); line-height: 1.55; }
.contribute label {
  display: block; margin: 14px 0 6px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-mute);
}
.contribute input[type="text"],
.contribute input:not([type]),
.contribute select,
.contribute textarea {
  width: 100%; padding: 11px 13px;
  background: var(--navy-900); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font: inherit; font-size: 0.94rem;
}
.contribute textarea { resize: vertical; min-height: 60px; }
.contribute input:focus-visible,
.contribute select:focus-visible,
.contribute textarea:focus-visible {
  outline: 2px solid var(--cyan-500); outline-offset: 1px; border-color: transparent;
}
.contribute-help { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-mute); line-height: 1.5; }
.contribute-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-mute); text-align: center; }
.contribute-check {
  display: flex !important; align-items: center; gap: 9px;
  margin: 16px 0 18px !important; text-transform: none !important;
  font-size: 0.9rem !important; color: var(--text-dim) !important; letter-spacing: 0 !important;
}
.contribute-check input { width: auto; accent-color: var(--amber-500); }
.contribute-status {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 10px;
  font-size: 0.88rem; line-height: 1.5;
}
.contribute-status.is-good { background: rgba(43, 192, 240, 0.1); border: 1px solid var(--line-strong); color: var(--cyan-300); }
.contribute-status.is-bad { background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.4); color: var(--amber-400); }

/* Community edits carry the name of whoever supplied them: an attribution with a
   person behind it is a different thing from one that simply appeared. */
.contrib-by { margin: -8px 0 20px; font-size: 0.82rem; color: var(--text-mute); font-style: italic; }

/* ---- review queue --------------------------------------------------------- */
.mod-status { margin: 0 0 18px; font-size: 0.9rem; color: var(--text-dim); }
.mod-queue { display: grid; gap: 16px; }
.mod-card {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--navy-800); padding: 20px;
}
.mod-card header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mod-card header a { color: var(--cyan-400); text-decoration: none; font-size: 0.9rem; }
.mod-value { font-size: 1rem; line-height: 1.5; word-break: break-word; }
.mod-value a { color: var(--cyan-400); }
.mod-note { margin: 12px 0 0; font-size: 0.9rem; color: var(--text-dim); font-style: italic; }
.mod-meta { margin: 14px 0 0; font-size: 0.85rem; color: var(--text-mute); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mod-actions { display: flex; gap: 10px; margin-top: 18px; }
.mod-actions .btn { flex: 1; justify-content: center; }
.mod-empty { color: var(--text-mute); padding: 28px 0; text-align: center; }

@media (max-width: 720px) {
  .mod-actions { flex-direction: column; }
}

/* ---- sign-in dialog ------------------------------------------------------- */
.signin-root { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.signin-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 22, 0.78); backdrop-filter: blur(3px); }
.signin-panel {
  position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  background: var(--navy-800); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow);
}
.signin-x {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
  background: none; border: 0; color: var(--text-mute); font-size: 1.6rem;
  line-height: 1; cursor: pointer; border-radius: 8px;
}
.signin-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.signin-panel h2 { margin: 0 0 8px; font-size: 1.4rem; }
.signin-lead { margin: 0 0 20px; font-size: 0.92rem; color: var(--text-dim); line-height: 1.5; }
.signin-providers { display: grid; gap: 10px; }
.signin-providers .btn { width: 100%; justify-content: center; }
.signin-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-mute); font-size: 0.82rem; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin-panel label {
  display: block; margin: 14px 0 6px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-mute);
}
.signin-panel input {
  width: 100%; padding: 11px 13px; background: var(--navy-900); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 0.94rem;
}
.signin-panel input:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 1px; border-color: transparent; }
.signin-panel form .btn { width: 100%; justify-content: center; margin-top: 20px; }
.signin-status { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; font-size: 0.88rem; line-height: 1.5; }
.signin-status.is-good { background: rgba(43, 192, 240, 0.1); border: 1px solid var(--line-strong); color: var(--cyan-300); }
.signin-status.is-bad { background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.4); color: var(--amber-400); }
.signin-alt { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.signin-foot { margin: 18px 0 0; font-size: 0.78rem; color: var(--text-mute); line-height: 1.5; }

@media (max-width: 420px) {
  .signin-panel { padding: 24px 18px; }
  .signin-alt { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- search --------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
/* Sits between the primary links and the hamburger, and takes the slack in the header so
   it is as long as the row allows rather than a fixed guess. */
.nav-search { position: relative; flex: 1 1 240px; max-width: 420px; min-width: 150px; }
.nav-search input {
  width: 100%; padding: 11px 16px 11px 42px;
  background: var(--navy-900); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-size: 0.94rem;
}
.nav-search input::placeholder { color: var(--text-mute); }
.nav-search input:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 1px; border-color: transparent; }
.nav-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-mute); pointer-events: none;
}
.nav-search input:focus-visible ~ .sr-box,
.nav-search input:focus + .nav-search-icon { color: var(--cyan-400); }

.sr-box {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(420px, 90vw); max-height: 70vh; overflow-y: auto;
  background: var(--navy-800); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px;
}
.sr-group {
  padding: 10px 12px 6px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute);
}
.sr-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text);
}
.sr-row:hover { background: var(--accent-soft); }
.sr-title { font-weight: 600; font-size: 0.96rem; }
.sr-meta { font-size: 0.82rem; color: var(--text-mute); }
.sr-all {
  display: block; margin-top: 6px; padding: 11px 12px; text-align: center;
  border-top: 1px solid var(--line); color: var(--cyan-400);
  text-decoration: none; font-size: 0.9rem; font-weight: 600;
}
.sr-empty { padding: 18px 14px; color: var(--text-mute); font-size: 0.9rem; margin: 0; }
.sr-h { margin: 30px 0 12px; font-size: 1.15rem; }
.sr-h:first-child { margin-top: 0; }
.sr-list { display: grid; gap: 2px; }
.sr-list .sr-row { border: 1px solid transparent; }
.sr-list .sr-row:hover { border-color: var(--line); }

.search-page-form { display: flex; gap: 10px; margin-top: 22px; max-width: 560px; }
.search-page-form input {
  flex: 1; padding: 12px 16px; background: var(--navy-900); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 999px; font: inherit;
}
.search-page-form input:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 1px; border-color: transparent; }

/* ---- watchlist ------------------------------------------------------------ */
.watch-btn { width: 100%; justify-content: center; margin: 18px 0 4px; }
.watch-btn.is-saved { border-color: rgba(245, 166, 35, 0.5); color: var(--amber-400); }
.watch-btn.is-saved .ico { color: var(--amber-400); }
.wl-row { display: flex; align-items: center; gap: 14px; }
.wl-row .sr-row { flex: 1; }

@media (max-width: 720px) {
  /* No room for brand, search, hamburger and account on one row at phone width, so search
     wraps to its own full-width row rather than being squeezed to uselessness or buried in
     the drawer. It is the control people reach for most. */
  .site-header .wrap { flex-wrap: wrap; }
  .nav-search { order: 10; flex-basis: 100%; max-width: none; min-width: 0; margin-top: 0; }
  .sr-box { width: 100%; max-height: 55vh; }
}

/* Small phones, 320 to 380. The header row wraps rather than shrinks (that is what a
   wrapping flex container does), so the wordmark has to be told to take less or the menu
   button drops onto a row of its own and the header becomes three rows tall. */
@media (max-width: 380px) {
  .wrap { padding-inline: 14px; }
  .brand { min-width: 110px; max-width: 148px; }
  .btn-signin { padding: 7px 11px; font-size: 0.88rem; }
  .site-header .wrap { gap: 8px; }
  .more-menu { padding-inline: 14px; }
}

/* ---- genre ---------------------------------------------------------------- */
/* A second filter row, visually quieter than the format row above it so the two
   read as different questions rather than one long list of chips. */
.filters-genre { margin-top: 10px; }
.filters-genre a { font-size: 0.88rem; padding: 7px 13px; }

.genre-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.genre-chips a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid var(--line); background: rgba(43, 192, 240, 0.08); color: var(--cyan-300);
}
.genre-chips a:hover { border-color: var(--cyan-500); }
.genre-chips .unknown { background: none; color: var(--text-mute); border-style: dashed; }

.genre-picker { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.genre-picker label {
  display: inline-flex !important; align-items: center; gap: 7px;
  margin: 0 !important; padding: 8px 13px;
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  font-size: 0.88rem !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--text-dim) !important;
}
.genre-picker input { width: auto; accent-color: var(--cyan-500); }
.genre-picker label:has(input:checked) {
  border-color: var(--cyan-500); background: var(--accent-soft); color: var(--cyan-300) !important;
}

/* ---- home hero feature ---------------------------------------------------- */
/* Replaces the decorative brand mark with a real title that links somewhere. */
.hero-feature {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  background: var(--navy-800);
}
.hero-feature img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.hero-feature::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 19, 47, 0) 35%, rgba(4, 19, 47, 0.94) 100%);
}
.hero-feature-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 5px;
}
.hero-feature-kicker {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber-400);
}
.hero-feature-body strong {
  font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2;
  color: var(--text); letter-spacing: -0.01em;
}
.hero-feature-meta { font-size: 0.85rem; color: var(--text-dim); }
.hero-feature:hover { border-color: var(--cyan-500); }
.hero-feature:hover img { transform: scale(1.02); }
.hero-feature img { transition: transform 0.4s ease; }

@media (max-width: 720px) {
  .hero-feature-body { padding: 15px 16px; }
  .hero-feature-body strong { font-size: 1.1rem; }
}

/* ---- chart hub (/best) ----------------------------------------------------
   A list of lists. Each row is a chart, carrying the still of its strongest
   title so the page is built out of the catalogue rather than out of labels. */
.chart-group-head {
  margin: 38px 0 14px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute);
}
.chart-list { display: grid; gap: 10px; }
.chart-card {
  display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 18px;
  padding: 12px 18px 12px 12px; text-decoration: none;
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--radius); transition: border-color 0.16s, background 0.16s;
}
.chart-card:hover { border-color: var(--cyan-500); background: var(--navy-750, var(--navy-800)); }
.chart-art {
  border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/9;
  background: var(--navy-900); border: 1px solid var(--line);
}
.chart-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chart-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chart-kicker {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber-400);
}
.chart-body strong {
  font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25;
  color: var(--text); letter-spacing: -0.01em;
}
.chart-meta {
  font-size: 0.85rem; color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chart-go { font-size: 1.7rem; color: var(--text-mute); line-height: 1; padding-right: 4px; }
.chart-card:hover .chart-go { color: var(--cyan-400); }

@media (max-width: 720px) {
  .chart-card { grid-template-columns: 96px 1fr; gap: 13px; padding: 10px; }
  .chart-go { display: none; }
  .chart-body strong { font-size: 1rem; }
  .chart-meta { white-space: normal; }
}

/* Chart pages end by pointing at the full shelf, so the difference between a chart and a
   browse facet is stated rather than implied. */
.chart-foot { margin: 34px 0 0; font-size: 0.95rem; color: var(--text-mute); }
.chart-foot a { color: var(--cyan-400); }