/* ==========================================================================
   Bishop Rodney Gamble Sr. | Author Website
   styles.css
   --------------------------------------------------------------------------
   Visual concept: "Light breaking through". Every section has its own
   world so the page reads as a sequence of distinct chapters:

     Hero ............ midnight navy, gold light
     The Question .... radiant sky dome (the cover's sunburst)
     Ticker band ..... metallic gold
     About ........... warm ivory editorial
     The Book ........ rich royal blue
     Key Themes ...... near-black with gold
     Praise .......... champagne gold
     Events .......... navy with an ivory ticket
     Media ........... clean white gallery
     Order ........... midnight with a gold beam
     Ticker band ..... metallic gold
     Contact ......... ivory with a navy panel
     Newsletter ...... royal blue
     Footer .......... midnight

    1. Design tokens          14. Praise
    2. Base & reset           15. Events
    3. Typography & utilities 16. Media gallery & lightbox
    4. Buttons & links        17. Order
    5. Atmosphere             18. Contact & forms
    6. Header & navigation    19. Newsletter
    7. Mobile menu            20. Footer
    8. 3D book component      21. Ticker bands
    9. Hero                   22. Praise slider (for future endorsements)
   10. The Question           23. Motion (load + reveal)
   11. About                  24. Responsive
   12. The Book               25. Reduced motion
   13. Key Themes
   ========================================================================== */


/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* Navy scale */
  --midnight: #040a18;
  --navy-950: #060f26;
  --navy-900: #0a1a3d;
  --navy-800: #0f2452;
  --navy-700: #16316b;
  --royal: #1f4b9c;
  --royal-deep: #173d86;
  --royal-light: #3f6fc2;
  --sky: #bcd5f2;
  --sky-pale: #e8f1fb;

  /* Metallic gold */
  --gold: #c9a45c;
  --gold-light: #e6cd92;
  --gold-pale: #f3e6c4;
  --gold-deep: #a07c38;
  --gold-ink: #7a5a22;          /* gold for small text on light backgrounds (AA) */
  --champagne: #e9dcc0;

  /* Neutrals */
  --ivory: #f8f4ec;
  --paper: #fdfbf7;
  --white: #ffffff;
  --ink: #0b1430;
  --ink-soft: #3d4763;
  --mist: rgba(226, 233, 246, .78);
  --mist-strong: rgba(236, 241, 250, .92);

  /* Gradients */
  --gold-grad: linear-gradient(120deg, #f4e4b6 0%, #d8b673 26%, #b08a43 50%, #ecd396 72%, #b8913f 100%);
  --gold-text: linear-gradient(100deg, #f6e7bd 0%, #dcbc79 35%, #c39b52 62%, #f0d99f 100%);
  --gold-text-deep: linear-gradient(100deg, #7a5a22 0%, #a07c38 48%, #6f511d 100%);
  --royal-text: linear-gradient(100deg, #1f4b9c 0%, #0f2452 100%);

  /* Hairlines */
  --hair-gold: rgba(201, 164, 92, .26);
  --hair-gold-strong: rgba(201, 164, 92, .55);
  --hair-ink: rgba(11, 20, 48, .13);

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-impact: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-script: "Pinyon Script", "Brush Script MT", cursive;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --header-h: 92px;
  --header-h-min: 72px;
  --section-y: clamp(104px, 12vw, 190px);
  --dome: 110px;                /* height of the sky dome that rises into the hero */

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Depth */
  --shadow-xl: 0 50px 100px -40px rgba(2, 6, 18, .8);
  --shadow-lg: 0 34px 70px -34px rgba(10, 26, 61, .4);
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}


/* 2. BASE & RESET ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-min) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--midnight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg:has(> use) { width: 1em; height: 1em; flex-shrink: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; }
cite { font-style: italic; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.section--light :focus-visible,
.statement :focus-visible,
.invite :focus-visible,
.form :focus-visible { outline-color: var(--gold-deep); }

::selection { background: rgba(201, 164, 92, .35); }


/* 3. TYPOGRAPHY & UTILITIES =============================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  padding: 14px 22px;
  background: var(--gold); color: var(--navy-950);
  font-weight: 700; font-size: .85rem; letter-spacing: .08em;
  transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin: 0 0 24px;
  font: 600 .74rem/1.3 var(--font-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.eyebrow__num {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: 1.2rem; letter-spacing: 0;
  color: var(--gold);
}
.eyebrow__num::after {
  content: ""; width: 44px; height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
}
.eyebrow--center { justify-content: center; }
.eyebrow--rule::before {
  content: ""; width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section--light .eyebrow,
.section--light .eyebrow__num { color: var(--gold-ink); }

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.section-title--center { text-align: center; margin-inline: auto; }
.section-title em,
.newsletter__title em { font-style: italic; font-weight: 400; }

/* Gold text on dark */
.section-title em,
.section-title em .word__inner {
  background-image: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Deep gold text on light */
.section--light .section-title em,
.section--light .section-title em .word__inner { background-image: var(--gold-text-deep); }
/* Once a heading is split into words, the gradient moves to each word */
.is-split em { background-image: none !important; }

.lead {
  font-size: clamp(1.1rem, 1.3vw, 1.24rem);
  line-height: 1.72;
  color: var(--ink-soft);
}

.section--light { color: var(--ink); }
.section--light cite { color: var(--navy-800); }


/* 4. BUTTONS & LINKS ====================================================== */
.btn {
  --btn-h: 58px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--btn-h);
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 1px;
  font: 700 .76rem/1.15 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .5s var(--ease-out),
              background-color .4s, background-position .8s var(--ease-out),
              color .4s, border-color .4s;
}
.btn > span { position: relative; z-index: 1; }
.btn__icon { position: relative; z-index: 1; width: 18px; height: 18px; transition: transform .5s var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(5px); }

/* light sweep */
.btn::before {
  content: "";
  position: absolute; top: -10%; bottom: -10%; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
  transform: skewX(-20deg) translateX(440%);
  transition: transform 1.05s var(--ease-out), opacity .15s;
}
/* cursor-following glow */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .32), transparent 62%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

.btn--gold {
  color: var(--navy-950);
  background-image: var(--gold-grad);
  background-size: 190% 100%;
  background-position: 0 0;
  box-shadow: 0 14px 34px -14px rgba(201, 164, 92, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--gold:hover {
  background-position: 100% 0;
  box-shadow: 0 22px 46px -14px rgba(214, 178, 105, .9), 0 0 0 1px rgba(243, 230, 196, .65), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.btn--ghost {
  color: var(--gold-pale);
  border-color: rgba(230, 205, 146, .45);
  background-color: rgba(10, 26, 61, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--ghost::before { background: linear-gradient(100deg, transparent, rgba(234, 211, 154, .3), transparent); }
.btn--ghost::after { background: radial-gradient(130px circle at var(--bx, 50%) var(--by, 50%), rgba(234, 211, 154, .18), transparent 62%); }
.btn--ghost:hover { color: #fff; border-color: var(--gold-light); background-color: rgba(201, 164, 92, .1); }

.btn--navy {
  color: var(--ivory);
  background-color: var(--navy-900);
  box-shadow: 0 16px 34px -18px rgba(10, 26, 61, .85);
}
.btn--navy::before { background: linear-gradient(100deg, transparent, rgba(234, 211, 154, .3), transparent); }
.btn--navy::after { background: radial-gradient(130px circle at var(--bx, 50%) var(--by, 50%), rgba(234, 211, 154, .2), transparent 62%); }
.btn--navy:hover {
  color: var(--gold-light);
  background-color: var(--navy-800);
  box-shadow: 0 22px 42px -18px rgba(10, 26, 61, .9), 0 0 0 1px rgba(201, 164, 92, .55);
}

.btn--sm { --btn-h: 46px; padding: 0 22px; font-size: .68rem; letter-spacing: .18em; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }

.text-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font: 700 .74rem/1.3 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.text-link::after {
  content: "";
  position: absolute; left: 0; right: 30px; bottom: 3px;
  height: 1px; background: currentColor;
  transform: scaleX(.28); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.text-link:hover::after { transform: scaleX(1); }
.text-link svg { width: 18px; height: 18px; transition: transform .5s var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }


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

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 210;
  pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: var(--gold-grad);
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(230, 205, 146, .6);
}

/* Thin gold "thread" that drops from one section into the next */
.thread {
  position: absolute; top: 0; left: 50%;
  width: 1px; height: clamp(64px, 9vw, 124px);
  background: linear-gradient(180deg, var(--gold-deep) 0%, rgba(201, 164, 92, 0) 100%);
  transform-origin: top;
  z-index: 3;
  pointer-events: none;
}
.thread::before {
  content: "";
  position: absolute; top: -4px; left: -4px;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(230, 205, 146, .7);
}
.thread--light { background: linear-gradient(180deg, var(--gold-light) 0%, rgba(201, 164, 92, 0) 100%); }

/* Cursor-following glow for dark sections */
.has-glow { isolation: isolate; }
.has-glow::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(214, 180, 110, .11), transparent 62%);
  opacity: 0;
  transition: opacity .8s;
}
.has-glow.is-glowing::after { opacity: 1; }

.parallax { translate: 0 var(--py, 0px); }

@keyframes spin { to { transform: rotate(360deg); } }


/* 6. HEADER & NAVIGATION ================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: height .5s var(--ease-out), border-color .5s, box-shadow .5s;
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(5, 12, 32, .78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  transition: opacity .5s;
}
.site-header.is-scrolled,
body.menu-open .site-header {
  height: var(--header-h-min);
  border-bottom-color: rgba(201, 164, 92, .2);
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .7);
}
.site-header.is-scrolled::before { opacity: 1; }
body.menu-open .site-header::before { opacity: 0; }

.site-header__inner { display: flex; align-items: center; gap: 28px; }

.wordmark {
  display: inline-flex; align-items: center; gap: 14px;
  margin-right: auto;
  color: var(--ivory);
}
.wordmark__mono {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-gold-strong);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1;
  color: var(--gold-light);
  transition: transform .9s var(--ease-out), border-color .4s, width .5s var(--ease-out), height .5s var(--ease-out);
}
.wordmark__mono::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, .18);
}
.wordmark:hover .wordmark__mono { transform: rotate(-14deg); border-color: var(--gold); }
.is-scrolled .wordmark .wordmark__mono { width: 40px; height: 40px; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__title {
  margin-bottom: 6px;
  font: 700 .6rem/1 var(--font-sans);
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--gold);
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 500;
  white-space: nowrap;
}

.primary-nav ul { display: flex; gap: clamp(14px, 1.7vw, 28px); list-style: none; }
.primary-nav a {
  position: relative;
  display: block;
  padding: 12px 2px;
  font: 600 .7rem/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color .3s;
}
.primary-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 3px;
  height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease-out);
}
.primary-nav a:hover,
.primary-nav a.is-active { color: var(--gold-light); }
.primary-nav a:hover::after,
.primary-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.header-cta { margin-left: 6px; }

.menu-toggle {
  display: none;
  position: relative;
  width: 52px; height: 52px;
  border: 1px solid var(--hair-gold-strong);
  border-radius: 50%;
  background: rgba(10, 26, 61, .5);
  color: var(--gold-light);
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.menu-toggle:hover { border-color: var(--gold); background: rgba(201, 164, 92, .1); }
.menu-toggle__bars { position: absolute; inset: 0; display: grid; place-items: center; }
.menu-toggle__bars i {
  position: absolute;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: transform .55s var(--ease-out), width .55s var(--ease-out);
}
.menu-toggle__bars i:first-child { transform: translateY(-4px); }
.menu-toggle__bars i:last-child { width: 13px; transform: translate(3.5px, 4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { width: 20px; transform: rotate(-45deg); }


/* 7. MOBILE MENU ========================================================== */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--header-h-min) + 28px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  overflow-y: auto;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 70% 45% at 85% 0%, rgba(63, 111, 194, .38), transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(201, 164, 92, .14), transparent 70%),
    linear-gradient(180deg, #060f26, #0a1a3d);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility 0s linear .8s;
}
.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .8s var(--ease-io), visibility 0s;
}
.mobile-menu__glow {
  position: absolute; right: -20%; top: 10%;
  width: 70vw; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, .14);
  pointer-events: none;
}
.mobile-menu__nav ol { list-style: none; position: relative; }
.mobile-menu__nav li { overflow: hidden; border-bottom: 1px solid rgba(201, 164, 92, .14); }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 13px 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7.4vw, 2.9rem);
  line-height: 1.12;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out), color .3s;
  transition-delay: calc(var(--i, 0) * 55ms + .18s);
}
.mobile-menu.is-open .mobile-menu__nav a { transform: none; }
.mobile-menu__nav a span {
  font: 600 .7rem/1 var(--font-sans);
  letter-spacing: .2em;
  color: var(--gold);
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a.is-active { color: var(--gold-light); }
.mobile-menu__foot {
  position: relative;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s, transform .8s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; transition-delay: .55s; }
.mobile-menu__tag {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--mist);
}


