/* =========================================================================
   Manifested Healing
   Colours sampled from the book cover: midnight navy sky, dusty plum,
   rose gold lettering, warm blush skin tones, ivory.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* night
     One shared base for every dark surface. Adjacent dark sections used to
     carry slightly different backgrounds, which showed up as a seam. */
  --night-base: #0a0f22;
  --night-900: #060a18;
  --night-800: #0a0f22;
  --night-700: #121630;
  --plum-900: #201b33;
  --plum-800: #2c2540;
  --plum-700: #3c3049;
  --plum-600: #4c3e52;

  /* mid */
  --mauve-500: #6b5769;
  --mauve-400: #8a7286;
  --mauve-300: #ab97a6;

  /* warm */
  --rose: #c59086;
  --copper: #c9906f;
  --copper-bright: #ddab8b;
  --copper-ink: #85502f;
  --blush: #f2cdba;

  /* light surfaces
     Warmer and a step deeper than plain ivory. Near white against the cosmic
     navy was too big a jump and the alternation read as stripes. */
  --cream: #f0e7dc;
  --cream-2: #f5eee5;
  --cream-3: #e6dbcd;
  /* same three as rgb triplets, so a gradient can vary their alpha */
  --cream-rgb: 240, 231, 220;
  --cream-2-rgb: 245, 238, 229;
  --cream-3-rgb: 230, 219, 205;

  /* text */
  --ink: #241d33;
  --ink-soft: #4a4059;
  --ink-mute: #64596f;
  --on-night: #ece5f0;
  --on-night-soft: #bdb1c6;
  --on-night-mute: #96899f;

  /* lines */
  --line-light: rgba(36, 29, 51, 0.13);
  --line-lighter: rgba(36, 29, 51, 0.07);
  --line-night: rgba(236, 229, 240, 0.14);
  --line-copper: rgba(201, 144, 111, 0.42);

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Constantia, Cambria, Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui,
    "Helvetica Neue", Arial, sans-serif;

  /* metrics */
  --wrap: 1180px;
  --prose: 44rem;
  --header-h: 74px;
  --radius: 3px;
  --radius-lg: 6px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-soft: 0 1px 2px rgba(36, 29, 51, 0.04),
    0 8px 28px rgba(36, 29, 51, 0.06);
}

/* ---------- 2. Reset & base --------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 1.15em;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--blush);
  color: var(--ink);
}

/* focus */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--cream-2);
  color: var(--ink);
  font-size: 0.9rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

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

/* ---------- 3. Typography scale ----------------------------------------- */

.d1 {
  font-size: clamp(2.25rem, 6.4vw, 4.35rem);
  line-height: 1.06;
}

.d2 {
  font-size: clamp(2rem, 4.4vw, 3.05rem);
  line-height: 1.1;
}

.d3 {
  font-size: clamp(1.5rem, 2.7vw, 1.95rem);
  line-height: 1.2;
}

.d4 {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  line-height: 1.28;
}

.lede {
  font-size: clamp(1.075rem, 1.55vw, 1.24rem);
  line-height: 1.66;
  color: var(--ink-soft);
}

.small {
  font-size: 0.925rem;
  line-height: 1.6;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin-bottom: 1.1rem;
}

.on-night .eyebrow,
.eyebrow--night {
  color: var(--copper);
}

.mute {
  color: var(--ink-mute);
}

.balance {
  text-wrap: balance;
}

/* ---------- 4. Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.wrap--narrow {
  max-width: 56rem;
}

.prose {
  max-width: var(--prose);
}

.section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  position: relative;
}

.section--tight {
  padding-block: clamp(3.25rem, 6vw, 5rem);
}

.section--cream {
  background: var(--cream);
}

.section--cream2 {
  background: var(--cream-2);
}

.section--cream3 {
  background: var(--cream-3);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.on-night {
  background: var(--night-base);
  color: var(--on-night);
}

/* Every dark surface shares one base colour, so where two dark sections meet
   there is nothing to see. The accent on each is a gradient that fades to
   transparent, never a different flat colour. */
.on-night,
.cta-band,
.purchase,
.footer,
.hero,
.bookhero,
.pagehero {
  background-color: var(--night-base);
}

/* Stars and constellations across the cosmic sections, not only the hero.
   Carried as a background image so it costs no markup. */
.on-night,
.cta-band,
.cta-card,
.purchase,
.footer {
  isolation: isolate;
}

.on-night::before,
.cta-band::before,
.cta-card::before,
.purchase::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%23c9906f' stroke-width='1' opacity='.2'%3E%3Cpolyline points='110,130 235,200 330,128 452,205'/%3E%3Cpolyline points='1145,105 1268,172 1382,118'/%3E%3Cpolyline points='975,545 1078,488 1180,558 1148,682'/%3E%3Cpolyline points='195,635 298,698 238,788'/%3E%3Cpolyline points='620,760 735,700 830,772'/%3E%3C/g%3E%3Cg fill='%23f2cdba'%3E%3Ccircle cx='110' cy='130' r='2.2' opacity='.6'/%3E%3Ccircle cx='235' cy='200' r='1.5' opacity='.45'/%3E%3Ccircle cx='330' cy='128' r='2' opacity='.55'/%3E%3Ccircle cx='452' cy='205' r='1.4' opacity='.4'/%3E%3Ccircle cx='1145' cy='105' r='1.8' opacity='.5'/%3E%3Ccircle cx='1268' cy='172' r='2.2' opacity='.6'/%3E%3Ccircle cx='1382' cy='118' r='1.5' opacity='.45'/%3E%3Ccircle cx='975' cy='545' r='1.6' opacity='.45'/%3E%3Ccircle cx='1078' cy='488' r='2.1' opacity='.55'/%3E%3Ccircle cx='1180' cy='558' r='1.4' opacity='.4'/%3E%3Ccircle cx='1148' cy='682' r='1.8' opacity='.5'/%3E%3Ccircle cx='195' cy='635' r='1.6' opacity='.45'/%3E%3Ccircle cx='298' cy='698' r='2' opacity='.55'/%3E%3Ccircle cx='238' cy='788' r='1.5' opacity='.4'/%3E%3Ccircle cx='620' cy='760' r='1.7' opacity='.45'/%3E%3Ccircle cx='735' cy='700' r='2' opacity='.5'/%3E%3Ccircle cx='830' cy='772' r='1.4' opacity='.4'/%3E%3Ccircle cx='520' cy='90' r='1.1' opacity='.35'/%3E%3Ccircle cx='700' cy='180' r='1' opacity='.3'/%3E%3Ccircle cx='880' cy='70' r='1.2' opacity='.35'/%3E%3Ccircle cx='430' cy='330' r='1' opacity='.3'/%3E%3Ccircle cx='640' cy='420' r='1.1' opacity='.32'/%3E%3Ccircle cx='1420' cy='420' r='1.2' opacity='.35'/%3E%3Ccircle cx='60' cy='300' r='1.3' opacity='.38'/%3E%3Ccircle cx='1520' cy='760' r='1' opacity='.3'/%3E%3Ccircle cx='90' cy='480' r='1.1' opacity='.32'/%3E%3Ccircle cx='760' cy='300' r='1' opacity='.28'/%3E%3Ccircle cx='1300' cy='330' r='1.2' opacity='.34'/%3E%3Ccircle cx='380' cy='480' r='1' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
}

