:root{
  /* matinee (light): faded one-sheet paper, night-blue ink */
  --page:#ebe2cd; --card:#f4ecdb; --raised:#fbf6ea; --inset:#ddd2b9;
  --ink:#0b1430; --ink2:#43507a; --ink3:#7a8099; --rule:rgba(11,20,48,.16);
  --marquee:#0b1430;
  --r900:#5a0e0a; --r700:#a41a12; --r500:#d42a1f; --r300:#ec7d72; --r100:#f8d2cc; --on-r:#fff4e0;
  --night:#0b1430; --night2:#121d42; --night3:#1a2854; --nightdeep:#070d24; --cream:#fff1d6; --cream2:#a7b3d6;
  --frame:#101a3a; --bulb:#ffe6ad;
  --step:0 1px 0 rgba(11,20,48,.06);
  --hero-top:#e3d8bf;
  --r-frame:14px; --r-card:10px; --r-ctl:6px; --r-ticket:4px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --page:#0b1430; --card:#121d42; --raised:#1a2854; --inset:#070d24;
  --ink:#fff1d6; --ink2:#a7b3d6; --ink3:#6f7ca6; --rule:rgba(255,241,214,.13);
  --marquee:#fff1d6;
  --r900:#7a120c; --r700:#b8221a; --r500:#e0372b; --r300:#f0867c; --r100:#3a1420; --on-r:#fff4e0;
  --frame:#060b1f;
  --step:inset 0 1px 0 rgba(255,241,214,.06);
  --hero-top:#070d24;
  color-scheme:dark}}
