/* ==========================================================================
   A KALEIDOSCOPE OF MEMORIES — Grace McKee
   Design system + components
   --------------------------------------------------------------------------
   Palette, type scale and motifs are derived from the book cover artwork:
   misty sea-greens, warm sand, aged ivory, deep ocean, restrained antique
   gold and a single controlled accent of sari red.
   ========================================================================== */

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

:root {
  /* ---- Colour: sampled from the cover ---- */
  --ink:          #14181a;   /* cover title ink            */
  --ink-2:        #2b3335;
  --ink-soft:     #57615f;

  --deep:         #0e2c33;   /* deep ocean                 */
  --deep-2:       #061a1f;
  --deep-3:       #16414a;

  --sea:          #5e7a76;   /* muted teal                 */
  --sea-mist:     #93a29a;   /* misty blue-grey            */
  --mist:         #b7c0b6;

  --sand:         #a3906b;   /* warm sand                  */
  --sand-2:       #cbbc9c;
  --surf:         #e4decc;

  --paper:        #fbf8f1;   /* aged ivory                 */
  --paper-2:      #f4efe3;
  --paper-3:      #eae2d1;

  --gold:         #a8813f;   /* restrained antique gold    */
  --gold-2:       #c3a05c;
  --gold-soft:    #e2d0a8;

  --sari:         #a6331f;   /* the red sari, used sparingly */
  --sari-2:       #7a1c10;

  /* "Ink" variants: the same hues, darkened just enough to clear WCAG AA
     (4.5:1) as small text on the ivory backgrounds. The lighter values above
     stay in use for rules, borders and large display type. */
  --gold-ink:     #7d5f24;
  --sand-ink:     #756344;
  --sea-ink:      #4e6a66;

  /* The navigation bar: a warm light neutral, ivory pulled a little towards
     the sage of the cover sky so it sits above the dark heroes cleanly. */
  --header-bg:    #eceae2;
  --header-line:  rgba(20, 24, 26, .10);

  /* ---- Semantic ---- */
  --bg:           var(--paper);
  --text:         var(--ink-2);
  --heading:      var(--ink);
  --muted:        var(--ink-soft);
  --line:         rgba(20, 24, 26, .13);
  --line-soft:    rgba(20, 24, 26, .07);
  --accent:       var(--gold);

  /* ---- Type ---- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Lora", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script:  "Parisienne", "Snell Roundhand", "Brush Script MT", cursive;

  --step--2: clamp(.688rem, .66rem + .12vw, .75rem);
  --step--1: clamp(.8rem,  .77rem + .15vw, .875rem);
  --step-0:  clamp(1rem,   .97rem + .16vw, 1.075rem);
  --step-1:  clamp(1.15rem, 1.09rem + .3vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.24rem + .55vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.44rem + 1.05vw, 2.4rem);
  --step-4:  clamp(1.85rem, 1.5rem + 1.55vw, 2.7rem);
  --step-5:  clamp(2.5rem, 1.85rem + 3.25vw, 4.75rem);
  --step-6:  clamp(3rem,   1.9rem + 5.5vw, 6.5rem);

  /* ---- Space & layout ---- */
  --wrap:        1240px;
  --wrap-wide:   1520px;
  --wrap-read:   680px;
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --section-y:   clamp(3rem, 5.5vw, 6rem);
  --radius:      2px;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --dur:        .6s;

  --header-h:   88px;
  --shadow-soft: 0 24px 60px -32px rgba(14, 44, 51, .45);
  --shadow-book: 26px 34px 70px -28px rgba(9, 32, 37, .55);
}

/* --------------------------------------------------------------- 2. Reset  */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

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

a { color: inherit; text-decoration-color: rgba(168, 129, 63, .5); text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--gold); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

blockquote { margin: 0; }
figure { margin: 0; }

button { font: inherit; color: inherit; }

hr { border: 0; height: 1px; background: var(--line); margin: 2.5rem 0; }

::selection { background: rgba(168, 129, 63, .22); color: var(--ink); }

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

/* --------------------------------------------------------- 3. Utilities    */

.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-read { width: 100%; max-width: var(--wrap-read); margin-inline: auto; }

.section    { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: clamp(2.25rem, 4vw, 3.75rem); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Spam trap in every form: hidden from people, filled in by bots. */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%);
  z-index: 999; background: var(--deep); color: var(--paper);
  padding: .75rem 1.5rem; font-family: var(--font-sans);
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* --------------------------------------------------- 4. Editorial elements */

/* Eyebrow — small archival-style label */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
}
.eyebrow--center { text-align: center; }

/* Lead paragraph */
.lead {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 54ch;
}

/* Long-form narrative body.
   Capped to a comfortable measure so it never stretches to the full width of
   a single-column layout at tablet sizes. */
.prose {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 68ch;
}
.prose p + p { margin-top: 0; }
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 3.5em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--deep);
}
.prose--nodrop > p:first-of-type::first-letter {
  float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit;
  font-family: inherit;
}

/* Hairline rules and the wave motif */
.rule {
  width: 3.5rem; height: 1px; background: var(--gold);
  margin: 1.25rem 0; border: 0; opacity: .75;
}
.rule--center { margin-inline: auto; }

.wave-rule {
  width: 100%; max-width: 180px; height: 12px;
  margin: 1.5rem auto; opacity: .55; color: var(--gold);
}

/* Pull quote */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.45;
  color: var(--deep);
  border-left: 1px solid var(--gold);
  padding: .25rem 0 .25rem 1.75rem;
  margin: 2.75rem 0;
  max-width: 34ch;
}
.pullquote cite {
  display: block; margin-top: 1rem;
  font-family: var(--font-sans); font-style: normal;
  font-size: var(--step--2); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* Figure + caption */
.figure img { width: 100%; border-radius: var(--radius); }
.figure figcaption,
.caption {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--muted);
  margin-top: .85rem;
  padding-left: .9rem;
  border-left: 1px solid var(--gold);
}

/* Section heading block */
.sec-head { max-width: 58ch; margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--muted); font-family: var(--font-body); }

/* Header rows with a link on the right */
.sec-head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}
.sec-head-row .sec-head { margin-bottom: 0; }

/* --------------------------------------------------------- 5. Buttons      */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.1em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gold-ink); color: #fff; }
.btn--primary:hover { background: var(--deep); }

.btn--ghost { border-color: var(--gold); color: var(--gold-ink); background: transparent; }
.btn--ghost:hover { background: var(--gold); color: #fff; }

.btn--onDark { border-color: rgba(226, 208, 168, .5); color: var(--gold-soft); background: transparent; }
.btn--onDark:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--deep); }

.btn--solidDark { background: var(--deep); color: var(--paper); }
.btn--solidDark:hover { background: var(--gold); }

.btn--sm { padding: .8em 1.5em; font-size: var(--step--2); }

/* Text link with a travelling arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(168, 129, 63, .3);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow svg { flex: none; transition: transform .4s var(--ease-out); }
.link-arrow:hover { color: var(--deep); border-color: var(--deep); }
.link-arrow:hover svg { transform: translateX(6px); }
.link-arrow--onDark { color: var(--gold-soft); border-color: rgba(226, 208, 168, .28); }
.link-arrow--onDark:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------ 6. Header    */