/* a different patch of sky in each section so it never reads as a repeat */
.cta-band::before,
.cta-card::before {
  background-position: 22% 28%;
}

.purchase::before {
  background-position: 72% 42%;
}

.footer::before {
  background-position: 45% 72%;
  opacity: 0.55;
}

.on-night .lede,
.on-night .mute {
  color: var(--on-night-soft);
}

.on-night a {
  color: var(--copper-bright);
}

/* ---------- 5. Celestial ornaments -------------------------------------- */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  color: var(--copper);
}

.divider__line {
  height: 1px;
  width: min(180px, 22vw);
  background: linear-gradient(
    to var(--dir, right),
    transparent,
    var(--line-copper)
  );
}

.divider__line--l {
  --dir: left;
}

.divider__mark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--copper);
}

.divider__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.moon {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--copper);
}

.star4 {
  width: 0.75em;
  height: 0.75em;
  flex: none;
  color: var(--copper);
  opacity: 0.85;
}

/* faint constellation field for dark sections */
.starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.starfield svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.starfield .cst-line {
  stroke: var(--copper);
  stroke-width: 0.6;
  opacity: 0.16;
  fill: none;
}

.starfield .cst-star {
  fill: var(--blush);
  opacity: 0.5;
}

.starfield .cst-star--tw {
  animation: twinkle 6s ease-in-out infinite;
}

.starfield .cst-star--tw:nth-of-type(3n) {
  animation-delay: -2.4s;
}

.starfield .cst-star--tw:nth-of-type(3n + 1) {
  animation-delay: -4.1s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.72;
  }
}

/* Soft radial glow.
   It used to be a blurred circle positioned partly outside its section, so
   overflow hidden sliced the blur and left a visible arc at the boundary.
   It is now a full bleed gradient: it fills the section exactly and fades to
   transparent inside its own box, so there is nothing left to clip. */
.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Sits above the starfield and below the content. Centred well inside the
     section so it is already transparent at the top and bottom edges, which is
     what stops it showing a cut line where two sections meet. */
  z-index: -2;
}

/* ---------- 6. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.0625rem 2.15rem;
  font-family: var(--font-body);
  font-size: 0.965rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
    border-color 0.28s var(--ease), transform 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
}

.btn--primary {
  background: linear-gradient(180deg, #cf9878 0%, #bd815f 100%);
  color: #1a1226;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 10px 26px rgba(150, 96, 63, 0.28);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: linear-gradient(180deg, #dda98a 0%, #c78d69 100%);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 16px 34px rgba(150, 96, 63, 0.32);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-light);
  color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--copper);
  color: var(--copper-ink);
}

.on-night .btn--ghost {
  border-color: var(--line-night);
  color: var(--on-night);
}

.on-night .btn--ghost:hover,
.on-night .btn--ghost:focus-visible {
  border-color: var(--copper);
  color: var(--copper-bright);
}

.btn--lg {
  padding: 1.22rem 2.9rem;
  font-size: 1.03rem;
}

.btn--block {
  width: 100%;
}

/* quiet text link with a copper rule */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--copper-ink);
  border-bottom: 1px solid var(--line-copper);
  padding-bottom: 2px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.tlink:hover,
.tlink:focus-visible {
  color: var(--ink);
  border-color: var(--copper);
}

.on-night .tlink {
  color: var(--copper-bright);
}

.on-night .tlink:hover,
.on-night .tlink:focus-visible {
  color: var(--on-night);
}

.cta-note {
  margin-top: 1.15rem;
  font-size: 0.875rem;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}

.on-night .cta-note {
  color: var(--on-night-mute);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.35rem 1.85rem;
}

/* ---------- 7. Header ---------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease),
    border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}

.header.is-stuck {
  background: rgba(20, 17, 44, 0.84);
  -webkit-backdrop-filter: saturate(135%) blur(10px);
  backdrop-filter: saturate(135%) blur(10px);
  border-bottom-color: var(--line-night);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  padding-block: 0.85rem;
  text-decoration: none;
  color: var(--on-night);
  font-family: var(--font-display);
  /* Shrinks on narrow phones. At a fixed size it was 250px wide and pushed
     the burger clean off the screen, which body overflow-x hidden then hid. */
  font-size: clamp(0.8rem, 3.4vw, 1.02rem);
  letter-spacing: clamp(0.05em, 0.4vw, 0.11em);
  text-transform: uppercase;
  white-space: nowrap;
}

/* the real logo, a rose gold crescent inside a sunburst */
.brand__mark {
  flex: none;
  width: clamp(24px, 4.5vw, 30px);
  height: auto;
}

.brand:hover {
  color: var(--copper-bright);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2.15rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2.15rem;
}

.nav__link {
  position: relative;
  text-decoration: none;
  color: var(--on-night-soft);
  font-size: 0.905rem;
  letter-spacing: 0.055em;
  padding-block: 0.35rem;
  transition: color 0.24s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

/* 44px tap area without pushing the underline away from the word */
.nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] {
  color: var(--on-night);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav .btn {
  padding: 0.72rem 1.4rem;
  font-size: 0.865rem;
}

.burger {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-night);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--on-night);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* mobile panel */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--night-800);
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem) 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s;
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav a:not(.btn) {
  display: block;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-night);
  color: var(--on-night);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.mobile-nav a[aria-current="page"] {
  color: var(--copper-bright);
}

.mobile-nav .btn {
  margin-top: 2rem;
}

.mobile-nav__brand {
  display: flex;
  flex: 1 0 8rem;
  min-height: 8rem;
  align-items: center;
  justify-content: center;
  padding-block: 2rem 1rem;
}

.mobile-nav__brand img {
  width: 5rem;
  height: 5rem;
  opacity: 0.78;
  filter: drop-shadow(0 0 1.5rem rgba(201, 144, 111, 0.22));
}

body.nav-open {
  overflow: hidden;
}

/* ---------- 8. Hero ------------------------------------------------------ */

/* The hero stays cosmic edge to edge. It used to carry a cream tinted fade
   across its last 120px, which read as a pale band at the bottom. */
