/* =========================================================
   THE BIG BOX — design system (production port)
   Direction: The Big-Box Gatefold (seed 825198ae)
   A shelf of oversized laserdisc/VHS big-box sleeves you open,
   not a streaming carousel you scroll.

   Loaded AFTER Bootstrap/global.css in layout.html.twig: this
   sheet only targets the movie/actor/recommendation surfaces
   plus the shared nav chrome. Ecommerce/account/checkout pages
   keep their existing Bootstrap look untouched.
   ========================================================= */

:root {
  --ink:        #0d0d10;
  --ink-2:      #17171c;
  --ink-3:      #202027;
  --line:       rgba(242, 237, 225, 0.12);
  --line-bright:rgba(242, 237, 225, 0.22);

  --paper:      #f2ede1;
  --paper-dim:  #e4dcc8;

  --cream:      #f2ede1;
  --cream-muted:#b8ae98;
  --cream-faint:#8a8271;

  --red:        #b3122a;
  --red-bright: #d81e3f;
  --red-deep:   #7c0c1d;

  --gold:       #c9a24b;
  --gold-bright:#e6c777;
  --gold-deep:  #8a6a2d;

  --yellow:       #e6b400;
  --yellow-bright:#ffd447;
  --yellow-deep:  #8f6a00;

  --blue:         #3d7ea6;
  --blue-bright:  #6fb2da;
  --blue-deep:    #245878;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-label:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Alegreya', Georgia, serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* single dial for every statistics-page chart animation — bump these two
     to make bars/gauges/columns grow faster or slower everywhere at once */
  --chart-duration: 2s;
  --chart-duration-slow: 2.6s;
  --chart-stagger: 0.1s;
}

/* =========================================================
   SITE-WIDE NAV CHROME
   (targets the real nav.navbar.site-header markup in layout.html.twig —
   additive: Bootstrap classes stay, these rules just win the cascade)
   ========================================================= */

body.bigbox {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
}

/* "Dust in the Beam" — a slow drift of warm motes behind every page,
   like dust caught in a projector's throw. Sits on the negative-z-index
   layer so it paints behind ordinary (non-positioned) page content
   regardless of DOM order, without needing every section to opt in. */
#bb-dust {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* global.css paints an opaque grey on <main> and .main-content (the shelf
   grid's own wrapper) — that sits on top of the fixed dust layer over the
   entire page body, leaving the motes visible only where neither rule
   reaches (the footer). Strip it so the ink background + dust show through. */
body.bigbox main,
body.bigbox .main-content {
  background: transparent;
}

nav.site-header {
  position: relative;
  background: linear-gradient(to bottom, rgba(13,13,16,0.97), rgba(13,13,16,0.9) 70%, rgba(13,13,16,0.75)) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  padding-top: 14px;
  padding-bottom: 14px;
}

nav.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--cream);
  white-space: nowrap;
  text-decoration: none;
}
.wordmark .accent { color: var(--gold-bright); }
.wordmark:hover { color: var(--cream); }

footer .wordmark { color: var(--cream-muted); }
footer .wordmark .accent { color: var(--gold-deep); }

.bb-lang-switch {
  display: inline-flex;
  gap: 4px;
  margin-top: 8px;
}
.bb-lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cream-faint);
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.bb-lang-switch a .flag { font-size: 13px; line-height: 1; }
.bb-lang-switch a:hover { color: var(--cream); border-color: var(--line-bright); }
.bb-lang-switch a.is-active { color: var(--gold-bright); border-color: var(--gold-deep); }
@media (max-width: 720px) { .bb-lang-switch { margin-top: 16px; } }

nav.site-header .navbar-toggler { border-color: var(--line-bright); }
nav.site-header .navbar-toggler-icon { filter: invert(0.9); }

ul.menu-links { gap: clamp(14px, 2.4vw, 30px); }
ul.menu-links > li > a {
  font-family: var(--font-label);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-muted) !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
ul.menu-links > li > a:hover,
ul.menu-links > li.active > a {
  color: var(--gold-bright) !important;
  border-color: var(--gold-deep);
}

/* named .bb-search-form (not .search-box) — the theme's own global.css already
   defines .search-box as an absolutely-positioned, zero-height toggle panel,
   which silently ate the new markup */
.bb-search-form {
  position: relative !important;
  display: block !important;
  height: auto !important;
  max-width: 200px;
  margin: 0 0 0 clamp(10px, 2vw, 24px);
}
.bb-search-form svg {
  display: block;
  position: absolute; left: 11px; top: 50%;
  width: 13px; height: 13px;
  margin: 0;
  transform: translateY(-50%);
  stroke: var(--cream-faint);
  fill: none;
  pointer-events: none;
}
.bb-search-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: normal;
  border-radius: 2px;
  padding: 8px 12px 8px 32px;
  transition: border-color .25s var(--ease-out);
}
.bb-search-form input:focus { outline: none; border-color: var(--gold-bright); }
.bb-search-form input::placeholder { color: var(--cream-faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; }

/* the "add new movie" nav entry now lives here instead of the text menu —
   see navigation_exclude on document 203 ("/en/New Movies") */
.bb-add-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1px solid var(--yellow-deep);
  color: var(--ink);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.bb-add-btn:hover { background: var(--yellow-bright); transform: rotate(90deg); }
.bb-add-btn svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; }

