/* Reel Critix 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);
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 96px; }

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

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--text-dim);
  padding: 10px 15px; border-radius: 999px;
  font-size: 1rem; font-weight: 600;
  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); }

.nav-cta {
  background: var(--amber-500) !important; color: var(--navy-950) !important;
  padding: 11px 20px !important; font-weight: 700 !important;
}
.nav-cta:hover { background: var(--amber-400) !important; }

.menu-toggle {
  display: none;
  background: none; border: 1px solid var(--line-strong);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 1rem; font-weight: 600; cursor: pointer;
}

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-elev); border-bottom: 1px solid var(--line);
    padding: 12px 22px 18px; box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 16px; border-radius: var(--radius-sm); }
}

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

.hero {
  position: relative; overflow: hidden;
  padding-block: 84px 64px;
  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; }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 800;
  margin: 0 0 20px; max-width: 16ch;
}
.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.15rem, 2.4vw, 1.45rem); color: var(--text-dim); max-width: 46ch; margin: 0 0 34px; }
.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; }

.promise { display: grid; gap: 18px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.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: 72px; }
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: 32px;
}
.section-head h1, .section-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  letter-spacing: -0.028em; margin: 0; line-height: 1.12;
}
.section-head p { margin: 10px 0 0; color: var(--text-dim); font-size: 1.05rem; max-width: 62ch; }
.section-head a.more { color: var(--cyan-400); text-decoration: none; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.section-head a.more:hover { color: var(--cyan-300); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 720px) {
  .wrap { padding-inline: 18px; }
  .site-header .wrap { gap: 12px; min-height: 76px; }
  .brand { min-width: 150px; max-width: 230px; }

  .btn-signin { padding: 8px 14px; font-size: 0.92rem; }
  .menu-toggle { padding: 9px 13px; font-size: 0.94rem; }
  /* Source order puts the toggle before the account control; on a phone the menu belongs
     at the outside edge where a thumb reaches it. */
  .account-widget { order: 1; }
  .menu-toggle { order: 2; }

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

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

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

  .section-head { margin-bottom: 22px; }
  .section-head h1, .section-head h2 { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .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; }