/* ============================================================
   Merk Arts — components.css
   Base look for the shared, themeable app skeleton. Every value
   that a theme should control is pulled from var(--token) in
   tokens.css. This sheet renders a clean, attractive Cinema-dark
   base on its own; theme-*.css elevates per direction.
   Component classes follow SYSTEM.md's "Component class contract".
   ============================================================ */

/* ---------------------------------------------------------------
   Unified line-icon system
   ONE inline-SVG set: 24×24 viewBox, stroke="currentColor",
   fill="none", ~1.6px stroke, rounded caps/joins. currentColor
   means every icon inherits its host's color, so themes tint them.
   --------------------------------------------------------------- */
.icon{
  width:1em;height:1em;
  display:inline-block;flex:0 0 auto;vertical-align:-0.125em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Solid glyphs that read better filled at small sizes (play triangle,
   pause bars). They opt out of the line treatment explicitly. */
.icon--solid{ fill:currentColor; stroke:none; }

/* ---------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
html{ overflow-x:clip; } /* no sideways pan, ever — scroll strips manage their own overflow */
/* The hidden attribute always wins — display rules on .btn etc. must not resurrect it. */
[hidden]{ display:none !important; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* Atmosphere: fixed grain + brand glow behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 86% -6%, rgba(192,39,45,.16), transparent 60%),
    radial-gradient(46% 42% at 4% 108%, rgba(231,178,76,.07), transparent 60%);
}
/* keep real content above the atmosphere layers */
.app-nav,.page,.footer,.back-link,.rev-overlay,.label{ position:relative; z-index:1; }

