/* ============================================================
   UNDERCURRENT — Patricia Reay
   "The Waterline" — a scroll that descends from a Cape Town
   sunset into deep water. Palette sampled from the cover art.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Depth palette — sampled directly from the cover jpeg */
  --sky-amber:    #ED963D;   /* sunset sky, surface accent only */
  --sky-pale:     #F6C88E;   /* high sky wash */
  --cream:        #D4C29C;   /* cover title cream — body text at depth */
  --cream-bright: #F2E7D2;   /* headings at depth */
  --sand:         #AB683C;   /* beach, warm secondary */
  --shallow:      #345B68;   /* transition water */
  --deep:         #004154;   /* dominant petrol field */
  --deeper:       #06344A;
  --abyss:        #05253C;   /* footer floor */
  --island:       #45461E;   /* the two islands — rare organic accent */

  /* Type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.8rem, 1.5rem + 1.4vw, 2.8rem);
  --step-3:  clamp(2.6rem, 2rem + 3vw, 5rem);
  --step-4:  clamp(3.4rem, 2.2rem + 6vw, 9rem);

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --gauge-w: 96px;
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--cream);
  /* --deep, NOT --abyss: the hero's scrim composites against the body while
     the page below composites against .water. If the two backing colours
     differ, the hero's bottom edge shows as a hard seam. */
  background: var(--deep);
  overflow-x: hidden;
  font-synthesis-weight: none;
}

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

::selection { background: var(--sky-amber); color: #05253C; }

:focus-visible {
  outline: 2px solid var(--sky-amber);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sky-amber);
  color: #05253C;
  padding: 0.75rem 1.25rem;
  z-index: 999;
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- The descending background ---------- */
/* Fixed layer whose colour is driven by scroll depth via --depth (0..1) */
.water {
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Top stop is --deep so it meets the hero scrim's final colour exactly —
     starting on --shallow leaves a hard seam at the hero's bottom edge. */
  /* Held flat on --deep across the top half. The hero's scrim ends opaque on
     --deep, and the two layers are anchored differently (fixed vs absolute),
     so the overlap colour must be constant rather than mid-gradient. */
  background:
    linear-gradient(
      180deg,
      var(--deep) 0%,
      var(--deep) 50%,
      color-mix(in oklab, var(--deep) calc((1 - var(--depth, 0)) * 62%), var(--abyss)) 78%,
      var(--abyss) 100%
    );
  transition: background 900ms linear;
}

/* Caustic light ripples — only visible near the surface */
.caustics {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(0.5 - var(--depth, 0) * 0.5);
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0 60px,
      rgba(242, 231, 210, 0.045) 60px 62px,
      transparent 62px 130px
    );
  mix-blend-mode: screen;
  animation: drift 24s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(-130px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Drifting motes — suspended particles, denser at depth */
/* Bubbles belong underwater only. They stay fully hidden across the first
   screen (the hero is above the waterline) and fade in as the reader
   descends — `--surfaced` is 0 in the hero, ramping to 1 just below it. */
.motes {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(var(--surfaced, 0) * (0.42 + var(--depth, 0) * 0.58));
  transition: opacity 420ms linear;
}
.mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  /* lit from one side like a real bubble, with a soft halo */
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,0.95) 0%,
      rgba(226,240,246,0.55) 38%,
      rgba(180,214,226,0.22) 68%,
      rgba(180,214,226,0.05) 100%);
  box-shadow:
    0 0 6px 1px rgba(214,236,244,0.35),
    inset 0 0 2px rgba(255,255,255,0.6);
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(105vh) translateX(0) scale(0.85); opacity: 0; }
  8%   { opacity: 1; }
  35%  { transform: translateY(66vh) translateX(22px) scale(1); }
  65%  { transform: translateY(32vh) translateX(-14px) scale(1.04); }
  92%  { opacity: 1; }
  to   { transform: translateY(-10vh) translateX(26px) scale(1.1); opacity: 0; }
}

/* ---------- Depth gauge (the signature element) ---------- */
.gauge {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--gauge-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  font-family: var(--body);
}

.gauge__line {
  position: absolute;
  left: 50%;
  top: 12vh;
  bottom: 12vh;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklab, var(--cream) 35%, transparent) 12%,
    color-mix(in oklab, var(--cream) 35%, transparent) 88%,
    transparent
  );
}

/* the moving bead */
.gauge__bead {
  position: absolute;
  left: 50%;
  width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--sky-amber);
  box-shadow: 0 0 14px 3px color-mix(in oklab, var(--sky-amber) 60%, transparent);
  top: calc(12vh + (76vh * var(--depth, 0)));
  transition: top 120ms linear;
}

