/* ==========================================================================
   Sean Bobby Kerr — The Maelum Trilogy
   Tokens
   ========================================================================== */

:root {
  --ivory: #f4efe2;
  --paper: #ece0c4;
  --ink: #18130f;
  --umber: #3a2818;
  --amber: #c28b2c;
  --amber-deep: #8f621e;
  --bronze: #7a4d21;
  --indigo: #24396c;
  --indigo-deep: #131f3d;
  --void: #100d10;
  --line: rgba(24, 19, 15, 0.14);
  --line-light: rgba(244, 239, 226, 0.16);

  /* Shared dark-navy / amber-gold brand gradients — used by both the mobile
     and desktop header/footer/review-card treatments so they stay in sync. */
  --dusk-1: #1c2d51;
  --dusk-2: #121d38;
  --dusk-3: #0a1220;
  --footer-amber-bg:
    radial-gradient(120% 160% at 50% -20%, rgba(255, 220, 150, 0.28), transparent 60%),
    linear-gradient(165deg, #c99a4c 0%, #ab7c35 45%, #7c5522 100%);

  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-display-sc: 'Cormorant SC', 'Cormorant', Georgia, serif;
  --font-body: 'Alegreya', Georgia, 'Times New Roman', serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;
  --space-7: 7rem;

  --radius: 3px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* Subtle paper grain, sits above the background color on every section */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Type
   ========================================================================== */

.eyebrow {
  font-family: var(--font-display-sc);
  font-size: 0.85rem;
  color: var(--bronze);
  margin: 0 0 var(--space-2);
}
.eyebrow-light { color: var(--amber); }

.section-label {
  font-family: var(--font-display-sc);
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--bronze);
  margin: 0 0 var(--space-2);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.5rem + 2.2vw, 3.1rem);
  line-height: 1.08;
  color: var(--umber);
  margin: 0 0 var(--space-3);
}

p + p { margin-top: 1.1em; }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.cta-block { margin-top: var(--space-3); }

.btn {
  display: inline-block;
  font-family: var(--font-display-sc);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-decoration: none;
  padding: 0.95rem 2.1rem;
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--amber);
  color: var(--ink);
}
.btn-primary:hover { background: #d29b3c; transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(24,19,15,0.45); }

.btn-secondary {
  background: transparent;
  color: var(--umber);
  border-color: var(--bronze);
}
.btn-secondary:hover { background: rgba(122, 77, 33, 0.08); transform: translateY(-2px); }

.btn.is-pending {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.is-pending:hover { transform: none; box-shadow: none; }
.btn-primary.is-pending:hover { background: var(--amber); }
.btn-secondary.is-pending:hover { background: transparent; }

.pending-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--bronze);
  opacity: 0.85;
}

.link-btn {
  font-family: var(--font-display-sc);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--umber);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-btn:hover { color: var(--amber-deep); border-color: var(--amber-deep); }

/* Pending nav links / social icons: focusable, visibly inert, tooltip on hover/focus */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 20;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 239, 226, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 20px -14px rgba(24,19,15,0.35); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.9rem var(--space-3);
}
.header-inner > * { min-width: 0; }

.header-emblem { justify-self: start; display: block; line-height: 0; }
.header-emblem img { width: 40px; height: 40px; border-radius: 50%; transition: transform 0.3s ease; }
.header-emblem:hover img { transform: rotate(-8deg); }

.header-name {
  justify-self: center;
  min-width: 0;
  font-family: var(--font-display-sc);
  font-size: 1.15rem;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink);
}

.header-social { justify-self: end; display: flex; align-items: center; gap: 0.9rem; }
.social-icon { color: var(--umber); display: inline-flex; transition: color 0.2s ease, opacity 0.2s ease; }
.social-icon:hover { color: var(--amber-deep); }
.social-icon.is-pending { opacity: 0.4; cursor: not-allowed; }
.social-icon.is-pending:hover { color: var(--umber); }

.menu-toggle {
  display: none;
  justify-self: end;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle-bars::before { transform: translateY(-6px); }
.menu-toggle-bars::after { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-2px) rotate(-45deg); }
.menu-toggle-label { font-family: var(--font-display-sc); font-size: 0.65rem; letter-spacing: 0; }

.header-nav {
  border-top: 1px solid var(--line);
}
.header-nav ul {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding: 0.7rem var(--space-3);
}
.header-nav a {
  font-family: var(--font-display-sc);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--umber);
  transition: color 0.2s ease;
}
.header-nav a:hover { color: var(--amber-deep); }
.header-nav a.nav-pending { color: rgba(58, 40, 24, 0.45); border-bottom: 1px dotted var(--bronze); cursor: not-allowed; }
.header-nav a.nav-pending:hover { color: rgba(58, 40, 24, 0.6); }

/* Hamburger/accordion mechanics and all mobile nav-panel styling now live in
   the MOBILE HOMEPAGE block below (@media max-width: 1023px), aligned with
   the same 1024px boundary the desktop rebuild uses. */
@media (min-width: 1024px) {
  .header-nav { display: block !important; }
}

/* ==========================================================================
   Hero
   Layout/sizing lives in the MOBILE HOMEPAGE block (mobile-hero-*, since
   .hero is mobile-only) and the DESKTOP HOMEPAGE REBUILD block (.hero-map).
   ========================================================================== */

/* ==========================================================================
   The Burned Name
   ========================================================================== */

/* Layout/sizing lives in the MOBILE HOMEPAGE block (mobile-blurb-card,
   reusing blurb-eyebrow/blurb-scorched/blurb-religion/ornate-btn from the
   desktop blurb) and the DESKTOP HOMEPAGE REBUILD block (.blurb-desktop). */

/* ==========================================================================
   World of Gyra
   ========================================================================== */

.world-of-gyra { padding: var(--space-7) var(--space-3); }
.world-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-6);
  align-items: center;
}
.world-copy {
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  max-width: 52ch;
}
.world-copy.in-view { opacity: 1; transform: translateY(0); }

.world-map {
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease) 0.1s, transform 0.8s var(--ease) 0.1s;
}
.world-map.in-view { opacity: 1; transform: translateY(0); }

.map-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -30px rgba(24,19,15,0.4);
  border-radius: 2px;
  overflow: hidden;
}
.map-trigger img { width: 100%; transition: transform 0.6s var(--ease); }
.map-trigger:hover img { transform: scale(1.04); }
.map-trigger-label {
  position: absolute;
  right: 20px; bottom: 20px;
  background: rgba(16,13,16,0.75);
  color: var(--ivory);
  font-family: var(--font-display-sc);
  font-size: 0.75rem;
  letter-spacing: 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.map-trigger:hover .map-trigger-label,
.map-trigger:focus-visible .map-trigger-label { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .world-inner { grid-template-columns: 1fr; }
  .world-copy { max-width: 60ch; margin: 0 auto; }
}

/* Lightbox */
.map-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.map-lightbox[hidden] { display: none; }
.map-lightbox-backdrop { position: absolute; inset: 0; background: rgba(16,13,16,0.82); }
.map-lightbox-panel {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 90vh;
  overflow: auto;
  background: var(--paper);
  padding: var(--space-1);
  border-radius: 2px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.map-lightbox.is-open .map-lightbox-panel { opacity: 1; transform: scale(1); }
.map-lightbox-panel img { max-width: 100%; height: auto; display: block; }
.map-lightbox-close {
  position: absolute;
  top: -18px; right: -18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

/* ==========================================================================
   About Author
   ========================================================================== */

.about-author { padding: var(--space-7) var(--space-3); background: var(--paper); }
.author-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
}
.author-portrait {
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  display: flex;
  justify-content: center;
}
.author-portrait.in-view { opacity: 1; transform: translateY(0); }
.portrait-frame {
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 2px solid var(--bronze);
  outline: 1px solid var(--line);
  outline-offset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
}
.portrait-monogram {
  font-family: var(--font-display-sc);
  font-size: 2.6rem;
  letter-spacing: 0;
  color: var(--bronze);
}
.author-copy {
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease) 0.1s, transform 0.8s var(--ease) 0.1s;
  max-width: 58ch;
}
.author-copy.in-view { opacity: 1; transform: translateY(0); }

.author-more {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: var(--space-3);
  transition: grid-template-rows 0.35s var(--ease), opacity 0.35s var(--ease), margin-top 0.35s var(--ease);
  opacity: 1;
}
.author-more[hidden] { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
.author-more > p { overflow: hidden; }

@media (max-width: 780px) {
  .author-inner { grid-template-columns: 1fr; text-align: center; }
  .author-copy { margin: 0 auto; text-align: left; }
  .portrait-frame { width: 170px; height: 170px; }
  .portrait-monogram { font-size: 2rem; }
}

/* ==========================================================================
   Final conversion
   ========================================================================== */

.final-conversion {
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, var(--indigo-deep) 0%, var(--void) 65%);
  padding: var(--space-7) var(--space-3) 0;
  overflow: hidden;
}
.final-figures {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  min-width: 0;
  pointer-events: none;
}
.final-figures img {
  min-width: 0;
  width: min(1400px, 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
  opacity: 0.9;
}

/* On phones, scaling the full 2.49:1 banner to 100% width shrinks it to a
   thin strip and makes every figure tiny — technically undistorted, but it
   reads as a squashed, unintentional version of the desktop artwork. Below
   700px, swap to a cropped cover background instead: same source image, no
   distortion (cover always preserves aspect ratio), just a tighter window
   on it so two or three figures actually read at a legible size, still
   carrying the amber-to-blue sweep across the crop. */
@media (max-width: 700px) {
  .final-figures img { display: none; }
  .final-figures {
    height: 62vw;
    background-image: url("assets/img/eyeless@2x.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
    mask-image: linear-gradient(to bottom, transparent, #000 30%);
    opacity: 0.9;
  }
}
.final-inner {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
  color: var(--ivory);
}
.final-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ivory);
  margin-bottom: var(--space-2);
}
.final-lede {
  max-width: 52ch;
  margin: 0 auto var(--space-6);
  color: rgba(244,239,226,0.82);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-7);
}
.choice-card {
  min-width: 0;
  background: rgba(244, 239, 226, 0.06);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  padding: var(--space-4) var(--space-3);
  backdrop-filter: blur(3px);
  text-align: left;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.choice-card.in-view { opacity: 1; transform: translateY(0); }

/* "Start the Trilogy" card only — same faint nightjar watermark as the
   /books page's .book-tile::after, scoped so the other two choice-cards
   are untouched. */
.choice-card-mark { position: relative; }
.choice-card-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("assets/img/nightjar-watermark.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 85%;
}
.choice-card-mark > * { position: relative; z-index: 1; }

.choice-kicker {
  font-family: var(--font-display-sc);
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--amber);
  margin-bottom: 0.6rem;
}
.choice-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ivory);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
.final-inner .pending-note { color: rgba(244,239,226,0.65); }