/* Visible focus everywhere (accessibility) */
:focus-visible{
  outline:2px solid var(--brand-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------
   Shell
   --------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.page{ padding-bottom:90px; }
.screen{ position:relative; }

/* Screen-corner micro label */
.label{
  position:fixed;
  right:14px;bottom:14px;
  z-index:30;
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--text-mute);
  background:var(--scrim);
  border:1px solid var(--line);
  padding:7px 12px 6px;
  border-radius:var(--pill);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
/* Phones: the wayfinding pill hovers over real content — drop it. */
@media (max-width:640px){ .label{ display:none; } }

/* Back to picker */
.back-link{
  position:fixed;
  left:14px;bottom:14px;
  z-index:30;
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.06em;
  color:var(--text-dim);
  background:var(--scrim);
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:var(--pill);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.back-link:hover{ border-color:var(--brand); color:var(--text); transform:translateX(-2px); }
.back-link .icon{ width:15px;height:15px; }

/* ---------------------------------------------------------------
   Top nav
   --------------------------------------------------------------- */
.app-nav{
  position:sticky;top:0;z-index:40;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.app-nav .container{
  display:flex;align-items:center;gap:22px;
}
.brand{ display:flex;align-items:center;gap:13px;flex:0 0 auto; }
.brand-word{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:.05em;
  text-transform:var(--display-transform);
  font-size:23px;line-height:1;
  white-space:nowrap;
}
.brand-word b{ color:var(--brand-bright); font-weight:inherit; }

/* Script wordmark — Vincent's logo lettering, served as alpha masks so the
   theme colors it (ivory MERK, red ARTS). No webfont, no license needed. */
.brand-word--script{ display:inline-flex;align-items:center;gap:7px; }
.brand-script{
  display:inline-block;height:21px;
  background:var(--text);
  -webkit-mask:var(--wm) center / contain no-repeat;
          mask:var(--wm) center / contain no-repeat;
}
.brand-script--merk{ --wm:url('/brand/wordmark-merk.png'); aspect-ratio:537/128; }
.brand-script--arts{ --wm:url('/brand/wordmark-arts.png'); aspect-ratio:495/128; background:var(--brand-bright); }
.brand-word--foot .brand-script{ height:24px; }

/* Menu overlay signature (.rev-sig — .rev-brand is taken by a legacy
   theme-cinema block from the static preview) */
.rev-sig{
  position:absolute;left:50%;top:clamp(26px,7vh,72px);transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  z-index:2;opacity:.96;
}
.rev-sig .brand-script{ height:clamp(24px,3.4vh,32px); }
@media (max-width:640px){
  .rev-sig .brand-script{ height:20px; }
}

/* Revolver-cylinder mark (the trigger button) */
.brand-cyl{
  background:none;border:0;padding:0;cursor:pointer;line-height:0;
  border-radius:50%;
  flex:0 0 auto;
}
.brand-cyl svg{ display:block; transition:transform .9s var(--ease); }
.brand-cyl:hover svg{ transform:rotate(60deg); }
.brand-cyl:active svg{ transform:rotate(120deg); }
/* dots are filled via CSS so the theme-constant brand token controls them
   (the SVG `fill` attribute cannot resolve var()) */
.brand-cyl .cyl-dots circle{ fill:var(--brand); }

.nav-links{
  display:flex;align-items:center;gap:6px;
  margin-left:8px;
}
.nav-links a{
  position:relative;
  padding:8px 12px;
  font-size:13.5px;letter-spacing:.02em;
  color:var(--text-dim);
  border-radius:var(--radius-sm);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--text); background:var(--surface); }
.nav-links a[aria-current="page"]{ color:var(--text); }
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--brand-bright);border-radius:2px;
}

.nav-actions{
  margin-left:auto;
  display:flex;align-items:center;gap:10px;
}

/* Mobile header: the page links live in the cylinder menu (and footer);
   the header keeps brand + search + the two action pills. */
@media (max-width:760px){
  .nav-links{ display:none; }
  .app-nav .container{ gap:12px; }
  .brand{ gap:10px; }
  .brand-word{ font-size:20px; }
  .brand-word--script{ gap:5px; }
  .brand-word--script .brand-script{ height:17px; }
  .nav-actions{ gap:8px; }
  .nav-actions .btn{ padding:9px 14px; font-size:13px; }
}
/* Smallest phones: one pill is enough — Account (in) / Sign up (out). */
@media (max-width:400px){
  .nav-actions .btn--ghost{ display:none; }
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;
  font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.01em;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  background:var(--surface);color:var(--text);
  cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ border-color:var(--line-strong); background:var(--surface-2); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--primary{
  background:var(--brand);color:var(--on-brand);border-color:transparent;
  box-shadow:0 14px 30px -16px rgba(192,39,45,.9);
}
.btn--primary:hover{ background:var(--brand-bright); }
.btn--ghost{
  background:transparent;color:var(--text);
}
.btn--ghost:hover{ background:var(--surface); }

.icon-btn{
  display:inline-grid;place-items:center;
  width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--text-dim);cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.icon-btn:hover{ border-color:var(--brand); color:var(--text); background:var(--surface); }
.icon-btn svg{ width:18px;height:18px;display:block; }

/* ---------------------------------------------------------------
   Revolver overlay (signature radial menu)
   --------------------------------------------------------------- */
.rev-overlay{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
.rev-overlay.open{ opacity:1;visibility:visible; }
.rev-backdrop{
  position:absolute;inset:0;cursor:pointer;
  /* Near-opaque dark field — no backdrop-filter. The blur was barely
     visible at this opacity but forced a costly real-time re-blur of the
     (already blurred, animating) hero behind it while the menu opened. */
  background:rgba(6,6,9,.94);
}
.rev-close{
  position:absolute;top:22px;right:24px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--text-dim);
  cursor:pointer;line-height:1;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease);
}
.rev-close .icon{ width:18px;height:18px; }
.rev-close:hover{ border-color:var(--brand); color:var(--on-brand); transform:rotate(90deg); }

/* --- Revolver menu: the LOGO IS THE MENU (client's mockup, 2026-07-09) ---
   The brand cylinder rendered huge and crisp (SVG, not the scaled favicon),
   with its six red chambers acting as the six nav buttons. The whole
   cylinder turns slowly as ONE piece — buttons ride their chambers by
   construction — while each chamber's content counter-rotates so icons
   and labels stay level. Palette is theme-constant on the dark scrim. */
.rev-stage{
  position:relative;z-index:2;
  width:min(92vw,86vh,560px);aspect-ratio:1;
  display:grid;place-items:center;
}
.rev-cyl{
  --size:min(92vw,86vh,560px);
  position:absolute;inset:0;
  opacity:0;transform:scale(.4);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  will-change:transform;
}
/* Entrance (scale-in) then the slow turn — chained, so the spring isn't
   swallowed by the infinite rotation taking over the transform. */
.rev-overlay.open .rev-cyl{
  opacity:1;
  animation:
    rev-enter .9s var(--ease-spring) both,
    rev-turn 44s linear .9s infinite;
}
@keyframes rev-enter{ from{ transform:scale(.4); } to{ transform:scale(1); } }
@keyframes rev-turn{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.rev-cyl__body{
  position:absolute;inset:0;width:100%;height:100%;
  /* the logo's red bloom, scaled up: tight glow + wide ambient wash */
  filter:drop-shadow(0 0 26px rgba(192,39,45,.45)) drop-shadow(0 0 90px rgba(192,39,45,.28)) drop-shadow(0 24px 60px rgba(0,0,0,.6));
}

/* A chamber = one red bore of the cylinder, and the nav button itself.
   The <a> only PLACES the chamber (logo's own 0/60/…/300° grid, 52% of
   the radius) — all visuals live on the counter-rotating wrapper so the
   disc's lighting and content stay level while the cylinder turns. */
.rev-chamber{
  position:absolute;left:50%;top:50%;
  /* diameter .20 seated at radius .24 — the logo's own bore geometry
     (chambers measured at 48.5% of the artwork's radius) */
  width:calc(var(--size) * .20);aspect-ratio:1;
  margin:calc(var(--size) * -.10);
  border-radius:50%;
  display:block;
  text-decoration:none;cursor:pointer;font:inherit;
  transform:rotate(var(--a)) translateY(calc(var(--size) * -.24));
  outline:none;
  transition:transform .18s var(--ease);
}
/* No hover lift (text zoom read badly) — aiming is purely material:
   the rim seats, the primer glints, the bore deepens. Press still recoils. */
.rev-chamber:active{
  transform:rotate(var(--a)) translateY(calc(var(--size) * -.24)) scale(.97);
  transition-duration:.06s;
}
.rev-chamber__spin{
  position:absolute;inset:0;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5%;
  transform:rotate(calc(-1 * var(--a)));
  background:radial-gradient(circle at 50% 42%, var(--brand-bright) 0 8%, var(--brand) 40%, #A02026 78%, #8C1A1F 100%);
  /* Real border (transparent at rest) instead of a box-shadow spread ring:
     borders are properly antialiased on circles, shadow rings are not.
     The red background paints under it, so the resting look is unchanged. */
  border:2.5px solid transparent;
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,.18),
    inset 0 -5px 10px rgba(0,0,0,.35),
    0 4px 14px rgba(0,0,0,.25);
  transition:filter .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
/* Counter-rotation starts exactly when the turn does (same delay/duration),
   so icons + labels never tilt. */
.rev-overlay.open .rev-chamber__spin{
  animation:rev-level 44s linear .9s infinite;
}
@keyframes rev-level{
  from{ transform:rotate(calc(-1 * var(--a))) rotate(0deg); }
  to{ transform:rotate(calc(-1 * var(--a))) rotate(-360deg); }
}
/* Clean icon, no ring chrome (client preference 2026-07-09) — the wrapper
   is sized snugly so the label sits close under the icon. On open, the six
   rounds load into the cylinder one by one (staggered by --i). */
.rev-chamber__ring{
  width:34%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  transition:background .2s var(--ease);
}
.rev-chamber__ring .icon{
  width:68%;height:68%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  transition:filter .2s var(--ease);
}
.rev-chamber__lbl{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(8px, calc(var(--size) * .018), 10.5px);
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.92);white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:color .2s var(--ease), letter-spacing .25s var(--ease);
}
.rev-overlay.open .rev-chamber__ring,
.rev-overlay.open .rev-chamber__lbl{
  animation:rev-load .4s var(--ease) both;
  animation-delay:calc(.45s + var(--i) * 70ms);
}
@keyframes rev-load{
  from{ opacity:0;transform:scale(.5); }
  to{ opacity:1;transform:scale(1); }
}

/* Chambering a round (no gold — client note 2026-07-09): a machined BLACK
   bore-edge seats around the chamber (the logo's line work is black ink),
   the primer glints white behind the icon, the bore deepens, and a red
   glow blooms under the chamber. Text stays put. */
.rev-chamber:hover .rev-chamber__spin,
.rev-chamber:focus-visible .rev-chamber__spin{
  /* antialiased real border, softened black (client tuning) */
  border-color:rgba(11,11,14,.45);
  box-shadow:
    inset 0 3px 9px rgba(0,0,0,.32),
    inset 0 -5px 10px rgba(0,0,0,.3),
    0 10px 30px rgba(0,0,0,.45),
    0 6px 26px rgba(226,59,65,.5);
}
.rev-chamber:hover .rev-chamber__ring,
.rev-chamber:focus-visible .rev-chamber__ring{
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
}
.rev-chamber:hover .rev-chamber__ring .icon,
.rev-chamber:focus-visible .rev-chamber__ring .icon{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.7)) drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.rev-chamber:hover .rev-chamber__lbl,
.rev-chamber:focus-visible .rev-chamber__lbl{
  color:#fff;
}
/* active (current page) chamber — deep-red collar, no gold. The 1px blur
   on the collar ring softens the edge (spread-only rings alias on circles). */
.rev-chamber.is-active .rev-chamber__spin{
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,.18),
    inset 0 -5px 10px rgba(0,0,0,.35),
    0 0 1px 3px rgba(125,20,24,.85),
    0 0 18px rgba(226,59,65,.45);
}
/* The mechanism cocks while you aim: the centre pin's ring brightens. */
.rev-cyl__pin{ transition:stroke .25s var(--ease); }
.rev-stage:has(.rev-chamber:hover) .rev-cyl__pin,
.rev-stage:has(.rev-chamber:focus-visible) .rev-cyl__pin{ stroke:#E23B41; }
.rev-stage:has(.rev-chamber:hover) .rev-hint,
.rev-stage:has(.rev-chamber:focus-visible) .rev-hint{ opacity:.35; }

/* Pause ONLY while a chamber is genuinely being aimed at (hover or
   keyboard :focus-visible — NOT :focus-within, the menu auto-focuses the
   first chamber on open, which would freeze the cylinder at frame one). */
.rev-overlay.open .rev-stage:has(.rev-chamber:hover) .rev-cyl,
.rev-overlay.open .rev-stage:has(.rev-chamber:focus-visible) .rev-cyl,
.rev-overlay.open .rev-stage:has(.rev-chamber:hover) .rev-chamber__spin,
.rev-overlay.open .rev-stage:has(.rev-chamber:focus-visible) .rev-chamber__spin{ animation-play-state:paused; }

.rev-hint{
  position:absolute;bottom:-7%;left:0;right:0;text-align:center;
  color:#6b6864;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transition:opacity .5s .55s;
}
.rev-overlay.open .rev-hint{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .rev-overlay.open .rev-cyl,
  .rev-overlay.open .rev-chamber__spin,
  .rev-overlay.open .rev-chamber__ring,
  .rev-overlay.open .rev-chamber__lbl{ animation:none; }
  .rev-cyl{ transition:opacity .2s; }
  .rev-overlay.open .rev-cyl{ transform:scale(1); }
  .rev-chamber{ transition:none; }
  .rev-chamber:active{
    transform:rotate(var(--a)) translateY(calc(var(--size) * -.24));
  }
}

/* ---------------------------------------------------------------
   Hero (home)
   --------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:var(--hero-min);
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
}
/* Crisp foreground poster: a portrait key-art plate that sits over the
   blurred ambient banner (Cinema/Minimal) so the hero has a real focal
   subject instead of an upscaled ultrawide crop. It fades into the
   ambient wash on its left via a mask. Studio repurposes this as its
   framed editorial plate; below the breakpoint it steps aside. */
.hero__art{
  position:absolute;z-index:-2;top:0;right:0;bottom:0;
  height:100%;width:clamp(320px,46%,720px);
  object-fit:cover;object-position:center 14%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 24%, #000 52%);
          mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 24%, #000 52%);
  pointer-events:none;user-select:none;
}
@media (max-width:880px){
  .hero__art{ display:none; }
}
/* While the menu overlay is open the hero is fully occluded — pause its
   ambient motion so the GPU isn't animating an off-screen blurred image. */
.menu-open .hero__bg,
.menu-open .series-hero__bg{ animation-play-state:paused; }
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:var(--hero-overlay), var(--hero-side-overlay);
}
.hero__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut) clamp(40px,7vh,80px);
}
.hero__kicker{
  font-family:var(--font-accent);font-style:italic;
  color:var(--accent);font-size:14px;letter-spacing:.04em;
  margin-bottom:14px;
}
.hero__title{
  /* Trial: brand script (Kaushan ≈ the logo's Freestyle) instead of Anton */
  font-family:'Kaushan Script', var(--font-display), cursive;
  font-weight:400;
  text-transform:none;
  letter-spacing:.005em;
  line-height:1.14;
  font-size:clamp(42px,7.4vw,92px);
  margin:0;
  max-width:16ch;
  padding-bottom:.08em;   /* script descenders need air */
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:18px;
  font-size:13.5px;color:var(--text-dim);letter-spacing:.02em;
}
.hero__meta .sep{ color:var(--text-mute); }
.hero__synopsis{
  margin-top:18px;max-width:60ch;
  color:var(--text-dim);font-size:16px;line-height:1.7;
  /* Clamp so the baked copy never shows a mid-word cut on any width.
     The HTML text is trimmed to complete sentences; this guards the
     visual overflow with a clean ellipsis. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
  overflow-wrap:break-word;
}
.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:26px;
}
.studio-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--pill);
  border:1px solid var(--line-strong);background:var(--scrim);
  color:var(--text);font-size:13px;letter-spacing:.02em;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.studio-badge:hover{ border-color:var(--brand); background:var(--surface); }
.studio-badge b{ color:var(--accent); font-weight:700; }

/* ---------------------------------------------------------------
   Rails
   --------------------------------------------------------------- */
.rail-section{ margin-top:clamp(40px,6vh,64px); }
.rail-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;
}
.rail-head h2{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  font-size:clamp(22px,3.2vw,30px);margin:0;line-height:1;
}
.rail-head .see-all{
  font-size:12.5px;letter-spacing:.04em;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:color .2s var(--ease);
}
.rail-head .see-all:hover{ color:var(--brand-bright); }
.rail-head .see-all .icon{ width:15px;height:15px;transition:transform .25s var(--ease); }
.rail-head .see-all:hover .icon{ transform:translateX(3px); }