.gauge__readout {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(12vh + (76vh * var(--depth, 0)) + 16px);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--cream-bright);
  white-space: nowrap;
  transition: top 120ms linear;
}

.gauge__ticks {
  position: absolute;
  left: 50%;
  top: 12vh;
  bottom: 12vh;
  width: 100%;
  pointer-events: auto;
}
.gauge__tick {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: color-mix(in oklab, var(--cream) 72%, transparent);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 250ms ease;
  padding: 6px 4px;
  /* the gauge crosses bright sky and dark water — this holds against both */
  text-shadow: 0 1px 4px rgba(4,24,38,0.75);
}
.gauge__tick::before {
  content: "";
  width: 10px; height: 1px;
  background: currentColor;
  flex: none;
}
.gauge__tick:hover,
.gauge__tick:focus-visible,
.gauge__tick[aria-current="true"] { color: var(--sky-amber); }

.gauge__tick span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media (max-width: 900px) {
  .gauge { display: none; }
  :root { --gauge-w: 0px; }
}

/* ---------- Layout ---------- */
main { position: relative; }

.section {
  position: relative;
  padding-block: clamp(6rem, 16vh, 12rem);
  padding-inline: var(--gutter) var(--gutter);
  padding-left: max(var(--gutter), var(--gauge-w));
}

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sky-amber);
  margin: 0 0 1.4rem;
  font-weight: 500;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.03;
  color: var(--cream-bright);
  margin: 0 0 1rem;
  letter-spacing: -0.015em;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 500; }

p { margin: 0 0 1.4rem; max-width: var(--measure); }

/* Wave dividers between sections */
.wave-divider {
  position: absolute;
  left: 0;
  width: 100%;
  height: 90px;
  line-height: 0;
  pointer-events: none;
}
.wave-divider--top { top: -1px; }
.wave-divider svg { width: 100%; height: 100%; display: block; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1),
              transform 900ms cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 120ms; }
.reveal[data-delay="2"] { transition-delay: 240ms; }
.reveal[data-delay="3"] { transition-delay: 360ms; }

/* ============================================================
   HERO — one continuous landscape plate, not assembled parts.
   The artwork carries the mountain, bay, islands and water with
   consistent light; the page only adds type over it.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  /* NO `isolation: isolate` — it creates a stacking context that stops the
     fixed .water layer (z-index -2) painting through the hero, which shows
     up as a measurable hard seam at the hero's bottom edge. */
  background: transparent;
}

/* The landscape is a wide panorama. It sits across the middle of the hero
   with sky above and water below, both continued in CSS from its own
   edge colours, so the plate never reads as a pasted-in rectangle. */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/hero-landscape.jpg");
  background-size: cover;
  background-position: 50% 62%;   /* keeps the mountain in the upper half */
  background-repeat: no-repeat;
  transform: scale(1.05);          /* room for the parallax drift */
  will-change: transform;
  /* dissolve the plate before the hero's edge so it never cuts off hard */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0.55) 88%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0.55) 88%, transparent 99%);
}

/* legibility wash — dark on the left where the type sits, clear on the
   right so the artwork reads. Also fades the plate into the page below. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Left-hand legibility wash. It must be MASKED OFF before the hero's
       bottom edge — carried all the way down it darkens only the left of
       that edge, which reads as a one-sided seam against the page below.
       (Measured: 26 levels of step on the left, 3 on the right.) */
    radial-gradient(120% 78% at 0% 38%,
      rgba(4,26,40,0.70) 0%,
      rgba(4,26,40,0.44) 34%,
      rgba(4,26,40,0.16) 58%,
      rgba(4,26,40,0.00) 82%),
    /* must land on EXACTLY the page's own water colour, fully opaque, or the
       hero's bottom edge shows as a hard horizontal seam */
    /* The vertical fade must reach FULLY OPAQUE --deep well before the hero's
       bottom edge. The .water layer below is `fixed` (viewport-anchored)
       while this is `absolute` (hero-anchored), so at any given scroll they
       sample different points of their gradients and can never be matched by
       tuning alpha — the only reliable join is an opaque overlap. */
    linear-gradient(180deg,
      rgba(4,26,40,0.34) 0%,
      transparent 26%,
      transparent 54%,
      rgba(1,55,72,0.55) 74%,
      var(--deep) 88%,
      var(--deep) 100%);
}

