/* ==========================================================================
   Waffle Drama — App Waffle LLC
   --------------------------------------------------------------------------
   A warm-paper editorial catalogue. The house look is print, not TV: cream
   stock with a grain wash, a rust accent, Fraunces for display and Inter for
   running text. Light and dark both ship; the toggle writes data-theme and
   the system preference is the default.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */

:root{
  color-scheme: light;

  --paper:   #FAF7F0;   /* page stock            */
  --paper-2: #F2EDE1;   /* panels, table stripes */
  --paper-3: #FFFFFF;   /* lifted cards          */
  --paper-4: #EBE4D4;   /* wells                 */

  --ink:   #1A1715;     /* body copy  */
  --ink-2: #5E574E;     /* secondary  */
  --ink-3: #71695F;     /* captions   */

  --rule:   #E4DCCA;
  --rule-2: #CCC2AC;

  --rust:    #B8410E;   /* the accent */
  --rust-2:  #93330A;   /* pressed    */
  --rust-3:  #F6E6DA;   /* tint fill  */
  --on-rust: #FFF7EF;

  --green: #2F7A3E;     /* "plays now"  */
  --ochre: #A86A12;     /* "on request" */

  --shadow:   0 1px 2px rgba(60,44,28,.08);
  --shadow-2: 0 18px 40px -18px rgba(60,44,28,.30), 0 2px 6px rgba(60,44,28,.07);
  --press:    7px 7px 0 var(--rule-2);   /* the hard print offset */

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r:   4px;
  --r-2: 10px;
  --gut: clamp(18px, 4.2vw, 64px);
  --col: 1180px;
  --mast: 62px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

html[data-theme="dark"]{
  color-scheme: dark;

  --paper:   #111013;
  --paper-2: #191719;
  --paper-3: #201D20;
  --paper-4: #0B0A0C;

  --ink:   #F4F1E9;
  --ink-2: #A8A29A;
  --ink-3: #8C8780;

  --rule:   #2B282B;
  --rule-2: #413D41;

  --rust:    #E68A4C;
  --rust-2:  #F2A368;
  --rust-3:  #2A1F18;
  --on-rust: #16120F;

  --green: #5BB870;
  --ochre: #D9A04A;

  --shadow:   0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 18px 40px -16px rgba(0,0,0,.72), 0 2px 6px rgba(0,0,0,.45);
  --press:    7px 7px 0 var(--rule-2);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* No choice made: follow the system. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    color-scheme: dark;
  
    --paper:   #111013;
    --paper-2: #191719;
    --paper-3: #201D20;
    --paper-4: #0B0A0C;
  
    --ink:   #F4F1E9;
    --ink-2: #A8A29A;
    --ink-3: #8C8780;
  
    --rule:   #2B282B;
    --rule-2: #413D41;
  
    --rust:    #E68A4C;
    --rust-2:  #F2A368;
    --rust-3:  #2A1F18;
    --on-rust: #16120F;
  
    --green: #5BB870;
    --ochre: #D9A04A;
  
    --shadow:   0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 18px 40px -16px rgba(0,0,0,.72), 0 2px 6px rgba(0,0,0,.45);
    --press:    7px 7px 0 var(--rule-2);
  
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  }
}

/* --- reset --------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background-color:var(--paper);
  background-image:var(--grain);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button,input,textarea,select{ font:inherit; color:inherit }
[hidden]{ display:none !important }

:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:3px;
  border-radius:2px;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  font-variation-settings:"SOFT" 20,"WONK" 1;
}

.wrap{ width:100%; max-width:var(--col); margin-inline:auto; padding-inline:var(--gut) }

/* small-caps kicker, used everywhere a label is needed */
.kicker{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}
.kicker b{ color:var(--rust); font-weight:600 }

