/* ===========================================================================
   MIDNIGHT MATINÉE — design system
   =========================================================================== */

:root{
  --screen-black:#0E0B08; --projection:#171209; --velvet:#1F1710; --smoke:#2B2218;
  --gold:#D4A24E; --gold-bright:#F2C879; --gold-deep:#8C6A2B;
  --marigold:#E8912D; --sindoor:#C93B2E;
  --peacock:#14555A; --peacock-bright:#3E8E93;
  --ink-hi:#F3EBDD; --ink-mid:#B8AA93; --ink-low:#6E6250;
  --grain:.05;

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-rank:'Fraunces',Georgia,serif;
  --font-text:'Source Serif 4',Georgia,serif;
  --font-ui:'Inter',system-ui,sans-serif;
  --font-deva:'Tiro Devanagari Hindi','Noto Serif Devanagari',serif;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:5rem; --sp-9:8rem;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:160ms; --dur-med:320ms; --dur-slow:640ms;

  --container:75rem;
}
:root[data-theme="light"]{
  --screen-black:#F6EFE3; --projection:#FDF8EE; --velvet:#EFE5D2; --smoke:#D9CCB4;
  --gold:#7C5A22; --gold-bright:#96702C; --gold-deep:#5E4619; /* darkened: link gold must clear 4.5:1 on cream */
  --marigold:#C4731A; --sindoor:#A82F24;
  --peacock:#0F464A; --peacock-bright:#14555A;
  --ink-hi:#241C11; --ink-mid:#5C5240; --ink-low:#948767;
  --grain:.035;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--screen-black); color:var(--ink-hi);
  font:400 1.125rem/1.65 var(--font-text);
  overflow-x:hidden;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright)}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:2px}
