/* ============================================================
   KELLY ELEXCIA MUSABANDESU
   The Bite: Part One
   ============================================================ */

:root{
  --ink:#03060B;
  --night:#070D15;
  --deep:#0C1522;
  --steel:#18232F;

  /* text scale, light to dim. every step reads on its own panel */
  --moon:#F0F5FA;
  --text:#DCE6EF;
  --mist:#B3C3D2;
  --faint:#93A5B6;

  --blood:#8E1B1B;
  --ember:#C0392F;
  --parchment:#E7DCC6;

  --display:"Cormorant Garamond", Georgia, serif;
  --ui:"Jost", "Helvetica Neue", Arial, sans-serif;
  --hand:"Caveat", cursive;

  --wrap:1180px;
  --gutter:clamp(20px, 5vw, 64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --acc-ease:cubic-bezier(.16,.84,.28,1);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ui);
  font-weight:300;
  font-size:clamp(16px,1.1vw,18px);
  line-height:1.8;
  overflow-x:hidden;
}

body.is-loading{ overflow:hidden; height:100vh; }

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--blood); color:#fff; }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* every content column sits above the fog layers */
.wrap{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- type ---------- */

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.06;
  letter-spacing:.01em;
  margin:0 0 .5em;
  color:var(--moon);
}

.lede{
  color:var(--mist);
  font-size:clamp(1.02rem,1.25vw,1.15rem);
  max-width:54ch;
  margin:0 0 3.5rem;
}

.kicker{
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 1.4rem;
}

p{ max-width:64ch; }

.note{
  font-size:.88rem;
  line-height:1.7;
  color:var(--faint);
  border-left:2px solid rgba(179,195,210,.3);
  padding-left:1.1rem;
  margin-top:2.5rem;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.2em;
  color:var(--moon);
  padding:1.05em 2.1em;
  border:1px solid rgba(240,245,250,.4);
  text-shadow:none;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn--solid{ background:var(--moon); color:var(--ink); border-color:var(--moon); }
.btn--solid:hover{ background:transparent; color:var(--moon); }
.btn--ghost{ background:rgba(3,6,11,.35); }
.btn--ghost:hover{ border-color:var(--moon); background:rgba(240,245,250,.1); }

/* ---------- grain and cursor ---------- */

.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:60;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

.moonlight{
  position:fixed; top:0; left:0;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  pointer-events:none; z-index:5;
  opacity:0;
  background:radial-gradient(circle,rgba(190,214,235,.1) 0%,rgba(190,214,235,.035) 42%,transparent 68%);
  transition:opacity .8s var(--ease);
  will-change:transform;
}
.moonlight.is-on{ opacity:1; }

/* ---------- loader ---------- */

.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--ink);
  overflow:hidden;
}
.loader__art{
  position:absolute; inset:0;
  background:url("../images/keyart-moon.webp") center/cover no-repeat;
  opacity:0;
  transform:scale(1.12);
  will-change:transform,opacity;
}

/* four smoke plates at different scales, blurs and directions,
   so the mist rolls and billows instead of sliding as one sheet */
.loader__smoke{
  position:absolute;
  background:url("../images/fog.webp") center/cover no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.loader__smoke--a{ inset:-30%; filter:blur(2px) contrast(1.15); }
.loader__smoke--b{ inset:-45%; filter:blur(9px) brightness(1.1); }
.loader__smoke--c{ inset:-20% -60%; filter:blur(16px) brightness(1.25) contrast(.9); }
.loader__smoke--d{ inset:auto -50% -45% -50%; height:95%; filter:blur(5px) contrast(1.2); }

.loader__floor{
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to top,rgba(3,6,11,.9),transparent);
  pointer-events:none;
}
.loader__veil{
  position:absolute; inset:0;
  background:var(--ink);
  transform-origin:bottom;
}
.loader__name{
  position:absolute; left:0; right:0; bottom:clamp(2rem,7vh,4.5rem);
  margin:0; max-width:none;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(.82rem,1.5vw,1.05rem);
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--moon);
  text-shadow:0 2px 26px rgba(3,6,11,.95);
  opacity:0;
}

/* ---------- nav ---------- */

.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.4rem var(--gutter);
  background:linear-gradient(to bottom,rgba(3,6,11,.72),transparent);
  transition:background .6s var(--ease), padding .6s var(--ease);
}
.nav.is-stuck{
  background:rgba(3,6,11,.86);
  backdrop-filter:blur(14px);
  padding-block:.95rem;
}
.nav__mark{
  font-family:var(--display);
  font-size:clamp(.95rem,1.3vw,1.15rem);
  letter-spacing:.2em;
  color:var(--moon);
  white-space:nowrap;
  text-shadow:0 1px 14px rgba(3,6,11,.9);
}
.nav__mark-short{ display:none; }