/* The Burned Name is out now and The Scroll of Recall is open for preorder,
   so these two CTAs should never read as disabled while the final purchase
   URLs are still being supplied — override the generic .is-pending fade
   that would otherwise grey them out. */
.choice-card .btn-primary.is-pending {
  opacity: 1;
  cursor: pointer;
}
.choice-card .btn-primary.is-pending:hover {
  background: #d29b3c;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(24,19,15,0.45);
}

@media (max-width: 940px) {
  .choice-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

@media (min-width: 480px) { .final-heading { font-size: 2rem; } }
@media (min-width: 700px) { .final-heading { font-size: 2.4rem; } }
@media (min-width: 1000px) { .final-heading { font-size: 2.8rem; } }
@media (min-width: 1300px) { .final-heading { font-size: 3rem; } }

/* Form */
.field { margin-bottom: var(--space-2); text-align: left; }
.field label {
  display: block;
  font-family: var(--font-display-sc);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--amber);
  margin-bottom: 0.4rem;
}
.field-hint { text-transform: none; letter-spacing: 0; color: rgba(244,239,226,0.55); font-family: var(--font-body); font-style: italic; }
.field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.field input:focus { border-color: var(--amber); }
.field input:invalid:not(:placeholder-shown) { box-shadow: inset 0 0 0 1px #a24a3a; }

.form-status {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--amber);
  min-height: 1.2em;
}
.form-status.is-error { color: #e08a75; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--void); color: rgba(244,239,226,0.75); padding: var(--space-6) var(--space-3) var(--space-4); }
.footer-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.footer-emblem { display: inline-block; margin-bottom: var(--space-2); }
.footer-emblem img { width: 44px; height: 44px; border-radius: 50%; }
.footer-name { font-family: var(--font-display-sc); font-size: 1.1rem; letter-spacing: 0; color: var(--ivory); }
.footer-series { font-size: 0.85rem; font-style: italic; color: var(--amber); margin-top: 0.3rem; }

.footer-nav { display: flex; justify-content: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); flex-wrap: wrap; }
.footer-nav a {
  font-family: var(--font-display-sc);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-decoration: none;
  color: rgba(244,239,226,0.75);
}
.footer-nav a:hover { color: var(--amber); }

.footer-social { display: flex; justify-content: center; gap: 0.9rem; margin-bottom: var(--space-3); }
.footer-social .social-icon { color: rgba(244,239,226,0.7); }
.footer-social .social-icon:hover { color: var(--amber); }
.footer-social .social-icon.is-pending:hover { color: rgba(244,239,226,0.7); }

.footer-copyright { font-size: 0.78rem; color: rgba(244,239,226,0.45); }

/* ==========================================================================
   Reveal-on-scroll (progressive enhancement; JS toggles .in-view)
   ========================================================================== */

[data-reveal] { will-change: opacity, transform; }

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 480px) {
  :root { --space-6: 3.5rem; --space-7: 4.5rem; }
  .btn { padding: 0.85rem 1.5rem; font-size: 0.88rem; }
  .final-figures { opacity: 0.7; }
}

@media (max-width: 340px) {
  .header-inner { padding: 0.7rem var(--space-2); }
}

