/* =====================================================================
   Kimberley D. Tait — redesign
   Warm-paper literary aesthetic. Cream + terracotta + indigo + copper.
   ===================================================================== */

:root {
  /* Paper & ink — warmer sepia tones pulled from the Vandemere world */
  --paper:        #F1E3C0;  /* warm aged sepia */
  --paper-deep:   #DEC99A;  /* deeper sepia for section breaks */
  --ink:          #1F1612;  /* deep warm black */
  --ink-soft:     #3A2A20;  /* body text */
  --ink-muted:    #6C5440;  /* captions, meta */

  /* Accents — Vandemere cover palette */
  --terracotta:   #B83C36;  /* circus red — primary accent */
  --terracotta-d: #8E2A25;
  --copper:       #D0A856;  /* vintage gold — CTAs */
  --copper-d:     #9E7E3A;
  --indigo-deep:  #2A5750;  /* deep vintage teal — pulled from circus storefront */
  --indigo-deeper:#1A3D38;
  --teal:         #6BA6A3;  /* vintage circus teal */
  --teal-deep:    #3F7C7F;
  --mustard:      #F2A413;  /* vintage circus poster yellow */
  --sienna:       #A65F08;  /* burnt sienna */

  /* Functional */
  --line:         #B89A6B;
  --highlight:    #ECC97E;

  /* Type */
  --display: 'Cinzel Decorative', 'Trajan Pro', 'Iowan Old Style', Georgia, serif;
  --body:    'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ui:      'Inter Tight', 'Söhne', system-ui, -apple-system, sans-serif;

  /* Scale */
  --text-2xs:  0.75rem;
  --text-xs:   0.875rem;
  --text-sm:   1rem;
  --text-base: 1.125rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;
  --text-2xl:  3rem;
  --text-3xl:  4.5rem;
  --text-4xl:  7rem;

  --max:      1280px;
  --gutter:   max(24px, 4vw);

  /* Generated art pack */
  --texture-paper: url("assets/generated/texture-parchment.webp");
  --texture-teal: url("assets/generated/texture-midnight-teal.webp");
  --texture-leather: url("assets/generated/texture-antique-leather.webp");
  --texture-burgundy: url("assets/generated/texture-burgundy-button.webp");
  --texture-gold: url("assets/generated/texture-gold-dust.webp");
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  background-image:
    linear-gradient(rgba(241, 227, 192, 0.5), rgba(241, 227, 192, 0.5)),
    var(--texture-paper);
  background-size: auto, cover;
  background-position: center top, center center;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
}

/* Headlines */
h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 60, "SOFT" 50;
}

p { margin: 0 0 1em; text-wrap: pretty; color: var(--ink-soft); }
em { font-style: italic; }

a { color: inherit; }

::selection { background: var(--terracotta); color: var(--paper); }

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

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; border-radius: 0;
  font-family: var(--ui); font-size: var(--text-xs);
}
.skip-link:focus { left: 8px; z-index: 999; }

/* =================== Section labels (small caps eyebrow) =================== */
.section-label {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-label::before,
.section-label::after {
  content: "✦";
  color: var(--copper);
  font-size: 0.85rem;
  line-height: 1;
}

.terracotta-rule {
  width: 80px; height: 1px;
  background: var(--terracotta);
  margin-top: 1.5rem;
  position: relative;
}
.terracotta-rule::before {
  content: "✦";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--copper);
  font-size: 0.95rem;
  background: var(--paper);
  padding: 0 6px;
}

/* Ornamental section divider — gold rule with center asterism */
.ornament-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto;
  max-width: 280px;
  color: var(--copper);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1;
}
.ornament-rule .rule {
  flex: 1; height: 1px; background: var(--copper); opacity: 0.7;
}
.ornament-rule .glyph { letter-spacing: 0.3em; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 320ms ease, border-color 320ms ease, padding 320ms ease;
  isolation: isolate;
  /* Subtle scrim only on the right where the photo lives */
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 42%,
    rgba(0,0,0,0.18) 100%);
  border-bottom: 1px solid transparent;
}
/* Over the hero:
   logo sits over CREAM (left side) — keep it ink.
   Nav links sit over the PHOTO (right side) — go cream. */
