/* ═══════════════════════════════════════════════════════════════════════
   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:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--text-faint)}
.mock-intro{max-width:1200px;margin:0 auto;padding:40px 64px 4px}
.mock-intro-k{font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);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:var(--bow-ls-tight,-0.02em)}
.mock-intro p{font-size:var(--bow-fs-3,13px);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:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--accent-green-text);border:1px solid var(--accent-green-border);background:var(--accent-green-bg);border-radius:var(--bow-r-full,999px);padding:4px 11px}
.mock-end{max-width:1200px;margin:0 auto;padding:30px 64px 70px;font-size:var(--bow-fs-2,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}
.note{font-size:var(--bow-fs-2,12px);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:var(--bow-fs-1,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:var(--bow-r-md,8px);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 var(--bow-dur-1,150ms)}
/* 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 var(--bow-dur-1,150ms)}
.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:var(--bow-r-md,8px);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:var(--bow-fs-5,17px);font-weight:800;letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:#fff;line-height:1}
[data-theme="light"] .hero-mark b{color:#0f172a}
.hero-mark i{font-style:normal;font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--bow-ink-3,#8C8C90)}
[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)}
[data-theme="light"] .hero-name{color:#0f172a;text-shadow:none}
[data-theme="light"] .hero-sub{color:rgba(15,23,42,.6)}
/* headline figures, flat and de-chipped like .hero-scores on a movie page */
.hero-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
/* ── KPI strip: hairline-separated, not boxed ── */
/* 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:var(--bow-fs-4,15px);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 var(--bow-dur-1,150ms)}
.hub-lede a:hover{color:var(--accent-green-text);text-decoration-color:currentColor}
@media(max-width:760px){.hub-lede{font-size:var(--bow-fs-3,13px);margin-top:22px}}
/* ── filmography: .bo-table conventions ── */
/* Collapsed filmography (Sep 11 2026). Every film is in the table; these hide
   the rows past the current step. nth-child, not a class on each row, so a
   re-sort re-picks which rows show without touching the DOM. */
.film-tbl[data-show="20"] tbody tr:nth-child(n+21),
.film-tbl[data-show="50"] tbody tr:nth-child(n+51){display:none}
.film-more button[hidden]{display:none}
.film-tbl th[data-sort]{cursor:pointer;user-select:none;transition:color var(--bow-dur-1,150ms)}
.film-tbl th[data-sort]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;border-radius:var(--bow-r-sm,4px)}
.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 var(--bow-dur-1,150ms)}
.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}
/* the column the table is sorted by; moves with the sort (SORT_JS) */
.film-tbl tbody tr[data-href]{cursor:pointer}
.ft:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--bow-r-sm,4px)}
/* ── 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. */
/* Oct 10 2026: the series are the design system's data colours, no green or blue. */
:root{--s-dom:var(--bow-data-1,#E8E0CF);--s-ww:var(--bow-data-2,#95AEC8);--s-grid:var(--bow-line,rgba(255,255,255,.1));--s-ring:#0a0a0a}
[data-theme="light"]{--s-dom:#B47C52;--s-ww:#95AEC8;--s-grid:rgba(15,23,42,.09);--s-ring:#fafafa}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-light);border-radius:var(--bow-r-md,8px);padding:6px 12px;background:transparent;cursor:pointer;font-family:inherit;transition:color var(--bow-dur-1,150ms),border-color var(--bow-dur-1,150ms),background var(--bow-dur-1,150ms)}
.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}
/* Sideways-scrolling chart on phones (Sep 11 2026). Desktop is unchanged: the
   inner box is min-width:100%, so there is nothing to scroll. Below 700px it
   becomes --cn columns wide (one per film) and the section scrolls, because a
   19-film chart squeezed into 350px gave each film 17px — posters the size of a
   stamp and a year axis that read "198219841985". */
.chart-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;overscroll-behavior-x:contain}
.chart-scroll::-webkit-scrollbar{height:6px}
.chart-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--bow-r-sm,4px)}
.chart-inner{min-width:100%}
/* The scale has to stay put while the columns move, so the y labels live OUTSIDE
   the scroller, in a zero-width overlay pinned to the chart's left edge. Its
   height matches .plot's so the tick percentages land on the same lines. */