/* ==========================================================================
   MOBILE HOMEPAGE
   Scoped to @media (max-width: 1023px) — the exact inverse of the desktop
   rebuild's min-width:1024px, so the two ranges never overlap. Reuses several
   desktop class names (blurb-eyebrow, blurb-scorched, blurb-religion,
   ornate-btn, the whole reviews- and review-prefixed family) because those classes
   currently have no styling outside the desktop block — adding mobile rules
   for them here is safe, since the desktop block already redeclares every
   property it needs and continues to win unchanged at 1024px+.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ---- header ----------------------------------------------------------
     Same dark-navy/gold identity as desktop, just recomposed for a narrow
     header-inner grid that's already 1fr auto 1fr: with the social icons
     moved into the nav panel below, only emblem/name/hamburger remain, so
     the wordmark lands genuinely centred on the viewport, not just in
     whatever space is left between two unequal side items. */
  .site-header {
    background:
      radial-gradient(130% 160% at 15% -20%, rgba(63, 92, 158, 0.32), transparent 55%),
      linear-gradient(165deg, var(--dusk-1) 0%, var(--dusk-2) 45%, var(--dusk-3) 100%);
    backdrop-filter: none;
    border-bottom-color: rgba(194, 139, 44, 0.25);
  }
  .site-header.is-scrolled { box-shadow: 0 8px 20px -14px rgba(0,0,0,0.6); }

  .header-inner { padding: 0.7rem 1rem; }

  .header-emblem .header-emblem-img-desktop {
    display: block;
    width: 74px;
    height: auto;
    border-radius: 0;
    object-fit: contain;
  }
  /* Width-driven with height:auto, not the reverse — a fixed height combined
     with a separate max-width (the old rule) fights itself: once max-width
     clamps the width, height stays pinned at its fixed value and the 8.9:1
     wordmark gets squashed. Sizing off width alone lets the browser derive
     height from the image's real intrinsic ratio at every viewport, so it
     can never distort. 266px matches the old rule's unclamped width
     (height:30px * 8.875 ratio) so nothing changes above ~566px viewport;
     narrower phones now scale down proportionally instead of squashing. */
  .header-name-img { display: block; width: min(266px, 47vw); height: auto; }

  .header-social { display: none; } /* moved into the open nav panel below */

  .menu-toggle { display: flex; }
  .menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { background: var(--ivory); }

  /* ---- nav panel (accordion reveal below the fixed header row) --------- */
  .header-nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--ease);
    border-top-color: rgba(194, 139, 44, 0.2);
  }
  .header-nav.is-open { grid-template-rows: 1fr; }
  /* The single grid item inside .header-nav's 0fr/1fr row. Must itself carry
     zero padding/margin — overflow:hidden only zeroes out the automatic
     minimum size contributed by content, never by the item's OWN padding,
     so any padding placed directly on this element would force a minimum
     height even while the row is collapsed to 0fr (that's what caused the
     empty navy band: .header-nav-social used to sit directly here with its
     own vertical padding). Its children (ul, .header-nav-social) keep their
     padding — nested one level in, it's part of the content that genuinely
     clips away to nothing. */
  .header-nav-panel {
    overflow: hidden;
    min-height: 0;
  }
  .header-nav-panel > ul {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .header-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    color: rgba(244, 239, 226, 0.92);
    border-bottom: 1px solid rgba(194, 139, 44, 0.18);
  }
  .nav-spark { color: var(--amber); font-size: 0.7rem; flex-shrink: 0; }
  .nav-chevron { margin-left: auto; color: rgba(244, 239, 226, 0.35); font-size: 1.3rem; line-height: 1; }
  .header-nav a.nav-pending { color: rgba(244, 239, 226, 0.4); border-bottom-color: rgba(194, 139, 44, 0.18); }
  .header-nav a.nav-pending .nav-spark { color: rgba(194, 139, 44, 0.4); }

  .header-nav-social {
    display: flex;
    justify-content: center;
    gap: 1.7rem;
    padding: 1.2rem 1.25rem 1.5rem;
  }
  .header-nav-social .social-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: rgba(244, 239, 226, 0.88);
  }
  .header-nav-social .social-icon span { font-family: var(--font-display-sc); font-size: 0.72rem; letter-spacing: 0.02em; }
  .header-nav-social .social-icon.is-pending { opacity: 0.4; }

  #world, #author { display: none; }

  /* ---- book-on-map hero --------------------------------------------------
     Real dedicated mobile asset ("Mobile hero - books on map FINAL DARK
     SECTION EXTENDED"), used at its full native aspect ratio (1080x2280) —
     no cropping. Its bottom quarter is already a built-in dark gradient,
     which is what the overlay copy sits on. */
  .hero { padding: 0; overflow: hidden; background: var(--dusk-3); }
  .mobile-hero-frame { position: relative; width: 100%; line-height: 0; }
  .mobile-hero-img { display: block; width: 100%; height: auto; }
  .mobile-hero-copy {
    /* Bottom-anchored with auto height: padding-top here has NO effect on
       where the headline actually lands (this box just grows upward to
       compensate, since bottom is pinned) — don't reach for it again.
       Clearance from the compass artwork above comes from .mobile-hero-line
       and .mobile-hero-eyebrow's own size/margins shrinking this box's
       total height instead; see their comments. */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.5rem 2.4rem;
    line-height: normal;
    text-align: center;
  }
  .mobile-hero-eyebrow {
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: #f2c766;
    text-shadow:
      -1px -1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9),
      -1px 1px 1px rgba(0,0,0,0.9), 1px 1px 1px rgba(0,0,0,0.9),
      0 0 4px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,0.95);
    /* Tightened from 1rem — see .mobile-hero-line comment: less space
       consumed here also helps push the headline above it further down. */
    margin-bottom: 0.7rem;
  }
  .mobile-hero-line {
    font-family: var(--font-display);
    font-weight: 500;
    /* ~11% smaller than the original size, and margin-bottom tightened
       below — both shrink this block's own height, which is what actually
       pushes it down clear of the compass "S" above it. (Padding-top on
       the bottom-anchored, auto-height .mobile-hero-copy container turned
       out to have zero net effect: shrinking it just makes that box grow
       upward to compensate, leaving this headline's position unchanged —
       that's why the earlier padding tweaks didn't visibly help.) */
    font-size: clamp(1.51rem, 1.2rem + 3.12vw, 2.05rem);
    line-height: 1.22;
    color: var(--ivory);
    text-shadow: 0 0 3px rgba(0,0,0,0.85), 0 6px 20px rgba(0,0,0,0.75);
    margin-bottom: 1.1rem;
  }
  /* Same dimensional gold-plaque treatment as desktop's hero-map-cta. */
  .mobile-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #241a0d;
    text-decoration: none;
    cursor: pointer;
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,244,214,0.6), transparent 55%),
      linear-gradient(135deg, #f6d989 0%, #e0ac48 45%, #b9782a 100%);
    padding: 1rem 1.5rem;
    border: 1px solid #7a521c;
    border-radius: 2px;
    box-shadow:
      inset 0 0 0 2px rgba(255, 240, 200, 0.55),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 4px rgba(90,55,15,0.4),
      0 4px 0 rgba(122,82,28,0.5),
      0 12px 24px -10px rgba(0,0,0,0.75),
      0 0 18px rgba(224,172,72,0.3);
  }
  .mobile-hero-cta.is-pending { cursor: default; }

  /* ---- blurb card ---------------------------------------------------------
     A bordered amber-to-navy card (per the mobile blurb reference) rather
     than the desktop's edge-to-edge two-column layout — purpose-built for a
     single narrow column. Reuses the desktop blurb's copy classes. */
  .burned-name { padding: 3rem 1.1rem; background: var(--void); }
  .mobile-blurb-card {
    max-width: 480px;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid rgba(194, 139, 44, 0.4);
    overflow: hidden;
    background: linear-gradient(180deg, #5c3a17 0%, #2a1c10 36%, #0c0f16 60%, #0a1220 100%);
    box-shadow: 0 24px 50px -24px rgba(0,0,0,0.6);
  }
  .mobile-blurb-art { padding: 2.25rem 1.5rem 0; display: flex; justify-content: center; }
  .mobile-blurb-art img {
    width: 60%;
    max-width: 230px;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
    opacity: 0.92;
  }
  .blurb-copy { padding: 1rem 1.5rem 2.25rem; max-width: none; text-align: center; color: rgba(244,239,226,0.92); }
  .blurb-eyebrow {
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--amber);
    line-height: 1.3;
    margin-bottom: 1.1rem;
  }
  .blurb-copy p { font-size: 1.05rem; line-height: 1.7; text-align: left; }
  .blurb-scorched { font-style: italic; font-size: 1.15rem; margin: 1.6rem 0; }
  .blurb-scorched em { font-style: italic; color: rgba(244,239,226,0.92); }
  .blurb-religion { font-style: italic; font-weight: 400; font-size: 1.25rem; }

  /* Same gold-plaque CTA component as .mobile-hero-cta, at ~85% scale —
     one button "language" reused everywhere Buy The Burned Name appears,
     so it reads as a single recognizable component, not a different
     button per section. */
  .ornate-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.9rem;
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: #241a0d;
    text-decoration: none;
    cursor: pointer;
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,244,214,0.6), transparent 55%),
      linear-gradient(135deg, #f6d989 0%, #e0ac48 45%, #b9782a 100%);
    padding: 0.85rem 1.3rem;
    border: 1px solid #7a521c;
    border-radius: 2px;
    box-shadow:
      inset 0 0 0 2px rgba(255, 240, 200, 0.55),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 3px rgba(90,55,15,0.4),
      0 3px 0 rgba(122,82,28,0.5),
      0 10px 20px -9px rgba(0,0,0,0.75),
      0 0 15px rgba(224,172,72,0.3);
  }
  .ornate-btn.is-pending { cursor: default; }

  /* ---- reviews ------------------------------------------------------------ */
  .reviews-desktop {
    background: linear-gradient(180deg, #241608 0%, #14100d 25%, #0c0f16 50%, #0e1526 75%, #17233f 100%);
    padding: 3.5rem 1.1rem 3rem;
  }
  .reviews-inner { max-width: 480px; margin: 0 auto; text-align: center; }
  .reviews-ornament {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    color: rgba(194, 139, 44, 0.5);
    margin: 0 auto 1.8rem;
  }
  .reviews-ornament::before, .reviews-ornament::after { content: ""; flex: 1; height: 1px; background: currentColor; }
  .reviews-ornament span { color: var(--amber); font-size: 0.8rem; }
  .reviews-eyebrow { font-family: var(--font-display-sc); font-size: 0.85rem; letter-spacing: 0.05em; color: var(--amber); margin-bottom: 0.6rem; }
  .reviews-heading { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.5rem + 2vw, 2.2rem); color: var(--ivory); margin-bottom: 0.5rem; }
  .reviews-sub { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: rgba(244,239,226,0.72); margin-bottom: 2.2rem; }

  .reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  .review-card {
    background: var(--footer-amber-bg);
    border: 1px solid rgba(58, 40, 24, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35), 0 14px 30px -18px rgba(0,0,0,0.55);
    border-radius: 12px;
    padding: 1.5rem 1.4rem;
    text-align: left;
  }
  .review-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
  .review-avatar-frame {
    display: block;
    width: 60px; height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(58, 40, 24, 0.55);
    flex-shrink: 0;
  }
  .review-avatar { display: block; width: 100%; height: 100%; object-fit: cover; }
  .review-avatar-denver { transform: scale(1.5); transform-origin: 20% 30%; }
  .review-id { min-width: 0; }
  .review-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); line-height: 1.3; }
  .review-handle { font-size: 0.85rem; color: rgba(58, 40, 24, 0.75); margin-top: 0.15rem; }
  .review-credential-sep { margin: 0 0.25em; opacity: 0.7; }
  .review-credential { font-size: 0.78rem; font-style: italic; color: rgba(58, 40, 24, 0.68); }
  .review-stars { color: var(--amber-deep); font-size: 0.9rem; letter-spacing: 0.15em; margin-top: 0.35rem; }
  .review-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    padding-top: 1rem;
    border-top: 1px solid rgba(58, 40, 24, 0.3);
  }

  /* ---- choose where to enter: readable labels + comfortable touch targets */
  #subscribe .eyebrow-light { font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; }
  #subscribe .choice-kicker { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; }
  .field input { padding: 0.85rem 0.9rem; }

  /* ---- footer: amber card inset on a dark-navy page background, matching
     the "Option 1" mobile footer reference; desktop's own full-bleed amber
     footer (no card) is untouched. --------------------------------------- */
  .site-footer {
    background:
      radial-gradient(130% 160% at 50% -10%, rgba(63, 92, 158, 0.3), transparent 55%),
      linear-gradient(165deg, var(--dusk-1) 0%, var(--dusk-2) 45%, var(--dusk-3) 100%);
    padding: 2.5rem 1rem 3rem;
  }
  .footer-inner {
    max-width: 480px;
    background: var(--footer-amber-bg);
    border: 1px solid rgba(58, 40, 24, 0.5);
    border-radius: 20px;
    padding: 2.5rem 1.5rem 2rem;
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35), 0 24px 50px -24px rgba(0,0,0,0.6);
    color: var(--umber);
  }

  .footer-emblem { position: relative; display: inline-block; margin-bottom: 1.2rem; }
  .footer-emblem .footer-emblem-img-desktop { display: block; width: 92px; height: auto; border-radius: 0; margin: 0 auto; }
  .footer-emblem::before, .footer-emblem::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 66px;
    height: 1px;
    background: rgba(58, 40, 24, 0.4);
  }
  .footer-emblem::before { right: 100%; margin-right: 1rem; }
  .footer-emblem::after { left: 100%; margin-left: 1rem; }

  .footer-name-img { display: block; height: 38px; width: auto; max-width: 100%; margin: 0 auto 0.6rem; }
  .footer-series { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(58, 40, 24, 0.85); margin-top: 0; margin-bottom: 1.6rem; }

  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(58, 40, 24, 0.35);
  }
  .footer-nav a {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--umber);
    padding: 0.85rem 0;
    text-align: center;
  }
  .footer-nav a:not(:last-child) { border-bottom: 1px solid rgba(58, 40, 24, 0.22); }
  .footer-nav a:hover { color: #5a3a14; }
  .footer-nav a.nav-pending { color: rgba(58, 40, 24, 0.45); }

  .footer-social { margin-top: 1.6rem; gap: 1.5rem; }
  .footer-social .social-icon { color: var(--umber); }
  .footer-social .social-icon svg { width: 22px; height: 22px; }
  .footer-social .social-icon:hover { color: #5a3a14; }
  .footer-social .social-icon.is-pending:hover { color: var(--umber); }

  .footer-copyright { color: rgba(58, 40, 24, 0.7); margin-top: 1.6rem; line-height: 1.6; }
}

/* ==========================================================================
   DESKTOP HOMEPAGE REBUILD
   Scoped entirely to @media (min-width: 1024px). Mobile/tablet keep the
   original hero/burned-name markup and section order untouched; on desktop
   this block hides those originals, shows the new sections built from the
   real brand_assets, and reorders <main>'s children with flexbox `order`
   (no DOM reordering, so mobile source order is never touched).
   ========================================================================== */

/* .reviews-desktop is intentionally NOT in this hide list — it's now the
   real mobile reviews section too (see MOBILE HOMEPAGE block above), just
   restyled into a single column there. Only the desktop-exclusive hero-map
   and blurb-desktop (which have real mobile replacements: .hero and
   .burned-name) stay hidden by default below 1024px. */
.hero-map,
.blurb-desktop { display: none; }

@media (min-width: 1024px) {

  :root {
    --dusk-1: #1c2d51;
    --dusk-2: #121d38;
    --dusk-3: #0a1220;
    --footer-amber-bg:
      radial-gradient(120% 160% at 50% -20%, rgba(255, 220, 150, 0.28), transparent 60%),
      linear-gradient(165deg, #c99a4c 0%, #ab7c35 45%, #7c5522 100%);
  }

  /* ---- main flow reorder -------------------------------------------- */
  main { display: flex; flex-direction: column; }
  #hero { order: 1; }
  #book-one { order: 2; }
  .reviews-desktop { order: 3; display: block; }
  #subscribe { order: 4; }

  #hero .hero { display: none; }
  .hero-map { display: block; }

  #book-one .burned-name { display: none; }
  .blurb-desktop { display: block; }

  /* Removed from the desktop flow entirely (not just hidden with opacity —
     display:none takes them out of layout so #subscribe follows directly
     after the reviews section, with no leftover gap). Mobile is untouched:
     these sections keep their original source position and are still
     visible below the 1024px breakpoint. */
  #world, #author { display: none; }

  /* ---- header --------------------------------------------------------- */
  .site-header {
    background:
      radial-gradient(120% 160% at 12% -10%, rgba(63, 92, 158, 0.35), transparent 55%),
      radial-gradient(100% 140% at 90% 115%, rgba(20, 30, 56, 0.65), transparent 60%),
      linear-gradient(165deg, var(--dusk-1) 0%, var(--dusk-2) 45%, var(--dusk-3) 100%);
    backdrop-filter: none;
    border-bottom-color: rgba(194, 139, 44, 0.25);
  }
  .site-header.is-scrolled { box-shadow: 0 10px 28px -16px rgba(0,0,0,0.65); }

  /* Compact header pass: ~2/3 of the previous total height, achieved mostly
     by tightening padding/spacing rather than shrinking the branding —
     the wordmark stays the dominant element and the nightjar stays fully
     uncropped, just at a slightly smaller scale. */
  .header-inner { max-width: 1760px; padding: 1.1rem 3rem 0.9rem; }

  .header-emblem .header-emblem-img { display: none; }
  .header-emblem .header-emblem-img-desktop {
    display: block;
    width: clamp(140px, 13vw, 220px);
    height: auto;
    border-radius: 0;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  .header-emblem:hover .header-emblem-img-desktop { transform: rotate(-4deg); }

  .header-name-text { display: none; }
  .header-name-img {
    display: block;
    height: clamp(40px, 4vw, 62px);
    width: auto;
  }

  .header-social { gap: 1.3rem; }
  .header-nav-social { display: none; } /* mobile-only; desktop keeps header-social visible instead */
  .header-social .social-icon svg { width: 24px; height: 24px; }
  .header-social .social-icon { color: rgba(244,239,226,0.85); }
  .header-social .social-icon:hover { color: var(--amber); }
  .header-social .social-icon.is-pending:hover { color: rgba(244,239,226,0.85); }

  .header-nav { border-top-color: rgba(194, 139, 44, 0.25); }
  .header-nav ul { max-width: 1760px; gap: clamp(1.8rem, 3vw, 3.2rem); padding: 0.55rem var(--space-3) 0.6rem; }
  .header-nav a {
    position: relative;
    font-size: clamp(0.95rem, 0.8rem + 0.45vw, 1.1rem);
    color: rgba(244,239,226,0.88);
    padding-bottom: 0.25rem;
  }
  .header-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }
  .header-nav a:hover, .header-nav a:focus-visible { color: var(--ivory); }
  .header-nav a:hover::after, .header-nav a:focus-visible::after { transform: scaleX(1); }
  .header-nav a.nav-pending { color: rgba(244,239,226,0.4); border-bottom: 0; }
  .header-nav a.nav-pending:hover { color: rgba(244,239,226,0.55); }
  .header-nav a.nav-pending::after { display: none; }

  /* ---- epic book-on-map hero ------------------------------------------ */
  .hero-map { position: relative; background: var(--dusk-3); }
  .hero-map-frame { position: relative; width: 100%; margin: 0 auto; line-height: 0; }
  .hero-map-img { display: block; width: 100%; height: auto; }
  .hero-map-copy {
    position: absolute;
    left: 6%;
    top: 41%;
    transform: translateY(-50%);
    max-width: 32%;
    min-width: 380px;
    line-height: normal;
    padding: 2.75rem 3rem 2.75rem 2rem;
  }
  /* Soft, feathered dark halo behind the whole text block so the copy stays
     legible over any part of the map/book art — restrained radial glow,
     not a hard-edged panel. */
  .hero-map-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 78% 85% at 32% 50%, rgba(6,5,4,0.82) 0%, rgba(6,5,4,0.5) 48%, transparent 78%);
  }
  .hero-map-eyebrow {
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem);
    letter-spacing: 0.08em;
    color: #f2c766;
    /* Blur-only shadows were already near-opaque black, so pushing alpha
       further gave almost no visible gain — added a tight corner outline
       (same soft-glow style, just with real contrast behind it) on top of
       the existing halo rather than a bigger/darker blur alone. */
    text-shadow:
      -1px -1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9),
      -1px 1px 1px rgba(0,0,0,0.9), 1px 1px 1px rgba(0,0,0,0.9),
      0 0 4px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,0.95), 0 2px 6px rgba(0,0,0,0.95);
    margin-bottom: 1.3rem;
  }
  .hero-map-line {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
    line-height: 1.16;
    color: var(--ivory);
    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 8px 30px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.6);
    margin-bottom: 2.2rem;
  }
  /* Dimensional gold-plaque treatment modelled on the "Improved button
     reference" — diagonal gradient, inset bevel line, top-left highlight,
     a hard 3D "lip" beneath, and an ambient warm glow, so it visibly lifts
     off the map instead of reading as a flat rectangle. */
  .hero-map-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
    letter-spacing: 0.05em;
    color: #241a0d;
    text-decoration: none;
    cursor: pointer;
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,244,214,0.6), transparent 55%),
      linear-gradient(135deg, #f6d989 0%, #e0ac48 45%, #b9782a 100%);
    padding: 0.9rem 2.2rem;
    border: 1px solid #7a521c;
    border-radius: 2px;
    box-shadow:
      inset 0 0 0 2px rgba(255, 240, 200, 0.55),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 4px rgba(90,55,15,0.4),
      0 4px 0 rgba(122,82,28,0.5),
      0 14px 28px -10px rgba(0,0,0,0.75),
      0 0 22px rgba(224,172,72,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .hero-map-cta:hover {
    transform: translateY(-2px);
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,247,222,0.7), transparent 55%),
      linear-gradient(135deg, #fbe4a4 0%, #ecc064 45%, #c88832 100%);
    box-shadow:
      inset 0 0 0 2px rgba(255, 245, 215, 0.7),
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -2px 4px rgba(90,55,15,0.35),
      0 5px 0 rgba(122,82,28,0.5),
      0 20px 36px -10px rgba(0,0,0,0.8),
      0 0 30px rgba(224,172,72,0.45);
  }
  .hero-map-cta.is-pending { cursor: default; }
  .hero-map-cta.is-pending:hover {
    transform: none;
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,244,214,0.6), transparent 55%),
      linear-gradient(135deg, #f6d989 0%, #e0ac48 45%, #b9782a 100%);
    box-shadow:
      inset 0 0 0 2px rgba(255, 240, 200, 0.55),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 4px rgba(90,55,15,0.4),
      0 4px 0 rgba(122,82,28,0.5),
      0 14px 28px -10px rgba(0,0,0,0.75),
      0 0 22px rgba(224,172,72,0.3);
  }

  /* ---- blurb section ----------------------------------------------------
     Dimensional target (see brand_assets "NEW Desktop Hero Blurb-Section-
     Layout-REFERENCE"): at ~1920px viewport, section ~720px tall (680-760
     range), Everett's column ~640px / content ~1080px / breathing space
     ~200px — a 640:1080:200 ratio, expressed below as fr tracks so it
     scales fluidly rather than sitting in a fixed narrow centred box. */
  .blurb-desktop {
    background: linear-gradient(100deg,
      #5c3a17 0%, #37220f 18%, #17110d 32%,
      #0c0f16 48%, #101a30 70%, #1c2f57 90%, #1c2f57 100%);
    overflow: hidden;
    padding: clamp(2.75rem, 5vw, 3.75rem) 0;
  }
  .blurb-inner {
    position: relative;
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
      minmax(300px, 640fr)
      minmax(420px, 1080fr)
      minmax(32px, 200fr);
    align-items: center;
    gap: clamp(1.75rem, 3vw, 3rem);
    padding: 0 clamp(24px, 3vw, 64px);
    box-sizing: border-box;
  }
  .blurb-art { display: flex; align-items: center; justify-content: flex-start; }
  .blurb-art img {
    /* Height drives the size (~600px at 1920px, per the reference); width
       is explicitly auto so the browser computes it from Everett's real
       intrinsic ratio (541:1027) — never both dimensions forced, so he
       can't be squashed, stretched or cropped. */
    height: clamp(440px, 31vw, 600px);
    width: auto;
    max-width: 100%;
    display: block;
    filter: drop-shadow(0 30px 45px rgba(0,0,0,0.55));
  }
  .blurb-copy { max-width: 64ch; color: rgba(244,239,226,0.92); text-align: left; }
  .blurb-eyebrow {
    font-family: var(--font-display-sc);
    font-size: clamp(1.15rem, 1rem + 0.4vw, 1.25rem);
    letter-spacing: 0.03em;
    color: var(--amber);
    margin-bottom: 1.5rem;
  }
  .blurb-copy p { font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.65; }
  .blurb-scorched { font-style: italic; font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.5rem); margin: 1.8rem 0; }
  .blurb-scorched em { font-style: italic; color: rgba(244,239,226,0.92); }
  .blurb-religion { font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1.25rem + 0.4vw, 1.6rem); }

  /* Same gold-plaque CTA component as .hero-map-cta, at ~85% scale — one
     recognizable "Buy The Burned Name" button language reused everywhere
     it appears (hero = primary/largest; this one and the "Start the
     Trilogy" choice-card button both use this exact rule, ~15% smaller
     than the hero). */
  .ornate-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.3rem;
    padding: 0.77rem 1.87rem;
    font-family: var(--font-display-sc);
    font-weight: 600;
    font-size: clamp(0.85rem, 0.77rem + 0.26vw, 0.98rem);
    letter-spacing: 0.05em;
    color: #241a0d;
    text-decoration: none;
    cursor: pointer;
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,244,214,0.6), transparent 55%),
      linear-gradient(135deg, #f6d989 0%, #e0ac48 45%, #b9782a 100%);
    border: 1px solid #7a521c;
    border-radius: 2px;
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 240, 200, 0.55),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 3px rgba(90,55,15,0.4),
      0 3px 0 rgba(122,82,28,0.5),
      0 12px 24px -9px rgba(0,0,0,0.75),
      0 0 19px rgba(224,172,72,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .ornate-btn:hover {
    transform: translateY(-2px);
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,247,222,0.7), transparent 55%),
      linear-gradient(135deg, #fbe4a4 0%, #ecc064 45%, #c88832 100%);
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 245, 215, 0.7),
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -2px 3px rgba(90,55,15,0.35),
      0 4px 0 rgba(122,82,28,0.5),
      0 17px 30px -9px rgba(0,0,0,0.8),
      0 0 26px rgba(224,172,72,0.45);
  }
  .ornate-btn.is-pending { cursor: default; }
  .ornate-btn.is-pending:hover {
    transform: none;
    background:
      radial-gradient(120% 160% at 14% 0%, rgba(255,244,214,0.6), transparent 55%),
      linear-gradient(135deg, #f6d989 0%, #e0ac48 45%, #b9782a 100%);
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 240, 200, 0.55),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 3px rgba(90,55,15,0.4),
      0 3px 0 rgba(122,82,28,0.5),
      0 12px 24px -9px rgba(0,0,0,0.75),
      0 0 19px rgba(224,172,72,0.3);
  }

  /* ---- reviews section --------------------------------------------------- */
  .reviews-desktop {
    background: linear-gradient(100deg,
      #241608 0%, #14100d 22%, #0c0f16 42%,
      #0e1526 62%, #17233f 82%, #1c2f57 100%);
    padding: 5rem 3rem 6rem;
  }
  .reviews-inner { max-width: 1400px; margin: 0 auto; text-align: center; }
  .reviews-ornament {
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    color: rgba(194, 139, 44, 0.5);
    max-width: 640px; margin: 0 auto 2.6rem;
  }
  .reviews-ornament::before, .reviews-ornament::after { content: ""; flex: 1; height: 1px; background: currentColor; }
  .reviews-ornament span { color: var(--amber); font-size: 0.9rem; }

  .reviews-eyebrow {
    font-family: var(--font-display-sc);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--amber);
    margin-bottom: 0.8rem;
  }
  .reviews-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 1.7rem + 1.8vw, 3.1rem);
    color: var(--ivory);
    margin-bottom: 0.7rem;
  }
  .reviews-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: rgba(244,239,226,0.72);
    margin-bottom: 3.2rem;
  }

  .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch; }
  /* Card interiors borrow the footer's amber/gold background so they read as
     pieces of that same warm system, set inside the dark reviews section. */
  .review-card {
    background: var(--footer-amber-bg);
    border: 1px solid rgba(58, 40, 24, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35), 0 14px 30px -18px rgba(0,0,0,0.6);
    border-radius: 4px;
    padding: 2rem 1.9rem;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  .review-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
  .review-avatar-frame {
    display: block;
    width: 68px; height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(58, 40, 24, 0.55);
    flex-shrink: 0;
  }
  .review-avatar {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  /* Denver's supplied photo is a wide family scene rather than a tight
     headshot; a mild scale + origin bias keeps his face legible in the
     small circle without stretching or cropping in a way that loses him.
     Crystal's source is square, so plain object-fit:cover already shows
     her full original framing with zero crop — no transform needed, and
     adding one would zoom in past what the source asset shows. */
  .review-avatar-denver { transform: scale(1.5); transform-origin: 20% 30%; }
  .review-id { min-width: 0; }
  .review-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.3;
  }
  .review-handle { font-size: 0.85rem; color: rgba(58, 40, 24, 0.75); margin-top: 0.15rem; }
  /* Denver's author credential rides on the same line as his handle (see
     markup) so his header stays the same height as Jess's and Crystal's —
     otherwise his stars/divider sit a full line lower than theirs. */
  .review-credential-sep { margin: 0 0.25em; opacity: 0.7; }
  .review-credential { font-size: 0.78rem; font-style: italic; color: rgba(58, 40, 24, 0.68); }
  .review-stars { color: var(--amber-deep); font-size: 0.9rem; letter-spacing: 0.15em; margin-top: 0.4rem; }
  .review-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink);
    padding-top: 1.2rem;
    border-top: 1px solid rgba(58, 40, 24, 0.3);
  }

  /* Reviews section flows straight into the existing final-conversion
     (Choose where to enter) gradient — align its start colour so the
     seam between them reads as one continuous background. */
  #subscribe.final-conversion {
    background: radial-gradient(120% 100% at 50% 0%, var(--indigo-deep) 0%, var(--void) 65%),
      linear-gradient(180deg, #1c2f57 0%, var(--void) 18%);
  }

  /* "Three ways in" and the three card kickers were sized like fine print —
     bump them up so they read clearly at normal viewing distance while
     staying visibly secondary to final-heading/choice-title. */
  #subscribe .eyebrow-light {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  #subscribe .choice-kicker {
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  /* .ornate-btn carries its own margin-top:2.3rem for the blurb section,
     where it follows several paragraphs. That margin collapses with
     .cta-block's own margin-top here, pushing this button ~13px lower
     than the Preorder button beside it (which has no such extra margin).
     Zeroing it out leaves only .cta-block's shared margin-top, matching
     the other two cards exactly. */
  .choice-card .ornate-btn { margin-top: 0; }

  /* ---- footer: amber/parchment, mirrors the header's blue so the page
     reads blue-at-top / amber-at-bottom, The Burned Name's two colours ---- */
  .site-footer {
    background: var(--footer-amber-bg);
    color: var(--umber);
    padding: 5.5rem 3rem 4rem;
    box-shadow: inset 0 1px 0 rgba(255,235,190,0.35);
  }
  .footer-inner { max-width: 920px; }

  .footer-emblem { position: relative; margin-bottom: 1.6rem; }
  .footer-emblem .footer-emblem-img { display: none; }
  .footer-emblem .footer-emblem-img-desktop {
    display: block;
    width: clamp(150px, 13vw, 210px);
    height: auto;
    border-radius: 0;
    object-fit: contain;
    margin: 0 auto;
  }
  .footer-emblem::before, .footer-emblem::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(120px, 15vw, 240px);
    height: 1px;
    background: rgba(58, 40, 24, 0.4);
  }
  .footer-emblem::before { right: 100%; margin-right: 1.75rem; }
  .footer-emblem::after { left: 100%; margin-left: 1.75rem; }

  .footer-name-text { display: none; }
  .footer-name-img {
    /* A quiet sign-off, not a second hero — only modestly larger than
       .footer-series ("The Maelum Trilogy") below it. */
    display: block;
    height: clamp(26px, 2.2vw, 34px);
    width: auto;
    margin: 0 auto 0.6rem;
  }
  .footer-series {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: rgba(58, 40, 24, 0.85);
    margin-top: 0;
  }

  .footer-nav {
    gap: clamp(1.6rem, 2.6vw, 2.8rem);
    margin-top: 2.4rem;
    padding-top: 1.7rem;
    border-top: 1px solid rgba(58, 40, 24, 0.3);
  }
  .footer-nav a { font-size: 1.05rem; color: var(--umber); }
  .footer-nav a:hover { color: #5a3a14; }
  .footer-nav a.nav-pending { color: rgba(58, 40, 24, 0.45); }
  .footer-nav a.nav-pending:hover { color: rgba(58, 40, 24, 0.6); }

  .footer-social { margin-top: 2.2rem; gap: 1.2rem; }
  .footer-social .social-icon { color: var(--umber); }
  .footer-social .social-icon svg { width: 22px; height: 22px; }
  .footer-social .social-icon:hover { color: #5a3a14; }
  .footer-social .social-icon.is-pending:hover { color: var(--umber); }

  .footer-copyright { color: rgba(58, 40, 24, 0.7); margin-top: 1.6rem; }
}

/* ==========================================================================
   BOOKS PAGE  (books/index.html)
   Mobile-first: stacked tile layout by default, two-column grid from 1024px.
   Reuses .ornate-btn for the CTA styling (same gold-plaque component used
   everywhere else on the site) and the header/footer/eyebrow/dusk tokens.
   ========================================================================== */

.is-current-nav { pointer-events: none; }

.books-hero {
  position: relative;
  overflow: hidden;
  background: var(--dusk-3);
  padding: 2rem var(--space-3) 2.75rem;
  text-align: center;
}
.books-hero-map {
  position: absolute;
  inset: 0;
  min-width: 0;
}
.books-hero-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  filter: grayscale(1) brightness(1.6);
  mix-blend-mode: luminosity;
}
.books-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.books-hero-eyebrow {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1rem);
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 0.6rem;
}
.books-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 2.3rem + 3vw, 4.6rem);
  line-height: 1;
  color: #e6b969;
}
.books-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 200px;
  margin: 1.5rem auto 1.6rem;
  color: rgba(194, 139, 44, 0.5);
}
.books-divider::before, .books-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.books-divider span {
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin: 0 0.8rem;
  background: var(--amber);
  transform: rotate(45deg);
}
.books-hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
  color: rgba(244, 239, 226, 0.82);
}