.bb-stats-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--blue-deep);
  color: var(--blue-bright);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-stats-btn:hover { background: var(--blue); border-color: var(--blue-bright); }
.bb-stats-btn:hover svg { stroke: var(--cream); }
.bb-stats-btn svg { width: 16px; height: 16px; stroke: var(--blue-bright); fill: none; }

/* marquee bulb-chase: cinema marquee lights, added only on the overview/recommendations page */
nav.site-header.has-marquee::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background-image: repeating-radial-gradient(circle at 0 50%, var(--gold-bright) 0 1.4px, transparent 1.6px 20px);
  background-size: 20px 3px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 3px rgba(230,199,119,0.85));
  animation: bigbox-marquee-chase 1.1s linear infinite;
  opacity: 0.9;
  pointer-events: none;
}
@keyframes bigbox-marquee-chase { to { background-position: 20px 0; } }
@media (prefers-reduced-motion: reduce) {
  nav.site-header.has-marquee::after { animation: none; }
}

.stat-readout {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(230,199,119,0.4);
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.stat-readout .sep { color: var(--cream-faint); text-shadow: none; }

/* subtle, not the loud Bootstrap red pill — a small ghost circle that
   only really announces itself on hover, tucked further from the edge */
#back-to-top {
  right: 22px !important;
  bottom: 22px !important;
  width: 42px;
  height: 42px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13,13,16,0.7) !important;
  border: 1px solid var(--gold-deep) !important;
  color: var(--gold-bright) !important;
  box-shadow: none;
  opacity: 0.8;
  backdrop-filter: blur(4px);
  transition: opacity .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
#back-to-top:hover {
  opacity: 1;
  background: rgba(13,13,16,0.92) !important;
  border-color: var(--gold-bright) !important;
}
#back-to-top .fa { font-size: 15px; color: inherit; }

/* =========================================================
   SHARED ATOMS
   ========================================================= */

.bigbox-shell { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

h1.bb-title, h2.bb-title, h3.bb-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

.chip, .tab, .btn-bb {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.chip {
  display: inline-block;
  font-size: 10.5px;
  padding: 5px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--cream-muted);
}
.chip.is-owned { color: var(--gold-bright); border-color: var(--gold-deep); }
.chip.is-ordered { color: var(--ink); background: var(--yellow); border-color: var(--yellow-deep); }
.chip.is-notowned { color: var(--paper); background: var(--red-deep); border-color: var(--red-deep); }
.chip.is-missing { color: var(--cream-faint); background: transparent; border-style: dashed; border-color: var(--line-bright); }
.chip.is-accession {
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  border-color: var(--gold-deep);
  background: rgba(230,199,119,0.08);
}

/* the original Pimcore "Home > ..." trail — not useful on a single-user
   personal catalog with a shallow page tree, hidden rather than removed
   from the Twig logic (mainNavStartNode it computes is reused by the
   left-nav sidebar block) */
.breadcrumb-header { display: none; }

/* our own "back to the shelf" link on detail pages — named bb- to avoid
   colliding with Bootstrap's own .breadcrumb component classes */
.bb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 4vw, 40px);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.bb-back-link .arrow { transition: transform .25s var(--ease-out); }
.bb-back-link:hover { color: var(--gold-bright); }
.bb-back-link:hover .arrow { transform: translateX(-4px); }

.btn-bb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 13px 26px;
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.btn-bb:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.btn-bb.is-solid { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-bb.is-solid:hover { background: var(--red-bright); border-color: var(--red-bright); color: var(--paper); }
.btn-bb .arrow { transition: transform .3s var(--ease-out); }
.btn-bb:hover .arrow { transform: translateX(4px); }

.bb-reveal { opacity: 0; transform: translateY(24px); }
.bb-reveal.is-visible { animation: bb-reveal-up .8s var(--ease-out) forwards; }
@keyframes bb-reveal-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bb-reveal { opacity: 1; transform: none; animation: none; } }

/* =========================================================
   GATEFOLD (hero / detail top section — reused for movie & actor detail, and the flagship pick)
   ========================================================= */

.bb-hero-wall {
  position: relative;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 72px);
  background:
    linear-gradient(180deg, rgba(13,13,16,0) 0%, rgba(13,13,16,0.4) 78%, var(--ink) 100%);
  overflow: hidden;
}

.bb-spine-wall { position: absolute; inset: 0 0 32% 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bb-spine-wall::before {
  content: "";
  position: absolute;
  inset: -6% -8% auto -8%;
  height: 78%;
  background: repeating-linear-gradient(90deg,
    var(--gold-deep) 0 22px, var(--ink-2) 22px 27px,
    var(--red-deep) 27px 45px, var(--ink-2) 45px 50px,
    var(--paper-dim) 50px 64px, var(--ink-2) 64px 69px,
    var(--ink-3) 69px 96px, var(--ink-2) 96px 101px,
    var(--gold) 101px 118px, var(--ink-2) 118px 123px,
    var(--red) 123px 140px, var(--ink-2) 140px 145px
  );
  transform: perspective(2200px) rotateX(18deg) scaleY(1.08);
  transform-origin: top center;
  opacity: 0.48;
  animation: bb-spine-drift 16s linear infinite;
}
@keyframes bb-spine-drift {
  from { background-position: 0 0; }
  to { background-position: -580px 0; }
}
.bb-spine-wall::after { animation: bb-spine-glow 9s ease-in-out infinite alternate; }
@keyframes bb-spine-glow {
  from { opacity: 1; }
  to { opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-spine-wall::before, .bb-spine-wall::after { animation: none; }
}
.bb-spine-wall::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 85% at 50% 15%, rgba(13,13,16,0.98) 0%, rgba(13,13,16,0.8) 45%, transparent 78%),
    linear-gradient(180deg, rgba(13,13,16,0.1) 0%, var(--ink) 92%);
}