/* 8. 3D BOOK COMPONENT ==================================================== */
/* A real 3D object: cover, page block (right/top/bottom) and back board.
   The cover image keeps its exact proportions, so it is never cropped. */
.book3d {
  --bw: 300px;
  --depth: calc(var(--bw) * .085);
  --ry: -24deg;
  --rx: 5deg;
  --shine: 72%;
  position: relative;
  width: var(--bw);
  aspect-ratio: 1221 / 1801;
  transform-style: preserve-3d;
}
.book3d__body {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* keep this function list in sync with @keyframes bookEnter */
  transform: translate3d(0, 0, 0) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1.1s var(--ease-out);
}
.book3d__face {
  position: absolute;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.book3d__cover {
  inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  border-radius: 1px 4px 4px 1px;
  transform: translateZ(calc(var(--depth) / 2));
}
.book3d__shine {
  inset: 0;
  border-radius: 1px 4px 4px 1px;
  pointer-events: none;
  transform: translateZ(calc(var(--depth) / 2 + .6px));
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(255, 255, 255, .2) 1.3%, rgba(0, 0, 0, .14) 3.2%, rgba(0, 0, 0, 0) 7.5%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, var(--shine) 0;
  background-repeat: no-repeat;
  transition: background-position 1.1s var(--ease-out);
}
.book3d__back {
  inset: 0;
  border-radius: 4px 1px 1px 4px;
  background: linear-gradient(90deg, #0b1d45, #0d2350);
  transform: rotateY(180deg) translateZ(calc(var(--depth) / 2));
  box-shadow: -34px 34px 70px -12px rgba(0, 0, 0, .6);
}
.book3d__pages {
  background-color: #f3eee1;
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 104, 72, 0) 0 1px, rgba(120, 104, 72, .16) 1px 2px),
    linear-gradient(90deg, #e3dbc7, #fbf8f0 45%, #ece5d4);
}
.book3d__pages--right {
  top: 1%; bottom: 1%;
  left: calc(100% - var(--depth) / 2 - 1px);
  width: var(--depth);
  transform: rotateY(90deg);
}
.book3d__pages--top,
.book3d__pages--bottom {
  left: 2px; right: 3px;
  height: var(--depth);
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 104, 72, 0) 0 1px, rgba(120, 104, 72, .16) 1px 2px),
    linear-gradient(0deg, #e3dbc7, #fbf8f0 45%, #ece5d4);
}
.book3d__pages--top { top: calc(var(--depth) / -2 + 3px); transform: rotateX(90deg); }
.book3d__pages--bottom { bottom: calc(var(--depth) / -2 + 3px); transform: rotateX(-90deg); }

