/* ============================================================
   Merk Arts — THEME: STUDIO / EDITORIAL
   "Anime as gallery art in a high-end design magazine."
   Cream paper base, near-black ink, Merk red as the sharp
   editorial accent. Fraunces display (heavy + italic), Archivo
   body, Shippori Mincho accents. Asymmetric magazine hero,
   hairline rules, numbered eyebrows, gallery-plate cards.
   ALL rules scoped under .theme-studio. CSS only.
   ============================================================ */

/* ---------------------------------------------------------------
   1. TOKEN OVERRIDES — a full LIGHT theme (override the dark base)
   --------------------------------------------------------------- */
.theme-studio{
  /* Surfaces — cream paper */
  --bg:        #F4EFE7;   /* primary paper */
  --bg-elev:   #ECE4D6;   /* slightly deeper paper (footer / wells) */
  --surface:   #FBF8F2;   /* card stock / panels (lighter than bg = lift) */
  --surface-2: #E7DECF;   /* recessed paper */
  --scrim:     rgba(21,18,14,.62);

  /* Ink text */
  --text:      #15120E;   /* near-black ink */
  --text-dim:  #4A443B;   /* muted ink */
  --text-mute: #655D50;   /* caption grey-brown — darkened to meet WCAG AA (>=4.5:1) on cream surfaces */
  --on-brand:  #FBF8F2;   /* paper-on-red */

  /* Hairlines — dark ink lines on light paper */
  --line:        rgba(21,18,14,.14);
  --line-strong: rgba(21,18,14,.30);

  /* Accent = the sharp editorial red */
  --accent:    #C0272D;
  --accent-2:  #7D1418;
  --on-accent: #FBF8F2;

  /* Shape — magazine sharpness (almost square corners) */
  --radius:    3px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --pill:      999px;
  --card-radius: 2px;

  /* Elevation — soft warm paper shadow, restrained */
  --shadow-1: 0 18px 40px -28px rgba(40,30,18,.55);
  --shadow-2: 0 34px 70px -38px rgba(40,30,18,.62);
  --shadow-card: 0 14px 34px -26px rgba(40,30,18,.5);

  /* Layout — tighter editorial column, generous gutters */
  --maxw:  1180px;
  --gut:   clamp(18px, 5vw, 60px);
  --nav-h: 76px;
  --hero-min: auto;

  /* Type — editorial */
  --font-display: 'Fraunces', 'Shippori Mincho', serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-accent:  'Shippori Mincho', serif;
  --display-weight: 900;
  --display-tracking: -.018em;
  --display-transform: none;
  --display-leading: .94;

  /* Motion — slow, refined, never bouncy */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.22,.61,.36,1);
  --dur: .62s;

  /* Atmosphere */
  --grain-opacity: 1;   /* we drive grain ourselves below */
  --hero-overlay: none;
  --hero-side-overlay: none;

  color-scheme: light;

  background:var(--bg);
  color:var(--text);
}

/* ---------------------------------------------------------------
   2. ATMOSPHERE — paper grain + faint editorial wash (light)
   --------------------------------------------------------------- */
.theme-studio body{
  background:var(--bg);
  font-weight:400;
  line-height:1.62;
}
/* Paper grain — fine fibre tint over cream (multiply, not overlay) */
.theme-studio body::before{
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
/* Faint warm/red editorial corners — very low so paper stays clean */
.theme-studio body::after{
  background:
    radial-gradient(60% 50% at 100% -8%, rgba(192,39,45,.05), transparent 60%),
    radial-gradient(50% 46% at -6% 104%, rgba(125,20,24,.04), transparent 60%);
}

/* Selection */
.theme-studio ::selection{ background:var(--accent); color:var(--on-accent); }

/* Focus — ink ring reads on paper */
.theme-studio :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------------------------------------------------------------
   3. SHELL — corner labels as editorial folios
   --------------------------------------------------------------- */
.theme-studio .label{
  font-family:var(--font-body);
  font-weight:700;
  font-size:10px;letter-spacing:.34em;
  color:var(--text-mute);
  background:rgba(251,248,242,.86);
  border:1px solid var(--line);
  border-radius:2px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.theme-studio .back-link{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--text-dim);
  background:rgba(251,248,242,.86);
  border:1px solid var(--line);
  border-radius:2px;
}
.theme-studio .back-link:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------------------------------------------------------------
   4. TOP NAV — a magazine masthead with a hairline rule
   --------------------------------------------------------------- */
.theme-studio .app-nav{
  background:rgba(244,239,231,.86);
  backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);
  border-bottom:1px solid var(--line-strong);
}
.theme-studio .app-nav .container{ gap:24px; }
.theme-studio .brand-word{
  font-family:var(--font-display);
  font-weight:900;
  font-size:24px;
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 40;
}
.theme-studio .brand-word b{ color:var(--accent); font-style:italic; }

