/* ==========================================================================
   FATE SQUARED — promotional site
   Palette and mood lifted from the cover: indigo tower glass, hot magenta,
   a single gold doorway. Tall condensed display type, quiet humanist body.
   ========================================================================== */

:root {
  --ink: #06051a;
  --navy: #0c0b30;
  --indigo: #191158;
  --violet: #2b1a80;
  --blue: #2a4ff0;
  --magenta: #ff1f8f;
  --magenta-deep: #c40f6c;
  --gold: #f5b731;
  --gold-hi: #ffd166;
  --gold-deep: #d9931b;
  --cream: #f3f0ff;
  --text: #d9d5f2;
  --muted: #9b95cc;
  --line: rgba(190, 180, 255, 0.14);
  --line-strong: rgba(190, 180, 255, 0.28);

  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --title: "FateSquared", "Big Shoulders Display", Impact, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --max: 1240px;
  --pad: clamp(20px, 5vw, 76px);
  --nav-h: 76px;
  --book-thick: 30px;
}

/* The cover's own display face, used for the hero lockup so the page title
   and the jacket read as the same object. Two weights are declared under one
   family, so the lockup weight is just `font-weight` on .hero__title. Only the
   weight actually used gets downloaded. */
@font-face {
  font-family: "FateSquared";
  src: url("assets/FateSquared-Bold.woff2") format("woff2"),
       url("assets/FateSquared-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FateSquared";
  src: url("assets/FateSquared-Regular.woff2") format("woff2"),
       url("assets/FateSquared-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: clamp(16px, 1.05vw + 10px, 19px);
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { color: var(--cream); font-weight: 600; }
em { font-style: italic; }

.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;
}

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 100;
  padding: 10px 14px; background: var(--gold); color: #1a1000;
  font-weight: 600; text-decoration: none; border-radius: 3px;
}
.skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Atmosphere
   -------------------------------------------------------------------------- */
.bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% -5%, #221872 0%, rgba(34, 24, 114, 0) 70%),
    radial-gradient(45% 40% at 8% 105%, rgba(255, 31, 143, 0.28) 0%, rgba(255, 31, 143, 0) 70%),
    radial-gradient(40% 40% at 95% 90%, rgba(42, 79, 240, 0.18) 0%, rgba(42, 79, 240, 0) 70%),
    linear-gradient(180deg, #0b0a33 0%, #06051a 55%, #06051a 100%);
}

/* Tower glass: tall mullions and thin floor lines, subtly leaning back like
   looking up the face of a building. */
.bg__grid {
  position: absolute;
  left: -20%; right: -20%; top: -15%; bottom: -15%;
  background-image:
    repeating-linear-gradient(90deg, rgba(160, 150, 255, 0.10) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(160, 150, 255, 0.05) 0 1px, transparent 1px 21px),
    repeating-linear-gradient(0deg, rgba(160, 150, 255, 0.07) 0 1px, transparent 1px 132px);
  transform: perspective(1400px) rotateX(-9deg) translateY(var(--parallax, 0px));
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 15%, transparent 100%);
          mask-image: radial-gradient(75% 75% at 50% 40%, #000 15%, transparent 100%);
  will-change: transform;
}

.bg__grain {
  position: absolute; inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--magenta);
}

.lede {
  font-size: 1.18em;
  line-height: 1.55;
  color: var(--cream);
}

.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1em 1.7em;
  font-size: 0.86rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
  white-space: nowrap;
}
.btn--sm { padding: 0.8em 1.25em; font-size: 0.74rem; }
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* The gold door. */
.btn--gold {
  color: #1a1000;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(245, 183, 49, 0.55),
    0 12px 32px -12px rgba(245, 183, 49, 0.75);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px var(--gold-hi),
    0 0 46px -6px rgba(245, 183, 49, 0.75),
    0 20px 44px -14px rgba(245, 183, 49, 0.8);
}