.book-tiles {
  background: var(--dusk-3);
  padding: 0 0.5rem var(--space-6);
}
.book-tiles-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.book-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Extra gap between the (now much larger) cover and the kicker below it,
     so the label doesn't feel jammed against the book. */
  gap: 1.75rem;
  text-align: center;
  text-decoration: none;
  /* Horizontal padding trimmed hard — the cover art now bleeds close to the
     card edges to claim real width for its ~1.5x size; .book-tile-body
     below restores its own, larger horizontal inset so the title/CTA text
     still reads with proper margins despite the tile itself being tight. */
  padding: 2.75rem 0.5rem 2.25rem;
  border-radius: 6px;
  border: 1px solid rgba(194, 139, 44, 0.28);
  background:
    radial-gradient(120% 160% at 12% -10%, rgba(63, 92, 158, 0.28), transparent 55%),
    linear-gradient(135deg, var(--dusk-1) 0%, var(--dusk-2) 55%, var(--dusk-3) 100%);
  box-shadow: 0 24px 46px -30px rgba(0,0,0,0.7);
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}
.book-tile::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23c9973f' stroke-width='0.6'%3E%3Cpath d='M4 16 L4 4 L16 4'/%3E%3Cpath d='M84 4 L96 4 L96 16'/%3E%3Cpath d='M96 84 L96 96 L84 96'/%3E%3Cpath d='M16 96 L4 96 L4 84'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.book-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("assets/img/nightjar-watermark.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 92%;
}
.book-tile-amber,
.book-tile:hover, .book-tile:focus-visible {
  border-color: rgba(224, 172, 72, 0.65);
  background:
    radial-gradient(130% 160% at 18% -10%, rgba(255, 214, 140, 0.3), transparent 60%),
    linear-gradient(150deg, #9a6a30 0%, #6b431c 45%, #2c1c10 100%);
  box-shadow: 0 26px 50px -28px rgba(0,0,0,0.75), 0 0 30px -14px rgba(224,172,72,0.35);
}
.book-tile:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.book-tile-art { display: block; min-width: 0; }
/* Width-driven with height:auto, not the reverse — a fixed height paired
   with max-width:100% (the old rule) fights itself the moment the "auto"
   width they imply exceeds the card: max-width clamps the width down while
   height stays pinned, squashing the cover. Sizing off width alone lets the
   browser derive height from each PNG's real intrinsic ratio at every
   viewport, so it can never distort — see the header-name-img fix for the
   same pattern. */
.book-tile-art img {
  display: block;
  width: clamp(270px, 94vw, 416px);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.55));
}
/* Restores its own horizontal inset now that .book-tile's own padding has
   been trimmed to almost nothing to give the cover art room — title/CTA
   text still needs real margins even though the tile itself doesn't. */
