/* =====================================================================
   THE SWITCH — Ralph Johnson
   style.css · base, layout & components (mobile-first)
   Breakpoint overrides live in responsive.css, motion in animations.css
   ===================================================================== */

/* ---------- 1. Design tokens (palette taken from the cover) ---------- */
:root {
  --color-deep-blue:   #1a2744;  /* mountain shadow, title base */
  --color-steel:       #3d5a80;  /* mid-gradient */
  --color-ice:         #98c1d9;  /* title highlight */
  --color-cream:       #e8dcc8;  /* stone station façades */
  --color-gold:        #c9a961;  /* warm window light, lamps */
  --color-forest:      #2c3e2e;  /* pine forest */
  --color-mist:        #b8c4c9;  /* fog, clouds */
  --color-ink:         #0f1620;  /* darkest text */
  --color-paper:       #f5efe3;  /* reading background */

  /* Accessibility-derived shades (gold is too light for small text on paper) */
  --color-gold-deep:   #7a5f26;  /* gold for text on paper — 5:1 */
  --color-gold-ink:    #9c7b36;  /* drop caps & large display on paper — 3.4:1 */
  --color-blue-hover:  #213259;
  --color-ok:          var(--color-ice);
  --color-error:       #e8b4a0;

  --font-display: 'Bebas Neue', 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;

  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-cinema: cubic-bezier(.65, 0, .35, 1);

  --header-h: 68px;
  --gutter:   20px;
  --maxw:     1240px;
  --maxw-wide: 1440px;
  --radius:   2px;

  --line-gold: rgba(201, 169, 97, .35);
  --line-cream: rgba(232, 220, 200, .14);
  --shadow-deep: 0 30px 80px rgba(5, 9, 16, .55);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, blockquote, figure, ol, ul, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(h1, h2, h3) { font-weight: 400; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--color-gold); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 1px;
}
main:focus { outline: none; }

/* ---------- 3. Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }
.container--wide   { max-width: var(--maxw-wide); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

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

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--color-gold);
  color: var(--color-ink);
  font: 600 .8rem var(--font-sans);
  letter-spacing: .1em;
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* Film-grain overlay (3–5% opacity) */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Typography ---------- */
.eyebrow {
  display: inline-block;
  font: 500 .7rem/1.4 var(--font-sans);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 5.75rem);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: .35em;
}
.display--md { font-size: clamp(2.25rem, 6vw, 4rem); }
.display em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-gold);
  font-size: .82em;
}

.lead {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-cream);
}
.muted { color: var(--color-mist); }
.prose-block p + p { margin-top: 1.1em; }
.prose-block { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.7; }

.rule-gold {
  display: block;
  width: 64px;
  height: 1px;
  margin: 28px 0;
  background: var(--color-gold);
}
.center .rule-gold { margin-inline: auto; }

/* ---------- 5. Buttons & links ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  min-height: 52px;
  padding: 0 1.9em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 .74rem/1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }
.btn--gold {
  background: linear-gradient(180deg, #d6ba79 0%, var(--color-gold) 55%, #b9974f 100%);
  color: var(--color-ink);
  border-color: rgba(255, 236, 190, .35);
}
.btn--gold:hover, .btn--gold:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(201, 169, 97, .4);
}
.btn--ghost {
  background: transparent;
  color: var(--color-cream);
  border-color: rgba(232, 220, 200, .55);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--color-cream);
  color: var(--color-ink);
  border-color: var(--color-cream);
  transform: scale(1.02);
}
.btn--ink {
  background: var(--color-deep-blue);
  color: var(--color-paper);
}
.btn--ink:hover, .btn--ink:focus-visible {
  background: var(--color-blue-hover);
  transform: scale(1.02);
  box-shadow: 0 0 36px rgba(26, 39, 68, .35);
}
.btn--sm { min-height: 40px; padding: 0 1.25em; font-size: .66rem; letter-spacing: .2em; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font: 600 .72rem/1.2 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-bottom: 6px;
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow:hover .icon { transform: translateX(4px); }
.section--paper .link-arrow { color: var(--color-gold-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row > .btn, .hero__ctas > .btn { flex: 1 1 100%; padding-block: 12px; line-height: 1.35; }
.center .btn-row { justify-content: center; }

/* ---------- 6. Sections ---------- */
.section {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
}
.section--tight { padding-block: clamp(44px, 5vw, 72px); }
.section--ink   { background: var(--color-ink); }
.section--blue  { background: var(--color-deep-blue); }
.section--deep  { background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-deep-blue) 100%); }
.section--rise  { background: linear-gradient(180deg, var(--color-deep-blue) 0%, var(--color-ink) 100%); }
.section--paper {
  background: var(--color-paper);
  color: var(--color-ink);
}
.section--paper .eyebrow { color: var(--color-gold-deep); }
.section--paper .display { color: var(--color-deep-blue); }
.section--paper .muted { color: #4a5568; }

.section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head.center { margin-inline: auto; }
.section__head p:not(.eyebrow) { margin-top: .8rem; }

/* ---------- 7. Header & navigation ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: background-color .45s var(--ease-out), box-shadow .45s, backdrop-filter .45s;
}
.site-header.is-scrolled {
  background: rgba(15, 22, 32, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(201, 169, 97, .18);
}
.nav-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

.site-header__inner {
  max-width: var(--maxw-wide);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  margin-right: auto;
}
.brand__title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: .08em;
  color: var(--color-cream);
}
.brand__author {
  margin-top: 4px;
  font: 500 .55rem var(--font-sans);
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.brand--lg .brand__title { font-size: 2.6rem; }
.brand--lg .brand__author { font-size: .62rem; margin-top: 8px; }

/* Mobile: full-screen overlay menu */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: calc(var(--header-h) + 24px) 32px 40px;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(61, 90, 128, .55), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(44, 62, 46, .45), transparent 55%),
    var(--color-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
.nav-open .site-nav { opacity: 1; visibility: visible; }
.site-nav__list { display: grid; gap: 6px; }
.site-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  letter-spacing: .03em;
  line-height: 1.1;
  color: var(--color-cream);
  transition: color .25s;
}
.site-nav__link[aria-current="page"], .site-nav__link:hover { color: var(--color-gold); }
.site-nav__cta { align-self: flex-start; }
.site-nav__foot {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-mist);
}