/* The bar is solid at all times — light, warm and opaque — so the navigation
   is always legible and the dark heroes read as a band beneath it. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  transition: box-shadow .45s var(--ease);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--header-h);
  transition: height .45s var(--ease);
}
.site-header .brand__name { color: var(--gold-ink); }
.site-header .brand__role { color: var(--muted); }
.site-header .nav__link   { color: var(--ink-2); }
.site-header .nav__link:hover,
.site-header .nav__link[aria-current="page"] { color: var(--gold-ink); }
.site-header .nav-toggle__bar { background: var(--ink); }

/* Condensed once the page has moved */
.site-header.is-stuck {
  box-shadow: 0 10px 40px -30px rgba(14, 44, 51, .55);
}
.site-header.is-stuck .site-header__inner { height: 70px; }
.site-header.is-stuck .brand__role { opacity: 0; max-height: 0; }

/* Brand / signature wordmark */
.brand {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; flex: none; line-height: 1;
}
.brand__name {
  font-family: var(--font-script);
  font-size: clamp(1.75rem, 2.4vw, 2.2rem);
  color: var(--gold);
  letter-spacing: .01em;
  line-height: 1.05;
  transition: color .45s var(--ease);
}
.brand__role {
  font-family: var(--font-sans);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
  transition: opacity .35s var(--ease), color .45s var(--ease), max-height .35s var(--ease);
  overflow: hidden;
  max-height: 2em;
  white-space: nowrap;
}

/* Desktop navigation */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: .5rem;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-cta { flex: none; }

/* Mobile toggle */
.nav-toggle {
  display: none; flex: none;
  width: 46px; height: 46px; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.nav-toggle__bar {
  position: absolute; left: 11px; width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform .4s var(--ease-out), opacity .25s var(--ease), width .4s var(--ease-out);
}
.nav-toggle__bar:nth-child(1) { top: 17px; }
.nav-toggle__bar:nth-child(2) { top: 23px; width: 17px; }
.nav-toggle__bar:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--deep);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  /* Visibility flips instantly on the way in (so the links are focusable
     straight away) and is held back on the way out until the fade finishes. */
  transition: clip-path .7s var(--ease-out), opacity .35s var(--ease), visibility 0s linear .35s;
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--ease-out), opacity .35s var(--ease), visibility 0s linear 0s;
}
.mobile-nav__list { list-style: none; margin: 0 0 auto; padding: 0; }
.mobile-nav__list li {
  margin: 0; border-bottom: 1px solid rgba(226, 208, 168, .13);
  opacity: 0; transform: translateY(14px);
}
.mobile-nav.is-open .mobile-nav__list li {
  animation: navItemIn .6s var(--ease-out) forwards;
}
.mobile-nav.is-open .mobile-nav__list li:nth-child(1) { animation-delay: .1s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) { animation-delay: .16s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) { animation-delay: .22s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) { animation-delay: .28s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(5) { animation-delay: .34s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(6) { animation-delay: .40s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(7) { animation-delay: .46s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(8) { animation-delay: .52s; }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

.mobile-nav__link {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--paper-2);
  text-decoration: none;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] { color: var(--gold-2); padding-left: .5rem; }
.mobile-nav__num {
  font-family: var(--font-sans); font-size: .6rem;
  letter-spacing: .18em; color: var(--gold); opacity: .8;
}
.mobile-nav__foot { margin-top: 2.5rem; }
.mobile-nav__foot .btn { width: 100%; }

/* -------------------------------------------------------------- 7. Hero    */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 8vw, 6rem);
  background: var(--deep);
  overflow: hidden;
  isolation: isolate;
}

.hero__ground {
  position: absolute; inset: -6% -2%;
  background: url("../assets/images/wash-hero.jpg") center 42% / cover no-repeat;
  z-index: -3;
  transform: scale(1.06);
  will-change: transform;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg,  rgba(9, 32, 37, .78) 0%, rgba(9, 32, 37, .38) 34%, rgba(9, 32, 37, .30) 62%, rgba(9, 32, 37, .74) 100%),
    linear-gradient(100deg, rgba(9, 32, 37, .86) 0%, rgba(9, 32, 37, .48) 42%, rgba(14, 44, 51, .12) 74%);
}
/* Ambient grain */
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16;
  background-image: var(--grain);
  background-size: 220px 220px;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  width: 100%;
}

.hero__copy { color: var(--paper-2); max-width: 100%; }
.hero__eyebrow { color: var(--gold-2); }
.hero__title {
  /* Two lines: "A Kaleidoscope" over an italic "of" leading into "Memories". */
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: #fff;
  margin-bottom: .55em;
}
.hero__title .of {
  font-size: .62em;
  font-style: italic;
  letter-spacing: 0;
  padding-right: .08em;
  color: rgba(255, 255, 255, .86);
}
.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--gold-2);
  margin-bottom: 1.5rem;
  max-width: 24ch;
}
.hero__blurb {
  font-family: var(--font-body);
  color: rgba(244, 239, 227, .84);
  font-size: var(--step-0);
  line-height: 1.75;
  max-width: 46ch;
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.hero__tertiary { margin-top: 1.75rem; }

.hero__stage { display: flex; justify-content: center; }

/* Scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: clamp(1.25rem, 3vw, 2.25rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  font-family: var(--font-sans); font-size: .58rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(244, 239, 227, .62);
  text-decoration: none;
}
.hero__cue span { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, rgba(226,208,168,.7), transparent); }
.hero__cue::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 46px;
  background: var(--gold-2); transform: translateX(-50%);
  animation: cueDrop 2.6s var(--ease) infinite;
}
@keyframes cueDrop {
  0%   { transform: translateX(-50%) scaleY(0); transform-origin: top; opacity: 0; }
  35%  { transform: translateX(-50%) scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: translateX(-50%) scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ------------------------------------------------- 8. The 3D book object   */

.book {
  --book-w: clamp(190px, 26vw, 330px);
  width: var(--book-w);
  aspect-ratio: 1 / 1.5;
  perspective: 1800px;
  perspective-origin: 58% 46%;
  position: relative;
}
.book__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -21deg)) rotateX(var(--rx, 3deg));
  transition: transform .9s var(--ease-out);
  will-change: transform;
}
.book.is-tilting .book__inner { transition: transform .18s linear; }

.book__face {
  position: absolute; inset: 0;
  border-radius: 2px 5px 5px 2px;
  overflow: hidden;
  box-shadow: var(--shadow-book);
  transform: translateZ(calc(var(--depth, 22px) / 2));
  background: var(--deep-2);
}
.book__face img { width: 100%; height: 100%; object-fit: cover; }
/* Cover sheen */
.book__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(102deg,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 13%,
    rgba(255,255,255,0) 34%, rgba(0,0,0,.05) 78%, rgba(0,0,0,.14) 100%);
}