.nav .nav__logo { color: var(--paper); }
.nav .nav__links a { color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.nav .nav__links a::after { background: var(--paper); }
.nav .nav__burger span { background: var(--paper); }

/* Scrolled past hero: deep teal masthead with cream type, bookends the teal footer */
.nav.scrolled {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(208, 168, 86, 0.12), transparent 42%),
    linear-gradient(rgba(5, 21, 22, 0.64), rgba(5, 21, 22, 0.72)),
    var(--texture-gold),
    var(--texture-teal),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 78px,
      rgba(0,0,0,0.08) 78px 79px,
      rgba(0,0,0,0) 79px 80px),
    var(--indigo-deep);
  background-size: auto, auto, 100% 360px, 520px 520px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  border-bottom: 1px solid rgba(208, 168, 86, 0.55);
  box-shadow:
    inset 0 -1px 0 rgba(241, 227, 192, 0.12),
    0 2px 0 var(--copper),
    0 14px 30px rgba(0, 0, 0, 0.16);
}
.nav.scrolled .nav__logo {
  color: #fff1cf;
  filter: none;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 12px rgba(0, 0, 0, 0.55);
}
.nav.scrolled .logo-wordmark { color: #fff1cf; }
.nav.scrolled .nav__links a { color: var(--paper); text-shadow: none; }
.nav.scrolled .nav__links a::after { background: var(--copper); }
.nav.scrolled .nav__burger span { background: var(--paper); }
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 46px var(--gutter) 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav.scrolled .nav__inner {
  padding-top: 22px;
  padding-bottom: 22px;
}
.nav__logo {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink);
  /* Hidden over the hero (since the signature is huge there already) */
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity 380ms ease, transform 380ms ease;
}
.nav.scrolled .nav__logo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.logo-wordmark {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.nav__links {
  display: flex; gap: 32px;
  font-family: var(--ui);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.nav__links a {
  text-decoration: none; color: var(--ink-soft);
  position: relative; padding: 6px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 100%; background: var(--terracotta);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms ease;
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 36px; height: 36px;
  padding: 6px;
  flex-direction: column; gap: 5px; justify-content: center; align-items: center;
}
.nav__burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 240ms ease, opacity 240ms ease;
}

.overlay {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 28px;
}
.overlay.open { display: flex; }
.overlay nav { display: flex; flex-direction: column; gap: 20px; text-align: center; }
.overlay a {
  font-family: var(--display);
  font-size: 2.5rem; color: var(--ink); text-decoration: none;
}
.overlay__close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: 0;
  font-size: 2.5rem; color: var(--ink); cursor: pointer;
  line-height: 1;
}

/* =====================================================================
   BUTTONS / LINKS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 14px 26px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms ease;
}
/* Vintage poster button — red with a gold inset stroke */
.btn--primary, .btn--copper {
  background:
    linear-gradient(180deg, rgba(154, 51, 43, 0.1), rgba(70, 18, 17, 0.24)),
    var(--texture-burgundy);
  background-size: auto, cover;
  background-position: center;
  color: var(--paper);
  padding: 14px 28px;
  border: 1px solid rgba(208, 168, 86, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(80, 18, 16, 0.9),
    inset 0 0 0 4px rgba(108, 28, 25, 0.76),
    inset 0 0 0 5px rgba(208, 168, 86, 0.52),
    inset 0 12px 18px rgba(255, 220, 150, 0.04),
    inset 0 -16px 22px rgba(24, 6, 5, 0.26),
    0 2px 0 var(--terracotta-d);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
}
.btn--primary::before,
.btn--primary::after,
.btn--copper::before,
.btn--copper::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(208, 168, 86, 0.72);
  font-size: 0.72rem;
  line-height: 1;
  z-index: -1;
}
.btn--primary::before,
.btn--copper::before { left: 10px; }
.btn--primary::after,
.btn--copper::after { right: 10px; }
.btn--primary:hover, .btn--copper:hover {
  background:
    linear-gradient(180deg, rgba(188, 67, 56, 0.18), rgba(70, 18, 17, 0.14)),
    var(--texture-burgundy);
  background-size: auto, cover;
  background-position: center;
}
.btn--primary:active, .btn--copper:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1px rgba(80, 18, 16, 0.9),
    inset 0 0 0 4px rgba(108, 28, 25, 0.76),
    inset 0 0 0 5px rgba(208, 168, 86, 0.52),
    inset 0 8px 20px rgba(24, 6, 5, 0.28);
}
.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 18px;
  background:
    linear-gradient(rgba(241, 227, 192, 0.74), rgba(241, 227, 192, 0.74)),
    var(--texture-paper);
  background-size: auto, 320px 320px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.82rem;
}
.btn--ghost:hover {
  background:
    linear-gradient(rgba(24, 18, 15, 0.9), rgba(24, 18, 15, 0.9)),
    var(--texture-leather);
  background-size: auto, 320px 320px;
  color: var(--paper);
  border-color: var(--ink);
}
.btn:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.link {
  text-decoration: none;
  font-family: var(--ui);
  font-size: 0.92rem;
  color: var(--ink);
  position: relative;
  padding: 4px 2px;
}
.link--underline::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms ease;
}
.link--underline:hover::after { transform: scaleX(1); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  height: clamp(520px, 40vw, 720px);
  min-height: 520px;
  max-height: 720px;
  margin-bottom: clamp(56px, 7vw, 108px);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(3, 12, 13, 0.86), rgba(3, 12, 13, 0.86)),
    var(--texture-teal);
  background-size: auto, 640px 640px;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(7, 25, 27, 0.8), rgba(4, 7, 7, 1) 72%),
    var(--texture-teal);
  background-size: auto, cover;
}
.hero__photo svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.04) 44%, rgba(0,0,0,0.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.14) 0%, transparent 22%, transparent 72%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}