.hero__inner {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  /* tight top padding — no dead space above the type */
  padding: clamp(4.5rem, 9vh, 7rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  padding-left: max(var(--gutter), calc(var(--gauge-w) + 1rem));
}

/* Staged entrance — the hero arrives rather than simply being there */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero__text > * {
  animation: riseIn 1s cubic-bezier(.22,.61,.36,1) both;
}
.hero__kicker  { animation-delay: 0.05s; }
.hero__title   { animation-delay: 0.18s; }
.hero__author  { animation-delay: 0.34s; }
.hero__hook    { animation-delay: 0.48s; }
.hero__actions { animation-delay: 0.62s; }

.hero__kicker {
  font-size: var(--step--1);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #FFD9A3;
  font-weight: 500;
  margin: 0 0 1rem;
  padding-left: 0.2em;
}
.hero__kicker::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.9em;
  opacity: 0.85;
}

/* ONE word, one line — sized to fit the column, never wrapping */
.hero__title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1rem + 6.2vw, 6.8rem);
  font-weight: 400;
  line-height: 0.94;
  margin: 0 0 0.7rem;
  color: #FFF8EC;
  letter-spacing: -0.028em;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(3,22,36,0.55);
}

.hero__author {
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #FFEFD6;
  font-weight: 600;
  margin: 0 0 1.8rem;
}

.hero__hook {
  font-family: var(--display);
  font-size: var(--step-1);
  font-style: italic;
  color: #F6E9D5;
  max-width: 32ch;
  margin: 0 0 2.2rem;
  line-height: 1.4;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.btn--text {
  padding: 1rem 0;
  color: #FFEFD6;
  border-bottom: 1px solid color-mix(in oklab, #FFEFD6 45%, transparent);
  border-radius: 0;
}
.btn--text:hover {
  color: #FFF8EC;
  border-color: #FFF8EC;
  transform: translateY(-2px);
}

/* ---------- The book (photographic hardback render) ---------- */
/* Two layers of motion, on different elements so they never fight over
   `transform`: the WRAPPER is driven by scroll from main.js, the IMAGE
   carries the idle float. */
.book {
  position: relative;
  height: min(58vh, 470px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  /* NO transition — it damps the scroll-driven move into mush.
     rAF already delivers a value every frame. */
}

/* Perspective sits on the PARENT of the transformed element, or the rotates
   get no foreshortening at all. Kept LONG (1800px) — a short perspective on
   a flat photographic render shears it into an obvious distortion. */
.hero__cover-col {
  perspective: 1800px;
  perspective-origin: 50% 45%;
}
.book img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  animation: bookfloat 11s ease-in-out infinite;
  filter:
    drop-shadow(0 20px 28px rgba(3,22,36,0.5))
    drop-shadow(0 50px 78px rgba(3,22,36,0.42));
}
@keyframes bookfloat {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50%      { transform: translateY(-16px) rotate(0.5deg); }
}
.book:hover img { animation-play-state: paused; }

.scroll-cue {
  position: relative;
  z-index: 5;
  justify-self: center;
  margin-bottom: 2.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0.9;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--cream), transparent);
  animation: sink 2.4s ease-in-out infinite;
}
@keyframes sink {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1),
              background 260ms ease, color 260ms ease, box-shadow 260ms ease;
  cursor: pointer;
}
.btn--primary {
  background: var(--sky-amber);
  color: #06283C;
  box-shadow: 0 8px 24px -10px rgba(237,150,61,0.7);
}
.btn--primary:hover {
  background: #FFAA4A;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -8px rgba(237,150,61,0.75);
}
.btn--ghost {
  border-color: color-mix(in oklab, var(--cream) 40%, transparent);
  color: var(--cream-bright);
}
.btn--ghost:hover {
  background: var(--sky-amber);
  border-color: var(--sky-amber);
  color: #05253C;
  transform: translateY(-3px);
}

/* ============================================================
   HOOK — the first thing below the waterline
   ============================================================ */
.hook {
  text-align: center;
  padding-block: clamp(8rem, 22vh, 16rem);
}
.hook__line {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--cream-bright);
  max-width: 20ch;
  margin-inline: auto;
  font-style: italic;
}
.hook__line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.22,.61,.36,1);
}
.hook.is-in .hook__line span { opacity: 1; transform: none; }

/* ============================================================
   SYNOPSIS
   ============================================================ */
.synopsis__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.synopsis__cover {
  position: sticky;
  top: 12vh;
  max-width: 320px;
}
.synopsis__cover img {
  border-radius: 3px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
  height: auto;
}
.synopsis__meta {
  margin-top: 1.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 70%, transparent);
  line-height: 2;
}
.lede {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.32;
  color: var(--cream-bright);
  font-style: italic;
  margin-bottom: 2rem;
}

/* ============================================================
   PRAISE — quotes surfacing
   ============================================================ */