::selection{background:var(--gold);color:var(--screen-black)}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.narrow{max-width:42rem;margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-4);top:var(--sp-4);z-index:200;background:var(--gold);color:var(--screen-black);padding:var(--sp-3) var(--sp-4);border-radius:4px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;margin:0}
.kicker{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--marigold);margin:0 0 var(--sp-3)}
.deva{font-family:var(--font-deva);font-size:1.05em;letter-spacing:normal}
.dek{font:400 1.125rem/1.6 var(--font-text);color:var(--ink-mid);max-width:34rem}
.caption{font:400 .8125rem/1.5 var(--font-ui);color:var(--ink-mid)}
.foil{
  background:linear-gradient(160deg,#8C6A2B 0%,#D4A24E 28%,#F2C879 46%,#FBE9C0 50%,#F2C879 54%,#D4A24E 70%,#8C6A2B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;
}
@keyframes foil-sheen{from{background-position:0 0}to{background-position:100% 100%}}

/* ---------- ornament ---------- */
.halftone{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--gold) 1px,transparent 1.5px);
  background-size:12px 12px;opacity:.12;
  -webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 70%);
          mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 70%);
}
hr.garland{
  border:0;height:14px;margin:var(--sp-7) auto;max-width:24rem;
  background:
    radial-gradient(circle at 50% 50%,var(--marigold) 3px,transparent 3.5px) 0 0/18px 14px repeat-x,
    radial-gradient(circle at 50% 50%,var(--sindoor) 1.5px,transparent 2px) 9px 0/18px 14px repeat-x,
    linear-gradient(var(--smoke),var(--smoke)) 50% 50%/100% 1px no-repeat;
}
.sprocket-row{
  height:22px;
  background:repeating-linear-gradient(to right,transparent 0 6px,var(--screen-black) 6px 18px,transparent 18px 24px);
  background-color:var(--smoke);
}
.hoarding-frame{
  border:1px solid var(--gold-deep);outline:1px solid var(--smoke);outline-offset:4px;position:relative;
}
.hoarding-frame::before{
  content:"";position:absolute;top:-8px;left:-8px;width:7px;height:7px;
  background:radial-gradient(circle,var(--gold) 40%,transparent 45%);
  box-shadow:calc(100% + 9px) 0 0 0 var(--gold), 0 0 0 0 transparent;
}
.hoarding-frame::after{
  content:"";position:absolute;bottom:-8px;left:-8px;width:7px;height:7px;
  background:radial-gradient(circle,var(--gold) 40%,transparent 45%);
  box-shadow:calc(100% + 9px) 0 0 0 var(--gold);
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--screen-black) 90%,transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--smoke);
}
.nav .wrap{display:flex;align-items:center;gap:var(--sp-5);height:3.75rem}
.brand{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink-hi);white-space:nowrap}
.brand b{color:var(--gold)}
.nav nav{margin-left:auto;display:flex;gap:var(--sp-5);align-items:center;overflow-x:auto;scrollbar-width:none}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{font:500 .875rem/1 var(--font-ui);letter-spacing:.01em;color:var(--ink-mid);white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--gold)}
.themetog{background:none;border:1px solid var(--smoke);color:var(--ink-mid);border-radius:999px;width:2rem;height:2rem;cursor:pointer;font-size:.9rem;flex:none}
.themetog:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--sp-9) 0 var(--sp-8);
  background:radial-gradient(ellipse 120% 80% at 50% 110%,#2B1C08 0%,var(--screen-black) 60%)}
:root[data-theme="light"] .hero{background:radial-gradient(ellipse 120% 80% at 50% 110%,#EBDCC0 0%,var(--screen-black) 60%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:var(--sp-5)}
.hero .dek{margin-bottom:var(--sp-6);font-size:1.25rem}
.herostats{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--smoke)}
.herostats div{min-width:6rem}
.herostats b{display:block;font:900 1.75rem/1 var(--font-rank);color:var(--gold);font-variant-numeric:tabular-nums}
.herostats span{font:400 .8125rem/1.4 var(--font-ui);color:var(--ink-mid)}

/* ---------- buttons ---------- */
.btn,.btn-ghost{
  display:inline-block;font:600 .875rem/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
  padding:.875rem 1.75rem;border-radius:4px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)
}
.btn{color:var(--screen-black);background:var(--gold);border:1px solid var(--gold-deep)}
.btn:hover{background:var(--gold-bright);color:var(--screen-black)}
.btn-ghost{color:var(--gold);background:transparent;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.btn-ghost:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.btnrow{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ---------- sections ---------- */
section{padding-block:var(--sp-8)}
.sechead{margin-bottom:var(--sp-6);position:relative}
.sechead h2{font-size:1.75rem;line-height:1.15;letter-spacing:-.01em}
.sechead p{margin:var(--sp-3) 0 0;color:var(--ink-mid);font-size:1rem;max-width:34rem}
.sechead::after{content:"";display:block;height:2px;width:100%;max-width:8rem;background:var(--sindoor);margin-top:var(--sp-4);transform-origin:left;transform:scaleX(0);transition:transform var(--dur-med) var(--ease-inout)}
.sechead.in::after{transform:scaleX(1)}

/* ---------- filter bar ---------- */
.filters{position:sticky;top:3.75rem;z-index:50;
  background:color-mix(in srgb,var(--projection) 92%,transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-block:1px solid var(--smoke);padding-block:var(--sp-3)}
.filters .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.chip{font:500 .8125rem/1 var(--font-ui);padding:.45rem .85rem;border-radius:999px;border:1px solid var(--smoke);
  background:transparent;color:var(--ink-mid);cursor:pointer;transition:all var(--dur-fast) var(--ease-spring);white-space:nowrap}
.chip:hover{border-color:var(--gold-deep);color:var(--ink-hi)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.fsearch{flex:1 1 12rem;min-width:10rem;background:var(--screen-black);border:1px solid var(--smoke);color:var(--ink-hi);
  font:400 .875rem/1 var(--font-ui);padding:.55rem .8rem;border-radius:4px}
.fsearch::placeholder{color:var(--ink-low)}
.fsearch:focus{border-color:var(--gold-deep)}
.fsearch:focus:not(:focus-visible){outline:none}
.fcount{font:400 .8125rem/1 var(--font-ui);color:var(--ink-mid);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.fsel{background:var(--screen-black);border:1px solid var(--smoke);color:var(--ink-mid);font:500 .8125rem/1 var(--font-ui);padding:.5rem .6rem;border-radius:4px;cursor:pointer}

/* ---------- rank grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5);list-style:none;padding:0;margin:var(--sp-6) 0 0}
.card{position:relative;background:var(--projection);border:1px solid var(--smoke);border-radius:6px;overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.card:hover{transform:translateY(-4px);border-color:var(--gold-deep);box-shadow:0 16px 40px -16px rgba(0,0,0,.7)}
.card a.blockl{position:absolute;inset:0;z-index:3}
.poster{position:relative;aspect-ratio:2/3;background:var(--velvet);display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-5);overflow:hidden;border-bottom:1px solid var(--smoke)}
.poster .pt{font-family:var(--font-display);font-weight:800;font-size:1.6rem;line-height:1.05;letter-spacing:-.015em;
  color:var(--gold);transform:rotate(-2deg);text-wrap:balance}
.poster .ph{font-family:var(--font-deva);color:var(--ink-mid);font-size:1rem;margin-top:var(--sp-3);transform:rotate(-2deg)}
.poster .py{position:absolute;top:var(--sp-4);right:var(--sp-4);font:600 .75rem/1 var(--font-ui);letter-spacing:.1em;color:var(--ink-low)}
.rank{position:absolute;bottom:-.14em;left:.02em;z-index:2;font:900 4.5rem/.85 var(--font-rank);
  font-variation-settings:'opsz' 144;letter-spacing:-.03em;-webkit-text-stroke:1.5px var(--screen-black);
  font-variant-numeric:lining-nums tabular-nums}
.card:hover .rank{animation:foil-sheen 1.2s ease-out}
.card.top10 .poster::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:20px;z-index:2;
  background:repeating-linear-gradient(to bottom,transparent 0 6px,var(--screen-black) 6px 18px,transparent 18px 24px);
  background-color:var(--smoke)}
.cbody{padding:var(--sp-5) var(--sp-4) var(--sp-4);position:relative}
.cbody h3{font-size:1.25rem;line-height:1.3;margin-bottom:var(--sp-2);color:var(--ink-hi)}
.cmeta{font:400 .8125rem/1.5 var(--font-ui);color:var(--ink-mid)}
.ctags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.pill{font:500 .75rem/1 var(--font-ui);padding:.25rem .7rem;border-radius:999px;border:1px solid var(--smoke);color:var(--ink-mid)}
.pill.g{background:color-mix(in srgb,var(--marigold) 10%,transparent);border-color:color-mix(in srgb,var(--marigold) 30%,transparent)}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-mid);padding:var(--sp-8) 0;font-family:var(--font-ui);font-size:.9rem}

/* ---------- drawn artwork + animation ----------
   Motion is opt-in per context. Grid posters animate only on hover/focus so a
   100-card page isn't running 100 timelines; hero and game art animate always.
   Everything animates transform/opacity only. ------------------------------ */
.art{position:absolute;inset:0;width:100%;height:100%;display:block}

@keyframes a-sweep{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes a-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes a-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes a-spin{to{transform:rotate(360deg)}}
@keyframes a-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
@keyframes a-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* Declare the timelines first. NOTE: the `animation` shorthand resets
   animation-play-state, so the paused default MUST come after these. */
.art .a-sweep{animation:a-sweep 6s var(--ease-inout) infinite}
.art .a-twinkle{animation:a-twinkle 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.art .a-float{animation:a-float 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.art .a-spin{animation:a-spin 26s linear infinite}
.art .a-pulse{animation:a-pulse 3.4s ease-in-out infinite}
.art .a-blink{animation:a-blink 5s ease-in-out infinite;transform-origin:center}

/* …now idle everything by default */
.art .a-sweep,.art .a-twinkle,.art .a-float,.art .a-spin,.art .a-pulse,.art .a-blink{
  animation-play-state:paused;animation-fill-mode:both}

/* always-on contexts: one or a handful of pieces of art on screen */
.fh-poster .art *,.g-art .art *,.c-card .art *,.actor .av .art *,.linkcard .art *{
  animation-play-state:running}
/* grid posters: idle until hovered or keyboard-focused, so a 100-card page
   isn't driving 900 timelines at rest */
.card:hover .art *,.card:focus-within .art *{animation-play-state:running}
.heroart .art *{animation-play-state:running}

/* illustrated homepage hero */
.hero-illustrated{padding-block:0;position:relative}
.heroart{position:relative;width:100%;aspect-ratio:960/420;max-height:52vh;overflow:hidden;
  border-bottom:1px solid var(--smoke)}
.heroart .art{position:absolute;inset:0}
.hero-illustrated .wrap{padding-block:var(--sp-8)}
.heroart::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 42%,var(--screen-black) 99%)}
@media(max-width:700px){.heroart{max-height:34vh}}

.poster{position:relative}
.poster .halftone{display:none}
.fh-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-7);align-items:start}
@media(max-width:760px){.fh-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .fh-poster{max-width:190px}}
.fh-poster{margin:0;position:relative}
.fh-poster .art{position:relative;aspect-ratio:2/3;border-radius:6px;border:1px solid var(--smoke)}
.fh-poster figcaption{font:400 .6875rem/1.5 var(--font-ui);color:var(--ink-low);margin-top:var(--sp-3);text-align:center}
.actor .av{position:relative;overflow:hidden;width:104px;height:104px}
.actor .av .art{border-radius:50%}
.poster{position:relative}
.poster .halftone{display:none}
.fh-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-7);align-items:start}
@media(max-width:760px){.fh-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .fh-poster{max-width:190px}}
.fh-poster{margin:0;position:relative}
.fh-poster .art{position:relative;aspect-ratio:2/3;border-radius:6px;border:1px solid var(--smoke)}
.fh-poster figcaption{font:400 .6875rem/1.5 var(--font-ui);color:var(--ink-low);margin-top:var(--sp-3);text-align:center}
.actor .av{position:relative;overflow:hidden}
.actor .av .art{border-radius:50%}

/* ---------- house ad ---------- */
.housead{position:relative;overflow:hidden;border:1px solid var(--gold-deep);border-radius:6px;
  margin:var(--sp-7) 0;background:radial-gradient(ellipse 120% 140% at 15% 100%,#2B1C08 0%,var(--projection) 65%)}
:root[data-theme="light"] .housead{background:radial-gradient(ellipse 120% 140% at 15% 100%,#EBDCC0 0%,var(--projection) 65%)}
.ha-inner{position:relative;z-index:2;padding:var(--sp-6)}
.ha-kicker{font:600 .6875rem/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-low);margin:0 0 var(--sp-4)}
.ha-head{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.15;
  letter-spacing:-.01em;color:var(--ink-hi);margin:0 0 var(--sp-3);max-width:34rem}
.ha-body{font:400 1rem/1.6 var(--font-text);color:var(--ink-mid);margin:0 0 var(--sp-5);max-width:38rem}
.ha-fine{font:400 .75rem/1.5 var(--font-ui);color:var(--ink-low);margin:var(--sp-4) 0 0;max-width:34rem}

/* ---------- sister-site cards ---------- */
.ringcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4)}
.ringcard{display:block;padding:var(--sp-4);border:1px solid var(--smoke);border-radius:6px;background:var(--projection);
  transition:border-color var(--dur-fast) var(--ease-out)}
.ringcard:hover{border-color:var(--gold-deep)}
.rc-name{display:block;font-family:var(--font-display);font-weight:800;font-size:.9375rem;color:var(--ink-hi)}
.ringcard:hover .rc-name{color:var(--gold)}
.rc-tag{display:block;font:400 .75rem/1.5 var(--font-ui);color:var(--ink-mid);margin-top:var(--sp-2)}

/* ---------- game ---------- */
.gamewrap{background:var(--projection);border:1px solid var(--smoke);border-radius:6px;padding:var(--sp-6);max-width:44rem;margin-inline:auto}
.gamewrap h2{font-size:1.5rem;line-height:1.15}
.g-sub{font:400 .9375rem/1.6 var(--font-ui);color:var(--ink-mid);margin:var(--sp-2) 0 var(--sp-5)}
.g-clues{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.g-clueblock{border-left:2px solid var(--gold-deep);padding-left:var(--sp-4)}
.g-cluelabel{display:block;font:600 .6875rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--marigold);margin-bottom:var(--sp-3)}
.g-clue{font:400 1rem/1.6 var(--font-text);color:var(--ink-hi);margin:0}
.g-art{position:relative;width:150px;aspect-ratio:2/3;border-radius:4px;overflow:hidden;border:1px solid var(--smoke)}
#g-form{display:flex;gap:var(--sp-2);flex-wrap:wrap}
#g-input,#c-name,#c-link{flex:1 1 14rem;min-width:0;background:var(--screen-black);border:1px solid var(--smoke);
  color:var(--ink-hi);font:400 1rem/1 var(--font-ui);padding:.85rem .9rem;border-radius:4px}
#g-input:focus,#c-name:focus{border-color:var(--gold-deep)}
#g-input:focus:not(:focus-visible),#c-name:focus:not(:focus-visible){outline:none}
.g-guesses{list-style:none;padding:0;margin:var(--sp-5) 0 0;display:grid;gap:var(--sp-2)}
.g-guesses li{font:500 .875rem/1 var(--font-ui);padding:.6rem .8rem;border-radius:4px;border:1px solid var(--smoke);color:var(--ink-mid)}
.g-guesses li.ok{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.g-guesses li.no{border-color:color-mix(in srgb,var(--sindoor) 40%,transparent);color:var(--ink-mid)}
.g-answer{font:400 1.125rem/1.6 var(--font-text);color:var(--ink-hi);margin:0 0 var(--sp-4)}
.g-grid{font-size:1.75rem;letter-spacing:.15em;margin:0 0 var(--sp-4)}
.g-stats{display:flex;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-4) 0;border-block:1px solid var(--smoke);margin-bottom:var(--sp-5)}
.g-stats span{font:400 .75rem/1.4 var(--font-ui);color:var(--ink-mid)}
.g-stats b{display:block;font:900 1.5rem/1 var(--font-rank);color:var(--gold);font-variant-numeric:tabular-nums}
.c-invited{background:color-mix(in srgb,var(--marigold) 12%,transparent);border:1px solid color-mix(in srgb,var(--marigold) 40%,transparent);
  border-radius:4px;padding:var(--sp-4);font:400 .9375rem/1.5 var(--font-ui);color:var(--ink-hi);margin:0 0 var(--sp-5)}
.c-bar{display:flex;gap:var(--sp-4);flex-wrap:wrap;font:500 .8125rem/1 var(--font-ui);color:var(--ink-mid);margin-bottom:var(--sp-4)}
.c-q{font:400 1.0625rem/1.5 var(--font-text);color:var(--ink-hi);margin:0 0 var(--sp-4)}
.c-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.c-card{background:var(--velvet);border:1px solid var(--smoke);border-radius:6px;padding:var(--sp-4);cursor:pointer;
  display:grid;justify-items:center;gap:var(--sp-3);transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.c-card:hover:not(:disabled){border-color:var(--gold);transform:translateY(-3px)}
.c-card:disabled{cursor:default}
.c-card.right{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--velvet))}
.c-card.wrong{border-color:var(--sindoor);background:color-mix(in srgb,var(--sindoor) 14%,var(--velvet))}
.c-name{font-family:var(--font-display);font-weight:800;font-size:.9375rem;color:var(--ink-hi);text-align:center}
.c-year{font:400 .75rem/1 var(--font-ui);color:var(--ink-mid)}
.c-reveal{font:400 .875rem/1.5 var(--font-ui);color:var(--ink-mid);min-height:1.4rem;margin:var(--sp-4) 0 0;text-align:center}
.c-namelabel{display:block;font:400 .8125rem/1.5 var(--font-ui);color:var(--ink-mid);margin:var(--sp-4) 0 var(--sp-2)}
.c-linkrow{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
#c-link{font-size:.8125rem;color:var(--ink-mid)}
@media(max-width:520px){.c-duo{grid-template-columns:1fr}.g-art{width:120px}}

/* ---------- box office ---------- */
.srcline{font:400 .75rem/1.6 var(--font-ui);color:var(--ink-low);margin:var(--sp-3) 0 0}
.bankgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-5);margin-top:var(--sp-6)}
.bankcard{background:var(--projection);border:1px solid var(--smoke);border-radius:6px;padding:var(--sp-5);
  transition:border-color var(--dur-fast) var(--ease-out)}
.bankcard:hover{border-color:var(--gold-deep)}
.bank-dec{font:900 1.5rem/1 var(--font-rank);color:var(--gold);margin:0 0 var(--sp-2);font-variant-numeric:lining-nums}
.bankcard h3{font-size:1.25rem;line-height:1.25}
.bank-hi{color:var(--ink-mid);font-size:1rem;margin:var(--sp-1) 0 var(--sp-3)}
.bank-claim{font:italic 400 1.0625rem/1.5 var(--font-text);color:var(--ink-hi);margin:0 0 var(--sp-3)}
.bank-body{font:400 .9375rem/1.65 var(--font-text);color:var(--ink-mid);margin:0 0 var(--sp-4)}
.bank-films{font:400 .8125rem/1.6 var(--font-ui);color:var(--ink-mid);margin:0 0 var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--smoke)}
.bank-rival{font:400 .8125rem/1.6 var(--font-ui);color:var(--ink-low);margin:0}
.bank-rival strong{color:var(--marigold)}