.book-shadow {
  position: absolute; left: 50%; bottom: -30px;
  width: 96%; height: 50px;
  transform: translateX(-44%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: shadowPulse 7s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes shadowPulse {
  0%, 100% { transform: translateX(-44%) scale(1); opacity: 1; }
  50% { transform: translateX(-44%) scale(.84); opacity: .7; }
}


/* 9. HERO (midnight navy) ================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + clamp(24px, 4vh, 56px)) 0 calc(var(--dome) + clamp(40px, 7vh, 90px));
  overflow: hidden;
  color: var(--ivory);
  background: var(--midnight);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(ellipse 48% 58% at 74% 46%, rgba(124, 168, 234, .36) 0%, rgba(45, 90, 170, .16) 40%, rgba(10, 26, 61, 0) 70%),
    radial-gradient(ellipse 60% 50% at 18% 0%, rgba(31, 75, 156, .28), transparent 70%),
    linear-gradient(180deg, #040a18 0%, #071330 60%, #0b1d45 100%);
}
.hero__rays {
  position: absolute; z-index: -3;
  left: 74%; top: 46%;
  width: 1300px; height: 1300px;
  margin: -650px 0 0 -650px;
  background: repeating-conic-gradient(from 0deg, rgba(214, 231, 255, .08) 0deg 1.1deg, rgba(214, 231, 255, 0) 1.1deg 6deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .55) 36%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .55) 36%, transparent 100%);
  animation: spin 200s linear infinite;
}
.hero__particles {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__ghost {
  position: absolute; z-index: -2;
  right: -3vw; top: 46%;
  margin-top: -.52em;
  font-family: var(--font-impact);
  font-size: clamp(13rem, 33vw, 36rem);
  line-height: 1;
  letter-spacing: .01em;
  pointer-events: none;
  user-select: none;
}
.hero__ghost span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 164, 92, .16);
  background: linear-gradient(180deg, rgba(170, 200, 245, .09), rgba(170, 200, 245, 0) 75%);
  -webkit-background-clip: text; background-clip: text;
}
.hero__lines {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__lines path { fill: none; stroke: rgba(201, 164, 92, .15); stroke-width: 1; vector-effect: non-scaling-stroke; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}
.hero__copy { position: relative; z-index: 2; max-width: 640px; }
.hero__eyebrow { margin-bottom: clamp(22px, 3vh, 34px); }
.hero__eyebrow i {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 6.6vw, 6.9rem);
  line-height: .94;
  letter-spacing: -.018em;
  margin: 0 0 clamp(24px, 3.4vh, 36px);
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding: .02em .08em .12em 0;
  margin-bottom: -.08em;
}
.hero__title .line > span { display: inline-block; }
.hero__title em {
  font-style: italic; font-weight: 400;
  padding-right: .06em;
  background-image: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero__lede {
  max-width: 33em;
  margin-bottom: clamp(28px, 4vh, 40px);
  font-size: clamp(1.08rem, 1.25vw, 1.2rem);
  line-height: 1.75;
  color: var(--mist);
}
.hero__lede cite { font-family: var(--font-display); font-size: 1.14em; color: var(--gold-pale); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__author {
  display: flex; align-items: center; gap: 16px;
  max-width: 440px;
  margin-top: clamp(30px, 5vh, 52px);
  padding-top: 24px;
  border-top: 1px solid rgba(201, 164, 92, .2);
}
.hero__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px rgba(201, 164, 92, .14);
}
.hero__author p { display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
.hero__author span {
  font: 600 .66rem/1.4 var(--font-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__author strong {
  font-family: var(--font-display);
  font-size: 1.48rem;
  font-weight: 500;
  color: var(--ivory);
}

.hero__visual {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(520px, 72vh, 760px);
}
.hero__halo {
  position: absolute; left: 50%; top: 50%;
  width: min(122%, 780px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 244, 255, .6) 0%, rgba(176, 205, 245, .3) 16%, rgba(80, 125, 205, .13) 36%, rgba(10, 26, 61, 0) 62%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .88; }
  50% { transform: scale(1.06); opacity: 1; }
}
.hero__orbit {
  position: absolute; left: 50%; top: 50%;
  width: min(108%, 660px);
  aspect-ratio: 1;
  height: auto;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
}
.hero__orbit circle, .hero__orbit ellipse { fill: none; }
.orbit-draw { stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s var(--ease-io) .4s; }
.js .orbit-draw { stroke-dashoffset: 1; }
.js .is-loaded .orbit-draw { stroke-dashoffset: 0; }
.orbit-faint { stroke: rgba(234, 211, 154, .12); stroke-width: 1; }
.orbit-dash { stroke: rgba(234, 211, 154, .3); stroke-width: 1; stroke-dasharray: 2 7; }
.hero__orbit .orbit-dot { fill: #f3e2b0; filter: drop-shadow(0 0 6px rgba(243, 226, 176, .95)); }
.orbit-spin { transform-box: view-box; transform-origin: 50% 50%; animation: spin 48s linear infinite; }

.hero__book { position: relative; z-index: 2; perspective: 1700px; }
.book3d--hero { --bw: clamp(250px, 23vw, 350px); animation: floatY 7s ease-in-out infinite; }

.rotor {
  position: absolute; z-index: 3;
  right: clamp(-12px, 1vw, 20px);
  bottom: clamp(24px, 8%, 70px);
  width: 124px; height: 124px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(6, 15, 38, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(201, 164, 92, .35), 0 20px 40px -20px rgba(0, 0, 0, .6);
  transition: transform .6s var(--ease-out), box-shadow .4s;
}
.rotor > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 28s linear infinite;
}
.rotor text { font: 700 7.6px var(--font-sans); letter-spacing: 1.3px; fill: currentColor; }
.rotor__core {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background-image: var(--gold-grad);
  color: var(--navy-950);
}
.rotor__core svg { width: 20px; height: 20px; transition: transform .5s var(--ease-out); }
.rotor:hover { transform: scale(1.06); box-shadow: 0 0 0 1px var(--gold), 0 24px 48px -20px rgba(0, 0, 0, .7); }
.rotor:hover .rotor__core svg { transform: rotate(45deg); }

.scroll-cue {
  position: absolute; left: 50%; bottom: calc(var(--dome) + 20px); z-index: 3;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 600 .62rem/1 var(--font-sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mist);
}
.scroll-cue i {
  position: relative;
  width: 1px; height: 44px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.scroll-cue i::after {
  content: "";
  position: absolute; left: 0; top: -40%;
  width: 100%; height: 40%;
  background: #fff;
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { to { top: 100%; } }


/* 10. THE QUESTION (radiant sky dome) ===================================== */
/* A luminous dome rises out of the dark hero, like light breaking the horizon. */
.statement {
  position: relative; z-index: 2;
  margin-top: calc(var(--dome) * -1);
  padding: calc(var(--dome) + clamp(90px, 14vh, 160px)) 0 clamp(130px, 20vh, 220px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--navy-900);
  border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0;
  background:
    radial-gradient(ellipse 55% 55% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, .7) 28%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #e6f0fb 0%, #cfe0f5 45%, #b3cdee 100%);
  box-shadow: 0 -2px 0 rgba(230, 205, 146, .85), 0 -50px 140px -30px rgba(190, 215, 250, .55);
}
.statement__rays {
  position: absolute; z-index: -2;
  left: 50%; top: 0;
  width: 1600px; height: 1600px;
  margin: -800px 0 0 -800px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .7) 0deg 1.3deg, rgba(255, 255, 255, 0) 1.3deg 7deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 100%);
  animation: spin 240s linear infinite;
}
.statement__glow {
  position: absolute; left: 50%; top: 55%; z-index: -1;
  width: 70vw; max-width: 980px;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 164, 92, .22) 0%, rgba(201, 164, 92, .06) 34%, transparent 62%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate(-7%, -5%) scale(.94); }
  100% { transform: translate(7%, 6%) scale(1.08); }
}
.statement__ring {
  position: absolute; left: 50%; top: 55%; z-index: -1;
  width: min(80vw, 840px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(10, 26, 61, .1);
}
.statement__ring::before {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(160, 124, 56, .3);
  animation: spin 120s linear infinite;
}
.statement .eyebrow { color: var(--gold-ink); }
.statement__text {
  max-width: 17ch;
  margin: 0 auto 38px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.8vw, 5.9rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--navy-900);
}
.statement__text em { font-style: italic; font-weight: 400; }
.statement__text em,
.statement__text em .word__inner {
  background-image: var(--gold-text-deep);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.statement.is-scrub .word__inner { opacity: .14; transition: opacity .55s ease; }
.statement.is-scrub .word__inner.is-lit { opacity: 1; }
.statement__sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: var(--navy-700);
}