.book-tile-body { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 0.75rem; }
.book-tile-kicker {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: rgba(244, 239, 226, 0.68);
  margin-bottom: 0.5rem;
}
.book-tile-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.5rem + 1.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--ivory);
}
.book-tile-cta { margin-top: var(--space-3); }

@media (hover: hover) and (min-width: 1024px) {
  .book-tile:not(.book-tile-amber):hover,
  .book-tile:not(.book-tile-amber):focus-visible {
    transform: translateY(-3px);
  }
}

@media (min-width: 1024px) {
  .books-hero { padding: 6.5rem 3rem 5rem; }

  .book-tiles { padding: 0 3rem var(--space-7); }
  /* Widened from 1160px so the 1.5x-larger covers have real room without
     crowding the text column. */
  .book-tiles-inner { max-width: 1320px; gap: var(--space-4); }

  .book-tile {
    flex-direction: row;
    align-items: center;
    text-align: left;
    /* Padding/gap trimmed back from their old values to give the bigger
       covers space to breathe without ballooning the whole card. */
    gap: clamp(2rem, 3.5vw, 3.25rem);
    padding: clamp(2.25rem, 3.5vw, 3.5rem) clamp(2.25rem, 3.5vw, 3.5rem);
  }
  .book-tile-kicker { font-size: 1.05rem; }
  .book-tile-art { flex: 0 0 auto; }
  /* width:auto explicitly reset here — the base (mobile-first) rule fixes
     width instead, and leaving both a fixed width AND this fixed height in
     effect at once would distort the cover exactly like the old bug this
     pattern replaced. Only one dimension may ever be the fixed one. */
  .book-tile-art img { width: auto; height: clamp(390px, 35vw, 510px); }
  .book-tile-body {
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    max-width: 22rem;
    margin: 0 auto;
    padding: 0;
  }
}