[data-rail]{ position:relative; }
.rail{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.rail::-webkit-scrollbar{ height:8px; }
.rail::-webkit-scrollbar-thumb{ background:var(--line-strong);border-radius:8px; }
.rail::-webkit-scrollbar-track{ background:transparent; }
.rail > .card{ scroll-snap-align:start;flex:0 0 clamp(150px,20vw,190px); }

.rail__btn{
  position:absolute;top:calc(50% - 14px);z-index:5;
  transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text);
  cursor:pointer;line-height:1;
  box-shadow:var(--shadow-1);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.rail__btn .icon{ width:20px;height:20px; }
.rail__btn:hover{ background:var(--brand); border-color:var(--brand); transform:translateY(-50%) scale(1.05); }
.rail__btn[data-rail-prev]{ left:-10px; }
.rail__btn[data-rail-next]{ right:-10px; }
@media (max-width:640px){ .rail__btn{ display:none; } }

/* ---------------------------------------------------------------
   Poster card (aspect 2:3)
   --------------------------------------------------------------- */
.card{
  position:relative;display:block;
  border-radius:var(--card-radius);overflow:hidden;
  background:var(--surface);
  text-align:left;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.card:hover .card__art img{ transform:scale(1.06); }
.card:hover .card__play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.card__art{
  position:relative;aspect-ratio:2/3;overflow:hidden;
  background:var(--surface-2);
  border-radius:var(--card-radius);
}
/* Mounted-poster matte: a hair-thin ivory inset line over the art. */
.card__art::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(244,242,237,.09);
}
.card__art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
/* Corner plate — squared marquee stamp, no per-card backdrop blur
   (grids render dozens of cards; blur per badge is real GPU cost). */
.card__badge{
  position:absolute;top:9px;left:9px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-display);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:3px;
  background:rgba(7,7,10,.82);color:var(--text-dim);
  border:1px solid var(--line);
}
.card__badge .icon{ width:11px;height:11px; }
.card__badge--score .icon{ color:var(--accent);fill:var(--accent);stroke:none; }
.card__play{
  position:absolute;left:50%;top:50%;z-index:4;
  transform:translate(-50%,-50%) scale(.7);
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);color:var(--on-brand);
  box-shadow:0 12px 30px -10px rgba(192,39,45,.9);
  opacity:0;transition:opacity .3s var(--ease), transform .3s var(--ease-spring);
}
.card__play svg{ width:20px;height:20px;margin-left:2px; }
/* Watch progress: one clean solid bar (matches the episode-list bars) */
.card__progress{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:5px;background:rgba(7,7,10,.72);
}
.card__progress > i{
  display:block;height:100%;width:var(--p,40%);
  background:var(--brand-bright);
  box-shadow:0 0 10px -2px var(--brand-bright);
}
/* Marquee title + billing-block meta — the poster names itself. */
.card__title{
  margin:13px 7px 4px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.3;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__meta{
  margin:0 7px 3px;
  font-size:10px;color:var(--text-mute);
  letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;
}

/* ---------------------------------------------------------------
   Studios strip
   --------------------------------------------------------------- */
.studios{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
@media (max-width:760px){ .studios{ grid-template-columns:repeat(2,1fr); } }
.studio-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:140px;padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(192,39,45,.18), transparent 55%),
    var(--surface);
  cursor:pointer;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.studio-card:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow-1); }
.studio-card .studio-card__eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
}
.studio-card .studio-card__name{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  font-size:21px;line-height:1.05;margin-top:6px;color:var(--text);
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.footer{
  margin-top:clamp(56px,9vh,96px);
  border-top:1px solid var(--line);
  background:var(--bg-elev);
}
.footer .container{ padding-block:46px; }
.footer__cols{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
  align-items:start;
}
@media (max-width:760px){ .footer__cols{ grid-template-columns:1fr; gap:30px; } }
.footer__brand .brand-word{ font-size:26px; }
.footer__tagline{
  font-family:var(--font-accent);font-style:italic;
  color:var(--accent);font-size:15px;margin-top:10px;
}
.footer__logo{
  height:34px;width:auto;margin-top:18px;
  background:#fff;border-radius:6px;padding:5px 9px;
}
.footer__col h3{
  font-family:var(--font-display);
  font-weight:var(--display-weight);text-transform:uppercase;
  font-size:12px;letter-spacing:.22em;color:var(--text-mute);margin:0 0 14px;
}
.footer__col a{
  display:block;color:var(--text-dim);font-size:13.5px;padding:5px 0;
  transition:color .2s var(--ease);
}
.footer__col a:hover{ color:var(--brand-bright); }
.social{ display:flex;gap:12px; }
.social a{
  display:inline-grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:50%;color:var(--text-dim);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social a:hover{ border-color:var(--brand); color:var(--text); transform:translateY(-2px); }
.social svg{ width:18px;height:18px; }
.footer__legal{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.06em;color:var(--text-mute);
}

/* ---------------------------------------------------------------
   Browse
   --------------------------------------------------------------- */
.browse-head{ padding-top:clamp(34px,5vh,56px); }
.browse-head h1{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  font-size:clamp(40px,7vw,76px);line-height:.96;margin:0;
}
.browse-head .browse-sub{
  color:var(--text-dim);margin-top:10px;max-width:54ch;font-size:15px;
}
.search{
  position:relative;margin-top:26px;max-width:560px;
}
.search input{
  width:100%;
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--text);
  padding:15px 18px 15px 46px;
  border-radius:var(--pill);
  font-family:var(--font-body);font-size:15px;
  outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search input::placeholder{ color:var(--text-mute); }
.search input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(192,39,45,.18); }
.search .search__icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-mute);pointer-events:none;
}