.site-header__buy { position: relative; z-index: 2; }
.nav-toggle {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 7px;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-cream);
  transition: transform .35s var(--ease-out);
}
.nav-open .nav-toggle__bar:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-open .nav-toggle__bar:last-child  { transform: translateY(-4.25px) rotate(-45deg); }
.nav-open { overflow: hidden; }

/* ---------- 8. Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--color-cream);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  will-change: transform;
}
.hero__picture, .hero__picture img {
  width: 100%;
  height: 100%;
}
.hero__picture img {
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(.82) contrast(1.06) brightness(.82);
}
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 62% 46% at 50% 50%, rgba(15, 22, 32, .5), transparent 72%),
    radial-gradient(ellipse at 50% 45%, rgba(26, 39, 68, 0) 0%, rgba(26, 39, 68, .5) 58%, var(--color-deep-blue) 100%),
    linear-gradient(180deg, rgba(15, 22, 32, .6) 0%, rgba(15, 22, 32, .05) 30%, rgba(15, 22, 32, .2) 70%, var(--color-ink) 100%);
}
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero__content {
  position: relative;
  padding-top: calc(var(--header-h) + 24px);
  padding-bottom: 72px;
}
.hero__eyebrow { margin-bottom: 18px; }
.hero__title { line-height: 1; }
.hero__the {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  letter-spacing: .38em;
  padding-left: .38em;
  color: #f1f5f8;
  text-shadow: 0 2px 16px rgba(5, 9, 16, .6);
}
.hero__the::before, .hero__the::after {
  content: "";
  width: clamp(44px, 12vw, 180px);
  height: 1px;
  background: currentColor;
  opacity: .85;
}
.hero__switch {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5.75rem, 24vw, 16.5rem);
  line-height: .84;
  letter-spacing: .02em;
  margin-top: .04em;
}
.shimmer {
  color: var(--color-ice);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 45%, rgba(26, 39, 68, .35) 100%),
    linear-gradient(100deg, #98c1d9 0%, #f0f6fa 16%, #98c1d9 34%, #5c84ad 54%, #98c1d9 72%, #f0f6fa 88%, #98c1d9 100%);
  background-size: 100% 100%, 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 26px rgba(5, 9, 16, .6));
}
.hero__author {
  margin-top: 1.3rem;
  font: 500 clamp(.82rem, 1.6vw, 1.1rem) var(--font-sans);
  letter-spacing: .62em;
  padding-left: .62em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-shadow: 0 2px 12px rgba(5, 9, 16, .7);
}
.hero__tagline {
  max-width: 30ch;
  margin: 1.2rem auto 1.8rem;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.35;
  text-shadow: 0 2px 14px rgba(5, 9, 16, .75);
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 420px; margin-inline: auto; }
.hero__formats {
  margin-top: 1.5rem;
  font: 500 .6rem/1.6 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-mist);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font: 500 .58rem var(--font-sans);
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  color: var(--color-mist);
}
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(232, 220, 200, .18);
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--color-gold));
}

/* Particles (positions/durations set by particles.js) */
.particle {
  position: absolute;
  top: 0;
  left: var(--x);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.particle--drop {
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle, rgba(236, 242, 246, .9) 0%, rgba(236, 242, 246, 0) 70%);
}
.particle--streak {
  width: 1px;
  height: var(--s);
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(220, 232, 240, 0), rgba(220, 232, 240, .55));
}
.particle--fog {
  top: var(--y);
  width: var(--s);
  height: calc(var(--s) * .45);
  background: radial-gradient(ellipse, rgba(200, 212, 218, .5) 0%, rgba(200, 212, 218, 0) 70%);
  filter: blur(18px);
}
.is-paused .particle { animation-play-state: paused !important; }