/* ==========================================================================
   BOOK ONE PAGE  (book1/index.html)
   Reuses .books-hero verbatim for the top section. Desktop and mobile show
   genuinely different artwork (wraparound vs. separate front/back covers),
   not just a resized version of the same image, so the two blocks below are
   mutually exclusive by breakpoint rather than one fluid layout.
   ========================================================================== */

.book1-mobile {
  /* Same amber-to-navy fade as the homepage's Burned Name blurb section,
     rather than a flat navy fill. */
  background: linear-gradient(100deg,
    #5c3a17 0%, #37220f 18%, #17110d 32%,
    #0c0f16 48%, #101a30 70%, #1c2f57 90%, #1c2f57 100%);
  padding: 2.5rem 1rem var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.book1-cover-img {
  display: block;
  width: min(90vw, 420px);
  height: auto;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 26px 50px -20px rgba(0,0,0,0.6);
}
.book1-mobile .cta-block { margin: 0.25rem 0 0; }

.book1-desktop { display: none; }

@media (min-width: 1024px) {
  .book1-mobile { display: none; }

  .book1-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(100deg,
      #5c3a17 0%, #37220f 18%, #17110d 32%,
      #0c0f16 48%, #101a30 70%, #1c2f57 90%, #1c2f57 100%);
    padding: 4rem 3rem var(--space-7);
    gap: 2.75rem;
  }
  .book1-wrap-img {
    display: block;
    width: min(88vw, 1320px);
    height: auto;
    max-width: 100%;
    box-shadow: 0 50px 90px -30px rgba(0,0,0,0.65);
  }
  .book1-desktop .cta-block { margin: 0; }
}

/* ==========================================================================
   BOOK TWO PAGE  (book2/index.html)
   .books-hero (reused verbatim, same as /books and /book1) is a
   self-contained top section that ends completely. Everything below is a
   SEPARATE section (.book2-content-section) with its own flat background —
   the map must not run behind the cover/blurb/Jovarn.

   Jovarn is a real third flex column here, not an absolutely-positioned
   overlay — cover / about+CTA / Jovarn are three siblings in one flex row,
   so by construction none of them can ever overlap another. On mobile the
   row becomes a column, which naturally stacks Jovarn after the CTA
   instead of behind any text.
   ========================================================================== */

.book2-content-section {
  /* Same amber-to-navy fade as the homepage's Burned Name blurb section,
     rather than a flat navy fill. */
  background: linear-gradient(100deg,
    #5c3a17 0%, #37220f 18%, #17110d 32%,
    #0c0f16 48%, #101a30 70%, #1c2f57 90%, #1c2f57 100%);
  padding: 2.5rem 1.25rem var(--space-6);
}
.book2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.book2-cover img {
  display: block;
  width: min(88vw, 380px);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,0.6));
}
.book2-about {
  width: 100%;
  max-width: 34rem;
  color: rgba(244, 239, 226, 0.9);
  text-align: left;
}
.book2-about-heading {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 1rem;
}
.book2-about p { font-size: 1.02rem; line-height: 1.7; }
.book2-about .cta-block { margin-top: 1.75rem; display: flex; justify-content: center; }

.book2-jovarn-col { display: flex; justify-content: center; }
.book2-jovarn {
  display: block;
  width: min(48vw, 210px);
  height: auto;
  opacity: 0.65;
}

@media (min-width: 1024px) {
  .book2-content-section { padding: 5rem 3rem 6rem; }

  .book2-content {
    max-width: 1400px;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 3.5vw, 3.25rem);
  }
  .book2-cover { flex: 0 0 auto; }
  /* height-driven (width:auto) rather than the mobile width-driven rule —
     the cover needs to feel substantial beside the blurb column, which a
     width-based clamp couldn't reach without starving the other two
     columns in a three-column row. */
  .book2-cover img { width: auto; height: clamp(360px, 28vw, 460px); }

  .book2-about { flex: 0 1 420px; padding-top: 0.5rem; }
  .book2-about-heading { font-size: 1.15rem; }
  .book2-about p { font-size: 1.05rem; }
  .book2-about .cta-block { display: block; margin-top: 2.25rem; }

  /* Its own reserved column, sized and gapped like any other flex sibling
     — this is what actually guarantees zero overlap with the blurb or the
     button, rather than opacity/z-index doing the work of hiding an
     overlap that's still physically there. */
  .book2-jovarn-col { flex: 0 0 auto; align-self: center; }
  .book2-jovarn {
    width: clamp(190px, 15vw, 280px);
    opacity: 0.75;
  }
}