/* Cylinder mark recoloured for paper */
.theme-studio .brand-cyl svg circle[stroke]{ stroke:rgba(21,18,14,.32); }
.theme-studio .brand-cyl svg circle[fill="#15151a"]{ fill:#FBF8F2; }
.theme-studio .brand-cyl svg circle[fill="#0a0a0c"]{ fill:var(--text); }

/* Nav links — editorial small caps, red underline ink */
.theme-studio .nav-links a{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  border-radius:2px;
}
.theme-studio .nav-links a:hover{ color:var(--text); background:transparent; }
.theme-studio .nav-links a[aria-current="page"]{ color:var(--accent); }
.theme-studio .nav-links a[aria-current="page"]::after{
  left:12px;right:12px;bottom:4px;height:2px;background:var(--accent);border-radius:0;
}

/* Buttons — sharp editorial; primary = solid red, ghost = ink hairline */
.theme-studio .btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text);
  padding:12px 22px;
  transition:transform .25s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.theme-studio .btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text); transform:none; }
.theme-studio .btn:active{ transform:none; }
.theme-studio .btn--primary{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
  box-shadow:none;
}
.theme-studio .btn--primary:hover{ background:var(--accent-2); border-color:var(--accent-2); color:var(--on-accent); }
.theme-studio .btn--ghost{ background:transparent; color:var(--text); }
.theme-studio .btn--ghost:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }

.theme-studio .icon-btn{
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--text-dim);
}
.theme-studio .icon-btn:hover{ border-color:var(--accent); color:var(--accent); background:transparent; }

/* ---------------------------------------------------------------
   5. REVOLVER MENU — light cream/paper overlay over an ink scrim
   --------------------------------------------------------------- */
.theme-studio .rev-overlay{
  transition:opacity .55s var(--ease), visibility .55s var(--ease);
}
.theme-studio .rev-backdrop{
  background:rgba(21,18,14,.78);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
/* A floating paper "plate" the chambers sit on */
.theme-studio .rev-stage{
  width:min(92vw,560px);
  background:
    linear-gradient(180deg, rgba(251,248,242,.97), rgba(236,228,214,.97));
  border:1px solid rgba(21,18,14,.18);
  border-radius:4px;
  padding:0;
  box-shadow:0 50px 120px -50px rgba(0,0,0,.7);
}
/* paper grain on the plate */
.theme-studio .rev-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
/* editorial header line for the menu plate */
.theme-studio .rev-stage::after{
  content:"NAVIGATION — Six chambers";
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  font-family:var(--font-body);font-weight:700;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text-mute);white-space:nowrap;
}
.theme-studio .rev-close{
  border:1px solid var(--line-strong);
  color:var(--text);
  background:rgba(251,248,242,.9);
  border-radius:2px;
}
.theme-studio .rev-close:hover{ border-color:var(--accent); color:var(--on-accent); background:var(--accent); transform:none; }

/* hub cylinder — ink hairlines on paper */
.theme-studio .rev-hub{ transition:transform .9s var(--ease), opacity .6s var(--ease); }
.theme-studio .rev-hub svg circle[stroke="#2a2a30"]{ stroke:rgba(21,18,14,.28); }
.theme-studio .rev-hub svg circle[stroke="#1a1a1f"]{ stroke:rgba(21,18,14,.12); }
.theme-studio .rev-hub svg circle[fill="#0a0a0c"]{ fill:var(--text); }
.theme-studio .rev-hub .cyl-dots circle{ fill:var(--accent); }
.theme-studio .rev-hub svg{ animation-duration:36s; }  /* slower, refined */