.hero {
  position: relative;
  background-color: var(--night-base);
  background-image: radial-gradient(
      120% 90% at 50% -18%,
      rgba(58, 45, 88, 0.85) 0%,
      rgba(58, 45, 88, 0) 62%
    ),
    linear-gradient(180deg, var(--night-900) 0%, var(--night-700) 60%, #241d3f 100%);
  color: var(--on-night);
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  /* Owns the whole first screen. Without this the hero ended above the fold on
     tall displays and a strip of the cream section below showed as a pale line. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
}

/* Book first, copy second. The render is angled to the right, so it belongs on
   the left where it points into the headline rather than off the page. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  /* Wide gutter on purpose. The render carries its visual weight on the right
     hand side, where the lit front cover is, so it needs more clearance from
     the headline than a flat cover image did. */
  gap: clamp(2.75rem, 7.5vw, 8.5rem);
}

.hero__copy h1 {
  margin-bottom: 1.5rem;
}

.hero__sub {
  font-size: clamp(1.075rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--on-night-soft);
  max-width: 34rem;
  margin-bottom: 2.35rem;
}

.hero__cta {
  margin-bottom: 0;
}

.hero .glow {
  background: radial-gradient(
    54% 54% at 26% 46%,
    rgba(201, 144, 111, 0.24) 0%,
    rgba(139, 96, 132, 0.12) 44%,
    rgba(139, 96, 132, 0) 76%
  );
}

/* book object
   The artwork is a real 3D render with a transparent background, so the spine
   and the page block are in the image itself. Nothing is faked in CSS here.
   The shadow uses drop-shadow rather than box-shadow so that it follows the
   book's silhouette instead of drawing a rectangle behind a transparent PNG. */
.book {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: clamp(240px, 30vw, 370px);
  transition: transform 0.7s var(--ease);
}

.book:hover {
  transform: translateY(-7px);
}

.book__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(6, 10, 24, 0.3))
    drop-shadow(0 20px 38px rgba(6, 10, 24, 0.42));
}

/* on the cream sections the shadow needs to be lighter and closer */
.section--cream .book__img,
.section--cream2 .book__img,
.section--cream3 .book__img {
  filter: drop-shadow(0 2px 5px rgba(36, 29, 51, 0.16))
    drop-shadow(0 16px 32px rgba(36, 29, 51, 0.22));
}

/* ---------- 9. Recognition section --------------------------------------- */

/* The min() guard stops the track floor from forcing a horizontal scrollbar
   on screens narrower than the floor itself. Same pattern on every auto-fit
   grid below. */
.recog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--line-lighter);
  border: 1px solid var(--line-lighter);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.recog {
  background: var(--cream-2);
  padding: clamp(1.7rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: background-color 0.35s var(--ease);
}

.recog:hover {
  background: #fffdfa;
}

.recog__tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recog__tag--quiet {
  color: var(--ink-mute);
  opacity: 0.62;
}

.recog__text {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.65vw, 1.35rem);
  line-height: 1.34;
  color: var(--ink);
  margin: 0;
}

.recog--obs .recog__text {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: 0.002em;
}

.recog-close {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.recog-close p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.36;
  color: var(--ink);
}

/* Chapter titles and real-life examples are kept in the same card so their
   relationship remains obvious at every screen width. */
.recog-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.recog-pair {
  display: grid;
  grid-template-rows: 10rem 1fr;
  overflow: hidden;
  border: 1px solid var(--line-lighter);
  border-radius: var(--radius-lg);
  background: var(--cream-2);
  box-shadow: var(--shadow-soft);
}

.recog-pair__chapter {
  padding: clamp(1.6rem, 2.5vw, 2.15rem);
}

.recog-pair__chapter h3 {
  margin-top: 0.75rem;
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  line-height: 1.3;
}

.recog-pair__example {
  padding: 1.25rem clamp(1.6rem, 2.5vw, 2.15rem) 1.45rem;
  border-top: 1px solid rgba(36, 29, 51, 0.14);
  background: #e7ddd2;
}

.recog-pair__example span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--copper-ink);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.recog-pair__example p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- 10. Reframe cards -------------------------------------------- */

.reframe-list {
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

.reframe {
  background: var(--cream-2);
  border: 1px solid var(--line-lighter);
  border-top: 2px solid var(--line-copper);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 2.6vw, 2.3rem);
  box-shadow: var(--shadow-soft);
}

.reframe h3 {
  font-size: clamp(1.2rem, 1.75vw, 1.42rem);
  margin-bottom: 0.85rem;
  line-height: 1.26;
}

.reframe p {
  color: var(--ink-soft);
  font-size: 1rem;
}

.reframe-more {
  margin: 1.35rem auto clamp(2.5rem, 5vw, 4rem);
  max-width: 24rem;
  color: var(--ink-mute);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 0.62;
}

.reframe-more:last-child {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- 11. Gates grid ----------------------------------------------- */

.gates {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-night);
  border-block: 1px solid var(--line-night);
}

.gates.built-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1040px) {
  .gates.built-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gates.built-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1500px) {
  .gates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.section.home-gates {
  padding-bottom: 0;
  scroll-margin-top: var(--header-h);
}

.section[id] {
  scroll-margin-top: var(--header-h);
}

.gate {
  background: var(--night-base);
  padding: clamp(2rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background-color 0.4s var(--ease);
}

.home-gates .gate {
  display: grid;
  grid-template-rows: 3.4rem 5.9rem 1fr;
  align-content: start;
}

.gate:hover {
  background: #1b1738;
}

.gate__top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--copper);
}

.gate__top .moon {
  font-size: 1.35rem;
}

.gate__part {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

.gate__name {
  font-family: var(--font-display);
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-night-mute);
}

.gate h3 {
  font-size: clamp(1.28rem, 1.9vw, 1.52rem);
  color: var(--on-night);
  line-height: 1.24;
}

.gate p {
  color: var(--on-night-soft);
  font-size: 0.985rem;
  margin: 0;
}

/* ---------- 13. Practices ------------------------------------------------ */

.practices {
  border-top: 1px solid var(--line-light);
}

.practice {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(20rem, 1.8fr) auto;
  align-items: center;
  gap: 0.6rem 1.75rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-lighter);
}

.practice__name {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  color: var(--ink);
}

.practice__cost {
  font-size: 0.925rem;
  color: var(--ink-mute);
}

.practice__ch {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
  white-space: nowrap;
  opacity: 0.85;
}

.practices-note {
  margin-top: 2rem;
  max-width: 40rem;
  color: var(--ink-soft);
}

/* ---------- 13b. Reader screenshots ------------------------------------ */

.reviews {
  overflow: hidden;
  border-top: 1px solid var(--line-lighter);
}

.reviews > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head controls"
    "viewport viewport"
    "hint hint";
  align-items: end;
}