.ylw{position:absolute;left:0;top:0;width:0;height:264px;z-index:3;pointer-events:none}
.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:var(--bow-fs-1,11px);font-weight:600;color:var(--text-xfaint);font-variant-numeric:tabular-nums;pointer-events:none}
/* 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:var(--bow-r-sm,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 var(--bow-dur-1,150ms)}
.bar .seg:first-child{border-radius:var(--bow-r-sm,4px) var(--bow-r-sm,4px) 0 0}
.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:var(--bow-r-sm,4px);object-fit:cover;background:var(--bg-tertiary);box-shadow:0 3px 10px rgba(0,0,0,.45);opacity:.88;transition:opacity var(--bow-dur-1,150ms),transform var(--bow-dur-1,150ms)}
.rail > a:hover img,.rail > a:focus-visible img{opacity:1;transform:translateY(-2px)}
@media(max-width:700px){.rail{height:80px}.rail img{max-width:34px}.bar{max-width:34px}
  /* 46px a column + the 58/1000 axis gutter and 30/1000 right pad of the plot */
  .chart-inner{min-width:calc(var(--cn,12) * 46px + 88px)}
  .chart-scroll{margin:0 -18px;padding:0 18px 2px}
  .yl{background:var(--bg);padding-right:5px;border-radius:var(--bow-r-sm,4px)}
  .ylw{height:190px}}
.chart-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-top:14px;font-size:var(--bow-fs-2,12px);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:var(--bow-r-sm,4px);display:block}
.tt{position:absolute;z-index:80;pointer-events:none;background:var(--bg-elevated);border:1px solid var(--border-medium);border-radius:var(--bow-r-md,8px);padding:11px 13px;box-shadow:var(--shadow-elevated);min-width:186px}
.tt b{display:block;font-size:var(--bow-fs-3,13px);font-weight:800;color:var(--text-primary);line-height:1.25}
.tt s{text-decoration:none;display:block;font-size:var(--bow-fs-1,11px);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:var(--bow-fs-2,12px);color:var(--text-muted);padding:2px 0}
.tt u i{width:9px;height:9px;border-radius:var(--bow-r-sm,4px);display:block;flex-shrink:0}
.tt u em{font-style:normal;margin-left:auto;color:var(--text-primary);font-weight:var(--bow-fw-semi,600);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 ── */
.cbar{margin-bottom:14px}
.cbar-l{font-size:var(--bow-fs-2,12px);color:var(--text-muted);margin-bottom:5px;display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;font-variant-numeric:tabular-nums}
.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:var(--bow-fs-2,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:var(--bow-r-sm,4px);display:block}
.donut-key b{color:var(--text-secondary);font-weight:var(--bow-fw-semi,600);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 64px;align-items:center;gap:16px;padding:7px 0;border-bottom:1px solid var(--border-subtle)}
.roi-r:last-child{border-bottom:0}
.roi-more[hidden]{display:none}
.roi-more .roi-r:first-child{border-top:1px solid var(--border-subtle)}
/* Same pill as the records pages' "See more". */
.roi-f{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;text-decoration:none;color:inherit}
.roi-x{min-width:0;overflow:hidden}
.roi-f img{width:26px;height:39px;border-radius:var(--bow-r-sm,4px);object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}
.roi-scale span{display:inline-flex;align-items:center;gap:7px}
/* ── 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-l{color:var(--text-secondary)}
.rec-t,.rec-l{transition:color var(--bow-dur-1,150ms)}
.rec-b{min-width:0}
/* ── what's next ── */
.nx-demo{margin-top:22px;padding-top:18px;border-top:1px dashed var(--border-medium)}
.nx-demo-l{font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--text-xfaint);margin-bottom:14px}
/* Coming Soon, ported from index.html so the two modules stay the same object */
/* the homepage hardcodes that white; on the light surface it is invisible. Same bug there. */
.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:var(--bow-r-sm,4px);object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}
.nx b{display:block;font-size:var(--bow-fs-3,13px);font-weight:var(--bow-fw-semi,600);color:var(--text-primary);line-height:1.25;transition:color var(--bow-dur-1,150ms)}
.nx s{text-decoration:none;display:block;font-size:var(--bow-fs-1,11px);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:var(--bow-r-lg,16px);border:1px solid var(--border-subtle);overflow:hidden;display:block;text-decoration:none;color:inherit;transition:transform var(--bow-dur-2,250ms),box-shadow var(--bow-dur-2,250ms)}
.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:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--text-faint);margin-bottom:5px}
.news-t{display:block;font-size:var(--bow-fs-4,15px);font-weight:800;color:var(--text-primary);line-height:1.3;margin-bottom:7px}
.news-d{display:block;font-size:var(--bow-fs-1,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:var(--bow-r-lg,16px);padding:20px 20px 18px;background:transparent;display:flex;gap:22px;align-items:center;text-decoration:none;color:inherit;transition:border-color var(--bow-dur-1,150ms),background var(--bow-dur-1,150ms)}
.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:var(--bow-r-md,8px);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:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,0.08em);text-transform:uppercase;color:var(--text-faint)}
.fc-t{display:block;font-size:var(--bow-fs-4,15px);font-weight:800;color:var(--text-primary);line-height:1.3;margin-top:2px}
.fc-m{display:block;font-size:var(--bow-fs-2,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:var(--bow-fs-3,13px)}
.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:var(--bow-fs-1,11px);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:var(--bow-fw-semi,600);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:var(--bow-fs-2,12px);margin-bottom:6px}
.dist-l span:first-child{color:var(--text-tertiary)}
.dist-l span:last-child{color:var(--text-primary);font-weight:var(--bow-fw-semi,600);font-variant-numeric:tabular-nums}
.dist-t{height:8px;border-radius:var(--bow-r-sm,4px);background:var(--border-light);overflow:hidden}
.dist-f{display:block;height:100%;border-radius:var(--bow-r-sm,4px);background:var(--accent-green)}