/* chambers — sharp red squares, numbered editorial labels */
.theme-studio .chamber{
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(.4);
  transition:transform .7s var(--ease) var(--d), opacity .55s var(--ease) var(--d);
}
.theme-studio .rev-overlay.open .chamber{
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1);
}
.theme-studio .chamber .dot{
  width:60px;height:60px;
  border-radius:3px;
  background:var(--accent);
  color:var(--on-accent);
  font-family:var(--font-display);
  font-weight:900;font-style:italic;
  font-size:19px;letter-spacing:0;
  box-shadow:0 0 0 1px rgba(21,18,14,.2), 0 14px 30px -14px rgba(192,39,45,.7);
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.theme-studio .chamber:hover .dot,
.theme-studio .chamber:focus-visible .dot{
  transform:scale(1.08);
  background:var(--accent-2);
  box-shadow:0 0 0 1px var(--text), 0 18px 38px -12px rgba(125,20,24,.8);
}
.theme-studio .chamber .clbl{
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);
}
.theme-studio .rev-hint{
  font-family:var(--font-accent);font-style:italic;
  letter-spacing:.04em;text-transform:none;
  color:var(--text-mute);font-size:13px;
}

/* ---------------------------------------------------------------
   6. HERO — asymmetric editorial spread (NOT a dark full-bleed)
   key art plate to the right · big serif title + standfirst left
   --------------------------------------------------------------- */
/* .hero is the asymmetric magazine grid: text column | framed art.
   In the markup, hero__bg + hero__scrim + hero__inner are siblings
   inside .hero, so we lay out .hero itself as the grid. */
.theme-studio .hero{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
  min-height:0;
  overflow:visible;
  isolation:auto;
  border-bottom:1px solid var(--line-strong);
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(34px,5vh,60px) var(--gut) clamp(40px,6vh,72px);
}
/* kill the full-bleed bg image + dark scrim of Cinema; the banner
   becomes a framed gallery plate in column 2 */
.theme-studio .hero__bg{
  position:static;
  z-index:auto;
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  max-height:560px;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center 22%;
  border:1px solid var(--line-strong);
  border-radius:3px;
  box-shadow:var(--shadow-2);
  align-self:stretch;
}
.theme-studio .hero__scrim{ display:none; }

/* text column */
.theme-studio .hero__inner{
  grid-column:1;
  grid-row:1;
  width:auto;max-width:none;margin:0;
  padding:0;
}

/* Standfirst-style kicker = numbered editorial eyebrow */
.theme-studio .hero__kicker{
  font-family:var(--font-body);
  font-style:normal;
  font-weight:700;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.theme-studio .hero__kicker::before{
  content:"01";
  font-family:var(--font-display);
  font-style:italic;font-weight:900;
  font-size:15px;letter-spacing:0;
  color:var(--text);
}
.theme-studio .hero__title{
  font-family:var(--font-display);
  font-weight:900;
  font-style:normal;
  letter-spacing:-.02em;
  line-height:.9;
  font-size:clamp(52px,8.5vw,108px);
  margin:0;
  max-width:none;
  text-shadow:none;
  color:var(--text);
  font-variation-settings:"opsz" 144;
}
/* a refined italic flourish on the title */
.theme-studio .hero__title::after{
  content:"";display:block;width:64px;height:3px;
  background:var(--accent);margin-top:22px;
}
.theme-studio .hero__meta{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text-dim);
  margin-top:22px;
  text-transform:uppercase;
  font-size:12px;
}
.theme-studio .hero__meta .sep{ color:var(--accent); }
.theme-studio .hero__synopsis{
  font-family:var(--font-accent);
  color:var(--text-dim);
  font-size:17px;
  line-height:1.72;
  margin-top:20px;
  max-width:52ch;
}
.theme-studio .hero__synopsis::first-letter{
  font-family:var(--font-display);
  font-weight:900;
  font-size:3.1em;
  float:left;
  line-height:.78;
  padding:6px 12px 0 0;
  color:var(--accent);
}
.theme-studio .hero__actions{ margin-top:30px; gap:14px; }