.rule-double{
  border:0;
  border-top:3px double var(--rule-2);
  margin:0;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--rust); color:var(--on-rust);
  padding:10px 16px; z-index:60; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; top:0 }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.wmast{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.wmast__in{
  max-width:var(--col); margin-inline:auto;
  padding-inline:var(--gut);
  height:var(--mast);
  display:flex; align-items:center; gap:22px;
}

.wbrand{ display:flex; align-items:center; gap:10px; margin-right:auto }
.wbrand__mark{
  width:26px; height:26px; flex:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  padding:2px;
  background:var(--rust);
  border-radius:6px;
}
.wbrand__mark i{ background:var(--on-rust); border-radius:1px; opacity:.92 }
.wbrand__name{
  font-family:var(--serif); font-size:19px; font-weight:600;
  letter-spacing:-.02em; white-space:nowrap;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.wbrand__name i{ font-style:normal; color:var(--rust) }

.wnav{ display:flex; gap:4px }
.wnav a{
  position:relative;
  padding:7px 11px;
  font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2);
  border-radius:var(--r);
  transition:color .16s, background .16s;
}
.wnav a:hover{ color:var(--ink); background:var(--paper-2) }
.wnav a.is-on{ color:var(--ink) }
.wnav a.is-on::after{
  content:""; position:absolute; left:11px; right:11px; bottom:1px;
  height:2px; background:var(--rust);
}

.wmast__tools{ display:flex; align-items:center; gap:8px }

.wicon{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--rule);
  background:var(--paper-2);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .16s, color .16s, background .16s;
}
.wicon svg{ width:17px; height:17px }
.wicon:hover{ border-color:var(--rust); color:var(--rust) }
.wicon .i-moon{ display:none }
html[data-theme="dark"] .wicon .i-sun{ display:none }
html[data-theme="dark"] .wicon .i-moon{ display:block }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .wicon .i-sun{ display:none }
  html:not([data-theme="light"]) .wicon .i-moon{ display:block }
}

.wburger{ display:none }

/* mobile drawer */
.wdrawer{
  position:fixed; inset:var(--mast) 0 auto 0; z-index:39;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  box-shadow:var(--shadow-2);
  padding:10px var(--gut) 18px;
  transform:translateY(-12px); opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}
.wdrawer.is-open{ transform:none; opacity:1 }
.wdrawer a{
  display:block; padding:13px 2px;
  border-bottom:1px solid var(--rule);
  font-family:var(--serif); font-size:19px;
}
.wdrawer a:last-child{ border-bottom:0 }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px;
  background:var(--rust); color:var(--on-rust);
  border:1px solid var(--rust);
  border-radius:var(--r);
  font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.btn svg{ width:16px; height:16px; flex:none }
.btn:hover{ background:var(--rust-2); border-color:var(--rust-2) }
.btn:active{ transform:translateY(1px) }

.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--rule-2);
}
.btn--ghost:hover{ background:var(--paper-2); border-color:var(--ink-3); color:var(--ink) }

.btn--quiet{
  background:transparent; border-color:transparent; color:var(--ink-2);
  padding:10px 12px;
}
.btn--quiet:hover{ background:var(--paper-2); color:var(--ink); border-color:transparent }

.btn--full{ width:100% }
.btn.is-saved{ background:var(--rust-3); color:var(--rust); border-color:var(--rust) }

.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px;
  border:1px solid var(--rule-2);
  border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}
.tag--rust{ border-color:var(--rust); color:var(--rust); background:var(--rust-3) }
.tag--dot::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
}
.tag--wait::before{ background:var(--ochre) }

/* ==========================================================================
   PHONE PLATE — the house frame for 9:16 artwork
   ========================================================================== */