/* ---------- seen tracker ---------- */
.seenbar{background:var(--projection);border:1px solid var(--smoke);border-radius:6px;padding:var(--sp-5);margin-bottom:var(--sp-5)}
.seentop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap}
.seentop span{font:400 .875rem/1 var(--font-ui);color:var(--ink-mid);font-variant-numeric:tabular-nums}
.seentop b{color:var(--gold);font-weight:600}
.seentrack{height:6px;background:var(--velvet);border-radius:999px;overflow:hidden;margin:var(--sp-4) 0 var(--sp-3)}
.seenfill{height:100%;width:0;border-radius:999px;transition:width var(--dur-med) var(--ease-out);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 60%,var(--gold-bright))}
.seenhint{font:400 .8125rem/1.6 var(--font-ui);color:var(--ink-low);margin:0;display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.seenbtn{position:relative;z-index:4;margin-top:var(--sp-3);font:500 .75rem/1 var(--font-ui);
  padding:.4rem .75rem;border-radius:999px;border:1px solid var(--smoke);background:transparent;
  color:var(--ink-mid);cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.seenbtn:hover{border-color:var(--gold-deep);color:var(--gold)}
.seenbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.card.is-seen .poster{opacity:.55}
.card.is-seen::after{content:"✓";position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:4;
  width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:var(--screen-black);font:700 .75rem/1 var(--font-ui)}
#spin{border-color:color-mix(in srgb,var(--marigold) 45%,transparent);color:var(--marigold)}
#spin:hover{border-color:var(--marigold);background:color-mix(in srgb,var(--marigold) 10%,transparent)}

/* ---------- actors ---------- */
.actorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-6) var(--sp-5);list-style:none;padding:0;margin:var(--sp-6) 0 0}
.actor{background:var(--projection);padding:var(--sp-5);border-radius:6px;position:relative}
.actor .av{width:96px;height:96px;border-radius:50%;border:2px solid var(--gold-deep);padding:3px;background:var(--velvet);
  display:grid;place-items:center;margin-bottom:var(--sp-4)}