/* 11. ABOUT (warm ivory editorial) ======================================== */
.about {
  --curtain: #f6f1e7;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-y) 0;
  background:
    radial-gradient(ellipse 50% 40% at 0% 10%, rgba(201, 164, 92, .14), transparent 70%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(31, 75, 156, .07), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, #f2ebde 100%);
}
.about__ghost {
  position: absolute; z-index: -1;
  right: -4vw; top: 2%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16rem, 38vw, 38rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(160, 124, 56, .24);
  pointer-events: none;
  user-select: none;
}
.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.about__figure {
  position: relative;
  grid-column: 1 / 7;
  grid-row: 1;
  margin: 0;
}
/* Offset gold frame, same square proportion as the photo */
.about__figure::before {
  content: "";
  position: absolute; top: -22px; left: -22px; right: 22px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(160, 124, 56, .5);
  z-index: -1;
}
/* The portrait is shown whole, at its natural proportions */
.about__frame {
  position: relative;
  background: #ebe5d9;
  box-shadow: var(--shadow-lg);
}
.about__frame img { width: 100%; height: auto; }
.about__caption {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 22px;
  padding-left: 18px;
  border-left: 1px solid var(--gold);
}
.about__caption span:first-child { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy-900); }
.about__caption span:last-child { font-size: .84rem; letter-spacing: .04em; color: var(--ink-soft); }
.about__vertical {
  position: absolute; left: -54px; top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 600 .66rem/1 var(--font-sans);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.about__panel {
  position: relative; z-index: 2;
  grid-column: 6 / 13;
  grid-row: 1;
  margin-top: clamp(90px, 12vw, 190px);
  padding: clamp(32px, 4.2vw, 64px);
  background: rgba(253, 251, 247, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 3px solid var(--gold);
  box-shadow: 0 50px 90px -50px rgba(10, 26, 61, .45);
}
.about__panel::before {
  content: "";
  position: absolute; left: -1px; top: -110px;
  width: 1px; height: 110px;
  background: linear-gradient(0deg, var(--gold), transparent);
}
.about__panel .lead { margin-bottom: 18px; }
.about__text { color: var(--ink-soft); }

.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 30px 0 36px;
  padding: 24px 0;
  border-top: 1px solid var(--hair-ink);
  border-bottom: 1px solid var(--hair-ink);
}
.meta dt {
  margin-bottom: 4px;
  font: 600 .64rem/1.4 var(--font-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.meta dd { margin: 0; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.3; color: var(--navy-900); }


/* 12. THE BOOK (rich royal blue) ========================================== */
.book {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 50% 62% at 25% 52%, rgba(178, 210, 252, .42) 0%, rgba(90, 140, 220, .16) 45%, transparent 72%),
    radial-gradient(ellipse 40% 50% at 100% 0%, rgba(201, 164, 92, .16), transparent 70%),
    linear-gradient(160deg, #1f4c9e 0%, #173d86 45%, #0f2a62 100%);
}
.book__ghost {
  position: absolute; left: 0; right: 0; bottom: -.16em; z-index: -2;
  text-align: center;
  font-family: var(--font-impact);
  font-size: clamp(7rem, 20vw, 22rem);
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 205, 146, .18);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.book__stage {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(560px, 58vw, 680px);
}
.book__rays {
  position: absolute; left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(225, 238, 255, .12) 0deg 1deg, rgba(225, 238, 255, 0) 1deg 7deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 22%, transparent 52%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 22%, transparent 52%);
  animation: spin 240s linear infinite reverse;
}
.book__plinth {
  position: absolute; left: 50%; top: 50%;
  width: 92%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 242, 255, .45) 0%, rgba(140, 180, 240, .18) 30%, transparent 62%);
}
.book__plinth::after {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(234, 211, 154, .28);
}
.book__object { position: relative; z-index: 2; perspective: 1800px; }
.book3d--feature { --bw: clamp(250px, 25vw, 370px); --ry: -27deg; animation: floatY 8s ease-in-out infinite; }
.book__tag {
  position: absolute; z-index: 3;
  left: 50%; bottom: 0;
  translate: -50% 0;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  padding: 12px 18px;
  font: 700 .66rem/1 var(--font-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--navy-950);
  background-image: var(--gold-grad);
  box-shadow: 0 16px 34px -16px rgba(201, 164, 92, .8);
}
.book__tag svg { width: 12px; height: 12px; }

.book__title { margin: 4px 0 18px; }
.book__who {
  display: block;
  font-family: var(--font-impact);
  font-weight: 400;
  font-size: clamp(6rem, 13vw, 12.5rem);
  line-height: .86;
  letter-spacing: .005em;
  background: linear-gradient(180deg, #ffffff 0%, #e4eefc 45%, #a9c7f0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 18px 40px rgba(8, 20, 50, .35));
}
.book__subtitle {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-image: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.book__byline {
  margin-bottom: 30px;
  font: 600 .74rem/1.5 var(--font-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mist);
}
.book__byline strong { color: var(--ivory); font-weight: 700; }
.book__teaser {
  max-width: 40em;
  margin-bottom: 30px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--mist-strong);
}
.book__teaser::first-letter {
  float: left;
  margin: .06em .1em 0 0;
  font-family: var(--font-display);
  font-size: 4.1em;
  line-height: .78;
  color: var(--gold-light);
}
.book__teaser em { font-family: var(--font-display); font-size: 1.15em; color: var(--gold-pale); }
.book__teaser cite { color: var(--ivory); }

.themes-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-bottom: 30px;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--gold-pale);
}
.themes-inline li { display: inline-flex; align-items: center; gap: 22px; }
.themes-inline li + li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.accordion { margin-bottom: 36px; border-top: 1px solid rgba(230, 205, 146, .3); }
.acc { border-bottom: 1px solid rgba(230, 205, 146, .3); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--ivory);
  transition: color .3s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--gold-light); }
.acc summary i {
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hair-gold-strong);
}
.acc summary i::before,
.acc summary i::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1px;
  background: var(--gold-light);
  translate: -50% -50%;
  transition: transform .5s var(--ease-out);
}
.acc summary i::after { transform: rotate(90deg); }
.acc[open] summary i::after { transform: rotate(0deg); }
.acc__body { overflow: hidden; }
.acc__body > * { margin-bottom: 24px; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.details div { padding-bottom: 12px; border-bottom: 1px dashed rgba(230, 205, 146, .25); }
.details dt { font: 600 .64rem/1.5 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); }
.details dd { margin: 0; font-size: 1rem; color: var(--ivory); }

.book__actions { display: flex; flex-wrap: wrap; gap: 14px; }