.filters{ margin-top:24px;display:flex;flex-direction:column;gap:14px; }
.filter-group{ display:flex;flex-wrap:wrap;align-items:center;gap:9px; }
.filter-group .filter-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);
  margin-right:4px;min-width:62px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--pill);
  border:1px solid var(--line-strong);background:transparent;color:var(--text-dim);
  font-size:13px;letter-spacing:.01em;cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.chip:hover{ border-color:var(--brand); color:var(--text); }
.chip.is-active{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

.grid{
  margin-top:34px;
  display:grid;gap:20px;
  grid-template-columns:repeat(6,1fr);
}
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:720px){ .grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (max-width:460px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------------
   Series detail
   --------------------------------------------------------------- */
.series-hero{
  position:relative;min-height:46vh;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;
}
.series-hero__bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 25%;
}
.series-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:var(--hero-overlay), var(--hero-side-overlay);
}
.series-hero .container{ padding-bottom:0; }

.series__layout{
  display:grid;grid-template-columns:230px 1fr;gap:34px;
  align-items:end;
  transform:translateY(40px);
  padding-bottom:8px;
}
@media (max-width:720px){
  .series__layout{ grid-template-columns:140px 1fr; gap:20px; transform:translateY(28px); }
}
.series__poster{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-2);
  aspect-ratio:2/3;background:var(--surface-2);
}
.series__poster img{ width:100%;height:100%;object-fit:cover; }
.series__intro{ padding-bottom:6px; }
.series__kicker{
  font-family:var(--font-accent);font-style:italic;color:var(--accent);
  font-size:14px;margin-bottom:8px;
}
.series__title{
  font-family:'Kaushan Script', var(--font-display), cursive;
  font-weight:400;
  text-transform:none;
  letter-spacing:.005em;line-height:1.12;
  font-size:clamp(34px,5.2vw,62px);margin:0;
  padding-bottom:.06em;
  text-shadow:0 6px 36px rgba(0,0,0,.5);
}
.series__meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:14px;font-size:13.5px;color:var(--text-dim);
}
.series__meta .sep{ color:var(--text-mute); }

.series__body{ margin-top:64px; }
/* Vertical rhythm — the sections after the action row (Episodes, Cast, …)
   had no margins of their own and crowded the buttons on shorter viewports. */
.series__body ~ section{ margin-top:56px; }
.series__synopsis{
  max-width:66ch;color:var(--text-dim);font-size:16px;line-height:1.75;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  line-clamp:6;
  overflow:hidden;
  overflow-wrap:break-word;
}
.series__actions{ display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px; }
.studio-link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--accent);font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.studio-link:hover{ gap:11px; color:var(--brand-bright); }
.studio-link .icon{ width:16px;height:16px; }

/* Episodes */
.episodes{ margin-top:46px;display:flex;flex-direction:column;gap:12px; }
.section-title{
  font-family:var(--font-display);
  font-weight:var(--display-weight);text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  font-size:clamp(22px,3.2vw,30px);margin:0 0 20px;line-height:1;
}
.ep{
  display:grid;grid-template-columns:168px 1fr auto;gap:18px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.ep:hover{ border-color:var(--brand); background:var(--bg-elev); transform:translateX(4px); }
@media (max-width:620px){
  .ep{ grid-template-columns:120px 1fr; }
  .ep__dur{ grid-column:2; }
}
.ep__thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.ep__thumb img{ width:100%;height:100%;object-fit:cover; }
.ep__num{
  position:absolute;top:6px;left:6px;
  font-family:var(--font-display);font-size:11px;letter-spacing:.08em;
  padding:3px 8px;border-radius:var(--pill);
  background:var(--scrim);color:var(--text-dim);border:1px solid var(--line);
}
.ep__main{ min-width:0; }
.ep__title{ font-size:15px;font-weight:600;color:var(--text);margin:0 0 4px; }
.ep__desc{
  font-size:13px;color:var(--text-mute);margin:0;max-width:60ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden;overflow-wrap:break-word;
}
.ep__dur{ font-size:12.5px;color:var(--text-dim);letter-spacing:.02em;white-space:nowrap; }
.ep__progress{
  grid-column:1 / -1;height:3px;border-radius:3px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.ep__progress > i{ display:block;height:100%;width:var(--p,30%);background:var(--brand-bright); }

/* Cast */
.cast{
  margin-top:18px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
@media (max-width:720px){ .cast{ grid-template-columns:repeat(2,1fr); } }
.cast__person{
  display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
}
.cast__avatar{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-deep),var(--surface-2));
  color:var(--on-brand);font-family:var(--font-display);font-size:16px;
}
.cast__name{ font-size:13.5px;font-weight:600;color:var(--text);line-height:1.2; }
.cast__role{ font-size:12px;color:var(--text-mute); }

/* ---------------------------------------------------------------
   Player
   --------------------------------------------------------------- */
.player{ padding-top:clamp(20px,3vh,34px); }
.stage{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;
  background:#000;border:1px solid var(--line);
  cursor:pointer;isolation:isolate;
}
.stage__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
  transition:filter .5s var(--ease), transform .8s var(--ease);
}
/* paused: dim/blur the frame so X-Ray reads clearly */
.player.has-started.is-paused .stage__poster{ filter:brightness(.45) blur(2px); transform:scale(1.03); }
.stage__vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
}

.player__center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  transition:opacity .4s var(--ease);
}
/* Settled playback: the splash steps aside until the pointer wakes it */
.player.is-idle .player__center{ opacity:0;pointer-events:none; }
[data-playtoggle]{
  width:84px;height:84px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);color:var(--on-brand);border:0;cursor:pointer;
  box-shadow:0 18px 50px -16px rgba(192,39,45,.95);
  transition:transform .25s var(--ease-spring), background .25s var(--ease);
}
[data-playtoggle]:hover{ transform:scale(1.08); background:var(--brand-bright); }
[data-playtoggle] svg{ width:30px;height:30px; }
/* swap play / pause glyphs by state */
[data-playtoggle] .ico-pause{ display:block; }
[data-playtoggle] .ico-play{ display:none; }
.player.is-paused [data-playtoggle] .ico-pause{ display:none; }
.player.is-paused [data-playtoggle] .ico-play{ display:block; margin-left:3px; }

/* X-Ray overlay — hidden while playing, shown when paused.
   Music reads at the TOP of the stage, cast pins to the bottom; the
   center stays clear for the play/pause splash. */
.xray{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(14px,2.4vw,24px) clamp(18px,4vw,40px) clamp(70px,9vw,96px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  background:
    linear-gradient(180deg, rgba(6,6,9,.80), rgba(6,6,9,.28) 30%, transparent 48%),
    linear-gradient(0deg, rgba(6,6,9,.92) 24%, transparent 55%);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
.player.has-started.is-paused .xray{ opacity:1;visibility:visible;transform:none; }
.xray__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.xray__badge::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-bright);
  box-shadow:0 0 12px var(--brand-bright);
}
.xray__cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:auto;width:100%;   /* pinned to the stage bottom */
}
@media (max-width:820px){ .xray__cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .xray__cards{ grid-template-columns:1fr; gap:10px; } }
.xray__card{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.xray__avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-deep),var(--surface-2));
  color:var(--on-brand);font-family:var(--font-display);font-size:15px;
}
.xray__char{ font-size:14px;font-weight:700;color:var(--text);line-height:1.2; }
.xray__va{ font-size:12px;color:var(--accent);margin-top:1px; }
.xray__note{ font-size:11.5px;color:var(--text-mute);margin-top:5px;line-height:1.45; }

