/* ===========================================================
   HERE COMES THE NIGHT — teaser site
   Layout mirrors the Keynote: most slides are image(s) LEFT,
   text RIGHT, vertically centred. Variants per slide below.

   TYPE SIZING — read this before changing any size.
   Every display size on this site is taken literally from the
   deck (DECK - HERECOMESTHENIGHT_5.7.26B), which is a 1920x1080
   Keynote canvas set in Futura-Medium. Each line of caption
   carries its deck point size in markup as --s, e.g.
       <span class="ln" style="--s:50">AN ORDINARY DAD</span>
   and --u converts one deck point into pixels. So --s IS the
   Keynote number: to retype a line, read the size off the deck
   and put it in. Do not reintroduce a t-shirt scale — the deck
   has ~40 distinct sizes and no tiers.
   =========================================================== */
:root{
  --bg:#000000;
  --magenta:#FF00FF;
  --text:#FF00FF;           /* all text magenta, like the Keynote */
  --display:'Jost',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --track:0;                /* the deck sets Futura with no tracking */
  --measure:680px;

  /* Deck unit. --deck is the deck canvas width in points, so at a
     1920px viewport one deck point = one pixel (x --capfix).
     --capfix: we substitute Jost for Futura; Jost's cap height is
     0.700em against Futura's 0.7612em, so Jost must be set 8.74%
     larger for the capitals to match. All display type is caps. */
  --deck:1920;
  --capfix:1.0874;
  --u:calc(var(--capfix) * 100vw / var(--deck));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--magenta);text-decoration:none}

/* ---------- display type (mixed case, verbatim from Keynote) ---------- */
.display{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:var(--track);
  color:var(--magenta);
  line-height:1.2;          /* deck measures 1.19–1.21 across slides */
  text-transform:uppercase;
}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ===========================================================
   SCENE base — one viewport-height black stage
   =========================================================== */
.scene{
  position:relative;
  min-height:100svh;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(36px,9vw,150px);
  padding:8svh 5vw;
  overflow:hidden;
}

/* a still shown whole (letterboxed), optional in-frame timestamp */
.frame{position:relative;display:block;margin:0;width:100%}
.frame picture{display:block}
.frame img{width:100%;height:auto}
.tc{
  position:absolute;right:clamp(10px,1.2vw,20px);bottom:clamp(10px,1.2vw,20px);
  font-family:var(--mono);font-size:clamp(.65rem,1vw,.9rem);
  color:var(--magenta);letter-spacing:.05em;text-shadow:0 1px 6px rgba(0,0,0,.85);
}

/* media column (one or two stacked stills) */
.media{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,22px);width:100%}

/* caption lines — one line per <span class="ln" style="--s:NN">, where NN is
   the line's point size straight off the deck. --g adds a deck-point gap above
   a line (used where the Keynote drops a line well clear of the one above). */
.ln{
  display:block;
  white-space:nowrap;             /* line breaks come from the markup, not wrapping */
  font-size:calc(var(--s,50) * var(--u));
  margin-top:calc(var(--g,0) * var(--u));
}
.caption > * + *{margin-top:.5em}

/* ===========================================================
   SPLIT — image(s) left, text right  (default)
   SPLIT-R — text left, image right
   =========================================================== */
/* caption is sized by its own (nowrap) lines, so it must not be pinned to a
   percentage — the deck's widest caption is 40% of canvas and would wrap. */
.scene--split .media{flex:0 1 52%;max-width:52%;min-width:0}
.scene--split .caption{flex:0 0 auto;text-align:left}
.scene--split-r .media{flex:0 1 48%;max-width:48%;min-width:0}
.scene--split-r .caption{flex:0 0 auto;text-align:left}
/* keep stacked pairs as restrained bands with black breathing room */
.scene--split .media:has(.frame + .frame) .frame img,
.scene--split-r .media:has(.frame + .frame) .frame img{max-height:38svh;width:auto;margin:0 auto}

/* ===========================================================
   STACK — image(s) centred, caption below / between
   =========================================================== */
.scene--stack{flex-direction:column}
.scene--stack .media{max-width:min(1180px,100%);align-items:center}
.scene--stack .caption{max-width:1000px;text-align:center}