.reviews__head {
  grid-area: head;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reviews__head .section-head {
  margin-bottom: 0;
}

.reviews__controls {
  grid-area: controls;
  display: flex;
  gap: 0.65rem;
  flex: none;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reviews__nav {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-copper);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  transition:
    color 0.25s var(--ease),
    background-color 0.25s var(--ease),
    opacity 0.25s var(--ease);
}

.reviews__nav:hover:not(:disabled),
.reviews__nav:focus-visible {
  background: var(--copper);
  color: var(--night-base);
}

.reviews__nav:disabled {
  cursor: default;
  opacity: 0.32;
}

.reviews__viewport {
  grid-area: viewport;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.reviews__viewport::-webkit-scrollbar {
  display: none;
}

.reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2.5rem) / 3);
  gap: 1.25rem;
}

.review-shot {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--cream-3), var(--cream-2));
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
  cursor: zoom-in;
}

.review-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(201, 144, 111, 0.18), transparent 38%),
    radial-gradient(circle at 84% 82%, rgba(107, 87, 105, 0.09), transparent 40%);
}

.review-shot:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.review-shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-shot--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--ink-mute);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(201, 144, 111, 0.06), transparent 48%),
    #fff;
}

.review-shot--placeholder::before,
.review-shot--placeholder::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--line-lighter);
}

.review-shot--placeholder::before {
  top: 16%;
}

.review-shot--placeholder::after {
  bottom: 16%;
}

.review-shot__mark {
  color: var(--copper);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.6rem);
  line-height: 0.7;
}

.review-shot__label {
  max-width: 12rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.review-shot__number {
  color: var(--copper-ink);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.reviews__hint {
  grid-area: hint;
  margin-top: 1.15rem;
  color: var(--ink-mute);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.review-lightbox {
  width: min(92vw, 960px);
  max-width: none;
  height: min(92vh, 980px);
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.review-lightbox::backdrop {
  background: rgba(5, 7, 18, 0.82);
  backdrop-filter: blur(5px);
}

.review-lightbox__inner {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.review-lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42);
}

.review-lightbox img[hidden],
.review-lightbox__placeholder[hidden] {
  display: none;
}

.review-lightbox__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(82vw, 560px);
  aspect-ratio: 4 / 5;
  gap: 0.9rem;
  padding: 2rem;
  border: 1px solid rgba(201, 144, 111, 0.35);
  border-radius: var(--radius-lg);
  color: var(--ink-mute);
  text-align: center;
  background: var(--cream-2);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42);
}

.review-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(10, 15, 34, 0.96);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.review-lightbox__close:hover,
.review-lightbox__close:focus-visible {
  background: var(--copper);
  color: var(--night-base);
  -webkit-text-fill-color: var(--night-base);
}

.review-lightbox__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(245, 238, 229, 0.95);
  color: var(--ink);
  font-size: 1.2rem;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
}

.review-lightbox__nav:hover,
.review-lightbox__nav:focus-visible {
  background: var(--copper);
  color: var(--night-base);
}

.review-lightbox__nav--prev {
  left: max(0.75rem, calc(50% - 23rem));
}

.review-lightbox__nav--next {
  right: max(0.75rem, calc(50% - 23rem));
}

/* reading cycle stepper */
.cycle {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.cycle::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 21px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--line-copper) 12%,
    var(--line-copper) 88%,
    transparent
  );
}

.cycle__step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.cycle__disc {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line-copper);
  display: grid;
  place-items: center;
  color: var(--copper-ink);
  position: relative;
  z-index: 1;
}

.cycle__disc .moon {
  font-size: 1.1rem;
  color: var(--copper-ink);
}

.cycle__label {
  font-size: 0.86rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

/* ---------- 15. Pull quote ----------------------------------------------- */

.pq {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  padding-inline: clamp(0rem, 3vw, 2rem);
}

.pq blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 3vw, 2.15rem);
  line-height: 1.34;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.on-night .pq blockquote {
  color: var(--on-night);
}

.pq blockquote p + p {
  margin-top: 0.85em;
}

.pq figcaption {
  margin-top: 1.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.on-night .pq figcaption {
  color: var(--copper);
}

.pq--inline {
  margin-block: clamp(2rem, 4vw, 3rem);
  margin-inline: 0;
  text-align: left;
  padding-left: 1.6rem;
  border-left: 2px solid var(--line-copper);
  max-width: 40rem;
}

.pq--inline blockquote {
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
}

.pq--inline figcaption {
  margin-top: 1.1rem;
}

/* Standalone quote beat on a light ground.
   This used to be a short dark section wedged between two cream ones, which
   read as a stripe. It keeps its weight from scale and rules instead. */
.quote-band {
  background: var(--cream-3);
  border-block: 1px solid var(--line-copper);
}

.quote-band .pq blockquote {
  color: var(--ink);
}

.quote-band .pq figcaption {
  color: var(--copper-ink);
}

.quote-band .pq::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-inline: auto;
  background: var(--line-copper);
}

.quote-band .pq::before {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.quote-band__celestial {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) auto minmax(2.5rem, 1fr);
  align-items: center;
  gap: 0.85rem;
  width: min(240px, 70%);
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  color: var(--copper);
}

.quote-band__celestial span {
  height: 1px;
  background: var(--line-copper);
}

.quote-band__celestial .moon {
  width: 19px;
  height: 19px;
}

/* ---------- 16. Book preview --------------------------------------------- */

.preview {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6.5vw, 7rem);
  align-items: center;
}

.preview__meta {
  margin-bottom: 2rem;
}