/* Music in this scene — OP/ED/OST chips above the cast cards */
.xray__music{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:14px;
}
.xray__song{
  display:flex;gap:10px;align-items:center;
  padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:pointer; /* whole chip opens the song's first platform link */
  transition:border-color .2s var(--ease);
}
.xray__song:hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.xray__song-art{
  width:44px;height:44px;flex:0 0 auto;border-radius:8px;object-fit:cover;
}
.xray__song-art--empty{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-deep),var(--surface-2));
  color:var(--on-brand);font-size:19px;
}
.xray__song-main{ min-width:0; }
.xray__song-type{
  display:block;font-family:var(--font-display);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.xray__song-title{ font-size:13.5px;font-weight:700;color:var(--text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch; }
.xray__song-artist{ font-size:11.5px;color:var(--text-mute);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch; }
.xray__song-links{ display:flex;gap:4px;margin-left:4px; }
.xray__song-links a{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  color:var(--text-dim);transition:color .2s var(--ease), background .2s var(--ease);
}
.xray__song-links a:hover{ color:var(--text);background:var(--surface-2); }
.xray__song-links svg{ width:16px;height:16px; }
@media (max-width:520px){
  /* Phones: the 16:9 stage is short — stacked full-width chips would push
     the overlay past the stage top (clipped by overflow:hidden). Make the
     music a single horizontally swipeable strip instead. */
  .xray__music{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:10px;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .xray__music::-webkit-scrollbar{ display:none; }
  .xray__song{ flex:0 0 auto;max-width:74vw;padding:6px 10px; }
  .xray__song-art{ width:34px;height:34px; }
  .xray__song-artist{ display:none; }
  .xray__song-title{ font-size:12.5px;max-width:20ch; }

  /* Even with the strip, badge + songs + cast overflow the short stage.
     Let the X-Ray cover the stage and scroll from the top (music first);
     the center splash steps aside — tapping the stage or the controls
     bar below resumes playback. */
  .xray{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:14px 14px 18px;
    background:rgba(6,6,9,.88);
  }
  .xray__cards{ margin-top:12px; }   /* natural flow inside the scrolling sheet */
  .player.is-paused .player__center{ display:none; }
}

/* Controls */
.controls{
  display:flex;align-items:center;gap:14px;
  margin-top:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
}
.controls .ctrl-btn{
  display:inline-grid;place-items:center;width:38px;height:38px;
  border:0;background:transparent;color:var(--text-dim);cursor:pointer;border-radius:8px;
  text-decoration:none;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.controls .ctrl-btn:hover{ color:var(--text); background:var(--surface-2); }
.controls .ctrl-btn:disabled{ opacity:.35;cursor:default;background:transparent;color:var(--text-dim); }
.controls .ctrl-btn svg{ width:20px;height:20px;grid-area:1/1; }
.controls .time{ font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums;white-space:nowrap; }
/* Play/pause glyph swap (mirrors the center button, driven by .is-paused) */
.controls [data-ctrl-play] .ico-play{ display:none; }
.controls [data-ctrl-play] .ico-pause{ display:block; }
.player.is-paused .controls [data-ctrl-play] .ico-play{ display:block; }
.player.is-paused .controls [data-ctrl-play] .ico-pause{ display:none; }
/* Mute glyph swap (driven by .is-muted on the player root) */
[data-ctrl-mute] .ico-muted{ display:none; }
.player.is-muted [data-ctrl-mute] .ico-vol{ display:none; }
.player.is-muted [data-ctrl-mute] .ico-muted{ display:block; }
/* Fullscreen glyph swap (driven by .is-fullscreen on the player root) */
[data-ctrl-fs] .ico-fs-exit{ display:none; }
.player.is-fullscreen [data-ctrl-fs] .ico-fs{ display:none; }
.player.is-fullscreen [data-ctrl-fs] .ico-fs-exit{ display:block; }
/* Volume slider */
.controls .vol{ width:74px;accent-color:var(--brand-bright);cursor:pointer; }
/* Scrubber — --p (played) and --b (buffered) are set by initPlayer */
.scrubber{
  position:relative;flex:1;height:6px;border-radius:6px;
  background:rgba(255,255,255,.14);cursor:pointer;min-width:80px;
  touch-action:none;
}
.scrubber:focus-visible{ outline:2px solid var(--brand-bright);outline-offset:4px; }
.scrubber > b{
  position:absolute;left:0;top:0;height:100%;width:var(--b,0%);
  border-radius:6px;background:rgba(255,255,255,.12);
}
.scrubber > i{
  position:relative;z-index:1;display:block;height:100%;width:var(--p,0%);
  border-radius:6px;background:var(--brand-bright);
}
.scrubber::after{
  content:"";position:absolute;left:var(--p,0%);top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;background:var(--on-brand);
  box-shadow:0 0 0 3px var(--brand-bright);
  z-index:2;
}
.controls .spacer{ flex:1; }
/* Fullscreen stage: fill the screen, letterbox the frame instead of cropping */
.stage:fullscreen{ border-radius:0;border:0;aspect-ratio:auto; }
.stage:fullscreen .stage__poster{ object-fit:contain; }
.stage:-webkit-full-screen{ border-radius:0;border:0;aspect-ratio:auto; }
.stage:-webkit-full-screen .stage__poster{ object-fit:contain; }
@media (max-width:620px){
  .controls{ flex-wrap:wrap;gap:10px 12px; }
  .scrubber{ order:-1;flex-basis:100%; }
  .controls .vol{ display:none; }
}

/* Up next */
.upnext{
  display:flex;align-items:center;gap:16px;
  margin-top:16px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* End-of-episode countdown: the queue card lights up */
.upnext.is-counting{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 34px -14px rgba(231,178,76,.55);
}
.upnext.is-counting .upnext__count{ font-weight:700; }

/* Guest nudge under the player */
.player-guest-note{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:14px 16px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}
.player-guest-note p{ margin:0;font-size:14px;color:var(--text-dim);line-height:1.5; }
.player-guest-note b{ color:var(--text); }
.player-guest-note__actions{ display:flex;gap:10px;flex:0 0 auto; }

/* Episode-list gate chips (guests) */
.ep__gate{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:8px;padding:2px 8px;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);
  border:1px solid var(--line-strong);border-radius:3px;
  vertical-align:2px;
}
.ep__gate svg{ width:11px;height:11px; }
.ep__gate--free{
  color:var(--ok);
  border-color:color-mix(in srgb, var(--ok) 45%, transparent);
}
.upnext__thumb{
  width:150px;aspect-ratio:16/9;flex:0 0 auto;
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);
}
.upnext__thumb img{ width:100%;height:100%;object-fit:cover; }
.upnext__eyebrow{ font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute); }
.upnext__title{ font-size:15px;font-weight:600;color:var(--text);margin:3px 0 3px; }
.upnext__count{ font-size:12.5px;color:var(--accent); }
.upnext .btn{ margin-left:auto; }
@media (max-width:560px){
  .upnext{ flex-wrap:wrap; }
  .upnext__thumb{ width:120px; }
  .upnext .btn{ margin-left:0; }
}

/* Meta block + credits */
.meta-block{
  margin-top:34px;
  display:grid;grid-template-columns:1.6fr 1fr;gap:34px;
}
@media (max-width:760px){ .meta-block{ grid-template-columns:1fr; gap:24px; } }
.meta-block .meta-synopsis{ color:var(--text-dim);font-size:15.5px;line-height:1.75;max-width:64ch; }
.credits{ border-left:1px solid var(--line);padding-left:24px; }
.credits dl{ margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px; }
.credits dt{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);align-self:center; }
.credits dd{ margin:0;font-size:13.5px;color:var(--text); }
.credits__link{
  color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.credits__link:hover,.credits__link:focus-visible{ color:var(--accent);border-color:var(--accent);outline:none; }

/* Person / studio public pages */
.person-hero{
  display:flex;gap:clamp(18px,4vw,32px);align-items:center;
  margin-bottom:clamp(28px,6vw,44px);
}
.person-hero__photo{
  width:clamp(84px,14vw,132px);aspect-ratio:1;border-radius:50%;
  object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-1);
}
.person-hero__photo--empty{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-deep),var(--surface-2));
  color:var(--on-brand);font-family:var(--font-display);
  font-size:clamp(30px,5vw,46px);
}
.person-hero h1{ margin:.1em 0 .15em; }
.person-work__roles{
  margin:8px 2px 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.licensor{
  margin-top:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute);
}

/* ---------------------------------------------------------------
   Bits
   --------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--pill);
  background:var(--surface-2);color:var(--text-dim);border:1px solid var(--line);
}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;letter-spacing:.02em;
  padding:6px 13px;border-radius:var(--pill);
  border:1px solid var(--line-strong);color:var(--text-dim);background:var(--surface);
}
.pill .score{ color:var(--accent);font-weight:700; }
.progress{ height:5px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden; }
.progress > i{ display:block;height:100%;width:var(--p,40%);background:var(--brand-bright); }

.section-eyebrow{
  font-family:var(--font-display);
  font-weight:var(--display-weight);text-transform:uppercase;
  font-size:11px;letter-spacing:.3em;color:var(--brand-bright);
  margin-bottom:8px;
}

/* small visual nicety: page title spacing on inner pages */
.page > .container:first-of-type{ padding-top:0; }

