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

/* 1200 since Studio joined the main links as Make AI Videos (2026-10-26; it was 1120 with
   three links, and 980 before that). Below that the brand, the 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: 1200px) {
  .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); }
/* align-items: flex-start so a two-line award chip does not stretch the score and kind
   chips beside it to its own height. */
.card .meta { margin-top: auto; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-mute); }
.card .meta > span:not(.chip) { padding-top: 5px; }

.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;
}
/* The award chip carries a festival name, and "Higgsfield Global Film Festival 2026" is far
   wider than a card. nowrap made it run straight out past the card edge and get clipped
   mid-word. It wraps inside its own pill now, stays within the card at any width, and the
   trophy stays put on the first line instead of being dragged down with the text. */
.chip.award {
  background: var(--human-soft); border-color: rgba(245, 166, 35, 0.4); color: var(--amber-400);
  white-space: normal; max-width: 100%;
  align-items: flex-start; text-align: left; line-height: 1.35;
  padding-top: 6px; padding-bottom: 6px;
}
.chip.award svg { margin-top: 2px; flex: none; }
.chip svg { width: 14px; height: 14px; }

/* The score box: a percentage stacked over the number of reviews behind it.
   Sized by min-width and padding rather than a fixed width, so "100%" over "128 reviews"
   grows the box instead of overflowing it, and a one-review score still reads at a glance.
   ch units mean the floor tracks the font, not a magic pixel count. */
.score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 9ch; padding: 7px 9px; border-radius: 14px;
  color: var(--navy-950); flex: none; text-align: center; line-height: 1.1;
}
.score b { font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em; }
.score small { font-size: 0.66rem; font-weight: 700; opacity: 0.8; white-space: nowrap; }
.score.good { background: var(--green-500); }
.score.bad { background: var(--rose-500); }
.score.none { background: transparent; color: var(--text-mute); border: 2px dashed var(--line-strong); }
.score.none b { font-size: 0.95rem; font-weight: 700; }
.score.none small { opacity: 0.85; }

/* Credited names are links. They read as plain text before, so nobody knew a filmmaker had
   a page at all, and 446 filmographies sat unreachable from anywhere on the site. Underlined
   on an offset, like every other in-prose link here. */
.person-link {
  color: var(--cyan-400); text-decoration: underline;
  text-decoration-color: rgba(43, 192, 240, 0.4); text-underline-offset: 3px;
}
.person-link:hover { color: var(--cyan-300); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- 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; }
.construction {
  display: flex; gap: 12px; align-items: center; margin: 0 0 22px; padding: 16px 20px; border-radius: 14px;
  font-size: 1.02rem; color: var(--text); background: rgba(245, 166, 35, 0.12); border: 2px solid var(--amber-500);
}
.construction .ico { flex: none; width: 24px; height: 24px; color: var(--amber-500); }
.construction b { color: var(--amber-500); }
.verdicts { display: flex; gap: 8px; }
.verdicts .v {
  display: grid; justify-items: center; min-width: 66px; padding: 8px 10px; border-radius: 10px;
  font-size: 0.78rem; color: var(--text-dim); background: var(--bg-sunken); border: 1px solid var(--line);
}
.verdicts .v b { font-size: 1.5rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.verdicts .v.pos b { color: var(--green-500); }
.verdicts .v.mix b { color: var(--amber-500); }
.verdicts .v.neg b { color: var(--rose-500); }

.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; }

/* ---------------------------------------------------------------- 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; }
  /* Narrower box, same two lines. The count is the reason the threshold could go, so it
     never gets dropped on a small screen. */
  .score { min-width: 8.4ch; padding: 6px 7px; }
  .score b { font-size: 1.05rem; }
  .score small { font-size: 0.6rem; }
  .score.big { min-width: 10ch; padding: 11px 13px; }
  .score.big b { font-size: 1.75rem; }
  .score.big small { font-size: 0.76rem; }

  .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 200px; max-width: 280px; 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); }

/* ---- pagination ----------------------------------------------------------- */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 40px;
}
.pagination .pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination a, .pagination .here, .pagination .step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 13px;
  border-radius: var(--radius-sm); text-decoration: none;
  font-size: 0.95rem; font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--text-dim);
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.pagination a:hover { color: var(--text); background: var(--accent-soft); border-color: var(--cyan-500); }
.pagination .here { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-950); }
.pagination .gap { padding: 0 4px; color: var(--text-mute); }
.pagination .step.disabled { opacity: 0.35; border-style: dashed; }
.page-count { margin: 16px 0 0; text-align: center; font-size: 0.88rem; color: var(--text-mute); }