.preview__title {
  font-size: clamp(2rem, 3.6vw, 2.65rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}

.preview__sub {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.preview__author {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-block: 1.85rem;
}

.chip {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  color: var(--ink-soft);
  background: var(--cream-2);
}

/* ---------- 17. Author --------------------------------------------------- */

.author {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

.author__card {
  border: 1px solid var(--line-night);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: rgba(255, 255, 255, 0.025);
}

.author__mark {
  display: block;
  width: 52px;
  height: auto;
  margin-bottom: 1.25rem;
}

.author__name {
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  margin-bottom: 0.5rem;
}

.author__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1.4rem;
}

.author__card p {
  color: var(--on-night-soft);
  font-size: 0.98rem;
}

/* ---------- 18. CTA bands ------------------------------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-night);
}

/* ---- transitions between a cream section and a dark one ------------------
   Two treatments, chosen by how much dark there is.

   Large full width dark sections get a copper hairline at each cream edge,
   with a moon medallion sitting on the line you cross going into the dark.
   The medallion straddles the border, so the section must not clip it.

   Short dark stretches, meaning the calls to action, stop being full width
   bands altogether. They become a panel resting on the cream, which removes
   the striping rather than trying to soften it, and the inset shadow gives
   the cream edge somewhere to fall.
   -------------------------------------------------------------------------- */

.edge-top {
  border-top: 1px solid var(--line-copper);
}

.edge-bottom {
  border-bottom: 1px solid var(--line-copper);
}

.edge-mark {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-copper);
  background: var(--cream);
  color: var(--copper-ink);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.edge-mark svg {
  width: 17px;
  height: 17px;
}

/* the medallion matches whichever cream is directly above it */
.edge-mark--c2 {
  background: var(--cream-2);
}

.edge-mark--c3 {
  background: var(--cream-3);
}

/* the cream section that holds a call to action panel */
.cta-panel {
  background: var(--cream);
}

.cta-panel--c3 {
  background: var(--cream-3);
}

/* The pill. Lifted off the cream, so the shadow is all on the outside. */
.cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  background: var(--night-base);
  color: var(--on-night);
  padding: clamp(2.75rem, 6vw, 4.25rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 4px 10px rgba(10, 15, 34, 0.2),
    0 18px 32px rgba(10, 15, 34, 0.24), 0 42px 90px rgba(10, 15, 34, 0.36);
}

.home-practices {
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

.home-cta-panel {
  padding-block: clamp(0.75rem, 1.5vw, 1.25rem) clamp(2.75rem, 5vw, 4.5rem);
}

.home-reframe {
  padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.home-cta-inline {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--line-copper);
  border-bottom: 1px solid var(--line-lighter);
  color: var(--ink);
}

.home-cta-inline::before {
  content: "✦";
  position: absolute;
  top: 0;
  left: 50%;
  padding-inline: 0.85rem;
  transform: translate(-50%, -55%);
  background: var(--cream);
  color: var(--copper);
  font-size: 0.8rem;
}

.home-cta-inline p {
  color: var(--ink-soft);
  margin: 0 auto 2rem;
  max-width: 42rem;
}

.home-cta-inline h2 {
  margin-bottom: 1rem;
}

.home-cta-panel .cta-row {
  justify-content: center;
}

.book-mid-cta {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.book-mid-cta .home-cta-inline {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.book-mid-cta .cta-row {
  justify-content: center;
}

.section.home-gates,
.section.home-author {
  z-index: 3;
  overflow: visible;
}

/* The sunken one. Full width, and the cream above falls into it instead. */
.cta-sunken {
  box-shadow: inset 0 26px 40px -20px rgba(0, 0, 0, 0.95),
    inset 0 12px 18px -12px rgba(0, 0, 0, 0.7);
}

/* the cream section directly above a sunken one, catching the same edge */
.sink-bottom {
  box-shadow: inset 0 -22px 30px -24px rgba(10, 15, 34, 0.7);
}

.cta-card .cta-band__inner {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.cta-band .glow,
.cta-card .glow {
  background: radial-gradient(
    72% 60% at 50% 46%,
    rgba(201, 144, 111, 0.19) 0%,
    rgba(139, 96, 132, 0.09) 44%,
    rgba(139, 96, 132, 0) 78%
  );
}

.cta-band__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.cta-band h2 {
  margin-bottom: 1.15rem;
}

.cta-band p {
  color: var(--on-night-soft);
  margin-bottom: 2.25rem;
}

.cta-band .cta-row {
  justify-content: center;
}

.cta-final {
  padding-block: clamp(5.5rem, 11vw, 9.5rem);
}

.home-author {
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.night-seam {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 1.75rem;
  background: var(--night-base);
  color: var(--copper);
}

.night-seam span {
  width: min(220px, 32vw);
  height: 2px;
  background: var(--line-copper);
}

.night-seam span:last-child {
  transform: none;
}

.night-seam .star4 {
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

.home-final-cta {
  padding-top: clamp(3.75rem, 7vw, 6rem);
  border-top: 0;
}

/* ---------- 19. Book page ------------------------------------------------ */

.bookhero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: radial-gradient(
      72% 72% at 30% 50%,
      rgba(201, 144, 111, 0.14) 0%,
      rgba(139, 96, 132, 0.08) 42%,
      transparent 72%
    ),
    radial-gradient(
      100% 80% at 70% 0%,
      rgba(58, 45, 88, 0.88) 0%,
      rgba(58, 45, 88, 0) 60%
    ),
    linear-gradient(180deg, var(--night-900), var(--plum-900));
  color: var(--on-night);
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 4.75rem));
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.bookhero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.bookhero .glow {
  background: radial-gradient(
    54% 66% at 30% 50%,
    rgba(221, 171, 139, 0.28) 0%,
    rgba(139, 96, 132, 0.14) 42%,
    rgba(107, 87, 105, 0) 76%
  );
}

.bookhero__visual {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.bookhero__visual::before,
.bookhero__visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(201, 144, 111, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(201, 144, 111, 0.07);
}

.bookhero__visual::before {
  width: 88%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(221, 171, 139, 0.16) 0%,
    rgba(139, 96, 132, 0.08) 43%,
    transparent 70%
  );
}

.bookhero__visual::after {
  width: 64%;
  aspect-ratio: 1;
}

.bookhero__book {
  width: min(440px, 91%);
}

.bookhero__offer {
  align-self: center;
  padding-block: 0.5rem;
}

.bookhero__offer h1 {
  margin-top: 0.55rem;
}

.bookhero__subtitle {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--on-night-soft);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.55;
}

.bookhero__availability {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.55rem;
  color: var(--copper-bright);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bookhero__availability span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--copper-bright);
  box-shadow: 0 0 16px rgba(221, 171, 139, 0.65);
}

.bookhero__price {
  margin-top: 1.2rem;
}

.bookhero__price strong {
  display: block;
  color: var(--on-night);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bookhero__price [data-local-price] {
  display: block;
  margin-top: 0.6rem;
  color: var(--copper-bright);
  font-size: 0.82rem;
  line-height: 1.45;
}

.bookhero__price [data-local-price][hidden] {
  display: none;
}

.bookhero__buy {
  margin-top: 1.25rem;
}

.bookhero__includes {
  margin-top: 1.05rem;
  color: var(--on-night);
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.035em;
}

.bookhero__includes + .bookhero__buy {
  margin-top: 0.8rem;
}

.bookhero__payments {
  margin-top: 0.85rem;
  color: var(--on-night-mute);
  font-size: 0.74rem;
  line-height: 1.65;
}

.bookhero__payments span {
  color: var(--copper);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bookhero__payments b {
  color: inherit;
  font-weight: 400;
  word-spacing: 0.12em;
}

.bookhero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1rem;
  color: var(--on-night-soft);
  font-size: 0.78rem;
}

.bookhero__assurances li::before {
  content: "✓";
  margin-right: 0.42rem;
  color: var(--copper-bright);
}

.bookhero__viewers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--on-night-soft);
  font-size: 0.78rem;
}

.bookhero__viewers strong {
  color: var(--on-night);
  font-variant-numeric: tabular-nums;
}

.bookhero__viewer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55bf75;
  box-shadow: 0 0 12px rgba(85, 191, 117, 0.62);
}

.bookhero__summary {
  margin-top: 1.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-night);
  color: var(--on-night-soft);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.75;
}

.bookhero__summary p {
  margin-bottom: 0.85rem;
}

.bookhero__summary .tlink {
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--line-night);
  border: 1px solid var(--line-night);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2.4rem;
}