/* Side panels.
   Each strip is hinged on the edge it belongs to and rotated a quarter turn.
   After that rotation the strip's own X axis runs along the world Z axis, so
   the half-depth nudge that centres it on the board is a translateX — using
   translateZ here throws the panel out sideways across the page. */
.book__spine {
  position: absolute; top: 0; left: 0;
  width: var(--depth, 22px); height: 100%;
  transform-origin: left center;
  transform: rotateY(-90deg) translateX(calc(var(--depth, 22px) / -2));
  background: linear-gradient(90deg, #16323a, #24474f 42%, #16323a);
  border-radius: 2px 0 0 2px;
}
.book__pages {
  position: absolute; top: 1.4%; right: 0;
  width: var(--depth, 22px); height: 97.2%;
  transform-origin: right center;
  transform: rotateY(90deg) translateX(calc(var(--depth, 22px) / 2));
  background: repeating-linear-gradient(90deg,
    #efe9dc 0 1px, #dcd3c0 1px 2px, #f6f2e8 2px 3px);
  border-radius: 0 2px 2px 0;
}
/* Cast shadow on the ground */
.book__shadow {
  position: absolute; left: 6%; right: -14%; bottom: -7%;
  height: 30px; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(9, 32, 37, .5), transparent 70%);
  filter: blur(14px);
  transform: rotateX(76deg);
}

.book--float .book__inner { animation: bookFloat 9s ease-in-out infinite; }
@keyframes bookFloat {
  0%, 100% { transform: rotateY(var(--ry, -21deg)) rotateX(var(--rx, 3deg)) translateY(0); }
  50%      { transform: rotateY(calc(var(--ry, -21deg) + 2.5deg)) rotateX(calc(var(--rx, 3deg) + 1deg)) translateY(-14px); }
}
.book.is-tilting.book--float .book__inner { animation: none; }

/* Flat presentation (book page hero, cards) */
.book-flat {
  position: relative;
  box-shadow: var(--shadow-book);
  border-radius: 2px 5px 5px 2px;
  overflow: hidden;
}
.book-flat img { width: 100%; }
.book-flat::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.05) 55%, rgba(255,255,255,.16));
}

/* -------------------------------------------------- 9. Section backgrounds */

.bg-paper   { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-paper-3 { background: var(--paper-3); }

.bg-deep {
  background: var(--deep);
  color: rgba(244, 239, 227, .85);
}
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #fff; }
.bg-deep .eyebrow { color: var(--gold-2); }
.bg-deep .lead, .bg-deep .prose { color: rgba(244, 239, 227, .82); }

.bg-deep-2 { background: var(--deep-2); color: rgba(244, 239, 227, .82); }
.bg-deep-2 h1, .bg-deep-2 h2, .bg-deep-2 h3, .bg-deep-2 h4 { color: #fff; }
.bg-deep-2 .eyebrow { color: var(--gold-2); }
.bg-deep-2 .lead, .bg-deep-2 .prose { color: rgba(244, 239, 227, .82); }
.bg-deep-2 .field > label { color: rgba(244, 239, 227, .72); }
.bg-deep-2 .caption, .bg-deep-2 .figure figcaption { color: rgba(244, 239, 227, .7); }

/* Every dark band opens with a gold hairline. Where two of them meet it reads
   as a division; where one follows a cream section it reads as a rule. */
.bg-deep, .bg-deep-2 { border-top: 1px solid rgba(226, 208, 168, .16); }

/* ------------------------------------------------------------------------
   Ambient ground
   No drawn ornament — depth instead. Each section carries two very large,
   very soft pools of light in the cover's own colours: warm sand from one
   corner, cool sea from the other. They are far bigger than the section, so
   they read as light falling across the page rather than as a graphic, and
   they alternate side to side down the page so no two neighbours match.
   Every pool darkens its ground slightly, so text contrast only improves.
   ------------------------------------------------------------------------ */

.bg-paper, .bg-paper-2, .bg-paper-3 {
  background-image:
    radial-gradient(85% 68% at 88% 2%,  rgba(163, 144, 107, .26), transparent 70%),
    radial-gradient(75% 62% at 6% 100%, rgba(94, 122, 118, .19),  transparent 72%);
}
/* Mirror the light on alternate sections */
main > section:nth-of-type(even).bg-paper,
main > section:nth-of-type(even).bg-paper-2,
main > section:nth-of-type(even).bg-paper-3 {
  background-image:
    radial-gradient(85% 68% at 12% 2%,  rgba(163, 144, 107, .26), transparent 70%),
    radial-gradient(75% 62% at 94% 100%, rgba(94, 122, 118, .19), transparent 72%);
}

/* The dark bands get depth the other way round: a lift of teal where the
   content sits, a low ember of gold, and a vignette closing the edges.
   Light in deep water. */
.bg-deep, .bg-deep-2 {
  background-image:
    radial-gradient(65% 55% at 82% 112%, rgba(168, 129, 63, .20), transparent 66%),
    radial-gradient(90% 72% at 50% 2%,   rgba(94, 122, 118, .22), transparent 70%),
    radial-gradient(125% 100% at 50% 45%, transparent 38%, rgba(0, 0, 0, .30) 100%);
}
main > section:nth-of-type(even).bg-deep,
main > section:nth-of-type(even).bg-deep-2 {
  background-image:
    radial-gradient(65% 55% at 18% 112%, rgba(168, 129, 63, .20), transparent 66%),
    radial-gradient(90% 72% at 50% 2%,   rgba(94, 122, 118, .22), transparent 70%),
    radial-gradient(125% 100% at 50% 45%, transparent 38%, rgba(0, 0, 0, .30) 100%);
}

/* The footer closes the page: a single lift at the top, then dark. */
.site-footer {
  background-image:
    radial-gradient(110% 95% at 50% 0%, rgba(94, 122, 118, .16), transparent 68%);
}

/* ------------------------------------------------------------------------
   Reading marks
   Three objects from a reader's desk — an open book, a stack, a pair of
   spectacles — drawn as a single hairline, sized very large and hung off the
   edge of the section so only part of each is in frame. At this scale and
   this weight they read as watermarks pressed into the paper rather than as
   illustrations sitting on it.

   They are elements rather than pseudo-elements because several sections
   already use ::before for the horizon rule and ::after for the grain.
   ------------------------------------------------------------------------ */

/* A section holding a mark clips it, so the part hanging off the edge never
   widens the page. */
.deco-host { overflow: hidden; }

.deco {
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .4;                        /* the stroke carries its own alpha too */
}
/* .grain-overlay makes its children relative; the marks must stay absolute */
.grain-overlay > .deco { position: absolute; z-index: 0; }

/* An open book, lying face up */
.deco--book {
  right: clamp(-150px, -7vw, -50px);
  bottom: clamp(-80px, -4vw, -28px);
  width: clamp(260px, 33vw, 540px);
  aspect-ratio: 640 / 430;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 430'%3E%3Cg fill='none' stroke='%23a8813f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.18'%3E%3Cpath d='M320 104C256 68 168 52 72 58v246c96-6 184 10 248 46'/%3E%3Cpath d='M320 104c64-36 152-52 248-46v246c-96-6-184 10-248 46'/%3E%3Cpath d='M320 104v246'/%3E%3Cpath d='M112 126c56 5 112 18 150 36M112 162c56 5 112 18 150 36M112 198c44 4 88 13 120 26'/%3E%3Cpath d='M528 126c-56 5-112 18-150 36M528 162c-56 5-112 18-150 36M528 198c-44 4-88 13-120 26'/%3E%3C/g%3E%3C/svg%3E");
}

/* A stack of three closed books */
.deco--stack {
  right: clamp(-120px, -6vw, -40px);
  bottom: clamp(-70px, -3.5vw, -24px);
  width: clamp(230px, 27vw, 440px);
  aspect-ratio: 560 / 360;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%23a8813f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.18'%3E%3Crect x='56' y='250' width='448' height='58' rx='5'/%3E%3Crect x='88' y='186' width='392' height='58' rx='5'/%3E%3Crect x='120' y='122' width='336' height='58' rx='5'/%3E%3Cpath d='M78 250v58M110 186v58M142 122v58'/%3E%3Cpath d='M96 250v58M128 186v58M160 122v58'/%3E%3C/g%3E%3C/svg%3E");
}

/* Reading spectacles */
.deco--glasses {
  right: clamp(-130px, -6.5vw, -46px);
  top: clamp(-60px, -3vw, -20px);
  width: clamp(250px, 30vw, 500px);
  aspect-ratio: 660 / 280;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 280'%3E%3Cg fill='none' stroke='%23a8813f' stroke-width='2.2' stroke-linecap='round' opacity='.18'%3E%3Ccircle cx='176' cy='150' r='92'/%3E%3Ccircle cx='484' cy='150' r='92'/%3E%3Cpath d='M268 150c30-24 94-24 124 0'/%3E%3Cpath d='M84 150c-22-10-42-30-56-54'/%3E%3Cpath d='M576 150c22-10 42-30 56-54'/%3E%3C/g%3E%3C/svg%3E");
}

/* On the dark bands the same marks are drawn in pale gold */
.bg-deep .deco, .bg-deep-2 .deco { filter: brightness(2.6) saturate(.6); }

/* Below tablet there is no spare margin to hang them in */
@media (max-width: 900px) { .deco { display: none; } }
@media print { .deco { display: none; } }

@media print {
  .bg-paper, .bg-paper-2, .bg-paper-3,
  .bg-deep, .bg-deep-2, .site-footer { background-image: none; }
}

/* Faint horizon line motif at the top of a section */
.has-horizon::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* Paper grain overlay for warm sections */
.grain-overlay { position: relative; isolation: isolate; }
.grain-overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: .22;
}
.grain-overlay > * { position: relative; z-index: 1; }

/* --------------------------------------------------- 10. Split / editorial */

.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }

/* Image-led splits: the media column matches the height of the text beside it
   instead of being centred against it, so there is no dead space above and
   below the picture. */
.split--fill { align-items: stretch; }
.split--fill > * { display: flex; flex-direction: column; justify-content: center; }
.split--fill .portrait-frame,
.split--fill .figure { flex: 1; display: flex; flex-direction: column; }
.split--fill .portrait-frame img,
.split--fill .figure img {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 380px;
  /* Never enlarge past the source artwork: the portrait is 1378px tall, which
     is 689 CSS pixels on a 2x display. Beyond that it would soften. */
  max-height: 688px;
  aspect-ratio: auto;
  object-fit: cover;
}

.portrait-frame { position: relative; }
.portrait-frame img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--paper-3);
}

/* Inside a two-column split the media column must not tower over the text.
   The image still fills its column, but its height is capped and the overflow
   is cropped rather than letting the column stretch. */
.split .figure img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}
.split .book-flat { max-width: 320px; margin-inline: auto; }
.split .figure figcaption { max-width: 52ch; }
/* Gold offset frame */
.portrait-frame::before {
  content: ""; position: absolute;
  inset: clamp(14px, 2.2vw, 26px) auto auto clamp(-26px, -2.2vw, -14px);
  width: 100%; height: 100%;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: .55;
}

.stat-row {
  display: flex; flex-wrap: wrap; gap: 1rem 1.25rem;
  margin: 1.6rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--deep);
  line-height: 1;
  display: block;
}
.stat__label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
  display: block;
}

/* Theme keyword row (used on the book section) */
.themes {
  display: flex; flex-wrap: wrap; gap: .55rem .75rem;
  margin: 2rem 0;
  list-style: none; padding: 0;
}
.themes li { margin: 0; }
.themes span {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: .55em 1.05em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.themes span:hover { border-color: var(--gold); color: var(--gold-ink); }
.bg-deep .themes span { color: var(--paper-2); border-color: rgba(226, 208, 168, .28); background: rgba(255,255,255,.03); }

/* ---------------------------------------- 10b. Brief list & photo trio     */

/* A numbered "life in brief" list — outline only, never the whole story. */
.brief { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); }
.brief__item {
  margin: 0;
  background: var(--paper-2);
  display: grid;
  grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(.75rem, 2vw, 1.75rem);
  transition: background-color .5s var(--ease);
}
.brief__item:hover { background: var(--paper); }
.brief__num {
  font-family: var(--font-sans); font-size: .68rem;
  letter-spacing: .2em; color: var(--gold-ink);
  padding-top: .45em;
}
.brief__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--deep);
  line-height: 1.28;
  margin: 0 0 .5rem;
  max-width: 34ch;
}
.brief__body p {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

/* Three equal photographs, matched in height */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.trio__item { margin: 0; }
.trio__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--paper-3);
}

/* ------------------------------------------------------- 11. Timeline      */

.timeline { position: relative; }

/* Default (and no-JS / small-screen) behaviour: an ordinary horizontal
   scroller. On wide screens JS adds .is-pinned and the track is driven by the
   page scroll instead — see below. */
.timeline__scroller {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 2.5rem 2rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
}
.timeline__scroller::-webkit-scrollbar { height: 3px; }
.timeline__scroller::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
.timeline__scroller::-webkit-scrollbar-track { background: var(--line-soft); }

.timeline__track { display: flex; gap: 0; }

/* ---- Scroll-driven state ------------------------------------------------
   The rail is made tall enough to hold exactly as much vertical scroll as the
   track needs to travel sideways. The stage sticks under the header while the
   reader passes through it, and the track slides one stop at a time. Nothing
   is intercepted: the page scrolls at its normal speed throughout.          */
.timeline.is-pinned .timeline__stage {
  position: sticky;
  top: var(--header-h);
}
.timeline.is-pinned .timeline__scroller {
  overflow: hidden;
  scroll-snap-type: none;
}
.timeline.is-pinned .timeline__track {
  will-change: transform;
}

/* Stops fade up as they arrive */
.timeline.is-pinned .tl-stop {
  opacity: .34;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .7s var(--ease-out);
}
.timeline.is-pinned .tl-stop.is-current { opacity: 1; transform: none; }

.timeline__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .85rem 1.5rem;
  padding-top: 1.25rem;
}
.timeline__progress {
  flex: 1 1 200px;
  height: 2px;
  background: var(--line);
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
}
.timeline__progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--sea));
  transform: scaleX(0);
  transform-origin: left center;
}