@media (max-width: 720px) {
  .pagination { gap: 6px; }
  .pagination a, .pagination .here, .pagination .step { min-width: 38px; height: 38px; padding: 0 10px; font-size: 0.9rem; }
  /* Numbers stay, words go: Previous and Next are the two controls a thumb actually uses. */
  .pagination .step { flex: 1 1 100%; order: 10; }
  .pagination .step:first-child { order: -1; }
}

/* ---- critic index ----------------------------------------------------------
   Name, position, publication, count. An index is for finding a person; the
   reviews live on the person's own page. */
.critic-index { display: grid; gap: 2px; margin: 24px 0 26px; }
.critic-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background 0.16s, border-color 0.16s;
}
.critic-row:hover { background: var(--accent-soft); border-color: var(--line-strong); }
.critic-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.critic-meta { font-size: 0.9rem; color: var(--text-dim); }

/* ---- coming soon ------------------------------------------------------------
   No score, no thumbnail, no card. An announcement is a claim, and it should
   not borrow the visual language of a film we can actually show you. */
.upcoming-list { display: grid; gap: 16px; margin: 6px 0 26px; }
.upcoming-group-blurb { margin: -4px 0 14px; color: var(--text-mute); font-size: 0.95rem; }
.upcoming {
  display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--navy-800); padding: 20px 22px;
  scroll-margin-top: 110px;
}
/* A calendar leaf, so the date is the first thing read. */
.when-tile {
  display: grid; justify-items: center; align-content: center; gap: 1px;
  width: 76px; min-height: 84px; border-radius: 14px;
  background: var(--bg-sunken); border: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
}
.when-tile span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-400); }
.when-tile span:last-child { color: var(--text-mute); letter-spacing: 0.06em; }
.when-tile b { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; color: var(--text); }
.when-tile.tba b { font-size: 0.95rem; letter-spacing: 0.08em; color: var(--text-dim); }
.upcoming-body { min-width: 0; }
.upcoming-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upcoming-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.015em; }
.upcoming-head h2 a { color: inherit; }
.countdown {
  font-size: 0.8rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  color: var(--cyan-300); background: var(--accent-soft); border: 1px solid rgba(43, 192, 240, 0.35);
}
.countdown.out { color: var(--navy-950); background: var(--green-500); border-color: var(--green-500); }
.chip.upcoming-status {
  background: var(--human-soft); border-color: rgba(245, 166, 35, 0.4); color: var(--amber-400);
}
.upcoming-when { margin: 6px 0 0; font-size: 0.92rem; font-weight: 700; color: var(--text); }
.upcoming-by { margin: 8px 0 0; font-size: 0.95rem; color: var(--text-dim); }
.upcoming-note { margin: 8px 0 0; color: var(--text-dim); line-height: 1.6; }
.upcoming-related { margin: 8px 0 0; font-size: 0.9rem; color: var(--text-mute); }
.upcoming-related a { color: var(--cyan-400); text-decoration: underline; text-underline-offset: 3px; }
.upcoming-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.upcoming-foot .review-src { margin: 0; }
.upcoming-last { font-size: 0.85rem; color: var(--text-mute); }
@media (max-width: 560px) {
  .upcoming { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px; }
  .when-tile { width: auto; min-height: 0; grid-auto-flow: column; justify-content: start; gap: 8px; padding: 8px 12px; }
  .when-tile b { font-size: 1.3rem; }
}

/* ---- status page ------------------------------------------------------------
   A work surface, not a published page. Plain and dense on purpose. */
.status-table { width: 100%; border-collapse: collapse; margin: 14px 0 26px; font-size: 0.94rem; }
.status-table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-strong);
  font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute);
}
.status-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.status-n { font-weight: 700; color: var(--text); text-align: right; white-space: nowrap; }
.status-of { color: var(--text-mute); white-space: nowrap; }

/* ---- more like this ---------------------------------------------------------
   Every title page used to be a leaf: you arrived from a chart and the only way
   onward was back. A horizontal strip rather than a grid, because this is a
   sidebar-width suggestion and not a second catalogue. */
.related-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.related-card {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  border-radius: var(--radius-sm); overflow: hidden;
}
.related-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--navy-800); border-radius: var(--radius-sm); overflow: hidden;
}
.related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-thumb .ph { font-size: 2rem; }
.related-name {
  font-size: 0.95rem; font-weight: 700; line-height: 1.3;
  color: var(--text);
}
.related-card:hover .related-name { color: var(--cyan-300); }
.related-meta { font-size: 0.8rem; color: var(--text-mute); }

/* ---- person page ------------------------------------------------------------
   A filmography is only worth having if the filmmaker can correct it, so the bio,
   the links and the edit panel are the page rather than decoration on a grid. */