.plate{
  position:relative; display:block;
  border-radius:var(--r-2);
  overflow:hidden;
  background:var(--paper-4);
  border:1px solid var(--rule-2);
  aspect-ratio:2 / 3;
}
.plate img{ width:100%; height:100%; object-fit:cover }
.plate__eps{
  position:absolute; left:8px; bottom:8px; z-index:2;
  padding:3px 8px;
  background:color-mix(in srgb, #121013 76%, transparent);
  color:#F7F3EB;
  backdrop-filter:blur(4px);
  border-radius:100px;
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.plate__hot{
  position:absolute; right:8px; top:8px; z-index:2;
  padding:3px 8px;
  background:var(--rust); color:var(--on-rust);
  border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.plate__veil{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(18,16,19,0) 38%,rgba(18,16,19,.6));
  opacity:0; transition:opacity .2s;
}
.plate__veil span{
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--rust); color:var(--on-rust);
  border-radius:50%;
  transform:scale(.86); transition:transform .2s;
}
.plate__veil svg{ width:18px; height:18px; margin-left:2px }

/* --- catalogue card ----------------------------------------------------- */

.show{ display:block; position:relative }
.show__art{ display:block; position:relative }
.show:hover .plate__veil{ opacity:1 }
.show:hover .plate__veil span{ transform:none }
.show:hover .plate{ border-color:var(--rust) }
.show__name{
  display:block; margin-top:11px;
  font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.2;
  letter-spacing:-.01em;
}
.show:hover .show__name{ color:var(--rust) }
.show__meta{
  display:block; margin-top:3px;
  font-size:12px; color:var(--ink-3); letter-spacing:.02em;
}

/* progress sliver drawn by JS when an episode has been started */
.show__bar{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  z-index:2;
}
.show__bar i{ display:block; height:100%; background:var(--rust) }

/* ==========================================================================
   HOME — the spread
   ========================================================================== */

.spread{ padding:clamp(26px,4.5vw,56px) 0 clamp(20px,3vw,34px) }
.spread__in{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,5vw,66px);
  align-items:center;
}

.spread__no{
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.spread__no b{
  font-family:var(--serif); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rust);
}
.spread__no s{
  flex:1; height:1px; background:var(--rule-2); text-decoration:none;
}

.spread h1{
  font-size:clamp(34px,5.6vw,62px);
  margin:0 0 16px;
  font-variation-settings:"SOFT" 24,"WONK" 1;
  text-wrap:balance;
}
.spread__line{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-bottom:18px;
}
.spread__syn{
  font-size:16.5px; line-height:1.68; color:var(--ink-2);
  max-width:46ch; margin:0 0 24px;
}
.spread__syn::first-letter{
  float:left;
  font-family:var(--serif); font-weight:600;
  font-size:52px; line-height:.84;
  padding:4px 9px 0 0;
  color:var(--rust);
}
.spread__do{ display:flex; flex-wrap:wrap; gap:11px; align-items:center }

/* the artwork, pinned in a print-offset frame */
.spread__art{ position:relative; z-index:0; justify-self:center; width:100%; max-width:330px }
.spread__art .plate{
  box-shadow:var(--press);
  border-color:var(--ink-3);
}
.spread__art::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--rule-2);
  border-radius:var(--r-2);
  transform:translate(14px,14px);
  z-index:-1;
}

/* the strip that swaps the spread — a contents strip, not a carousel */
.strip{
  display:flex; gap:10px; overflow-x:auto;
  margin-top:30px;
  padding:16px 0 4px;
  border-top:1px solid var(--rule);
  scrollbar-width:thin;
}
.strip__b{
  flex:none; width:74px;
  border:0; background:none; padding:0; cursor:pointer;
  text-align:left;
  opacity:.52; transition:opacity .18s;
}
.strip__b img{
  width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:var(--r);
  border:1px solid var(--rule-2);
}
.strip__b span{
  display:block; margin-top:6px;
  font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.strip__b:hover{ opacity:.85 }
.strip__b.is-on{ opacity:1 }
.strip__b.is-on img{ border-color:var(--rust); box-shadow:0 0 0 2px var(--rust-3) }
.strip__b.is-on span{ color:var(--rust) }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */

.sec{ padding:clamp(34px,5vw,62px) 0 }
.sec--well{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.sec__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:26px;
}
.sec__head h2{ font-size:clamp(23px,2.9vw,33px) }
.sec__head p{ margin:7px 0 0; color:var(--ink-2); font-size:14.5px; max-width:58ch }
.sec__more{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rust); white-space:nowrap;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}

/* ==========================================================================
   THE INDEX — ruled contents table, the signature component
   ========================================================================== */

.index{ border-top:1px solid var(--rule-2) }

.index__head,
.index__row{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 98px 84px 92px 116px 20px;
  align-items:center;
  gap:16px;
}

.index__head{
  padding:9px 10px;
  border-bottom:1px solid var(--rule-2);
}
.index__head button{
  border:0; background:none; padding:0; cursor:pointer;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); text-align:left;
  display:inline-flex; align-items:center; gap:5px;
}
.index__head button:hover{ color:var(--ink) }
.index__head button[aria-sort]{ color:var(--rust) }
.index__head button svg{ width:10px; height:10px; opacity:0 }
.index__head button[aria-sort] svg{ opacity:1 }
.index__head button[aria-sort="descending"] svg{ transform:rotate(180deg) }