.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{
  font-size:.78rem;
  letter-spacing:.16em;
  color:var(--mist);
  position:relative;
  padding-block:.4rem;
  text-shadow:0 1px 12px rgba(3,6,11,.9);
  transition:color .45s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--moon);
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav__links a:hover{ color:var(--moon); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--moon); }

.nav__tools{ display:flex; align-items:center; gap:1rem; }

.sound{
  display:flex; align-items:flex-end; gap:3px;
  height:18px; width:22px;
  background:none; border:0; padding:0; cursor:pointer;
}
.sound[hidden]{ display:none; }
.sound__bar{ width:2px; background:var(--mist); height:5px; transition:height .4s var(--ease), background .4s var(--ease); }
.sound[aria-pressed="true"] .sound__bar{ background:var(--moon); }
.sound[aria-pressed="true"] .sound__bar:nth-child(1){ animation:eq 1.1s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bar:nth-child(2){ animation:eq 1.1s ease-in-out .2s infinite; }
.sound[aria-pressed="true"] .sound__bar:nth-child(3){ animation:eq 1.1s ease-in-out .4s infinite; }
@keyframes eq{ 0%,100%{height:5px} 50%{height:16px} }

.burger{
  display:none;
  width:26px; height:16px;
  background:none; border:0; padding:0; cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:0; width:100%; height:1px;
  background:var(--moon);
  transition:transform .5s var(--ease);
}
.burger span:nth-child(1){ top:3px; }
.burger span:nth-child(2){ bottom:3px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:-8% -4%;
  background:url("../images/hallway.webp") center 40%/cover no-repeat;
  filter:brightness(.56) contrast(1.05) saturate(.85);
  z-index:-4;
  will-change:transform;
}
.hero__mist{
  position:absolute; inset:0;
  background:url("../images/fog.webp") center/cover no-repeat;
  mix-blend-mode:screen;
  opacity:.12;
  z-index:-3;
  animation:drift 46s linear infinite alternate;
}
@keyframes drift{ from{transform:translate3d(-3%,0,0) scale(1.1)} to{transform:translate3d(3%,-2%,0) scale(1.18)} }

/* the banner now leads with the book itself, not a character */
.hero__cover{
  position:relative;
  margin:0;
  justify-self:center;
  width:min(100%,340px);
  will-change:transform;
}
.hero__cover img{
  position:relative; z-index:2;
  width:100%;
  border:1px solid rgba(231,220,198,.2);
  box-shadow:
    0 60px 110px -45px rgba(0,0,0,.95),
    0 0 90px -35px rgba(192,57,47,.55);
  animation:coverFloat 9s ease-in-out infinite alternate;
}
.hero__cover-glow{
  position:absolute; inset:-20%;
  z-index:1;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%,rgba(192,57,47,.3) 0%,rgba(142,27,27,.14) 42%,transparent 70%);
  filter:blur(22px);
  pointer-events:none;
}
@keyframes coverFloat{ from{transform:translateY(-8px)} to{transform:translateY(8px)} }

/* general darkening */
.hero__vignette{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 22%,rgba(3,6,11,.72) 80%),
    linear-gradient(to bottom,rgba(3,6,11,.82) 0%,rgba(3,6,11,.2) 26%,rgba(3,6,11,.35) 62%,var(--ink) 99%);
}

/* dedicated reading scrim behind the copy column only, so the
   banner text always has a solid dark field under it */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    100deg,
    rgba(3,6,11,.95) 0%,
    rgba(3,6,11,.9) 30%,
    rgba(3,6,11,.72) 52%,
    rgba(3,6,11,.6) 72%,
    rgba(3,6,11,.72) 100%
  );
}

.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:18vh 12vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.hero__copy{
  position:relative;
  text-shadow:0 2px 30px rgba(3,6,11,.95), 0 1px 6px rgba(3,6,11,.8);
}
.hero__copy .kicker{ color:#C6D5E2; }
.hero__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.6rem,13vw,10rem);
  line-height:.9;
  letter-spacing:.02em;
  color:var(--moon);
  margin:0;
  max-width:none;
  overflow:hidden;
}
.hero__title span{ display:inline-block; }
.hero__part{
  font-family:var(--display);
  font-size:clamp(.98rem,1.9vw,1.35rem);
  letter-spacing:.26em;
  color:#CBDAE7;
  margin:1.1rem 0 2.1rem;
  max-width:none;
}
.hero__hook{
  font-size:clamp(1.05rem,1.45vw,1.22rem);
  line-height:1.7;
  max-width:36ch;
  color:#EAF1F8;
  margin:0 0 2.8rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; }