.person-bio { margin: 14px 0 0; max-width: 68ch; color: var(--text-dim); line-height: 1.6; }
.person-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; }
.person-links a {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  border: 1px solid var(--line); background: rgba(43, 192, 240, 0.08);
  color: var(--cyan-300); text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-links a:hover { border-color: var(--cyan-500); color: var(--cyan-200); }
.person-edited { margin: 12px 0 0; font-size: 0.82rem; color: var(--text-mute); }
/* Capped and centred: the edit form is a sidebar panel everywhere else, and full page width
   turns a three-field form into a horizon. */
.person-edit { max-width: 560px; margin: 34px auto 0; }

/* ---- critic profile --------------------------------------------------------- */
.critic-profile h1 {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.025em; margin: 14px 0 6px;
}
.critic-position { margin: 0 0 4px; font-size: 1.05rem; color: var(--cyan-300); }

.review-list { display: grid; gap: 14px; }
.review-row {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--navy-800); padding: 18px 20px;
}
.review-film { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Links look like links. These read as headings before, so nobody knew the film title or
   the critic name was clickable. Underlined on an offset so the type still breathes. */
.review-film > a {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--cyan-400);
  text-decoration: underline; text-decoration-color: rgba(43, 192, 240, 0.4);
  text-underline-offset: 3px;
}
.review-film > a:hover { color: var(--cyan-300); text-decoration-color: currentColor; }
.review-venue { font-size: 0.88rem; color: var(--text-mute); }
.review-foot { margin: 16px 0 0; font-size: 0.8rem; color: var(--text-mute); line-height: 1.5; }

/* ---- score summary --------------------------------------------------------
   The percentage sits next to its own arithmetic. A number with the quotes
   printed underneath is a claim anyone can check. */
.score-summary { display: flex; align-items: center; gap: 16px; }
.score-summary > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.score-summary strong { font-size: 1.05rem; color: var(--text); }
.score-summary span:not(.score) { font-size: 0.88rem; color: var(--text-dim); line-height: 1.45; }
.score.big { min-width: 11ch; padding: 13px 16px; border-radius: var(--radius-sm); }
.score.big b { font-size: 2.1rem; }
.score.big small { font-size: 0.82rem; }
.score.big.none b { font-size: 1.5rem; }
.review-quote { margin: 10px 0 0; color: var(--text-dim); font-style: italic; line-height: 1.55; }
.review-src {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 0.88rem; font-weight: 600; color: var(--cyan-400); text-decoration: none;
}
.review-src:hover { text-decoration: underline; }