/* ==========================================================================
   REVIEW PAGE  (review/index.html)
   .books-hero (reused verbatim, same as /books, /book1 and /book2) is a
   self-contained top section that ends completely before this one starts.
   Cards reuse .book-tile's corner-bracket/dusk-gradient language so they
   read as the same "site" as the /books tiles, but review buttons are a
   deliberately distinct component (.rv-btn) from .ornate-btn — buying and
   reviewing are different actions and shouldn't share a visual identity.
   ========================================================================== */

.rv-section {
  background: linear-gradient(165deg,
    #3a2810 0%, #241608 14%, #17110d 28%,
    #0c0f16 46%, #0e1526 66%, #17233f 84%, #1c2f57 100%);
  padding: 3rem 1.1rem var(--space-6);
}

.rv-intro { max-width: 640px; margin: 0 auto; text-align: center; }
.rv-lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.3rem + 1.4vw, 2rem);
  line-height: 1.25;
  color: var(--ivory);
  margin-bottom: 0.7rem;
}
.rv-divider { width: 140px; margin: 1.8rem auto; }
.rv-kicker {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 2.25rem;
}

.rv-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}

.rv-card {
  position: relative;
  padding: 2rem 1.5rem 2.5rem;
  border-radius: 6px;
  border: 1px solid rgba(194, 139, 44, 0.28);
  background:
    radial-gradient(120% 160% at 12% -10%, rgba(63, 92, 158, 0.28), transparent 55%),
    linear-gradient(135deg, var(--dusk-1) 0%, var(--dusk-2) 55%, var(--dusk-3) 100%);
  box-shadow: 0 24px 46px -30px rgba(0,0,0,0.7);
  text-align: center;
}
.rv-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23c9973f' stroke-width='0.6'%3E%3Cpath d='M4 16 L4 4 L16 4'/%3E%3Cpath d='M84 4 L96 4 L96 16'/%3E%3Cpath d='M96 84 L96 96 L84 96'/%3E%3Cpath d='M16 96 L4 96 L4 84'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.rv-card-active {
  border-color: rgba(224, 172, 72, 0.55);
  box-shadow: 0 26px 50px -28px rgba(0,0,0,0.75), 0 0 30px -16px rgba(224,172,72,0.3);
}
.rv-card-disabled { border-color: rgba(194, 139, 44, 0.16); }
.rv-card-disabled .rv-card-kicker,
.rv-card-disabled .rv-card-title { opacity: 0.75; }

.rv-card-art { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.rv-card-art img {
  display: block;
  width: auto;
  height: clamp(230px, 46vw, 320px);
  max-width: 100%;
  border-radius: 3px;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.55));
}
.rv-card-kicker {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: rgba(244, 239, 226, 0.68);
  margin-bottom: 0.4rem;
}
.rv-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.25rem + 0.8vw, 1.7rem);
  line-height: 1.2;
  color: var(--ivory);
  margin-bottom: 1.5rem;
}

.rv-card-actions { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 0.4rem; }

/* ---- review buttons: dark navy interior, fine gold border — a distinct
   component from .ornate-btn's gold-plaque "buy" language. ---- */
.rv-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--ivory);
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(244,239,226,0.05), rgba(0,0,0,0.15)), var(--void);
  border: 1px solid rgba(194, 139, 44, 0.55);
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.rv-btn:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(224,172,72,0.25), 0 10px 22px -12px rgba(224,172,72,0.45);
}
/* The real Goodreads/Amazon marks are dark-on-transparent (brown, black),
   made for light backgrounds — on this button's near-black interior they'd
   all but disappear. A small ivory badge behind each one gives them the
   contrast they need and normalizes their differing native shapes (the
   Goodreads "g" is a wide glyph; the Amazon mark is a square arrow+letter)
   into one consistent circular slot. */
.rv-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ivory);
  overflow: hidden;
  padding: 4px;
}
.rv-btn-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Book One, before its Goodreads/Amazon URLs are supplied in site-config.js:
   the generic [data-config-key] pending mechanism (script.js) adds
   .is-pending. Matches .ornate-btn.is-pending's convention elsewhere on the
   site: a primary CTA stays at full visual strength while pending (no
   opacity cut) so it still reads as "about to work", not broken — only the
   cursor and hover glow change. This is what keeps it looking immediately
   clickable, in deliberate contrast to the permanently-unavailable Book
   Two/Three state below. */
.rv-btn.is-pending {
  cursor: not-allowed;
}
.rv-btn.is-pending:hover {
  border-color: rgba(194, 139, 44, 0.55);
  box-shadow: none;
}

/* Book Two/Three: not wired to any config value at all, so they can never
   become clickable — visually muted well below the pending state above. */
.rv-btn-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  border-color: rgba(244, 239, 226, 0.18);
  color: rgba(244, 239, 226, 0.75);
}
.rv-btn-disabled .rv-btn-icon { opacity: 0.5; }

.rv-outro { max-width: 480px; margin: var(--space-6) auto 0; text-align: center; }
/* The same airship that appears on Everett's shoulder on The Burned Name's
   cover — width-driven with height:auto since it isn't a square mark, so
   its real proportions are preserved rather than squashed into a fixed box. */
.rv-ornament {
  display: block;
  width: 84px;
  height: auto;
  margin: 2.5rem auto 1.75rem;
  opacity: 0.7;
}
.rv-thanks {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ivory);
  margin-bottom: 0.4rem;
}
.rv-signoff {
  font-family: var(--font-display-sc);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: rgba(244, 239, 226, 0.65);
}

@media (min-width: 1024px) {
  .rv-section { padding: 5rem 3rem 6.5rem; }
  .rv-lede { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.4rem); }
  .rv-kicker { font-size: 1rem; margin-bottom: 3rem; }

  .rv-grid {
    max-width: 1160px;
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
  }
  .rv-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem 3rem;
  }
  .rv-card-art { flex: 1 0 auto; align-items: flex-end; margin-bottom: 1.75rem; }
  .rv-card-art img { height: clamp(300px, 20vw, 360px); }
  .rv-card-actions { margin-top: auto; }
  .rv-btn { font-size: 0.95rem; }

  .rv-outro { max-width: 640px; margin-top: var(--space-7); }
}

/* ==========================================================================
   SUPPORT PAGE  (support/index.html)
   .books-hero (reused verbatim) ends completely before this section starts.
   Mobile order is a straight vertical read: primary CTA area, the three-item
   "what you'll find" list, then the secondary CTA area — same content as
   desktop, nothing hidden, just stacked. At 1024px+ the same three blocks
   become real CSS Grid columns in the same source order (left, centre,
   right) — no flexbox `order` trickery needed.
   ========================================================================== */

.sp-hero-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  color: var(--ivory);
  margin-bottom: 0.6rem;
}

/* Same amber-to-navy pairing as the homepage's Everett blurb section:
   .mobile-blurb-card's vertical gradient here on mobile, .blurb-desktop's
   near-horizontal one at 1024px+ — reused verbatim rather than inventing a
   new pair, so this page shares that established piece of the palette. */
.sp-section {
  background: linear-gradient(180deg, #5c3a17 0%, #2a1c10 36%, #0c0f16 60%, #0a1220 100%);
  padding: 3rem 1.1rem var(--space-6);
}

.sp-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 480px;
  margin: 0 auto;
}
.sp-col { text-align: center; }

/* ---- Patreon CTA: dark navy interior, fine gold outline — distinct from
   .ornate-btn's gold-plaque "buy" language, same spirit as .rv-btn. ---- */
.sp-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid rgba(194, 139, 44, 0.55);
  background: linear-gradient(180deg, rgba(244,239,226,0.05), rgba(0,0,0,0.15)), var(--void);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sp-cta:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(224,172,72,0.25), 0 14px 30px -16px rgba(224,172,72,0.45);
}
/* Same convention as .ornate-btn.is-pending / .rv-btn.is-pending: a primary
   CTA stays at full visual strength while supportUrl is unset, so it still
   reads as "about to work" rather than broken. */
.sp-cta.is-pending { cursor: not-allowed; }
.sp-cta.is-pending:hover { border-color: rgba(194, 139, 44, 0.55); box-shadow: none; }

/* The Patreon mark is already a self-contained black circle with a white
   cutout — it doesn't need a badge behind it. Wrapping an already-round mark
   in a second, differently-sized circle just produced a fussy "circle
   inside a circle" look; showing it directly at native proportions reads
   as one clean mark instead. */
.sp-cta-logo {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.sp-cta-text { display: flex; flex-direction: column; text-align: left; gap: 0.15rem; }
.sp-cta-line1, .sp-cta-line2 {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-align: left;
}
.sp-cta-line1 { color: var(--amber); }
.sp-cta-line2 { color: var(--ivory); }
.sp-cta-arrow { margin-left: auto; color: var(--amber); font-size: 1.2rem; flex-shrink: 0; }

.sp-divider { width: 120px; margin: 1.75rem auto; }

.sp-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem);
  color: var(--ivory);
  margin-bottom: 1rem;
}

.sp-copy {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(244, 239, 226, 0.85);
  margin-bottom: 1.1rem;
}
.sp-copy:last-child { margin-bottom: 0; }
.sp-copy-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(244, 239, 226, 0.9);
  margin-bottom: 1.75rem;
}

.sp-feature-list { display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.sp-feature { display: flex; gap: 1rem; align-items: flex-start; }
.sp-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(194, 139, 44, 0.5);
  color: var(--amber);
  font-size: 1.05rem;
}
.sp-feature-body { min-width: 0; }
.sp-feature-title {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 0.35rem;
}
.sp-feature-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(244, 239, 226, 0.78);
}

/* Eyeless is a wide illustration (1800x724), not a square mark — sized by
   width with height:auto so its real proportions are kept. */
.sp-ornament {
  display: block;
  width: min(80vw, 240px);
  height: auto;
  margin: 0 auto 1.5rem;
  opacity: 0.85;
}
.sp-thanks {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ivory);
  margin-bottom: 0.4rem;
}
.sp-signoff {
  font-family: var(--font-display-sc);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(244, 239, 226, 0.65);
}