.gatefold {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  max-width: 1180px;
  margin: 0 auto;
  min-height: clamp(380px, 58vh, 600px);
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  overflow: hidden;
}

/* a slow diagonal sheen sweeping across every gatefold — the one ambient
   "cool, subtle" motion shared by the flagship hero and every detail page,
   so those pages read as alive rather than a static screenshot */
.gatefold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(230,199,119,0.05) 47%,
    rgba(230,199,119,0.15) 50%,
    rgba(230,199,119,0.05) 53%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: bb-gatefold-sheen 8s ease-in-out infinite;
}
@keyframes bb-gatefold-sheen {
  0% { background-position: 160% 0; }
  45%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gatefold::after { animation: none; }
}

.gatefold-panel { position: relative; overflow: hidden; min-width: 0; }
.gatefold-panel.is-art {
  background: #050505;
  /* fixed to the top of its own row at a natural 2:3 size — not stretched
     to match the text, not sticky/scroll-following (that read as fidgety
     once the text could also be quite short) */
  align-self: start;
  aspect-ratio: 2 / 3;
}
.gatefold-panel.is-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: saturate(1.05) contrast(1.03);
}
.gatefold-panel.is-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,16,0.15), transparent 30%, transparent 80%, rgba(13,13,16,0.55));
}
.gatefold::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50.5%;
  width: 34px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(230,199,119,0.16) 45%, rgba(230,199,119,0.28) 50%, rgba(230,199,119,0.16) 55%, transparent);
  z-index: 5; pointer-events: none;
}
.gatefold-panel.is-text {
  padding: clamp(28px, 4vw, 56px) clamp(30px, 4.5vw, 60px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse 520px 420px at 0% 0%, rgba(230,199,119,0.10), transparent 60%), var(--ink-2);
}
.gatefold-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.05;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 0 30px rgba(230,199,119,0.12);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.gatefold-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.gatefold-liner {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cream-muted);
  max-width: 56ch;
}
.gatefold-liner::first-letter {
  font-family: var(--font-display);
  font-size: 2.4em;
  float: left;
  line-height: 0.8;
  padding: 0.05em 0.08em 0 0;
  color: var(--gold-bright);
}

/* "Show more" — caps the liner at a modest height (well under the poster's
   own height) with a soft fade at the cut, instead of a long text column
   throwing off the layout next to the art panel */
.gatefold-liner.is-collapsed {
  max-height: 220px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}
.bb-liner-toggle {
  display: inline-block;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.bb-liner-toggle:hover { color: var(--cream); }

.gatefold-facts {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-label); font-size: 11.5px; color: var(--cream-faint); letter-spacing: 0.04em;
}
.gatefold-facts b { color: var(--cream); font-weight: 400; }
.gatefold-actions { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .gatefold { grid-template-columns: 1fr; min-height: auto; }
  .gatefold-panel.is-art { align-self: auto; aspect-ratio: 4 / 3; }
  .gatefold::before { display: none; }
}

/* =========================================================
   RECOMMENDATIONS SPOTLIGHT (Netflix-style: a full-bleed trailer
   plays behind the flagship pick; picking another title below
   swaps this in place via /recommendations/spotlight/{id})
   ========================================================= */

.bb-spotlight {
  position: relative;
  min-height: clamp(460px, 82vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.bb-spotlight-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.bb-spotlight-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: saturate(1.05) contrast(1.03);
  transition: opacity .5s var(--ease-out);
}
.bb-spotlight-video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.bb-spotlight-video.is-ready { opacity: 1; }
.bb-spotlight.is-video-ready .bb-spotlight-poster { opacity: 0; }
/* 16:9 "fill" trick: oversize the iframe then center it, so a 16:9 embed
   covers any hero aspect ratio the way object-fit:cover would for an image */
.bb-spotlight-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; height: 100vh;
  min-width: 100vw; min-height: 56.27vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.bb-spotlight-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, var(--ink) 0%, rgba(13,13,16,0.75) 22%, rgba(13,13,16,0.25) 48%, transparent 68%),
    linear-gradient(90deg, rgba(13,13,16,0.85) 0%, rgba(13,13,16,0.35) 38%, transparent 70%);
}
.bb-mute-btn {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 64px); bottom: clamp(28px, 5vw, 56px);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(13,13,16,0.55);
  border: 1px solid var(--line-bright);
  color: var(--cream);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.bb-mute-btn:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.bb-mute-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }

/* deliberately quieter than the mute button — a corner affordance you
   notice once you look for it, not a loud "reroll" CTA */
.bb-shuffle-btn {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 64px); top: clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cream-faint);
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.bb-shuffle-btn:hover, .bb-shuffle-btn:focus-visible {
  color: var(--gold-bright);
  border-color: var(--line-bright);
  background: rgba(13,13,16,0.55);
}
.bb-shuffle-btn:disabled { opacity: 0.4; pointer-events: none; }
.bb-shuffle-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.bb-shuffle-btn.is-spinning svg { animation: bb-shuffle-spin .5s var(--ease-out); }
@keyframes bb-shuffle-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

.bb-spotlight-spinner {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line-bright);
  border-top-color: var(--gold-bright);
  animation: bb-spotlight-spin 0.8s linear infinite;
}
@keyframes bb-spotlight-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.bb-spotlight .bigbox-shell { position: relative; z-index: 2; width: 100%; }
.bb-spotlight-info {
  max-width: 640px;
  padding-bottom: clamp(48px, 7vw, 88px);
  display: flex; flex-direction: column; gap: 16px;
}
.bb-spotlight-title { font-size: clamp(32px, 5vw, 64px); text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
.bb-spotlight-info .gatefold-liner { text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.bb-spotlight-info .gatefold-liner::first-letter { text-shadow: none; }
.bb-spotlight-info .gatefold-liner:empty { display: none; }

.bb-spotlight.is-loading .bb-spotlight-info { opacity: 0.45; pointer-events: none; }
.bb-spotlight.is-loading .bb-spotlight-spinner { display: flex; }

/* highlight whichever "More Recommendations" sleeve is currently playing */
.sleeve.is-active .sleeve-cover { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

@media (max-width: 720px) {
  .bb-spotlight { align-items: flex-end; min-height: clamp(420px, 92vh, 760px); }
  .bb-spotlight-info { max-width: none; }
  .bb-mute-btn { width: 36px; height: 36px; }
  .bb-shuffle-btn { width: 32px; height: 32px; top: 16px; right: 16px; }
}

/* =========================================================
   SHELVES (poster / actor rows)
   ========================================================= */

.bb-shelf-section { padding: clamp(40px, 6vw, 76px) 0 0; }
.bb-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.bb-shelf-head h2 { font-size: clamp(22px, 2.6vw, 32px); color: var(--cream); }
.bb-shelf-head .see-all {
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--cream-faint); white-space: nowrap; transition: color .25s var(--ease-out);
}
.bb-shelf-head .see-all:hover { color: var(--gold-bright); }

.bb-shelf-track {
  position: relative;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  padding: 8px 4px 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.bb-shelf-track::-webkit-scrollbar { display: none; }
.bb-shelf-track.is-dragging { cursor: grabbing; user-select: none; }

.bb-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  padding: 26px 0 40px;
}
.bb-shelf-grid .sleeve { width: 100%; }

.sleeve {
  scroll-snap-align: start;
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 190px);
  display: block;
  transform: translateY(0);
  transition: transform .45s var(--ease-out);
}
.sleeve:hover, .sleeve:focus-visible { transform: translateY(-10px); }

.sleeve-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(0,0,0,0.2);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.sleeve:hover .sleeve-cover, .sleeve:focus-visible .sleeve-cover {
  border-color: transparent;
  box-shadow: 0 26px 48px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
.sleeve-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
  filter: saturate(0.86) brightness(0.92);
}
.sleeve:hover .sleeve-cover img, .sleeve:focus-visible .sleeve-cover img {
  transform: scale(1.045); filter: saturate(1.08) brightness(1);
}
.sleeve-spine {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 6px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold) 40%, var(--gold-deep));
  opacity: 0.55;
  transition: opacity .35s var(--ease-out), width .35s var(--ease-out);
}
.sleeve:hover .sleeve-spine, .sleeve:focus-visible .sleeve-spine { opacity: 1; width: 8px; }
.sleeve-status {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(13,13,16,0.72); color: var(--gold-bright);
  border: 1px solid rgba(230,199,119,0.35);
  backdrop-filter: blur(3px);
}
.sleeve-status.is-ordered { color: var(--ink); border-color: var(--yellow-deep); background: var(--yellow-bright); }
.sleeve-status.is-notowned { color: var(--paper); border-color: rgba(216,30,63,0.6); background: rgba(124,12,29,0.75); }
.sleeve-caption { margin-top: 12px; }
.sleeve-title {
  font-family: var(--font-label); font-size: 13px; letter-spacing: 0.02em; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sleeve-sub { font-size: 11px; color: var(--cream-faint); margin-top: 2px; font-family: var(--font-label); letter-spacing: 0.04em; }

.sleeve-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag {
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-faint);
}