.critic-list { display: grid; gap: 14px; margin: 22px 0 28px; }
.critic {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--navy-800); padding: 18px 20px;
}
.critic-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.critic-head strong { font-size: 1.1rem; font-family: var(--font-display); }
.critic-venue { font-size: 0.9rem; color: var(--cyan-300); }
.critic-role { margin: 5px 0 0; font-size: 0.88rem; color: var(--text-mute); }
.critic-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0; }
.critic-links a {
  font-size: 0.78rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim); text-decoration: none;
}
.critic-links a:hover { border-color: var(--cyan-500); color: var(--cyan-300); }
.critic-review { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.55; }
.critic-review > a { color: var(--cyan-400); font-weight: 600; }
.verdict {
  display: inline-block; margin: 0 7px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.verdict.positive { background: rgba(60, 200, 120, 0.16); color: #6fe0a0; }
.verdict.mixed { background: rgba(245, 166, 35, 0.16); color: var(--amber-400); }
.verdict.negative { background: rgba(240, 90, 90, 0.16); color: #ff9a9a; }
.critic-quote { display: block; margin-top: 5px; color: var(--text-dim); font-style: italic; }
.critic-flag {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 9px;
  background: rgba(245, 166, 35, 0.09); border: 1px solid rgba(245, 166, 35, 0.3);
  font-size: 0.83rem; color: var(--amber-400);
}
.critic-foot { margin: 0 0 30px; font-size: 0.9rem; color: var(--text-mute); }

/* ---- what's worth watching -----------------------------------------------
   One page of shelves. The jump row lets a phone reader skip to a shelf
   without scrolling past eighteen feature cards first. */
.ww-jump { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 16px 0 0; }
.ww-jump a {
  padding: 6px 13px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  border: 1px solid var(--line); background: rgba(43, 192, 240, 0.08);
  color: var(--cyan-300); text-decoration: none;
}
.ww-jump a:hover { border-color: var(--cyan-500); }
.ww-shelf { margin: 0 0 46px; scroll-margin-top: 90px; }
.ww-blurb { margin: -6px 0 18px; color: var(--text-dim); max-width: 70ch; }
.ww-start { margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--line); }

/* Cookie choice. Pinned to the bottom, never covering the whole page: the site is readable
   whatever the visitor decides. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 560px; margin: 0 auto; padding: 16px 18px;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
}
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 260px; font-size: 0.92rem; color: var(--text-dim); }
.consent p a { color: var(--cyan-400); }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { padding: 9px 16px; }

/* Home, as a button, for the widths where the inline links have folded into the menu. */
.nav-home { display: none; }
@media (max-width: 1200px) {
  .nav-home {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; margin-left: auto;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    color: var(--text); transition: background 0.16s, border-color 0.16s;
  }
  .nav-home svg { width: 21px; height: 21px; }
  .nav-home:hover, .nav-home[aria-current="page"] { background: var(--accent-soft); border-color: var(--cyan-500); }
}

/* ---------------------------------------------------------------- browse filters
   One panel, one labelled row per question: what format, which festival, what genre. */
.browse-filters {
  display: grid; gap: 0; margin-bottom: 34px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 20px;
}
.facet { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; padding-block: 14px; }
.facet + .facet { border-top: 1px solid var(--line); }
.facet-label {
  display: inline-flex; align-items: center; gap: 6px; padding-top: 8px;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--cyan-400); white-space: nowrap;
}
.facet-label svg { width: 15px; height: 15px; color: var(--amber-400); }
.facet-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.facet-chips a {
  text-decoration: none; white-space: nowrap;
  font-size: 0.92rem; font-weight: 700; line-height: 1;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim); background: var(--bg);
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.facet-chips a:hover { border-color: var(--cyan-500); color: var(--text); }
.facet-chips a .n { opacity: 0.6; font-weight: 600; margin-left: 3px; font-variant-numeric: tabular-nums; }
.facet-chips a[aria-current="true"] { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-950); }
.facet-chips a[aria-current="true"] .n { opacity: 0.75; }
.facet-festival .facet-chips a:hover { border-color: var(--amber-500); }
.facet-festival .facet-chips a[aria-current="true"] { background: var(--amber-500); border-color: var(--amber-500); color: var(--navy-950); }

.facet-scroll { position: relative; min-width: 0; }
.facet-arrow { display: none; }

/* On a phone each row is one line that scrolls sideways, with an arrow button over whichever
   edge has more beyond it. The panel goes edge to edge inside the gutter. */