.tl-stop {
  flex: 0 0 clamp(215px, 22vw, 268px);
  scroll-snap-align: center;
  position: relative;
  padding: 0 clamp(1rem, 1.6vw, 1.6rem) 0 0;
}
/* The rail */
.tl-stop::before {
  content: ""; position: absolute; left: 0; right: 0; top: 118px;
  height: 1px; background: var(--line);
}
.tl-stop:first-child::before { left: 50%; }
.tl-stop:last-child::before  { right: 50%; }

.tl-stop__marker {
  position: absolute; top: 118px; left: 0;
  width: 9px; height: 9px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent-stop, var(--sand));
  transition: background-color .4s var(--ease), transform .4s var(--ease-out);
}
.tl-stop.is-in .tl-stop__marker { background: var(--accent-stop, var(--sand)); transform: scale(1.25); }

.tl-stop__place {
  display: block;
  font-family: var(--font-sans);
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-stop, var(--sand-ink));
  margin-bottom: .5rem;
}
.tl-stop__top { min-height: 96px; padding-right: 1.25rem; }
.tl-stop__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--heading);
  line-height: 1.2;
  margin: 0;
}
.tl-stop__body {
  padding: 1.75rem 1.25rem 0 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--muted);
}
.tl-stop__chapter {
  display: block; margin-top: .9rem;
  font-family: var(--font-sans); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand-ink);
}

.timeline__hint {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0; flex: none;
}

/* --------------------------------------------- 12. Vertical journey (page) */

.journey { position: relative; }
.journey__eras { padding-left: clamp(1.75rem, 4vw, 3.5rem); }
.journey__era { position: relative; padding-block: clamp(3rem, 6vw, 5rem); }
.journey__era + .journey__era { border-top: 1px solid var(--line-soft); }

.era-head {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: baseline;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.era-head__label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-era, var(--gold-ink));
}
.era-head__title { font-size: var(--step-3); margin: 0 0 .35em; }
.era-head__sub { font-family: var(--font-body); color: var(--muted); max-width: 52ch; margin: 0; }

.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.milestone {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  margin: 0;
  position: relative;
  border-top: 1px solid var(--line-soft);
}
.milestone__place {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--deep);
  line-height: 1.25;
  position: relative;
  padding-left: 1.5rem;
}
.milestone__place::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--accent-era, var(--gold));
  background: var(--paper);
  transition: background-color .5s var(--ease);
}
.milestone.is-in .milestone__place::before { background: var(--accent-era, var(--gold)); }
.milestone__region {
  display: block; margin-top: .45rem;
  font-family: var(--font-sans); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.milestone__body { font-family: var(--font-body); line-height: 1.85; color: var(--ink-2); max-width: 62ch; }
.milestone__body p { margin-bottom: .9em; }

.milestone__media { margin-top: 1.5rem; max-width: 460px; }
.milestone__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* Animated vertical rail */
.journey__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--line);
  overflow: hidden;
}
.journey__rail::after {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: var(--rail, 0%);
  background: linear-gradient(180deg, var(--gold), var(--sea));
  transition: height .2s linear;
}

/* ------------------------------------------------ 13. Memories in motion   */

.memories { display: grid; gap: 1px; background: var(--line-soft); }
.memory {
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1rem, 3vw, 2.5rem);
  transition: background-color .55s var(--ease);
}
.memory:hover { background: var(--paper-2); }
.memory__num {
  font-family: var(--font-sans); font-size: .68rem;
  letter-spacing: .2em; color: var(--sand-ink);
}
.memory__word {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--deep);
  line-height: 1.05;
  margin: 0;
  transition: color .55s var(--ease), transform .7s var(--ease-out);
}
.memory:hover .memory__word { color: var(--gold-ink); transform: translateX(8px); }
.memory__text {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* --------------------------------------------------------- 14. Quote band  */

.quote-band { position: relative; overflow: hidden; text-align: center; }
.quote-band__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/images/wash-sea.jpg") center / cover no-repeat;
  opacity: .18;
  filter: grayscale(.5);
}
.quote-band .wrap { position: relative; z-index: 1; }
.quote-band__mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: .5;
  color: var(--gold-2);
  opacity: .7;
  display: block;
  margin-bottom: .35em;
}
.quote-band blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  line-height: 1.32;
  color: #fff;
  max-width: 22ch;
  margin: 0 auto 1.75rem;
  letter-spacing: -.01em;
}
.quote-band cite {
  display: inline-block;
  font-family: var(--font-sans); font-style: normal;
  font-size: var(--step--2); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-2);
}
.quote-band__leaf {
  position: absolute; top: 50%; width: clamp(120px, 16vw, 230px);
  transform: translateY(-50%); color: var(--gold); opacity: .22; z-index: 1;
  pointer-events: none;
}
.quote-band__leaf--l { left: clamp(-2rem, 1vw, 2rem); }
.quote-band__leaf--r { right: clamp(-2rem, 1vw, 2rem); transform: translateY(-50%) scaleX(-1); }

/* ------------------------------------------------------------ 15. Atlas    */

.atlas { position: relative; }
/* Held back from the full column width so the plot reads as a chart rather
   than a letterbox band. */
.atlas__figure {
  position: relative;
  max-width: 900px;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
}
.atlas__svg { width: 100%; height: auto; overflow: visible; }

.atlas .graticule { stroke: rgba(226, 208, 168, .18); stroke-width: .65; fill: none; }
.atlas .route {
  stroke: var(--gold-2); stroke-width: 1.15; fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
  opacity: .78;
}
/* Per-route delay is set inline on each path so the sequence follows the
   real chronology of the journey rather than document order alone. */
.atlas.is-in .route { animation: drawRoute 2.2s var(--ease-out) both; }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }

/* Arrowheads, placed along each leg by js/main.js so they follow the tangent
   of the curve and show which way she was travelling. */
.atlas .route-arrow { fill: var(--gold-2); opacity: 0; }
.atlas.is-in .route-arrow { animation: arrowIn .55s var(--ease) both; }
@keyframes arrowIn { to { opacity: .9; } }

.atlas .node-halo { fill: var(--gold-2); opacity: 0; }
.atlas.is-in .node-halo { animation: haloPulse 3.4s var(--ease) infinite; }
@keyframes haloPulse {
  0%   { r: 3; opacity: .45; }
  70%  { r: 13; opacity: 0; }
  100% { r: 13; opacity: 0; }
}
.atlas .node-dot { fill: var(--gold-2); }
.atlas .node-dot--minor { fill: var(--sea-mist); }
.atlas .node-label {
  font-family: var(--font-sans); font-size: 7.8px;
  letter-spacing: .22em; text-transform: uppercase;
  fill: var(--paper-2);
}
.atlas .node-label--minor { font-size: 6px; fill: rgba(244, 239, 227, .62); letter-spacing: .16em; }