/* ---------- 9. Inner page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + clamp(28px, 5vw, 64px)) 0 clamp(40px, 6vw, 80px);
  background:
    radial-gradient(ellipse at 75% 0%, rgba(61, 90, 128, .55), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(44, 62, 46, .35), transparent 50%),
    linear-gradient(180deg, var(--color-ink), var(--color-deep-blue));
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
}
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(.6); }
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 22, 32, .4), var(--color-deep-blue));
}
.page-hero .display { max-width: 16ch; }
.center .display, .center .lead { margin-inline: auto; }
.page-hero .lead { margin-top: 1rem; max-width: 42ch; }
.page-hero__ctas { margin-top: 1.6rem; }
.page-hero .hero__formats { margin-top: 1.5rem; }

/* ---------- 10. 3D book ---------- */
.book3d {
  --w: clamp(220px, 62vw, 300px);
  --t: 34px;
  position: relative;
  width: var(--w);
  margin-inline: auto;
  perspective: 1800px;
}
.book3d--sm { --w: 190px; --t: 22px; }
.book3d--md { --w: clamp(200px, 50vw, 280px); --t: 30px; }
.book3d__inner {
  position: relative;
  aspect-ratio: 753 / 1147;
  transform-style: preserve-3d;
  transform: rotateY(calc(24deg + var(--ty, 0deg))) rotateX(calc(3deg + var(--tx, 0deg)));
  transition: transform .7s var(--ease-out);
}
.book3d__cover, .book3d__back {
  position: absolute;
  inset: 0;
  border-radius: 1px 4px 4px 1px;
  overflow: hidden;
}
.book3d__cover { transform: translateZ(calc(var(--t) / 2)); background: var(--color-deep-blue); }
.book3d__cover img { width: 100%; height: 100%; object-fit: cover; }
.book3d__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .22), transparent 45%),
    linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(255, 255, 255, .16) 2.2%, rgba(0, 0, 0, .1) 4.5%, transparent 9%, transparent 82%, rgba(0, 0, 0, .16) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.book3d__back {
  transform: translateZ(calc(var(--t) / -2)) rotateY(180deg);
  background: linear-gradient(135deg, #22335a, var(--color-deep-blue));
}
.book3d__spine {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--t);
  height: 100%;
  transform: translateX(calc(var(--t) / -2)) rotateY(-90deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: linear-gradient(90deg, #0f1830 0%, #2a3f67 42%, #1a2744 78%, #111a30 100%);
  color: var(--color-ice);
  overflow: hidden;
}
.book3d__spine span {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: calc(var(--t) * .52);
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
}
.book3d__spine span:last-child { font-family: var(--font-sans); font-size: calc(var(--t) * .28); letter-spacing: .3em; color: var(--color-cream); }
.book3d__pages {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(100% - var(--t) / 2 - 3px);
  width: calc(var(--t) - 2px);
  transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f4ede0 0 1px, #ddd2bf 1px 2px);
}
.book3d__top {
  position: absolute;
  left: 2px;
  right: 4px;
  top: calc(var(--t) / -2);
  height: var(--t);
  transform: rotateX(90deg);
  background: repeating-linear-gradient(0deg, #f4ede0 0 1px, #ddd2bf 1px 2px);
}
.book3d__shadow {
  position: absolute;
  left: 4%;
  right: -8%;
  bottom: -7%;
  height: 12%;
  background: radial-gradient(ellipse at 45% 50%, rgba(0, 0, 0, .6), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

/* ---------- 11. Pull quotes ---------- */
.pullquote {
  position: relative;
  padding-top: 1.8rem;
}
.pullquote::before {
  content: "\201C";
  position: absolute;
  top: -.15em;
  left: -.04em;
  font: 500 6.5rem/1 var(--font-serif);
  color: var(--color-gold);
}
.pullquote p {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  color: var(--color-cream);
}
.pullquote footer, .pullquote cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 1.2rem;
  font: 500 .66rem var(--font-sans);
  font-style: normal;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.quote-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(201, 169, 97, .14), transparent 55%),
    var(--color-deep-blue);
  text-align: center;
  border-block: 1px solid var(--line-gold);
}
.quote-band blockquote { max-width: 980px; margin-inline: auto; }
.quote-band.has-motif { padding-bottom: clamp(96px, 12vw, 170px); }
.quote-band blockquote p {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.18;
  max-width: 24ch;
  margin-inline: auto;
}
.quote-band .rule-gold { margin-inline: auto; }
.quote-band cite {
  display: block;
  margin-top: 1.5rem;
  font: 500 .66rem var(--font-sans);
  font-style: normal;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---------- 12. Home: Story ---------- */
.story__grid { display: grid; gap: 40px; align-items: center; }
.story__book { padding-bottom: 24px; }
.story__text .display { margin-bottom: 1.1rem; }
.story__text .pullquote { margin-top: 2rem; }
.story__text .link-arrow { margin-top: 1.5rem; }

/* ---------- 13. Praise carousel ---------- */
.praise { text-align: center; overflow: hidden; }
.praise::before {
  content: "\201C";
  position: absolute;
  top: 2%;
  left: 50%;
  translate: -50% 0;
  font: 500 clamp(16rem, 40vw, 30rem)/1 var(--font-serif);
  color: rgba(201, 169, 97, .05);
  pointer-events: none;
}
.praise__title { margin-bottom: clamp(20px, 3vw, 36px); line-height: 1; }
.carousel { position: relative; max-width: 980px; margin-inline: auto; }
.carousel__track { display: grid; }
.carousel__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), visibility .9s;
}
.carousel__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.carousel__slide blockquote p {
  font-style: italic;
  font-size: clamp(1.55rem, 3.6vw, 2.6rem);
  line-height: 1.28;
  max-width: 32ch;
  margin-inline: auto;
}
.carousel__slide figcaption {
  margin-top: 1.75rem;
  font: 500 .66rem var(--font-sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.75rem;
}
.carousel__dot {
  width: 40px;
  height: 28px;
  display: grid;
  place-items: center;
}
.carousel__dot::before {
  content: "";
  width: 28px;
  height: 2px;
  background: rgba(232, 220, 200, .25);
  transition: background .3s, width .3s;
}
.carousel__dot[aria-current="true"]::before { background: var(--color-gold); width: 36px; }

/* ---------- 14. Journey map ---------- */
.journey { display: grid; gap: 28px; align-items: start; }
.journey__map { position: relative; }
.journey__svg { width: 100%; height: auto; overflow: visible; }
.journey__grid line { stroke: rgba(26, 39, 68, .13); stroke-width: 1; stroke-dasharray: 2 7; }
.journey__grid text { display: none; fill: rgba(26, 39, 68, .45); font: 500 13px var(--font-sans); letter-spacing: .18em; }
.journey__sea text { display: none; fill: rgba(61, 90, 128, .5); font: italic 500 26px var(--font-serif); letter-spacing: .28em; }
.journey__peaks path { fill: none; stroke: rgba(44, 62, 46, .45); stroke-width: 1.6; stroke-linejoin: round; }
.journey__route-shadow { fill: none; stroke: rgba(26, 39, 68, .08); stroke-width: 12; stroke-linecap: round; }
.journey__route {
  fill: none;
  stroke: #a98a44;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey__origin circle { fill: var(--color-paper); stroke: var(--color-deep-blue); stroke-width: 2.5; }
.journey__origin text { fill: var(--color-deep-blue); font: 600 17px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; }
.journey__origin .journey__origin-note { font: italic 500 19px var(--font-serif); letter-spacing: .04em; text-transform: none; fill: var(--color-steel); }
.journey__pin-dot { fill: var(--color-gold); stroke: var(--color-deep-blue); stroke-width: 2.25; transition: r .3s; }
.journey__pin-glow { opacity: 0; transition: opacity .4s; }
.journey__pin-label {
  fill: var(--color-deep-blue);
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: .06em;
  transition: fill .3s;
}
.journey__pin.is-active .journey__pin-glow { opacity: 1; }
.journey__pin.is-active .journey__pin-label { fill: var(--color-gold-deep); }
.journey__train { fill: var(--color-gold); stroke: var(--color-paper); stroke-width: 2.5; opacity: 0; transition: opacity .6s; }
.journey__train.is-running { opacity: 1; }
.journey__compass circle { fill: none; stroke: rgba(26, 39, 68, .28); }
.journey__compass path { fill: rgba(26, 39, 68, .5); }
.journey__compass text { fill: rgba(26, 39, 68, .6); font: 600 15px var(--font-sans); }
.journey__caption {
  margin-top: 10px;
  font-style: italic;
  font-size: 1rem;
  color: #5b6474;
  text-align: center;
}

.journey__list { border-bottom: 1px solid rgba(26, 39, 68, .14); }
.journey__stop {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 20px 8px 20px 0;
  border-top: 1px solid rgba(26, 39, 68, .14);
  outline-offset: -2px;
  transition: background-color .3s;
}
.journey__stop::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--color-gold);
  transform: scaleY(0);
  transition: transform .35s var(--ease-out);
}
.journey__stop.is-active::before { transform: scaleY(1); }
.journey__num {
  padding-top: .5em;
  font: 600 .68rem var(--font-sans);
  letter-spacing: .18em;
  color: var(--color-gold-deep);
}
.journey__city {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--color-deep-blue);
}
.journey__meta {
  margin-top: 6px;
  font: 500 .64rem var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-steel);
}
.journey__line {
  margin-top: 6px;
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.45;
  color: #39445a;
}