@media (max-width: 760px) {
  .browse-filters { padding: 4px 0; margin-bottom: 26px; }
  .facet { grid-template-columns: 1fr; gap: 9px; padding-block: 12px; }
  .facet-label { display: flex; padding: 0 16px; }
  .facet-chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 2px 16px 4px; scroll-padding-inline: 16px; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .facet-chips::-webkit-scrollbar { display: none; }
  .facet-chips a { scroll-snap-align: start; padding: 10px 14px; }
  .facet-arrow {
    display: flex; align-items: center; position: absolute; top: 0; bottom: 4px; z-index: 2;
    width: 58px; padding: 0; border: 0; cursor: pointer; color: var(--text);
  }
  .facet-arrow.prev { left: 0; justify-content: flex-start; padding-left: 8px;
    background: linear-gradient(to right, var(--bg-elev) 50%, rgba(10, 29, 60, 0)); }
  .facet-arrow.next { right: 0; justify-content: flex-end; padding-right: 8px;
    background: linear-gradient(to left, var(--bg-elev) 50%, rgba(10, 29, 60, 0)); }
  /* Quiet on purpose: a translucent disc with a thin outline reads as a control without
     competing with the chips, which are what the row is for. */
  .facet-arrow span {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(234, 243, 251, 0.08); border: 1px solid rgba(234, 243, 251, 0.22);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .facet-arrow:active span { background: rgba(234, 243, 251, 0.16); }
  .facet-arrow svg { width: 15px; height: 15px; opacity: 0.85; }
}

/* ================================================================ studio
   An app, not an article: wide workspace, controls on the left, creations on the right,
   credits in the top bar. The shape people know from Higgsfield, Kling and Runway. */
.st-app { width: min(1480px, 100% - 32px); margin: 0 auto; padding: 18px 0 40px; }
.st-preview-bar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; color: var(--amber-400);
  background: var(--human-soft); border: 1px solid rgba(245, 166, 35, 0.35);
}
.st-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.st-brand { display: flex; align-items: center; gap: 10px; }
.st-brand h1 { margin: 0; font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -0.02em; }
.st-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; color: var(--cyan-300); background: var(--accent-soft); border: 1px solid rgba(43, 192, 240, 0.35); }
.st-top-actions { display: flex; gap: 10px; align-items: center; }
.st-credits {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; color: var(--text-dim);
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 14px;
}
.st-credits b { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.st-credits:hover { border-color: var(--amber-500); }
.st-coin { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #ffe08a, var(--amber-500) 60%, var(--amber-600)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset; }
.st-buy { padding: 10px 18px; }
.st-ok { margin-bottom: 14px; }

.st-workspace { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .st-workspace { grid-template-columns: 1fr; } }

.st-panel {
  display: grid; gap: 18px; padding: 18px; border-radius: 18px;
  background: var(--bg-elev); border: 1px solid var(--line);
  position: sticky; top: 108px; max-height: calc(100vh - 124px); overflow-y: auto; scrollbar-width: thin;
}
@media (max-width: 980px) { .st-panel { position: static; max-height: none; } }
.st-field { display: grid; gap: 8px; }
.st-field[hidden] { display: none; }
.st-flabel { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.st-flabel em { font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: none; opacity: 0.8; margin-left: 4px; }

.st-picker { position: relative; }
.st-picker-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
  font: inherit; color: var(--text); text-align: left; padding: 12px 14px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line-strong);
}
.st-picker-btn:hover, .st-picker-btn[aria-expanded="true"] { border-color: var(--cyan-500); }
.st-pick-main { display: grid; gap: 2px; }
.st-pick-main b { font-size: 1.02rem; }
.st-pick-main span { font-size: 0.8rem; color: var(--text-mute); }
.st-pick-caret { width: 9px; height: 9px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg) translateY(-3px); }
.st-picker-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; display: grid; gap: 6px; padding: 8px;
  background: var(--navy-800); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow);
  max-height: 420px; overflow-y: auto;
}
.st-picker-menu[hidden] { display: none; }
.st-mc {
  display: grid; gap: 5px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  padding: 12px; border-radius: 10px; background: transparent; border: 1px solid transparent;
}
.st-mc:hover { background: var(--accent-soft); }
.st-mc[aria-selected="true"] { border-color: var(--cyan-500); background: var(--accent-soft); }
.st-mc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.st-mc-maker { font-size: 0.75rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.st-mc-blurb { font-size: 0.86rem; color: var(--text-dim); line-height: 1.4; }
.st-mc-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; font-weight: 700; color: var(--amber-400); }
.st-mc-check { color: var(--cyan-300); margin-left: auto; }

.st-drop {
  position: relative; display: grid; place-items: center; min-height: 112px; cursor: pointer; overflow: hidden;
  border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--bg); transition: border-color 0.16s, background 0.16s;
}
.st-drop:hover, .st-drop.is-over { border-color: var(--cyan-500); background: var(--accent-soft); }
.st-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-drop-empty { display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--text-dim); font-size: 0.85rem; padding: 12px; pointer-events: none; }
.st-drop-empty b { color: var(--text); font-size: 0.95rem; }
.st-drop-empty .ico { width: 22px; height: 22px; color: var(--cyan-400); }
.st-drop.has-image .st-drop-empty { display: none; }
.st-drop img { width: 100%; max-height: 200px; object-fit: contain; display: block; }
.st-drop img[hidden] { display: none; }
.st-link { justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--cyan-400); text-decoration: underline; cursor: pointer; }
.st-link[hidden] { display: none; }
.st-check { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--text-dim); line-height: 1.45; }
.st-check[hidden] { display: none; }
.st-check input { margin-top: 2px; accent-color: var(--cyan-500); width: 16px; height: 16px; flex: none; }
.st-check a { color: var(--cyan-400); }

.st-prompt-box { position: relative; }
.st-prompt-box textarea {
  width: 100%; min-height: 128px; resize: vertical; font: inherit; font-size: 0.98rem; line-height: 1.5;
  color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px 26px;
}
.st-prompt-box textarea:focus { outline: none; border-color: var(--cyan-500); box-shadow: 0 0 0 3px rgba(43, 192, 240, 0.15); }
.st-count { position: absolute; right: 12px; bottom: 9px; font-size: 0.75rem; color: var(--text-mute); pointer-events: none; }

.st-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.st-seg-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; padding: 8px 4px; border-radius: 9px;
  color: var(--text-dim); background: transparent; border: 0; white-space: nowrap;
}
.st-seg-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.st-seg-btn[aria-pressed="true"] { color: var(--navy-950); background: var(--cyan-500); }
.st-ar { display: inline-block; border: 1.6px solid currentColor; border-radius: 3px; flex: none; }
.st-note { margin: 0; font-size: 0.82rem; color: var(--text-mute); line-height: 1.45; }
.st-note[hidden] { display: none; }