/* actor / person card: a portrait sleeve, no spine or status — a different object, same shelf */
.actor-card { scroll-snap-align: start; flex: 0 0 auto; width: clamp(120px, 11vw, 148px); display: block; text-align: center; transition: transform .45s var(--ease-out); }
.actor-card:hover, .actor-card:focus-visible { transform: translateY(-8px); }
.actor-photo {
  position: relative; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.actor-card:hover .actor-photo, .actor-card:focus-visible .actor-photo {
  border-color: transparent; box-shadow: 0 22px 40px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
.actor-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(0.86) brightness(0.94);
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
}
.actor-card:hover .actor-photo img, .actor-card:focus-visible .actor-photo img { transform: scale(1.045); filter: saturate(1.05) brightness(1); }
.actor-name { margin-top: 12px; font-family: var(--font-label); font-size: 13px; color: var(--cream); }
.actor-role { font-size: 11px; color: var(--cream-faint); margin-top: 2px; font-family: var(--font-body); font-style: italic; }

/* =========================================================
   COLLECTION / SEARCH PAGE
   ========================================================= */

.bb-collection-head { padding: clamp(36px, 6vw, 60px) 0 0; }
.bb-collection-head h1 { font-size: clamp(30px, 4.2vw, 48px); }
.bb-collection-head p.dek { color: var(--cream-muted); font-family: var(--font-body); font-size: 16px; max-width: 60ch; margin-top: 12px; }

.filter-rail {
  position: relative;
  margin-top: clamp(24px, 4vw, 36px);
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}
.rail-row { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; }

.search-slot { position: relative; flex: 1 1 220px; min-width: 180px; }
.search-slot input {
  width: 100%;
  background: var(--ink-2); border: 1px solid var(--line-bright); border-radius: 2px;
  padding: 12px 16px 12px 16px;
  color: var(--cream); font-family: var(--font-label); font-size: 13px; letter-spacing: 0.03em;
  transition: border-color .25s var(--ease-out);
}
.search-slot input:focus { border-color: var(--gold-bright); outline: none; }
.search-slot input::placeholder { color: var(--cream-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

.tab-group { display: flex; gap: 2px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 2px; padding: 3px; }
.tab {
  font-size: 11px; padding: 8px 14px; color: var(--cream-faint); border-radius: 1px; white-space: nowrap;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.tab:hover { color: var(--cream); }
.tab.is-active { background: var(--gold-deep); color: var(--ink); }
.tab.is-active.tab-ordered { background: var(--yellow); color: var(--ink); }
.tab.is-active.tab-notowned { background: var(--red); color: var(--paper); }

.sort-select {
  background: var(--ink-2); border: 1px solid var(--line-bright); color: var(--cream);
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.05em;
  padding: 11px 30px 11px 14px; border-radius: 2px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cream-faint) 50%), linear-gradient(135deg, var(--cream-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.result-meta { margin-top: 16px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; color: var(--cream-faint); }
.result-meta b { color: var(--gold-bright); font-weight: 400; }

.bb-empty { padding: 90px 20px; text-align: center; color: var(--cream-faint); }
.bb-empty h3 { color: var(--cream); font-size: 22px; margin-bottom: 10px; font-family: var(--font-display); font-weight: 400; }

/* real Bootstrap pagination, restyled with our own glyphs — the theme's
   arrow.svg/doublearrow.svg icons live on an aria-hidden <span> that shared
   a selector with the active page's sr-only "(current)" span, so restyling
   that span un-hid screen-reader text and left a stray icon glyph floating
   over the active page number. Hide all of the theme's icon spans outright
   and draw our own arrows via ::before instead. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 36px 0 64px;
  list-style: none;
}
.pagination .page-item { display: flex; }
.pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 40px;
  height: 40px;
  padding: 0 14px !important;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  color: var(--cream-muted);
  font-family: var(--font-label);
  font-size: 13px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.pagination .page-item.active .page-link { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ink); }
.pagination .page-link:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px); }

/* kill every theme icon span (they're all aria-hidden — the sr-only span
   that must stay hidden is not) and draw plain gold glyphs instead */
.pagination .page-link span[aria-hidden] { display: none !important; }
.pagination .page-link.first::before,
.pagination .page-link.prev::before,
.pagination .page-link.next::before,
.pagination .page-link.last::before {
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1;
  color: var(--gold-bright);
}
.pagination .page-link.first::before { content: '\00ab'; }
.pagination .page-link.prev::before  { content: '\2039'; }
.pagination .page-link.next::before  { content: '\203a'; }
.pagination .page-link.last::before  { content: '\00bb'; }

/* =========================================================
   ADD-MOVIE FORM
   ========================================================= */

.form-container {
  max-width: 560px;
  margin: clamp(40px, 6vw, 64px) auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
}
.form-container h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 32px;
  text-align: center; color: var(--cream); margin: 0 0 28px;
}
.form-container .form-group { margin-bottom: 18px; }
.form-container label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-faint);
}
.form-container input[type="text"],
.form-container select,
.form-container input[type="file"] {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  padding: 11px 14px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
}
.form-container input[type="text"]:focus,
.form-container select:focus {
  outline: none; border-color: var(--gold-bright);
}
.form-container button {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.form-container button:hover { background: var(--red-bright); }

/* =========================================================
   STEELBOOK GALLERY MODAL (movie detail page — only rendered
   when the object has Steelbook_Images to show)
   ========================================================= */

.bb-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
}
.bb-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--ease-out);
}
body.bb-modal-open { overflow: hidden; }

.bb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,9,11,0.88);
  backdrop-filter: blur(6px);
}