/* 13. KEY THEMES (near-black with gold) =================================== */
.themes {
  position: relative;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(201, 164, 92, .12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 0%, rgba(31, 75, 156, .18), transparent 70%),
    linear-gradient(180deg, #050913 0%, #02050c 100%);
  border-top: 1px solid rgba(201, 164, 92, .25);
}
.themes__pin {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
}
.themes.is-pinned .themes__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h-min) + clamp(24px, 4vh, 48px)) 0 clamp(28px, 5vh, 56px);
}
.themes__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: clamp(28px, 4.5vh, 56px);
}
.themes__head .section-title { margin: 0; }
.themes__progress {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--mist);
}
.themes__count { font-size: 2.2rem; line-height: 1; color: var(--gold-light); }
.themes__bar {
  position: relative;
  width: 140px; height: 1px;
  margin-left: 16px;
  background: rgba(201, 164, 92, .22);
}
.themes__bar span {
  position: absolute; inset: 0;
  background: var(--gold-grad);
  transform-origin: left;
  transform: scaleX(.25);
  transition: transform .3s linear;
}
.themes__viewport { flex: 1; min-height: 0; }
.themes__track {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  height: 100%;
  list-style: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  outline: none;
}
.themes.is-pinned .themes__track { width: max-content; will-change: transform; }
.theme-panel {
  position: relative;
  flex: 0 0 min(72vw, 980px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
  gap: 32px;
  min-height: 460px;
  padding: clamp(30px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(201, 164, 92, .24);
  background: linear-gradient(140deg, rgba(22, 49, 107, .45) 0%, rgba(4, 8, 18, .6) 70%);
  transition: border-color .6s, box-shadow .8s var(--ease-out);
}
.theme-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(201, 164, 92, .16), transparent 70%);
  opacity: .6;
  transition: opacity .8s;
}
.theme-panel:hover { border-color: rgba(201, 164, 92, .55); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.theme-panel:hover::before { opacity: 1; }
.theme-panel__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 8.5rem);
  font-weight: 400;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 205, 146, .75);
}
.theme-panel h3 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
}
.theme-panel p { max-width: 30ch; margin: 0; font-size: 1.1rem; line-height: 1.7; color: var(--mist); }
.theme-panel__art {
  align-self: center;
  justify-self: center;
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: .7;
  opacity: .88;
}
.theme-panel__art g { transform-box: view-box; transform-origin: 50% 50%; transition: transform 1.8s var(--ease-out); }
.theme-panel__art .art-core { fill: var(--gold); stroke: none; filter: drop-shadow(0 0 8px rgba(243, 226, 176, .9)); }
.theme-panel__art .art-faint { stroke: rgba(230, 205, 146, .3); }
.theme-panel__art .art-horizon { stroke: rgba(230, 205, 146, .45); }
.theme-panel__art .art-star { fill: rgba(201, 164, 92, .12); stroke: var(--gold-light); }
.theme-panel__art .art-core-line { stroke: var(--gold); stroke-width: 1.2; }
.art-rings { animation: spin 90s linear infinite; }
.theme-panel:hover .art-rays { transform: scale(1.06); }
.theme-panel:hover .art-compass { transform: rotate(30deg); }
.theme-panel:hover .art-morph { transform: rotate(-22deg) scale(1.04); }
.theme-panel__word {
  position: absolute; z-index: -1;
  right: -.04em; bottom: -.2em;
  font-family: var(--font-impact);
  font-size: clamp(6rem, 12vw, 12rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 164, 92, .09);
  white-space: nowrap;
  pointer-events: none;
}


/* 14. PRAISE (champagne gold) ============================================= */
.praise {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-y) 0;
  text-align: center;
  color: var(--navy-900);
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(160, 124, 56, .25), transparent 70%),
    linear-gradient(155deg, #f6ebcf 0%, #ead5a3 48%, #dcc184 100%);
}
.praise .thread { background: linear-gradient(180deg, var(--navy-800), rgba(10, 26, 61, 0)); }
.praise .thread::before { background: var(--navy-900); box-shadow: none; }
.praise__mark {
  position: absolute; left: 50%; top: -.12em; z-index: -1;
  translate: -50% 0;
  font-family: var(--font-display);
  font-size: clamp(20rem, 34vw, 34rem);
  line-height: 1;
  background-image: linear-gradient(180deg, rgba(10, 26, 61, .16), rgba(10, 26, 61, 0) 70%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.praise .eyebrow,
.praise .eyebrow__num { color: var(--navy-800); }
.praise .section-title em,
.praise .section-title em .word__inner { background-image: var(--royal-text); }
.praise__lead { max-width: 34em; margin-inline: auto; color: #3a3f55; }
.prompts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  max-width: 1040px;
  margin: clamp(40px, 5vw, 60px) auto clamp(40px, 5vw, 56px);
  list-style: none;
  text-align: left;
}
.prompts li {
  position: relative;
  padding: 30px 28px 32px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 1.3;
  color: var(--navy-900);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(10, 26, 61, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 30px 50px -40px rgba(60, 40, 10, .5);
  transition: transform .7s var(--ease-out), background-color .4s;
}
.prompts li::after {
  content: "";
  position: absolute; left: 28px; bottom: 0;
  width: 44px; height: 2px;
  background: var(--navy-800);
  transition: width .7s var(--ease-out);
}
.prompts li:hover { transform: translateY(-6px); background-color: rgba(255, 255, 255, .75); }
.prompts li:hover::after { width: calc(100% - 56px); }
.prompts span {
  display: block;
  margin-bottom: 14px;
  font: 700 .7rem/1 var(--font-sans);
  letter-spacing: .24em;
  color: var(--gold-ink);
}


/* 15. EVENTS (navy with an ivory ticket) ================================== */
.events {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 50% 60% at 75% 50%, rgba(63, 111, 194, .28), transparent 70%),
    radial-gradient(ellipse 40% 40% at 0% 0%, rgba(201, 164, 92, .12), transparent 70%),
    linear-gradient(180deg, #071330 0%, #0a1a3d 100%);
}
.events__lines {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    repeating-linear-gradient(90deg, rgba(201, 164, 92, .08) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(201, 164, 92, .06) 0 1px, transparent 1px 120px);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000, transparent 75%);
}
.events__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.events__theme {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--gold-pale);
}

/* Animated gold border + ticket notches */
.invite-wrap {
  --notch: 16px;
  --stub: 240px;
  position: relative;
  padding: 1px;
  background: conic-gradient(from var(--angle), rgba(201, 164, 92, .25), #f3e2b0, rgba(201, 164, 92, .25) 30%, rgba(201, 164, 92, .25) 50%, #e6cd92 70%, rgba(201, 164, 92, .25));
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .45));
}
@keyframes borderSpin { to { --angle: 360deg; } }
/* Animated gold borders repaint every frame, so they only run while on screen
   (script.js toggles .is-animating with an IntersectionObserver). */
.invite-wrap.is-animating { animation: borderSpin 8s linear infinite; }
.signed-wrap.is-animating { animation: borderSpin 7s linear infinite; }
.invite {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 60% at 0% 0%, rgba(201, 164, 92, .14), transparent 70%),
    linear-gradient(160deg, #fdfbf6, #f5efe3);
}
.invite__main {
  position: relative;
  padding: clamp(36px, 4.6vw, 64px);
  border-right: 2px dashed rgba(10, 26, 61, .16);
}
.invite__main::after {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(160, 124, 56, .3);
  pointer-events: none;
}
.invite__script {
  margin: 0 0 4px;
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1.2;
  color: var(--gold-deep);
}
.invite__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--navy-900);
}
.invite__theme {
  margin-bottom: 22px;
  font: 700 .72rem/1.5 var(--font-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.invite__desc { max-width: 46ch; color: var(--ink-soft); }
.invite__desc + .btn { margin-top: 12px; }
/* Event details grid (add <dl class="invite__details"> when confirmed) */
.invite__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 30px;
  margin: 28px 0 34px;
}
.invite__details div { padding-top: 14px; border-top: 1px solid var(--hair-ink); }
.invite__details dt { font: 700 .64rem/1.4 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.invite__details dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--navy-900); }
.invite__stub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 40px 24px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(110, 160, 230, .32), transparent 70%),
    linear-gradient(180deg, #0f2452, #0a1a3d);
  color: var(--ivory);
}
.invite__stub-label { font: 700 .64rem/1.4 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); }
.invite__stub-who {
  font-family: var(--font-impact);
  font-size: 4.2rem;
  line-height: 1;
  background-image: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.invite__stub-sub { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--mist); }
.invite__stub img {
  width: 110px;
  margin-top: 22px;
  transform: rotate(-7deg);
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .7);
  transition: transform .8s var(--ease-out);
}
.invite:hover .invite__stub img { transform: rotate(-2deg) translateY(-6px) scale(1.04); }


/* 16. MEDIA GALLERY & LIGHTBOX (clean white) ============================== */
.media {
  --curtain: var(--paper);
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background:
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(188, 213, 242, .35), transparent 70%),
    radial-gradient(ellipse 40% 40% at 0% 100%, rgba(201, 164, 92, .1), transparent 70%),
    var(--paper);
}
.media__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.media__head .section-title { margin: 0; }
.media__intro { max-width: 40ch; margin: 0 0 8px; color: var(--ink-soft); }