.st-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; color: var(--text); position: relative; }
.st-switch[hidden] { display: none; }
.st-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-switch-ui { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background 0.16s; flex: none; }
.st-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.16s; }
.st-switch input:checked + .st-switch-ui { background: var(--cyan-500); }
.st-switch input:checked + .st-switch-ui::after { transform: translateX(16px); }
.st-switch input:focus-visible + .st-switch-ui { outline: 2px solid var(--cyan-400); outline-offset: 2px; }

.st-generate { display: grid; gap: 10px; padding-top: 4px; }
.st-go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer;
  font: inherit; font-size: 1.05rem; font-weight: 800; padding: 15px 18px; border-radius: 14px; border: 0;
  color: var(--navy-950); background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.22); transition: transform 0.1s, filter 0.16s;
}
.st-go:hover:not(:disabled) { filter: brightness(1.05); }
.st-go:active:not(:disabled) { transform: translateY(1px); }
.st-go:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.st-go-cost { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; background: rgba(4, 19, 47, 0.14); padding: 4px 10px; border-radius: 999px; }
.st-hint { margin: 0; font-size: 0.85rem; color: var(--amber-400); line-height: 1.45; }
.st-hint[hidden], .st-error[hidden] { display: none; }
.st-error { margin: 0; font-size: 0.9rem; color: var(--rose-500); }
.st-muted { color: var(--text-mute); margin: 0; }
.st-small { font-size: 0.84rem; }

.st-canvas { min-height: 520px; padding: 18px; border-radius: 18px; background: var(--bg-sunken); border: 1px solid var(--line); }
.st-canvas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.st-canvas-head h2 { margin: 0; font-size: 1.1rem; }
.st-jobs { columns: 3 230px; column-gap: 14px; }
.st-job { display: grid; gap: 8px; align-content: start; margin: 0 0 14px; padding: 8px; break-inside: avoid; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
.st-job-media { border-radius: 10px; overflow: hidden; background: #000; }
.st-job-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-job-wait {
  width: 100%; height: 100%; min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-dim); font-weight: 700; font-size: 0.9rem;
  background: linear-gradient(110deg, var(--bg-sunken) 30%, var(--navy-800) 50%, var(--bg-sunken) 70%); background-size: 250% 100%;
  animation: st-shimmer 1.8s linear infinite;
}
.st-failed .st-job-wait { animation: none; background: var(--bg-sunken); color: var(--rose-500); }
@keyframes st-shimmer { to { background-position: -150% 0; } }
.st-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--cyan-400); animation: st-spin 0.9s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-job-meta { display: grid; gap: 6px; padding: 0 4px 4px; }
.st-job-prompt { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-job-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-job-tags span { font-size: 0.74rem; font-weight: 700; color: var(--text-mute); padding: 3px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.st-download { justify-self: start; font-size: 0.86rem; font-weight: 700; color: var(--cyan-400); }
.st-job-wait[data-wait] { flex-direction: column; text-align: center; padding: 18px; gap: 8px; }
.st-stage { color: var(--text); font-size: 0.95rem; }
.st-progress { display: block; width: min(240px, 80%); height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.st-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cyan-500); transition: width 1s linear; }
.st-job-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-act {
  font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--cyan-300); text-decoration: none; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--line-strong);
}
.st-act:hover { color: var(--text); border-color: var(--cyan-500); }
.st-act:disabled { opacity: 0.7; cursor: default; }
.st-act-quiet { color: var(--text-dim); background: transparent; border-color: var(--line); }
.st-more { display: block; margin: 16px auto 0; }
.st-more[hidden] { display: none; }
/* The price pitch and the free-clip offer share a row: pitch first and wider, offer beside
   it. Either one alone takes the full width; on narrow screens they stack. */