/* Hero collage: textless, full-bleed, with the center kept open for overlay type. */
.photo--hero-collage {
  object-fit: cover;
  object-position: 50% 50%;
  filter:
    saturate(1.04)
    contrast(1.03)
    brightness(0.98)
    sepia(0.04);
}
.photo-overlay--hero-collage {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(1, 8, 9, 0.02) 0%,
      rgba(2, 12, 13, 0.12) 32%,
      rgba(2, 12, 13, 0.24) 50%,
      rgba(2, 12, 13, 0.10) 68%,
      rgba(1, 8, 9, 0.04) 100%),
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.04) 38%,
      rgba(0, 0, 0, 0.28) 100%);
  mix-blend-mode: multiply;
}
.photo-overlay--hero-collage::after { opacity: .12; }

/* Spines variant — richer color so the gilt and book bindings come alive */
.photo--spines {
  object-fit: contain;
  filter:
    saturate(0.98)
    contrast(1.05)
    brightness(0.88)
    sepia(0.03);
  object-position: 50% 50%;
}
.photo-overlay--spines {
  background:
    linear-gradient(90deg,
      rgba(2, 10, 12, 0.1) 0%,
      rgba(2, 10, 12, 0.02) 42%,
      rgba(2, 10, 12, 0.08) 100%),
    linear-gradient(180deg,
      rgba(9, 22, 25, 0.06) 0%,
      rgba(184, 89, 58, 0.02) 50%,
      rgba(5, 10, 9, 0.16) 100%),
    radial-gradient(ellipse at center,
      transparent 68%,
      rgba(0, 0, 0, 0.16) 100%);
}
.photo-overlay--spines::after { opacity: .08; }

.hero__paper-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.02) 24%,
      rgba(0, 0, 0, 0.02) 72%,
      rgba(0, 0, 0, 0.2) 100%);
}

/* ---- Real photo treatment (warm-grade pass) ----
   Applied to any <img class="photo"> — desaturate, warm,
   then a terracotta tint overlay + grain. */
.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter:
    saturate(0.55)
    contrast(1.05)
    brightness(0.92)
    sepia(0.18);
}
.photo.photo--spines { object-fit: contain; }
.photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* warm color wash */
    linear-gradient(180deg,
      rgba(217, 168, 120, 0.18) 0%,
      rgba(184, 89, 58, 0.10) 50%,
      rgba(26, 19, 13, 0.42) 100%),
    /* vignette */
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(0, 0, 0, 0.45) 100%);
  mix-blend-mode: multiply;
}
.photo-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0 0.65 0 0 0 0.12 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: overlay;
}

.hero__photo .photo-overlay--spines {
  display: none;
}

/* Portraits: gentler treatment so skin tones don't go ghostly */
.photo--portrait {
  filter:
    saturate(0.78)
    contrast(1.03)
    brightness(0.96)
    sepia(0.10);
  object-position: 50% 18%;
}
.photo-overlay--portrait {
  background:
    linear-gradient(180deg,
      rgba(217, 168, 120, 0.08) 0%,
      rgba(184, 89, 58, 0.05) 60%,
      rgba(26, 19, 13, 0.28) 100%),
    radial-gradient(ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, 0.30) 100%);
}
.photo-overlay--portrait::after { opacity: .35; }