@media(max-width:1000px){.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:var(--bow-fs-4,15px)}
  .hero-in{padding-top:72px}
  .mock-intro h1{font-size:var(--bow-fs-6,22px)}
  .chips{width:100%}
  .rec-r{grid-template-columns:34px 1fr;gap:10px}
  .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}
  /* Was min-height:auto, which collapsed the hero to exactly the height of
     its own text — so the backdrop got no room and the portrait, kicker, name
     and stats sat straight on top of the artwork. The movie pages solve this
     the other way round: their hero GROWS on mobile (70vh -> 85vh), because a
     phone is a tall portrait box and object-fit:cover needs height to show
     anything of a 16:9 still. Same treatment here. */
  .hero{min-height:64vh}
  .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:var(--bow-fs-4,15px);letter-spacing:var(--bow-ls-caps,0.08em)}
  .hero-mark i{font-size:var(--bow-fs-1,11px);letter-spacing:var(--bow-ls-caps,0.08em)}
  .hero-act{margin-top:20px;gap:8px}
  /* The 3-column rule above strips kpi 4's divider, which in two columns is a
     right-hand cell: it lost its rule and its gutter while 2 and 6 kept theirs. */
  .plot{height:190px}
  .yl{width:34px;font-size:var(--bow-fs-1,11px)}
  .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}
  .fan{width:170px}
  .fan img{width:56px;height:84px;margin-left:-22px}
  .fc-t{font-size:var(--bow-fs-4,15px)}
}

/* Phone. Matches .hero's 85vh in assets/movie.css at the same breakpoint, so a
   person page and a movie page give their artwork the same room. The content is
   flex-end aligned, so the extra height all goes to the backdrop above it. */