.actor .av span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:var(--screen-black);
  font:900 1.5rem/1 var(--font-rank);color:var(--gold)}
.actor h3{font-size:1.25rem;line-height:1.3}
.actor .nh{font-family:var(--font-deva);color:var(--ink-mid);font-size:1rem;margin:var(--sp-1) 0 var(--sp-3)}
.actor .line{font-style:italic;color:var(--ink-hi);font-size:1rem;line-height:1.55;margin:0 0 var(--sp-3)}
.actor .why{font-size:1rem;line-height:1.6;color:var(--ink-mid);margin:0}
.actor .best{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--marigold);margin:var(--sp-4) 0 var(--sp-2)}

/* featured actor sitting inside the ten */
.actor.feat{grid-column:1/-1;border-color:var(--gold);overflow:hidden;
  background:radial-gradient(ellipse 110% 130% at 12% 100%,#2B1C08 0%,var(--projection) 62%)}
:root[data-theme="light"] .actor.feat{background:radial-gradient(ellipse 110% 130% at 12% 100%,#EBDCC0 0%,var(--projection) 62%)}
.actor.feat .featinner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-6);position:relative;z-index:2}
@media(max-width:640px){.actor.feat .featinner{grid-template-columns:1fr;gap:var(--sp-4)}}
.actor.feat .av{width:120px;height:120px;border-color:var(--gold)}
.actor.feat .av span{font-size:2rem}
.actor.feat h3{font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
.actor.feat h3 a{color:transparent}
.actor.feat .why{color:var(--ink-hi);max-width:42rem}
.actor.feat .line{font-size:1.125rem}

/* ---------- featured (Amit) ---------- */
.featured{position:relative;overflow:hidden;padding:var(--sp-8) 0;
  background:radial-gradient(ellipse 120% 90% at 20% 100%,#2B1C08 0%,var(--screen-black) 65%)}
:root[data-theme="light"] .featured{background:radial-gradient(ellipse 120% 90% at 20% 100%,#EBDCC0 0%,var(--screen-black) 65%)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--sp-7);align-items:start}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:var(--sp-6)}}
.fportrait{aspect-ratio:3/4;background:var(--velvet);border-radius:6px;position:relative;overflow:hidden;
  display:grid;place-items:center;padding:var(--sp-5)}
.fportrait .initials{font:900 clamp(3rem,10vw,5rem)/1 var(--font-rank);letter-spacing:-.04em}
.aotearoa{display:inline-block;font:600 .7rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sindoor);border:1px solid color-mix(in srgb,var(--sindoor) 45%,transparent);
  padding:.4rem .8rem;border-radius:999px;margin-bottom:var(--sp-4)}
.fname{font-size:clamp(2.25rem,5vw,3.25rem);line-height:1;letter-spacing:-.02em;margin-bottom:var(--sp-2)}
.frole{font:500 .875rem/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 var(--sp-5)}
.fbio p{margin:0 0 var(--sp-4);max-width:42rem}
.socialrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.social{font:500 .8125rem/1 var(--font-ui);padding:.5rem .9rem;border:1px solid var(--smoke);border-radius:999px;color:var(--ink-mid)}
.social:hover{border-color:var(--gold);color:var(--gold)}
.social.prime{border-color:var(--gold);color:var(--gold);font-weight:600;
  background:color-mix(in srgb,var(--gold) 10%,transparent)}
.social.prime:hover{background:color-mix(in srgb,var(--gold) 18%,transparent)}

/* official links grid */
.linkcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.linkcard{display:block;background:var(--projection);border:1px solid var(--smoke);border-radius:6px;
  padding:var(--sp-5);transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.linkcard:hover{border-color:var(--gold-deep);transform:translateY(-3px)}
.lc-label{display:block;font:600 .7rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--marigold)}
.lc-handle{display:block;font-family:var(--font-display);font-weight:800;font-size:1.0625rem;
  color:var(--ink-hi);margin:var(--sp-3) 0 var(--sp-2);word-break:break-word}
.linkcard:hover .lc-handle{color:var(--gold)}
.lc-note{display:block;font:400 .8125rem/1.5 var(--font-ui);color:var(--ink-mid)}

.credits{list-style:none;padding:0;margin:var(--sp-5) 0 0;border-top:1px solid var(--smoke)}
.credits li{display:flex;gap:var(--sp-4);align-items:baseline;padding:var(--sp-3) 0;border-bottom:1px solid var(--smoke);font-family:var(--font-ui);font-size:.9375rem}
.credits .yr{color:var(--gold);font-variant-numeric:tabular-nums;flex:none;width:4rem}
.credits .rl{margin-left:auto;color:var(--ink-mid);font-size:.8125rem;flex:none}
.ph-note{font:400 .75rem/1.5 var(--font-ui);color:var(--ink-low);margin-top:var(--sp-3);font-style:italic}

/* ---------- blog ---------- */
.bloglist{display:grid;gap:var(--sp-4);list-style:none;padding:0;margin:var(--sp-6) 0 0}
.blogcard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:var(--sp-5);background:var(--projection);
  border:1px solid var(--smoke);border-radius:6px;overflow:hidden;position:relative;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.blogcard:hover{border-color:var(--gold-deep);transform:translateY(-3px)}
@media(max-width:700px){.blogcard{grid-template-columns:1fr}}
.blogthumb{position:relative;background:var(--velvet);min-height:150px;display:grid;place-items:center;padding:var(--sp-4);overflow:hidden}
.blogthumb span{font:900 2.5rem/1 var(--font-rank);color:var(--gold-deep);opacity:.9}
.blogbody{padding:var(--sp-5) var(--sp-5) var(--sp-5) 0}
@media(max-width:700px){.blogbody{padding:0 var(--sp-5) var(--sp-5)}}
.blogbody h3{font-size:1.25rem;line-height:1.3;margin:var(--sp-2) 0}
.blogcard:hover h3{color:var(--gold);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.blogbody p{font-size:1rem;line-height:1.6;color:var(--ink-mid);margin:0}
.bmeta{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;font:400 .75rem/1 var(--font-ui);color:var(--ink-low)}
.ticket{font:600 .7rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--marigold);
  background:color-mix(in srgb,var(--marigold) 12%,transparent);padding:.35rem .7rem;
  mask:radial-gradient(circle 3px at 0 50%,transparent 97%,#000) 0 0/100% 12px;border-radius:0 3px 3px 0}

/* ---------- article ---------- */
.article{padding-block:var(--sp-7) var(--sp-8)}
.article h1{font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:var(--sp-4)}
.article .dek{font-size:1.25rem;margin-bottom:var(--sp-5)}
.prose{max-width:42rem;margin-inline:auto}
.prose p{margin:0 0 var(--sp-5)}
.prose h2{font-size:1.5rem;line-height:1.2;margin:var(--sp-7) 0 var(--sp-4);color:var(--ink-hi)}
.prose ul{margin:0 0 var(--sp-5);padding-left:var(--sp-5)}
.prose li{margin-bottom:var(--sp-3)}
.prose a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.pq{position:relative;background:color-mix(in srgb,var(--peacock) 14%,var(--screen-black));
  border-left:3px solid var(--marigold);padding:var(--sp-5) var(--sp-6);margin:0 0 var(--sp-5);border-radius:0 4px 4px 0}
.pq p{font:italic 500 1.5rem/1.4 var(--font-rank);color:var(--ink-hi);margin:0 0 var(--sp-3)}
.pq cite{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--peacock-bright);font-style:normal}
.pq::before{content:"\201C";position:absolute;top:-.1em;left:.15em;font:900 4rem/1 var(--font-rank);color:var(--marigold);opacity:.5}
.filmcallout{display:block;background:var(--projection);border:1px solid var(--smoke);border-radius:6px;
  padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-5);transition:border-color var(--dur-fast) var(--ease-out)}
.filmcallout:hover{border-color:var(--gold-deep)}
.filmcallout .fk{font:600 .7rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--marigold)}
.filmcallout .ft{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink-hi);margin-top:var(--sp-2);display:block}
.filmcallout .fm{font:400 .8125rem/1.4 var(--font-ui);color:var(--ink-mid);margin-top:var(--sp-1)}

/* ---------- film detail ---------- */
.filmhead{padding-block:var(--sp-7) var(--sp-6);position:relative;overflow:hidden;
  background:radial-gradient(ellipse 120% 90% at 15% 110%,#2B1C08 0%,var(--screen-black) 62%)}
:root[data-theme="light"] .filmhead{background:radial-gradient(ellipse 120% 90% at 15% 110%,#EBDCC0 0%,var(--screen-black) 62%)}
.filmhead .bigrank{font:900 clamp(4rem,14vw,9rem)/.8 var(--font-rank);letter-spacing:-.04em;
  font-variant-numeric:lining-nums tabular-nums;margin-bottom:var(--sp-3);display:block}
.filmhead h1{font-size:clamp(2.25rem,6vw,4rem);line-height:1;letter-spacing:-.025em;margin-bottom:var(--sp-3)}
.filmhead .hi{font-family:var(--font-deva);font-size:1.35rem;color:var(--ink-mid);margin-bottom:var(--sp-4)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3) var(--sp-5);margin:var(--sp-6) 0 0;font-family:var(--font-ui);font-size:.9375rem}
.dl dt{font:600 .75rem/1.6 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-low)}
.dl dd{margin:0;color:var(--ink-hi)}
.linkrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.xlink{display:inline-flex;align-items:center;gap:.4rem;font:600 .8125rem/1 var(--font-ui);letter-spacing:.02em;
  padding:.6rem 1rem;border:1px solid var(--smoke);border-radius:4px;color:var(--ink-mid);transition:all var(--dur-fast) var(--ease-out)}
.xlink:hover{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.xlink b{color:var(--gold);font-weight:600}
.neighbours{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-7)}
@media(max-width:600px){.neighbours{grid-template-columns:1fr}}
.nb{background:var(--projection);border:1px solid var(--smoke);border-radius:6px;padding:var(--sp-4) var(--sp-5);transition:border-color var(--dur-fast) var(--ease-out)}
.nb:hover{border-color:var(--gold-deep)}
.nb span{font:600 .7rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-low);display:block;margin-bottom:var(--sp-2)}
.nb b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink-hi);display:block}
.nb.r{text-align:right}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;margin-top:var(--sp-6);border:1px solid var(--smoke);border-radius:6px}
table{width:100%;border-collapse:collapse;font:400 .875rem/1.5 var(--font-ui);min-width:34rem}
th{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-low);
  text-align:left;padding:var(--sp-4) var(--sp-4);border-bottom:1px solid var(--gold-deep);white-space:nowrap}
td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--smoke);color:var(--ink-mid)}
tbody tr:hover{background:color-mix(in srgb,var(--gold) 5%,transparent)}
td.rk{font:700 1.125rem/1 var(--font-rank);color:var(--gold);font-variant-numeric:tabular-nums lining-nums;width:4rem}
td.ttl a{color:var(--ink-hi);font-weight:500}
td.ttl a:hover{color:var(--gold)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- link clusters ---------- */
.cloud{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.cloud a{font:500 .8125rem/1 var(--font-ui);padding:.45rem .85rem;border:1px solid var(--smoke);border-radius:999px;color:var(--ink-mid)}
.cloud a:hover{border-color:var(--gold);color:var(--gold)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-6);margin-top:var(--sp-6)}
.cols h3{font-size:1rem;letter-spacing:.02em;margin-bottom:var(--sp-3);color:var(--ink-hi)}
.cols ul{list-style:none;padding:0;margin:0}
.cols li{margin-bottom:var(--sp-2);font:400 .875rem/1.5 var(--font-ui)}
.cols li a{color:var(--ink-mid)}
.cols li a:hover{color:var(--gold)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--smoke);padding-block:var(--sp-3);margin-top:var(--sp-8)}
.mtrack{display:flex;gap:var(--sp-5);width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack a{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mid);white-space:nowrap}
.mtrack a::after{content:"•";margin-left:var(--sp-5);color:var(--marigold)}
.mtrack a:hover{color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--smoke);padding-block:var(--sp-7) var(--sp-6);margin-top:var(--sp-8)}
footer hr.garland{margin-top:0;opacity:.5}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-6)}
.fcols h4{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-low);margin-bottom:var(--sp-4)}
.fcols ul{list-style:none;padding:0;margin:0}
.fcols li{margin-bottom:var(--sp-2)}
.fcols a{font:400 .875rem/1.5 var(--font-ui);color:var(--ink-mid)}
.fcols a:hover{color:var(--gold)}
.fcols p{font:400 .9375rem/1.6 var(--font-text);color:var(--ink-mid);margin:0}
.endcredit{text-align:center;padding-top:var(--sp-7);font:400 .8125rem/1.6 var(--font-ui);color:var(--ink-low)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ---------- breadcrumbs ---------- */
.crumbs{font:400 .75rem/1.4 var(--font-ui);color:var(--ink-low);padding-top:var(--sp-5)}
.crumbs a{color:var(--ink-mid)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin-inline:.45rem;opacity:.5}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .sechead::after{transform:scaleX(1)}
  .mtrack{animation:none}
  .marquee{overflow-x:auto}
  .art .a-sweep,.art .a-twinkle,.art .a-float,.art .a-spin,.art .a-pulse,.art .a-blink{
    animation:none!important;animation-play-state:paused!important;transform:none!important;opacity:1!important}
}