/* ===============================================================
   STATES LAYER — the "easy to forget" screens
   Reusable, theme-aware base components. Each is tinted per theme
   in theme-*.css. app.js toggles the state classes from URL params
   (?state=, ?auth=, ?q=) — defaults stay the populated app.
   =============================================================== */

/* ---------------------------------------------------------------
   Shimmer skeleton — placeholder while real content loads.
   .skeleton sits ON a surface; .skeleton--block fills a box.
   Honors prefers-reduced-motion (sweep stops, soft pulse only).
   --------------------------------------------------------------- */
.skeleton{
  position:relative;
  overflow:hidden;
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  /* never show real content / text inside a skeleton box */
  color:transparent !important;
}
.skeleton::after{
  content:"";
  position:absolute;inset:0;
  transform:translateX(-100%);
  background:linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--text) 9%, transparent) 45%,
    color-mix(in srgb, var(--text) 14%, transparent) 50%,
    color-mix(in srgb, var(--text) 9%, transparent) 55%,
    transparent 100%);
  animation:ma-shimmer 1.5s var(--ease) infinite;
}
@keyframes ma-shimmer{ 100%{ transform:translateX(100%); } }

/* Skeleton primitives */
.sk-line{ height:.85em;border-radius:var(--pill);margin:.5em 0; }
.sk-line--xl{ height:1.4em; }
.sk-line--lg{ height:1.1em; }
.sk-line--60{ width:60%; } .sk-line--80{ width:80%; }
.sk-line--40{ width:40%; } .sk-line--30{ width:30%; } .sk-line--90{ width:90%; }
.sk-pill{ display:inline-block;height:30px;width:120px;border-radius:var(--pill); }
.sk-block{ display:block;width:100%;height:100%; }
.sk-hero .sk-hero__bg.skeleton{ display:block; }

/* A skeleton poster card — same footprint as a real .card.
   Spans must be block-level or aspect-ratio collapses to 0 height. */
.sk-card{ display:block; }
.sk-card .sk-art{
  display:block;width:100%;
  aspect-ratio:2/3;border-radius:var(--card-radius);
  background:var(--surface-2);
}
.sk-card .sk-line{ display:block; }
.sk-card .sk-meta{ margin-top:10px; }

/* Loading state on a page: hide the real content, show the skeleton.
   app.js adds .state-loading on the page root, and the skeleton
   blocks live next to the real content with [data-skeleton]. */
[data-skeleton]{ display:none; }
.state-loading [data-skeleton]{ display:block; }
.state-loading [data-skeleton].sk-grid{ display:grid; }
.state-loading [data-real]{ display:none !important; }
/* browse: while loading, hide the real results grid + the empty state */
.state-loading [data-results],
.state-loading [data-empty]{ display:none !important; }
/* keep entrance motion out of the skeletons */
.state-loading [data-skeleton] [data-reveal]{ opacity:1;transform:none; }

/* Skeleton hero (home) */
.sk-hero{
  position:relative;min-height:var(--hero-min);
  display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.sk-hero .sk-hero__bg{ position:absolute;inset:0;z-index:-1; }
.sk-hero .container{ padding-bottom:clamp(40px,7vh,80px);width:100%; }
.sk-hero .sk-line{ max-width:480px; }
.sk-hero .sk-actions{ display:flex;gap:14px;margin-top:26px; }

/* Skeleton rail (home) */
.sk-rail{ display:flex;gap:16px;overflow:hidden;padding:4px 2px 14px; }
.sk-rail .sk-card{ flex:0 0 clamp(150px,20vw,190px); }

/* Skeleton grid (browse). NOTE: no `display` here — `.sk-grid` sits on
   the same element as [data-skeleton], so setting display:grid would
   beat `[data-skeleton]{display:none}` (equal specificity, later wins)
   and the placeholder grid would show on the live page. The grid
   display is switched on only while loading by the .state-loading rule
   above; these props just define its layout for that case. */
.sk-grid{
  margin-top:34px;gap:20px;
  grid-template-columns:repeat(6,1fr);
}
@media (max-width:1100px){ .sk-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:720px){ .sk-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (max-width:460px){ .sk-grid{ grid-template-columns:repeat(2,1fr); } }

@media (prefers-reduced-motion: reduce){
  .skeleton::after{ animation:none; transform:none;
    background:color-mix(in srgb, var(--text) 6%, transparent); }
}

/* ---------------------------------------------------------------
   Empty state — icon + headline + subtext + optional CTA.
   Reusable for: no results, empty watchlist, empty history.
   --------------------------------------------------------------- */
.empty-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-4);
  padding:clamp(48px,9vh,96px) var(--gut);
  max-width:560px;margin-inline:auto;
}
.empty-state__icon{
  display:grid;place-items:center;
  width:84px;height:84px;border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line-strong);
  color:var(--text-mute);
  box-shadow:var(--elev-1);
}
.empty-state__icon .icon{ width:38px;height:38px; }
.empty-state__title{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  font-size:clamp(26px,4vw,40px);line-height:1.02;
  margin:var(--space-2) 0 0;color:var(--text);
}
.empty-state__text{
  color:var(--text-dim);font-size:15px;line-height:1.65;
  max-width:46ch;margin:0;
}
.empty-state__text b{ color:var(--text); font-weight:700; }
.empty-state__actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:var(--space-2);
}
/* Compact variant — used inline in the states gallery */
.empty-state--compact{
  padding:var(--space-8) var(--space-6);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  max-width:none;
}
.empty-state--compact .empty-state__icon{ width:64px;height:64px; }
.empty-state--compact .empty-state__icon .icon{ width:28px;height:28px; }
.empty-state--compact .empty-state__title{ font-size:clamp(20px,3vw,26px); }
.empty-state--compact .empty-state__text{ font-size:13.5px; }

/* Browse: when the query/empty state is on, swap grid for empty-state */
[data-empty]{ display:none; }
.state-empty [data-empty]{ display:flex; }
.state-empty [data-results]{ display:none !important; }

/* ---------------------------------------------------------------
   Player: buffering + error overlays.
   These layer over the dimmed stage. Default (playing/paused) state
   leaves them hidden so the existing play/pause + X-Ray behavior
   is untouched.
   --------------------------------------------------------------- */
.player__overlay{
  position:absolute;inset:0;z-index:7;
  display:none;
  place-items:center;
  text-align:center;
  padding:var(--space-6);
  background:rgba(6,6,9,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.player.is-buffering .stage__poster,
.player.is-error .stage__poster{ filter:brightness(.4) blur(3px);transform:scale(1.02); }
/* hide the central play toggle + X-Ray while buffering/erroring */
.player.is-buffering .player__center,
.player.is-error .player__center,
.player.is-buffering .xray,
.player.is-error .xray{ display:none; }

.player.is-buffering .player__overlay--buffering{ display:grid; }
.player.is-error .player__overlay--error{ display:grid; }

/* Spinner */
.spinner{
  width:56px;height:56px;border-radius:50%;
  border:3px solid var(--line-strong);
  border-top-color:var(--brand-bright);
  animation:ma-spin 0.9s linear infinite;
}
@keyframes ma-spin{ to{ transform:rotate(360deg); } }
.player__overlay--buffering .buffer-label{
  margin-top:var(--space-4);
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-dim);
}
@media (prefers-reduced-motion: reduce){
  .spinner{ animation:ma-spin 1.8s linear infinite; }
}

/* Error overlay content */
.player__error{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  max-width:420px;
}
.player__error .err-icon{
  display:grid;place-items:center;
  width:72px;height:72px;border-radius:50%;
  background:color-mix(in srgb, var(--err) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--err) 50%, transparent);
  color:var(--err);
}
.player__error .err-icon .icon{ width:34px;height:34px; }
.player__error h2{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  font-size:clamp(22px,3.4vw,32px);margin:0;color:var(--text);
}
.player__error p{
  color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;
}
.player__error .err-code{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mute);
}