.btn--ghost {
  color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  box-shadow: inset 0 0 0 1px var(--magenta), 0 0 30px -10px rgba(255, 31, 143, 0.6);
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--pad);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(6, 5, 26, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__brand {
  font-family: var(--title); font-weight: 700; font-size: 2rem; line-height: 1;
  letter-spacing: 0.02em; color: var(--cream); text-decoration: none;
  display: inline-flex; align-items: flex-start;
}
.nav__brand sup {
  font-size: 0.5em; line-height: 1; margin-left: 0.08em; margin-top: -0.05em;
  color: var(--magenta);
}

.nav__links {
  display: flex; gap: 2.2rem; margin-left: auto;
}
.nav__links a {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; position: relative; padding: 0.4em 0;
  transition: color 0.3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--magenta); transition: right 0.4s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--cream); }
.nav__links a:hover::after,
.nav__links a.is-active::after { right: 0; }
.nav__links-cta { display: none; }

.nav__toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav__toggle span {
  display: block; width: 24px; height: 2px; background: var(--cream);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: calc(var(--nav-h) + 3rem) var(--pad) 5rem;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
}

.hero__copy { position: relative; z-index: 2; }

.hero__title {
  margin: 1.1rem 0 1.6rem;
  font-family: var(--title);
  font-weight: 700;              /* the cover face's Bold cut */
  font-size: clamp(84px, 14.5vw, 200px);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex; flex-direction: column;
}
/* Weight tuning for the cover face.
   The Bold cut is used as drawn (stem/cap 0.374, within ~11% of the Big
   Shoulders 900 it replaced, and the same overall footprint), so no synthetic
   weight is added — light type on a dark ground already reads slightly heavier
   than it measures. Raise --title-boost to about 0.06em to match the old
   weight exactly; past that the stroke rounds corners and closes counters.
   --title-outline is the hollow stroke on SQUARED, floored so it stays
   visible at small viewport sizes. */
.hero__title {
  --title-boost: 0;
  --title-outline: max(2.5px, 0.019em);
}
.hero__word {
  display: block;
  -webkit-text-stroke: var(--title-boost) var(--cream);
  paint-order: stroke fill;   /* thicken outward without eating the counters */
}
.hero__word--outline {
  color: transparent;
  -webkit-text-stroke: var(--title-outline) var(--magenta);
  text-shadow: 0 0 40px rgba(255, 31, 143, 0.28);
  padding-left: 0.02em; /* optical: stroke needs a hair of breathing room */
}

.hero__tag {
  font-size: clamp(1.15rem, 1.6vw + 0.5rem, 1.6rem);
  line-height: 1.35;
  color: var(--cream);
  max-width: 22ch;
  font-weight: 500;
}

.hero__cta {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 2.2rem;
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.hero__meta dt {
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
.hero__meta dd { margin: 0.25rem 0 0; font-weight: 600; color: var(--cream); font-size: 0.95rem; }

/* Book stage */
.hero__book {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  justify-self: center;
}
.hero__book::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 31, 143, 0.28), rgba(43, 26, 128, 0.25) 45%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
.hero__flip-hint {
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  position: relative; z-index: 1;
}

/* Geometry: the cover file is 995×1557; the spine on the print spread is 215px
   wide at the same scale — a ~1.2" block on a 5.5" trim (400+ pages). Thickness
   is derived from width so it stays in proportion at every size. */
.book {
  --rx: 0deg;
  --ry: 0deg;
  --flip: 0deg;
  --book-w: min(360px, 78vw);
  --book-thick: calc(var(--book-w) * 0.2161);
  --page-inset: 1.1%;
  position: relative; z-index: 1;
  width: var(--book-w);
  aspect-ratio: 995 / 1557;
  perspective: 1800px;
  cursor: pointer;
  outline-offset: 12px;
  animation: float 7.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.book__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(20deg + var(--ry) + var(--flip)));
  transition: transform 0.9s var(--ease);
}
.book.is-tilting .book__inner { transition: transform 0.15s linear; }
.book.is-flipped { --flip: 180deg; }

/* Every face is built so its front normal points OUT of the book, so
   backface-visibility:hidden cleanly culls whatever is facing away. */
.book__face,
.book__spine,
.book__pages {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.book__face {
  inset: 0;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  background: var(--navy);
  box-shadow:
    0 60px 90px -30px rgba(0, 0, 0, 0.75),
    0 20px 40px -20px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.book__face img { width: 100%; height: 100%; object-fit: cover; }
/* Crease / hinge shading along the spine edge of the front cover. */
.book__front::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22px;
  background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(255,255,255,0.06) 40%, rgba(0,0,0,0.12) 70%, transparent);
  pointer-events: none;
}
.book__back {
  transform: rotateY(180deg) translateZ(var(--book-thick));
  border-radius: 6px 2px 2px 6px;
}
.book__back::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 22px;
  background: linear-gradient(-90deg, rgba(0,0,0,0.4), rgba(255,255,255,0.06) 40%, rgba(0,0,0,0.12) 70%, transparent);
  pointer-events: none;
}