.photo-caption {
  position: absolute;
  bottom: 24px; right: 28px;
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 227, 192,0.7);
  z-index: 3;
}

.hero__type {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 980px;
  width: min(78vw, 980px);
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 227, 192, 0.78);
  display: flex; gap: 12px; align-items: center; justify-content: center;
  margin-bottom: 32px;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 700ms ease 1700ms forwards;
}
.hero__eyebrow .dot { color: var(--copper); }

.hero__title {
  font-family: var(--display);
  font-size: clamp(3.2rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: #fff1cf;
  margin: 0;
  /* So the type sits at the seam and OVER the photo */
  position: relative;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(0, 0, 0, 0.46);
}

/* Signature variant — her actual handwriting, sized like a hero title */
.hero__title--signature {
  display: block;
  line-height: 1;
  max-width: none;
  clip-path: inset(0 100% 0 0);
  animation: signWrite 1500ms cubic-bezier(.55, .08, .35, 1) 250ms forwards;
}
.hero__break { display: none; }
@keyframes signWrite {
  to { clip-path: inset(0 0 0 0); }
}
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 800ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__title .word:nth-child(1) { animation-delay: 200ms; }
.hero__title .word:nth-child(2) {
  animation-delay: 360ms;
  color: var(--terracotta);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero__title .word:nth-child(3) { animation-delay: 520ms; }

.hero__sub {
  margin-top: 28px;
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: rgba(255, 242, 211, 0.94);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0; transform: translateY(12px);
  animation: fadeUp 800ms ease 1100ms forwards;
}

.hero__cta {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
  opacity: 0; transform: translateY(12px);
  animation: fadeUp 800ms ease 1400ms forwards;
}
.hero__cta .link { color: rgba(241, 227, 192, 0.92); }
.hero__cta .link--underline::after { background: var(--copper); }

.hero__ornament {
  position: absolute;
  left: var(--gutter);
  bottom: 36px;
  color: var(--terracotta);
  opacity: 0;
  animation: fadeUp 1000ms ease 2000ms forwards;
  z-index: 4;
}

.hero__scroll {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right top;
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(241, 227, 192,0.8);
  display: flex; align-items: center; gap: 10px;
  z-index: 4;
  opacity: 0;
  animation: fadeUp 1000ms ease 2200ms forwards;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   FEATURED BOOK
   ===================================================================== */
.featured {
  padding: 160px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
/* Vintage poster frame — double rule with corner asterism */
.featured::before {
  content: "";
  position: absolute;
  top: 80px; bottom: 80px;
  left: 24px; right: 24px;
  border: 1px solid var(--copper);
  outline: 1px solid var(--copper);
  outline-offset: 4px;
  pointer-events: none;
  opacity: 0.55;
}
.featured::after {
  content: "✦";
  position: absolute;
  top: 70px; left: 50%;
  transform: translateX(-50%);
  color: var(--teal-deep);
  font-size: 1.4rem;
  background: var(--paper);
  padding: 0 16px;
  pointer-events: none;
}
.featured__inner {
  display: grid;
  grid-template-columns: 5fr 1fr 6fr;
  align-items: center;
  gap: 0;
}
.featured__cover { grid-column: 1; }
.featured__copy  { grid-column: 3; }

.featured__title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-variation-settings: "opsz" 96, "SOFT" 80;
  line-height: 1;
  margin-bottom: 12px;
}
.featured__tagline {
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
  max-width: 38ch;
}
.featured__blurb {
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 48ch;
  margin-bottom: 32px;
}
.featured__proof {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.stars { color: var(--copper); letter-spacing: 0.08em; font-size: 1.1rem; }
.stars .half { opacity: .5; }
.featured__cta {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}

/* =====================================================================
   BOOK COVERS (designed typographic covers)
   ===================================================================== */
.cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 24px 50px -18px rgba(28,24,20,0.45),
    0 8px 24px -10px rgba(28,24,20,0.35);
  transform: rotate(-1.5deg);
  transition: transform 240ms ease, box-shadow 240ms ease;
  isolation: isolate;
  overflow: hidden;
}

/* Real photo covers — uncropped, full-color (untreated by design)
   Use the image's natural aspect ratio so nothing crops. */
.cover--photo {
  background: transparent;
  aspect-ratio: auto;
  height: auto;
}
.cover--photo img {
  width: 100%;
  height: auto;
  display: block;
}
.cover--photo::after { display: none; } /* skip the paper-grain overlay on real covers */

/* Vandemere — dusty terracotta with horse */
.cover--vandemere {
  background:
    radial-gradient(ellipse at 50% 110%, #5e2f1c 0%, transparent 60%),
    linear-gradient(180deg, #b8593a 0%, #8a3e26 60%, #5e2f1c 100%);
}
.cover--firehorse {
  background:
    radial-gradient(ellipse at 30% 0%, #e8c547 0%, transparent 55%),
    linear-gradient(180deg, #2a3548 0%, #1a2230 100%);
}
.cover--lantern {
  background:
    radial-gradient(ellipse at 50% 35%, #f5d7a5 0%, transparent 45%),
    linear-gradient(180deg, #3d342a 0%, #1c1814 100%);
}
.cover--wolves {
  background:
    radial-gradient(ellipse at 70% 85%, #6E5F4F 0%, transparent 55%),
    linear-gradient(180deg, #1E2635 0%, #0e131c 100%);
}

.cover::after {
  /* subtle paper texture on covers */
  content: "";
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0.07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .7;
}

.cover__plate {
  position: absolute;
  inset: 9% 10%;
  border: 1px solid rgba(241, 227, 192,0.45);
  padding: 7% 8%;
  color: #F1E3C0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center;
}
.cover__meta {
  font-family: var(--ui);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: 4%;
}
.cover__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 8% 0;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.cover.small .cover__title { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.cover__rule {
  width: 30%; height: 1px; background: rgba(241, 227, 192,0.55);
  position: relative;
}
.cover__rule::before, .cover__rule::after {
  content: ""; position: absolute; top: 50%;
  width: 3px; height: 3px; background: rgba(241, 227, 192,0.55);
  border-radius: 50%; transform: translateY(-50%);
}
.cover__rule::before { left: -8px; }
.cover__rule::after  { right: -8px; }
.cover__author {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-bottom: 4%;
  opacity: .9;
}
.cover__horse {
  position: absolute;
  bottom: 14%; left: 50%;
  transform: translateX(-50%);
  opacity: .9;
}

/* big featured cover */
.featured__cover .cover {
  max-width: 480px;
  margin: 0 auto;
  transform: none;
}

/* =====================================================================
   DIVIDER STRIP
   ===================================================================== */
.divider {
  position: relative;
  height: clamp(124px, 11.6vw, 178px);
  overflow: hidden;
  background: #050807;
  border-top: 3px solid #050807;
  border-bottom: 3px solid #050807;
  box-shadow:
    inset 0 1px 0 rgba(217, 168, 120, 0.14),
    inset 0 -1px 0 rgba(217, 168, 120, 0.12);
}
.divider.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.divider svg { width: 100%; height: 100%; display: block; }
.divider .photo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.08) contrast(1.03) brightness(1.08);
}
.divider .photo-overlay {
  display: none;
}
.divider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.18) 42%,
      rgba(0, 0, 0, 0.18) 58%,
      rgba(0, 0, 0, 0.08) 100%),
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.08) 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.16) 100%);
}
.divider--parchment::after {
  background:
    linear-gradient(90deg,
      rgba(42, 29, 18, 0.05) 0%,
      rgba(42, 29, 18, 0.14) 42%,
      rgba(42, 29, 18, 0.14) 58%,
      rgba(42, 29, 18, 0.05) 100%),
    radial-gradient(ellipse at center,
      rgba(241, 227, 192, 0.05) 0%,
      transparent 52%,
      rgba(42, 29, 18, 0.12) 100%);
}
.divider__title {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.2vw, 3rem);
  line-height: 1;
  color: #fff1cf;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.72),
    0 0 14px rgba(0, 0, 0, 0.42);
}
.divider--parchment .divider__title {
  color: #fff1cf;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(0, 0, 0, 0.48);
}
.divider--storm .divider__title,
.divider--moon .divider__title {
  transform: translateY(8px);
}
.divider--burgundy .divider__title {
  font-size: clamp(1.25rem, 2.35vw, 2.25rem);
  letter-spacing: 0.09em;
  padding-inline: clamp(120px, 18vw, 260px);
}
.divider--pearl {
  margin-top: clamp(44px, 6vw, 92px);
}
.divider--storm {
  margin-top: 0;
}

/* =====================================================================
   BOOKS GRID
   ===================================================================== */
.books {
  padding: 140px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.books::before {
  content: "";
  position: absolute;
  inset: 56px calc(var(--gutter) * -1) auto;
  height: 260px;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(241, 227, 192, 0.94), rgba(241, 227, 192, 0.58), rgba(241, 227, 192, 0.94)),
    var(--texture-gold);
  background-size: auto, cover;
  opacity: 0.26;
  mask-image: linear-gradient(180deg, transparent 0%, black 28%, black 72%, transparent 100%);
}
.books__header { text-align: left; margin-bottom: 44px; }
.books__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px 80px;
}
.book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
}

/* Vintage "No. 01" plate label, like a ticket stub number */
.book__no {
  position: absolute;
  top: -22px;
  left: 6px;
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-d);
  background: var(--paper);
  padding: 4px 10px;
  border: 1px solid var(--copper);
  z-index: 2;
}
.book--right .book__no { left: auto; right: 6px; }
.book--left  { transform: translateX(0); }
.book--right { transform: translateX(60px); }
.book--feature-row {
  grid-column: 1 / -1;
  width: min(100%, 920px);
  margin: 0 auto;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}