.st-banners { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.st-banners > * { margin-bottom: 0 !important; }
.st-banners > .st-model-links { margin: 0 0 12px; color: var(--text-dim); }
.st-about { margin-top: 26px; max-width: 820px; color: var(--text-dim); }
.st-about h2 { color: var(--text); font-size: 1.3rem; margin: 0 0 8px; }
.st-about h3 { color: var(--text); font-size: 1rem; margin: 18px 0 4px; }
.st-about p { margin: 0; line-height: 1.6; }
.st-about a { color: var(--cyan-400); }
.home-studio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-studio-tile { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.home-studio-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.home-studio-tile:hover img { transform: scale(1.04); }
@media (max-width: 720px) { .home-studio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .home-studio-tile img { transition: none; } .home-studio-tile:hover img { transform: none; } }
.st-model-links a { color: var(--cyan-400); font-weight: 700; }
.mp-page .mp-lede { font-size: 1.08rem; }
.mp-page .btn-primary { color: var(--navy-950); text-decoration: none; }
.mp-page .st-act { text-decoration: none; }
.mp-facts { margin: 14px 0 0; }
.mp-example { margin: 20px 0 8px; max-width: 720px; }
.mp-example.is-tall { max-width: 360px; }
.mp-siblings li { margin-bottom: 8px; }
.st-promo { flex: 2 1 0; }
.st-banners > .st-gift { flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: center; }
@media (max-width: 860px) { .st-banners { flex-direction: column; } }
.st-promo {
  display: grid; gap: 8px; margin-bottom: 14px; padding: 18px 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(115deg, #0b6ea8 0%, #5b3fd1 52%, #c2410c 100%);
  box-shadow: 0 10px 30px rgba(91, 63, 209, 0.28);
}
.st-promo[hidden] { display: none; }
.st-promo b { font-family: var(--font-display); font-size: clamp(1.3rem, 2.8vw, 1.75rem); letter-spacing: -0.01em; color: #fff; }
.st-promo > span { color: rgba(255, 255, 255, 0.88); }
.st-promo-models { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-promo-chip {
  font-weight: 800; font-size: 0.9rem; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
}
.st-promo-chip.is-star { background: #fff; color: #3b1fa8; border-color: #fff; }
.st-promo-30 { font-weight: 800; color: #ffd27a; }
.st-gift {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; color: var(--text-dim);
  background: rgba(53, 199, 127, 0.1); border: 1px solid rgba(53, 199, 127, 0.45);
}
.st-gift[hidden] { display: none; }
.st-gift b { color: var(--text); }
.st-gift-chip { font-size: 0.8rem; font-weight: 700; color: var(--green-500); white-space: nowrap; }
.st-gift-chip[hidden] { display: none; }
.st-go-cost.is-free { background: rgba(53, 199, 127, 0.22); }
.st-tag-free { color: var(--green-500) !important; border-color: rgba(53, 199, 127, 0.45) !important; }
.st-failed-bar { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg-sunken); border: 1px solid rgba(242, 84, 91, 0.35); }
.st-failed-bar[hidden] { display: none; }
.st-failed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 0.9rem; color: var(--text-dim); }
.st-failed-head b { color: var(--text); }
.st-failed-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.st-failed-list li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.st-failed-prompt { font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 60; width: min(560px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 14px 18px; border-radius: 14px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow); color: var(--text-dim);
  font-size: 0.92rem; line-height: 1.5; transform: translate(-50%, 140%); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease;
}
.st-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.st-toast.is-error { border-color: var(--rose-500); background: #2a1220; }
.st-needs-fix { outline: 2px solid var(--rose-500); outline-offset: 2px; border-radius: 12px; }
.st-toast b { color: var(--text); }
.st-toast-body { flex: 1; }
.st-toast-body .st-act { margin-top: 8px; display: inline-block; }
.st-toast-x { flex: none; font-size: 1.3rem; line-height: 1; color: var(--text-mute); background: none; border: 0; cursor: pointer; padding: 2px 4px; }
@media (prefers-reduced-motion: reduce) {
  .st-toast, .st-progress span { transition: none; }
}

.st-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 12px 24px; }
.st-empty[hidden] { display: none; }
.st-empty-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--cyan-300); }
.st-empty-icon .ico { width: 26px; height: 26px; }
.st-empty h3 { margin: 6px 0 0; font-size: 1.15rem; }
.st-empty p { margin: 0 0 10px; color: var(--text-dim); }

/* The showcase: what Studio makes, playing until the visitor has videos of their own. */
.st-empty.has-showcase { justify-items: stretch; text-align: left; padding: 4px 0 8px; }
.st-show-head h3 { margin: 0; font-size: 1.15rem; }
.st-show-head p { margin: 4px 0 0; }
.st-show { columns: 2 240px; column-gap: 14px; }
.st-show-tile {
  position: relative; margin: 0 0 14px; break-inside: avoid; border-radius: 14px; overflow: hidden;
  background: #000; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.st-show-tile video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.6s ease; }
.st-show-tile:hover video { transform: scale(1.03); }
.st-show-tile figcaption {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; justify-items: start; padding: 36px 14px 12px;
  background: linear-gradient(to top, rgba(2, 10, 26, 0.92) 0%, rgba(2, 10, 26, 0.6) 55%, transparent 100%);
}
.st-show-tile figcaption p {
  margin: 0; font-size: 0.84rem; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-show-model {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan-300);
  padding: 3px 8px; border-radius: 999px; background: rgba(2, 10, 26, 0.55); border: 1px solid var(--line-strong);
}
@media (hover: hover) {
  .st-show-tile figcaption p, .st-show-tile figcaption .st-act { opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; }
  .st-show-tile:hover figcaption p, .st-show-tile:hover figcaption .st-act,
  .st-show-tile:focus-within figcaption p, .st-show-tile:focus-within figcaption .st-act { opacity: 1; transform: none; }
}
.st-show-tile[hidden], .st-canvas-head[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .st-show-tile video, .st-show-tile figcaption p, .st-show-tile figcaption .st-act { transition: none; }
  .st-show-tile:hover video { transform: none; }
}

.st-separate { margin: 18px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; color: var(--text-mute); }
.st-separate .ico { flex: none; margin-top: 3px; }

.st-info { display: grid; gap: 10px; margin-top: 18px; }
.st-details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); padding: 0 18px; }
.st-details summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 800; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.st-details summary::-webkit-details-marker { display: none; }
.st-details summary::before { content: '+'; color: var(--cyan-400); font-weight: 800; width: 12px; }
.st-details[open] summary::before { content: '\2212'; }
.st-details summary span { font-weight: 600; font-size: 0.88rem; color: var(--text-mute); }
.st-details > *:last-child { margin-bottom: 18px; }
.st-table-wrap { overflow-x: auto; margin: 12px 0 0; }
.st-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; }
.st-table th, .st-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.st-table th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.st-rules { color: var(--text-dim); line-height: 1.6; padding-left: 20px; margin-top: 0; }
.st-rules li + li { margin-top: 8px; }
.st-rules strong { color: var(--text); }

.st-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(2, 10, 26, 0.72); backdrop-filter: blur(4px); }
.st-modal[hidden] { display: none; }
.st-modal-card { position: relative; width: min(560px, 100%); padding: 24px; border-radius: 18px; background: var(--navy-850); border: 1px solid var(--line-strong); box-shadow: var(--shadow); display: grid; gap: 12px; }
.st-modal-card h2 { margin: 0; font-size: 1.35rem; }
.st-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--text-dim); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.st-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 480px) { .st-packs { grid-template-columns: 1fr; } }
.st-pack {
  position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer; font: inherit; color: var(--text);
  padding: 18px 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-strong);
}
.st-pack:hover:not(:disabled) { border-color: var(--amber-500); }
.st-pack:disabled { cursor: not-allowed; opacity: 0.6; }
.st-pack.is-popular { border-color: var(--amber-500); }
.st-pack-tag { position: absolute; top: -9px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--navy-950); background: var(--amber-500); }
.st-pack b { font-size: 1.5rem; font-family: var(--font-display); }
.st-pack-credits { font-size: 0.85rem; font-weight: 700; color: var(--text-dim); }
.st-pack-eg { font-size: 0.75rem; color: var(--text-mute); line-height: 1.35; }