@media(max-width:600px){
  .hero{min-height:85vh}
  .hero-in{padding-bottom:40px}
  /* The landing hero carries no stat row or buttons, so it keeps its own
     shorter frame rather than inheriting the full-page one. */
  .hero-lite{min-height:46vh}
}

/* ── /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:var(--bow-fs-3,13px);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. */

/* 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}
@media(max-width:900px){.pl-sub{padding:20px 20px 0}}

/* ── 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:var(--bow-r-full,999px);font-size:var(--bow-fs-3,13px);font-weight:600;color:var(--text-secondary);text-decoration:none;transition:color var(--bow-dur-1,150ms),border-color var(--bow-dur-1,150ms),background var(--bow-dur-1,150ms)}
.cx-c i{font-style:normal;font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);color:var(--text-xfaint);font-variant-numeric:tabular-nums}
@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. */
/* One control, two tints, living beside the title in both states (Oct 8 2026).
   It used to be a labelled pill under the scores that swelled to a 145px
   "FOLLOWING" chip once tapped — the loudest thing on the page for something the
   reader had already decided. Now it is a 26px bell: muted while not following,
   green with a filled check badge once following. No border or fill in either
   state; beside a 34px title a chip competes with the name, where a bare mark
   reads as a property of it. */
.btn-follow{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;min-width:0;width:26px;height:26px;padding:0;border:0;
  background:none;border-radius:var(--bow-r-full,999px);vertical-align:middle;margin-left:10px;
  color:var(--bow-ink-3,#8C8C90);transition:color var(--bow-dur-1,150ms)}
.btn-follow:hover{background:none;border:0;color:var(--bow-ink-2,#B5B5B8)}
.btn-follow .bf-l{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The followed bell carries a filled check badge rather than two overlapping
   outlines, which turn to mush at this size. The is-on colours live in the
   shared block below (check-follow-button.py holds those selectors identical
   across movie.css and people.css) — duplicating them here just meant the
   later copy silently won and reintroduced the pill's green fill. */
.btn-follow.is-on .bf-ic{width:18px;height:18px}
.bf-ic{width:18px;height:18px;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:transparent;background:none}
.btn-follow.is-on:hover{color:#86efac;border-color:transparent;background:none}
.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:var(--bow-r-lg,16px);font-size:var(--bow-fs-3,13px);line-height:1.45;font-weight:var(--bow-fw-regular,400);
  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 var(--bow-dur-2,250ms),transform var(--bow-dur-2,250ms)}
.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{margin-left:8px}.bf-ic,.btn-follow.is-on .bf-ic{width:16px;height:16px}.bf-toast{bottom:16px}}
@media(prefers-reduced-motion:reduce){.bf-toast{transition:none}}

/* ═══ DESIGN SYSTEM ROLLOUT — HUBS (Oct 10 2026) ════════════════════════════
   People, studio and franchise hubs and their directories, on the shared
   components in /assets/components.css (linked by the donor movie page's
   head, before this sheet). Markup is in scripts/build-entity-pages.py. The
   old classes stay on the markup as hooks (nav-auth.js analytics, SORT_JS,
   DIR_SORT_JS, freeze.js, check-hubs.py); their old visual rules are gone.
   Nothing here restyles a ds- class: rules below either lay out the hub's own
   wrappers or neutralise a legacy rule from movie.css that would otherwise
   win on specificity. Treatments match the film page (rollout/film.md). */

/* ── Hero: the film page's scrim and phone height cap ──
   The title is .ds-hero__title (44px desktop, 30px phone) and the kicker
   .ds-hero__kicker. The scrim is at least 60% black wherever text sits and
   still runs to the page colour at the bottom. On a phone the hero is capped
   at min(56vh, 480px), as on a film, so the stats land in the first screen
   (it was 85vh). */
.hero--hub .hero-bg::after{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),0) 40%),
  linear-gradient(to top,
    rgb(var(--fade-rgb)) 0%, rgba(var(--fade-rgb),.92) 12%, rgba(var(--fade-rgb),.82) 26%,
    rgba(var(--fade-rgb),.70) 38%, rgba(var(--fade-rgb),.60) 48%, rgba(var(--fade-rgb),.42) 60%,
    rgba(var(--fade-rgb),.22) 74%, rgba(var(--fade-rgb),.08) 88%, rgba(var(--fade-rgb),0) 100%)}
.hero--hub .hero-name{text-shadow:0 2px 24px rgba(0,0,0,.6)}
[data-theme="light"] .hero--hub .hero-name{color:#0f172a;text-shadow:none}
.hero--hub .hero-sub{display:flex;align-items:center;justify-content:center;gap:6px 8px;flex-wrap:wrap;
  margin-top:var(--bow-space-3,12px);font-size:var(--bow-fs-3,13px);line-height:var(--bow-lh-data,1.35);
  color:var(--bow-ink-2,#B5B5B8);text-wrap:balance}
.hero--hub .hero-sub .dot{color:var(--bow-ink-3,#8C8C90)}
[data-theme="light"] .hero--hub .hero-sub{color:rgba(15,23,42,.7)}
/* the inline stats row is centred in the hero; its labels are ink-2 on the scrim */
.hero--hub .hero-stats{justify-content:center;margin-top:var(--bow-space-4,16px)}
.hero--hub .hero-stats .ds-stat__label{color:var(--bow-ink-2,#B5B5B8)}
.hero--hub .hero-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--bow-space-5,24px)}
.hero--hub.hero-lite{min-height:330px}

/* ── Stats under the hero: .ds-stats, 3 across, 2 on a phone ── */
.sec-kpis{padding-top:var(--bow-space-6,32px)}
/* The summary stats under the centred hero are centred (Nate, Oct 11), as on
   film, daily, weekend and yearly pages. Layout only. kpis centred */
.sec-kpis .ds-stat{text-align:center}

/* ── Hub summary meta row (Oct 13 2026) ──────────────────────────────────────
   The summary is three headline numbers + ONE inline secondary line, the same
   shape as the film page's .bo-sum. It used to be six stats in one group, which
   fell to the phone default of two columns and drew a 2x3 hairline grid.
   Mirrors movie.css's .bo-sum .bo-meta rules exactly:
   - 24px top space, because on a phone .ds-stats pulls itself up and down by
     its cell padding and whatever follows must bring its own space or it rides
     up over the values.
   - Centred, so it drops the grid's left-edge clip (that only works on a
     left-aligned row) and the first item's divider instead.
   - Below 380px the dividers go and plain space separates the items, so a row
     that does wrap never starts with a divider. kpi-meta centred */
.sec-kpis .kpi-meta{margin-top:var(--bow-space-5,24px);justify-content:center;margin-left:0;clip-path:none}
.sec-kpis .kpi-meta > .ds-stat:first-child{border-left:0}
@media (max-width:480px){
  .sec-kpis .kpi-meta{--ds-stat-px:var(--bow-space-2,8px);row-gap:var(--bow-space-1,4px)}
  .sec-kpis .kpi-meta > .ds-stat{gap:4px}
}
@media (max-width:379px){
  .sec-kpis .kpi-meta{column-gap:var(--bow-space-4,16px)}
  .sec-kpis .kpi-meta > .ds-stat{border-left:0;padding:0}
}

/* ── Section rhythm: headers are .ds-head (--flush; the section padding keeps
   the spacing). movie.css's `.section-header h2` outranks .ds-head__title on
   specificity, so its colour is put back to ink-1 here. ── */
.section-header.ds-head h2{color:var(--bow-ink-1,#FFFFFF)}
.note,.tbl-hint{font-size:var(--bow-fs-2,12px);line-height:var(--bow-lh-body,1.5);color:var(--bow-ink-3,#8C8C90)}
.tbl-hint{margin-top:var(--bow-space-3,12px)}

/* ── Filmography: .ds-table look in a .ds-table-wrap. freeze.js owns the sticky
   header and film column (data-freeze), so the table is .ds-table--plain. ── */
.film-tbl tbody td{color:var(--bow-ink-2,#B5B5B8)}
.film-tbl tbody td:first-child{min-width:220px}
.film-tbl th[data-sort]:hover{color:var(--bow-ink-2,#B5B5B8)}
/* the sorted column reads in ink-1, header and cells; no green in the data */
.film-tbl th[aria-sort],.film-tbl th[aria-sort]:hover{color:var(--bow-ink-1,#FFFFFF)}
.film-tbl tbody td.on{color:var(--bow-ink-1,#FFFFFF);font-weight:var(--bow-fw-semi,600)}
.film-tbl td.rk{color:var(--bow-ink-3,#8C8C90)}
.film-tbl tbody tr[data-href]:hover .ft b{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--bow-ink-3,#8C8C90)}
.ft{display:flex;align-items:center;gap:var(--bow-space-3,12px);min-width:0;text-decoration:none;color:inherit;padding:var(--bow-space-1,4px) 0}
.ft img{width:32px;height:48px;border-radius:var(--bow-r-sm,4px);object-fit:cover;background:var(--bow-surface-1,#141416);flex:none}
.ft > span{min-width:0}
/* film titles wrap (balanced) rather than truncate; the meta stays one line */
.ft b{display:block;font-size:var(--bow-fs-3,13px);font-weight:var(--bow-fw-semi,600);
  line-height:var(--bow-lh-title,1.3);color:var(--bow-ink-1,#FFFFFF);text-wrap:balance}
.ft s{display:block;text-decoration:none;margin-top:2px;font-size:var(--bow-fs-2,12px);
  color:var(--bow-ink-3,#8C8C90);white-space:nowrap}
/* See more / See less are .ds-link buttons */
.film-more,.roi .see-more-pill{display:flex;gap:var(--bow-space-5,24px);padding-top:var(--bow-space-4,16px)}
.film-more button,.roi-toggle{background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit}

/* ── Film by film: data colours, no green or blue ── */
.bar .seg.g,.key i.g,.tt u i.g{background:var(--s-dom)}
.bar .seg.b,.key i.b,.tt u i.b{background:var(--s-ww)}
.yl{color:var(--bow-ink-3,#8C8C90)}
.chart-cap{color:var(--bow-ink-3,#8C8C90)}
/* Names under the posters: only on charts of 14 films or fewer (the build adds
   .rail--noname past that), up to two balanced lines with an ellipsis. Every
   poster and column names its film in a tooltip either way. */
.rail b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  max-width:100%;max-height:calc(2 * 14px);padding:0 1px;box-sizing:border-box;
  font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);line-height:14px;
  text-align:center;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;
  color:var(--bow-ink-3,#8C8C90);transition:color var(--bow-dur-1,150ms)}
.rail > a:hover b,.rail > a:focus-visible b{color:var(--bow-ink-1,#FFFFFF)}
.rail i{font-style:normal;font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);
  color:var(--bow-ink-3,#8C8C90);font-variant-numeric:tabular-nums;margin-top:-2px}
.rail--noname{height:96px}
/* a poster that fails to load shows nothing rather than its alt text */
.rail img,.hero-fan img{color:transparent}
/* past 26 films the years would touch: every other one is dropped */
.rail--dense > :nth-child(even) i{visibility:hidden}

/* ── Profitability ── */
.gauge{text-align:center;padding:2px 0 20px}
.gauge .ds-stat__label{white-space:normal}
.cbar-l{color:var(--bow-ink-3,#8C8C90)}
.cbar-l span:last-child{color:var(--bow-ink-1,#FFFFFF)}
.cbar-t{height:12px;background:rgba(255,255,255,.06);border-radius:var(--bow-r-sm,4px);overflow:hidden}
.cbar-f{height:100%;border-radius:var(--bow-r-sm,4px)}
.breakeven{font-size:var(--bow-fs-2,12px);color:var(--bow-ink-3,#8C8C90);text-align:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--bow-line,rgba(255,255,255,.1))}
.card-title.no-rule{font-size:var(--bow-fs-2,12px);font-weight:var(--bow-fw-semi,600);
  color:var(--bow-ink-3,#8C8C90);text-align:center;margin-bottom:12px}
.donut-key{color:var(--bow-ink-3,#8C8C90)}
.donut-key b{color:var(--bow-ink-1,#FFFFFF);font-weight:var(--bow-fw-semi,600)}
/* return by film: bars in the data colours (4x+ / past breakeven / under it),
   the multiplier in ink-1 */
.roi{margin-top:var(--bow-space-6,32px)}
.roi-r{border-bottom-color:var(--bow-line,rgba(255,255,255,.1))}
.roi-f:hover b,.roi-f:focus-visible b{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--bow-ink-3,#8C8C90)}
.roi-f img{background:var(--bow-surface-1,#141416)}
.roi-f b{font-size:var(--bow-fs-3,13px);font-weight:var(--bow-fw-semi,600);color:var(--bow-ink-1,#FFFFFF);
  line-height:var(--bow-lh-title,1.3);text-wrap:balance}
.roi-f s{text-decoration:none;display:block;margin-top:2px;font-size:var(--bow-fs-2,12px);
  color:var(--bow-ink-3,#8C8C90);font-variant-numeric:tabular-nums;white-space:nowrap}
.roi-t{position:relative;height:10px;background:rgba(255,255,255,.06);border-radius:var(--bow-r-sm,4px);overflow:hidden}
.roi-f-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--bow-r-sm,4px)}
.roi-mark{position:absolute;top:0;bottom:0;width:1px;background:var(--bow-ink-2,#B5B5B8)}
.roi-v{text-align:right;font-size:var(--bow-fs-3,13px);font-weight:var(--bow-fw-semi,600);
  color:var(--bow-ink-1,#FFFFFF);font-variant-numeric:tabular-nums}
.roi-scale{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--bow-line,rgba(255,255,255,.1));font-size:var(--bow-fs-1,11px);
  color:var(--bow-ink-3,#8C8C90);font-variant-numeric:tabular-nums}
.roi-scale i{display:inline-block;width:1px;height:11px;background:var(--bow-ink-2,#B5B5B8)}

/* ── Records held: .ds-rank chips (--plain, on the page background) ── */
.rec-r{border-bottom-color:var(--bow-line,rgba(255,255,255,.1))}
.rec-n{justify-self:start}
.rec-t{display:block;font-size:var(--bow-fs-3,13px);font-weight:var(--bow-fw-semi,600);
  color:var(--bow-ink-1,#FFFFFF);line-height:var(--bow-lh-title,1.3)}
.rec-l{display:block;font-size:var(--bow-fs-2,12px);color:var(--bow-ink-3,#8C8C90);margin-top:2px}
.rec-v{font-size:var(--bow-fs-3,13px);color:var(--bow-ink-1,#FFFFFF);font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-r:hover .rec-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--bow-ink-3,#8C8C90)}

/* ── What's next: a .ds-rail of .ds-poster cards ── */
.nx-empty{font-size:var(--bow-fs-3,13px);color:var(--bow-ink-3,#8C8C90);line-height:var(--bow-lh-body,1.5)}
.upc-fc{margin-top:0}

/* ── Connected ── */
.cx-g .ds-head{margin-bottom:var(--bow-space-3,12px)}
.cx-c{border-color:var(--bow-line,rgba(255,255,255,.1));color:var(--bow-ink-2,#B5B5B8)}
.cx-c:hover{color:var(--bow-ink-1,#FFFFFF);border-color:var(--bow-line-strong,rgba(255,255,255,.16))}
.cx-c i{color:var(--bow-ink-3,#8C8C90)}

/* ── Directories: /people/, /actors/, /directors/, /studios/, /franchises/ ──
   The list opens with a .ds-head (the order, which the toggle changes) and the
   sort toggle as a .ds-seg on the right. movie.css's .toggle-group and
   .toggle-btn:not(:last-child) borders are neutralised for it. */
.pl-bar{max-width:var(--page-max,1240px);margin:0 auto;padding:var(--bow-space-6,32px) 64px var(--bow-space-4,16px);
  box-sizing:border-box;align-items:center}
.pl-sort.toggle-group{border:0;border-radius:var(--bow-r-full,999px);overflow-x:auto}
.pl-sort .toggle-btn{border:0}
.pl-grid{max-width:var(--page-max,1240px);margin:0 auto;padding:0 64px 60px;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:0 40px}
/* people: a portrait (or their biggest poster) in a circle, hairline rows */
.pl-c:not(.ds-poster){display:flex;align-items:center;gap:var(--bow-space-3,12px);min-width:0;
  padding:var(--bow-space-3,12px) 0;border-bottom:1px solid var(--bow-line,rgba(255,255,255,.1));
  text-decoration:none;color:inherit}
.pl-port:not(.ds-poster__img){width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 22%;
  background:var(--bow-surface-1,#141416);flex:none}
/* long names wrap to two balanced lines rather than being cut (QA, Oct 10) */
.pl-b .pl-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance;
  font-size:var(--bow-fs-4,15px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-title,1.3);color:var(--bow-ink-1,#FFFFFF)}
.pl-m{display:block;margin-top:2px;font-size:var(--bow-fs-2,12px);color:var(--bow-ink-3,#8C8C90);font-variant-numeric:tabular-nums}
.pl-g{flex:none;text-align:right;font-size:var(--bow-fs-3,13px);font-weight:var(--bow-fw-semi,600);
  color:var(--bow-ink-1,#FFFFFF);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-g s{display:block;margin-top:2px;text-decoration:none;font-size:var(--bow-fs-2,12px);font-weight:var(--bow-fw-regular,400);color:var(--bow-ink-3,#8C8C90)}
.pl-c:hover .pl-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--bow-ink-3,#8C8C90)}
/* studios and franchises: .ds-poster cards */
.pl-grid--posters{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--bow-space-6,32px) var(--bow-space-4,16px)}

@media(max-width:760px){
  .pl-bar{padding:var(--bow-space-5,24px) 18px var(--bow-space-3,12px)}
  .pl-grid{padding:0 18px 44px}
  .pl-grid--posters{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--bow-space-5,24px) var(--bow-space-3,12px)}
  /* Phone: the film column is wide enough that "Mission: Impossible" holds a
     line, so titles wrap to two balanced lines (a rare long one to three)
     instead of four or five. That puts the sorted Domestic column one swipe
     away under the edge fade; freeze.js keeps the film column put while
     scrolling. Cells keep 8px side padding to save width. */
  .film-tbl{min-width:620px}
  .film-tbl th,.film-tbl td{padding-left:var(--bow-space-2,8px);padding-right:var(--bow-space-2,8px)}
  .film-tbl th:first-child,.film-tbl td:first-child{padding-left:0}
  .film-tbl tbody td:first-child{min-width:176px;width:176px}
  .ft{gap:var(--bow-space-2,8px)}
  .ft img{width:28px;height:42px}
  .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-v{grid-column:3;grid-row:1;align-self:center}
  .roi-t{grid-column:1 / -1;grid-row:2}
  .roi-f s{white-space:normal}
}
@media(max-width:700px){
  .hero--hub{min-height:min(56vh,480px)}
  .hero--hub .hero-in{padding:88px var(--bow-gutter,16px) var(--bow-space-5,24px)}
  .hero--hub.hero-lite{min-height:min(40vh,340px)}
  .hero--hub .hero-act{margin-top:var(--bow-space-4,16px)}
  .hero--hub .dot-tail{display:none}
  .hero--hub .hs-tail{flex-basis:100%}
  .rail b{display:none}
  .rail--noname{height:80px}
  .rail--dense > :nth-child(even) i{visibility:visible}
}
@media(max-width:470px){
  .rec-v{grid-column:2;font-size:var(--bow-fs-2,12px);margin-top:2px}
}