:root[data-theme=dark]{
  --page:#0b1430; --card:#121d42; --raised:#1a2854; --inset:#070d24;
  --ink:#fff1d6; --ink2:#a7b3d6; --ink3:#6f7ca6; --rule:rgba(255,241,214,.13);
  --marquee:#fff1d6;
  --r900:#7a120c; --r700:#b8221a; --r500:#e0372b; --r300:#f0867c; --r100:#3a1420; --on-r:#fff4e0;
  --frame:#060b1f;
  --step:inset 0 1px 0 rgba(255,241,214,.06);
  --hero-top:#070d24;
  color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:400 16px/1.55 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 44px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* motif: marquee bulbs as the focus ring */
:where(a,button,[tabindex]):focus-visible{outline:3px dotted var(--bulb);outline-offset:4px;border-radius:6px}
:root:not([data-theme=dark]) :where(a,button):focus-visible{outline-color:#b77b0b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) :where(a,button):focus-visible{outline-color:var(--bulb)}}

/* motif: a row of marquee bulbs as divider */
.bulbs{height:14px;background:radial-gradient(circle at 7px 7px,var(--bulb) 0 2.6px,rgba(255,214,140,.32) 3.8px,transparent 6px) 0 0/22px 14px repeat-x}
.bulbs.dim{opacity:.55}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--hero-top) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;gap:28px;height:60px}
.mark{display:inline-flex;align-items:baseline;gap:5px;text-decoration:none;font:400 19px/1 "Bowlby One SC",Impact,sans-serif;color:var(--marquee);letter-spacing:-.005em}
.mark i{font:400 17px/1 Yellowtail,cursive;color:var(--ink2);font-style:normal}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font:600 14px/1 Archivo;font-stretch:88%;color:var(--ink2);text-decoration:none;padding:10px 12px;border-radius:var(--r-ctl);transition:color .15s,background-color .15s}
@media (hover:hover){.nav a:hover{color:var(--ink);background:var(--raised)}}
.nav a.buy-link{color:var(--ink)}
.theme{display:flex;padding:3px;border-radius:999px;background:var(--raised);box-shadow:var(--step),0 0 0 1px var(--rule)}
.theme button{appearance:none;border:0;background:transparent;color:var(--ink2);font:600 13px/1 Archivo;font-stretch:85%;padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.theme button[aria-pressed=true]{background:var(--page);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.2)}
@media (hover:hover){.theme button:hover{color:var(--ink)}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(var(--hero-top),var(--page) 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 600px;column-gap:36px;min-height:calc(900px - 60px);padding-top:30px;padding-bottom:40px}
.poster{min-width:0;align-self:center;padding-bottom:20px}
.strap{margin:0;font:italic 800 27px/1.08 Archivo;font-stretch:78%;letter-spacing:.005em;color:var(--ink)}
h1{margin:12px 0 0;font:400 142px/.84 "Bowlby One SC",Impact,sans-serif;letter-spacing:-.012em;color:var(--marquee);text-transform:uppercase}
h1 > span{display:block;white-space:nowrap}
h1 .vs{display:inline;font:400 76px/1 Yellowtail,cursive;text-transform:none;letter-spacing:0;vertical-align:.34em;margin-left:.1em;color:var(--ink2)}
.billing{margin-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:700 14px/1.2 Archivo;font-stretch:70%;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2)}
.billing b{font-weight:900;font-size:21px;color:var(--ink);letter-spacing:.03em}
.billing i{font:italic 400 15px Archivo;text-transform:none;letter-spacing:0}
.lede{margin:14px 0 0;max-width:58ch;font-size:17px;line-height:1.55}
.dist{margin-top:12px;font:500 13px/1.4 Archivo;font-stretch:88%;color:var(--ink2);letter-spacing:.01em}
.dist .stars{color:var(--bulb);letter-spacing:.06em}
:root:not([data-theme=dark]) .dist .stars{color:#b77b0b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .dist .stars{color:var(--bulb)}}

.buy{margin-top:22px;display:flex;gap:12px;align-items:stretch}
.read{position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:0 22px;border-radius:var(--r-ctl);text-decoration:none;background:var(--r500);color:var(--on-r);box-shadow:0 2px 0 var(--r900);transition:background-color .15s,transform .1s}
.read b{font:800 18px/1 Archivo;font-stretch:80%;letter-spacing:.01em;white-space:nowrap}
.read small{font:500 12.5px/1.2 Archivo;font-stretch:90%;opacity:.88;white-space:nowrap}
.read:active{transform:scale(.97)}
@media (hover:hover){.read:hover{background:var(--r700)}}
.read::after{content:"";position:absolute;inset:-8px;border:4px dotted var(--bulb);border-radius:12px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,214,140,.55))}
:root:not([data-theme=dark]) .read::after{border-color:#c98a12}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .read::after{border-color:var(--bulb)}}
.read:focus-visible{outline:none}
.read:focus-visible::after,.read.lit::after{opacity:1}

.getbook{flex:0 0 auto;min-width:250px}
.tk{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:8px 30px 8px 15px;background:var(--raised);color:var(--ink);text-decoration:none;border-radius:var(--r-ticket);
  -webkit-mask:radial-gradient(circle 6px at 0 50%,transparent 5.5px,#000 6px) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 5.5px,#000 6px) right/51% 100% no-repeat;
          mask:radial-gradient(circle 6px at 0 50%,transparent 5.5px,#000 6px) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 5.5px,#000 6px) right/51% 100% no-repeat;
  box-shadow:var(--step);transition:background-color .15s}
.tk::after{content:"";position:absolute;right:24px;top:9px;bottom:9px;border-right:1.5px dashed var(--rule)}
.tk b{font:800 15px/1.1 Archivo;font-stretch:80%;letter-spacing:.01em}
.tk span{font:500 12.5px/1.3 Archivo;font-stretch:90%;color:var(--ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk em{font-style:normal;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tk .ar{position:absolute;right:7px;top:50%;translate:0 -50%;width:12px;height:12px;color:var(--ink3)}
@media (hover:hover){.tk:hover{background:var(--card)} .tk:hover .ar{color:var(--ink)}}
.tk:focus-visible{outline:none;background:var(--card)}
.tk:focus-visible b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink2)}

/* feature: the cover in a marquee frame */
.feature{position:relative;margin:0;align-self:center;padding-top:16px}
.marq{position:relative;width:420px;padding:24px;border-radius:var(--r-frame);background:
   radial-gradient(circle at 11px 11px,var(--bulb) 0 3.2px,rgba(255,214,140,.33) 4.5px,transparent 7px) 0 0/22px 22px,var(--frame);
   box-shadow:0 0 0 1px rgba(255,241,214,.08),0 34px 50px -26px rgba(0,0,0,.65)}
.screen{position:relative;aspect-ratio:2/3;border-radius:3px;overflow:hidden;background:#000;box-shadow:0 0 0 3px var(--frame),0 0 0 4px rgba(255,241,214,.25)}
.screen img{width:100%;height:100%;object-fit:cover}
.now{position:absolute;top:0;left:50%;translate:-50% -50%;z-index:2;background:var(--frame);color:var(--cream);padding:6px 15px 7px;border-radius:999px;font:800 12px/1 Archivo;font-stretch:72%;letter-spacing:.15em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(255,241,214,.2);white-space:nowrap}
.ledge{width:460px;height:24px;margin:-6px 0 0 -18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.38),transparent)}

/* the official-account card: lower-right third of the cover, overhanging; the face stays clear */
.hang{position:absolute;left:380px;top:250px;width:236px;z-index:4}
.official{position:relative;width:100%;z-index:3;background:#efe6cf;color:#141a2c;border-radius:2px;padding:16px 16px 14px;rotate:-2deg;transform-origin:30% 80%;
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 30px -10px rgba(0,0,0,.6);
  background-image:linear-gradient(rgba(20,26,44,.035) 1px,transparent 1px);background-size:100% 4px;
  }
/* drag affordances, captions and the trigger live in moment/one-sheet.css */
.caps,.trigger{display:none}
.official .k{font:700 10.5px/1 Archivo;font-stretch:72%;letter-spacing:.17em;text-transform:uppercase;border-top:2px solid #141a2c;border-bottom:1px solid #141a2c;padding:5px 0;display:flex;justify-content:space-between}
.official h2{margin:12px 0 0;font:400 24px/.96 "Bowlby One SC",Impact,sans-serif;letter-spacing:-.01em;color:#141a2c}
.official .from{margin-top:7px;font:700 12px/1.25 Archivo;font-stretch:76%;letter-spacing:.02em;color:#2a3150}
.official p{margin:9px 0 0;font:400 13.5px/1.45 Archivo;color:#2a3150}
.official q{display:block;margin:9px 0 30px;font:italic 800 18px/1.1 Archivo;font-stretch:80%;quotes:"“" "”"}
.official .fine{display:none;font:500 10px/1.35 Archivo;font-stretch:85%;letter-spacing:.03em;color:#5b6070;border-top:1px solid rgba(20,26,44,.35)}

:root:not([data-theme=dark]) .official{background-color:#fff7e6;box-shadow:0 2px 8px rgba(20,30,70,.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .official{background-color:#efe6cf;box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 30px -10px rgba(0,0,0,.6)}}
/* captions that land after the card slides off */

/* ---------- the programme (marquee board) ---------- */
.programme{background:var(--nightdeep);color:var(--cream);padding:12px 0}
:root:not([data-theme=dark]) .programme{background:var(--night)}
.programme .board{display:grid;grid-template-columns:1.3fr 1fr 1fr;padding:6px 0}
.programme a{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;padding:20px 26px;text-decoration:none;border-radius:var(--r-card);transition:background-color .15s}
.programme a + a{box-shadow:-1px 0 0 rgba(255,241,214,.13)}
@media (hover:hover){.programme a:hover{background:var(--night3)}}
.programme .when{grid-row:1/3;font:600 14px/1.25 Archivo;font-stretch:85%;color:var(--cream2);width:84px}
.programme b{font:400 30px/1 "Bowlby One SC",Impact,sans-serif;letter-spacing:-.005em}
.programme b i{font:400 22px Yellowtail,cursive;font-style:normal;color:var(--cream2)}
.programme small{font:italic 500 15px/1.3 Archivo;font-stretch:90%;color:var(--cream2);margin-top:6px}

/* ---------- section scaffolding ---------- */
section.s{padding:120px 0}
.kick{font:600 15px/1.2 Archivo;font-stretch:88%;color:var(--ink2);margin:0 0 12px}
.kick.cap{font:700 13px/1 Archivo;font-stretch:70%;letter-spacing:.16em;text-transform:uppercase}
.sc{text-transform:none!important;letter-spacing:.01em!important;font:600 15px/1.2 Archivo!important;font-stretch:88%!important;color:var(--ink2)}
h1,h2,h3,.h2{text-wrap:balance}
.h2{margin:0;font:400 64px/.9 "Bowlby One SC",Impact,sans-serif;letter-spacing:-.012em;color:var(--marquee)}
.h2.m{font-size:48px}

/* story they told you / what really happened */
.story{display:grid;grid-template-columns:4fr 7fr;gap:72px;align-items:start}
.told{position:sticky;top:96px;padding:28px 28px 26px;background:var(--card);border-radius:var(--r-card);box-shadow:var(--step)}
.told .h2{font-size:40px}
.told p{margin:16px 0 0;color:var(--ink2);font-size:16px}
.told p em{color:var(--ink)}
.told .stamp{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);font:600 13px/1.4 Archivo;font-stretch:85%;color:var(--ink3)}
.really .h2{font-size:84px}
.really .syn{margin-top:28px;columns:2;column-gap:40px;font-size:18px;line-height:1.6}
.really .syn p{margin:0 0 16px;break-inside:avoid}
.really .syn p:first-child::first-line{font-weight:700}
.letter{margin:48px 0 0;padding:40px 0 0;border-top:1px solid var(--rule);position:relative}
.letter blockquote{margin:0;font:italic 700 32px/1.18 Archivo;font-stretch:80%;letter-spacing:-.005em;color:var(--ink);max-width:30ch}
.letter blockquote span{color:var(--ink2)}
.letter .q2{margin:22px 0 0;font:italic 500 20px/1.45 Archivo;font-stretch:90%;color:var(--ink2);max-width:46ch}
.letter .sig{margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.letter .sig p{margin:0;font:500 16px/1.4 Archivo;color:var(--ink2);max-width:36ch}
.letter .sig b{font:400 30px/1 "Bowlby One SC";color:var(--ink);letter-spacing:.01em}
.letter .ps{margin-top:14px;font:italic 800 18px/1.2 Archivo;font-stretch:80%;color:var(--ink)}

/* persons of interest (lobby cards) */
.cast-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}
.cast-head p{margin:0;max-width:44ch;color:var(--ink2);font-size:17px}
.cast{--h:calc((min(100vw,1440px) - 128px) / 3 * 11 / 14);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lobby{margin:0;display:grid;grid-template-columns:calc((var(--h) - 24px) * .75) minmax(0,1fr);height:var(--h);background:#efe6cf;color:#141a2c;border-radius:4px;padding:12px;gap:16px;box-shadow:0 18px 30px -18px rgba(0,0,0,.55)}
:root:not([data-theme=dark]) .lobby{background:#fff7e6;box-shadow:0 2px 8px rgba(20,30,70,.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .lobby{background:#efe6cf;box-shadow:0 18px 30px -18px rgba(0,0,0,.55)}}
.lobby.wide{grid-column:span 2}
.lobby .ph{height:100%;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:#0b1430}
.lobby img{width:100%;height:100%;object-fit:cover}
.lobby figcaption{display:flex;flex-direction:column;min-width:0;padding:2px 2px 4px}
.lobby .strip{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;border-top:2px solid #141a2c;border-bottom:1px solid #141a2c;padding:5px 0;font:700 10.5px/1 "Bowlby One SC";letter-spacing:.01em;color:#141a2c}
.lobby .strip i{font:400 11px Yellowtail,cursive;font-style:normal}
.lobby .strip span:last-child{font:600 11px/1 Archivo;font-stretch:85%;font-variant-numeric:tabular-nums}
.lobby h3{margin:14px 0 0;font:400 24px/.95 "Bowlby One SC";letter-spacing:-.005em;color:#141a2c}
.lobby.wide h3{font-size:40px}
.lobby .role{margin-top:7px;font:700 13.5px/1.3 Archivo;font-stretch:80%;color:#43507a}
.lobby p{margin:auto 0 0;padding-top:10px;font:italic 600 15px/1.35 Archivo;font-stretch:88%;color:#2a3150}
.lobby.wide p{margin:24px 0 0;font-size:22px;line-height:1.25;font-weight:700;font-stretch:80%}

/* free preview */
.preview{background:var(--card)}
.pv{display:grid;grid-template-columns:7fr 4fr;gap:80px;align-items:start}
.reader{position:relative}
.reader .ch{margin:26px 0 0;font:400 34px/1 "Bowlby One SC";color:var(--marquee)}
.reader .ch small{display:block;font:600 15px/1 Archivo;font-stretch:88%;color:var(--ink2);margin-bottom:10px}
.text{position:relative;margin-top:24px;max-height:560px;overflow:hidden;font-size:19px;line-height:1.68;max-width:62ch}
.text p{margin:0 0 18px}
.text p:first-child::first-letter{float:left;font:400 74px/.8 "Bowlby One SC";margin:6px 10px 0 0;color:var(--marquee)}
.text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(transparent,var(--card))}
.reader .go{display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
.reader .go .note{font:500 14px/1.4 Archivo;font-stretch:90%;color:var(--ink2)}
.reels{position:sticky;top:96px;background:var(--raised);border-radius:var(--r-card);box-shadow:var(--step);overflow:hidden}
.reels h3{margin:0;padding:20px 22px 14px;font:800 17px/1.2 Archivo;font-stretch:80%}
.reels h3 small{display:block;font:500 13px/1.4 Archivo;font-stretch:92%;color:var(--ink2);margin-top:3px}
.reels ol{list-style:none;margin:0;padding:0 0 8px}
.reels li a{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;padding:11px 22px;text-decoration:none;box-shadow:inset 0 1px 0 var(--rule);transition:background-color .15s}
@media (hover:hover){.reels li a:hover{background:var(--card)}}
.reels .n{font:600 13px/1 Archivo;font-stretch:85%;color:var(--ink3);font-variant-numeric:tabular-nums}
.reels .t{font:600 15px/1.3 Archivo;font-stretch:88%}
.reels .r{font:600 12px/1 Archivo;font-stretch:85%;color:var(--ink3)}
.reels li.on a{background:var(--card)}
.reels li.on .r{color:var(--ink)}

/* from the audience */
.aud{display:grid;grid-template-columns:7fr 4fr;gap:64px;align-items:end;margin-top:44px}
.rev{margin:0}
.rev blockquote{margin:0}
.rev.big blockquote{font:italic 800 52px/1.04 Archivo;font-stretch:76%;letter-spacing:-.01em;color:var(--marquee)}
.rev.big .more{margin:22px 0 0;max-width:60ch;font-size:17px;color:var(--ink2)}
.rev.small{background:var(--card);border-radius:var(--r-card);padding:28px;box-shadow:var(--step)}
.rev.small blockquote{font:italic 700 28px/1.15 Archivo;font-stretch:80%}
.rev figcaption{margin-top:18px;font:600 14px/1.4 Archivo;font-stretch:88%;color:var(--ink2)}
.rev figcaption b{color:var(--ink);font-weight:800}
.rating{margin-top:28px;font:600 14px/1.4 Archivo;font-stretch:88%;color:var(--ink2)}
.rating .stars{color:var(--ink);letter-spacing:.08em;margin-right:6px}

/* coming attraction */
.coming{padding:40px 0 120px}
.slate{position:relative;border-radius:18px;padding:30px;background:radial-gradient(circle at 11px 11px,var(--bulb) 0 3.2px,rgba(255,214,140,.33) 4.5px,transparent 7px) 0 0/22px 22px,var(--frame);box-shadow:0 30px 50px -28px rgba(0,0,0,.6)}
.slate-in{background:linear-gradient(160deg,#122046,#070d24 70%);border-radius:6px;padding:64px 64px 56px;color:var(--cream);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;box-shadow:0 0 0 1px rgba(255,241,214,.18)}
.slate .kick{color:var(--cream2)}
.slate .pre{font:400 26px/1 "Bowlby One SC";letter-spacing:-.005em;color:var(--cream2)}
.slate .pre i{font:400 22px Yellowtail,cursive;font-style:normal}
.slate h2{margin:8px 0 0;font:400 132px/.84 "Bowlby One SC",Impact,sans-serif;letter-spacing:-.015em}
.slate .tag{margin:18px 0 0;font:italic 800 30px/1.1 Archivo;font-stretch:78%}
.slate p.line{margin:18px 0 0;max-width:56ch;font-size:18px;color:var(--cream2)}
.slate .soon{text-align:right;font:500 15px/1.4 Archivo;font-stretch:88%;color:var(--cream2)}
.slate .soon b{display:block;font:400 28px/1 "Bowlby One SC";letter-spacing:0;color:var(--cream);text-transform:none;margin-bottom:6px}

/* directed by */
.dir{display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:center}
.portrait{margin:0;position:relative}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);box-shadow:0 30px 50px -30px rgba(0,0,0,.55)}
.portrait figcaption{margin-top:12px;font:500 13px/1.4 Archivo;font-stretch:88%;color:var(--ink3)}
.dir .by{font:400 34px/1 Yellowtail,cursive;color:var(--ink2)}
.dir h2{margin:4px 0 0;font:400 72px/.88 "Bowlby One SC",Impact,sans-serif;letter-spacing:-.012em;color:var(--marquee)}
.dir .bio{margin-top:28px;max-width:60ch;font-size:18px;line-height:1.6}
.dir .bio p{margin:0 0 16px}
.dir .bio .pull{font:italic 700 26px/1.2 Archivo;font-stretch:80%;color:var(--ink)}
.dir .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn-s{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:var(--r-ctl);background:var(--raised);color:var(--ink);text-decoration:none;font:700 15px/1 Archivo;font-stretch:84%;box-shadow:var(--step),0 0 0 1px var(--rule);transition:background-color .15s,transform .1s}
.btn-s:active{transform:scale(.97)}
@media (hover:hover){.btn-s:hover{background:var(--card)}}
.btn-s small{font-weight:500;color:var(--ink2)}
.btn-s svg{width:12px;height:12px;color:var(--ink3)}

/* ticket booth */
.booth{background:var(--inset)}
.booth-head{display:flex;align-items:end;justify-content:space-between;gap:40px}
.booth-head p{margin:0;max-width:40ch;color:var(--ink2);font-size:17px}
.booth .row{margin-top:40px;display:grid;grid-template-columns:1.15fr repeat(4,minmax(0,1fr));gap:12px}
.booth .read{min-height:150px;padding:0 26px;justify-content:center}
.booth .read b{font-size:24px}
.booth .read small{font-size:14px}
.booth .tk{min-height:150px;padding:20px 40px 20px 22px;justify-content:space-between}
.booth .tk::after{right:32px;top:14px;bottom:14px}
.booth .tk .fmt{font:400 26px/1 "Bowlby One SC";letter-spacing:-.005em}
.booth .tk span{font-size:14px;white-space:normal}
.booth .tk .adm{font:600 12.5px/1 Archivo;font-stretch:85%;color:var(--ink3);margin:0}
.booth .tk .ar{right:12px;width:14px;height:14px}
.isbn{margin-top:18px;font:500 13px/1.4 Archivo;font-stretch:88%;color:var(--ink2)}
.isbn span{font-variant-numeric:tabular-nums}

/* footer */
footer{background:var(--nightdeep);color:var(--cream2);padding:0 0 44px}
:root:not([data-theme=dark]) footer{background:var(--night)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-top:44px}
footer .mark{color:var(--cream);font-size:28px}
footer .mark i{color:var(--cream2);font-size:24px}
footer p{margin:12px 0 0;font-size:14px;line-height:1.55;max-width:42ch}
footer h4{margin:0 0 12px;font:700 15px/1 Archivo;font-stretch:85%;color:var(--cream)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 8px;font-size:14.5px}
footer a{text-decoration:none;color:var(--cream2)}
@media (hover:hover){footer a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px}}
footer .age{display:inline-block;margin-left:6px;border:1px solid rgba(255,241,214,.4);border-radius:999px;padding:1px 7px;font:700 11px/1.3 Archivo;color:var(--cream)}
footer .legal{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(255,241,214,.12);font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;row-gap:56px}
  .feature{justify-self:center;margin-right:216px}
  h1{font-size:132px}
  .story,.pv,.aud,.dir{grid-template-columns:1fr;gap:48px}
  .told,.reels{position:static}
  .booth .row{grid-template-columns:1fr 1fr}
  .booth .read{grid-column:1/-1;min-height:90px}
  .cast{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cast{--h:calc((100vw - 108px) / 2 * 11 / 14)}
  .lobby.wide{grid-column:span 2}
  .dir .portrait{max-width:420px}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .top .wrap{height:54px;gap:8px}
  .nav{display:none}
  .theme{margin-left:auto}
  .theme button{padding:8px 10px;font-size:12.5px}
  .mark{font-size:16px}.mark i{font-size:15px}
  .hero .wrap{padding-top:18px;padding-bottom:28px;row-gap:0;display:flex;flex-direction:column}
  .poster{display:contents}
  .strap{order:1;font-size:19px}
  h1{order:2;font-size:66px;margin-top:8px}
  h1 .vs{font-size:36px}
  .feature{order:3;margin:26px auto 0;align-self:center;justify-self:auto}
  .marq{width:282px;padding:17px;margin:0 auto}
  .ledge{width:300px}
  .hang{position:relative;left:auto;top:auto;width:min(100%,330px);margin:24px auto 0}
  .official{padding:12px 14px 10px;rotate:-1deg}
  .official .k{font-size:9px;letter-spacing:.12em;padding:4px 0}
  .official h2{font-size:19.5px;margin-top:8px}
  .official .from{font-size:10.5px}
  .official p{display:none}
  .official q{font-size:14px;margin-top:7px}
  .official .fine{display:none}
  .official q{margin-bottom:26px}
  .billing{order:5;margin-top:30px}
  .dist{order:5;margin-top:12px}.billing b{font-size:18px}
  .lede{order:6;font-size:16px}
  .buy{order:4;flex-direction:column;margin-top:44px}
  .read{min-height:60px}
  .tk{min-height:60px}
  .programme .board{grid-template-columns:1fr;padding:0}
  .programme a{padding:16px 6px}
  .programme a + a{box-shadow:0 -1px 0 rgba(255,241,214,.13)}
  .programme b{font-size:24px}
  section.s{padding:72px 0}
  .h2{font-size:44px}.h2.m{font-size:38px}
  .really .h2{font-size:50px}
  .really .syn{columns:1;font-size:17px}
  .letter blockquote{font-size:25px}
  .cast-head{flex-direction:column;align-items:start;gap:14px}
  .cast{grid-template-columns:1fr;gap:14px}
  .lobby,.lobby.wide{grid-column:auto;height:auto;padding:10px;gap:12px;grid-template-columns:132px 1fr}
  .lobby .ph{height:auto}
  .lobby.wide h3{font-size:24px}.lobby.wide p{font-size:15px;line-height:1.35;font-weight:600;font-stretch:88%}
  .text{font-size:17.5px;max-height:520px}
  .rev.big blockquote{font-size:34px}
  .coming{padding:8px 0 72px}
  .slate{padding:17px;border-radius:14px}
  .slate-in{grid-template-columns:1fr;padding:34px 22px 30px;gap:24px}
  .slate h2{font-size:min(58px,11.4vw)}
  .slate .tag{font-size:23px}
  .slate .soon{text-align:left}
  .slate .soon b{font-size:32px}
  .dir h2{font-size:46px}
  .booth-head{flex-direction:column;align-items:start;gap:14px}
  .booth .row{grid-template-columns:1fr 1fr;gap:10px}
  .booth .tk{min-height:118px;padding:16px 32px 16px 18px}
  .booth .tk .fmt{font-size:20px}
  footer .wrap{grid-template-columns:1fr;gap:28px}
}
@media (max-width:370px){h1{font-size:58px}}

/* ---------- site finish ---------- */
main section[tabindex="-1"]:focus,main [tabindex="-1"]:focus{outline:none}
.dir h2 a{text-decoration:none}
@media (hover:hover){.dir h2 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}}
.alt{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;font:500 14px/1.4 Archivo;font-stretch:90%;color:var(--ink2)}
.alt a{color:var(--ink);font-weight:700;text-underline-offset:3px;text-decoration-color:var(--rule)}
@media (hover:hover){.alt a:hover{text-decoration-color:currentColor}}
.isbn a{color:inherit;text-underline-offset:3px}
.lobby .strip span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.lobby h3,.lobby.wide h3{font-size:min(24px,5.9vw)}}
@media (max-width:370px){.lobby,.lobby.wide{grid-template-columns:104px 1fr}}