/* Spine: real artwork cropped from the print spread. Sits at x=0, spans z 0→-thick,
   faces left (outward). */
.book__spine {
  top: 0; bottom: 0; left: 0;
  width: var(--book-thick);
  transform-origin: left center;
  transform: translateZ(calc(-1 * var(--book-thick))) rotateY(-90deg);
  background: linear-gradient(90deg, #0a0930, #17114f 50%, #0a0930);
  overflow: hidden;
  border-radius: 2px;
}
.book__spine img { width: 100%; height: 100%; object-fit: cover; }
.book__spine::after { /* gentle roll-off toward both hinges */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45), transparent 22%, transparent 78%, rgba(0,0,0,0.45));
  pointer-events: none;
}
.book__spine span {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243, 240, 255, 0.85);
  white-space: nowrap;
}
.book__spine.is-missing img { display: none; }
.book__spine.is-missing span { display: flex; }

/* Page block — cream paper, hairline stripes for the individual sheets,
   slightly recessed inside the covers (the covers overhang a little). */
.book__pages {
  --paper: #efe8da;
  --paper-dk: #cfc6b3;
  background-color: var(--paper);
}
.book__pages--fore {                 /* right side: x = W - inset, spans z 0→-thick */
  top: var(--page-inset); bottom: var(--page-inset); right: var(--page-inset);
  width: var(--book-thick);
  transform-origin: right center;
  transform: translateZ(calc(-1 * var(--book-thick))) rotateY(90deg);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.18), transparent 25%, transparent 75%, rgba(0,0,0,0.12)),
    repeating-linear-gradient(90deg, var(--paper) 0 1px, var(--paper-dk) 1px 2px);
}
.book__pages--head,                  /* top: y = inset, spans z 0→-thick */
.book__pages--tail {                 /* bottom */
  left: 0.6%; right: var(--page-inset);
  height: var(--book-thick);
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.16), transparent 25%, transparent 75%, rgba(0,0,0,0.1)),
    repeating-linear-gradient(0deg, var(--paper) 0 1px, var(--paper-dk) 1px 2px);
}
.book__pages--head {
  top: var(--page-inset);
  transform-origin: center top;
  transform: translateZ(calc(-1 * var(--book-thick))) rotateX(90deg);
}
.book__pages--tail {
  bottom: var(--page-inset);
  transform-origin: center bottom;
  transform: translateZ(calc(-1 * var(--book-thick))) rotateX(-90deg);
}

/* Cover fallback (only shows if the image file is missing). */
.book__fallback {
  display: none; position: absolute; inset: 0;
  flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 10% 8%;
  background:
    radial-gradient(60% 45% at 50% 100%, rgba(255, 31, 143, 0.55), transparent 70%),
    repeating-linear-gradient(90deg, rgba(160, 150, 255, 0.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(160, 150, 255, 0.07) 0 1px, transparent 1px 52px),
    linear-gradient(180deg, #221872, #0a0930 70%);
}
.book__face.is-missing img { display: none; }
.book__face.is-missing .book__fallback { display: flex; }
.book__fallback-title {
  font-family: var(--display); font-weight: 900; font-size: 5.2rem; line-height: 0.85;
  text-transform: uppercase; color: var(--cream);
}
.book__fallback-door {
  width: 14%; aspect-ratio: 1 / 1.9; align-self: center;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 0 40px rgba(245, 183, 49, 0.7);
}
.book__fallback-author {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream);
}
.book__fallback--back { justify-content: center; gap: 2rem; }
.book__fallback-q {
  font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1;
  text-transform: uppercase; color: var(--cream);
}
.book__fallback-small { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem;
  width: 22px; height: 40px; margin-left: -11px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  opacity: 0.8;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 7px; width: 2px; height: 8px; margin-left: -1px;
  background: var(--gold); border-radius: 2px;
  animation: scrollcue 2s var(--ease-io) infinite;
}
@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */
.pull {
  padding: clamp(3rem, 8vw, 7rem) var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(255, 31, 143, 0.05) 50%, transparent);
}
.pull__text {
  max-width: 24ch; margin: 0 auto; text-align: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 4.4rem); line-height: 0.98;
  text-transform: uppercase; color: var(--cream);
  letter-spacing: 0.01em;
}
.pull__text em { font-style: normal; color: var(--magenta); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
main { counter-reset: sec; }

.section {
  position: relative;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 10rem) var(--pad);
}
.section + .section::before {
  content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px;
  background: var(--line);
}