/* Staggered editorial gallery. Every image keeps its own proportions. */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(20px, 2.8vw, 44px);
  align-items: start;
}
.gallery__item { position: relative; margin: 0; }
.gallery__item--b { margin-top: clamp(60px, 9vw, 140px); }
.gallery__item--c { margin-top: clamp(24px, 4vw, 64px); }
.gallery__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: zoom-in;
  box-shadow: 0 30px 60px -36px rgba(10, 26, 61, .5);
  transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
}
.gallery__open img { width: 100%; height: auto; }
.gallery__open:hover,
.gallery__open:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 46px 80px -38px rgba(10, 26, 61, .6);
}
.gallery__open--book { box-shadow: 0 34px 60px -30px rgba(10, 26, 61, .65); }
.gallery__zoom {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--navy-950);
  background-image: var(--gold-grad);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: scale(.6) rotate(-90deg);
  transition: opacity .4s, transform .7s var(--ease-out);
}
.gallery__zoom svg { width: 18px; height: 18px; }
.gallery__open:hover .gallery__zoom,
.gallery__open:focus-visible .gallery__zoom { opacity: 1; transform: none; }
.gallery__cap {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 18px;
  padding-left: 14px;
  border-left: 1px solid var(--gold);
}
.gallery__cat { font: 700 .62rem/1.5 var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.gallery__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; color: var(--navy-900); }

.lightbox {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  color: var(--ivory);
  background: rgba(4, 10, 24, .94);
  opacity: 0;
  transition: opacity .35s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.lightbox__figure {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: 0;
  padding: 80px 12px 40px;
  min-width: 0;
  max-height: 100%;
}
.lightbox__media { display: grid; place-items: center; width: 100%; }
.lightbox__media img {
  max-width: min(100%, 1100px);
  max-height: calc(100dvh - 190px);
  width: auto; height: auto;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.lightbox__media iframe { width: min(100%, 1100px); aspect-ratio: 16 / 9; height: auto; border: 0; }
.lightbox__caption { font-family: var(--font-display); font-size: 1.35rem; text-align: center; color: var(--mist-strong); }
.lightbox__close,
.lightbox__nav {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(230, 205, 146, .4);
  background: rgba(10, 26, 61, .6);
  color: var(--gold-light);
  cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(201, 164, 92, .18); border-color: var(--gold-light); }
.lightbox__close { position: absolute; top: 20px; right: 20px; z-index: 2; }
.lightbox__nav { margin: 0 clamp(8px, 2vw, 28px); }
.lightbox__nav[hidden] { display: none; }


/* 17. ORDER (midnight with a gold beam) =================================== */
.order {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(201, 164, 92, .22), transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(63, 111, 194, .22), transparent 70%),
    linear-gradient(180deg, #040a18 0%, #081634 100%);
}
.order__beam {
  position: absolute; left: 50%; top: -20%; z-index: -2;
  width: 80vw; height: 100%;
  translate: -50% 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 158deg, rgba(234, 211, 154, .14) 175deg, rgba(234, 211, 154, .03) 186deg, transparent 202deg);
  pointer-events: none;
}
.order__head { max-width: 900px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.order__intro { color: var(--mist); font-size: 1.15rem; }
.order__grid { max-width: 1020px; margin-inline: auto; display: grid; gap: clamp(20px, 2.6vw, 36px); }
.order__grid--two { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.order-card {
  position: relative;
  height: 100%;
  padding: clamp(32px, 4.4vw, 64px);
  border: 1px solid rgba(230, 205, 146, .2);
  background: linear-gradient(160deg, rgba(31, 75, 156, .2), rgba(6, 15, 38, .45));
}
.order-card__index {
  display: block;
  margin-bottom: 18px;
  font: 700 .64rem/1.4 var(--font-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.order-card__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.02;
}
.order-card p { color: var(--mist); }
.order-card cite { color: var(--ivory); }
.retailers { display: grid; gap: 10px; margin: 26px 0; list-style: none; }
.retailer {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; padding: 0 20px;
  border: 1px solid rgba(230, 205, 146, .35);
  font-weight: 600;
  transition: background-color .3s, border-color .3s;
}
.retailer:hover { background: rgba(201, 164, 92, .1); border-color: var(--gold-light); }
.retailer svg { width: 18px; height: 18px; color: var(--gold-light); }

/* Signed edition */
.signed-wrap {
  position: relative;
  padding: 1px;
  background: conic-gradient(from var(--angle), rgba(201, 164, 92, .3), #f3e2b0 12%, rgba(201, 164, 92, .3) 26%, rgba(201, 164, 92, .3) 50%, #e6cd92 62%, rgba(201, 164, 92, .3) 76%);
  box-shadow: 0 60px 120px -50px rgba(201, 164, 92, .4);
}
.order-card--signed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  border: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 70% at 90% 10%, rgba(201, 164, 92, .22), transparent 65%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(63, 111, 194, .28), transparent 70%),
    linear-gradient(160deg, #0f2452, #0a1a3d);
}
.order-card__ribbon {
  position: absolute; top: 26px; right: -48px;
  width: 200px;
  padding: 8px 0;
  text-align: center;
  font: 700 .6rem/1 var(--font-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--navy-950);
  background-image: var(--gold-grad);
  transform: rotate(45deg);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}
.order-card__script {
  margin: -6px 0 2px;
  font-family: var(--font-script);
  font-size: clamp(2.3rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  color: var(--gold-light) !important;
  transform: rotate(-3deg);
  transform-origin: left;
}
.signed-label {
  display: flex; align-items: center; gap: 10px;
  font: 700 .7rem/1.5 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light) !important;
}
.signed-label svg { width: 20px; height: 20px; }
.checklist { display: grid; gap: 10px; margin: 22px 0 32px; list-style: none; }
.checklist li { display: flex; align-items: center; gap: 12px; color: var(--mist-strong); }
.checklist svg { width: 18px; height: 18px; color: var(--gold); }
.order-card__visual { position: relative; perspective: 1000px; }
.order-card__visual::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 160%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 238, 255, .32), transparent 62%);
}
.order-card__visual img {
  position: relative;
  width: 100%;
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 34px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  transform: rotateY(-16deg) rotateZ(2deg);
  transition: transform 1s var(--ease-out);
}
.signed-wrap:hover .order-card__visual img { transform: rotateY(-4deg) rotateZ(0deg) translateY(-8px); }


/* 18. CONTACT & FORMS (ivory with a navy panel) =========================== */
.contact {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background:
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(201, 164, 92, .12), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, #f2ebde 100%);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.contact__intro {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4.4vw, 64px);
  color: var(--ivory);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(201, 164, 92, .22), transparent 65%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(63, 111, 194, .3), transparent 70%),
    linear-gradient(160deg, #0f2452, #071330);
  box-shadow: var(--shadow-xl);
}
.contact__intro::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(230, 205, 146, .22);
  pointer-events: none;
}
.contact .contact__intro .eyebrow,
.contact .contact__intro .eyebrow__num { color: var(--gold-light); }
.contact .contact__intro .section-title em,
.contact .contact__intro .section-title em .word__inner { background-image: var(--gold-text); }
.contact__intro .lead { color: var(--mist); }
.topics {
  display: flex; flex-wrap: wrap; gap: 10px 0;
  margin: 28px 0 0;
  list-style: none;
}
.topics li {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--ivory);
}
.topics li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  margin: 0 14px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Social links: styles kept for when profile URLs are supplied */
.social { display: flex; gap: 10px; }
.social__link {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(230, 205, 146, .35);
  color: var(--gold-light);
  transition: background-color .3s, color .3s, border-color .3s, transform .5s var(--ease-out);
}
.social__link svg { width: 19px; height: 19px; }
.social__link:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); transform: translateY(-3px); }