.bb-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  padding: 28px;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  transform: translateY(16px) scale(0.98);
  transition: transform .3s var(--ease-out);
}
.bb-modal.is-open .bb-modal-dialog { transform: translateY(0) scale(1); }

.bb-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  background: var(--ink);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-close:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

.bb-modal-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
}
.bb-modal-image {
  max-width: 100%;
  max-height: min(60vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--ink);
}
.bb-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  background: rgba(13,13,16,0.75);
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-nav:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.bb-modal-nav.prev { left: 8px; }
.bb-modal-nav.next { right: 8px; }

.bb-modal-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.bb-modal-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 88px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-modal-thumb:hover { opacity: 0.85; }
.bb-modal-thumb.is-active { opacity: 1; border-color: var(--gold-bright); }

/* =========================================================
   STATISTICS PAGE
   Every chart here is server-rendered SVG/CSS driven by a
   --pct or --offset custom property set inline per row — no
   charting library, and the grow-in plays once on load the
   same way .bb-reveal.is-visible already does for shelf cards.
   ========================================================= */

.bb-stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.stat-tile {
  background: var(--ink-2);
  padding: clamp(18px, 2.4vw, 26px) clamp(14px, 2vw, 20px);
  text-align: center;
}
.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--gold-bright);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-tile-label {
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---- coverage gauges ---- */
.gauge-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); }
.gauge-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px clamp(20px, 3vw, 32px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.gauge { width: 92px; height: 92px; flex: 0 0 auto; transform: rotate(-90deg); }
.gauge-track, .gauge-fill {
  fill: none;
  stroke-width: 10;
}
.gauge-track { stroke: var(--line-bright); }
.gauge-fill {
  stroke: var(--gold-bright);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
}
/* gated on the .bb-reveal ancestor's is-visible, same trigger the
   IntersectionObserver in bigbox.js adds — otherwise this plays once at
   page load and has already finished by the time anyone scrolls down to
   a below-the-fold chart */
.bb-reveal.is-visible .gauge-fill {
  animation: bb-gauge-fill var(--chart-duration-slow) var(--ease-out) forwards;
  animation-delay: .2s;
}
.gauge-fill.is-alt { stroke: var(--yellow-bright); }
@keyframes bb-gauge-fill { to { stroke-dashoffset: var(--offset); } }
.gauge-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.gauge-label {
  margin-top: 2px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---- horizontal bar lists (genres, status, disc type) ---- */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr 34px;
  align-items: center;
  gap: 12px;
}
.bar-row-label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--cream-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  height: 10px;
  background: rgba(242,237,225,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
}
.bb-reveal.is-visible .bar-fill {
  animation: bb-bar-grow var(--chart-duration) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--chart-stagger));
}
@keyframes bb-bar-grow { to { width: var(--pct); } }
.bar-fill.is-genre { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.bar-fill.is-owned { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.bar-fill.is-ordered { background: linear-gradient(90deg, var(--yellow-deep), var(--yellow)); }
.bar-fill.is-notowned { background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); }
.bar-row-count {
  font-family: var(--font-label);
  font-size: 12.5px;
  color: var(--cream);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.split-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.split-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2.6vw, 26px); }
.split-card h3 {
  margin: 0 0 16px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---- decade column chart ---- */
.decade-chart { padding: clamp(16px, 2vw, 24px) clamp(8px, 2vw, 20px); background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; }
.decade-bars { display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 12px); height: 200px; }
.decade-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.decade-count {
  margin-bottom: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--cream-muted);
  font-variant-numeric: tabular-nums;
}
.decade-bar {
  width: 100%;
  max-width: 40px;
  height: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
}
.bb-reveal.is-visible .decade-bar {
  animation: bb-col-grow var(--chart-duration) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--chart-stagger));
}
@keyframes bb-col-grow { to { height: var(--pct); } }
.decade-labels { display: flex; gap: clamp(4px, 1vw, 12px); margin-top: 10px; }
.decade-labels span {
  flex: 1;
  text-align: center;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--cream-faint);
}

.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.fact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(230,199,119,0.06);
  border: 1px solid var(--gold-deep);
  border-radius: 4px;
}
.fact-label { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-bright); }
.fact-value { font-family: var(--font-body); font-size: 15px; color: var(--cream); }
.fact-year { color: var(--cream-faint); }

/* ---- top-billed actors leaderboard ---- */
.actor-leaderboard { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 26px 40px 1fr minmax(70px, 200px) 30px;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s var(--ease-out);
}
.leaderboard-row:hover { background: rgba(242,237,225,0.05); }
.leaderboard-rank {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--cream-faint);
  text-align: center;
}
.leaderboard-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  flex: 0 0 auto;
}
.leaderboard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leaderboard-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaderboard-bar-track {
  display: block;
  height: 8px;
  background: rgba(242,237,225,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.leaderboard-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
}
.bb-reveal.is-visible .leaderboard-bar-fill {
  animation: bb-bar-grow var(--chart-duration) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--chart-stagger));
}
.leaderboard-count {
  font-family: var(--font-label);
  font-size: 12.5px;
  color: var(--cream-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* deliberately NOT disabled under prefers-reduced-motion — same call already
   made for #bb-dust: this is a personal single-user site and the owner wants
   the motion regardless of an OS-level setting, rather than these charts
   silently snapping to their final values for whoever's browser reports it */

/* ---- the actual shelf: 4 columns, 6 compartments each, alternating
   small/large heights to match the real cabinet ---- */
.shelf-cabinet {
  display: flex;
  gap: clamp(6px, 1.2vw, 10px);
  padding: clamp(12px, 2vw, 18px);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-bright);
  border-radius: 6px;
}
.shelf-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vw, 10px);
}
.shelf-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  background: var(--ink-2);
  overflow: hidden;
  font-family: inherit;
  padding: 0;
}
/* real <button> elements for the clickable (count > 0) compartments —
   reset the button chrome and add an affordance that this one opens */