.praise__list {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  margin-top: 3rem;
}
.quote {
  border-left: 1px solid color-mix(in oklab, var(--sky-amber) 55%, transparent);
  padding-left: 1.6rem;
}
.quote blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--cream-bright);
  font-style: italic;
}
.quote cite {
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-amber);
}

/* ============================================================
   EXCERPT — a page catching light
   ============================================================ */
.excerpt__page {
  background: linear-gradient(160deg, #F7EEDD 0%, #EFE2CB 100%);
  color: #2A2118;
  padding: clamp(2.5rem, 6vw, 5.5rem);
  max-width: 720px;
  margin-inline: auto;
  border-radius: 2px;
  box-shadow: 0 40px 90px -25px rgba(0,0,0,0.65);
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.75;
}
.excerpt__page p { max-width: none; color: #2A2118; }
/* Drop cap on the first BODY paragraph only — not the chapter label. */
.excerpt__body:first-of-type::first-letter {
  font-size: 3.6em;
  float: left;
  line-height: 0.78;
  padding: 0.08em 0.1em 0 0;
  color: var(--sand);
}
.excerpt__chapter {
  font-family: var(--body);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 2rem;
  text-align: center;
}

/* ============================================================
   AUTHOR
   ============================================================ */
.author__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.author__portrait {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--shallow), var(--abyss));
  display: grid;
  place-items: center;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.65);
}
.author__portrait img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-note {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 55%, transparent);
  text-align: center;
  padding: 2rem;
  line-height: 1.9;
}

/* ============================================================
   BUY
   ============================================================ */
.buy { text-align: center; }
.retailers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}
.retailers a {
  display: block;
  padding: 1.05rem 2.1rem;
  border: 1px solid color-mix(in oklab, var(--cream) 32%, transparent);
  border-radius: 999px;
  color: var(--cream-bright);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 240ms ease, color 240ms ease,
              border-color 240ms ease, transform 240ms ease;
}
.retailers a:hover {
  background: var(--sky-amber);
  border-color: var(--sky-amber);
  color: #05253C;
  transform: translateY(-3px);
}
.buy p { margin-inline: auto; }

/* ============================================================
   FOOTER — the floor
   ============================================================ */
.footer {
  background: #041D30;
  padding-block: clamp(5rem, 12vh, 8rem) 3rem;
  padding-inline: max(var(--gutter), var(--gauge-w)) var(--gutter);
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 3rem;
  max-width: 1180px;
  margin-inline: auto;
}
.newsletter {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  max-width: 420px;
}
.newsletter input {
  flex: 1 1 200px;
  padding: 0.95rem 1.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--cream) 28%, transparent);
  background: rgba(255,255,255,0.04);
  color: var(--cream-bright);
  font-family: var(--body);
  font-size: var(--step--1);
}
.newsletter input::placeholder { color: color-mix(in oklab, var(--cream) 45%, transparent); }
.newsletter input:focus { border-color: var(--sky-amber); outline: none; }

.socials {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.socials a {
  color: var(--cream);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.socials a:hover { color: var(--sky-amber); border-color: var(--sky-amber); }

.footer__base {
  max-width: 1180px;
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(212,194,156,0.14);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--cream) 55%, transparent);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero__inner,
  .synopsis__grid,
  .author__grid {
    grid-template-columns: 1fr;
  }
  .hero__inner { text-align: center; gap: 2.5rem; }
  .hero__hook, .hero__title { margin-inline: auto; }
  .hero__cover-col { order: -1; }
  .synopsis__cover { position: static; max-width: 260px; margin-inline: auto; }
  .author__portrait { max-width: 340px; margin-inline: auto; }
  .hero { min-height: auto; }
  .scroll-cue { display: none; }
  .book { height: min(42vh, 350px); }
  .hero__actions { justify-content: center; }
  .hero__kicker::before { display: none; }
  .hero__hook { margin-inline: auto; }
  /* portrait crop of the landscape keeps the mountain in frame */
  .hero__scene { background-position: 54% 38%; }
  /* vertical-only wash on mobile — keeps the mountain visible while the
     type below it stays legible */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(4,26,40,0.30) 0%,
        rgba(4,26,40,0.10) 26%,
        rgba(4,26,40,0.48) 56%,
        rgba(3,32,48,0.72) 80%,
        rgba(0,65,84,0.92) 100%);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hook__line span { opacity: 1; transform: none; }
  .caustics, .motes { display: none; }
  .hero__text > * { animation: none; opacity: 1; transform: none; }
  /* the idle float lives on the img; scroll motion is skipped in main.js */
  .book img { animation: none; }
  .book { transform: none !important; opacity: 1 !important; }
}