.form {
  position: relative;
  display: grid; gap: 22px;
  margin-top: clamp(0px, 5vw, 70px);
  padding: clamp(28px, 4vw, 56px);
  background: #fff;
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
  font: 700 .7rem/1.3 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid rgba(10, 26, 61, .22);
  border-radius: 1px;
  background: #fff;
  font-size: 1.05rem;
  color: var(--ink);
  transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%237a5a22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(10, 26, 61, .4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, .22);
}
.field__error { font-size: .86rem; font-weight: 600; color: #a3261b; }
.field__error:empty { display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #b3261e; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.form__status { margin: 0; font-size: .95rem; font-weight: 600; }
.form__status[data-state="success"] { color: #1d6b3a; }
.form__status[data-state="error"] { color: #a3261b; }


/* 19. NEWSLETTER (royal blue) ============================================= */
.newsletter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(100px, 11vw, 170px) 0;
  text-align: center;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 55% 75% at 50% 0%, rgba(200, 222, 252, .45) 0%, rgba(200, 222, 252, 0) 70%),
    linear-gradient(180deg, #1f4c9e 0%, #173d86 55%, #0f2a62 100%);
}
.newsletter__rays {
  position: absolute; left: 50%; top: 0; z-index: -1;
  width: 1400px; height: 1400px;
  margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0deg 1.2deg, rgba(255, 255, 255, 0) 1.2deg 8deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .4) 45%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .4) 45%, transparent 100%);
  animation: spin 260s linear infinite;
}
.newsletter::after {
  content: "";
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(90vw, 760px); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(230, 205, 146, .22);
  pointer-events: none;
}
.newsletter__inner { max-width: 820px; }
.newsletter__title {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.015em;
}
.newsletter__title em,
.newsletter__title em .word__inner {
  background-image: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.newsletter__text { max-width: 36em; margin: 0 auto 38px; font-size: 1.12rem; color: var(--mist-strong); }
.newsletter__form { max-width: 640px; margin: 0 auto; }
.field--inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  padding: 6px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(2, 8, 24, .7), 0 0 0 1px rgba(230, 205, 146, .4);
}
.field--inline input { border: 0; min-height: 60px; background: transparent; }
.field--inline input:focus { box-shadow: none; }
.field--inline:focus-within { box-shadow: 0 30px 70px -30px rgba(2, 8, 24, .7), 0 0 0 3px var(--gold-light); }
.field--inline .btn { min-height: 60px; }
.field--inline .field__error { grid-column: 1 / -1; padding: 8px 12px 4px; text-align: left; }
.newsletter__form .form__status { margin-top: 16px; }
.newsletter .form__status[data-state="success"] { color: #b8f0c8; }
.newsletter .form__status[data-state="error"] { color: #ffc2b8; }
.newsletter__privacy {
  max-width: 34em;
  margin: 24px auto 0;
  font-size: .9rem;
  color: var(--mist);
}
.newsletter__privacy svg { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; color: var(--gold-light); }


/* 20. FOOTER (midnight) =================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(80px, 9vw, 120px) 0 36px;
  color: var(--mist);
  background:
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(31, 75, 156, .25), transparent 70%),
    linear-gradient(180deg, #060f26, #040a18);
  border-top: 1px solid rgba(201, 164, 92, .3);
}
.footer__ghost {
  position: absolute; right: -2vw; bottom: -.2em; z-index: -1;
  font-family: var(--font-impact);
  font-size: clamp(10rem, 26vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 164, 92, .09);
  pointer-events: none;
  user-select: none;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 64px;
}
.footer__brand .wordmark__mono { margin-bottom: 22px; }
.footer__name { margin: 0 0 6px; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--ivory); }
.footer__tag { margin-bottom: 26px; }
.footer__tag cite { color: var(--gold-pale); }
.footer__heading {
  margin-bottom: 20px;
  font: 700 .66rem/1.4 var(--font-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer__col ul { display: grid; gap: 6px; list-style: none; }
.footer__col a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: var(--mist);
  transition: color .3s;
}
.footer__col a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.footer__col a:hover { color: var(--gold-light); }
.footer__col a:hover::after { transform: scaleX(1); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(201, 164, 92, .14);
  font-size: .88rem;
}
.footer__bottom p { margin: 0; }
.back-top {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font: 700 .68rem/1 var(--font-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.back-top svg { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.back-top:hover svg { transform: translateY(-4px); }


/* 21. TICKER BANDS (metallic gold) ======================================== */
.marquee {
  position: relative; z-index: 3;
  overflow: hidden;
  padding: clamp(16px, 2vw, 24px) 0;
  color: var(--navy-950);
  background-image: var(--gold-grad);
  background-size: 200% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(120, 90, 30, .4), 0 20px 40px -20px rgba(0, 0, 0, .35);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px);
  flex-shrink: 0;
  padding-right: clamp(22px, 2.6vw, 40px);
}
.marquee__group span {
  font-family: var(--font-impact);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__group .is-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--navy-950);
}
.marquee__group svg { width: clamp(14px, 1.4vw, 20px); height: clamp(14px, 1.4vw, 20px); }
@keyframes marquee { to { transform: translateX(-50%); } }