/* ===========================================================
   OVER — text over a full-bleed image (e.g. "are missing")
   =========================================================== */
.scene--over{justify-content:flex-start;align-items:center}
.scene--over .bg{position:absolute;inset:0;z-index:0}
.scene--over .bg img{width:100%;height:100%;object-fit:cover}
.scene--over::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 42%,rgba(0,0,0,.25) 100%)}
.scene--over .caption{position:relative;z-index:2;max-width:52%;text-align:left}

/* ===========================================================
   TEXT — near-black, text left (legacy)
   =========================================================== */
.scene--text{justify-content:flex-start}
.scene--text .caption{max-width:60%;text-align:left}
.scene--text .edge{position:absolute;top:0;bottom:0;width:9vw;opacity:.5}
.scene--text .edge img{height:100%;width:100%;object-fit:cover}
.scene--text .edge.l{left:0}
.scene--text .edge.r{right:0}

/* ===========================================================
   HERO / COVER — title over the (full, letterboxed) image
   =========================================================== */
.hero{position:relative;min-height:100svh;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.hero__media{width:100%}
.hero__media img{width:100%;height:auto;display:block}
.hero__text{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);z-index:2;width:max-content;max-width:92vw}
/* deck p1: title 99pt centred; tagline 41pt, right edge flush with the title */
.hero__title{
  font-size:calc(99 * var(--u));
  letter-spacing:0;line-height:1.2;text-align:center;
  text-transform:uppercase;color:var(--magenta);
  text-shadow:0 2px 26px rgba(0,0,0,.55);white-space:nowrap;
}
.hero__tag{
  /* deck advance title->tag is 114.8pt; the 99pt line-box (x1.2) is already
     118.8pt, so the tag pulls up slightly. */
  margin-top:calc(-4 * var(--u));text-align:right;
  font-size:calc(41 * var(--u));letter-spacing:0;
  text-shadow:0 1px 14px rgba(0,0,0,.65);
}
.scroll-prompt{
  position:absolute;left:50%;bottom:4svh;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.4em;color:var(--magenta);
  transition:opacity .5s ease;
}
.scroll-prompt .display{font-size:.8rem;letter-spacing:.35em;text-transform:uppercase}
.scroll-prompt .chev{width:26px;height:26px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
.scrolled .scroll-prompt{opacity:0;pointer-events:none}

/* ===========================================================
   TWIST — all black, centred
   =========================================================== */
/* deck p10: 99pt / 50pt, both centred. gap:0 because .scene's column gap would
   otherwise add 150px between the two lines; the deck's advance is 137 deck-pt,
   which is the 99pt line-box (x1.2) plus the 18pt --g below. */
.scene--twist{flex-direction:column;text-align:center;gap:0}
.twist__line{font-size:calc(99 * var(--u));line-height:1.2}
.twist__sub{font-size:calc(50 * var(--u));margin-top:calc(18 * var(--u))}

/* ===========================================================
   READING / WRITTEN SECTIONS
   =========================================================== */
.reading{background:#000;padding:clamp(60px,10vh,140px) 0 0}
.prose{max-width:var(--measure);margin:0 auto;padding:clamp(40px,7vh,90px) 24px}
.prose__head{font-family:var(--display);font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:.06em;margin-bottom:1.1em;text-transform:uppercase;color:var(--magenta)}
.prose p{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.7;color:var(--magenta);text-transform:uppercase}
.prose p + p{margin-top:1.2em}
.placeholder{opacity:.6;border-left:2px solid rgba(255,0,255,.4);padding-left:1em}

.script-link{text-align:center;padding:clamp(50px,9vh,120px) 24px}
.script-link a{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(1rem,2.4vw,1.5rem);border-bottom:1px solid rgba(255,0,255,.5);
  padding-bottom:.25em;transition:opacity .25s ease;
}
.script-link a:hover{opacity:.7}
[data-pending-link]{opacity:.55}

.foot{text-align:center;padding:clamp(60px,12vh,140px) 24px 14svh;border-top:1px solid rgba(255,255,255,.08)}
.foot__title{font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:.12em;text-transform:uppercase}
.foot__credit{margin-top:.8em;font-size:.8rem;letter-spacing:.15em;opacity:.4;text-transform:uppercase}
.foot__by{margin-top:1.6em;font-size:.7rem;letter-spacing:.2em;opacity:.3;text-transform:uppercase}
.foot__by a{color:inherit;border-bottom:1px solid rgba(255,0,255,.35)}

/* ===========================================================
   PASSWORD GATE (same-page unlock)
   =========================================================== */
body.gated{overflow:hidden}
#gate{position:fixed;inset:0;z-index:1000;background:#000;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  transition:opacity .6s ease}
#gate.closing{opacity:0;pointer-events:none}
.gate__box{width:min(440px,92vw)}
.gate__mark{font-size:clamp(1.3rem,5vw,2.1rem);letter-spacing:.18em;text-transform:uppercase;line-height:1.25}
.gate__tag{margin-top:1.1em;font-size:clamp(.8rem,2.4vw,1rem);letter-spacing:.12em}
#gateForm{margin-top:2.6em;display:flex;flex-direction:column;gap:14px;align-items:center}
#gateInput{width:100%;background:transparent;border:1.5px solid var(--magenta);color:var(--magenta);
  font-family:var(--display);font-size:1rem;letter-spacing:.1em;text-align:center;
  padding:.85em 1em;border-radius:2px;outline:none}
#gateInput::placeholder{color:rgba(255,0,255,.5);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}
#gateForm button{width:100%;background:var(--magenta);color:#000;border:none;font-family:var(--display);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;padding:.95em 1em;
  border-radius:2px;cursor:pointer;transition:opacity .2s ease}