/* studio: plans */
.st-modal-card { width: min(680px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.st-buy-section { display: grid; gap: 10px; }
.st-buy-section + .st-buy-section { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.st-buy-section h3 { margin: 0; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.st-buy-section h3 span { font-size: 0.84rem; font-weight: 600; color: var(--text-mute); }
.st-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 520px) { .st-plans { grid-template-columns: 1fr; } }
.st-plan {
  position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer; font: inherit; color: var(--text);
  padding: 18px 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-strong);
}
.st-plan:hover:not(:disabled) { border-color: var(--cyan-500); }
.st-plan:disabled { cursor: not-allowed; opacity: 0.6; }
.st-plan.is-popular { border-color: var(--cyan-500); box-shadow: inset 0 0 0 1px var(--cyan-500); }
.st-plan.is-popular .st-pack-tag { background: var(--cyan-500); }
.st-plan-name { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-300); }
.st-plan b { font-size: 1.5rem; font-family: var(--font-display); }
.st-plan b small { font-size: 0.8rem; font-weight: 600; color: var(--text-mute); font-family: inherit; }
.st-plan-note { font-size: 0.75rem; font-weight: 600; color: var(--text-mute); }
.st-current { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--cyan-500); }
.st-current b { font-size: 1.1rem; }
.st-current .btn { justify-self: start; }
.st-plan-badge {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
  color: var(--navy-950); background: var(--cyan-500);
}
.st-plan-badge[hidden] { display: none; }

/* /critics: films that need reviews */
.wanted li { margin: 7px 0; }
.wanted .dim { color: var(--text-dim); font-size: 0.92rem; margin-left: 6px; }
.wanted a[target] { margin-left: 8px; font-size: 0.92rem; white-space: nowrap; }