.index__row{
  padding:11px 10px;
  border-bottom:1px solid var(--rule);
  transition:background .14s;
  position:relative;
}
.index__row:hover{ background:var(--paper-2) }
.index__row:hover .index__t{ color:var(--rust) }

.index__n{
  font-family:var(--serif); font-size:15px; font-weight:600;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.index__row:hover .index__n{ color:var(--rust) }

.index__main{ display:flex; align-items:center; gap:13px; min-width:0 }
.index__thumb{
  width:34px; aspect-ratio:2/3; flex:none;
  object-fit:cover; border-radius:3px;
  border:1px solid var(--rule-2);
}
.index__wrap{ display:block; min-width:0 }
.index__t{
  display:block;
  font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.22;
  letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.index__g{
  display:block;
  font-size:11.5px; color:var(--ink-3); letter-spacing:.03em;
  margin-top:2px;
}
.index__c{ font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums }
.index__arrow{ justify-self:end; color:var(--ink-3); opacity:0; transition:opacity .14s, transform .18s }
.index__arrow svg{ width:16px; height:16px }
.index__row:hover .index__arrow{ opacity:1; transform:translateX(3px); color:var(--rust) }

/* ==========================================================================
   SHELVES — static wrapped grids, no scroll arrows anywhere
   ========================================================================== */

.shelf + .shelf{ margin-top:clamp(28px,3.6vw,44px) }
.shelf__head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:10px; margin-bottom:18px;
  border-bottom:1px solid var(--rule-2);
}
.shelf__head h3{ font-size:20px }
.shelf__head span{ font-size:12px; color:var(--ink-3); letter-spacing:.04em; margin-left:auto }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(146px,1fr));
  gap:clamp(16px,2.2vw,26px) clamp(13px,1.8vw,20px);
}
.grid--wide{ grid-template-columns:repeat(auto-fill, minmax(168px,1fr)) }

/* ==========================================================================
   BROWSE
   ========================================================================== */

.pagehead{
  padding:clamp(28px,4.4vw,52px) 0 clamp(16px,2.2vw,26px);
  border-bottom:1px solid var(--rule);
}
.pagehead h1{ font-size:clamp(30px,4.6vw,50px); margin:12px 0 0; text-wrap:balance }
.pagehead p{ margin:12px 0 0; color:var(--ink-2); font-size:16px; max-width:62ch }

.bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
  position:sticky; top:var(--mast); z-index:20;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter:blur(8px);
}
.chips{ display:flex; gap:7px; flex-wrap:wrap }
.chip{
  padding:6px 13px;
  border:1px solid var(--rule-2);
  background:transparent;
  border-radius:100px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); cursor:pointer;
  transition:all .14s;
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink) }
.chip.is-on{ background:var(--rust); border-color:var(--rust); color:var(--on-rust) }

.seg{ display:flex; margin-left:auto; border:1px solid var(--rule-2); border-radius:var(--r); overflow:hidden }
.seg button{
  border:0; background:transparent; cursor:pointer;
  padding:7px 11px; display:grid; place-items:center;
  color:var(--ink-3);
}
.seg button svg{ width:15px; height:15px }
.seg button + button{ border-left:1px solid var(--rule-2) }
.seg button.is-on{ background:var(--rust); color:var(--on-rust) }

.find{
  display:flex; align-items:center; gap:8px;
  padding:7px 12px;
  border:1px solid var(--rule-2); border-radius:100px;
  background:var(--paper-3);
  min-width:190px;
}
.find svg{ width:15px; height:15px; color:var(--ink-3); flex:none }
.find input{ border:0; background:none; outline:0; width:100%; font-size:14px }
.find input::placeholder{ color:var(--ink-3) }

.empty{
  padding:60px 0; text-align:center; color:var(--ink-2);
}
.empty b{ display:block; font-family:var(--serif); font-size:22px; color:var(--ink); margin-bottom:6px }

/* ==========================================================================
   SERIES PAGE
   ========================================================================== */