.section-head {
  display: flex; align-items: baseline; gap: 1.2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  align-self: flex-start;
  margin-top: 0.35em;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em; color: var(--magenta);
}
.section-head h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3rem, 6.5vw, 6rem); line-height: 0.9;
  text-transform: uppercase; color: var(--cream); letter-spacing: 0.005em;
}
.section-head::after {
  content: ""; flex: 1; height: 1px; background: var(--line); align-self: center;
  margin-left: 0.6rem;
}

/* Synopsis */
.synopsis {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.synopsis__side { position: sticky; top: calc(var(--nav-h) + 2rem); }
.synopsis__side .section-head::after { display: none; }
.synopsis__kicker {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15;
  color: var(--muted); max-width: 22ch;
}
.synopsis__body { display: flex; flex-direction: column; gap: 1.5rem; }
.synopsis__body p { max-width: 58ch; }
.synopsis__beat {
  margin-top: 1.5rem;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 0.92;
  text-transform: uppercase; color: transparent;
  -webkit-text-stroke: 1.5px var(--cream);
  letter-spacing: 0.01em;
}
.synopsis__punch {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
  color: var(--magenta);
}

/* Dossier */
.dossier__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.card {
  --accent: var(--magenta);
  position: relative; overflow: hidden;
  padding: 2.2rem 2rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(34, 24, 114, 0.45), rgba(10, 9, 40, 0.65));
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}
.card:hover,
.js .card.reveal.done:hover {           /* outranks .js .reveal.in's transform: none */
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent);
}
.card__file {
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
}
.card__name {
  margin: 0.9rem 0 0.4rem;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 3.6vw, 3.6rem); line-height: 0.88;
  text-transform: uppercase; color: var(--cream);
}
.card__role {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.card > p:not(.card__role) { margin-top: 1.3rem; font-size: 0.95em; }
.card__tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem;
}
.card__tags li {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45em 0.8em; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text);
}
.card__num {
  position: absolute; right: -0.05em; bottom: -0.28em; z-index: 0;
  font-family: var(--display); font-weight: 900; font-size: 9rem; line-height: 1;
  color: var(--accent); opacity: 0.07; pointer-events: none;
}

/* Listen */
.player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem 3rem; align-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(120deg, rgba(34, 24, 114, 0.5), rgba(10, 9, 40, 0.7));
}
.player__title {
  margin-top: 0.6rem;
  font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 0.9; text-transform: uppercase; color: var(--cream);
}
.player__sub { margin-top: 0.4rem; color: var(--muted); font-size: 0.9em; }
.player__controls { display: flex; align-items: center; gap: 1.4rem; }
.player__btn {
  flex: none; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color: #1a1000;
  box-shadow: 0 0 0 1px rgba(245, 183, 49, 0.5), 0 14px 30px -12px rgba(245, 183, 49, 0.8);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.player__btn:hover { transform: scale(1.05); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 40px -6px rgba(245, 183, 49, 0.8); }
.player__btn svg { width: 26px; height: 26px; fill: currentColor; }
.player__btn .icon-pause { display: none; }
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }
.player__track { flex: 1; min-width: 0; }
.player__seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, var(--magenta) var(--p, 0%), var(--line-strong) var(--p, 0%));
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--magenta);
  box-shadow: 0 0 14px rgba(255, 31, 143, 0.7);
}
.player__seek::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--magenta);
  box-shadow: 0 0 14px rgba(255, 31, 143, 0.7);
}
.player__times {
  display: flex; justify-content: space-between; margin-top: 0.7rem;
  font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Countdown — the clock on the door.
   Numbers are set in the cover face, the same type as the hero lockup. */
.countdown {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.countdown__eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--magenta);
  margin-bottom: 1.2rem;
}
.countdown__units {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(0.5rem, 1.6vw, 1rem);
}
.countdown__unit {
  flex: 0 1 auto;
  min-width: clamp(74px, 15vw, 128px);
  padding: clamp(0.9rem, 2vw, 1.4rem) clamp(0.5rem, 1.5vw, 1rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(34, 24, 114, 0.45), rgba(10, 9, 40, 0.65));
  position: relative; overflow: hidden;
}
.countdown__unit::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.countdown__num {
  display: block;
  font-family: var(--title); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.95;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(245, 183, 49, 0.4);
}
.countdown__label {
  display: block; margin-top: 0.5rem;
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted);
}
.countdown__out {
  font-family: var(--title); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1;
  text-transform: uppercase; color: var(--gold-hi);
}