/* ---------- 15. Formats strip ---------- */
.formats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-gold);
  border: 1px solid var(--line-gold);
}
.format-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 16px 20px;
  background: var(--color-deep-blue);
  transition: background-color .35s;
}
.format-card:hover, .format-card:focus-within { background: var(--color-blue-hover); }
.format-card .icon { width: 30px; height: 30px; color: var(--color-gold); stroke-width: 1; margin-bottom: 4px; }
.format-card__label { font-family: var(--font-display); font-size: 1.85rem; letter-spacing: .05em; line-height: 1; }
.format-card__detail { font: 500 .7rem/1.5 var(--font-sans); letter-spacing: .04em; color: var(--color-mist); }
.format-card__price { font-size: 1.4rem; margin-top: 4px; }
.format-card__price small { font: 500 .62rem var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--color-mist); margin-right: 6px; }
.format-card .link-arrow { margin-top: auto; padding-top: 8px; }
.format-card .link-arrow::before { content: ""; position: absolute; inset: -400px -400px; } /* whole card clickable */
.format-card { overflow: hidden; }
.formats__gift {
  margin-top: 1.5rem;
  text-align: center;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-mist);
}

/* ---------- 16. Image band (newsletter / CTA) ---------- */
.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.band__bg { position: absolute; inset: -20px; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(.7) brightness(.7); }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(26, 39, 68, .65), rgba(15, 22, 32, .92) 75%),
    linear-gradient(180deg, var(--color-ink) 0%, transparent 25%, transparent 75%, var(--color-ink) 100%);
}
.band__inner { max-width: 680px; margin-inline: auto; }
.band .lead { margin: 1rem auto 1.6rem; max-width: 40ch; }

/* ---------- 17. Forms ---------- */
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  background: rgba(245, 239, 227, .06);
  border: 1px solid rgba(232, 220, 200, .3);
  border-radius: var(--radius);
  color: var(--color-cream);
  font: 400 .95rem var(--font-sans);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field ::placeholder { color: rgba(184, 196, 201, .75); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(245, 239, 227, .09);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .18);
}
.form-status {
  min-height: 0;
  font: 500 .85rem/1.5 var(--font-sans);
}
.form-status:not(:empty) { margin-top: 12px; }
.form-status.is-ok { color: var(--color-ok); }
.form-status.is-error { color: var(--color-error); }
.form-status a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }

.is-loading [type="submit"] span { opacity: .35; }
.is-loading [type="submit"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.section--paper .field input, .section--paper .field select, .section--paper .field textarea {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(26, 39, 68, .28);
  color: var(--color-ink);
}
.section--paper .form-status.is-ok { color: var(--color-steel); }
.section--paper .form-status.is-error { color: #8a3b2a; }

.form { display: grid; gap: 22px; }
.form__row { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label {
  font: 600 .66rem var(--font-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-mist);
}
.field textarea { min-height: 180px; padding: 16px 18px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a961' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 48px;
}
.field select option { background: var(--color-deep-blue); color: var(--color-cream); }
.field__error { font: 500 .78rem var(--font-sans); color: var(--color-error); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--color-error); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; }
.form__privacy { font: 400 .74rem/1.5 var(--font-sans); color: var(--color-mist); max-width: 40ch; }

/* ---------- 18. Footer ---------- */
.site-footer {
  position: relative;
  background: var(--color-ink);
  padding: 48px 0 36px;
  font-size: 1.05rem;
}
.site-footer__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  translate: 0 -100%;
  height: clamp(36px, 6vw, 84px);
  pointer-events: none;
}
.site-footer__horizon svg { width: 100%; height: 100%; }
.site-footer__horizon path { fill: var(--color-ink); }
.site-footer__grid { display: grid; gap: 36px; }
.site-footer__line { margin: 14px 0 20px; max-width: 34ch; color: var(--color-mist); }
.site-footer__heading {
  margin-bottom: 18px;
  font: 600 .68rem var(--font-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.site-footer__nav ul { display: grid; gap: 10px; }
.site-footer__nav a { position: relative; transition: color .25s; }
.site-footer__nav a:hover { color: var(--color-gold); }
.site-footer__start p { color: var(--color-mist); margin-bottom: 18px; max-width: 36ch; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line-cream);
  font: 400 .74rem var(--font-sans);
  letter-spacing: .04em;
  color: var(--color-mist);
}
.site-footer__legal { margin-right: auto; }
.site-footer__credit a { color: var(--color-cream); border-bottom: 1px solid var(--line-gold); }
.social { display: flex; gap: 10px; width: 100%; }
.social__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(232, 220, 200, .2);
  border-radius: 50%;
  color: var(--color-cream);
  transition: border-color .25s, color .25s, transform .25s;
}
.social__link .icon { width: 18px; height: 18px; }
.social__link:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-2px); }

/* ---------- 19. Sticky buy bar ---------- */
.sticky-buy {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 40;
  max-width: 760px;
  margin-inline: auto;
  transform: translateY(160%);
  transition: transform .55s var(--ease-cinema);
}
.sticky-buy.is-visible { transform: none; }
.sticky-buy__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  background: rgba(15, 22, 32, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.sticky-buy__thumb { width: 34px; height: auto; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.sticky-buy__text { display: grid; line-height: 1.15; margin-right: auto; min-width: 0; }
.sticky-buy__text strong { font: 400 1.3rem var(--font-display); letter-spacing: .06em; }
.sticky-buy__text span { font: 500 .66rem var(--font-sans); letter-spacing: .06em; color: var(--color-mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy .btn { flex-shrink: 0; white-space: nowrap; }
.sticky-buy__close { width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-mist); }
.sticky-buy__close .icon { width: 16px; height: 16px; }
.sticky-buy__close:hover { color: var(--color-cream); }

/* ---------- 20. Modal (exit intent) ---------- */
.modal {
  width: calc(100% - 32px);
  max-width: 860px;
  max-height: calc(100% - 32px);
  padding: 0;
  overflow: auto;
  color: var(--color-cream);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(61, 90, 128, .5), transparent 55%),
    var(--color-deep-blue);
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  box-shadow: var(--shadow-deep);
}
.modal::backdrop { background: rgba(6, 10, 18, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--color-mist);
}
.modal__close .icon { width: 20px; height: 20px; }
.modal__close:hover { color: var(--color-cream); }
.modal__grid { display: grid; }
.modal__book {
  display: none;
  place-items: center;
  padding: 40px;
  background: radial-gradient(ellipse at 50% 60%, rgba(201, 169, 97, .18), transparent 65%), rgba(15, 22, 32, .45);
}
.modal__book img { width: 190px; transform: rotate(-4deg); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); }
.modal__body { padding: 40px 20px 26px; }
.modal__title { margin: 14px 0 12px; font: 400 clamp(2.2rem, 6vw, 3rem)/.95 var(--font-display); letter-spacing: .02em; }
.modal__text { color: var(--color-mist); margin-bottom: 22px; }
.modal__decline {
  margin-top: 14px;
  font: 500 .72rem var(--font-sans);
  letter-spacing: .08em;
  color: var(--color-mist);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 21. Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, #22335a, var(--color-deep-blue) 60%, var(--color-ink));
  transition: opacity .9s var(--ease-out), visibility .9s;
}
html:not(.js) .preloader, .no-preloader .preloader { display: none; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { display: grid; justify-items: center; text-align: center; }
.preloader__the { font: 400 1.2rem var(--font-display); letter-spacing: .5em; padding-left: .5em; color: var(--color-cream); }
.preloader__title {
  min-height: 1em;
  font: 400 clamp(4.5rem, 16vw, 8rem)/1 var(--font-display);
  letter-spacing: .04em;
  color: var(--color-ice);
}
.preloader__title::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: .72em;
  margin-left: .08em;
  background: var(--color-gold);
  vertical-align: -.02em;
}
.preloader__rule { width: 160px; height: 1px; margin: 18px 0; background: var(--color-gold); transform-origin: center; }
.preloader__author { font: 500 .66rem var(--font-sans); letter-spacing: .55em; padding-left: .55em; text-transform: uppercase; color: var(--color-mist); }

/* ---------- 22. Custom cursor (desktop only — enabled in responsive.css) ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 160;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: opacity .35s, width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background-color .3s;
}
.cursor.is-active { opacity: .85; }
.cursor.is-hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(201, 169, 97, .08); }
.cursor.is-idle { opacity: 0; }

/* ---------- 23. Cards (Inside the Book, etc.) ---------- */
.cards { display: grid; gap: 18px; }
.card {
  position: relative;
  padding: 34px 26px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  border: 1px solid var(--line-cream);
  border-top: 1px solid var(--color-gold);
  transition: transform .35s var(--ease-out), border-color .35s;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-gold); }