/* studio badge = a typeset imprint stamp */
.theme-studio .studio-badge{
  font-family:var(--font-body);
  font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:transparent;
  color:var(--text-dim);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.theme-studio .studio-badge:hover{ border-color:var(--accent); background:transparent; color:var(--text); }
.theme-studio .studio-badge b{ color:var(--accent); font-style:italic; font-family:var(--font-display); font-weight:900; letter-spacing:0; text-transform:none; font-size:14px; }

@media (max-width:860px){
  .theme-studio .hero{
    grid-template-columns:1fr;
    gap:26px;
  }
  .theme-studio .hero__bg{
    grid-column:1;
    grid-row:1;
    aspect-ratio:16/9;
    max-height:none;
  }
  .theme-studio .hero__inner{
    grid-column:1;
    grid-row:2;
  }
  .theme-studio .hero__title{ font-size:clamp(44px,12vw,72px); }
}

/* ---------------------------------------------------------------
   7. RAILS — numbered editorial section heads + hairline rules
   --------------------------------------------------------------- */
.theme-studio .rail-section{ margin-top:clamp(48px,7vh,76px); }
.theme-studio .rail-head{
  align-items:baseline;
  padding-bottom:16px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line-strong);
}
.theme-studio .rail-head h2{
  font-family:var(--font-display);
  font-weight:900;
  font-style:normal;
  letter-spacing:-.015em;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1;
  color:var(--text);
  display:flex;align-items:baseline;gap:14px;
  font-variation-settings:"opsz" 72;
}
/* numbered eyebrow tag before each rail title */
.theme-studio .rail-head h2::before{
  font-family:var(--font-body);
  font-weight:700;
  font-size:12px;letter-spacing:.14em;
  color:var(--accent);
  align-self:center;
  border:1px solid var(--accent);
  border-radius:2px;
  padding:3px 7px;
}
.theme-studio .rail-section:nth-of-type(1) .rail-head h2::before{ content:"N°01"; }
.theme-studio .rail-section:nth-of-type(2) .rail-head h2::before{ content:"N°02"; }
.theme-studio .rail-section:nth-of-type(3) .rail-head h2::before{ content:"N°03"; }
.theme-studio .rail-section:nth-of-type(4) .rail-head h2::before{ content:"N°04"; }

.theme-studio .rail-head .see-all{
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
}
.theme-studio .rail-head .see-all:hover{ color:var(--accent); }

.theme-studio .rail{ scrollbar-color:var(--line-strong) transparent; }
.theme-studio .rail::-webkit-scrollbar-thumb{ background:var(--line-strong); }

.theme-studio .rail__btn{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--text);
  box-shadow:var(--shadow-1);
}
.theme-studio .rail__btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-50%); }

/* ---------------------------------------------------------------
   8. POSTER CARDS — framed gallery plates with typeset captions
   --------------------------------------------------------------- */
.theme-studio .card{
  background:transparent;
  border-radius:0;
  overflow:visible;
  transition:transform .4s var(--ease);
}
.theme-studio .card:hover{ transform:translateY(-4px); box-shadow:none; }
.theme-studio .card__art{
  border-radius:2px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  box-shadow:var(--shadow-card);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.theme-studio .card:hover .card__art{ box-shadow:var(--shadow-2); border-color:var(--text); }
.theme-studio .card:hover .card__art img{ transform:scale(1.04); }

/* studio badge = small typeset plate label */
.theme-studio .card__badge{
  top:0;left:0;
  border-radius:0 0 2px 0;
  font-family:var(--font-body);
  font-weight:700;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--text);
  color:var(--bg);
  border:0;
  padding:5px 9px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.theme-studio .card__play{
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:0 12px 28px -10px rgba(192,39,45,.7);
}
.theme-studio .card__progress{
  height:3px;background:rgba(21,18,14,.18);
}
.theme-studio .card__progress > i{ background:var(--accent); }

/* caption block — magazine plate caption with rule */
.theme-studio .card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-style:normal;
  font-size:16px;
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--text);
  margin:14px 0 3px;
  padding-top:11px;
  border-top:1px solid var(--line);
  font-variation-settings:"opsz" 30;
}
.theme-studio .card__meta{
  font-family:var(--font-body);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);
  margin:0;
}