.atlas__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(226, 208, 168, .14);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.atlas-card {
  background: var(--deep);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  text-align: left;
  transition: background-color .45s var(--ease);
}
.atlas-card:hover, .atlas-card.is-active { background: var(--deep-3); }
.atlas-card__country {
  font-family: var(--font-display); font-size: var(--step-1);
  color: #fff; margin: 0 0 .35rem;
}
.atlas-card__years {
  font-family: var(--font-sans); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-2); display: block; margin-bottom: .9rem;
}
.atlas-card__text {
  font-family: var(--font-body); font-size: var(--step--1);
  line-height: 1.7; color: rgba(244, 239, 227, .68); margin: 0;
}

/* ------------------------------------------------------------ 16. Gallery  */

.gallery-filters {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 0; list-style: none;
}
.gallery-filters li { margin: 0; }
.filter-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .6em 1.25em; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold-ink); }
.filter-btn[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--paper); }

.gallery-grid {
  columns: 3;
  column-gap: clamp(.9rem, 1.6vw, 1.5rem);
}
.gallery-grid > * { break-inside: avoid; margin-bottom: clamp(.9rem, 1.6vw, 1.5rem); }

/* Even variant: a true grid of matched tiles, used where the section needs to
   read as a tidy block rather than a gallery wall. */
.gallery-grid--even {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.5rem);
}
.gallery-grid--even > * { margin-bottom: 0; }
.gallery-grid--even .gallery-item__btn,
.gallery-grid--even .gallery-item__btn img { height: 100%; }
.gallery-grid--even .gallery-item__btn img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 32%;
}

.gallery-item { position: relative; }
.gallery-item[hidden] { display: none; }
.gallery-item__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; overflow: hidden;
  border-radius: var(--radius);
}
.gallery-item__btn img {
  width: 100%;
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
  background: var(--paper-3);
}
.gallery-item__btn:hover img { transform: scale(1.045); }
.gallery-item__btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(9, 32, 37, .68));
  opacity: 0; transition: opacity .5s var(--ease);
}
.gallery-item__btn:hover::after,
.gallery-item__btn:focus-visible::after { opacity: 1; }
.gallery-item__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem 1.2rem; text-align: left;
  transform: translateY(8px); opacity: 0;
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.gallery-item__btn:hover .gallery-item__meta,
.gallery-item__btn:focus-visible .gallery-item__meta { opacity: 1; transform: none; }
.gallery-item__cat {
  display: block;
  font-family: var(--font-sans); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2);
  margin-bottom: .3rem;
}
.gallery-item__title {
  font-family: var(--font-display); font-size: var(--step--1);
  color: #fff; line-height: 1.35;
}
.gallery-empty {
  font-family: var(--font-body); color: var(--muted);
  padding: 3rem 0; text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(9, 32, 37, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.lightbox.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .4s var(--ease), visibility 0s linear 0s;
}
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem clamp(1rem, 4vw, 2.5rem);
}
.lightbox__count {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .2em; color: rgba(244, 239, 227, .55);
}
.lightbox__close {
  background: none; border: 1px solid rgba(226, 208, 168, .3);
  color: var(--paper-2); width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover { background: rgba(226, 208, 168, .16); border-color: var(--gold-2); }
.lightbox__stage {
  display: grid; place-items: center;
  padding: 0 clamp(1rem, 6vw, 4.5rem); min-height: 0;
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
  opacity: 0; transform: scale(.985);
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.lightbox__img.is-ready { opacity: 1; transform: none; }
.lightbox__foot { padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem; text-align: center; }
.lightbox__cat {
  font-family: var(--font-sans); font-size: .6rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2);
  display: block; margin-bottom: .5rem;
}
.lightbox__caption {
  font-family: var(--font-body); font-size: var(--step--1);
  color: rgba(244, 239, 227, .8); max-width: 60ch; margin: 0 auto;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 1rem;
  color: rgba(244, 239, 227, .6);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__nav:hover { color: #fff; }
.lightbox__nav--prev { left: clamp(.25rem, 2vw, 1.25rem); }
.lightbox__nav--next { right: clamp(.25rem, 2vw, 1.25rem); }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-4px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(4px); }

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ 17. Cards    */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.jcard {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease), border-color .45s var(--ease);
}
.jcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--line); }
.jcard__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-3); }
.jcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.jcard:hover .jcard__media img { transform: scale(1.05); }
.jcard__cat {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-sans); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--deep); background: rgba(251, 248, 241, .93);
  padding: .45em .9em; border-radius: 999px;
}
.jcard__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.jcard__title { font-size: var(--step-1); margin: 0 0 .6rem; line-height: 1.25; }
.jcard__title a { text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease-out); padding-bottom: 2px; }
.jcard:hover .jcard__title a { background-size: 100% 1px; }
.jcard__excerpt {
  font-family: var(--font-body); font-size: var(--step--1);
  line-height: 1.75; color: var(--muted); margin: 0 0 1.25rem;
}
.jcard__meta {
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.jcard__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sand); }

.placeholder-note {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sari); border: 1px dashed rgba(166, 51, 31, .4);
  padding: .5em 1em; border-radius: 999px; background: rgba(166, 51, 31, .04);
}

/* ------------------------------------------------------------ 18. Events   */

.event {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event__date {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--deep); line-height: 1.2;
}
.event__date span {
  display: block; font-family: var(--font-sans);
  font-size: var(--step--2); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}
.event__title { font-size: var(--step-1); margin: 0 0 .4rem; }
.event__venue {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.event__desc { font-family: var(--font-body); font-size: var(--step--1); color: var(--muted); margin: .75rem 0 0; max-width: 58ch; }
.event--past { opacity: .62; }

.empty-state {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .45);
}
.empty-state__icon { color: var(--gold); margin: 0 auto 1.5rem; opacity: .75; }
.empty-state h3 { font-size: var(--step-2); margin-bottom: .6rem; }
.empty-state p { font-family: var(--font-body); color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------- 19. Newsletter  */

.newsletter { position: relative; overflow: hidden; }
.newsletter__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/images/wash-sand.jpg") center / cover no-repeat;
  opacity: .14; filter: grayscale(.5);
}
.newsletter .wrap { position: relative; z-index: 1; }
.newsletter__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.field > label {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.bg-deep .field > label, .newsletter .field > label { color: rgba(244, 239, 227, .68); }

.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .95em 1.1em;
  width: 100%;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 160px; line-height: 1.7; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8813f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1em center;
  padding-right: 2.75em;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168, 129, 63, .14);
}
.newsletter .field input, .bg-deep .field input,
.newsletter .field select, .bg-deep .field select {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(226, 208, 168, .28);
  color: var(--paper);
}
.newsletter .field input::placeholder, .bg-deep .field input::placeholder { color: rgba(244, 239, 227, .55); }