button.shelf-box { cursor: pointer; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
button.shelf-box:hover, button.shelf-box:focus-visible { border-color: var(--gold-bright); background: var(--ink-3); }
.shelf-box.is-small { min-height: 58px; }
.shelf-box.is-large { min-height: 100px; }
.shelf-box.is-unavailable {
  background: repeating-linear-gradient(135deg, rgba(242,237,225,0.04) 0 8px, transparent 8px 16px);
  border-style: dashed;
  border-color: var(--line);
  opacity: 0.45;
}
.shelf-box-na {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.shelf-box-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-label);
  font-size: clamp(10px, 1.3vw, 12px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-align: center;
  padding: 0 4px;
}
.shelf-box-count {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.shelf-box-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(0deg, rgba(230,199,119,0.32), rgba(230,199,119,0.04));
}
.bb-reveal.is-visible .shelf-box-fill {
  animation: bb-shelf-fill var(--chart-duration) var(--ease-out) forwards;
}
@keyframes bb-shelf-fill { to { height: var(--pct); } }
.shelf-caption {
  margin: 14px 2px 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--cream-faint);
  text-align: center;
}

/* ---- shelf compartment modal: what's actually in this box ---- */
.shelfbox-dialog { max-width: 720px; }
.shelfbox-dialog-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--gold-bright);
  margin: 0 0 18px;
}
.shelfbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.shelfbox-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.shelfbox-poster {
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.shelfbox-item:hover .shelfbox-poster, .shelfbox-item:focus-visible .shelfbox-poster {
  border-color: var(--gold-bright);
  transform: translateY(-3px);
}
.shelfbox-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelfbox-item-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--cream-muted);
  line-height: 1.3;
}
.shelfbox-loading, .shelfbox-empty {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
  padding: 24px 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* ---- add-movie "already on the shelf?" modal ---- */
.similar-dialog { max-width: 560px; }
.similar-dialog-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--gold-bright);
  margin: 0 0 8px;
}
.similar-dialog-dek {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--cream-muted);
  margin: 0 0 22px;
  max-width: 46ch;
}
.similar-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.similar-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.similar-choice:hover, .similar-choice:focus-visible { border-color: var(--gold-bright); background: var(--ink-3); }
.similar-choice-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.similar-choice-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.similar-choice-poster.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230,199,119,0.05);
  border-style: dashed;
  border-color: var(--gold-deep);
}
.similar-choice-plus { font-family: var(--font-display); font-size: 40px; color: var(--gold-deep); line-height: 1; }
.similar-choice-title { font-family: var(--font-body); font-size: 15px; color: var(--cream); margin-top: 2px; }
.similar-choice-meta { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.04em; color: var(--cream-faint); min-height: 14px; }
.similar-choice-cta {
  margin-top: 4px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

@media (max-width: 560px) {
  .similar-choice-row { grid-template-columns: 1fr; }
  .shelfbox-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* =========================================================
   ADD MOVIE FORM
   ========================================================= */

.add-movie-card {
  max-width: 520px;
  margin: clamp(28px, 4vw, 44px) 0 60px;
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.bb-form-group { margin-bottom: 20px; }
.bb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bb-form-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.bb-form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .2s var(--ease-out);
}
.bb-form-input:focus { outline: none; border-color: var(--gold-bright); }
select.bb-form-input { cursor: pointer; }
.bb-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--ink);
  border: 1px dashed var(--line-bright);
  border-radius: 4px;
  color: var(--cream-muted);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.bb-file-picker:hover { border-color: var(--gold-deep); color: var(--cream); }
.bb-file-picker svg { width: 19px; height: 19px; flex: 0 0 auto; stroke: var(--gold-bright); fill: none; }
.add-movie-card .btn-bb { width: 100%; justify-content: center; margin-top: 6px; }

@media (max-width: 560px) {
  .bb-form-row { grid-template-columns: 1fr; }
}

/* =============== responsive =============== */

@media (max-width: 560px) {
  nav.site-header .container { gap: 10px; }
  .rail-row { flex-direction: column; align-items: stretch; }
  .tab-group { width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tab-group::-webkit-scrollbar { display: none; }
  /* flex-basis becomes a HEIGHT basis once the row turns column — reset it, don't just set width */
  .sort-select, .search-slot { flex: 0 0 auto; width: 100%; }
  .bb-modal-dialog { padding: 18px; }
  .bb-modal-close { top: -10px; right: -10px; }
  .bb-modal-nav { width: 36px; height: 36px; font-size: 20px; }
}

@media (max-width: 480px) {
  .shelf-cabinet { gap: 4px; padding: 8px; }
  .shelf-column { gap: 4px; }
  .shelf-box.is-small { min-height: 48px; }
  .shelf-box.is-large { min-height: 78px; }
}

/* =========================================================
   FRANCHISE PAGES
   Two surfaces: a grid of backdrop-led franchise cards, and a
   detail page built around a full-bleed hero (slow Ken Burns
   zoom on the collection's backdrop) with a facts card that
   floats up over its bottom edge, and a numbered vertical
   "saga timeline" of the owned films in release order — a
   different rhythm from the shelf-grid used everywhere else.
   ========================================================= */

.franchise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(28px, 4vw, 44px);
}
.franchise-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  text-decoration: none;
  isolation: isolate;
}
.franchise-card-media { position: absolute; inset: 0; background: #000; }
.franchise-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.82);
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}
.franchise-card:hover .franchise-card-media img,
.franchise-card:focus-visible .franchise-card-media img {
  transform: scale(1.06);
  filter: saturate(1.08) brightness(0.95);
}
.franchise-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,16,0) 28%, rgba(13,13,16,0.94) 100%);
}
.franchise-card-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2.6vw, 28px);
  display: flex; flex-direction: column; gap: 8px;
}
.franchise-card-count {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(230,199,119,0.5);
}
.franchise-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.05;
  color: var(--cream);
  text-shadow: 0 2px 16px rgba(0,0,0,0.75);
  text-wrap: balance;
}
.franchise-card-facts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- detail hero ---- */
.franchise-hero {
  position: relative;
  min-height: clamp(420px, 76vh, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.franchise-hero-media {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center 30%;
  filter: saturate(1.05) contrast(1.02);
  animation: bb-franchise-kenburns 24s ease-in-out infinite alternate;
}
@keyframes bb-franchise-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
.franchise-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--ink) 0%, rgba(13,13,16,0.82) 32%, rgba(13,13,16,0.3) 62%, transparent 88%),
    linear-gradient(90deg, rgba(13,13,16,0.7) 0%, transparent 58%);
}
.franchise-hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(56px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.franchise-eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(230,199,119,0.4);
}
.franchise-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.5vw, 88px);
  line-height: 0.98;
  color: var(--cream);
  text-shadow: 0 4px 32px rgba(0,0,0,0.75);
  text-wrap: balance;
  margin: 0;
}
.franchise-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.franchise-hero-overview {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--cream-muted);
  max-width: 62ch;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* ---- facts block, floated up over the hero's bottom edge ---- */
