/* ═══════════════════════════════════════════════════════════════════════
   Entity hub. Built on the movie-page design language, not a new one:
   flat sections separated by hairline rules, 10px uppercase micro-labels,
   .bo-table for tabular data, .compare-bar + a gauge for profitability.
   No boxed cards except where the site already boxes (analysis cards and
   the poster-fan comparison cards).
   ═══════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text-body);font-family:-apple-system,"system-ui","SF Pro Text","Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
em{font-style:italic}

/* ── mockup chrome (not part of the design) ── */
.topbar{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border-light)}
[data-theme="light"] .topbar{background:rgba(250,250,250,.88)}
.topbar-in{max-width:1200px;margin:0 auto;padding:11px 64px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar-t{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.mock-intro{max-width:1200px;margin:0 auto;padding:40px 64px 4px}
.mock-intro-k{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-green-text)}
.mock-intro h1{font-size:26px;font-weight:800;color:var(--text-primary);margin:8px 0 10px;letter-spacing:-.015em}
.mock-intro p{font-size:13.5px;color:var(--text-muted);line-height:1.65;max-width:78ch}
.mock-intro p+p{margin-top:8px}
.mock-for{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.mock-for span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-green-text);border:1px solid var(--accent-green-border);background:var(--accent-green-bg);border-radius:100px;padding:4px 11px}
.mock-end{max-width:1200px;margin:0 auto;padding:30px 64px 70px;font-size:12px;color:var(--text-xfaint);line-height:1.6}

/* ── page rhythm: lifted from the movie pages ── */
.section{max-width:1200px;margin:0 auto;padding:30px 64px 34px}
.section-divider{height:1px;background:var(--border-subtle);background-clip:content-box;box-sizing:border-box;max-width:1200px;margin:0 auto;padding:0 64px}
.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-header h2{font-size:16px;font-weight:600;color:var(--text-body)}
.section-meta{font-size:11.5px;color:var(--text-xfaint);white-space:nowrap}
.section-link{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);text-decoration:none;white-space:nowrap;transition:color .15s}
.section-link:hover{color:var(--accent-green-text)}
.card-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--text-faint);border-bottom:1px solid var(--border-subtle);padding-bottom:9px;margin-bottom:16px}
.card-title.no-rule{border-bottom:none;text-align:center;margin-bottom:10px}
.note{font-size:11.5px;color:var(--text-xfaint);line-height:1.6;margin-top:16px;max-width:82ch}
.note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-faint)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px 44px}

/* ── banner ──────────────────────────────────────────────────────────────
   The movie hero's backdrop treatment and the homepage hero-v2's centred
   stack, rather than a layout of its own: full-bleed cover image, the two
   radial washes, the tuned two-gradient fade, then kicker / title / sub /
   CTAs centred over it. The fade curve below is copied stop-for-stop from
   .hero-bg::after in assets/movie.css — the one change is that the stops
   read from --fade-rgb instead of a hardcoded 10,10,10, so the bottom
   still lands on the page background in light mode. Do not "simplify" the
   stop list: the five-stop version it replaced drew a visible shelf across
   the middle of any flat backdrop. */
:root{--fade-rgb:10,10,10}
[data-theme="light"]{--fade-rgb:250,250,250}
/* No top margin (Sep 10 2026). It was margin-top:34px, which left a 34px strip
   of bare page background above the banner with the transparent nav straddling
   its edge: the logo and Sign up pill sat half on black, half on the image, so
   every hub looked like its backdrop had a letterbox bar cut into the top
   (most obvious on the dark Dark Knight still on /studios/ and Warner Bros.).
   The movie hero this copies starts at 0 under the nav, and so does this now;
   .hero-in's 118px / 72px top padding already clears the nav. */
.hero{position:relative;width:100%;min-height:58vh;display:flex;align-items:flex-end;overflow:hidden;margin-top:0}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-bg::before{content:'';position:absolute;inset:0;z-index:1;background:
  radial-gradient(ellipse 80% 50% at 70% 20%, rgba(59,130,246,.10), transparent),
  radial-gradient(ellipse 60% 40% at 30% 70%, rgba(139,92,246,.08), transparent)}
.hero-bg::after{content:'';position:absolute;inset:0;z-index:2;background:
  linear-gradient(to bottom,
    rgba(var(--fade-rgb),.30) 0%, rgba(var(--fade-rgb),.27) 8%, rgba(var(--fade-rgb),.19) 18%,
    rgba(var(--fade-rgb),.10) 28%, rgba(var(--fade-rgb),.035) 36%, rgba(var(--fade-rgb),0) 44%),
  linear-gradient(to top,
    rgb(var(--fade-rgb)) 0%, rgba(var(--fade-rgb),.97) 8%, rgba(var(--fade-rgb),.90) 16%,
    rgba(var(--fade-rgb),.80) 24%, rgba(var(--fade-rgb),.67) 32%, rgba(var(--fade-rgb),.53) 40%,
    rgba(var(--fade-rgb),.40) 48%, rgba(var(--fade-rgb),.28) 56%, rgba(var(--fade-rgb),.18) 64%,
    rgba(var(--fade-rgb),.105) 72%, rgba(var(--fade-rgb),.055) 80%, rgba(var(--fade-rgb),.022) 88%,
    rgba(var(--fade-rgb),0) 100%)}
