:root{
  /* palette sampled from the Mercury plate, 8/18 */
  --ink:#070B18;          /* ground — deepest sky */
  --oxblood:#19254C;      /* panel — lower dark */
  --oxblood-lift:#243361; /* panel lift — wing shadow */
  --bone:#FFFFFF;
  --bone-dim:#C6C7E7;     /* wing highlight */
  --blood:#BDC1F4;        /* link hover — lightning core */
  --gold:#9A9FCF;         /* accent — upper sky */
  --gold-deep:#777096;    /* accent deep — armor */

  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --ui:Arial,Helvetica,sans-serif;

  --measure:40rem;
  --pad:clamp(1.25rem,5vw,3rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--bone);text-decoration:none}
a:hover,a:focus-visible{color:var(--blood)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;      /* content rides up under the logo */
  padding:clamp(1.25rem,3vh,2.25rem) var(--pad) clamp(2.5rem,6vh,4rem);
  overflow:hidden;
  text-align:center;
}
.hero__bg{
  position:fixed;              /* stays put; content scrolls over it */
  inset:0;
  background-image:image-set(url("/assets/hero.jpg") 1x);
  background-image:url("/assets/hero.jpg");
  background-size:cover;
  background-position:46% 30%;
  z-index:0;
}
/* darkening so type holds at any size; heavier at the edges than the centre */
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(115% 80% at 50% 30%, rgba(0,0,0,0) 0%, rgba(5,8,20,.30) 55%, rgba(5,8,20,.72) 100%),
    linear-gradient(to bottom, rgba(5,8,20,.84) 0%, rgba(5,8,20,.32) 18%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 46%, rgba(5,8,20,.84) 74%, rgba(7,11,24,.98) 100%);
}
/* signature: the charge in the staff, breathing. one effect, slow, optional. */
.hero__charge{
  position:fixed;
  z-index:1;
  left:50%;
  top:30%;
  width:min(52vw,520px);
  aspect-ratio:1;
  transform:translate(-14%,-50%);
  pointer-events:none;
  background:radial-gradient(circle, rgba(190,205,255,.30) 0%, rgba(150,175,255,.10) 38%, rgba(0,0,0,0) 68%);
  animation:charge 7.5s ease-in-out infinite;
}
@keyframes charge{
  0%,100%{opacity:.35;transform:translate(-14%,-50%) scale(1)}
  50%    {opacity:.85;transform:translate(-14%,-50%) scale(1.10)}
}

.hero__mast{position:relative;z-index:2;width:100%;display:flex;justify-content:center;margin-bottom:clamp(.75rem,2vh,1.4rem)}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;gap:clamp(1.1rem,2.6vh,1.9rem)}

.logo{
  width:min(42vw,240px);
  height:auto;                 /* HTML height attr was stretching it */
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.85));
}