/* 22. PRAISE SLIDER (ready for approved endorsements) ===================== */
.slider { position: relative; max-width: 1060px; margin: clamp(40px, 5vw, 64px) auto 0; }
.slider__viewport { overflow: hidden; touch-action: pan-y; }
.slider__track { display: flex; transition: transform 1s var(--ease-out); }
.quote-slide { flex: 0 0 100%; margin: 0; padding: 0 clamp(4px, 5vw, 90px); transition: opacity .8s; }
.quote-slide[aria-hidden="true"] { opacity: .2; }
.quote-slide blockquote { margin: 0 0 34px; }
.quote-slide blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  line-height: 1.26;
  color: var(--navy-900);
  text-wrap: balance;
}
.quote-slide figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quote-slide figcaption::before { content: ""; width: 54px; height: 1px; margin-bottom: 14px; background: var(--navy-800); }
.quote-slide__name { font: 700 .78rem/1.4 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--navy-900); }
.quote-slide__role { font-size: .92rem; color: #3a3f55; }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.slider__btn {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(10, 26, 61, .3);
  background: transparent;
  color: var(--navy-900);
  cursor: pointer;
  transition: border-color .3s, background-color .3s, color .3s;
}
.slider__btn svg { width: 20px; height: 20px; }
.slider__btn:hover { border-color: var(--navy-900); background: var(--navy-900); color: var(--gold-light); }
.slider__dots { display: flex; align-items: center; gap: 4px; }
.slider__dots button { position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.slider__dots button::before {
  content: "";
  position: absolute; left: 8px; right: 8px; top: 50%;
  height: 2px;
  background: rgba(10, 26, 61, .2);
  transition: background-color .4s;
}
.slider__dots button[aria-current="true"]::before { background: var(--navy-900); }


/* 23. MOTION: LOAD + REVEAL =============================================== */
/* Content is only hidden while JS is running (.js on <html>). */
.js [data-load] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* 3D book entrance: the book swings in from edge-on. Only the book's own body and
   faces animate; animating an ancestor's opacity/transform would flatten the 3D scene. */
.js [data-book-enter] .book3d__face { opacity: 0; transition: opacity 1.3s ease var(--d, 0s); }
.js [data-book-enter].is-in .book3d__face { opacity: 1; }
.js [data-book-enter].is-in .book3d__body { animation: bookEnter 2.2s var(--ease-out) var(--d, 0s) backwards; }
@keyframes bookEnter {
  from { transform: translate3d(0, 60px, -180px) rotateX(14deg) rotateY(-82deg); }
}
.js .rotor[data-load] { transform: scale(.6) rotate(-40deg); }
.js .is-loaded [data-load] { opacity: 1; transform: none; }
.js .hero__title .line > span {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .is-loaded .hero__title .line > span { transform: none; }
.js .hero__halo { opacity: 0; }
.js .is-loaded .hero__halo { opacity: .88; transition: opacity 2.4s ease .3s; }

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1s var(--ease-out), transform 1.25s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="rise"] { transform: translate3d(0, 80px, 0) scale(.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Image "mask" reveal: a curtain in the section's colour wipes upward.
   The element itself is never clipped (so IntersectionObserver can see it)
   and the image is never scaled or cropped. */
.js [data-reveal="mask"] { opacity: 1; transform: none; }
.js [data-reveal="mask"]::after {
  content: "";
  position: absolute; inset: -2px;
  z-index: 6;
  background: var(--curtain, var(--ivory));
  transform-origin: 50% 0%;
  transition: transform 1.4s var(--ease-io);
  transition-delay: var(--d, 0s);
  pointer-events: none;
}
.js [data-reveal="mask"].is-in::after { transform: scaleY(0); }
.js .about__figure[data-reveal="mask"]::after { inset: -26px -4px -4px -26px; }

.js .thread { transform: scaleY(0); transition: transform 1.6s var(--ease-out); }
.js .thread.is-in { transform: scaleY(1); }

/* Split-word headline reveal */
.word { display: inline-block; }
.word__inner { display: inline-block; }
.js [data-split] .word {
  overflow: hidden;
  vertical-align: top;
  padding: .06em .05em .14em;
  margin: -.06em -.05em -.14em;
}
.js [data-split] .word__inner {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms + var(--d, 0s));
}
.js [data-split].is-in .word__inner { transform: none; }


/* 24. RESPONSIVE ========================================================== */
@media (max-width: 1240px) {
  .primary-nav ul { gap: 16px; }
  .primary-nav a { letter-spacing: .14em; }
}

@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .menu-toggle { display: block; }
  .header-cta { margin-left: 0; }
  .site-header__inner { gap: 14px; }
}

@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  :root { --header-h: 80px; --header-h-min: 68px; --dome: 80px; }

  /* Hero: book on top, copy below, centred like a cover */
  .hero__grid { grid-template-columns: 1fr; gap: 8px; }
  .hero__visual { order: -1; min-height: clamp(400px, 62vw, 520px); }
  .hero__copy { max-width: 680px; margin: 0 auto; text-align: center; }
  .hero__eyebrow, .hero__actions { justify-content: center; }
  .hero__lede { margin-inline: auto; }
  .hero__author { margin-inline: auto; justify-content: center; text-align: left; }
  .hero__ghost { right: 50%; top: 0; margin: 0; translate: 50% var(--py, 0px); font-size: clamp(11rem, 40vw, 22rem); }
  .hero__rays { left: 50%; top: 26%; }
  .book3d--hero { --bw: clamp(200px, 32vw, 280px); }
  .rotor { width: 104px; height: 104px; right: 6%; bottom: 6%; }
  .rotor__core { width: 42px; height: 42px; }
  .scroll-cue { display: none; }

  /* About */
  .about__figure { grid-column: 1 / 9; }
  .about__panel { grid-column: 4 / 13; margin-top: clamp(300px, 56vw, 520px); }
  .about__vertical { display: none; }

  /* Book */
  .book__grid { grid-template-columns: 1fr; }
  .book__stage { min-height: clamp(460px, 70vw, 600px); }
  .book__content { max-width: 720px; }

  /* Themes become a swipeable rail */
  .themes__pin { padding: var(--section-y) 0; }
  .themes__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .themes__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
    scroll-padding-inline: var(--gutter);
  }
  .themes__track::-webkit-scrollbar { display: none; }
  .theme-panel {
    flex-basis: min(84vw, 640px);
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 520px;
    scroll-snap-align: start;
  }
  .theme-panel__art { order: -1; justify-self: start; width: 150px; }

  /* Praise */
  .prompts { grid-template-columns: 1fr; max-width: 560px; }

  /* Events */
  .events__grid { grid-template-columns: 1fr; }
  .events__head { max-width: 640px; }

  /* Media */
  .media__head { grid-template-columns: 1fr; gap: 16px; }

  /* Order */
  .order__grid--two { grid-template-columns: 1fr; }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; }
  .form { margin-top: 0; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --dome: 48px; }
  body { font-size: 1.03rem; }

  .wordmark__mono { width: 40px; height: 40px; font-size: 1.08rem; }
  .wordmark__name { font-size: 1.22rem; }
  .wordmark__title { font-size: .54rem; }
  .header-cta { display: none; }

  .btn { --btn-h: 56px; padding: 0 24px; }
  .hero__actions .btn,
  .book__actions .btn { flex: 1 1 100%; }

  .hero { padding-top: calc(var(--header-h) + 8px); }
  .hero__visual { min-height: 400px; }
  .hero__title { font-size: clamp(2.9rem, 13vw, 4.2rem); }
  .hero__lines { display: none; }
  .book3d--hero { --bw: min(56vw, 230px); }
  .rotor { width: 92px; height: 92px; right: 0; bottom: 4%; }
  .rotor text { font-size: 7.9px; }
  .rotor__core { width: 38px; height: 38px; }
  .hero__author { max-width: none; }

  .statement { border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; }

  /* About: portrait with an overlapping card */
  .about__grid { display: block; }
  .about__figure { margin: 0 12px 0 0; }
  .about__figure::before { top: -12px; left: -12px; right: 12px; }
  .about__panel { margin: 28px 0 0 12px; padding: 30px 24px; }
  .about__panel::before { display: none; }
  .meta { grid-template-columns: 1fr; gap: 14px; }

  .book__stage { min-height: 440px; }
  .book3d--feature { --bw: min(58vw, 240px); }
  .book__tag { bottom: 0; }
  .book__who { font-size: clamp(5.4rem, 28vw, 8rem); }
  .details { grid-template-columns: 1fr; }

  .theme-panel { min-height: 480px; padding: 28px 24px; }
  .theme-panel__art { width: 120px; }

  .praise__mark { font-size: 18rem; }

  /* Ticket becomes a vertical pass with the stub on top */
  .invite-wrap { -webkit-mask: none; mask: none; }
  .invite { grid-template-columns: 1fr; }
  .invite__stub {
    order: -1;
    align-items: flex-start;
    padding: 26px 110px 26px 24px;
    text-align: left;
  }
  .invite__stub-who { font-size: 3rem; }
  .invite__stub img { position: absolute; right: 22px; top: 50%; width: 64px; margin: 0; translate: 0 -50%; }
  .invite__main { border-right: 0; border-top: 2px dashed rgba(10, 26, 61, .16); padding: 36px 24px; }
  .invite__main::after { inset: 8px; }
  .invite__details { grid-template-columns: 1fr; gap: 12px; }

  /* Gallery: portrait full width, cover and moment side by side */
  .gallery { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .gallery__item--a { grid-column: 1 / -1; }
  .gallery__item--b,
  .gallery__item--c { margin-top: 0; }
  .gallery__title { font-size: 1.12rem; }
  .gallery__zoom { display: none; }

  .order-card--signed { grid-template-columns: 1fr; }
  .order-card__visual { order: -1; width: 160px; margin: 10px auto 6px; }
  .order-card__ribbon { top: 20px; right: -58px; }

  .form__row { grid-template-columns: 1fr; }
  .field--inline { grid-template-columns: 1fr; gap: 6px; }
  .field--inline .btn { width: 100%; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; bottom: 20px; width: 52px; height: 52px; }
  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { left: calc(50% + 12px); }
  .lightbox__figure { padding: 76px 12px 96px; }
}

@media (max-width: 340px) {
  .wordmark__text { display: none; }
}

@media (max-width: 420px) {
  .wordmark { gap: 10px; }
  .wordmark__name { font-size: 1.12rem; }
  .hero__title { font-size: clamp(2.6rem, 12.6vw, 3.4rem); }
  .footer__top { grid-template-columns: 1fr; }
}


/* 25. REDUCED MOTION ====================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-load], .js [data-reveal], .js .thread,
  .js [data-split] .word__inner,
  .js .hero__title .line > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .hero__halo { opacity: .88; }
  .js .orbit-draw { stroke-dashoffset: 0; }
  .js [data-book-enter] .book3d__face { opacity: 1 !important; }
  .js [data-reveal="mask"]::after { display: none; }
  .parallax { translate: none !important; }
  .statement.is-scrub .word__inner { opacity: 1 !important; }
  .hero__particles { display: none; }
  .marquee__track { animation: none !important; }
}