/* ===========================================================================
   AAA+++ STUDIO PREMIUM — additive layer, 2026-08-04.
   Midnight Matinée's art direction is finished work: no palette, type, radius,
   composition or motion value below is changed. This block adds only the three
   things the spec asks of this site — §3.4 tabular numerals, §3.6 designed
   focus/hover, and the typography for the §6.4 dated source line — and it says
   them in this site's own voice (gold foil, sprocket rule, projection dark).
   =========================================================================== */

/* ---------- §3.4 · numerals a reader COMPARES align ----------------------
   A ranked canon whose figures do not line up reads as unmeasured. Every
   number the reader scans down a column, or holds against another number —
   ranks, years, crore figures, admissions, counts, progress — is locked to
   tabular lining figures. Display numerals are exempt on purpose (below):
   the hero "100" is typography, not a measurement, and tabular spacing would
   put a hole in it. */
.tnum,
.py, .rank, .cmeta, .fcount, .rl,
.dl dd, .credits .yr, .bmeta, .bank-dec, .bank-films,
.seentop span, .seennum, .seenpct, .g-stats b, .herostats b,
.srcline, .src-date, .provenance,
th, td, td.rk, td.num,
.crumbs, .nb span, .filmcallout .fm{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
/* the display exceptions — proportional, as drawn */
.hero h1, .hero h1 .foil, .fname, .initials, .bigrank{
  font-variant-numeric:proportional-nums lining-nums;
  font-feature-settings:"pnum" 1,"lnum" 1;
}
/* …except the film-page rank, which IS a compared number and keeps the
   tabular setting it already shipped with. */
.filmhead .bigrank{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ---------- §3.6 · focus that is never lost ------------------------------
   The global :focus-visible rule at the top of this file is the contract. Two
   input rules below it used `outline:none` on plain :focus, which outranks it
   on specificity and left keyboard users with no ring at all on the search box
   and the two game inputs. Restored, in gold, with the same border tell the
   mouse gets. Nothing here is ever allowed to remove an outline again. */
.fsearch:focus-visible,
#g-input:focus-visible,#c-name:focus-visible{
  outline:2px solid var(--gold-bright);outline-offset:2px;border-color:var(--gold-deep);
}
/* a focused control also gets the projection glow the theme uses for "live" */
.fsearch:focus-visible,#g-input:focus-visible,#c-name:focus-visible,
.chip:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible,.seenbtn:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 16%,transparent);
}
/* keyboard focus on a card lights the same frame the mouse lights, so tabbing
   through the grid reads as the same interaction, not a second one */