/* ---------------------------------------------------------------
   9. STUDIOS STRIP — prestige imprint plates
   --------------------------------------------------------------- */
.theme-studio .studios{ gap:18px; }
.theme-studio .studio-card{
  min-height:158px;
  padding:22px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:var(--surface);
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
/* corner imprint mark — registration/target glyph from the line-icon
   family, drawn as an SVG mask so it tints with the theme token. */
.theme-studio .studio-card::after{
  content:"";
  position:absolute;top:16px;right:18px;
  width:18px;height:18px;
  background:var(--line-strong);
  transition:background .35s var(--ease);
  -webkit-mask:var(--ma-target) center/contain no-repeat;
          mask:var(--ma-target) center/contain no-repeat;
}
.theme-studio{
  --ma-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/svg%3E");
}
.theme-studio .studio-card:hover{
  transform:translateY(-4px);
  border-color:var(--text);
  background:var(--bg-elev);
  box-shadow:var(--shadow-2);
}
.theme-studio .studio-card:hover::after{ background:var(--accent); }
.theme-studio .studio-card .studio-card__eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}
.theme-studio .studio-card .studio-card__name{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  font-size:24px;line-height:1.02;
  letter-spacing:-.015em;
  color:var(--text);
  margin-top:8px;
  font-variation-settings:"opsz" 40;
}

/* ---------------------------------------------------------------
   10. FOOTER — masthead colophon
   --------------------------------------------------------------- */
.theme-studio .footer{
  background:var(--bg-elev);
  border-top:1px solid var(--line-strong);
}
.theme-studio .footer__brand .brand-word{
  font-family:var(--font-display);font-weight:900;font-size:30px;
}
.theme-studio .footer__tagline{
  font-family:var(--font-accent);font-style:italic;
  color:var(--accent);font-size:16px;
}
.theme-studio .footer__logo{
  background:#fff;border:1px solid var(--line);border-radius:2px;
}
.theme-studio .footer__col h3{
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mute);
}
.theme-studio .footer__col a{
  font-family:var(--font-body);
  color:var(--text-dim);font-size:13.5px;
}
.theme-studio .footer__col a:hover{ color:var(--accent); }
.theme-studio .social a{
  border:1px solid var(--line-strong);border-radius:2px;color:var(--text-dim);
}
.theme-studio .social a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.theme-studio .footer__legal{
  border-top:1px solid var(--line);
  color:var(--text-mute);
  font-family:var(--font-body);
}

/* ---------------------------------------------------------------
   11. BROWSE — editorial masthead, hairline filters, gallery grid
   --------------------------------------------------------------- */
.theme-studio .browse-head h1{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  letter-spacing:-.025em;line-height:.9;
  font-size:clamp(48px,8vw,88px);
  color:var(--text);
  font-variation-settings:"opsz" 144;
}
.theme-studio .browse-head .browse-sub{
  font-family:var(--font-accent);
  color:var(--text-dim);font-size:16px;
}
.theme-studio .search input{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--text);
  font-family:var(--font-body);
}
.theme-studio .search input::placeholder{ color:var(--text-mute); }
.theme-studio .search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(192,39,45,.14); }
.theme-studio .search .search__icon{ color:var(--text-mute); }

.theme-studio .filters{ border-top:1px solid var(--line); padding-top:20px; }
.theme-studio .filter-group .filter-label{
  font-family:var(--font-body);
  font-weight:700;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
.theme-studio .chip{
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;letter-spacing:.04em;
}
.theme-studio .chip:hover{ border-color:var(--text); color:var(--text); }
.theme-studio .chip.is-active{ background:var(--text); border-color:var(--text); color:var(--bg); }

/* ---------------------------------------------------------------
   12. SERIES — editorial detail spread
   --------------------------------------------------------------- */
.theme-studio .series-hero{
  min-height:0;
  display:block;
  overflow:visible;
  isolation:auto;
  border-bottom:1px solid var(--line-strong);
  padding-top:clamp(28px,5vh,52px);
}
.theme-studio .series-hero__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:saturate(.92);
}
/* a soft paper wash so ink title reads over the banner top strip */
.theme-studio .series-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(244,239,231,.12) 0%, rgba(244,239,231,.55) 55%, var(--bg) 100%);
}
.theme-studio .series-hero{ min-height:42vh; display:flex; align-items:flex-end; }