#gateForm button:hover{opacity:.8}
.gate__err{margin-top:1.2em;font-size:.85rem;letter-spacing:.06em;color:var(--magenta);opacity:0;min-height:1.2em;transition:opacity .2s ease}
.gate__err.show{opacity:1}

/* ===========================================================
   MUTE TOGGLE
   =========================================================== */
.mute{
  position:fixed;left:clamp(16px,2.5vw,30px);bottom:clamp(16px,2.5vw,30px);
  width:clamp(44px,4vw,54px);height:clamp(44px,4vw,54px);border-radius:999px;
  background:rgba(0,0,0,.45);border:1.5px solid var(--magenta);color:var(--magenta);
  display:grid;place-items:center;cursor:pointer;z-index:50;
  backdrop-filter:blur(6px);transition:transform .2s ease,background .2s ease;
}
.mute:hover{transform:scale(1.06);background:rgba(255,0,255,.12)}
.mute .ic{width:55%;height:55%}
.mute .ic-off{display:none}
.mute.is-muted .ic-on{display:none}
.mute.is-muted .ic-off{display:block}

/* ===========================================================
   RESPONSIVE — stack split columns on phones
   =========================================================== */
@media (max-width:820px){
  /* The deck is a 16:9 landscape artefact, so deck-exact sizing can't survive a
     393px portrait screen — the widest caption is 761 deck-pt. Below 820px we
     keep the deck's *relative* sizes but rescale them against a narrower
     notional canvas, and let long lines wrap rather than overflow. */
  :root{--deck:700}
  .ln{white-space:normal}
  .scene{flex-direction:column;gap:clamp(20px,4vh,40px)}
  .scene--split .media,.scene--split .caption,
  .scene--split-r .media,.scene--split-r .caption{flex:1 1 auto;max-width:100%;width:100%}
  .scene--split .caption,.scene--split-r .caption{text-align:center}
  .scene--split-r .media{order:-1}            /* image above text on mobile */
  .scene--text{justify-content:center}
  .scene--text .caption{max-width:100%;text-align:center}
  .scene--text .edge{display:none}
  /* hero: fill the viewport on phones, let the title wrap */
  .hero__media{position:absolute;inset:0}
  .hero__media img{width:100%;height:100%;object-fit:cover}
  .hero__title{white-space:normal}
  .hero__tag{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .blink,.chev,.scroll-prompt .chev{animation:none}
  html{scroll-behavior:auto}
}