.card:focus-within,.blogcard:focus-within,.actor:focus-within{outline:2px solid var(--gold-bright);outline-offset:3px}
.skip:focus-visible{outline:2px solid var(--screen-black);outline-offset:2px}

/* ---------- §3.6 · hover that means something ---------------------------
   Prose links stop being a colour swap. The underline is drawn on, left to
   right, in foil gold — the projector wipe this system already uses on
   .sechead. Structural links (nav, footer, crumbs, tables) keep their existing
   colour tell: they are furniture, and furniture should not perform. */
.prose p > a,.prose li > a,.dl dd a,.bank-films a,.srcline a,.caption a{
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--dur-med) var(--ease-out),color var(--dur-fast) var(--ease-out);
  padding-bottom:.06em;
}
.prose p > a:hover,.prose li > a:hover,.dl dd a:hover,.bank-films a:hover,
.srcline a:hover,.caption a:hover,
.prose p > a:focus-visible,.prose li > a:focus-visible{background-size:100% 1px}
/* external links out of the prose declare themselves on hover rather than
   pretending to be internal */
.prose p > a[target="_blank"]:hover::after{content:" ↗";color:var(--marigold)}
/* rows: the hover tint already exists; give it a gold edge so the eye can
   track across a wide table without losing the line */
tbody tr{box-shadow:inset 2px 0 0 transparent;transition:box-shadow var(--dur-fast) var(--ease-out)}
tbody tr:hover,tbody tr:focus-within{box-shadow:inset 2px 0 0 var(--gold)}