/* ---------------------------------------------------------------
   Logged-out variant.
   app.js adds .auth-out on <body>. CSS swaps which nav actions show,
   hides the Continue-Watching rail, and reveals the join banner.
   --------------------------------------------------------------- */
.nav-actions__in{ display:contents; }
/* Blade only renders one of the two spans (@auth/@else), so both display by
   default — real guests get Sign in/Sign up without any JS. The .auth-out
   class (?auth=out) still force-swaps them for design-preview simulation. */
.nav-actions__out{ display:flex;align-items:center;gap:10px; }
.auth-out .nav-actions__in{ display:none !important; }
.auth-out .nav-actions__out{ display:flex;align-items:center;gap:10px; }

[data-auth="in"]{ display:block; }
[data-auth="out"]{ display:none; }
.auth-out [data-auth="in"]{ display:none !important; }
.auth-out [data-auth="out"]{ display:block; }

/* Join / subscribe banner shown on the logged-out home */
.join-banner{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(40px,6vh,64px);
  padding:clamp(28px,5vw,52px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(192,39,45,.22), transparent 58%),
    var(--bg-elev);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);
}
.join-banner__copy{ flex:1 1 320px;min-width:0; }
.join-banner__kicker{
  font-family:var(--font-accent);font-style:italic;
  color:var(--accent);font-size:14px;margin:0 0 8px;
}
.join-banner h2{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);line-height:1.02;
  font-size:clamp(26px,4.4vw,46px);margin:0;color:var(--text);
}
.join-banner p{
  color:var(--text-dim);font-size:15px;line-height:1.65;
  margin:var(--space-3) 0 0;max-width:52ch;
}
.join-banner__actions{ display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto; }

/* ===== Brand mark = the favicon revolver cylinder (all themes) =====
   The trigger button shows the clean favicon cylinder, spins slowly at
   idle, and lifts + glows on hover. The inline <svg> stays hidden. */
#revTrigger{ width:40px !important; height:40px !important; padding:0; border:0;
  background:url("../favicon-180.png") center/contain no-repeat !important;
  border-radius:50%;
  /* Promote to its own GPU layer so the continuous rotation is a pure
     compositor transform — no per-frame repaint, no stutter. */
  will-change:transform;backface-visibility:hidden;
  animation:ma-cyl-spin 16s linear infinite;
  transition:box-shadow .35s var(--ease); }
#revTrigger > svg{ display:none !important; }
/* Hover/focus glow is a cheap composited box-shadow (not a per-frame
   drop-shadow filter). No scale — it would fight the rotation, which owns
   the transform property; the glow alone reads as the hover cue. */
#revTrigger:hover,#revTrigger:focus-visible{
  box-shadow:0 0 16px rgba(192,39,45,.55), 0 4px 12px rgba(0,0,0,.5); }
@keyframes ma-cyl-spin{ from{ transform:translateZ(0) rotate(0); } to{ transform:translateZ(0) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  #revTrigger{ animation:none; }
  #revTrigger:hover,#revTrigger:focus-visible{ box-shadow:0 0 12px rgba(192,39,45,.5); }
}

/* =====================================================================
   ACCOUNT / MEMBER AREA  (account hub, My List, settings)
   Added with the production user panel. Reuses tokens + .btn/.card/.grid.
   ===================================================================== */

/* Small button variant (used for "Remove" on My List) */
.btn--sm{ padding:7px 12px; font-size:13px; }

/* Flash confirmation pill (watchlist add/remove, settings saved) */
.acct-flash{ display:inline-flex; margin:18px 0 4px; }

/* ---- Membership card ---- */
.acct-membership{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:clamp(18px,3vh,28px);
  padding:clamp(22px,3.4vw,34px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(192,39,45,.20), transparent 60%),
    var(--bg-elev);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6);
}
.acct-membership__info{ flex:1 1 320px; min-width:0; }
.acct-membership__eyebrow{
  font-family:var(--font-accent); font-style:italic;
  color:var(--accent); font-size:13px; margin:0 0 6px;
}
.acct-membership__plan{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  font-size:clamp(26px,4vw,40px); line-height:1; margin:0;
  color:var(--text); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.acct-membership__pill{ font-size:12px; vertical-align:middle; }
.acct-membership__note{
  color:var(--text-dim); font-size:14.5px; line-height:1.6;
  margin:12px 0 0; max-width:54ch;
}
.acct-membership__actions{ display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; align-items:center; }
.acct-membership__actions form{ margin:0; }

/* ---- My List grid items (card + remove control) ---- */
.acct-list__item{ display:flex; flex-direction:column; gap:8px; }
.acct-list__remove{ margin:auto 0 0; display:flex; } /* pin to bottom so buttons align across rows */
.acct-list__remove .btn{ width:100%; justify-content:center; }

/* ---- Settings panels ---- */
.acct-settings{ display:grid; gap:20px; max-width:680px; margin:8px 0 40px; }
.acct-panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(20px,3vw,30px);
  box-shadow:var(--shadow-1);
}
.acct-panel--danger{ border-color:rgba(226,59,65,.32); }

/* Restyle the (Tailwind-classed, but un-compiled) Breeze form internals
   so they read as cinematic. Targets elements, not utilities. */
.acct-settings h2{
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking); text-transform:var(--display-transform);
  font-size:clamp(18px,2.4vw,22px); color:var(--text); margin:0;
}
.acct-settings header p,
.acct-settings .text-gray-600,
.acct-settings .text-gray-800{ color:var(--text-dim); font-size:13.5px; line-height:1.6; }
.acct-settings label{
  display:block; color:var(--text-dim); font-size:12.5px;
  font-weight:600; letter-spacing:.02em; margin:0 0 7px;
}
.acct-settings input[type="text"],
.acct-settings input[type="email"],
.acct-settings input[type="password"]{
  width:100%; box-sizing:border-box;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:14.5px; font-family:inherit;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.acct-settings input[type="text"]:focus,
.acct-settings input[type="email"]:focus,
.acct-settings input[type="password"]:focus{
  outline:none; border-color:var(--brand-bright);
  box-shadow:0 0 0 3px rgba(192,39,45,.25);
}
.acct-settings input::placeholder{ color:var(--text-mute); }
/* Buttons: base = ghost; variants by Breeze's (inert) utility class */
.acct-settings button{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:transparent; color:var(--text);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:10px 18px; font-size:13.5px; font-weight:600; font-family:inherit;
  text-transform:none; letter-spacing:normal; transition:all .18s var(--ease);
}
.acct-settings button:hover{ border-color:var(--line); background:rgba(255,255,255,.04); }
.acct-settings .bg-gray-800{ background:var(--brand); border-color:var(--brand); color:#fff; }
.acct-settings .bg-gray-800:hover{ background:var(--brand-bright); border-color:var(--brand-bright); }
.acct-settings .bg-red-600{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.acct-settings .bg-red-600:hover{ background:var(--brand); border-color:var(--brand); }
.acct-settings button.underline{
  background:none; border:0; padding:0; width:auto;
  color:var(--brand-bright); text-decoration:underline; font-weight:500;
}
.acct-settings .text-green-600{ color:#5ec98a; }

/* Delete-account confirm modal — recreate the overlay the Tailwind
   utilities would have provided (Alpine drives show/hide via Livewire). */
.acct-settings .fixed.inset-0.z-50{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
.acct-settings .fixed.inset-0.z-50 > .fixed.inset-0{ position:fixed; inset:0; }
.acct-settings .bg-gray-500{ position:absolute; inset:0; background:rgba(0,0,0,.72); }
.acct-settings .bg-white.rounded-lg{
  position:relative; z-index:1; width:100%; max-width:520px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  padding:6px;
}

@media (max-width:560px){
  .acct-membership{ flex-direction:column; align-items:flex-start; }
  .acct-membership__actions{ width:100%; }
}

/* =====================================================================
   MEMBER AREA v2 — avatar header, stat chips, star rating, history,
   "on my list" card badge. Reuses tokens + .btn/.pill/.card.
   ===================================================================== */

/* ---- Premium pill accent ---- */
.pill--premium{
  background:linear-gradient(180deg, rgba(231,178,76,.22), rgba(231,178,76,.10));
  border-color:rgba(231,178,76,.5); color:var(--accent);
}

/* ---- Account hero header (avatar + stats) ---- */
.acct-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,24px);
  padding-top:clamp(28px,4.5vh,52px); margin-bottom:18px;
}
.acct-avatar{
  flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:30px; line-height:1; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, var(--brand-bright), var(--brand-deep));
  box-shadow:0 0 0 1px rgba(255,255,255,.10), var(--shadow-1);
  text-transform:uppercase;
}
.acct-hero__text{ flex:1 1 240px; min-width:0; }
.acct-hero__text h1{
  font-family:var(--font-display); font-weight:var(--display-weight);
  text-transform:var(--display-transform); letter-spacing:var(--display-tracking);
  font-size:clamp(26px,4.4vw,42px); line-height:1.02; margin:4px 0 0;
}
.acct-hero__sub{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 0; color:var(--text-mute); font-size:13.5px; }
.acct-stats{ display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto; }
.acct-stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:76px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface);
  text-decoration:none; transition:border-color .18s var(--ease), transform .18s var(--ease);
}
a.acct-stat:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.acct-stat b{ font-family:var(--font-display); font-size:22px; line-height:1; color:var(--text); }
.acct-stat span{ margin-top:5px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }

/* ---- "On my list" card badge ---- */
.card__list{
  position:absolute; top:8px; right:8px; z-index:2;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:var(--brand); box-shadow:0 2px 8px -2px rgba(0,0,0,.7);
}
.card__list svg{ width:14px; height:14px; }

/* ---- Star rating widget (series page) ---- */
.rate{ display:inline-flex; align-items:center; gap:9px; margin:0; }
.rate__label{ font-size:12.5px; font-weight:600; color:var(--text-mute); letter-spacing:.02em; }
.rate__stars{ display:inline-flex; flex-direction:row-reverse; gap:1px; }
.rate__star{
  background:none; border:0; cursor:pointer; padding:0 1px;
  font-size:22px; line-height:1; color:var(--line-strong);
  transition:color .12s var(--ease), transform .12s var(--ease);
}
.rate__star.is-on{ color:var(--accent); }
.rate__star:hover{ transform:scale(1.15); }
.rate__stars:hover .rate__star{ color:var(--line-strong); }
.rate__stars:hover .rate__star:hover,
.rate__stars:hover .rate__star:hover ~ .rate__star{ color:var(--accent); }

/* ---- Watch history list ---- */
.histlist{ list-style:none; margin:8px 0 40px; padding:0; display:flex; flex-direction:column; gap:10px; }
.histrow{
  display:flex; align-items:center; gap:16px; padding:10px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); text-decoration:none;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.histrow:hover{ border-color:var(--line-strong); background:var(--bg-elev); transform:translateY(-1px); }
.histrow__thumb{
  position:relative; flex:0 0 auto; width:128px; aspect-ratio:16/9;
  border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2);
}
.histrow__thumb img{ width:100%; height:100%; object-fit:cover; }
.histrow__play{
  position:absolute; inset:0; margin:auto; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(10,10,12,.55); color:#fff; opacity:0; transition:opacity .18s var(--ease);
}
.histrow__play svg{ width:16px; height:16px; }
.histrow:hover .histrow__play{ opacity:1; }
.histrow__main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.histrow__title{ font-weight:700; color:var(--text); font-size:15px; }
.histrow__sub{ color:var(--text-mute); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.histrow__bar{ position:relative; height:4px; border-radius:99px; background:var(--line); overflow:hidden; max-width:340px; }
.histrow__bar i{ position:absolute; inset:0 auto 0 0; width:var(--p,0%); background:var(--brand); border-radius:99px; }
.histrow__meta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.histrow__status{ font-size:12.5px; font-weight:600; color:var(--text-dim); }
.histrow__status.is-done{ color:#5ec98a; }
.histrow__when{ font-size:11.5px; color:var(--text-mute); }

@media (max-width:560px){
  .histrow__thumb{ width:96px; }
  .histrow__meta{ display:none; }
  .acct-stats{ width:100%; }
  .acct-stat{ flex:1; }
}

/* ---- Avatar image fill + large variant (settings) ---- */
.acct-avatar{ overflow:hidden; }
.acct-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.acct-avatar--lg{ width:84px; height:84px; font-size:38px; }

/* ---- Avatar upload form ---- */
.acct-avatar-form{ display:flex; align-items:center; gap:18px; margin-top:16px; flex-wrap:wrap; }
.acct-avatar-form__controls{ display:flex; flex-direction:column; gap:12px; }
.acct-avatar-form__controls input[type="file"]{ color:var(--text-dim); font-size:13px; max-width:100%; }
.acct-avatar-form__controls input[type="file"]::file-selector-button{
  margin-right:12px; padding:8px 14px; cursor:pointer;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line-strong); border-radius:999px; font:inherit; font-size:13px; font-weight:600;
}
.acct-avatar-form__btns{ display:flex; gap:10px; }

/* ---- Notification preferences ---- */
.acct-prefs{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.acct-check{ display:flex; align-items:center; gap:12px; cursor:pointer; color:var(--text-dim); font-size:14px; }
.acct-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:20px; height:20px; border-radius:6px;
  border:1px solid var(--line-strong); background:var(--surface-2);
  display:grid; place-items:center; cursor:pointer; transition:all .15s var(--ease);
}
.acct-check input[type="checkbox"]:checked{ background:var(--brand); border-color:var(--brand); }
.acct-check input[type="checkbox"]:checked::after{
  content:""; width:6px; height:11px; margin-top:-2px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.acct-prefs button{ align-self:flex-start; margin-top:4px; }

/* =====================================================================
   COMMUNITY / WAITLIST page
   ===================================================================== */
.join-form{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.join-form__row{ display:flex; gap:10px; flex-wrap:wrap; }
.join-form__row input{
  flex:1 1 160px; min-width:0; box-sizing:border-box;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:14.5px; font-family:inherit;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.join-form__row input:focus{ outline:none; border-color:var(--brand-bright); box-shadow:0 0 0 3px rgba(192,39,45,.25); }
.join-form__row input::placeholder{ color:var(--text-mute); }
.join-form .btn{ align-self:flex-start; }
.join-form__note{ margin:2px 0 0; color:var(--text-mute); font-size:12.5px; }

.community-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:clamp(28px,5vh,52px) 0 48px;
}
.community-card{
  padding:26px 24px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.community-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.community-card__icon{
  display:inline-grid; place-items:center; width:46px; height:46px;
  border-radius:12px; color:var(--brand-bright);
  background:radial-gradient(120% 120% at 30% 20%, rgba(226,59,65,.20), transparent 70%);
  border:1px solid rgba(226,59,65,.28); margin-bottom:14px;
}
.community-card__icon svg{ width:24px; height:24px; }
.community-card h3{
  font-family:var(--font-display); font-size:19px; margin:0 0 8px; color:var(--text);
  letter-spacing:.01em;
}
.community-card p{ margin:0; color:var(--text-dim); font-size:14px; line-height:1.6; }

@media (max-width:760px){ .community-cols{ grid-template-columns:1fr; } }

/* ---- Teaser / preview overlay (series page) ---- */
.teaser-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(6,6,8,.86); backdrop-filter:blur(6px);
}
.teaser-overlay[hidden]{ display:none; }
.teaser-overlay__video{
  width:min(960px,100%); max-height:80vh; border-radius:var(--radius);
  box-shadow:var(--shadow-2); background:#000;
}
.teaser-overlay__close{
  position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
  font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background .18s var(--ease);
}
.teaser-overlay__close:hover{ background:var(--bg-elev); }

/* ---------------------------------------------------------------
   Brand voice: page-level H1s in the logo script.
   Cards, section headers and rails stay Anton for contrast; forum
   thread titles are member-written text and keep the reading face.
   --------------------------------------------------------------- */
.page h1{
  font-family:'Kaushan Script', var(--font-display), cursive;
  font-weight:400;
  text-transform:none;
  letter-spacing:.005em;
  line-height:1.16;
  padding-bottom:.07em;
}
.page .forum-op__title{
  font-family:var(--font-body);
  font-weight:800;
  padding-bottom:0;
}