.scroll-hint{
  position:absolute; bottom:3.2rem; left:50%;
  transform:translateX(-50%);
  width:1px; height:70px;
  background:linear-gradient(to bottom,transparent,rgba(240,245,250,.35));
  overflow:hidden;
  z-index:2;
}
.scroll-hint span{
  position:absolute; top:0; left:0;
  width:1px; height:26px;
  background:var(--moon);
  animation:hint 2.6s var(--ease) infinite;
}
@keyframes hint{ 0%{transform:translateY(-30px);opacity:0} 40%{opacity:1} 100%{transform:translateY(76px);opacity:0} }

/* ---------- fog transitions ---------- */

.fog{
  position:absolute; left:-6%; right:-6%;
  height:34vh;
  pointer-events:none;
  background:url("../images/fog.webp") center/cover no-repeat;
  mix-blend-mode:screen;
  opacity:.11;
  z-index:1;
}
.fog--top{ top:-14vh; }
.fog--bottom{ bottom:-14vh; transform:scaleY(-1); }

/* ---------- book ---------- */

.book{
  position:relative;
  padding:20vh 0 18vh;
  background:linear-gradient(to bottom,var(--ink) 0%,#0A1018 42%,var(--deep) 100%);
}
.book__inner{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.book__cover{ perspective:1200px; will-change:transform; }
.book__cover img{
  width:100%;
  box-shadow:0 60px 110px -40px rgba(0,0,0,.95), 0 0 70px -30px rgba(142,27,27,.45);
  transform-style:preserve-3d;
}
.book__copy p{ color:var(--text); }
.book__copy p + p{ margin-top:1.3rem; }
.meta{
  list-style:none; margin:2.6rem 0; padding:0;
  border-top:1px solid rgba(179,195,210,.22);
}
.meta li{
  display:flex; gap:1.4rem; align-items:baseline;
  padding:.75rem 0;
  border-bottom:1px solid rgba(179,195,210,.22);
  font-size:.92rem;
  color:var(--text);
}
.meta span{
  min-width:92px;
  color:var(--faint);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.72rem;
}
.book__buy{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------- author ---------- */

.author{
  position:relative;
  padding:18vh 0;
  background:linear-gradient(to bottom,var(--deep) 0%,#141920 45%,#1B1D20 100%);
}
.author__inner{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.author__portrait{ margin:0; }
.portrait-slot{
  position:relative;
  aspect-ratio:4/5;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#232529,#15171A);
  border:1px solid rgba(231,220,198,.22);
  color:var(--faint);
  font-size:.74rem;
  letter-spacing:.28em;
  overflow:hidden;
}
.portrait-slot img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:contrast(1.06) saturate(.92) brightness(.94);
}
/* cools and darkens the studio backdrop so the portrait belongs
   to the same night as the rest of the page */
.portrait-slot::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 34%,transparent 34%,rgba(9,16,26,.55) 82%),
    linear-gradient(to bottom,rgba(12,21,34,.4) 0%,rgba(12,21,34,.12) 38%,rgba(9,14,22,.72) 100%);
  mix-blend-mode:multiply;
}
.portrait-slot.has-photo{ border-color:rgba(231,220,198,.32); }
.portrait-slot.has-photo span{ display:none; }
.author__caption{
  margin-top:1rem;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
}
.author__copy p{ color:#D6DBE0; }
.author__copy p + p{ margin-top:1.4rem; }
.author .display{ color:#F4EFE6; }
.author .kicker{ color:#A79E8D; }
.author__cta{ margin-top:2.6rem; }

/* ---------- journal ---------- */

.journal{
  position:relative;
  padding:20vh 0;
  background:linear-gradient(to bottom,#1B1D20 0%,var(--deep) 45%,var(--night) 100%);
}
.diary{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,6vw,5rem);
  padding:clamp(2rem,5vw,4rem);
  background:
    linear-gradient(135deg,rgba(231,220,198,.11),rgba(231,220,198,.04)),
    var(--steel);
  border:1px solid rgba(231,220,198,.2);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(231,220,198,.1);
}
.diary__spine{
  position:absolute; top:6%; bottom:6%; left:50%;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(231,220,198,.32),transparent);
}
.diary__page{ position:relative; }
.hand{
  font-family:var(--hand);
  color:var(--parchment);
  font-size:clamp(1.55rem,2.6vw,2.15rem);
  line-height:1.5;
  margin:0 0 1.6rem;
  max-width:34ch;
  clip-path:inset(0 100% 0 0);
}
.hand--sm{ font-size:clamp(1.2rem,1.85vw,1.45rem); opacity:.95; }
.diary.is-static .hand{ clip-path:none; }

/* ---------- after that night ---------- */

.hunger{
  position:relative;
  padding:20vh 0;
  background:linear-gradient(to bottom,var(--night) 0%,#0C0A10 55%,#0B0710 100%);
}
.hunger::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 22% 50%,rgba(142,27,27,.18) 0%,transparent 58%);
  pointer-events:none;
}
.hunger__inner{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.hunger__figure{ position:relative; margin:0; }
.hunger__figure img{
  width:100%;
  filter:brightness(.78) contrast(1.06) saturate(.92);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);
  transition:filter .9s var(--ease);
}
.hunger__figure:hover img{ filter:brightness(.94) contrast(1.08) saturate(1); }
.hunger__copy p{ color:var(--text); }
.hunger__copy p + p{ margin-top:1.5rem; }

/* ---------- characters ---------- */

/* a quiet portrait grid, not a character select screen.
   every name and line is readable without interaction. */
.cast{
  position:relative;
  padding:18vh 0;
  background:linear-gradient(to bottom,#0B0710,var(--night));
}
.cast__head .lede{ margin-bottom:3.2rem; }

.cast__wrap{
  position:relative;
  z-index:3;
  max-width:1400px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.cast__grid{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.1rem,1.6vw,1.5rem);
}
.cast__card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(to bottom,#111C28,#080D15);
  border:1px solid rgba(179,195,210,.16);
  padding-bottom:1.7rem;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.cast__card:hover{
  border-color:rgba(231,220,198,.34);
  transform:translateY(-5px);
}
.cast__media{
  aspect-ratio:3/4;
  overflow:hidden;
  background:#0A1420;
}
.cast__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 10%;
  filter:brightness(.95) contrast(1.03);
  transition:transform .9s var(--ease);
}
.cast__card:hover .cast__media img{ transform:scale(1.045); }
.cast__media--silhouette{
  background:radial-gradient(ellipse at 50% 38%,#18242F,#080D15 72%);
}
.cast__role{
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
  margin:1.5rem 1.5rem .45rem;
  max-width:none;
  min-height:2.4em;
}
.cast__card h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.4rem,1.9vw,1.7rem);
  line-height:1.15;
  color:var(--moon);
  margin:0 1.5rem .8rem;
}
.cast__card p:not(.cast__role){
  font-size:.95rem;
  line-height:1.7;
  color:var(--mist);
  margin:0 1.5rem;
  max-width:none;
}


/* ---------- world ---------- */

.world{
  position:relative;
  padding:18vh 0;
  background:linear-gradient(to bottom,var(--night),var(--deep));
}
.world__list{
  list-style:none;
  margin:0; padding:0;
  border-top:1px solid rgba(179,195,210,.2);
}
.world__list li{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,4rem);
  padding:clamp(1.6rem,3vw,2.8rem) 0;
  border-bottom:1px solid rgba(179,195,210,.2);
  transition:background .6s var(--ease);
}
.world__list li:hover{ background:rgba(179,195,210,.045); }
.world__list h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--moon);
  margin:0;
}
.world__list p{ margin:0; color:var(--text); }