.spec div {
  background: rgba(255, 255, 255, 0.02);
  padding: 1.15rem 1.25rem;
}

.spec dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.35rem;
}

.spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--on-night);
}

/* contents by gate */
.toc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.toc__column {
  display: grid;
  align-content: start;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.toc__gate {
  border-top: 2px solid var(--line-copper);
  padding-top: 1.35rem;
}

.toc__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
}

.toc__head .moon {
  font-size: 1.2rem;
  color: var(--copper-ink);
}

.toc__gatename {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.toc__list li {
  display: flex;
  gap: 0.85rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line-lighter);
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.toc__list li:last-child {
  border-bottom: 0;
}

.toc__num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--ink-mute);
  opacity: 0.7;
  min-width: 1.35rem;
  padding-top: 0.28em;
  font-variant-numeric: tabular-nums;
}

/* two column feature list */
.cols2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.feat li {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-lighter);
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: var(--ink-soft);
  line-height: 1.55;
}

.feat li:first-child {
  border-top: 1px solid var(--line-lighter);
}

.feat .star4 {
  margin-top: 0.42em;
}

/* FAQ */
.faq {
  max-width: 50rem;
  border-top: 1px solid var(--line-light);
}

.faq__item {
  border-bottom: 1px solid var(--line-light);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.34;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.faq__q:hover {
  color: var(--copper-ink);
}

.faq__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.22em;
  position: relative;
  color: var(--copper-ink);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.faq__icon::before {
  width: 13px;
  height: 1px;
}

.faq__icon::after {
  width: 1px;
  height: 13px;
}

.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.38s var(--ease);
}

.faq__a > div {
  padding-bottom: 1.65rem;
  max-width: 44rem;
  color: var(--ink-soft);
}

/* purchase */
.purchase {
  position: relative;
  isolation: isolate;
  color: var(--on-night);
}

.purchase .glow {
  background: radial-gradient(
    75% 62% at 50% 46%,
    rgba(201, 144, 111, 0.22) 0%,
    rgba(139, 96, 132, 0.1) 44%,
    rgba(139, 96, 132, 0) 78%
  );
}

/* 0.7fr used to be narrower than the book itself, so the render overflowed its
   own column and ate into the gutter. */
.purchase__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6.5vw, 7rem);
  align-items: center;
}

.purchase__buy {
  margin-top: 2.25rem;
}

/* purchase details */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.slot {
  border: 1px solid rgba(201, 144, 111, 0.38);
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  background: rgba(255, 255, 255, 0.02);
}

.slot dt {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.3rem;
}

.slot dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--on-night-soft);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.slot__local {
  display: block;
  margin-top: 0.35rem;
  color: var(--copper-bright);
  font-size: 0.76rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.slot__local[hidden] {
  display: none;
}

.slots-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--on-night-mute);
  opacity: 0.85;
}

/* ---------- 20. About page ----------------------------------------------- */

.pagehero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: radial-gradient(
      110% 90% at 50% -10%,
      rgba(56, 44, 84, 0.85) 0%,
      rgba(56, 44, 84, 0) 60%
    ),
    linear-gradient(180deg, var(--night-900), var(--night-700));
  color: var(--on-night);
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.pagehero__inner {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  margin-inline: auto;
}

.pagehero .glow {
  background: radial-gradient(
    70% 58% at 50% 46%,
    rgba(201, 144, 111, 0.18) 0%,
    rgba(139, 96, 132, 0.09) 44%,
    rgba(139, 96, 132, 0) 78%
  );
}

.article {
  max-width: var(--prose);
}

.article h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  margin-bottom: 1.1rem;
}

.article h2:first-child {
  margin-top: 0;
}

.article p {
  color: var(--ink-soft);
}

.article p.first {
  font-size: clamp(1.09rem, 1.5vw, 1.2rem);
  color: var(--ink);
  line-height: 1.62;
}