.field-error {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .06em; color: var(--sari);
  min-height: 1.2em;
}
.newsletter .field-error, .bg-deep .field-error { color: #e6a08f; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--sari); }

.form-note {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .04em; color: var(--muted); line-height: 1.6;
}
.newsletter .form-note, .bg-deep .form-note, .bg-deep-2 .form-note { color: rgba(244, 239, 227, .7); }

.form-status {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(168, 129, 63, .08);
  font-family: var(--font-body); font-size: var(--step--1);
}
.form-status[hidden] { display: none; }
.newsletter .form-status { background: rgba(226, 208, 168, .1); color: var(--paper-2); }

/* ------------------------------------------------------------ 20. Footer   */

/* A gold hairline keeps the footer distinct from whatever dark section
   happens to sit directly above it. */
.site-footer {
  background: var(--deep-2);
  color: rgba(244, 239, 227, .62);
  border-top: 1px solid rgba(226, 208, 168, .15);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}
.site-footer .brand__name { font-size: 2.4rem; }
.site-footer .brand__role { color: rgba(244, 239, 227, .6); }
.footer-blurb {
  font-family: var(--font-body); font-size: var(--step--1);
  line-height: 1.75; max-width: 34ch; margin: 1.5rem 0 1.75rem;
  color: rgba(244, 239, 227, .58);
}
.footer-col h2 {
  font-family: var(--font-sans); font-size: var(--step--2);
  font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 1.35rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .7rem; }
.footer-col a {
  font-family: var(--font-sans); font-size: var(--step--1);
  color: rgba(244, 239, 227, .68); text-decoration: none;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.footer-col a:hover { color: var(--gold-2); padding-left: .3rem; }

.socials { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.socials li { margin: 0; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(226, 208, 168, .22);
  color: rgba(244, 239, 227, .7);
  transition: all .35s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; padding-left: 0; }

.site-footer__bottom {
  border-top: 1px solid rgba(226, 208, 168, .13);
  padding-block: 1.75rem 2.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .08em; color: rgba(244, 239, 227, .58);
}
.site-footer__bottom a { color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: var(--gold-2); }

/* --------------------------------------------------------- 21. Page hero   */

.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem)) clamp(2.5rem, 4.5vw, 4rem);
  background: var(--deep);
  color: var(--paper-2);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../assets/images/wash-hero.jpg") center 55% / cover no-repeat;
  opacity: .5;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(9,32,37,.94) 0%, rgba(9,32,37,.72) 52%, rgba(14,44,51,.5) 100%);
}
.page-hero h1 { color: #fff; font-size: var(--step-5); margin-bottom: .3em; }
.page-hero__lead {
  font-family: var(--font-body); font-size: var(--step-1);
  line-height: 1.65; color: rgba(244, 239, 227, .8); max-width: 46ch;
}
.page-hero .eyebrow { color: var(--gold-2); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 239, 227, .62);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; opacity: .45; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-2); }

/* ------------------------------------------------------- 22. Book page     */

.book-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.chapter-nav { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.chapter {
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 70px) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.15rem, 2.2vw, 1.7rem) clamp(.5rem, 2vw, 1.5rem);
  transition: background-color .5s var(--ease);
}
.chapter:hover { background: var(--paper-2); }
.chapter__num {
  font-family: var(--font-sans); font-size: .68rem;
  letter-spacing: .18em; color: var(--sand-ink);
}
.chapter__title {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--deep); margin: 0; line-height: 1.25;
  transition: color .4s var(--ease), transform .6s var(--ease-out);
}
.chapter:hover .chapter__title { color: var(--gold-ink); transform: translateX(6px); }
.chapter__note {
  font-family: var(--font-body); font-size: var(--step--1);
  line-height: 1.75; color: var(--muted); margin: 0;
  max-width: 60ch;
}

.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  padding: .95rem 0; margin: 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-sans); font-size: var(--step--1);
}
.detail-list dt, .detail-list .k {
  letter-spacing: .16em; text-transform: uppercase;
  font-size: var(--step--2); color: var(--muted);
}
.detail-list .v { color: var(--ink-2); text-align: right; }
.detail-list .v em { font-style: normal; color: var(--muted); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.share__label {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.share button, .share a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: none; cursor: pointer;
  color: var(--ink-2);
  transition: all .3s var(--ease);
}
.share button:hover, .share a:hover { border-color: var(--gold); color: var(--gold-ink); }

/* --------------------------------------------------- 23. About page bits   */

.about-toc {
  position: sticky; top: calc(var(--header-h) + 2rem);
  list-style: none; margin: 0; padding: 0;
}
.about-toc li { margin: 0; }
.about-toc a {
  display: block; padding: .55rem 0 .55rem 1.15rem;
  border-left: 1px solid var(--line);
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.about-toc a:hover, .about-toc a.is-active { color: var(--gold-ink); border-color: var(--gold); padding-left: 1.5rem; }

.chapter-block { padding-block: clamp(2.5rem, 5vw, 4rem); }
.chapter-block + .chapter-block { border-top: 1px solid var(--line-soft); }
.chapter-block__head { margin-bottom: 1.75rem; }
.chapter-block h2 { font-size: var(--step-3); }

.inline-figure {
  margin: 2.5rem 0;
}
.inline-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.inline-figure--pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.25rem;
}

/* ------------------------------------------------- 23b. Sales CTA band     */

.cta-band { position: relative; overflow: hidden; }
.cta-band__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/images/wash-sea.jpg") center / cover no-repeat;
  opacity: .16; filter: grayscale(.5);
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.cta-band__cover .book-flat { max-width: 250px; }
.cta-band h2 { font-size: var(--step-3); }

/* ------------------------------------------------- 23c. Article template   */

.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 239, 227, .6);
  margin: 1.25rem 0 0;
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-2); }

.article-lead { max-width: 900px; margin-inline: auto; }
.article-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-soft); }
.article-lead figcaption { max-width: 60ch; }

/* Headings inside long-form prose need their own rhythm */
.prose h2 {
  font-size: var(--step-2);
  margin: 2.5em 0 .6em;
}
.prose h3 {
  font-size: var(--step-1);
  margin: 2em 0 .5em;
}
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-block: 0 1.4em; padding-left: 1.35em; }
.prose li { margin-bottom: .5em; }

/* ------------------------------------------------- 23d. Contact page       */

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  margin: 0;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-list li:first-child { padding-top: 0; }
.contact-list h3 {
  font-size: var(--step-1);
  margin: 0 0 .35rem;
  color: var(--deep);
}
.contact-list p {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 48ch;
}

.form-card {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.form-card .eyebrow { margin-bottom: 1.75rem; }

/* Events list */
.events { list-style: none; margin: 0; padding: 0; }

/* ----------------------------------------------------- 24. Scroll reveal   */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.97); }

/* Stated last and at matching specificity so the settled state always wins */
[data-reveal].is-visible,
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { opacity: 1; transform: none; }

/* Below tablet the columns are stacked, so a sideways entrance would push
   content past the gutter. Everything rises instead. */
@media (max-width: 900px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(22px); }
}

/* Line-by-line masked text reveal.
   Vertical padding (cancelled by a negative margin) keeps ascenders and
   descenders inside the clipping box without changing the layout. */
.reveal-lines .line {
  display: block; overflow: hidden;
  padding-block: .1em; margin-block: -.1em;
}
.reveal-lines .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal-lines.is-visible .line > span { transform: none; }