/* ---------- cinema ---------- */

.cinema{
  padding:14vh var(--gutter);
  background:linear-gradient(to bottom,var(--deep) 0%,#000 22%,#000 78%,var(--ink) 100%);
}
.cinema__frame{ max-width:1300px; margin-inline:auto; }
.cinema__poster{
  position:relative;
  aspect-ratio:16/9;
  display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(30,44,60,.7) 0%,#010204 72%);
  border:1px solid rgba(179,195,210,.14);
}
.play{
  width:88px; height:88px;
  border-radius:50%;
  border:1px solid rgba(240,245,250,.45);
  background:rgba(3,6,11,.4);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.play svg{ width:26px; height:26px; fill:var(--moon); margin-left:3px; }
.play:hover{ background:rgba(240,245,250,.12); transform:scale(1.06); border-color:var(--moon); }
.cinema__label{
  position:absolute; bottom:1.6rem; left:0; right:0;
  text-align:center;
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mist);
  margin:0; max-width:none;
}
.cinema__poster iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- updates ---------- */

.updates{ padding:16vh 0; background:var(--ink); text-align:center; }
.updates .kicker{ margin-bottom:1.2rem; }
.updates .lede{ margin-inline:auto; }
.signup{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.signup input{
  flex:1 1 300px;
  max-width:380px;
  background:rgba(240,245,250,.04);
  border:1px solid rgba(179,195,210,.38);
  color:var(--moon);
  font-family:var(--ui);
  font-size:.95rem;
  padding:1em 1.2em;
}
.signup input::placeholder{ color:var(--faint); }
.signup input:focus{ border-color:var(--moon); outline:none; }
.signup__msg{
  flex:1 0 100%;
  font-size:.86rem;
  color:var(--mist);
  min-height:1.4em;
  margin:.8rem 0 0;
  max-width:none;
}

/* ---------- final ---------- */

.final{
  position:relative;
  min-height:92svh;
  display:grid; place-items:center;
  background:var(--ink);
  overflow:hidden;
}
.final__art{
  position:absolute; inset:-6%;
  background:url("../images/keyart-moon.webp") center/cover no-repeat;
  opacity:.55;
  will-change:transform;
}
.final__mist{
  position:absolute; inset:-10%;
  background:url("../images/fog.webp") center/cover no-repeat;
  mix-blend-mode:screen;
  opacity:.12;
  animation:drift 60s linear infinite alternate;
}
.final__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(3,6,11,.6) 0%,rgba(3,6,11,.18) 30%,rgba(3,6,11,.9) 84%,var(--ink) 100%);
}
.final__line{
  position:relative;
  z-index:2;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.6rem,4.6vw,3.2rem);
  line-height:1.25;
  color:var(--moon);
  text-align:center;
  text-shadow:0 3px 34px rgba(3,6,11,.95);
  margin:0;
  padding:46vh var(--gutter) 0;
  max-width:22ch;
}