.book--feature-row .book__hook {
  max-width: 58ch;
}
.book--duology.book--right,
.book--duology.book--right.in {
  transform: none;
}

.book__cover-wrap { padding: 14px; }
.book__cover-wrap {
  background:
    linear-gradient(rgba(241, 227, 192, 0.78), rgba(241, 227, 192, 0.78)),
    var(--texture-leather);
  background-size: auto, cover;
  box-shadow: inset 0 0 0 1px rgba(208, 168, 86, 0.22);
}
.book[data-tilt="-2"] .cover { transform: rotate(0deg); }
.book[data-tilt="2"]  .cover { transform: rotate(0deg); }
.book .cover { max-width: 280px; }

.book:hover .cover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 36px 60px -22px rgba(28,24,20,0.5),
    0 14px 30px -12px rgba(28,24,20,0.35);
}

.book__copy { padding-right: 8px; }

.book__meta {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.badge {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-bottom: 16px;
}
.badge--available {
  background: var(--copper);
  color: var(--paper);
}
.badge--soon {
  border: 1px solid var(--teal-deep);
  color: var(--teal-deep);
  background: transparent;
}

.book__title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  font-variation-settings: "opsz" 72, "SOFT" 80;
  line-height: 1.05;
  margin-bottom: 12px;
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
}
.book__title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--teal-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms ease;
}
.book:hover .book__title::after { transform: scaleX(1); }