/* Page entrance */
.page-fade { animation: pageIn .8s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------- 25. Breakpoints   */

/* Eight links plus a CTA inside a 1240px bar: the spacing is set for that
   measure, then tightened in stages before the drawer takes over at 1024px. */
@media (max-width: 1300px) {
  .brand__role { display: none; }
}
@media (max-width: 1180px) {
  .site-header__inner { gap: 1.15rem; padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
  .nav__list { gap: 1rem; }
  .nav__link { font-size: .7rem; letter-spacing: .08em; }
  .header-cta { padding: .9em 1.35em; font-size: .68rem; letter-spacing: .1em; }
}

@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .nav, .header-cta { display: none; }
  .nav-toggle { display: block; }

  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 4rem); }
  .hero__copy { max-width: 100%; order: 2; }
  .hero__stage { order: 1; }
  .hero__title { font-size: clamp(2.1rem, 6.5vw, 3.4rem); }
  .hero__cue { display: none; }
  .book { --book-w: clamp(180px, 40vw, 260px); }

  .split, .book-hero__grid, .newsletter__grid,
  .cta-band__grid { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .portrait-frame::before { display: none; }
  .cta-band__cover { display: flex; justify-content: center; }
  .brief__item { grid-template-columns: minmax(0, 48px) minmax(0, 1fr); }

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

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

  .memory { grid-template-columns: minmax(0, 56px) minmax(0, 1fr); row-gap: .6rem; }
  .memory__text { grid-column: 2; }

  .chapter { grid-template-columns: minmax(0, 46px) minmax(0, 1fr); row-gap: .5rem; }
  .chapter__note { grid-column: 2; }

  .era-head, .milestone { grid-template-columns: 1fr; gap: 1rem; }
  .milestone__place { padding-left: 1.35rem; }
}

@media (max-width: 720px) {
  :root { --section-y: clamp(2.5rem, 8vw, 3.5rem); }

  .prose > p:first-of-type::first-letter { font-size: 3em; }

  .event { grid-template-columns: 1fr; gap: .85rem; }
  .event__date { display: flex; align-items: baseline; gap: .75rem; }
  .event__date span { margin-top: 0; }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  .gallery-grid { columns: 1; }
  .gallery-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

  .atlas__svg { min-width: 640px; }
  .atlas__figure { overflow-x: auto; }

  .pullquote { padding-left: 1.15rem; margin-block: 2rem; }
  .btn { width: auto; }
  .hero__actions .btn { flex: 1 1 auto; }

  .lightbox__nav { padding: .6rem; }

  /* Phones: the small uppercase labels drop below comfortable reading size,
     and footer/breadcrumb links are too short to tap reliably. */
  .eyebrow, .stat__label, .caption, figcaption, cite,
  .form-note, .share__label, .filter-btn { font-size: max(.72rem, 12px); }
  .tl-stop__place, .tl-stop__chapter, .milestone__region,
  .gallery-item__cat, .jcard__cat, .lightbox__cat { font-size: max(.68rem, 11px); }

  .footer-col li { margin-bottom: .25rem; }
  .footer-col a, .site-footer__bottom a { display: inline-block; padding-block: .55rem; }
  .breadcrumb a { display: inline-block; padding-block: .6rem; }
  .brand { padding-block: .4rem; }
  .filter-btn { min-height: 40px; }
}

@media (max-width: 460px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .timeline__scroller { padding-inline: var(--gutter); }
  .tl-stop { flex-basis: 78vw; }
}

/* Large screens: let the hero breathe */
@media (min-width: 1600px) {
  .hero__inner { gap: 7rem; }
}

/* Bookshelf: scrollable HTML fallback, enhanced to a seamless looping rail. */
.amazon-books { overflow: hidden; }
.amazon-books .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.amazon-books .sec-head { max-width: 650px; }
.amazon-books__controls { display: flex; gap: .6rem; flex-shrink: 0; }
.amazon-books__controls[hidden] { display: none; }
.amazon-books__control {
  min-width: 44px; height: 44px; padding: 0 .9rem;
  border: 1px solid var(--sand); border-radius: 2px;
  background: transparent; color: var(--deep); cursor: pointer;
  font-family: var(--font-sans); font-size: 1.2rem;
}
.amazon-books__control:hover { background: var(--deep); color: var(--paper); }
.amazon-books__viewport { overflow-x: auto; padding: 8px 4px 20px; }
.amazon-books.is-enhanced .amazon-books__viewport { overflow: hidden; touch-action: pan-y; }
.amazon-books__track {
  --books-visible: 4; --books-gap: 28px;
  display: flex; gap: var(--books-gap); list-style: none; padding: 0; margin: 0;
}
.amazon-books.is-enhanced .amazon-books__track { transition: transform .55s var(--ease); }
.amazon-books__track.is-resetting { transition: none !important; }
.amazon-book { flex: 0 0 calc((100% - (var(--books-visible) - 1) * var(--books-gap)) / var(--books-visible)); min-width: 0; margin: 0; }
.amazon-book__link { display: flex; flex-direction: column; height: 100%; color: var(--deep); text-decoration: none; }
.amazon-book__cover {
  display: flex; align-items: center; justify-content: center;
  height: clamp(220px, 23vw, 295px); padding: 18px;
  background: var(--paper); border: 1px solid var(--line-soft); margin-bottom: 1.25rem;
}
.amazon-book__cover img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 5px 8px 14px rgba(14,44,51,.18); transition: transform .3s var(--ease); }
.amazon-book__link:hover img { transform: translateY(-4px); }
.amazon-book__category { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-ink); margin-bottom: .5rem; }
.amazon-book h3 { font-size: var(--step-1); line-height: 1.4; margin: 0 0 1rem; }
.amazon-book__cta { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); font-family: var(--font-sans); font-size: .85rem; color: var(--gold-ink); display: flex; justify-content: space-between; }
.amazon-books__note { margin: 1.25rem 0 0; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .08em; color: var(--muted); }
.amazon-books__note > span { margin-inline: .5rem; }
@media (max-width: 1024px) { .amazon-books__track { --books-visible: 3; --books-gap: 22px; } }
@media (max-width: 720px) {
  .amazon-books__track { --books-visible: 2; --books-gap: 18px; }
  .amazon-books .sec-head-row { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
}
@media (max-width: 460px) {
  .amazon-books__track { --books-visible: 1; }
  .amazon-book__cover { height: 300px; }
}
@media print {
  .amazon-books__controls, .amazon-book[data-clone] { display: none !important; }
  .amazon-books__track { transform: none !important; flex-wrap: wrap; }
  .amazon-book { flex-basis: 22%; }
}

/* ---------------------------------------------------- 26. Reduced motion   */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-lines .line > span { transform: none !important; }
  .book--float .book__inner { animation: none; }
  .hero__cue::after { display: none; }
  .atlas .route { stroke-dashoffset: 0; }
  .atlas .route-arrow { opacity: .9; }
}

/* ------------------------------------------------------------ 27. Print    */

@media print {
  .site-header, .mobile-nav, .hero__cue, .newsletter, .site-footer__top,
  .nav-toggle, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero, .bg-deep, .bg-deep-2 { background: #fff !important; color: #000 !important; }
  .page-hero h1, .bg-deep h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}