.hero-in{position:relative;z-index:3;width:100%;max-width:900px;margin:0 auto;
  padding:118px 40px 46px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-fan{display:flex;margin-bottom:22px;padding-left:26px}
.hero-fan img{display:block;width:60px;height:90px;border-radius:6px;object-fit:cover;border:2px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.6);background:var(--bg-tertiary);transition:border-color .15s}
/* posters are links (Sep 2026), so the fan geometry sits on the child, not the img */
.hero-fan > *{margin-left:-26px;position:relative;transition:transform .15s}
.hero-fan > :nth-child(1){transform:rotate(-8deg)}
.hero-fan > :nth-child(2){transform:rotate(-3deg) translateY(-4px)}
.hero-fan > :nth-child(3){transform:rotate(3deg) translateY(-4px)}
.hero-fan > :nth-child(4){transform:rotate(8deg)}
.hero-fan > a:hover{z-index:2}
.hero-fan > a:hover img{border-color:rgba(255,255,255,.45)}
.hero-mark{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:22px;padding:14px 26px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
[data-theme="light"] .hero-mark{border-color:rgba(15,23,42,.18);background:rgba(15,23,42,.04)}
.hero-mark b{font-size:19px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;line-height:1}
[data-theme="light"] .hero-mark b{color:#0f172a}
.hero-mark i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55)}
[data-theme="light"] .hero-mark i{color:rgba(15,23,42,.55)}
.mock-for span{color:var(--text-faint);border:1px solid var(--border-light);background:transparent}
.mock-for span.on{color:var(--accent-green-text);border-color:var(--accent-green-border);background:var(--accent-green-bg)}
.hero-port{width:104px;height:104px;border-radius:50%;object-fit:cover;margin-bottom:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14);background:var(--bg-tertiary)}
.hero-kick{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:14px}
[data-theme="light"] .hero-kick{color:rgba(15,23,42,.55)}
.hero-name{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1.08;color:#fff;
  margin:0;text-shadow:0 2px 24px rgba(0,0,0,.6)}