.franchise-facts {
  position: relative;
  z-index: 3;
  margin-top: clamp(-72px, -8vw, -48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.fact-tile {
  background: var(--ink-2);
  padding: clamp(18px, 2.4vw, 26px) clamp(10px, 2vw, 18px);
  text-align: center;
}
.fact-tile-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--gold-bright);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fact-tile-label {
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.franchise-missing-note {
  margin: 20px 0 0;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cream-faint);
  text-align: center;
}

/* ---- the saga timeline ---- */
.saga-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 28px);
}
.saga-timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-deep), var(--line));
  z-index: 0;
}
.saga-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: center;
  text-decoration: none;
}
.saga-marker {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 2px solid var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--gold-bright);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.saga-item:hover .saga-marker,
.saga-item:focus-visible .saga-marker { border-color: var(--gold-bright); background: var(--ink-3); }
.saga-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  align-items: center;
  min-width: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.saga-item:hover .saga-card,
.saga-item:focus-visible .saga-card { border-color: var(--gold-deep); transform: translateX(6px); }
.saga-poster { aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: #000; }
.saga-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saga-info { min-width: 0; }
.saga-year {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

/* a gap in the saga, not a chapter of it — present but visibly not yours */
.saga-item.is-missing .saga-marker {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-bright);
  color: var(--cream-faint);
}
.saga-item.is-missing .saga-card { border-style: dashed; opacity: 0.62; }
.saga-item.is-missing:hover .saga-card,
.saga-item.is-missing:focus-visible .saga-card { opacity: 0.85; border-color: var(--line-bright); transform: none; }
.saga-item.is-missing .saga-poster img { filter: grayscale(0.7) brightness(0.75); }
.saga-item.is-missing .saga-year { color: var(--cream-faint); }
.saga-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 2vw, 23px);
  color: var(--cream);
  margin: 0 0 8px;
  line-height: 1.15;
}
.saga-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .franchise-hero-media { animation: none; }
}

@media (max-width: 640px) {
  .bar-row { grid-template-columns: 84px 1fr 28px; gap: 8px; }
  .leaderboard-row { grid-template-columns: 20px 32px 1fr 70px 26px; gap: 8px; padding: 6px; }
  .leaderboard-name { font-size: 13px; }
  .decade-bars { height: 150px; }
  .gauge-card { flex-direction: column; text-align: center; }
  .saga-item { grid-template-columns: 32px 1fr; gap: 12px; }
  .saga-marker { width: 32px; height: 32px; font-size: 14px; }
  .saga-timeline::before { left: 16px; }
  .saga-card { grid-template-columns: 64px 1fr; gap: 12px; padding: 10px; }
  .franchise-hero-content { max-width: none; }
}