.title-block{
  padding:clamp(26px,4vw,48px) 0 clamp(18px,2.4vw,28px);
  border-bottom:3px double var(--rule-2);
}
.title-block h1{
  font-size:clamp(32px,5.6vw,60px);
  margin:14px 0 0;
  text-wrap:balance;
  font-variation-settings:"SOFT" 24,"WONK" 1;
}
.crumb{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.crumb a:hover{ color:var(--rust) }
.crumb span{ color:var(--rule-2); margin:0 7px }

.detail{
  display:grid;
  grid-template-columns:266px minmax(0,1fr);
  gap:clamp(24px,4.4vw,56px);
  padding:clamp(26px,4vw,46px) 0;
  align-items:start;
}
.detail__left{ position:sticky; top:calc(var(--mast) + 22px) }
.detail__left .plate{ box-shadow:var(--press); border-color:var(--ink-3) }
.detail__do{ display:flex; flex-direction:column; gap:9px; margin-top:18px }

.facts{ margin:20px 0 0; border-top:1px solid var(--rule) }
.facts div{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--rule);
}
.facts dt{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.facts dd{ margin:0; font-size:13.5px; text-align:right; font-variant-numeric:tabular-nums }

.logline{
  font-size:18px; line-height:1.7; color:var(--ink);
  margin:0 0 26px; max-width:62ch;
}
.logline::first-letter{
  float:left;
  font-family:var(--serif); font-weight:600;
  font-size:58px; line-height:.82;
  padding:5px 10px 0 0;
  color:var(--rust);
}

/* episode list — ruled rows, real runtimes */
.eps__head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:10px; margin-bottom:0;
  border-bottom:1px solid var(--rule-2);
}
.eps__head h2{ font-size:21px }
.eps__head span{ font-size:12px; color:var(--ink-3); letter-spacing:.04em; margin-left:auto }

