/* ============================================================
   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;
}
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;
}

/* 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; }

/* 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;
}

/* 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;
  background:rgba(6,6,9,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.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); }

.rev-stage{
  position:relative;
  width:min(92vw,520px);aspect-ratio:1;
  display:grid;place-items:center;
}
.rev-hub{
  position:absolute;width:30%;aspect-ratio:1;
  display:grid;place-items:center;
  opacity:0;transform:scale(.3);
  transition:transform 1s var(--ease-spring), opacity .6s var(--ease);
}
.rev-overlay.open .rev-hub{ opacity:1;transform:scale(1); }
.rev-hub svg{ width:100%;animation:rev-spin 18s linear infinite; }
.rev-hub .cyl-dots circle{ fill:var(--brand); }
@keyframes rev-spin{ to{ transform:rotate(360deg); } }

.chamber{
  position:absolute;left:50%;top:50%;
  width:108px;height:108px;margin:-54px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:none;border:0;cursor:pointer;text-decoration:none;
  opacity:0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(.2);
  transition:transform .65s var(--ease-spring) var(--d), opacity .5s var(--d);
}
.rev-overlay.open .chamber{
  opacity:1;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1);
}
.chamber .dot{
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);color:var(--on-brand);
  font-family:var(--font-display);font-size:16px;letter-spacing:.02em;
  box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 16px 34px -12px rgba(192,39,45,.85);
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.chamber:hover .dot,.chamber:focus-visible .dot{
  transform:scale(1.14);background:var(--brand-bright);
  box-shadow:0 0 0 2px var(--on-brand), 0 18px 40px -10px rgba(226,59,65,.9);
}
.chamber .clbl{
  font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);white-space:nowrap;
}
.rev-hint{
  position:absolute;bottom:5%;left:0;right:0;text-align:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-mute);
  opacity:0;transition:opacity .5s .55s;
}
.rev-overlay.open .rev-hint{ opacity:1; }

/* ---------------------------------------------------------------
   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:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
}
.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{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);
  line-height:var(--display-leading);
  font-size:clamp(48px,9vw,112px);
  margin:0;
  max-width:14ch;
  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);
}
.card__art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.card__badge{
  position:absolute;top:9px;left:9px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--pill);
  background:var(--scrim);color:var(--text-dim);
  border:1px solid var(--line);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.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; }
.card__progress{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:4px;background:rgba(255,255,255,.18);
}
.card__progress > i{
  display:block;height:100%;width:var(--p,40%);
  background:var(--brand-bright);
}
.card__title{
  margin:10px 2px 2px;
  font-size:14px;font-weight:600;line-height:1.3;color:var(--text);
}
.card__meta{
  margin:0 2px;
  font-size:12px;color:var(--text-mute);letter-spacing:.02em;
}

/* ---------------------------------------------------------------
   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:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:var(--display-transform);
  letter-spacing:var(--display-tracking);line-height:.98;
  font-size:clamp(38px,6vw,72px);margin:0;
  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; }
.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.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;
}
[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 cast overlay — hidden while playing, shown when paused */
.xray{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:clamp(18px,4vw,40px);
  padding-bottom:clamp(70px,9vw,96px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  background:linear-gradient(0deg, rgba(6,6,9,.92) 35%, transparent);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
.player.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;
}
@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; }

/* 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;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.controls .ctrl-btn:hover{ color:var(--text); background:var(--surface-2); }
.controls .ctrl-btn svg{ width:20px;height:20px; }
/* Captions (CC) toggle — visual placeholder with an active state */
.controls .ctrl-btn--cc{
  width:auto;min-width:38px;padding:0 9px;
  font-family:var(--font-display);
  font-size:11px;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--line);
}
.controls .ctrl-btn--cc.is-active{
  color:var(--on-brand);background:var(--brand);border-color:var(--brand);
}
.controls .ctrl-btn--cc.is-active:hover{ background:var(--brand-bright); }
.controls .ctrl-btn[aria-pressed="true"]:not(.ctrl-btn--cc){ color:var(--text); }
.controls .time{ font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums;white-space:nowrap; }
.scrubber{
  position:relative;flex:1;height:6px;border-radius:6px;
  background:rgba(255,255,255,.14);cursor:pointer;min-width:80px;
}
.scrubber > i{ display:block;height:100%;width:34%;border-radius:6px;background:var(--brand-bright); }
.scrubber::after{
  content:"";position:absolute;left:34%;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);
}
.controls .spacer{ flex:1; }
@media (max-width:620px){
  .controls{ flex-wrap:wrap; }
  .scrubber{ order:-1;flex-basis:100%; }
}

/* 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);
}
.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); }
.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; }

/* ===== Brand mark = Vincent's real revolver cylinder (all themes) ===== */
#revTrigger{ width:40px !important; height:40px !important; padding:0; border:0;
  background:url("brand/source/revolver.png") center/contain no-repeat !important;
  transition:transform .9s var(--ease); }
#revTrigger > svg{ display:none !important; }
#revTrigger:hover{ transform:rotate(72deg); }
#revTrigger:active{ transform:rotate(150deg); }
.rev-hub > svg{ display:none !important; }
.rev-hub::before{ content:""; position:absolute; inset:0;
  background:url("brand/source/revolver.png") center/contain no-repeat;
  animation:ma-cyl-spin 16s linear infinite; }
@keyframes ma-cyl-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .rev-hub::before{ animation:none; } }