.card .icon { width: 30px; height: 30px; stroke-width: 1; color: var(--color-gold); margin-bottom: 22px; }
.card__title { font: 400 1.75rem/1 var(--font-display); letter-spacing: .05em; margin-bottom: 12px; }
.card p { color: var(--color-mist); font-size: 1.12rem; line-height: 1.55; }
.card em { color: var(--color-cream); }

/* ---------- 24. The Book page ---------- */
.book-hero__grid { display: grid; gap: 36px; align-items: center; }
.book-hero__book { padding: 12px 0 30px; }
.book-hero__subtitle { margin-top: .6rem; font-style: italic; font-size: 1.5rem; color: var(--color-gold); }
.book-hero__synopsis { margin-top: 1.3rem; }
.book-hero__synopsis p + p { margin-top: 1.1em; }
.book-hero__synopsis .first { font-size: 1.32em; line-height: 1.5; color: var(--color-cream); }
.book-hero__synopsis p:not(.first) { color: #d6cdbd; }
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-cream);
}
.facts--plain { margin-top: 0; padding-top: 0; border-top: 0; }
.facts dt { font: 600 .6rem var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--color-gold); }
.facts dd { margin-top: 4px; font-size: 1.08rem; }
.book-hero .btn-row { margin-top: 1.6rem; }

/* ---------- 25. Author page ---------- */
.author-hero__grid { display: grid; gap: 36px; align-items: center; }
.portrait {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
  isolation: isolate;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  border: 1px solid var(--line-gold);
  z-index: -1;
}
.portrait__frame { position: relative; overflow: hidden; background: var(--color-deep-blue); aspect-ratio: 4 / 5; }
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; }
.portrait__frame::after {   /* duotone: deep-blue shadows, cream highlights */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-cream), var(--color-deep-blue));
  mix-blend-mode: multiply;
  opacity: .55;
}
.portrait__caption { margin-top: 30px; font: 500 .62rem var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--color-mist); text-align: center; }
.bio { display: grid; gap: 36px; }
.bio__body p + p { margin-top: 1.15em; }
.bio__body p:first-child::first-letter {
  float: left;
  font: 600 4.4em/.8 var(--font-serif);
  padding: .08em .1em 0 0;
  color: var(--color-gold);
}
.note { position: relative; }
.signature { width: min(320px, 80%); margin-top: 20px; color: var(--color-gold); }
.signature path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.also-by { display: grid; gap: 22px; }
.ghost-book {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border: 1px dashed rgba(232, 220, 200, .22);
}
.ghost-book__cover {
  aspect-ratio: 753 / 1147;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #22335a, var(--color-ink));
  border: 1px solid var(--line-gold);
  font: 400 1.1rem var(--font-display);
  letter-spacing: .2em;
  color: var(--color-gold);
}
.ghost-book h3 { font: 400 1.6rem/1 var(--font-display); letter-spacing: .05em; }
.ghost-book p { margin-top: 6px; color: var(--color-mist); font-size: 1.05rem; }
.ghost-book .link-arrow { margin-top: 14px; }

/* ---------- 26. Excerpt (reading experience) ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold-ink), var(--color-gold));
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  box-shadow: 0 0 12px rgba(201, 169, 97, .6);
}
.reading { background: var(--color-paper); color: var(--color-ink); }
.reading__head { text-align: center; margin-bottom: clamp(24px, 4vw, 44px); }
.reading__chapter {
  font: 400 clamp(3rem, 9vw, 5rem)/1 var(--font-display);
  letter-spacing: .04em;
  color: var(--color-deep-blue);
  margin-top: 14px;
}
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  color: var(--color-gold-ink);
}
.ornament::before, .ornament::after { content: ""; width: 54px; height: 1px; background: currentColor; }
.ornament svg { width: 14px; height: 14px; }
.prose {
  max-width: 680px;
  margin-inline: auto;
  font-size: 1.1875rem;   /* 19px; 20px from 768px */
  line-height: 1.75;
  color: var(--color-ink);
  hyphens: auto;
}
.prose p + p, .prose__fade p { text-indent: 1.6em; }
.prose .dropcap::first-letter {
  float: left;
  font: 600 5.1em/.78 var(--font-serif);
  padding: .1em .1em 0 0;
  color: var(--color-gold-ink);
}
.prose .dropcap::first-line { font-variant: small-caps; letter-spacing: .04em; }
.prose__fade { position: relative; }
.prose__fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(245, 239, 227, 0), var(--color-paper) 92%);
  pointer-events: none;
}
.continue {
  position: relative;
  max-width: 680px;
  margin: -10px auto 0;
  padding: 28px 24px 0;
  text-align: center;
  border-top: 1px solid rgba(26, 39, 68, .15);
}
.continue__title { font-style: italic; font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--color-deep-blue); }
.continue p { color: #4a5568; margin-top: 10px; }
.continue .btn-row { justify-content: center; margin-top: 20px; }

/* ---------- 27. Buy page ---------- */
.tabs__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-cream);
  margin-bottom: 24px;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 8px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: 600 .68rem var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-mist);
  transition: color .25s, border-color .25s;
}
.tab .icon { width: 20px; height: 20px; }
.tab:hover { color: var(--color-cream); }
.tab[aria-selected="true"] { color: var(--color-cream); border-color: var(--color-gold); }
.tab[aria-selected="true"] .icon { color: var(--color-gold); }
.tabs__panel[hidden] { display: none; }
.tabs__panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.tabs__panel-head h2 { font: 400 2rem var(--font-display); letter-spacing: .05em; }
.tabs__panel-head p { color: var(--color-mist); font-style: italic; }