.book__hook {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 22px;
  max-width: 32ch;
}

/* notify form */
.notify {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 340px;
}
.notify input[type="email"] {
  flex: 1;
  border: 1px solid var(--line);
  background: transparent;
  padding: 10px 14px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
}
.notify input[type="email"]:focus { border-color: var(--copper); }
.notify .btn { padding: 10px 14px; }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about {
  padding: 160px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.about__photo {
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(28,24,20,.4);
  transform: rotate(-1deg);
}
.about__photo svg { width: 100%; height: 100%; display: block; }
.about__photo .photo-caption { bottom: 14px; right: 14px; }

.about__copy { max-width: 580px; }
.about__copy p {
  font-size: 1.2rem;
  line-height: 1.75;
}

.pull {
  margin: 36px 0;
  padding: 18px 8px 18px 28px;
  border-left: 3px solid var(--terracotta);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--ink);
  font-variation-settings: "opsz" 60, "SOFT" 80;
  position: relative;
}
.pull::before {
  content: "✦";
  position: absolute;
  top: -8px;
  left: 18px;
  font-style: normal;
  color: var(--copper);
  font-size: 1rem;
  background: var(--paper);
  padding: 0 4px;
}
.pull::after {
  content: "✦";
  position: absolute;
  bottom: -8px;
  right: 12px;
  font-style: normal;
  color: var(--copper);
  font-size: 1rem;
  background: var(--paper);
  padding: 0 4px;
}

/* =====================================================================
   SIGNATURE / WORDMARK
   ===================================================================== */