.theme-studio .series__poster{
  border:1px solid var(--text);
  border-radius:2px;
  box-shadow:var(--shadow-2);
}
.theme-studio .series__kicker{
  font-family:var(--font-body);
  font-weight:700;font-style:normal;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
.theme-studio .series__title{
  font-family:var(--font-display);
  font-weight:900;font-style:normal;
  letter-spacing:-.02em;line-height:.9;
  font-size:clamp(44px,6.5vw,84px);
  color:var(--text);
  text-shadow:none;
  font-variation-settings:"opsz" 144;
}
.theme-studio .series__meta{
  font-family:var(--font-body);
  font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-dim);
}
.theme-studio .series__meta .sep{ color:var(--accent); }

.theme-studio .series__synopsis{
  font-family:var(--font-accent);
  color:var(--text-dim);
  font-size:18px;line-height:1.78;
  max-width:62ch;
  border-top:1px solid var(--line-strong);
  padding-top:24px;
}
.theme-studio .series__synopsis::first-letter{
  font-family:var(--font-display);
  font-weight:900;
  font-size:3em;float:left;line-height:.8;
  padding:4px 12px 0 0;color:var(--accent);
}
.theme-studio .studio-link{
  font-family:var(--font-body);
  font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}
.theme-studio .studio-link:hover{ color:var(--accent-2); }

/* section titles (Episodes / Cast / About) — numbered editorial heads */
.theme-studio .section-title{
  font-family:var(--font-display);
  font-weight:900;font-style:normal;
  letter-spacing:-.015em;
  font-size:clamp(26px,3.6vw,38px);
  color:var(--text);
  padding-bottom:14px;
  border-bottom:1px solid var(--line-strong);
  margin-bottom:26px;
  font-variation-settings:"opsz" 72;
}

/* episodes — editorial list rows, hairline dividers */
.theme-studio .ep{
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--surface);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.theme-studio .ep:hover{ border-color:var(--text); background:var(--bg-elev); transform:translateX(3px); }
.theme-studio .ep__thumb{ border-radius:2px; border:1px solid var(--line); }
.theme-studio .ep__num{
  font-family:var(--font-display);
  font-weight:900;font-style:italic;
  font-size:12px;letter-spacing:0;
  background:var(--text);color:var(--bg);
  border:0;border-radius:2px;
}
.theme-studio .ep__title{
  font-family:var(--font-display);
  font-weight:600;font-size:18px;letter-spacing:-.01em;
  color:var(--text);
  font-variation-settings:"opsz" 36;
}
.theme-studio .ep__desc{ font-family:var(--font-body); color:var(--text-mute); }
.theme-studio .ep__dur{
  font-family:var(--font-body);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
}
.theme-studio .ep__progress{ background:rgba(21,18,14,.14); }
.theme-studio .ep__progress > i{ background:var(--accent); }

/* cast — typeset cards */
.theme-studio .cast__person{
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--surface);
}
.theme-studio .cast__avatar{
  border-radius:2px;
  background:var(--accent);
  color:var(--on-accent);
  font-family:var(--font-display);font-weight:900;font-style:italic;
}
.theme-studio .cast__name{
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text);
}
.theme-studio .cast__role{ font-family:var(--font-body);font-size:11px;letter-spacing:.04em;color:var(--text-mute); }

/* ---------------------------------------------------------------
   13. PLAYER — page stays light; the STAGE stays dark cinema
   --------------------------------------------------------------- */
.theme-studio .section-eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);
  padding-bottom:0;border:0;
}
.theme-studio .player > .section-title{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:22px;
  font-style:italic;
  font-size:clamp(34px,5vw,60px);
}

/* The video stage: keep it dark (it sits over a dark video frame).
   Ink-framed plate on the cream page. */
.theme-studio .stage{
  background:#0B0A08;
  border:1px solid var(--text);
  border-radius:3px;
  box-shadow:var(--shadow-2);
}
.theme-studio [data-playtoggle]{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:0 18px 46px -16px rgba(192,39,45,.85);
}
.theme-studio [data-playtoggle]:hover{ background:var(--accent-2); transform:scale(1.06); }