.ep{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto auto;
  align-items:center; gap:14px;
  width:100%; text-align:left;
  padding:12px 10px 12px 2px;
  border:0; border-bottom:1px solid var(--rule);
  background:none; cursor:pointer;
  transition:background .14s;
  position:relative;
}
.ep:hover{ background:var(--paper-2) }
.ep__n{
  font-family:var(--serif); font-size:16px; font-weight:600;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.ep:hover .ep__n{ color:var(--rust) }
.ep__t{ font-size:14.5px; font-weight:500 }
.ep__t b{ font-weight:600 }
.ep__t i{ display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:2px }
.ep__run{ font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.ep__go{ color:var(--ink-3); display:grid; place-items:center }
.ep__go svg{ width:16px; height:16px }
.ep:hover .ep__go{ color:var(--rust) }
.ep--locked{ cursor:pointer }
.ep--locked .ep__n,
.ep--locked .ep__t{ color:var(--ink-3) }
.ep--locked:hover .ep__t{ color:var(--ink-2) }
.ep__lock{ width:14px; height:14px; color:var(--ochre) }
.ep__prog{
  position:absolute; left:2px; bottom:0; height:2px;
  background:var(--rust);
}
.ep.is-done .ep__n::after{
  content:"✓"; margin-left:4px; color:var(--green); font-size:12px;
}

.more-note{
  display:flex; align-items:center; gap:16px 22px; flex-wrap:wrap;
  padding:16px 18px; font-size:14px; line-height:1.55; color:var(--ink-2);
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-left:3px solid var(--ochre);
  border-radius:var(--r);
  margin-top:18px;
}
.more-note p{ margin:0; flex:1 1 300px }
.more-note b{ color:var(--ink) }
.more-note .btn{ flex:none }

/* ==========================================================================
   THEATRE — vertical player, dark in both themes
   ========================================================================== */

.theatre{
  background:#0C0B0D;
  background-image:var(--grain);
  color:#F2EFE8;
  min-height:calc(100vh - var(--mast));
  padding:clamp(18px,3vw,34px) 0 clamp(30px,4vw,50px);
}
.theatre__in{
  max-width:1080px; margin-inline:auto; padding-inline:var(--gut);
  display:grid;
  grid-template-columns:minmax(0,1fr) 288px;
  gap:clamp(20px,3.4vw,42px);
  align-items:start;
}

.theatre{ --stage-w:min(100%, 452px, calc((100vh - 215px) * 0.5625)) }
.stage{
  position:relative;
  width:var(--stage-w);
  margin-inline:auto;
  aspect-ratio:9 / 16;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
}
.stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000 }
.stage__empty{
  position:absolute; inset:0;
  display:grid; place-items:center; align-content:center; gap:12px;
  padding:34px; text-align:center;
}
.stage__empty img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.2;
}
.stage__empty b{ font-family:var(--serif); font-size:21px; position:relative }
.stage__empty p{ margin:0; font-size:13.5px; color:#B9B2A8; max-width:30ch; position:relative }
.stage__empty .btn{ position:relative }

.stage__next{
  position:absolute; inset:auto 12px 12px; z-index:3;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(14,12,15,.9);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  transform:translateY(14px); opacity:0; pointer-events:none;
  transition:transform .22s, opacity .22s;
}
.stage__next.is-on{ transform:none; opacity:1; pointer-events:auto }
.stage__next b{ font-family:var(--serif); font-size:14px; display:block }
.stage__next small{ font-size:11.5px; color:#B9B2A8; letter-spacing:.04em }
.stage__next .btn{ margin-left:auto; padding:9px 14px }
.stage__ring{
  width:34px; height:34px; flex:none;
  border-radius:50%;
  background:conic-gradient(var(--rust) calc(var(--p,0) * 1%), rgba(255,255,255,.16) 0);
  display:grid; place-items:center;
  font-size:11px; font-weight:700;
}

.theatre__bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  width:var(--stage-w); margin:14px auto 0;
}
.tctl{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:#F2EFE8;
  border-radius:var(--r); cursor:pointer;
  transition:background .14s, border-color .14s;
}
.tctl svg{ width:16px; height:16px }
.tctl:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3) }
.tctl:disabled{ opacity:.3; cursor:default }
.tctl--wide{ width:auto; padding:0 12px; font-size:12px; font-weight:600; letter-spacing:.06em }
#mute .i-off{ display:none }
#mute[aria-pressed="true"] .i-on{ display:none }
#mute[aria-pressed="true"] .i-off{ display:block }
.theatre__now{
  margin-left:auto; font-size:12px; color:#B9B2A8;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}

.theatre__side h1{ font-size:clamp(21px,2.5vw,27px); color:#F6F3EC }
.theatre__side .kicker{ color:#8D8781 }
.theatre__side .tag{ border-color:rgba(255,255,255,.2); color:#CFC8BE }
.theatre__line{ display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 16px }
.theatre__syn{ font-size:13.5px; line-height:1.62; color:#B9B2A8; margin:0 0 18px }
.theatre__side .btn--ghost{ color:#F2EFE8; border-color:rgba(255,255,255,.22) }
.theatre__side .btn--ghost:hover{ background:rgba(255,255,255,.08); color:#fff }

.rail{ margin-top:22px; border-top:1px solid rgba(255,255,255,.12) }
.rail__t{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8D8781; padding:12px 0 8px;
}
.rail__i{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:11px;
  width:100%; text-align:left;
  padding:10px 8px 10px 2px;
  border:0; border-bottom:1px solid rgba(255,255,255,.08);
  background:none; color:inherit; cursor:pointer;
  transition:background .14s;
  position:relative;
}
.rail__i:hover{ background:rgba(255,255,255,.06) }
.rail__i b{
  font-family:var(--serif); font-size:15px; color:#8D8781;
  font-variant-numeric:tabular-nums;
}
.rail__i span{ font-size:13px }
.rail__i small{ font-size:11.5px; color:#8D8781; font-variant-numeric:tabular-nums }
.rail__i.is-on{ background:rgba(230,138,76,.12) }
.rail__i.is-on b{ color:var(--rust) }
.rail__i.is-on span{ color:#fff; font-weight:600 }
.rail__i .ep__prog{ left:2px }

/* ==========================================================================
   FORMS / MODAL
   ========================================================================== */

.field{ display:block; margin-bottom:14px }
.field > span{
  display:block; margin-bottom:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.field > span i{ font-style:normal; text-transform:none; letter-spacing:0; font-weight:500; opacity:.8 }
.field input,.field textarea,.field select{
  width:100%;
  padding:11px 13px;
  background:var(--paper-3);
  border:1px solid var(--rule-2);
  border-radius:var(--r);
  font-size:14.5px;
  outline:0;
  transition:border-color .14s, box-shadow .14s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--rust);
  box-shadow:0 0 0 3px var(--rust-3);
}
.field textarea{ resize:vertical; min-height:86px; line-height:1.55 }
.field.is-bad input,.field.is-bad textarea{ border-color:#C0392B }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.note{ margin:12px 0 0; font-size:13px; color:var(--ink-2); min-height:20px }
.note.is-ok{ color:var(--green); font-weight:500 }
.note.is-bad{ color:#C0392B }

.modal{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(18,16,15,.62);
  background:color-mix(in srgb, #12100F 62%, transparent);
  backdrop-filter:blur(5px);
  opacity:0; transition:opacity .2s;
}
.modal.is-open{ opacity:1 }
.modal__p{
  width:100%; max-width:452px;
  max-height:90vh; overflow-y:auto;
  background:var(--paper);
  background-image:var(--grain);
  border:1px solid var(--rule-2);
  border-radius:var(--r-2);
  box-shadow:var(--shadow-2);
  padding:clamp(22px,4vw,32px);
  position:relative;
  transform:translateY(10px) scale(.985);
  transition:transform .22s;
}
.modal.is-open .modal__p{ transform:none }
.modal__x{
  position:absolute; right:12px; top:12px;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid var(--rule); background:var(--paper-2);
  border-radius:var(--r); cursor:pointer; font-size:19px; line-height:1;
  color:var(--ink-2);
}
.modal__x:hover{ border-color:var(--rust); color:var(--rust) }
.modal__p h2{ font-size:26px; margin:9px 0 8px }
.modal__p > p{ margin:0 0 20px; font-size:14.5px; color:var(--ink-2) }

/* ==========================================================================
   STATIC COPY (about / licensing)
   ========================================================================== */

.prose{ max-width:70ch; padding:clamp(24px,3.6vw,44px) 0 }
.prose h2{ font-size:clamp(22px,2.7vw,30px); margin:38px 0 12px }
.prose h2:first-child{ margin-top:0 }
.prose h3{ font-size:19px; margin:26px 0 8px }
.prose p{ margin:0 0 15px; font-size:16px; line-height:1.72; color:var(--ink-2) }
.prose p strong,.prose li strong{ color:var(--ink) }
.prose ul{ margin:0 0 16px; padding-left:20px; color:var(--ink-2) }
.prose li{ margin-bottom:7px; line-height:1.66 }
.prose a{ color:var(--rust); border-bottom:1px solid color-mix(in srgb,var(--rust) 36%,transparent) }
.prose a:hover{ border-bottom-color:var(--rust) }
.prose hr{ border:0; border-top:3px double var(--rule-2); margin:34px 0 }

.cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.6vw,30px);
}
.panel{
  padding:clamp(18px,2.4vw,26px);
  background:var(--paper-3);
  border:1px solid var(--rule);
  border-radius:var(--r-2);
  box-shadow:var(--shadow);
}
.panel h3{ font-size:18px; margin:10px 0 7px }
.panel p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.62 }
.panel__n{
  font-family:var(--serif); font-size:13px; font-weight:600;
  color:var(--rust); letter-spacing:.1em;
}

.addr{
  font-style:normal; font-size:14.5px; line-height:1.72; color:var(--ink-2);
}
.addr b{ display:block; color:var(--ink); font-weight:600; margin-bottom:3px }

/* ==========================================================================
   FOOTER
   ========================================================================== */

body[data-page="watch"] .wfoot{ margin-top:0 }

.wfoot{
  border-top:3px double var(--rule-2);
  background:var(--paper-2);
  padding:clamp(30px,4.4vw,52px) 0 26px;
  margin-top:clamp(34px,5vw,64px);
}
.wfoot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) minmax(0,1.2fr);
  gap:clamp(22px,3.4vw,44px);
}
.wfoot__grid h4{
  font-family:var(--sans);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;
}
.wfoot__grid a{ display:block; font-size:14px; color:var(--ink-2); padding:4px 0 }
.wfoot__grid a:hover{ color:var(--rust) }
.wfoot__blurb{ margin:12px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.66; max-width:38ch }
.wfoot__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(24px,3.4vw,40px); padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--ink-3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1020px){
  .theatre__in{ grid-template-columns:minmax(0,1fr) 250px }
  .index__head,
  .index__row{ grid-template-columns:40px minmax(0,1fr) 76px 112px }
  .index__c--lang,.index__c--run,.index__arrow{ display:none }
}

@media (max-width:880px){
  .wnav,.wmast__tools .wicon--list{ display:none }
  .wburger{
    display:grid; place-items:center;
    width:34px; height:34px;
    border:1px solid var(--rule); background:var(--paper-2);
    border-radius:var(--r); cursor:pointer;
  }
  .wburger svg{ width:18px; height:18px }

  .spread__in{ grid-template-columns:minmax(0,1fr); gap:30px }
  .spread__art{ order:-1; max-width:252px }
  .spread h1{ font-size:clamp(30px,8vw,42px) }

  .detail{ grid-template-columns:minmax(0,1fr) }
  .detail__left{ position:static; max-width:252px; margin-inline:auto; text-align:center }
  .detail__left .facts{ text-align:left }

  .theatre__in{ grid-template-columns:minmax(0,1fr) }
  .theatre__side{ max-width:452px; margin-inline:auto; width:100% }

  .wfoot__grid{ grid-template-columns:1fr 1fr }
  .wfoot__grid > div:first-child{ grid-column:1 / -1 }
}

@media (max-width:620px){
  :root{ --mast:56px }
  .index__head{ display:none }
  .index__row{
    grid-template-columns:30px minmax(0,1fr) auto auto;
    gap:11px;
  }

  .bar{ position:static }
  .seg{ margin-left:0 }
  .find{ width:100%; min-width:0 }

  .grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) }
  .two{ grid-template-columns:1fr }
  .wfoot__grid{ grid-template-columns:1fr }
  .ep{ grid-template-columns:34px minmax(0,1fr) auto }
  .ep__go{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* ==========================================================================
   LIVE PREVIEWS + END CARD
   ========================================================================== */

.plate__live{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease;
  pointer-events:none;
}
.plate__live.is-on{ opacity:1 }
.plate__tag{
  position:absolute; left:10px; top:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px;
  background:rgba(18,16,19,.72); color:#F7F3EB;
  backdrop-filter:blur(4px);
  border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .45s ease;
}
.plate__tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--rust);
  animation:wpulse 1.6s ease-in-out infinite;
}
.plate__live.is-on + .plate__tag{ opacity:1 }
@keyframes wpulse{ 50%{ opacity:.25 } }

.stage__end{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:30px; text-align:center;
  background:rgba(10,9,11,.9);
  backdrop-filter:blur(10px);
}
.stage__end .kicker{ color:#8D8781 }
.stage__end > b{ font-family:var(--serif); font-size:22px; line-height:1.2; color:#F6F3EC }
.stage__end p{ margin:0 0 6px; font-size:13.5px; color:#B9B2A8; max-width:30ch }
.stage__end .btn--ghost{ color:#F2EFE8; border-color:rgba(255,255,255,.22) }
.stage__end .btn--ghost:hover{ background:rgba(255,255,255,.08) }

/* ==========================================================================
   LATE ADDITIONS
   ========================================================================== */

.synbody{
  font-size:15.5px; line-height:1.78; color:var(--ink-2);
  max-width:66ch; margin:-10px 0 30px;
}

.rail__keys{ border-top:1px solid rgba(255,255,255,.12); margin-top:14px }
@media (hover:none){ .rail__keys{ display:none } }

.wfoot__base a{ color:var(--ink-2) }
.wfoot__base a:hover{ color:var(--rust) }

.btn:disabled{ opacity:.55; cursor:progress }

@media (max-width:620px){
  /* the index on a phone: number, title (allowed to wrap), status */
  .index__row{ grid-template-columns:28px minmax(0,1fr) auto }
  .index__c--eps{ display:none }
  .index__t{ white-space:normal; font-size:16px }
  .index__g{ display:none }
}

.bar__tools{ display:flex; align-items:center; gap:10px; margin-left:auto }
.bar__tools .seg{ margin-left:0 }
@media (max-width:620px){
  .bar__tools{ width:100%; margin-left:0 }
  .bar__tools .find{ flex:1 }
}