.canon{
  font-family:var(--display);
  font-weight:700;
  font-size:min(4vw,2.05rem);
  line-height:1.25;
  letter-spacing:.01em;
  margin:0;
  max-width:none;
  width:100%;
  white-space:nowrap;
  overflow:visible;
  /* outline so the line holds over any plate, light or dark */
  paint-order:stroke fill;
  -webkit-text-stroke:1.4px rgba(0,0,0,.95);
  text-shadow:
    0 0 10px rgba(0,0,0,.95),
    0 2px 20px rgba(0,0,0,.85);
}
.canon em{font-style:normal;color:#E2A84B}

.series{
  display:block;
  text-align:center;
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:min(4vw,2.05rem);
  letter-spacing:.02em;
  color:var(--bone);
  paint-order:stroke fill;
  -webkit-text-stroke:1.4px rgba(0,0,0,.95);
  text-shadow:
    0 0 10px rgba(0,0,0,.95),
    0 2px 20px rgba(0,0,0,.85);
  transition:color .18s ease, opacity .18s ease;
}
.yt-link{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  color:var(--bone-dim);
  transition:color .18s ease;
}
.yt-link span{margin-right:-.18em}
.yt-link:hover,.yt-link:focus-visible{color:var(--bone)}
.yt-link .yt-body{fill:#FF0000}
.yt-link .yt-play{fill:#FFFFFF}
.yt-link .yt-mark{width:1.5em;height:auto;flex:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}

.actions{display:flex;flex-direction:column;align-items:center;gap:.85rem;width:100%}

/* stacked episode buttons */
.playlist{
  list-style:none;margin:0;padding:0;
  width:min(100%,30rem);
  display:flex;flex-direction:column;gap:.5rem;
}
.ep-btn{
  display:flex;align-items:center;gap:.9rem;
  padding:.72rem 1rem;
  background:linear-gradient(to bottom, rgba(36,51,97,.90), rgba(25,37,76,.92));
  border:1px solid rgba(154,159,207,.70);
  border-radius:2px;
  backdrop-filter:blur(2px);
  box-shadow:0 6px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
  text-align:left;
}
.ep-btn:hover,.ep-btn:focus-visible{
  color:var(--bone);
  border-color:var(--gold);
  transform:translateX(2px);
  background:linear-gradient(to bottom, rgba(52,72,131,.95), rgba(33,48,97,.95));
}
.ep-btn svg{flex:none;fill:var(--gold)}
.ep-btn__no{
  flex:none;width:5.4rem;
  font-family:var(--display);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.ep-btn__title{
  flex:1;
  font-family:var(--display);
  font-size:1.02rem;line-height:1.2;
}
.ep-btn__meta{flex:none;font-size:.7rem;color:#8A8FB4;letter-spacing:.04em}
.ep-btn--book{width:min(100%,30rem)}
.ep-btn--all{margin-top:.35rem}

@media (max-width:520px){
  .ep-btn{gap:.6rem;padding:.65rem .8rem}
  .ep-btn__no{width:auto;min-width:4.2rem;font-size:.6rem;letter-spacing:.12em}
  .ep-btn__title{font-size:.94rem}
  .ep-btn__meta{display:none}
}

.watch{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(.95rem,2.4vw,1.05rem);
  letter-spacing:.04em;
  padding:.95rem 1.7rem;
  color:var(--bone);
  background:linear-gradient(to bottom, var(--oxblood-lift), var(--oxblood));
  border:1px solid rgba(154,159,207,.55);
  border-radius:2px;
  box-shadow:0 8px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.watch:hover,.watch:focus-visible{
  color:var(--bone);
  border-color:var(--gold);
  transform:translateY(-1px);
  box-shadow:0 10px 34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
.watch svg{flex:none;fill:var(--gold)}
.watch .ep{color:var(--bone-dim);font-weight:400}

.runtime{
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-dim);
  width:min(100%,30rem);
  margin:0 0 .35rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.45em;
  line-height:1.4;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.runtime--book{margin-top:1.1rem}



/* ---------- CONTEXTUAL REGISTER ----------
   One plate element. The body class selects which image and which
   palette. No crossfade, no stacked layers, nothing to fail open. */
body.ctx-warm{
  --ink:#000000;
  --oxblood:#2A0000;
  --oxblood-lift:#3A0505;
  --bone-dim:#C9C2C2;
  --blood:#990000;
  --gold:#E2A84B;
  --gold-deep:#B07526;
}
body.ctx-warm .hero__bg{
  background-image:url("/assets/feather.jpg");
  background-position:50% 50%;
}
body.ctx-warm .hero__bg::after{
  background:
    radial-gradient(80% 55% at 62% 34%, rgba(0,0,0,0) 0%, rgba(12,4,0,.30) 60%, rgba(12,4,0,.62) 100%),
    linear-gradient(to bottom, rgba(10,3,0,.78) 0%, rgba(10,3,0,.34) 14%, rgba(10,3,0,.06) 30%, rgba(10,3,0,.30) 48%, rgba(8,2,0,.88) 70%, rgba(0,0,0,.98) 100%);
}
body.ctx-warm .hero__charge{
  background:radial-gradient(circle, rgba(255,232,186,.26) 0%, rgba(255,214,140,.09) 40%, rgba(0,0,0,0) 70%);
}
body.ctx-warm .ep-btn{
  background:linear-gradient(to bottom, rgba(58,5,5,.92), rgba(42,0,0,.92));
  border-color:rgba(226,168,75,.62);
}
body.ctx-warm .ep-btn:hover,
body.ctx-warm .ep-btn:focus-visible{
  background:linear-gradient(to bottom, rgba(74,8,8,.95), rgba(52,2,2,.95));
  border-color:var(--gold);
}
.ep-btn.is-fronted{
  border-color:var(--gold);
  box-shadow:0 6px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(226,168,75,.18);
}
.mssm-note{margin:1.6rem 0 0;font-size:.68rem;letter-spacing:.06em;color:#6f6666}
.mssm-note button{
  font:inherit;color:#9a8f8f;background:none;border:none;
  border-bottom:1px solid rgba(255,255,255,.18);padding:0;cursor:pointer;
}
.mssm-note button:hover{color:var(--bone)}

/* ---------- BAND ---------- */
.band{
  position:relative;z-index:2;
  background:var(--oxblood);
  border-top:1px solid rgba(154,159,207,.22);
  border-bottom:1px solid rgba(154,159,207,.22);
  padding:clamp(3rem,9vw,5.5rem) var(--pad);
}
.band__inner{max-width:var(--measure);margin:0 auto}
.eyebrow{
  font-family:var(--display);
  font-size:.76rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.4rem;
}
.band p{
  font-family:var(--ui);
  font-size:clamp(1.12rem,2.6vw,1.32rem);
  line-height:1.6;
  color:var(--bone);
  margin:0 0 1.1rem;
}
.band p:last-of-type{margin-bottom:0}
.band .quiet{color:var(--bone-dim)}
.band strong{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ---------- FOOTER ---------- */
footer{
  position:relative;z-index:2;background:var(--ink);
  padding:2.5rem var(--pad) 3.5rem;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}
footer p{margin:.35rem 0;font-size:.78rem;color:#6E7397;letter-spacing:.04em}
footer a{color:#9a8f8f}

@media (prefers-reduced-motion: reduce){
  .hero__charge{animation:none;opacity:.5}
  *{transition:none !important}
}
@media (max-width:640px){
  .hero__bg{
    position:absolute;
    background-image:url("/assets/hero-sm.jpg");
    background-position:53% 26%;
  }
  body.ctx-warm .hero__bg{
    background-image:url("/assets/feather-sm.jpg");
    background-position:52% 48%;
  }
  .hero__charge{position:absolute}
}

/* ================================================================
   AURORA CLOCK — masthead, screen right of the logo
   Added 2026-08-19B. Engine in assets/aurora.js (arithmetic only).
   The mast is a 3-column grid: the left cell is DELIBERATELY EMPTY
   and reserved (producer, 8/19B). The logo stays optically centred
   on the page whether or not either flank is filled.
   ================================================================ */
.hero__mast{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;                /* vertical centre against the logo */
  justify-content:unset;
  gap:clamp(.9rem,2.5vw,2rem);
}
.mast__flank--left{grid-column:1}     /* reserved. do not fill without a ruling */
.logo{grid-column:2}
.aurora{grid-column:3;justify-self:start;text-align:left}

.aurora{
  font-family:var(--ui);
  line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.75);
  user-select:none;
}
.aurora__label{
  font-size:clamp(.6rem,1.4vw,.72rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#8A8FB4;                     /* Mercury blue — matches .ep-btn__meta */
  margin-bottom:.15rem;
}
.aurora__date{
  font-size:clamp(.66rem,1.5vw,.78rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.aurora__time{
  font-family:var(--display);
  font-size:clamp(1.35rem,3.4vw,1.95rem);
  font-variant-numeric:tabular-nums;
  color:var(--bone);
  margin:.08rem 0 .1rem;
}
.aurora__year{
  font-size:clamp(.6rem,1.4vw,.72rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--bone-dim);             /* was --gold (#9A9FCF): read darker
                                        than the date line on the Mercury
                                        plate. Matched 8/20. */
}
/* Feather plate keeps the amber accent — --gold is #E2A84B there and
   reads correctly against the warm ground. */
body.ctx-warm .aurora__year{color:var(--gold)}

/* Stack under the logo on narrow screens — beside it, the two crowd. */
@media (max-width:640px){
  .hero__mast{
    grid-template-columns:1fr;
    justify-items:center;
    gap:.6rem;
  }
  .mast__flank--left{display:none}
  .logo{grid-column:1}
  .aurora{grid-column:1;justify-self:center;text-align:center}
}

/* ================================================================
   THE MATRIX DECIDES THE PLATE — 2026-08-19C
   The page comes up without a plate. mssm.js scores the visitor,
   compares the companion profile against plateMercury and
   plateFeather, and pushes the winning object forward. The pause
   is the matrix analysing, not a fault.
   .mssm-ready is set by mssm.js in a finally block, so a script
   failure still reveals the default plate rather than none.
   ================================================================ */
.hero__bg{opacity:0;transition:opacity .45s ease}
html.mssm-ready .hero__bg{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero__bg{transition:none}
}