@media (min-width: 1024px) {
  .sp-section {
    background: linear-gradient(100deg,
      #5c3a17 0%, #37220f 18%, #17110d 32%,
      #0c0f16 48%, #101a30 70%, #1c2f57 90%, #1c2f57 100%);
    padding: 5.5rem 2.25rem 6.5rem;
  }

  .sp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.75rem;
    align-items: start;
    max-width: 1320px;
  }
  .sp-col-primary, .sp-col-features { text-align: left; }
  .sp-col-features, .sp-col-secondary {
    border-left: 1px solid rgba(194, 139, 44, 0.18);
    padding-left: 1.5rem;
  }

  /* Kept compact through the 1024–1279px tablet range, where a three-column
     grid leaves each column only ~270px wide — the roomier desktop sizing
     below (1280px+) would force "READ VAAL'S ORIGIN" onto a cramped third
     line inside the button. */
  .sp-cta { padding: 1.1rem 1.3rem; }
  .sp-cta-line1, .sp-cta-line2 { font-size: 0.86rem; }

  .sp-feature-list { gap: 1.85rem; }
}

@media (min-width: 1280px) {
  .sp-section { padding: 5.5rem 3rem 6.5rem; }
  .sp-columns { column-gap: 3rem; }
  .sp-cta { padding: 1.3rem 1.7rem; }
  .sp-cta-logo { width: 36px; height: 36px; }
  .sp-cta-line1, .sp-cta-line2 { font-size: 1.02rem; }
}

/* ==========================================================================
   ABOUT PAGE  (about/index.html)
   .books-hero is reused for the map treatment, but unlike every other page
   its content is richer (portrait + heading + intro), so on mobile the map
   image is masked to fade out before the portrait rather than running the
   full height of a taller hero. On desktop the portrait becomes a real CSS
   Grid column instead — DOM order stays mobile-reading-order (heading,
   portrait, intro) throughout; only its on-screen position changes.
   ========================================================================== */

.ab-hero { padding: 2.25rem var(--space-3) 2.75rem; }
.ab-hero-map {
  mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 34%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 34%);
}
.ab-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 560px;
  margin: 0 auto;
}
.ab-hero-title { line-height: 1.08; }

.ab-portrait-wrap { width: min(56vw, 230px); }
.ab-portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 2px solid var(--amber);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.7), 0 0 0 6px rgba(194,139,44,0.1);
}

.ab-hero-intro { max-width: 520px; }
.ab-intro-lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  line-height: 1.35;
  color: var(--ivory);
  margin-bottom: 0.9rem;
}

/* ---- biography ---- */
.ab-bio-section {
  background:
    radial-gradient(120% 160% at 50% -10%, rgba(63, 92, 158, 0.18), transparent 60%),
    var(--dusk-3);
  padding: 3rem 1.25rem var(--space-6);
}
.ab-bio-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 620px;
  margin: 0 auto;
}
.ab-bio-col { text-align: left; }
.ab-bio-divider { height: 1px; background: rgba(194, 139, 44, 0.2); }
.ab-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  color: var(--amber);
  margin-bottom: 1rem;
}
.ab-copy {
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(244, 239, 226, 0.88);
  margin-bottom: 1.1rem;
}
.ab-copy:last-child { margin-bottom: 0; }
.ab-copy em { font-style: italic; color: var(--ivory); }

.ab-closing { margin-top: var(--space-6); }
/* One real amber feature card — same background/border/shadow language as
   the footer card (.footer-inner), not a second decorative outline nested
   inside a first. Contained rather than full-bleed at every width, so it
   keeps this section's existing horizontal-panel footprint instead of
   becoming a full-width footer band. */
.ab-closing-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  background: var(--footer-amber-bg);
  border: 1px solid rgba(58, 40, 24, 0.45);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35), 0 24px 50px -22px rgba(0,0,0,0.55);
  text-align: center;
}
/* Airship, not a square mark — width-driven with height:auto so its real
   proportions (653x567) are kept rather than squashed. */
.ab-closing-nightjar {
  display: block;
  width: 66px;
  height: auto;
  margin: 0 auto 1.25rem;
  opacity: 0.9;
}
.ab-closing-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}
.ab-closing-line + .ab-closing-line { margin-top: 0.3rem; }

/* Tablet: biography becomes two columns, with the third ("Thank You")
   spanning the full width below rather than leaving an empty cell — three
   items don't divide evenly into two columns. */
@media (min-width: 700px) {
  .ab-bio-divider { display: none; }
  .ab-bio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 2.5rem;
    max-width: 900px;
  }
  .ab-bio-col-last { grid-column: 1 / -1; max-width: 620px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .ab-hero { padding: 4.5rem 3rem 5rem; }
  .ab-hero-map { mask-image: none; -webkit-mask-image: none; }
  .ab-hero-inner {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    column-gap: 3.5rem;
    align-items: center;
    text-align: left;
  }
  .ab-hero-head { grid-column: 2; grid-row: 1; text-align: center; }
  .ab-portrait-wrap { grid-column: 1; grid-row: 1 / 3; width: 100%; }
  .ab-hero-intro { grid-column: 2; grid-row: 2; text-align: center; max-width: 640px; margin: 0 auto; }

  .ab-bio-section { padding: 5.5rem 3rem 6.5rem; }
  .ab-bio-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1240px;
    column-gap: 1.75rem;
    row-gap: 0;
  }
  .ab-bio-col-last { grid-column: auto; max-width: none; margin: 0; }
  .ab-bio-col:not(:first-child) {
    border-left: 1px solid rgba(194, 139, 44, 0.18);
    padding-left: 1.75rem;
  }
  .ab-heading { font-size: 1.3rem; }
  .ab-copy { font-size: 1rem; }

  .ab-closing { margin-top: var(--space-7); }
  .ab-closing-inner { max-width: 720px; padding: 3rem 2.5rem; }
  .ab-closing-line { font-size: 1.2rem; }
}

/* ==========================================================================
   SUBSCRIBE PAGE  (subscribe/index.html)
   Unlike every other page, this one is a single continuous map-backed panel
   rather than a compact hero followed by a separate flat section — the
   reference treats the whole page as one atmospheric card, so this does
   too. The Lullaby Map sits behind everything using the exact same
   low-opacity/desaturated/luminosity technique as .books-hero-map
   elsewhere, just stretched the full height instead of a hero band, so it
   reads as mood/texture rather than the reference's literal bright
   parchment page.
   ========================================================================== */

.sb-section {
  position: relative;
  overflow: hidden;
  background: var(--dusk-3);
  padding: 3rem 1.25rem var(--space-6);
}
/* The map keeps its real parchment colour here (unlike the desaturated
   .books-hero-map treatment elsewhere) — legibility instead comes from a
   dark navy scrim layered on top (::after) plus text-shadow on the type
   sitting directly over it, the same two-part technique the homepage's
   book-on-map hero already uses for readable text over full-colour art. */
.sb-map { position: absolute; inset: 0; min-width: 0; }
.sb-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.8;
}
.sb-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(8, 13, 24, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.72) 0%, rgba(8, 13, 24, 0.6) 45%, rgba(8, 13, 24, 0.78) 100%);
}

.sb-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* Everett (541x1027, a tall figure, not a wide mark) — height-driven so his
   real proportions are kept, sized as a quiet accent above the heading
   rather than the full hero-scale figure he is on the homepage. */
.sb-emblem {
  display: block;
  height: 92px;
  width: auto;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}

.sb-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 1.8rem + 2.2vw, 3.4rem);
  line-height: 1.08;
  color: #e6b969;
  text-shadow:
    -1px -1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9),
    -1px 1px 1px rgba(0,0,0,0.9), 1px 1px 1px rgba(0,0,0,0.9),
    0 0 4px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.9);
}

.sb-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
  color: rgba(244, 239, 226, 0.9);
  margin: 1.6rem 0 2.25rem;
  text-shadow: 0 0 3px rgba(0,0,0,0.85), 0 4px 16px rgba(0,0,0,0.7);
}

.sb-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.25rem;
  text-align: left;
}
.sb-benefit {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(194, 139, 44, 0.28);
  background:
    radial-gradient(120% 160% at 12% -10%, rgba(63, 92, 158, 0.22), transparent 55%),
    linear-gradient(135deg, var(--dusk-1) 0%, var(--dusk-2) 55%, var(--dusk-3) 100%);
}
.sb-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(194, 139, 44, 0.5);
  color: var(--amber);
}
.sb-benefit-text {
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(244, 239, 226, 0.9);
}

.sb-form { margin-bottom: 1rem; }
.sb-form-label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(244, 239, 226, 0.92);
  text-shadow: 0 0 3px rgba(0,0,0,0.85), 0 3px 12px rgba(0,0,0,0.7);
  margin-bottom: 0.85rem;
}
.sb-form input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.9rem;
  box-sizing: border-box;
}
.sb-form input:focus { border-color: var(--amber); outline: none; }

/* Dark/amber CTA — same family as .sp-cta and .rv-btn elsewhere, not the
   gold-plaque .ornate-btn "buy" language, since this isn't a purchase. */
.sb-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1.5rem;
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(244,239,226,0.05), rgba(0,0,0,0.15)), var(--void);
  border: 1px solid rgba(194, 139, 44, 0.55);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sb-submit:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(224,172,72,0.25), 0 14px 30px -16px rgba(224,172,72,0.45);
}

.sb-reassurance {
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(244, 239, 226, 0.7);
  text-shadow: 0 0 3px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.65);
}

@media (min-width: 1024px) {
  .sb-section { padding: 6rem 3rem 6.5rem; }
  .sb-inner { max-width: 760px; }
  .sb-emblem { height: 130px; }
  .sb-benefits { flex-direction: row; align-items: stretch; }
  .sb-benefit { flex: 1; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}