.signature {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.signature::before {
  content: "—";
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--terracotta);
  font-style: italic;
}
.signature span {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--ink);
  opacity: 0.92;
}
.signature--ink span { opacity: 0.88; }
.signature--cream {
  justify-content: center;
  margin: 24px auto 32px;
}
.signature--cream::before { display: none; }
.signature--cream span {
  color: var(--paper);
  font-size: clamp(2rem, 4vw, 3rem);
  opacity: 0.95;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* =====================================================================
   NEWSLETTER (full-bleed terracotta rupture)
   ===================================================================== */
.letter {
  background: var(--terracotta);
  color: var(--paper);
  padding: 140px var(--gutter);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.letter__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
  z-index: -3;
  filter: saturate(0.98) contrast(1.05) brightness(0.78);
}
.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(38, 16, 13, 0.42) 0%,
      rgba(123, 42, 36, 0.36) 52%,
      rgba(18, 31, 31, 0.54) 100%);
  mix-blend-mode: multiply;
  z-index: -2;
}
.letter::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--texture-gold),
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.26) 100%);
  background-size: cover, auto;
  opacity: 0.42;
  z-index: -1;
}
.letter__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.letter .section-label {
  color: rgba(241, 227, 192,0.75);
}
.letter__h {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: #fff1cf;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1;
}
.letter__copy {
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(255, 242, 211, 0.96);
  max-width: 52ch;
  margin: 0 auto 32px;
}
.letter__magnet {
  display: flex; align-items: center; gap: 18px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255, 242, 211, 0.36);
  padding: 18px 24px;
  margin: 0 auto 36px;
  max-width: 560px;
  text-align: left;
  color: var(--paper);
}
.letter__magnet svg { flex-shrink: 0; color: #fff1cf; }
.letter__magnet p { margin: 0; font-size: 1rem; line-height: 1.5; color: #fff1cf; }

.letter__form {
  display: flex; gap: 8px;
  max-width: 500px; margin: 0 auto;
}
.letter__form input {
  flex: 1;
  background: var(--paper);
  border: 0;
  padding: 16px 20px;
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
}
.letter__form input:focus { box-shadow: inset 0 0 0 2px var(--copper); }
.letter__form .btn { padding: 16px 24px; }

.letter__meta {
  font-family: var(--ui);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(255, 242, 211, 0.78);
  margin-top: 16px;
}
.letter__success {
  margin-top: 24px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--paper);
}

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews {
  padding: 160px var(--gutter);
  max-width: 960px;
  margin: 0 auto;
}
.reviews__header { text-align: center; margin-bottom: 0; }
.reviews__list {
  display: flex; flex-direction: column; gap: 80px;
}
.quote {
  margin: 0;
  text-align: center;
}
.quote blockquote {
  margin: 0 0 20px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: "opsz" 60, "SOFT" 80;
  font-weight: 400;
}
.quote figcaption {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.quote figcaption em { text-transform: none; letter-spacing: 0.02em; font-size: 0.85rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background:
    linear-gradient(rgba(12, 28, 28, 0.88), rgba(12, 28, 28, 0.88)),
    var(--texture-teal),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 78px,
      rgba(0,0,0,0.10) 78px 79px,
      rgba(0,0,0,0) 79px 80px),
    var(--indigo-deep);
  background-size: auto, 620px 620px, auto, auto;
  color: var(--paper);
  padding: 100px var(--gutter) 24px;
  position: relative;
}
.footer::before {
  /* aged patina blooms — large mottled spots like worn paint */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 10% 20%, rgba(0,0,0,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 480px 240px at 85% 70%, rgba(255,255,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 400px 200px at 55% 105%, rgba(0,0,0,0.20) 0%, transparent 60%);
  pointer-events: none;
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 60px;
  position: relative;
}
.footer__col h4, .footer__col .footer__name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-style: normal;
  color: var(--paper);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.footer__name span {
  display: block;
  max-width: 100%;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.03em;
  opacity: 0.92;
}
.footer__bio {
  font-size: 0.95rem;
  color: rgba(241, 227, 192,0.7);
  max-width: 32ch;
  margin: 0;
}
.footer__nav {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 6px;
}
.footer__nav a {
  font-family: var(--ui);
  font-size: 0.9rem;
  color: rgba(241, 227, 192,0.85);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}
.footer__nav a:hover { color: var(--terracotta); }

.footer__social {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 6px;
}
.footer__social a {
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(241, 227, 192,0.85);
  text-decoration: none;
  font-family: var(--ui);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: color 200ms ease;
}
.footer__social a:hover { color: var(--terracotta); }
.footer__social svg { color: rgba(241, 227, 192,0.85); transition: color 200ms ease; }
.footer__social a:hover svg { color: var(--terracotta); }

.footer__bar {
  max-width: var(--max);
  margin: 80px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(241, 227, 192,0.12);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--ui);
  font-size: 0.78rem;
  color: rgba(241, 227, 192,0.5);
  letter-spacing: 0.04em;
  position: relative;
}
.footer__bar a { color: inherit; text-decoration: none; }
.footer__bar a:hover { color: var(--paper); }
.footer__bar .dot { color: rgba(241, 227, 192,0.35); }
.footer__set {
  margin-left: auto;
  font-style: italic;
  font-family: var(--display);
  font-size: 0.85rem;
  color: rgba(241, 227, 192,0.5);
}

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.book {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
}
.book.in { opacity: 1; transform: translateY(0); }
.book--right.in { transform: translateX(60px); }
@media (max-width: 880px) { .book--right.in { transform: translateX(0); } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1023px) {
  .featured__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .featured__cover, .featured__copy { grid-column: 1; }
  .featured__cover .cover { max-width: 360px; }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about__photo { max-width: 460px; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }

  /* On mobile the hero photo is full-width across the top —
     logo sits over the photo, not over cream. Make it cream. */
  .nav:not(.scrolled) .nav__logo { color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
  .nav:not(.scrolled) .nav__burger span { background: var(--paper); }
  .logo-wordmark { font-size: 1rem; }
  .nav:not(.scrolled) {
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 100%);
  }

  /* Mobile hero: full-bleed art with the type overlaid on the darker lower field. */
  .hero {
    height: 100svh;
    min-height: 760px;
    max-height: none;
    position: relative;
  }
  .hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  .hero__photo::after {
    display: block;
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.12) 34%,
        rgba(1, 9, 10, 0.58) 66%,
        rgba(1, 9, 10, 0.88) 100%),
      radial-gradient(ellipse at 52% 70%,
        rgba(1, 9, 10, 0.16) 0%,
        rgba(1, 9, 10, 0.44) 54%,
        rgba(0, 0, 0, 0.52) 100%);
  }
  .hero__paper-fade { display: block; }
  .photo--hero-collage { object-position: 55% 50%; }

  .hero__type {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: clamp(310px, 42vh, 390px);
    transform: none;
    padding: 0;
    width: auto;
    max-width: 34rem;
    color: var(--paper);
    background: none;
    display: block;
    text-align: left;
  }
  .hero__eyebrow {
    color: rgba(241, 227, 192, 0.68);
    margin-bottom: 18px;
    justify-content: flex-start;
  }
  .hero__eyebrow .dot { color: var(--copper); }

  .hero__title {
    color: #fff1cf;
    font-size: clamp(2.65rem, 12.7vw, 4.1rem);
    line-height: 0.98;
    max-width: 9.5ch;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48);
  }
  .hero__break { display: block; }

  .hero__sub {
    color: rgba(255, 242, 211, 0.90);
    margin: 22px 0 0;
    max-width: 38ch;
    font-size: 1.15rem;
    line-height: 1.55;
  }
  .hero__cta { margin-top: 30px; gap: 20px; justify-content: flex-start; }
  .hero__cta .link { color: rgba(255, 242, 211, 0.92); }
  .hero__cta .link--underline::after { background: var(--copper); }

  .hero__scroll { display: none; }
  .hero__ornament { display: none; }
  .photo-caption { display: none; }
  .featured { padding: 96px var(--gutter); }
  .featured::before {
    /* Loosen the inset frame on mobile so it doesn't crowd content */
    top: 40px; bottom: 40px;
    left: 8px; right: 8px;
    outline-offset: 6px;
  }
  .featured::after { top: 32px; }
  .books { padding: 96px var(--gutter); }
  .about { padding: 96px var(--gutter); }
  .letter { padding: 96px var(--gutter); }
  .reviews { padding: 96px var(--gutter); }

  .books__grid {
    grid-template-columns: 1fr;
    gap: 88px;
  }
  .book {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .book__no {
    top: -28px;
    left: 0;
    right: auto;
  }
  .book--right .book__no {
    left: 0;
    right: auto;
  }
  .book--right { transform: translateX(0); }
  .book .cover { max-width: 240px; }
  .book__cover-wrap {
    width: max-content;
    max-width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .about__photo { transform: rotate(0); max-width: 100%; }

  .featured__title { font-size: 2.6rem; }
  .featured__blurb { font-size: 1.05rem; }
  .about__copy p, .featured__blurb { font-size: 1.05rem; }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .footer__set { margin-left: 0; }

  .letter__magnet { flex-direction: column; text-align: center; }
  .letter__form { flex-direction: column; }
  .letter__form .btn { padding: 14px; justify-content: center; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__title .word { opacity: 1; transform: none; }
  .hero__title--signature { clip-path: none; animation: none; }
  .reveal, .book { opacity: 1; transform: none; }
}