/* Pre-release honesty note under the retailer list. */
.buy__notice {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--gold);
  background: rgba(245, 183, 49, 0.06);
  border-radius: 0 4px 4px 0;
  font-size: 0.92em; color: var(--text);
}
.buy__notice strong { color: var(--gold-hi); }

/* After the release date the script adds this to <html>. */
.is-released .countdown__units,
.is-released .buy__notice { display: none; }
.is-released .countdown__eyebrow { display: none; }

/* Buy */
.buy__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.buy__intro p + p { margin-top: 1.6rem; }
.buy__isbn { color: var(--muted); font-size: 0.9em; letter-spacing: 0.02em; }
.buy__isbn span {
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; margin-right: 0.8em;
}
.retailers li { border-top: 1px solid var(--line); }
.retailers li:last-child { border-bottom: 1px solid var(--line); }
.retailers a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0.4rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--cream); text-decoration: none;
  transition: padding 0.4s var(--ease), color 0.3s;
}
.retailers a:hover { color: var(--gold-hi); padding-left: 1rem; }
.retailers__arrow {
  font-family: var(--body); font-weight: 400; color: var(--magenta);
  transition: transform 0.4s var(--ease);
}
.retailers a:hover .retailers__arrow { transform: translateX(6px); }

/* Author */
.author {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.author__photo {
  position: relative; width: min(100%, 360px); aspect-ratio: 4 / 5;
  justify-self: center;
}
.author__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: translate(16px, 16px);
  background: var(--magenta); border-radius: 4px; opacity: 0.85;
}
.author__photo img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  border: 1px solid var(--gold); border-radius: 4px;
  filter: saturate(0.9) contrast(1.05);
}
.author__initials {
  display: none; position: absolute; inset: 0; z-index: 1;
  place-items: center; border: 1px solid var(--gold); border-radius: 4px;
  background: linear-gradient(180deg, #221872, #0a0930);
  font-family: var(--display); font-weight: 900; font-size: 6rem; color: var(--cream);
}
.author__photo.is-missing img { display: none; }
.author__photo.is-missing .author__initials { display: grid; }
.author__name {
  margin-bottom: 1.4rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--gold);
}
.author__name a {
  color: inherit; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}
.author__name a:hover { border-color: var(--gold); color: var(--gold-hi); }
.author__text p + p { margin-top: 1.3rem; max-width: 60ch; }
.author__text p a { color: var(--cream); text-decoration-color: var(--magenta); text-underline-offset: 3px; }
.author__text p a:hover { color: var(--gold-hi); }
.author__more { margin-top: 1.8rem !important; }
.author__more--tight { margin-top: 0.8rem !important; }
.listen__read { margin-top: 1.6rem; }
.author__more a,
.listen__read a {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(245, 183, 49, 0.4);
  padding-bottom: 0.25em;
  transition: color 0.3s, border-color 0.3s;
}
.author__more a span,
.listen__read a span { transition: transform 0.4s var(--ease); }
.author__more a:hover,
.listen__read a:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.author__more a:hover span,
.listen__read a:hover span { transform: translateX(4px); }

/* Notify — the doorway.
   Elements marked data-needs-notify only show once the list is configured
   (script.js sets html.has-notify); data-no-notify elements are the fallback. */
html:not(.has-notify) [data-needs-notify] { display: none !important; }
html.has-notify [data-no-notify] { display: none !important; }