.retailer-grid { display: grid; gap: 14px; }
.retailer {            /* phones: compact row (store + price), button below */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--line-cream);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
  transition: border-color .3s, transform .3s var(--ease-out);
}
.retailer:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.retailer__logo { font: 600 1.45rem/1.1 var(--font-serif); letter-spacing: .01em; color: var(--color-cream); }
.retailer__format { font: 500 .62rem var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--color-mist); }
.retailer__price { grid-column: 2; grid-row: 1 / span 2; font: 400 2rem/1 var(--font-display); letter-spacing: .03em; margin: 0; }
.retailer .btn { grid-column: 1 / -1; margin-top: 12px; min-height: 46px; }

.bundle {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
  margin-top: 36px;
  padding: 28px 22px;
  border: 1px solid var(--color-gold);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 97, .2), transparent 55%),
    linear-gradient(180deg, var(--color-blue-hover), var(--color-deep-blue));
  box-shadow: 0 0 0 6px rgba(201, 169, 97, .06), var(--shadow-deep);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(201, 169, 97, .5);
  background: rgba(201, 169, 97, .12);
  font: 600 .64rem var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); }
.bundle__title { margin: 16px 0 10px; font: 400 clamp(2.2rem, 5vw, 3.2rem)/.95 var(--font-display); letter-spacing: .03em; }
.bundle__list { display: grid; gap: 8px; margin: 18px 0 24px; padding: 0; list-style: none; }
.bundle__list li { display: flex; gap: 10px; align-items: flex-start; color: #d6cdbd; }
.bundle__list .icon { width: 18px; height: 18px; color: var(--color-gold); flex-shrink: 0; margin-top: 5px; }
.bundle__price { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.bundle__price strong { font: 400 3rem/1 var(--font-display); }
.bundle__price s { color: var(--color-mist); }
.stock { margin-top: 16px; }
.stock__bar { height: 3px; background: rgba(232, 220, 200, .14); overflow: hidden; }
.stock__bar span { display: block; height: 100%; width: var(--pct); background: linear-gradient(90deg, var(--color-gold), #e7cf93); }
.stock__label { margin-top: 8px; font: 500 .7rem var(--font-sans); letter-spacing: .06em; color: var(--color-mist); }
.bundle__visual { position: relative; display: grid; place-items: center; }

.trust {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding: 18px 0;
  border-block: 1px solid var(--line-cream);
}
.trust li { display: flex; align-items: center; gap: 14px; font: 500 .74rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.trust .icon { width: 26px; height: 26px; color: var(--color-gold); stroke-width: 1; }

.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 24px; }
.reviews__score { font: 400 4rem/1 var(--font-display); }
.reviews__label { font: 500 .7rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-mist); }
.stars { display: inline-flex; gap: 3px; color: var(--color-gold); }
.star { width: 18px; height: 18px; }
.star path { stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.star--full path { fill: currentColor; }
.star--empty path { fill: none; }
.review-grid { display: grid; gap: 16px; }
.review { padding: 28px 24px; border: 1px solid var(--line-cream); background: rgba(255, 255, 255, .025); }
.review h3 { margin: 14px 0 8px; font: 400 1.5rem var(--font-display); letter-spacing: .05em; }
.review p { color: #d6cdbd; }
.review footer { margin-top: 16px; font: 500 .64rem var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--color-gold); }

/* ---------- 28. Press page ---------- */
.downloads { display: grid; gap: 16px; }
.downloads--spaced { margin-top: 36px; }
.form-intro { margin: .9rem 0 1.6rem; }
.download {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line-cream);
  transition: border-color .3s, background-color .3s;
}
.download:hover { border-color: var(--line-gold); background: rgba(255, 255, 255, .03); }
.download__thumb { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: rgba(15, 22, 32, .6); }
.download__thumb img { width: 100%; height: 100%; object-fit: cover; }
.download__thumb .icon { width: 30px; height: 30px; color: var(--color-gold); stroke-width: 1; }
.download h3 { font: 400 1.4rem var(--font-display); letter-spacing: .05em; }
.download p { font: 400 .74rem var(--font-sans); color: var(--color-mist); margin: 4px 0 10px; }

.copy-block { position: relative; padding: 26px 24px; border-left: 2px solid var(--color-gold); background: rgba(255, 255, 255, .03); }
.copy-block h3 { font: 600 .66rem var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 12px; }
.copy-block p { color: #d6cdbd; }
.copy-block__btn {
  margin-top: 16px;
  display: inline-flex;
  gap: 8px;
  font: 600 .64rem var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.stack { display: grid; gap: 18px; }

.accordion { border-top: 1px solid var(--line-cream); }
.accordion details { border-bottom: 1px solid var(--line-cream); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-gold); transition: transform .35s var(--ease-out); }
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion summary:hover { color: var(--color-gold); }
.accordion__body { padding: 0 0 28px; color: #d6cdbd; max-width: 68ch; }
.accordion__body p + p { margin-top: 1em; }

/* ---------- 29. Contact page ---------- */
.contact__grid { display: grid; gap: 36px; }
.contact-card { padding: 24px 20px; border: 1px solid var(--line-cream); }
.contact-card + .contact-card { margin-top: 16px; }
.contact-card h3 { font: 600 .66rem var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 12px; }
.contact-card p { color: #d6cdbd; }
.contact-card a:not(.btn) { color: var(--color-cream); border-bottom: 1px solid var(--line-gold); transition: color .25s; }
.contact-card a:not(.btn):hover { color: var(--color-gold); }
.contact-card .social { margin-top: 6px; }
.contact-card .btn-row { margin-top: 16px; }

/* ---------- 30. CTA band ---------- */
.cta-band .display { margin-inline: auto; max-width: 14ch; }
.cta-band .btn-row { justify-content: center; margin-top: 1.6rem; }

/* ---------- 31. Section atmospheres: each section gets its own light ---------- */
.bg-night {      /* Zurich after hours: ink sky, a cold steel glow */
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(61, 90, 128, .55), transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(152, 193, 217, .08), transparent 60%),
    linear-gradient(180deg, var(--color-ink) 0%, var(--color-deep-blue) 100%);
}
.bg-lamplight {  /* station waiting room: warm brass light on near-black */
  background:
    radial-gradient(ellipse 40% 60% at 10% 0%, rgba(201, 169, 97, .2), transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 0%, rgba(201, 169, 97, .14), transparent 70%),
    radial-gradient(ellipse 40% 60% at 90% 0%, rgba(201, 169, 97, .2), transparent 70%),
    linear-gradient(180deg, #1b1913 0%, #12141a 60%, var(--color-ink) 100%);
}
.bg-dusk {       /* blue hour over the mountains */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(152, 193, 217, .2), transparent 65%),
    linear-gradient(180deg, #2a4266 0%, #213559 45%, var(--color-deep-blue) 100%);
}
.bg-forest {     /* pine valley below the station */
  background:
    radial-gradient(ellipse 60% 60% at 15% 0%, rgba(184, 196, 201, .12), transparent 60%),
    linear-gradient(180deg, var(--color-forest) 0%, #1f2d23 55%, #141d17 100%);
}
.section--paper { /* map paper with a faint cartographic grid */
  background-color: var(--color-paper);
  background-image:
    linear-gradient(rgba(26, 39, 68, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 39, 68, .035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(201, 169, 97, .12), transparent 60%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
}
.reading.section--paper { background-image: radial-gradient(ellipse at 50% 0%, rgba(201, 169, 97, .1), transparent 50%); }

.bg-forest .card { background: linear-gradient(180deg, rgba(20, 29, 23, .7), rgba(20, 29, 23, .35)); }
.bg-lamplight .review, .bg-lamplight .copy-block { background: rgba(27, 25, 19, .6); }

/* ---------- 32. Background motifs from the novel's world ---------- */
.has-motif { position: relative; isolation: isolate; overflow: hidden; }
.motif { position: absolute; z-index: -1; pointer-events: none; }
.motif svg { width: 100%; height: 100%; overflow: visible; }

.motif--clock {
  top: 50%;
  right: -22%;
  width: clamp(360px, 60vw, 720px);
  aspect-ratio: 1;
  translate: 0 -50%;
  color: var(--color-gold);
  opacity: .1;
}
.motif--clock.motif--left { right: auto; left: -22%; }
.motif--tracks {
  left: 0; right: 0; bottom: 0;
  height: 62%;
  color: var(--color-cream);
  opacity: .07;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
  mask-image: linear-gradient(to top, #000 35%, transparent);
}
.motif--viaduct {
  left: 0; right: 0; bottom: 0;
  height: clamp(70px, 11vw, 160px);
  color: var(--color-ink);
  opacity: .6;
}
.motif--mountains {
  left: 0; right: 0; bottom: -1px;
  height: clamp(60px, 11vw, 170px);
  color: var(--color-ink);
  opacity: .55;
}
.motif--forest {
  left: 0; right: 0; bottom: -1px;
  height: clamp(70px, 10vw, 150px);
  color: #0f1712;
  opacity: .85;
}
.motif--lamps {
  left: 0; right: 0; top: 0;
  height: clamp(120px, 16vw, 220px);
  color: var(--color-gold);
  opacity: .5;
}
.page-hero .motif--lamps { top: var(--header-h); }
.motif--rain {
  inset: 0;
  background:
    radial-gradient(circle at 18% 32%, rgba(232, 236, 240, .14) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(232, 236, 240, .12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 46% 64%, rgba(232, 236, 240, .1) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 86% 78%, rgba(232, 236, 240, .12) 0 2px, transparent 3px),
    repeating-linear-gradient(104deg, transparent 0 26px, rgba(184, 196, 201, .045) 26px 27px, transparent 27px 61px);
  background-size: 260px 260px, 340px 340px, 300px 300px, 380px 380px, 100% 100%;
}
.motif--postmarks {
  inset: 0;
  color: var(--color-deep-blue);
  opacity: .07;
}
.motif--postmarks.motif--light { color: var(--color-cream); opacity: .05; }
.motif--ticket {
  display: none;
  top: 7%;
  right: -3%;
  width: clamp(280px, 32vw, 500px);
  rotate: 7deg;
  color: var(--color-deep-blue);
  opacity: .1;
}
.page-hero .motif--ticket { top: auto; bottom: 10%; right: 4%; color: var(--color-gold); opacity: .16; rotate: -6deg; }
.motif--switch {
  inset: 0;
  color: var(--color-ice);
  opacity: .08;
}
.motif--canopy {
  left: 0; right: 0; top: var(--header-h);
  height: clamp(110px, 16vw, 240px);
  color: var(--color-cream);
  opacity: .08;
}