/* ---------- §6.4 · the dated source line --------------------------------
   One shape, every page: WHO said it · WHEN the record was taken · what the
   figure is and is not. Set on a hairline above, the way a plate caption sits
   under an illustration in the Criterion booklet this system is modelled on.
   The doctrine it renders: no figure without a source line, no source line
   without a date — and where a claim is ours alone, it says so instead. */
.provenance{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--smoke)}
.provenance .srcline + .srcline{margin-top:var(--sp-2)}
.srcline{max-width:46rem}
.src-k{font:600 .6875rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--marigold);margin-right:.5rem}
.src-date{color:var(--ink-mid);white-space:nowrap}
/* a claim whose date could not be established must LOOK unfinished */
.src-nodate{color:var(--sindoor);font-style:italic}
/* our own judgement, marked as judgement — peacock, the system's second voice,
   so it never reads as a citation */
.src-editorial .src-k{color:var(--peacock-bright)}
.src-gap{color:var(--ink-low)}
.srcline a{color:var(--ink-mid)}
.srcline a:hover{color:var(--gold)}

/* ---------- §6.2 · heading anchors ---------------------------------------
   Every h2 carries an id so fragment links resolve. Give them scroll clearance
   under the sticky nav, and a quiet foil marker on hover. No layout shift:
   scroll-margin affects scrolling only. */
h2[id]{scroll-margin-top:calc(var(--sp-8) + 1rem);position:relative}
h2[id]:hover::after{content:"§";position:absolute;margin-left:.4em;color:var(--gold-deep);
  font-family:var(--font-rank);font-size:.6em;opacity:.7}