.stack {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* ---------- 21. Contact -------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.contact-section {
  position: relative;
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  max-width: 66rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 18px;
  background: var(--cream-2);
  box-shadow: 0 24px 70px rgba(36, 29, 51, 0.13);
}

.contact-note {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: clamp(2.2rem, 4vw, 3.5rem);
  overflow: hidden;
  color: var(--on-night);
  background:
    radial-gradient(circle at 24% 18%, rgba(221, 171, 139, 0.17), transparent 30%),
    radial-gradient(circle at 76% 78%, rgba(139, 96, 132, 0.22), transparent 35%),
    var(--night-base);
}

.contact-note::before,
.contact-note::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.contact-note::before {
  inset: 0;
  opacity: 0.52;
  background-image:
    radial-gradient(circle at 15% 20%, var(--copper-bright) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 15%, var(--copper-bright) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 54%, var(--copper-bright) 0 1.5px, transparent 2px),
    radial-gradient(circle at 26% 72%, var(--copper-bright) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 88%, var(--copper-bright) 0 1px, transparent 1.5px);
}

.contact-note::after {
  right: -58px;
  bottom: -68px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(201, 144, 111, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(201, 144, 111, 0.035);
}

.contact-note__mark {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
}

.contact-note__intro {
  position: relative;
  z-index: 2;
}

.contact-note__copy {
  max-width: 17rem;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.55;
  color: var(--on-night-soft);
}

.contact-note__constellation {
  position: absolute;
  z-index: 1;
  top: 24%;
  left: 7%;
  width: 86%;
  height: 43%;
  overflow: visible;
  pointer-events: none;
}

.contact-note__constellation polyline {
  fill: none;
  stroke: rgba(201, 144, 111, 0.38);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.contact-note__constellation circle {
  fill: var(--copper-bright);
  opacity: 0.76;
}

.contact-note .pq {
  position: relative;
  z-index: 1;
  margin-top: clamp(5rem, 12vw, 9rem);
  margin-bottom: 0;
  border-left-color: var(--copper);
}

.contact-note .pq blockquote {
  color: var(--on-night);
}

.contact-note .pq figcaption {
  color: var(--copper);
}

.contact-shell .form {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(2rem, 4vw, 3.25rem);
}

.form {
  display: grid;
  gap: 1.35rem;
  background: var(--cream-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .req {
  color: var(--copper-ink);
  margin-left: 0.25rem;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2396603f' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}

.field textarea {
  min-height: 168px;
  resize: vertical;
  line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(201, 144, 111, 0.16);
}

.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
  border-color: #b3574a;
}

.field .hint {
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.form__status {
  border: 1px dashed rgba(201, 144, 111, 0.6);
  background: rgba(201, 144, 111, 0.07);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.form__status.is-success {
  border-style: solid;
  border-color: rgba(72, 142, 95, 0.42);
  background: rgba(72, 142, 95, 0.08);
  color: #315e40;
}

.form__status.is-error {
  border-style: solid;
  border-color: rgba(179, 87, 74, 0.42);
  background: rgba(179, 87, 74, 0.07);
  color: #7c3c34;
}

.legal {
  max-width: 52rem;
}

.legal h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.legal p,
.legal li {
  color: var(--ink-soft);
}

.legal ul {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.2rem;
  list-style: disc;
}

.form__status[hidden] {
  display: none;
}

.form__status a {
  color: var(--copper-ink);
}

/* ---------- 22. Footer --------------------------------------------------- */

.footer {
  position: relative;
  background-image: linear-gradient(180deg, var(--night-base), var(--night-900) 55%);
  color: var(--on-night-soft);
  padding-block: clamp(3.5rem, 6vw, 5rem) 1.15rem;
  font-size: 0.94rem;
}

.footer__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.25rem);
}

/* One rule, and it runs the full width of the page rather than stopping at
   the content column. It sits outside .wrap for exactly that reason. */
.footer__rule {
  position: relative;
  z-index: 2;
  height: 1px;
  background: var(--line-night);
}

.footer__mark {
  display: block;
  width: 48px;
  height: auto;
  margin-bottom: 1.1rem;
}

.footer__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-night);
  margin-bottom: 0.55rem;
}

.footer__sub {
  max-width: 26rem;
  color: var(--on-night-mute);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer h2 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1.15rem;
}

.footer__links li {
  margin-bottom: 0.7rem;
}

.footer__links a {
  text-decoration: none;
  color: var(--on-night-soft);
  transition: color 0.22s var(--ease);
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--copper-bright);
}

.footer__bottom {
  position: relative;
  z-index: 2;
  padding-top: 1rem;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 0.82rem;
  color: var(--on-night-mute);
}

/* ---------- 23. Sticky mobile CTA ---------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  padding: 0.7rem clamp(0.85rem, 4vw, 1.25rem)
    calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 17, 44, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--line-night);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}

.sticky-cta.is-shown {
  transform: translateY(0);
}

.sticky-cta__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sticky-cta__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.05;
  color: var(--on-night);
}

.sticky-cta__label::after {
  content: "by Lena Orvail";
  margin-top: 0.28rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--on-night-mute);
  opacity: 0.62;
}

.sticky-cta .btn {
  padding: 0.85rem 1.4rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ---------- 24. Reveal on scroll ----------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 25. Responsive -----------------------------------------------
   Most of the readers this book is for will arrive on a phone, so the small
   screens get the attention here rather than the leftovers.
   -------------------------------------------------------------------------- */

/* ---- tablet and narrow laptop: the two column layouts stack ---- */
@media (max-width: 1040px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 2.75rem;
  }

  .bookhero__inner,
  .preview,
  .author,
  .purchase__inner,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .bookhero__inner,
  .preview,
  .purchase__inner {
    gap: 2.75rem;
  }

  .bookhero__offer {
    order: 1;
  }

  .bookhero__visual {
    order: 2;
    width: min(680px, 100%);
    min-height: 520px;
    justify-self: center;
  }

  /* Once it stacks, the book is a standalone object with the full width to
     itself, so it centres. Left aligning it strands it against a wide margin. */
  .book,
  .preview .book,
  .bookhero .book,
  .purchase .book {
    justify-self: center;
    width: min(300px, 58vw);
  }

  .bookhero .bookhero__book {
    width: min(350px, 59vw);
  }

  .toc {
    grid-template-columns: 1fr;
  }

  .toc__column {
    gap: clamp(2rem, 5vw, 3rem);
  }

  .contact-shell {
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  }

  .hero__sub {
    max-width: none;
  }

  .practice {
    grid-template-columns: 1fr auto;
  }

  .practice__cost {
    grid-column: 1 / -1;
    margin-top: -0.35rem;
  }

  .reviews__track {
    grid-auto-columns: calc((100% - 1.25rem) / 2);
  }

  .cycle {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem;
  }

  .cycle::before {
    display: none;
  }
}

/* ---- phone ---- */
@media (max-width: 860px) {
  .recog-pairs {
    grid-template-columns: 1fr;
  }

  .recog-pair {
    grid-template-rows: auto 1fr;
  }

  .gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews__head {
    align-items: flex-start;
  }

  .reviews__track {
    grid-auto-columns: min(78vw, 360px);
  }

  :root {
    --header-h: 64px;
  }

  body {
    font-size: 1.03rem;
  }

  .nav__list,
  .nav > .btn {
    display: none;
  }

  .burger {
    display: flex;
  }

  .sticky-cta {
    display: block;
  }

  /* The sticky bar is fixed over the page, so the footer needs to end above
     it rather than underneath it. */
  .footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }


  .footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .contact-shell {
    grid-template-columns: 1fr;
  }

  .contact-note {
    min-height: auto;
  }

  .contact-note .pq {
    margin-top: 3.5rem;
  }

  /* --- touch targets --------------------------------------------------- */

  /* Widen the tappable area without moving the copper underline off the
     text, which padding would do. */
  .tlink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  .footer__links li {
    margin-bottom: 0;
  }

  .footer__links a {
    display: inline-block;
    padding-block: 0.75rem;
  }

  /* --- legibility -------------------------------------------------------
     The letterspaced uppercase labels are fine at arm's length on a desktop
     and genuinely hard to read on a phone, so they come up a step. */

  .eyebrow {
    font-size: 0.79rem;
    letter-spacing: 0.2em;
  }

  .recog__tag,
  .gate__part,
  .spec dt,
  .slot dt,
  .footer h2 {
    font-size: 0.78rem;
  }

  .footer__bottom {
    font-size: 0.86rem;
  }

  .pq figcaption,
  .preview__author,
  .author__role,
  .practice__ch {
    font-size: 0.78rem;
  }

  .toc__num {
    font-size: 0.8rem;
  }

  .slots-note,
  .slot dd,
  .cta-note {
    font-size: 0.875rem;
  }

  .field .hint,
  .form__status,
  .small {
    font-size: 0.92rem;
  }
}