/* X-Ray overlay sits over dark video → keep it dark/legible, red accents */
.theme-studio .xray{
  background:linear-gradient(0deg, rgba(11,10,8,.94) 35%, transparent);
}
.theme-studio .xray__badge{
  font-family:var(--font-body);
  font-weight:700;letter-spacing:.22em;
  color:#F4EFE7;
}
.theme-studio .xray__badge::before{ background:var(--accent); box-shadow:0 0 12px var(--accent); }
.theme-studio .xray__card{
  background:rgba(20,16,12,.72);
  border:1px solid rgba(244,239,231,.18);
  border-radius:2px;
}
.theme-studio .xray__avatar{
  border-radius:2px;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--font-display);font-weight:900;font-style:italic;
}
.theme-studio .xray__char{ font-family:var(--font-display);font-weight:700;color:#FBF8F2; }
.theme-studio .xray__va{ color:#E9B7B0; }
.theme-studio .xray__note{ color:#C9C2B6; }

/* Controls bar — light paper panel with ink/red controls */
.theme-studio .controls{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:3px;
}
.theme-studio .controls .ctrl-btn{ color:var(--text-dim);border-radius:2px; }
.theme-studio .controls .ctrl-btn:hover{ color:var(--accent); background:var(--surface-2); }
/* CC toggle — editorial red active state */
.theme-studio .controls .ctrl-btn--cc{ border:1px solid var(--line-strong);border-radius:2px;color:var(--text-dim); }
.theme-studio .controls .ctrl-btn--cc.is-active{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.theme-studio .controls .ctrl-btn--cc.is-active:hover{ background:var(--accent-2);color:var(--on-accent); }
.theme-studio .controls .time{
  font-family:var(--font-body);font-weight:600;color:var(--text-dim);
}
.theme-studio .scrubber{ background:rgba(21,18,14,.16); }
.theme-studio .scrubber > i{ background:var(--accent); }
.theme-studio .scrubber::after{
  background:var(--text);
  box-shadow:0 0 0 3px var(--accent);
}

/* Up next — paper panel */
.theme-studio .upnext{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:3px;
}
.theme-studio .upnext__thumb{ border-radius:2px;border:1px solid var(--line); }
.theme-studio .upnext__eyebrow{
  font-family:var(--font-body);font-weight:700;letter-spacing:.18em;color:var(--accent);
}
.theme-studio .upnext__title{
  font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--text);
}
.theme-studio .upnext__count{ font-family:var(--font-body);color:var(--text-mute); }

/* Meta block + credits — editorial colophon */
.theme-studio .meta-block .meta-synopsis{
  font-family:var(--font-accent);color:var(--text-dim);font-size:16.5px;line-height:1.78;
}
.theme-studio .credits{ border-left:1px solid var(--line-strong);padding-left:26px; }
.theme-studio .credits dt{
  font-family:var(--font-body);font-weight:700;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);
}
.theme-studio .credits dd{ font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text); }
.theme-studio .licensor{
  font-family:var(--font-body);
  font-size:10.5px;letter-spacing:.12em;color:var(--text-mute);
}

/* ---------------------------------------------------------------
   14. BITS — badges / pills / progress on paper
   --------------------------------------------------------------- */
.theme-studio .badge{
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--text-dim);
  font-family:var(--font-body);font-weight:700;
  font-size:10px;letter-spacing:.1em;
}
.theme-studio .pill{
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--text-dim);
  font-family:var(--font-body);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;font-size:11px;
}
.theme-studio .pill .score{ color:var(--accent); font-weight:800; }
.theme-studio .progress{ background:rgba(21,18,14,.14); }
.theme-studio .progress > i{ background:var(--accent); }

/* ---------------------------------------------------------------
   15. RESPONSIVE refinements
   --------------------------------------------------------------- */
@media (max-width:760px){
  .theme-studio .nav-links{ display:none; }   /* rely on revolver menu on mobile */
}
@media (max-width:620px){
  .theme-studio .hero__synopsis::first-letter,
  .theme-studio .series__synopsis::first-letter{ font-size:2.4em; }
}