[data-theme="light"] .hero-name{color:#0f172a;text-shadow:none}
.hero-sub{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:15px;color:rgba(255,255,255,.55);margin-top:12px}
[data-theme="light"] .hero-sub{color:rgba(15,23,42,.6)}
.hero-sub .dot{opacity:.3}
/* headline figures, flat and de-chipped like .hero-scores on a movie page */
.hero-stats{display:flex;gap:12px 30px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.hero-stat{display:flex;align-items:baseline;gap:8px;font-size:14px;color:rgba(255,255,255,.5)}
[data-theme="light"] .hero-stat{color:rgba(15,23,42,.55)}
.hero-stat b{font-size:17px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
[data-theme="light"] .hero-stat b{color:#0f172a}
.hero-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.65);text-decoration:none;padding:10px 22px;
  border-radius:100px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  transition:color .2s,border-color .2s,background .2s}
.btn:hover{color:rgba(255,255,255,.95);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
[data-theme="light"] .btn{color:rgba(15,23,42,.7);border-color:rgba(15,23,42,.16);background:rgba(15,23,42,.03)}
[data-theme="light"] .btn:hover{color:#0f172a;border-color:rgba(15,23,42,.3)}
.btn-p{background:#22c55e;color:#052e16;border-color:transparent;font-weight:800}
.btn-p:hover,[data-theme="light"] .btn-p:hover{background:#4ade80;color:#052e16;border-color:transparent}
[data-theme="light"] .btn-p{background:#15803d;color:#fff;border-color:transparent}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ── KPI strip: hairline-separated, not boxed ── */
.kpis{display:grid;grid-template-columns:repeat(6,1fr)}
.kpi{padding:2px 22px;border-left:1px solid var(--border-subtle)}
.kpi:first-child{padding-left:0;border-left:0}
.kpi-l{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-xfaint)}
.kpi-v{font-size:26px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.025em;line-height:1.15;margin-top:7px}
.kpi-v.g{color:var(--accent-green-text)}
.kpi-s{font-size:11px;color:var(--text-faint);margin-top:3px}
/* Two-sentence summary under the KPI strip (SEO pass, Sep 10 2026): the only
   prose on a page that is otherwise tables and charts. */
.hub-lede{max-width:760px;margin:26px 0 0;font-size:14px;line-height:1.7;color:var(--text-secondary)}
.hub-lede b{color:var(--text-primary);font-weight:600}
.hub-lede a{color:var(--text-body);text-decoration:underline;text-decoration-color:var(--border-subtle);text-underline-offset:3px;transition:color .15s}
.hub-lede a:hover{color:var(--accent-green-text);text-decoration-color:currentColor}
@media(max-width:760px){.hub-lede{font-size:13.5px;margin-top:22px}}

/* ── filmography: .bo-table conventions ── */
.film-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
.film-wrap::-webkit-scrollbar{height:6px}
.film-wrap::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}
.film-tbl{width:100%;border-collapse:collapse;font-size:13px}
.film-tbl thead th{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-xfaint);font-weight:500;padding:8px 12px;border-bottom:1px solid var(--border-light);white-space:nowrap}
.film-tbl thead th:first-child{text-align:left;padding-left:0}
.film-tbl th[data-sort]{cursor:pointer;user-select:none;transition:color .15s}
.film-tbl th[data-sort]:hover{color:var(--text-secondary)}
.film-tbl th[data-sort]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;border-radius:3px}
.film-tbl th[aria-sort]{color:var(--accent-green-text)}
.film-tbl th .sc{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:1.5px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;opacity:0;transition:opacity .15s}
.film-tbl th[data-sort]:hover .sc{opacity:.3;border-top:4px solid currentColor}
.film-tbl th[aria-sort="descending"] .sc{opacity:1;border-top:4px solid currentColor;border-bottom:0}
.film-tbl th[aria-sort="ascending"] .sc{opacity:1;border-bottom:4px solid currentColor;border-top:0}
.film-tbl tbody td{padding:13px 12px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.film-tbl tbody td:first-child{text-align:left;padding-left:0;white-space:normal}
.film-tbl tbody tr:hover{background:var(--hover-subtle)}
.film-tbl td.hi{color:var(--text-primary);font-weight:700}
.film-tbl td.g{color:var(--accent-green-bright);font-weight:700}
.film-tbl td.rk{color:var(--text-faint)}
.film-tbl td.rk b{color:var(--text-secondary);font-weight:700}
.ft{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:inherit}
.film-tbl tbody tr[data-href]{cursor:pointer}
.film-tbl tbody tr[data-href]:hover .ft b,.ft:focus-visible b{color:var(--accent-green-text)}
.ft:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:5px}
.ft img{width:48px;height:72px;border-radius:5px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ft b{display:block;font-size:13.5px;font-weight:700;color:var(--text-primary);line-height:1.3}
.ft s{text-decoration:none;display:block;font-size:11px;color:var(--text-xfaint);margin-top:2px}
.tbl-hint{font-size:11.5px;color:var(--text-xfaint);margin-top:12px}

/* ── film by film ─────────────────────────────────────────────────────────
   Chart tokens stepped from the site's own green/blue families until they pass
   the six colour checks against both surfaces. The donut pair (#7aab6d /
   #6a8db8) fails two of them here: the green sits outside the OKLCH lightness
   band and the blue is under the chroma floor (C 0.076), i.e. it reads as grey
   and stops carrying identity.

   Both are stepped as far toward the donut's muted pair as the checks allow —
   the blue is C 0.104 against a 0.10 floor, so there is no room left below it.
   Do not take either further; #7aab6d / #6a8db8 themselves fail. The green was
   muted alongside the blue so the two carry equal weight; a vivid green beside a
   slate blue reads as one series shouting over the other. */
:root{--s-dom:#4f9c62;--s-ww:#5f86c4;--s-grid:rgba(255,255,255,.07);--s-ring:#0a0a0a}
[data-theme="light"]{--s-dom:#337a4c;--s-ww:#456ea8;--s-grid:rgba(15,23,42,.09);--s-ring:#fafafa}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-light);border-radius:7px;padding:6px 12px;background:transparent;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s,background .15s}
.chip:hover{color:var(--text-primary);border-color:var(--border-medium)}
.chip.on{color:var(--accent-green-text);border-color:var(--accent-green-border);background:var(--accent-green-bg)}
.chart{position:relative}
.plot{position:relative;height:264px}
.cx{width:100%;height:100%;display:block}
.gl{stroke:var(--s-grid);stroke-width:1;vector-effect:non-scaling-stroke}
/* axis labels live in HTML so they keep their size at every width */
.yl{position:absolute;left:0;width:46px;text-align:right;transform:translateY(-50%);font-size:10.5px;font-weight:600;color:var(--text-xfaint);font-variant-numeric:tabular-nums;pointer-events:none}
.seg.g{fill:var(--s-dom)}
.seg.b{fill:var(--s-ww)}
/* Columns are HTML (Sep 2026): each .col is its band's full-height slice of the
   plot and the link; .bar inside uses the rail poster's sizing rule exactly
   (band - 8px or 70% of it, max 46px; 34px on phones) so column and poster match in width. */
.col{position:absolute;bottom:0;display:flex;align-items:flex-end;justify-content:center;text-decoration:none;color:inherit;cursor:pointer;border-radius:4px}
/* same width rule as .rail img: 4px air each side, or 70% of the band once bands get narrow (30+ films on a phone) */
.bar{display:flex;flex-direction:column;gap:2px;width:max(70%,calc(100% - 8px));max-width:46px;min-height:0}
.bar .seg{display:block;flex-basis:0;flex-shrink:1;min-height:0;transition:opacity .15s}
.bar .seg:first-child{border-radius:4px 4px 0 0}
.bar .seg.g{background:var(--s-dom)}
.bar .seg.b{background:var(--s-ww)}
.col:hover .seg,.col:focus-visible .seg{opacity:.82}
.col:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* Rail posters are sized off the band in %, capped at 46px, so they scale with
   the chart and never collide; the title sits under each one because a 46px
   poster is still not an identification on its own. */
.rail--noname{height:88px}
.rail{position:relative;height:132px;border-top:1px solid var(--border-subtle);margin-top:2px;padding-top:11px}
.rail > *{position:absolute;top:11px;text-decoration:none;color:inherit;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;box-sizing:border-box;padding:0}
.rail img{width:max(70%,calc(100% - 8px));max-width:46px;aspect-ratio:2/3;height:auto;border-radius:4px;object-fit:cover;background:var(--bg-tertiary);box-shadow:0 3px 10px rgba(0,0,0,.45);opacity:.88;transition:opacity .15s,transform .15s}
.rail > a:hover img,.rail > a:focus-visible img{opacity:1;transform:translateY(-2px)}
.rail b{padding:0 4px;box-sizing:border-box;max-width:100%;font-size:9.5px;font-weight:700;line-height:1.15;height:22px;color:var(--text-tertiary);text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .15s}
.rail > a:hover b,.rail > a:focus-visible b{color:var(--text-primary)}
.rail i{font-style:normal;font-size:9.5px;font-weight:600;color:var(--text-xfaint);font-variant-numeric:tabular-nums;margin-top:-2px}
@media(max-width:700px){.rail{height:80px}.rail b{display:none}.rail img{max-width:34px}.bar{max-width:34px}}
.chart-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-top:14px;font-size:11.5px;color:var(--text-muted)}
.key{display:flex;gap:18px;flex-wrap:wrap}
.key span{display:inline-flex;align-items:center;gap:8px}
.key i{width:16px;height:3px;border-radius:2px;display:block}
.key i.g{background:var(--s-dom)}
.key i.b{background:var(--s-ww)}
.tt{position:absolute;z-index:80;pointer-events:none;background:var(--bg-elevated);border:1px solid var(--border-medium);border-radius:10px;padding:11px 13px;box-shadow:var(--shadow-elevated);min-width:186px}
.tt b{display:block;font-size:13px;font-weight:800;color:var(--text-primary);line-height:1.25}
.tt s{text-decoration:none;display:block;font-size:10.5px;color:var(--text-xfaint);margin:1px 0 9px;font-variant-numeric:tabular-nums}
.tt u{text-decoration:none;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-muted);padding:2px 0}
.tt u i{width:9px;height:9px;border-radius:2px;display:block;flex-shrink:0}
.tt u i.g{background:var(--s-dom)}
.tt u i.b{background:var(--s-ww)}
.tt u em{font-style:normal;margin-left:auto;color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}
.tt u.tot{margin-top:5px;padding-top:7px;border-top:1px solid var(--border-subtle);padding-left:17px}

/* ── profitability: the movie page's own treatment ── */
.gauge{text-align:center;padding:2px 0 20px}
.gauge-l{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-xfaint);margin-bottom:8px;font-weight:600}
.gauge-v{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;color:#e5e7eb;letter-spacing:-.02em}
[data-theme="light"] .gauge-v{color:var(--text-primary)}
.gauge-s{font-size:13px;color:var(--text-muted);margin-top:5px}
.cbar{margin-bottom:14px}
.cbar-l{font-size:12px;color:var(--text-muted);margin-bottom:5px;display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;font-variant-numeric:tabular-nums}
.cbar-t{height:24px;background:var(--border-light);border-radius:6px;overflow:hidden}
.cbar-f{height:100%;border-radius:6px}
.breakeven{font-size:11px;color:var(--text-faint);text-align:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.donut{display:flex;flex-direction:column;align-items:center;gap:14px}
.donut svg{display:block;max-width:100%;height:auto}
.donut-key{display:flex;gap:10px 20px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--text-muted)}
.donut-key span{display:inline-flex;align-items:center;gap:8px}
.donut-key i{width:11px;height:11px;border-radius:3px;display:block}
.donut-key b{color:var(--text-secondary);font-weight:700;font-variant-numeric:tabular-nums}

/* per-film return, measured against the site's stated 2.5x breakeven */
.roi{margin-top:6px}
.roi-r{display:grid;grid-template-columns:232px 1fr 54px;align-items:center;gap:16px;padding:7px 0;border-bottom:1px solid var(--border-subtle)}
.roi-r:last-child{border-bottom:0}
.roi-f{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;text-decoration:none;color:inherit}
.roi-f:hover b,.roi-f:focus-visible b{color:var(--accent-green-text)}
.roi-x{min-width:0;overflow:hidden}
.roi-f img{width:26px;height:39px;border-radius:3px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}
.roi-f b{font-size:12.5px;font-weight:700;color:var(--text-primary);line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.roi-f s{text-decoration:none;display:block;font-size:10px;color:var(--text-xfaint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roi-t{position:relative;height:18px;background:var(--border-light);border-radius:5px;overflow:hidden}
.roi-f-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.roi-mark{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--text-xfaint)}
.roi-v{text-align:right;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.roi-scale{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;font-size:10px;color:var(--text-xfaint);font-variant-numeric:tabular-nums;margin-top:9px;padding-top:8px;border-top:1px solid var(--border-subtle)}
.roi-scale span{display:inline-flex;align-items:center;gap:7px}
.roi-scale i{display:inline-block;width:1px;height:11px;background:var(--text-faint)}

/* ── records ── */
.rec{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.rec-r{display:grid;grid-template-columns:42px 1fr auto;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--border-subtle);text-decoration:none;color:inherit}
.rec-r:hover .rec-t{color:var(--accent-green-text)}
.rec-r:hover .rec-l{color:var(--text-secondary)}
.rec-t,.rec-l{transition:color .15s}
.rec-n{font-size:15px;font-weight:800;color:var(--accent-green-bright);font-variant-numeric:tabular-nums;text-align:right}
.rec-b{min-width:0}
.rec-t{display:block;font-size:13.5px;font-weight:700;color:var(--text-primary);line-height:1.25}
.rec-l{display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px}
.rec-v{font-size:12.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── what's next ── */
.nx-empty{font-size:13px;color:var(--text-muted);line-height:1.6;border-left:2px solid var(--border-medium);padding:3px 0 3px 15px;max-width:80ch}
.nx-demo{margin-top:22px;padding-top:18px;border-top:1px dashed var(--border-medium)}
.nx-demo-l{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-xfaint);margin-bottom:14px}
/* Coming Soon, ported from index.html so the two modules stay the same object */
.upc-strip{position:relative;padding:0 6px}
.upc-grid{display:grid;gap:14px;position:relative}
.upc-grid::before{content:"";position:absolute;left:6px;right:6px;height:1px;background:var(--border-medium);top:28px;z-index:0}
.upc-col{text-align:center;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;transition:opacity .2s;min-width:0}
.upc-col:hover{opacity:.85}
.upc-date{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);height:18px}
.upc-date{letter-spacing:.16em;color:var(--text-secondary);font-weight:800}
.upc-col--friday .upc-date{color:var(--accent-green-text)}
.upc-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-green-bright);margin:6px 0 16px;position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg)}
.upc-col--friday .upc-dot{box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.upc-col--tbd .upc-dot{background:rgba(255,255,255,.3)}
/* the homepage hardcodes that white; on the light surface it is invisible. Same bug there. */
[data-theme="light"] .upc-col--tbd .upc-dot{background:rgba(15,23,42,.22)}
.upc-poster{width:100%;max-width:158px;aspect-ratio:2/3;border-radius:8px;background:var(--bg-tertiary) center/cover no-repeat;overflow:hidden;border:1px solid var(--border-light);transition:border-color .2s}
.upc-col--friday .upc-poster{border-color:rgba(34,197,94,.45)}
.upc-col:hover .upc-poster{border-color:var(--border-strong)}
.upc-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-top:10px;line-height:1.2;max-width:140px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.upc-studio{font-size:10px;color:var(--text-faint);margin-top:2px;letter-spacing:.02em;max-width:140px}
.upc-fc{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-top:6px}
.upc-fc--tbd{color:var(--text-muted)!important;font-weight:800}
.upc-fc-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-top:1px}
.upc-mob{display:none}
@media(max-width:700px){
  .upc-strip{display:none}
  .upc-mob{display:grid;gap:10px}
  .upc-mrow{display:flex;gap:12px;align-items:center;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--text-primary)}
  .upc-mrow--friday{border-color:rgba(34,197,94,.45)}
  .upc-mrow img{width:36px;height:54px;object-fit:cover;border-radius:4px;flex-shrink:0}
  .upc-mrow .mid{flex:1;min-width:0}
  .upc-mrow .t{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .upc-mrow .st{display:block;font-size:10.5px;color:var(--text-muted);margin-top:2px}
  .upc-mrow .right{text-align:right;flex-shrink:0;line-height:1.5}
  .upc-mrow .dt{display:block;font-size:10px;font-weight:800;color:var(--accent-green-text)}
  .upc-mrow .fc{display:block;font-size:10.5px;color:var(--text-tertiary);font-weight:700}
  .upc-mrow .fc.tbd{color:var(--text-muted)}
}
.nx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.nx{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:9px 0;border-top:1px solid var(--border-subtle)}
.nx:hover b{color:var(--accent-green-text)}
.nx img{width:32px;height:48px;border-radius:4px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}
.nx b{display:block;font-size:12.5px;font-weight:700;color:var(--text-primary);line-height:1.25;transition:color .15s}
.nx s{text-decoration:none;display:block;font-size:10.5px;color:var(--text-xfaint);margin-top:2px;font-variant-numeric:tabular-nums}

/* ── related news: the /analysis card ── */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.news-c{background:var(--bg-card);border-radius:12px;border:1px solid var(--border-subtle);overflow:hidden;display:block;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.news-c:hover{transform:translateY(-3px);box-shadow:var(--shadow-elevated)}
.news-img{display:block;width:100%;height:132px;overflow:hidden;background:var(--bg-tertiary)}
.news-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.news-b{display:block;padding:14px}
.news-tag{display:block;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:5px}
.news-t{display:block;font-size:15px;font-weight:800;color:var(--text-primary);line-height:1.3;margin-bottom:7px}
.news-d{display:block;font-size:11px;color:var(--text-muted);font-weight:600}

/* ── comparisons: the site's poster-fan card ── */
.cmps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fcard{border:1px solid var(--border-subtle);border-radius:14px;padding:20px 20px 18px;background:transparent;display:flex;gap:22px;align-items:center;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.fcard:hover{border-color:var(--border-strong);background:var(--hover-bg)}
.fan{display:flex;flex-shrink:0;width:203px;justify-content:center;padding:8px 4px 4px 8px}
.fan img{display:block;width:68px;height:102px;border-radius:7px;object-fit:cover;border:2px solid var(--bg);margin-left:-27px;box-shadow:0 8px 22px rgba(0,0,0,.42);background:var(--bg-card)}
.fan img:first-child{margin-left:0}
.fan img:nth-child(1){transform:rotate(-7deg)}
.fan img:nth-child(2){transform:rotate(-2deg) translateY(-4px)}
.fan img:nth-child(3){transform:rotate(3deg)}
.fan img:nth-child(4){transform:rotate(8deg) translateY(3px)}
[data-theme="light"] .fan img{box-shadow:0 8px 22px rgba(15,23,42,.18)}
.fc-tx{min-width:0}
.fc-eb{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.fc-t{display:block;font-size:15.5px;font-weight:800;color:var(--text-primary);line-height:1.3;margin-top:2px}
.fc-m{display:block;font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.45}

/* ── around the work: the cast & crew key/value idiom ── */
.kv-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:12.5px}
.kv-row:last-child{border-bottom:0}
.av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--text-muted);background:var(--bg-tertiary);border:1px solid var(--border-subtle)}
.kv-row b{flex:1;color:var(--text-primary);font-weight:700;min-width:0}
.kv-row s{text-decoration:none;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.dist{margin-bottom:14px}
.dist-l{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;font-size:12px;margin-bottom:6px}
.dist-l span:first-child{color:var(--text-tertiary)}
.dist-l span:last-child{color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}
.dist-t{height:8px;border-radius:5px;background:var(--border-light);overflow:hidden}
.dist-f{display:block;height:100%;border-radius:5px;background:var(--accent-green)}

@media(max-width:1000px){
  .kpis{grid-template-columns:repeat(3,1fr);gap:20px 0}
  .kpi:nth-child(4){padding-left:0;border-left:0}
  .split,.rec{grid-template-columns:1fr}
  .rec{gap:0}
  .news{grid-template-columns:repeat(2,1fr)}
  .cmps{grid-template-columns:1fr}
  .nx-grid{grid-template-columns:repeat(2,1fr);gap:0 24px}
}
@media(max-width:470px){
  .fcard{flex-direction:column;align-items:flex-start;gap:14px;padding:16px}
  .fan{width:auto;max-width:100%;justify-content:flex-start;padding:4px 0 2px 6px}
  .fan img{width:46px;height:69px;margin-left:-18px;border-width:1.5px}
  .fc-t{font-size:14px}
  .hero-name{font-size:22px}
  .hero-in{padding-top:72px}
  .hero-stat{font-size:11.5px}
  .gauge-v{font-size:31px}
  .gauge-s{font-size:12px}
  .kpi-v{font-size:19px}
  .mock-intro h1{font-size:21px}
  .section-header{flex-wrap:wrap;gap:6px 12px}
  .chips{width:100%}
  .rec-r{grid-template-columns:34px 1fr;gap:10px}
  .rec-v{grid-column:2;font-size:11.5px;margin-top:2px}
  .nx-demo-l,.news-t{overflow-wrap:anywhere}
  .section-meta,.section-link{white-space:normal}
}
@media(max-width:760px){
  .section,.section-divider,.hero-in,.mock-intro,.mock-end,.topbar-in{padding-left:18px;padding-right:18px}
  .section{padding-top:24px;padding-bottom:26px}
  .hero{min-height:auto}
  .hero-in{padding:88px 18px 34px}
  .hero-port{width:74px;height:74px;margin-bottom:16px}
  .hero-fan{padding-left:19px;margin-bottom:16px}
  .hero-fan img{width:44px;height:66px}
  .hero-fan > *{margin-left:-19px}
  .hero-mark{margin-bottom:16px;padding:11px 18px}
  .hero-mark b{font-size:15px;letter-spacing:.12em}
  .hero-mark i{font-size:8px;letter-spacing:.24em}
  .hero-kick{font-size:9.5px;letter-spacing:.14em;margin-bottom:11px}
  .hero-name{font-size:27px}
  .hero-sub{font-size:13px;gap:6px;margin-top:10px}
  .hero-stats{gap:10px 20px;margin-top:16px}
  .hero-stat{font-size:12.5px}
  .hero-stat b{font-size:15px}
  .hero-act{margin-top:20px;gap:8px}
  .btn{padding:9px 15px;font-size:10.5px;letter-spacing:.03em}
  .kpis{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .kpi{padding:0 16px}
  .kpi:nth-child(odd){padding-left:0;border-left:0}
  .kpi-v{font-size:22px}
  .film-tbl{font-size:12px;min-width:660px}
  .film-tbl tbody td,.film-tbl thead th{padding:10px 8px}
  .ft img{width:38px;height:57px}
  .plot{height:190px}
  .yl{width:34px;font-size:9.5px}
  .rail i{font-size:8.5px}
  .news,.nx-grid{grid-template-columns:1fr}
  .roi-r{grid-template-columns:auto 1fr auto;gap:9px 10px;padding:11px 0}
  .roi-f{grid-column:1 / 3;grid-row:1;overflow:visible}
  .roi-x{overflow:visible}
  .roi-f b{white-space:normal}
  .roi-f s{white-space:normal}
  .roi-v{grid-column:3;grid-row:1;align-self:center}
  .roi-t{grid-column:1 / -1;grid-row:2}
  .roi-scale{font-size:9.5px}
  .fan{width:170px}
  .fan img{width:56px;height:84px;margin-left:-22px}
  .fc-t{font-size:14.5px}
}

/* ── /people/ landing ─────────────────────────────────────────────────────
   The directory for the 163 hub pages. Same flat vocabulary as the hubs
   themselves: no boxes, a hairline under each row, the face doing the work of
   an icon. Sorted by lifetime worldwide, so it opens on names people know. */
/* The directory reuses the hub .hero, minus the stat row and buttons a person
   page carries, so it is shorter without being a different component. */
.hero-lite{min-height:330px}
.hero-lite .hero-in{padding-bottom:54px}
.pl-sub{max-width:var(--page-max,1240px);margin:0 auto;padding:26px 64px 0;font-size:13.5px;line-height:1.65;color:var(--text-muted);box-sizing:border-box}
.pl-sub{max-width:min(var(--page-max,1240px),100%)}
/* ── Sort toggle above the directory grid ────────────────────────────────
   Same control as the Domestic/Worldwide switch on /yearly/. Its rules live
   inline in that page rather than in any shared stylesheet, so they are
   restated here; keep the two looking alike if either changes. The bar sits
   flush right above the grid and shares the grid's own side padding, so the
   buttons line up with the last column rather than floating. */
.pl-bar{max-width:var(--page-max,1240px);margin:0 auto;padding:18px 64px 0;
  box-sizing:border-box;display:flex;justify-content:flex-end}
.pl-bar + .pl-grid{padding-top:10px}
.toggle-group{display:flex;border-radius:6px;overflow:hidden;border:1px solid var(--border-medium)}
.toggle-btn{padding:5px 14px;font-size:12px;font-family:inherit;font-weight:500;
  background:transparent;color:var(--text-muted);border:none;cursor:pointer;transition:all .2s}
.toggle-btn:not(:last-child){border-right:1px solid var(--border-medium)}
.toggle-btn:hover{color:var(--text-primary)}
.toggle-btn.active{background:var(--accent-green-bg);color:var(--accent-green-text)}
.toggle-btn.active:hover{color:var(--accent-green-text)}
.pl-grid{max-width:var(--page-max,1240px);margin:0 auto;padding:22px 64px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:0 40px}
.pl-c{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border-subtle);text-decoration:none;color:inherit;min-width:0}
.pl-c:hover .pl-n{color:var(--accent-green-text)}
.pl-c:hover .pl-port{border-color:var(--border-strong)}
.pl-port{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 22%;background:var(--bg-tertiary);flex-shrink:0;border:1px solid var(--border-light);transition:border-color .15s}
/* No portrait on file — their biggest poster, cropped to the same circle, so
   the row keeps its rhythm instead of leaving a hole. */
.pl-ph{display:block;overflow:hidden;padding:0}
.pl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pl-b{min-width:0;flex:1}
.pl-n{display:block;font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.25;transition:color .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-m{display:block;font-size:10.5px;color:var(--text-xfaint);margin-top:2px;font-variant-numeric:tabular-nums}
.pl-g{display:block;font-size:12px;font-weight:700;color:var(--text-secondary);margin-top:4px;font-variant-numeric:tabular-nums}
.pl-g s{text-decoration:none;font-weight:500;color:var(--text-xfaint);font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-left:5px}
@media(max-width:900px){.pl-sub{padding:20px 20px 0}.pl-bar{padding:16px 20px 0}.pl-grid{padding:18px 20px 44px;gap:0 24px}}
@media(max-width:700px){.pl-grid{grid-template-columns:1fr}}

/* ── Connected: the other hubs a filmography touches ────────────────────── */
.cx{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px 44px}
.cx-g{min-width:0}
.cx-r{display:flex;flex-wrap:wrap;gap:7px}
.cx-c{display:inline-flex;align-items:baseline;gap:7px;padding:6px 11px;border:1px solid var(--border-light);border-radius:99px;font-size:12.5px;font-weight:600;color:var(--text-secondary);text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.cx-c:hover{color:var(--accent-green-text);border-color:var(--accent-green-border);background:var(--accent-green-bg)}
.cx-c i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--text-xfaint);font-variant-numeric:tabular-nums}
.cx-c:hover i{color:var(--accent-green-text)}
@media(max-width:700px){.cx{grid-template-columns:1fr;gap:20px}}

/* ── Follow (hero) — account/follow.js, migration 0025 ─────────────────────
   Ghost pill beside the green Compare button. Signed out it is a link to
   /signup/?next=; for a member it toggles Follow / Following. min-width keeps
   the pill the same size in both states so the centred row does not shift. */
.btn-follow{cursor:pointer;justify-content:center;min-width:9.6em;user-select:none;-webkit-user-select:none}
.bf-ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-follow .bf-ic-on{display:none}
.btn-follow.is-on{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(34,197,94,.1)}
.btn-follow.is-on:hover{color:#86efac;border-color:rgba(74,222,128,.7);background:rgba(34,197,94,.16)}
.btn-follow.is-on .bf-ic-on{display:block}
.btn-follow.is-on .bf-ic-off{display:none}
[data-theme="light"] .btn-follow.is-on{color:#15803d;border-color:rgba(21,128,61,.4);background:rgba(21,128,61,.07)}
[data-theme="light"] .btn-follow.is-on:hover{color:#166534;border-color:rgba(21,128,61,.6)}
.btn-follow.is-saving{opacity:.7;pointer-events:none}
.bf-toast{position:fixed;left:0;right:0;bottom:24px;z-index:9999;margin:0 auto;box-sizing:border-box;
  width:max-content;max-width:min(460px,calc(100vw - 32px));
  transform:translateY(16px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:12px;font-size:13.5px;line-height:1.45;font-weight:500;
  color:#f8fafc;background:rgba(15,23,42,.94);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:opacity .22s,transform .22s}
.bf-toast.is-on{opacity:1;transform:translateY(0)}
[data-theme="light"] .bf-toast{color:#0f172a;background:rgba(255,255,255,.97);border-color:rgba(15,23,42,.12);box-shadow:0 18px 50px rgba(15,23,42,.18)}
@media(max-width:700px){.btn-follow{min-width:8.6em}.bf-ic{width:12px;height:12px}.bf-toast{bottom:16px}}
@media(prefers-reduced-motion:reduce){.bf-toast{transition:none}}