/* ---- small phone ---- */
@media (max-width: 560px) {
  .gates {
    grid-template-columns: 1fr;
  }

  .home-gates .gate {
    grid-template-rows: auto;
  }

  .reviews > .wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "viewport"
      "controls"
      "hint";
  }

  .reviews__head {
    display: block;
    width: 100%;
    gap: 0;
  }

  .reviews__head .balance {
    text-wrap: wrap;
  }

  .reviews__controls {
    justify-self: center;
    margin: 1.15rem 0 0;
  }

  .reviews__nav {
    width: 2.75rem;
    height: 2.75rem;
  }

  .reviews__track {
    grid-auto-columns: 84vw;
  }

  .reviews__hint {
    margin-top: 0.75rem;
    text-align: center;
  }

  .review-lightbox__inner {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 0.85rem 1rem;
    padding: 3.75rem 0 0.5rem;
  }

  .review-lightbox img,
  .review-lightbox__placeholder {
    order: 1;
    max-height: calc(92vh - 8.25rem);
  }

  .review-lightbox__nav {
    position: static;
    order: 2;
    transform: none;
  }

  .review-lightbox__nav:hover,
  .review-lightbox__nav:focus-visible {
    transform: none;
  }

  .wrap {
    padding-inline: 1.375rem;
  }

  /* The page is long. Sections keep their air without wasting a screen. */
  .section {
    padding-block: 3.5rem;
  }

  .section--tight {
    padding-block: 2.75rem;
  }

  .cta-final {
    padding-block: 4.25rem;
  }

  /* The cover comes down a size so that the hero CTA arrives sooner. */
  .book,
  .preview .book,
  .bookhero .book,
  .purchase .book {
    width: min(200px, 55vw);
  }

  .bookhero .bookhero__book {
    width: min(220px, 59vw);
  }

  .hero__inner > .book,
  .bookhero .bookhero__book {
    left: -0.5rem;
  }

  .bookhero__visual {
    order: 1;
    min-height: 360px;
  }

  .hero::after,
  .bookhero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 1200'%3E%3Cg fill='none' stroke='%23c9906f' stroke-width='1' opacity='.2'%3E%3Cpolyline points='18,150 82,112 142,162'/%3E%3Cpolyline points='245,430 310,382 372,438'/%3E%3Cpolyline points='35,900 96,852 158,914'/%3E%3C/g%3E%3Cg fill='%23f2cdba' opacity='.48'%3E%3Ccircle cx='18' cy='150' r='1.5'/%3E%3Ccircle cx='82' cy='112' r='2'/%3E%3Ccircle cx='142' cy='162' r='1.3'/%3E%3Ccircle cx='245' cy='430' r='1.4'/%3E%3Ccircle cx='310' cy='382' r='1.8'/%3E%3Ccircle cx='372' cy='438' r='1.2'/%3E%3Ccircle cx='35' cy='900' r='1.4'/%3E%3Ccircle cx='96' cy='852' r='1.8'/%3E%3Ccircle cx='158' cy='914' r='1.2'/%3E%3Ccircle cx='330' cy='720' r='1'/%3E%3Ccircle cx='205' cy='690' r='1.1'/%3E%3Ccircle cx='55' cy='610' r='1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 390px 1200px;
  }

  .bookhero__offer {
    order: 2;
    text-align: center;
  }

  .bookhero__availability,
  .bookhero__assurances {
    justify-content: center;
  }

  .bookhero__payments {
    text-align: center;
  }

  .bookhero__viewers {
    justify-content: center;
  }

  .bookhero__assurances {
    gap: 0.55rem 1rem;
  }

  .bookhero__summary {
    margin-top: 1.45rem;
    padding-top: 1.35rem;
    text-align: left;
  }

  .hero,
  .bookhero {
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 3rem;
  }

  .hero__inner,
  .bookhero__inner {
    gap: 1.75rem;
  }

  .hero__sub {
    margin-bottom: 1.85rem;
  }

  .spec {
    margin-top: 1.75rem;
  }

  .cycle {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Long stacked lists lose some padding rather than losing entries. The
     chapter titles and the recognition lines are the pitch, so they stay
     visible instead of going behind a show more control. */
  .recog {
    padding: 1.15rem 1.1rem;
  }

  .toc__list li {
    padding: 0.5rem 0;
    font-size: 1rem;
  }

  .article h2 {
    margin-top: 2.35rem;
  }

  .feat li {
    padding: 0.85rem 0;
  }

  .section-head {
    margin-bottom: 2.25rem;
  }

  .btn {
    width: 100%;
  }

  .sticky-cta .btn,
  .nav .btn,
  .cta-row .tlink {
    width: auto;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1.15rem;
  }

  .cta-row .tlink {
    justify-content: center;
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .spec,
  .slots {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .toc {
    gap: 2rem;
  }
}

/* ---- very small phones ---- */
@media (max-width: 400px) {
  /* The form was giving 28px of padding away on each side of a 261px card,
     which left the inputs at 203px and wrapped the submit label. */
  .form {
    padding: 1.15rem;
  }

  .btn--lg {
    padding-inline: 1.4rem;
  }
}

@media (max-width: 360px) {
  .d1 {
    font-size: 2.1rem;
    line-height: 1.1;
  }

  .d2 {
    font-size: 1.85rem;
  }

  .wrap {
    padding-inline: 1.15rem;
  }

  .btn {
    padding-inline: 1.1rem;
    letter-spacing: 0.02em;
  }
}

/* ---- landscape phones ------------------------------------------------------
   A fixed header plus a fixed bar was taking 39% of a 360px tall viewport.
   The bar keeps its button and drops everything else. */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-h: 52px;
  }

  .sticky-cta {
    padding-block: 0.4rem;
  }

  .sticky-cta__label {
    display: none;
  }

  .sticky-cta__row {
    justify-content: flex-end;
  }

  .sticky-cta .btn {
    padding: 0.6rem 1.35rem;
  }

  .hero,
  .bookhero,
  .pagehero {
    padding-top: calc(var(--header-h) + 1.75rem);
    padding-bottom: 2.25rem;
  }

  .section {
    padding-block: 3rem;
  }

  .mobile-nav {
    padding-top: 1.5rem;
  }

  .mobile-nav a:not(.btn) {
    padding: 0.7rem 0;
    font-size: 1.2rem;
  }
}

/* ---------- 26. Motion & print preferences ------------------------------- */

@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;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .book:hover {
    transform: none;
  }

  .starfield .cst-star--tw {
    animation: none;
    opacity: 0.45;
  }
}

@media print {
  .header,
  .mobile-nav,
  .sticky-cta,
  .starfield,
  .glow,
  .divider {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .on-night,
  .hero,
  .cta-band,
  .purchase,
  .footer,
  .bookhero,
  .pagehero {
    background: #fff !important;
    color: #000 !important;
  }
}