.buy__notify { margin-top: 1.2rem !important; font-size: 0.95em; color: var(--muted); }
.buy__notify a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(245, 183, 49, 0.4); transition: border-color 0.3s, color 0.3s; }
.buy__notify a:hover { color: var(--gold-hi); border-color: var(--gold-hi); }

.notify { text-align: center; }
.notify__frame {
  position: relative; max-width: 620px; margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(245, 183, 49, 0.55);
  box-shadow: 0 0 80px -30px rgba(245, 183, 49, 0.55), inset 0 0 60px -40px rgba(245, 183, 49, 0.4);
}
.notify__frame::before,
.notify__frame::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; width: 1px;
  background: rgba(245, 183, 49, 0.35);
}
.notify__frame::before { left: 12px; }
.notify__frame::after { right: 12px; }
.notify__title {
  margin: 0.8rem 0 0.6rem;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 0.9;
  text-transform: uppercase; color: var(--cream);
}
.notify__sub { color: var(--muted); }
.notify__form {
  display: flex; gap: 0.7rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center;
}
.notify__form input {
  flex: 1 1 240px; min-width: 0;
  padding: 0.95em 1em; font: inherit; color: var(--cream);
  background: rgba(6, 5, 26, 0.6); border: 1px solid var(--line-strong); border-radius: 2px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.notify__form input::placeholder { color: var(--muted); }
.notify__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 183, 49, 0.2); }
.notify__form.is-busy { opacity: 0.6; pointer-events: none; }
.notify__form.is-done { display: none; }
.notify__msg { margin-top: 1.4rem; min-height: 1.4em; font-size: 0.95em; color: var(--muted); }
.notify__msg.is-success { color: var(--gold-hi); font-weight: 600; }
.notify__msg.is-error { color: #ff7ab8; }
.notify__msg:empty { display: none; }

/* Footer */
.footer {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 3rem var(--pad) 3.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2.5rem;
  font-size: 0.8rem; color: var(--muted);
}
/* Same mark as the nav, so it tracks the same face. */
.footer__brand {
  font-family: var(--title); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--cream);
  display: inline-flex; align-items: flex-start;
}
.footer__brand sup { font-size: 0.5em; margin-left: 0.08em; color: var(--magenta); }
.footer__isbn { margin-left: auto; letter-spacing: 0.06em; }
/* Links to the publisher's site, in the hero meta, the buy lede and the footer:
   same treatment as the bio's inline links. */
.hero__meta dd a,
.lede a,
.footer p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hero__meta dd a:hover,
.lede a:hover,
.footer p a:hover { color: var(--gold-hi); }

/* --------------------------------------------------------------------------
   Reveal choreography
   -------------------------------------------------------------------------- */
.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
/* Only hide content when JS is present to reveal it again. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }
/* Once the entrance has played, drop the stagger so hover states feel instant. */
.reveal.done { transition-delay: 0s; }
/* Cards: entrance uses the reveal timing, then hand back to the hover transition. */
.card.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.card.reveal.done { transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-top: calc(var(--nav-h) + 2.5rem);
    text-align: left;
  }
  .hero__book { order: -1; }
  .book { --book-w: min(300px, 62vw); }
  .hero__title { font-size: clamp(76px, 19vw, 150px); }
  .synopsis, .buy__grid, .author { grid-template-columns: 1fr; }
  .synopsis__side { position: static; }
  .dossier__grid { grid-template-columns: 1fr; }
  .card { padding: 2rem 1.6rem; }
  .player { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav { gap: 1rem; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__links {
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; gap: 0; margin: 0;
    padding: 0.5rem var(--pad) 1.4rem;
    background: rgba(6, 5, 26, 0.94);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 0.9em 0; font-size: 0.9rem; border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
  .nav__links-cta { display: block; color: var(--gold) !important; border-bottom: 0 !important; }
  .hero__meta { gap: 1.4rem 2rem; }
  .hero__scroll { display: none; }
  .section-head::after { display: none; }
  .retailers a { font-size: 1.5rem; }
  .footer__isbn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .book, .hero__scroll span { animation: none; }
  .book__inner { transition: none; }
  .bg__grid { transform: perspective(1400px) rotateX(-9deg); }
  * { transition-duration: 0.01ms !important; }
}