/* ---------- footer ---------- */

.foot{
  background:var(--ink);
  border-top:1px solid rgba(179,195,210,.16);
  padding:4rem 0 5rem;
}
.foot__inner{
  display:flex; flex-wrap:wrap; gap:1rem 3rem;
  justify-content:space-between;
  font-size:.84rem;
  color:var(--faint);
}
.foot p{ margin:0; max-width:46ch; }

/* ---------- reveal ---------- */
/* copy is only hidden when JS and GSAP are both live, so text can
   never be stranded at opacity zero because a CDN failed */

.reveal{ opacity:1; transform:none; }
html.js.has-gsap .reveal{ opacity:0; transform:translateY(26px); }
html.js.has-gsap .reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */

@media (max-width:1024px){
  .nav__mark-full{ display:none; }
  .nav__mark-short{ display:inline; }
}

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:2rem;
    background:rgba(3,6,11,.97);
    backdrop-filter:blur(18px);
    opacity:0; visibility:hidden;
    transition:opacity .5s var(--ease), visibility .5s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; }
  .nav__links a{ font-size:1.05rem; letter-spacing:.22em; color:var(--moon); }
  .burger{ display:block; z-index:2; }

  /* on a phone the cover sits above the words */
  .hero{ text-align:center; }
  .hero__inner{
    grid-template-columns:minmax(0,1fr);
    padding-block:16vh 12vh;
    gap:2.6rem;
  }
  .hero__cover{ order:-1; width:min(64%,230px); }
  .hero__bg{ filter:brightness(.5) contrast(1.05) saturate(.8); }
  .hero__scrim{
    background:linear-gradient(to bottom,rgba(3,6,11,.86) 0%,rgba(3,6,11,.72) 38%,rgba(3,6,11,.84) 100%);
  }
  .hero__hook{ max-width:34ch; margin-inline:auto; }
  .hero__part{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }

  .hunger__inner,
  .author__inner,
  .book__inner,
  .diary,
  .world__list li{ grid-template-columns:minmax(0,1fr); }

  .world__list h3{ margin-bottom:.5rem; }
  .hunger__figure{ max-width:340px; }
  .book__cover{ max-width:300px; }
  .author__portrait{ max-width:320px; }
  .diary__spine{ display:none; }

  .cast__grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  .final__line{ padding-top:40vh; }
}

@media (max-width:560px){
  .cast__grid{ grid-template-columns:minmax(0,1fr); }
  .cast__card{ max-width:360px; margin-inline:auto; width:100%; }
  .hero__cta .btn,
  .book__buy .btn{ flex:1 1 auto; text-align:center; }
}

@media (hover:none){
  .moonlight{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  html.js.has-gsap .reveal{ opacity:1; transform:none; }
  .hand{ clip-path:none; }
  .moonlight{ display:none; }
}