/* =========================================================================
   All God’s Kids — Joe Hartwell
   main.css · design tokens, base typography, layout and components
   Breakpoint overrides live in responsive.css, motion in animations.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
  /* Palette drawn from the cover artwork: the navy of the title, the ivory
     sky, the stone of the church, the gold rule beneath the title, and the
     muted green of the trees behind the family. */
  --navy-900: #0c1526;
  --navy-800: #12203c;
  --navy-700: #1b3059;
  --navy-600: #24406f;
  --navy-500: #35547f;

  --ink:      #191c22;
  --ink-soft: #3d434e;
  --ink-mute: #6b7280;

  --ivory:      #f8f4ec;
  --paper:      #fdfbf7;
  --stone-100:  #f0eae0;
  --stone-200:  #e5ddd0;
  --stone-300:  #d5cabb;
  --stone-400:  #b9ac99;
  --stone-500:  #94856f;

  --gold:       #a9813d;
  --gold-light: #c9a568;
  --gold-pale:  #e6d5b4;

  --green:      #4a5a40;
  --green-deep: #313d2b;

  --white: #ffffff;

  /* Semantic assignments */
  --bg:            var(--paper);
  --bg-alt:        var(--ivory);
  --bg-deep:       var(--navy-800);
  --text:          var(--ink);
  --text-soft:     var(--ink-soft);
  --text-mute:     var(--ink-mute);
  --text-on-deep:  #e9e3d8;
  --rule:          var(--stone-300);
  --rule-soft:     rgba(148, 133, 111, 0.22);
  --rule-on-deep:  rgba(201, 165, 104, 0.32);
  --accent:        var(--gold);

  --focus: var(--gold-light);

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-quote:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero:    clamp(3rem, 1.6rem + 6.2vw, 7.25rem);
  --fs-display: clamp(2.1rem, 1.45rem + 2.6vw, 3.5rem);
  --fs-h1:      clamp(1.95rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.85vw, 1.85rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-lead:    clamp(1.075rem, 1rem + 0.5vw, 1.35rem);
  --fs-body:    clamp(1rem, 0.965rem + 0.16vw, 1.075rem);
  --fs-small:   0.875rem;
  --fs-label:   0.72rem;

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.72;

  --tracking-label: 0.2em;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 3rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;
  --section-y: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);

  /* Containers */
  --w-full:   1600px;
  --w-wide:   1360px;
  --w-page:   1180px;
  --w-text:   68ch;
  --w-narrow: 52ch;
  --gutter:   clamp(1.25rem, 0.6rem + 2.6vw, 4rem);

  /* Radii — kept minimal; this is an editorial surface, not a card deck */
  --r-sm: 2px;
  --r-md: 3px;
  --r-pill: 100px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(12, 21, 38, 0.05),
               0 4px 14px rgba(12, 21, 38, 0.05);
  --shadow-md: 0 2px 6px rgba(12, 21, 38, 0.06),
               0 16px 40px rgba(12, 21, 38, 0.09);
  --shadow-lg: 0 4px 12px rgba(12, 21, 38, 0.08),
               0 30px 70px rgba(12, 21, 38, 0.16);
  --shadow-book: 22px 30px 60px rgba(12, 21, 38, 0.28),
                 6px 8px 18px rgba(12, 21, 38, 0.16);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 620ms;
  --t-reveal: 900ms;

  /* Layers */
  --z-base: 1;
  --z-decor: 2;
  --z-sticky: 40;
  --z-header: 60;
  --z-overlay: 80;
  --z-top: 100;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* iOS Safari ignores overflow-x on body alone, so sideways reveal motion
     could still pan the page. clip (unlike hidden) keeps position: sticky. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

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

video,
iframe,
embed,
object { max-width: 100%; }

/* Inline SVG icons default to the current text size; contexts that need a
   different size (buttons, social links, share row) override this. */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

img { height: auto; }

a {
  color: inherit;
  text-decoration-color: var(--rule-soft);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl) { margin: 0; }

ul, ol { padding: 0; list-style: none; }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--sp-7) 0;
}

::selection {
  background: var(--navy-700);
  color: var(--stone-100);
}

/* Focus — always visible, never removed */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-deep :focus-visible,
.site-footer :focus-visible,
.site-header--solid :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-top);
  padding: 0.85rem 1.4rem;
  background: var(--navy-800);
  color: var(--stone-100);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); }

.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;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  color: var(--navy-800);
  text-wrap: balance;
}

.t-hero    { font-size: var(--fs-hero);    line-height: var(--lh-tight); letter-spacing: -0.028em; }
.t-display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.022em; }
.t-h1      { font-size: var(--fs-h1); }
.t-h2      { font-size: var(--fs-h2); }
.t-h3      { font-size: var(--fs-h3); }
.t-h4      { font-size: var(--fs-h4); }

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-soft);
  font-weight: 350;
}

.t-body { max-width: var(--w-text); }
.t-body p + p { margin-top: 1.15em; }

.t-mute  { color: var(--text-mute); }
.t-soft  { color: var(--text-soft); }
.t-serif { font-family: var(--font-display); }
.t-italic{ font-style: italic; }

/* Small uppercase editorial label with a gold tick */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-500);
}
.label--center { justify-content: center; }
.on-deep .label { color: var(--gold-pale); }

/* Oversized editorial section numeral */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.5rem + 3vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--stone-400);
  letter-spacing: -0.02em;
}
.on-deep .numeral { -webkit-text-stroke-color: rgba(201, 165, 104, 0.45); }

/* Fine gold rule used to close sections and separate blocks */
.rule-gold {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--gold-pale) 12%, var(--gold) 50%, var(--gold-pale) 88%, transparent);
  opacity: 0.85;
}
.rule-gold--short { width: 5.5rem; margin-inline: 0; }
.rule-gold--center { margin-inline: auto; }

/* Ornament: fine rule with a small cross, echoing the cover */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--gold);
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: clamp(2.5rem, 8vw, 7rem);
  background: linear-gradient(90deg, transparent, currentColor);
}
.ornament::after { background: linear-gradient(90deg, currentColor, transparent); }
.ornament svg { width: 13px; height: 17px; flex: none; }

/* -------------------------------------------------------------------------
   4. Layout
   ---------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--w-wide); }
.container--full { max-width: var(--w-full); }
.container--text { max-width: calc(var(--w-text) + var(--gutter) * 2); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--paper { background: var(--paper); }
.section--ivory { background: var(--bg-alt); }
.section--stone { background: var(--stone-100); }

.section--deep {
  background: var(--navy-800);
  color: var(--text-on-deep);
}
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4 { color: var(--stone-100); }
.section--deep .t-lead,
.section--deep .t-soft { color: rgba(233, 227, 216, 0.78); }
.section--deep .t-mute { color: rgba(233, 227, 216, 0.6); }

/* -------------------------------------------------------------------------
   Dark surfaces
   Every navy panel on the site inherits the same text treatment from one
   place, so a new dark section can never end up with dark-on-dark copy.
   ---------------------------------------------------------------------- */

.section--deep,
.page-hero,
.buy-hero,
.hero,
.error-page,
.newsletter,
.site-footer,
.on-deep { color: var(--text-on-deep); }

.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
.buy-hero h1, .buy-hero h2, .buy-hero h3, .buy-hero h4,
.hero h1, .hero h2, .hero h3,
.error-page h1, .error-page h2,
.newsletter h2, .newsletter h3,
.on-deep h2, .on-deep h3 { color: var(--stone-100); }

.section--deep .t-lead, .page-hero .t-lead, .buy-hero .t-lead,
.hero .t-lead, .error-page .t-lead, .newsletter .t-lead, .on-deep .t-lead,
.section--deep .t-soft, .page-hero .t-soft, .buy-hero .t-soft,
.error-page .t-soft, .newsletter .t-soft, .on-deep .t-soft,
.section--deep p, .buy-hero p, .page-hero p { color: rgba(233, 227, 216, 0.82); }

.section--deep .t-mute, .page-hero .t-mute, .buy-hero .t-mute,
.error-page .t-mute, .newsletter .t-mute, .on-deep .t-mute { color: rgba(233, 227, 216, 0.58); }

.section--deep .label, .page-hero .label, .buy-hero .label,
.hero .label, .error-page .label, .newsletter .label,
.on-deep .label, .site-footer .label { color: var(--gold-pale); }

.section--deep .numeral, .page-hero .numeral, .buy-hero .numeral,
.error-page .numeral, .on-deep .numeral { -webkit-text-stroke-color: rgba(201, 165, 104, 0.5); }

.section--deep a:not(.btn):not(.card__link),
.buy-hero a:not(.btn),
.newsletter a:not(.btn),
.error-page a:not(.btn) { color: var(--gold-pale); }

/* Section headers */
.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .label { margin-bottom: 1.25rem; }
.section-head .t-lead { margin-top: 1.15rem; }

/* Generic editorial grids */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.split--wide-left  { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split--top { align-items: start; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* -------------------------------------------------------------------------
   5. Background decoration
   Subtle, book-related, always behind content and never interactive.
   ---------------------------------------------------------------------- */

.decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-base);
}
.decor > * { position: absolute; }
.section > .container { position: relative; z-index: var(--z-decor); }

/* Paper grain applied to light sections */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.section--deep.grain::after { mix-blend-mode: overlay; opacity: 0.35; }

/* Ghosted oversized letter or word behind a section */
.decor-word {
  font-family: var(--font-display);
  font-size: clamp(11rem, 34vw, 30rem);
  line-height: 0.78;
  font-weight: 500;
  color: var(--stone-200);
  opacity: 0.5;
  user-select: none;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.section--deep .decor-word { color: rgba(201, 165, 104, 0.07); opacity: 1; }

/* Fine horizontal manuscript ruling */
.decor-lines {
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2.35rem,
    var(--rule-soft) 2.35rem,
    var(--rule-soft) calc(2.35rem + 1px)
  );
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 78%);
}

/* Church-window arch outline */
.decor-arch {
  width: clamp(180px, 26vw, 420px);
  aspect-ratio: 1 / 1.85;
  border: 1px solid var(--rule-soft);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  opacity: 0.7;
}
.section--deep .decor-arch { border-color: rgba(201, 165, 104, 0.16); }

/* Soft atmospheric wash */
.decor-glow {
  width: 60vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 165, 104, 0.14), transparent 68%);
}

/* Page-edge motif: stacked sheets peeking from the side of a block */
.page-edges {
  position: relative;
  isolation: isolate;
}
.page-edges::before,
.page-edges::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  z-index: -1;
}
.page-edges::before { transform: translate(9px, 9px) rotate(0.7deg); }
.page-edges::after  { transform: translate(18px, 18px) rotate(1.4deg); opacity: 0.55; }

/* -------------------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: var(--stone-100);
  --btn-bd: var(--navy-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.02rem 1.9rem;
  min-height: 3.25rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.btn > * { position: relative; z-index: 1; }

.btn .btn-arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(0.28em); }

.btn:hover {
  --btn-bg: var(--navy-700);
  --btn-bd: var(--navy-700);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Secondary — restrained outline */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--stone-400);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--navy-800);
  box-shadow: none;
}
/* Any dark surface flips the outline button to a light treatment */
.on-deep .btn--ghost,
.section--deep .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.buy-hero .btn--ghost,
.error-page .btn--ghost,
.newsletter .btn--ghost,
.mobile-nav .btn--ghost,
.site-footer .btn--ghost {
  --btn-fg: var(--stone-100);
  --btn-bd: rgba(233, 227, 216, 0.55);
}
.on-deep .btn--ghost:hover,
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.buy-hero .btn--ghost:hover,
.error-page .btn--ghost:hover,
.newsletter .btn--ghost:hover,
.mobile-nav .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  --btn-fg: var(--navy-900);
  --btn-bg: var(--stone-100);
  --btn-bd: var(--stone-100);
}
/* Solid primary buttons need a lighter fill on navy, or they vanish */
.hero .btn:not(.btn--ghost):not(.btn--buy),
.page-hero .btn:not(.btn--ghost):not(.btn--buy),
.buy-hero .btn:not(.btn--ghost):not(.btn--buy),
.section--deep .btn:not(.btn--ghost):not(.btn--buy),
.error-page .btn:not(.btn--ghost):not(.btn--buy) {
  --btn-bg: var(--stone-100);
  --btn-fg: var(--navy-900);
  --btn-bd: var(--stone-100);
}
.hero .btn:not(.btn--ghost):not(.btn--buy):hover,
.page-hero .btn:not(.btn--ghost):not(.btn--buy):hover,
.buy-hero .btn:not(.btn--ghost):not(.btn--buy):hover,
.section--deep .btn:not(.btn--ghost):not(.btn--buy):hover,
.error-page .btn:not(.btn--ghost):not(.btn--buy):hover {
  --btn-bg: var(--white);
  --btn-bd: var(--white);
}

/* Purchase — the one high-visibility treatment on the site */
.btn--buy {
  --btn-bg: var(--gold);
  --btn-fg: #1b1305;
  --btn-bd: var(--gold);
  box-shadow: 0 10px 26px rgba(169, 129, 61, 0.22);
}
.btn--buy:hover {
  --btn-bg: var(--gold-light);
  --btn-bd: var(--gold-light);
  box-shadow: 0 14px 34px rgba(169, 129, 61, 0.32);
}

.btn--sm { padding: 0.72rem 1.25rem; min-height: 2.6rem; font-size: 0.7rem; letter-spacing: 0.11em; }
.btn--lg { padding: 1.2rem 2.4rem; min-height: 3.75rem; }
.btn--block { display: flex; width: 100%; }

/* Quiet inline link with an animated gold underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-800);
  padding-bottom: 0.35rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--ease-out), color var(--t-base);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(0.3em); }
.on-deep .link-arrow,
.section--deep .link-arrow { color: var(--stone-100); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
}
.btn-row--center { justify-content: center; }
.mt-9 { margin-top: var(--sp-9); }

/* -------------------------------------------------------------------------
   7. Header and navigation
   ---------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: clamp(1rem, 0.6rem + 1vw, 1.6rem);
  transition: padding var(--t-base) var(--ease-out);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--rule-on-deep);
  opacity: 0;
  transition: opacity var(--t-base);
}

/* Over a dark hero the header is transparent; on scroll it becomes solid navy */
.site-header--over { background: transparent; }
.site-header--solid,
.site-header.is-stuck {
  background: rgba(18, 32, 60, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(201, 165, 104, 0.18), 0 12px 30px rgba(12, 21, 38, 0.22);
}
.site-header.is-stuck .site-header__inner { padding-block: 0.75rem; }
.site-header.is-stuck::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-102%); }

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.22rem;
  text-decoration: none;
  color: var(--stone-100);
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.015em;
}
.brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-pale);
  font-weight: 600;
}
.brand:hover .brand__sub { color: var(--gold-light); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.3rem + 1.4vw, 2.2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 0.2rem + 1.4vw, 2rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.775rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(233, 227, 216, 0.82);
  transition: color var(--t-base) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"]::after { background: var(--gold); }

.header-cta { display: inline-flex; }

/* Burger */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.2rem 0.6rem 0.7rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--stone-100);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-toggle__bars {
  position: relative;
  width: 26px;
  height: 12px;
  flex: none;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; width: 70%; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

/* Full-screen mobile navigation */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--navy-900);
  color: var(--stone-100);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.mobile-nav.is-open { visibility: visible; opacity: 1; }
.mobile-nav__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mobile-nav__top,
.mobile-nav__body,
.mobile-nav__foot {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
}
.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.35rem;
  border-bottom: 1px solid rgba(201, 165, 104, 0.2);
}
.mobile-nav__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  overflow-y: auto;
  padding-block: 2rem;
}
.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  color: var(--stone-100);
  opacity: 0;
  transform: translateY(14px);
  transition: color var(--t-base);
}
.mobile-nav.is-open .mobile-nav__link { animation: navItemIn 620ms var(--ease-out) forwards; }
.mobile-nav__link small {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-weight: 600;
}
.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] { color: var(--gold-light); }
.mobile-nav__foot {
  padding-block: 1.75rem 2.25rem;
  border-top: 1px solid rgba(201, 165, 104, 0.2);
  display: grid;
  gap: 1rem;
}
.mobile-nav__book {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(233, 227, 216, 0.72);
  font-size: var(--fs-small);
}
.mobile-nav__book img {
  width: 46px;
  border: 1px solid rgba(201, 165, 104, 0.35);
  box-shadow: var(--shadow-sm);
}
.mobile-nav__book strong {
  display: block;
  color: var(--stone-100);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
}
.mobile-nav__decor svg {
  position: absolute;
  right: -12%;
  bottom: -8%;
  width: min(58vw, 320px);
  color: rgba(201, 165, 104, 0.16);
}
.nav-close {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: 0;
  color: var(--stone-100);
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 0;
}
.nav-close svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------------------
   8. The book object — a physical presentation built in CSS
   ---------------------------------------------------------------------- */

.book-stage {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 2000px;
}

.book {
  position: relative;
  width: min(100%, var(--book-w, 340px));
  aspect-ratio: 1224 / 1793;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, -13deg)) rotateZ(var(--rz, 0deg));
  transition: transform var(--t-slow) var(--ease-out);
  will-change: transform;
}
.book__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1px 3px 3px 1px;
  box-shadow: var(--shadow-book);
  background: var(--navy-800);
  transform: translateZ(0);
}
.book__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Gloss and the darker band along the gutter */
.book__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.30) 0, rgba(0,0,0,0.10) 1.5%, rgba(0,0,0,0) 5.5%),
    linear-gradient(105deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 34%);
}
/* Ambient contact shadow on the surface below */
.book__shadow {
  position: absolute;
  left: 6%;
  right: -6%;
  bottom: -5%;
  height: 9%;
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 21, 38, 0.34), transparent 72%);
  filter: blur(9px);
  transform: translateZ(-40px);
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow);
}
.book-stage--flat .book { transform: none; }

/* Framed flat presentation used in cards and smaller slots */
.cover-frame {
  position: relative;
  display: block;
  border: 1px solid var(--rule-soft);
  padding: 0.55rem;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.cover-frame img { box-shadow: 0 2px 8px rgba(12,21,38,0.12); }
.cover-frame--portrait { border-radius: 15px; border-color: #a9813d; }
a:hover > .cover-frame,
.card:hover .cover-frame { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* -------------------------------------------------------------------------
   9. Cards and editorial components
   ---------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
}
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--stone-200);
  aspect-ratio: 16 / 10;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-soft);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__link { display: block; text-decoration: none; }
.card__body { display: grid; gap: 0.85rem; align-content: start; }
.card__title-link {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--ease-out);
}
.card:hover .card__title-link { background-size: 100% 1px; }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-500);
}
.card__meta .dot { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }
.card__title { font-size: var(--fs-h3); }
.card:hover .card__title { color: var(--navy-600); }
.card__excerpt { color: var(--text-soft); font-size: 0.965rem; line-height: 1.68; }

/* Article card with a typographic cover when no image exists */
.card__glyph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(160deg, var(--navy-800), var(--navy-700) 62%, var(--navy-600));
  overflow: hidden;
}
.card__glyph span {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  color: rgba(201, 165, 104, 0.4);
  transition: transform var(--t-slow) var(--ease-soft);
}
.card:hover .card__glyph span { transform: scale(1.06); }
.card__glyph::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 165, 104, 0.22);
}

/* Book card (Books page) */
.book-card {
  display: grid;
  /* Matches .feature-book so every title on the Books page sits the same way */
  --book-w: min(30vw, 360px);
  grid-template-columns: var(--book-w) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(1.75rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--rule);
}
.book-card:last-child { border-bottom: 1px solid var(--rule); }
.book-card__media { position: relative; }
.book-card__media a { display: block; text-decoration: none; }
.book-card__body { display: grid; gap: 1rem; align-content: start; }
.book-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: start;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--gold-pale);
  background: rgba(201, 165, 104, 0.09);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}

/* Placeholder used wherever a genuine image has not been supplied */
.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.9rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background:
    linear-gradient(0deg, rgba(213, 202, 187, 0.16), rgba(213, 202, 187, 0.16)),
    var(--stone-100);
  border: 1px solid var(--rule-soft);
  color: var(--stone-500);
}
.placeholder::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}
.placeholder__mark { color: var(--gold); opacity: 0.75; }
.placeholder__mark svg { width: 34px; height: 44px; }
.placeholder__text {
  max-width: 26ch;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.placeholder--portrait { aspect-ratio: 4 / 5; }
.placeholder--cover { aspect-ratio: 1224 / 1793; }
.placeholder code {
  font-size: 0.82em;
  color: var(--navy-700);
  background: rgba(27, 48, 89, 0.06);
  padding: 0.08em 0.35em;
}

/* Retailer list with nothing to list yet */
.retailers-pending {
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: 1px dashed var(--stone-400);
  background: var(--stone-100);
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}
.section--deep .retailers-pending,
.on-deep .retailers-pending {
  border-color: rgba(233, 227, 216, 0.28);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(233, 227, 216, 0.8);
}

/* Empty state block */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.empty-state__mark { color: var(--gold); }
.empty-state__mark svg { width: 40px; height: 52px; }

/* Quotation */
.pull-quote {
  position: relative;
  font-family: var(--font-quote);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.65rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.36;
  color: var(--navy-800);
  text-wrap: balance;
}
.section--deep .pull-quote { color: var(--stone-100); }
.pull-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: 0.4rem;
}
.pull-quote__source {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-500);
}
.section--deep .pull-quote__source { color: var(--gold-pale); }

/* Review card */
.review {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
.review--featured {
  border-top-width: 3px;
  padding: clamp(2.25rem, 5vw, 4rem);
}
.review__quote {
  font-family: var(--font-quote);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--navy-800);
}
.review--featured .review__quote { font-size: clamp(1.45rem, 1rem + 2vw, 2.35rem); }
.review__attrib { display: grid; gap: 0.2rem; }
.review__name { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
.review__role { font-size: var(--fs-small); color: var(--text-mute); }
.review__stars { display: inline-flex; gap: 0.2rem; color: var(--gold); }
.review__stars svg { width: 15px; height: 15px; }

/* Media entry */
.media-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: 1.85rem;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
}
.media-item__type {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  min-width: 7.5rem;
}
.media-item__body { min-width: 0; }
.media-item__title { font-size: var(--fs-h4); }
.media-item:hover .media-item__title { color: var(--navy-600); }

/* Theme entries */
.theme-row {
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--rule-soft);
}
.theme-row:last-child { border-bottom: 1px solid var(--rule-soft); }
.theme-row__word {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.85rem);
  line-height: 1.1;
  color: var(--navy-800);
}
.section--deep .theme-row { border-color: rgba(233, 227, 216, 0.14); }
.section--deep .theme-row__word { color: var(--stone-100); }
.theme-row__title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 0.4rem;
}
.section--deep .theme-row__title { color: var(--gold-pale); }

/* Numbered feature list */
.numbered { display: grid; gap: 0; }
.numbered__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}
.numbered__item:last-child { border-bottom: 1px solid var(--rule-soft); }
.numbered__n {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold);
  padding-top: 0.15rem;
}

/* Accordion (formats, FAQ-style blocks) */
.accordion { border-top: 1px solid var(--rule-soft); }
.accordion__item { border-bottom: 1px solid var(--rule-soft); }
.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--navy-800);
}
.accordion__btn:hover { color: var(--navy-600); }
.accordion__index {
  display: inline-block;
  min-width: 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
  vertical-align: middle;
}
.accordion__icon {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
  color: var(--gold);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base);
}
.accordion__icon::before { inset: 6px 0 auto 0; height: 1.5px; }
.accordion__icon::after  { inset: 0 6px auto 6px; width: 1.5px; height: 14px; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); opacity: 0; }
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--t-base) var(--ease-out);
}
.accordion__inner { padding-bottom: 1.5rem; color: var(--text-soft); max-width: var(--w-text); }

/* Format availability list */
.formats { display: grid; gap: 0; }
.format-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule-soft);
}
.format-row:first-child { border-top: 1px solid var(--rule-soft); }
.format-row__name { font-weight: 600; }
.format-row__state {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.format-row__state--yes { color: var(--green); }
.format-row__state--no  { color: var(--stone-500); }

/* Retailer buttons */
.retailers { display: grid; gap: 0.75rem; }
.retailer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  border: 1px solid var(--stone-300);
  background: var(--paper);
  text-decoration: none;
  color: var(--navy-800);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color var(--t-base), background-color var(--t-base),
              transform var(--t-fast) var(--ease-out);
}
.retailer:hover {
  border-color: var(--navy-800);
  background: var(--white);
  transform: translateY(-2px);
}
.retailer svg { width: 1rem; height: 1rem; color: var(--gold); }

/* Sticky purchase bar */
.buy-bar {
  position: fixed;
  z-index: var(--z-sticky);
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translate(-50%, 140%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: min(100% - 2rem, 40rem);
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background: rgba(18, 32, 60, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 165, 104, 0.28);
  box-shadow: 0 18px 44px rgba(12, 21, 38, 0.34);
  color: var(--stone-100);
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base);
}
.buy-bar.is-visible { transform: translate(-50%, 0); }
.buy-bar__cover { width: 40px; flex: none; box-shadow: var(--shadow-sm); }
.buy-bar__text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.buy-bar__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buy-bar__sub {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-pale);
  font-weight: 600;
}
.buy-bar__close {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: none;
  border: 0;
  color: rgba(233, 227, 216, 0.6);
  cursor: pointer;
  transition: color var(--t-fast);
}
.buy-bar__close:hover { color: var(--white); }
.buy-bar__close svg { width: 13px; height: 13px; }

/* -------------------------------------------------------------------------
   10. Forms
   ---------------------------------------------------------------------- */

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; }
.field__label {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--stone-500);
}
.field__req { color: var(--gold); }
.field__hint { font-size: var(--fs-small); color: var(--text-mute); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}
.textarea { min-height: 11rem; resize: vertical; line-height: 1.65; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a9813d' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px 8px;
  padding-right: 2.75rem;
}
.input::placeholder,
.textarea::placeholder { color: var(--stone-400); }
.input:hover,
.textarea:hover,
.select:hover { border-color: var(--stone-400); }
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(27, 48, 89, 0.12);
  background: var(--white);
}
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: #97341f;
  box-shadow: 0 0 0 3px rgba(151, 52, 31, 0.1);
}
.field__error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #8a2f1c;
}
.field__error svg { width: 14px; height: 14px; flex: none; }
.field__error:empty { display: none; }

/* Honeypot — hidden from people, reachable by naive bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note {
  display: grid;
  gap: 0.5rem;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--gold);
  background: rgba(201, 165, 104, 0.08);
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-note--ok { border-left-color: var(--green); background: rgba(74, 90, 64, 0.08); }
.form-note--bad { border-left-color: #97341f; background: rgba(151, 52, 31, 0.07); }
.form-note strong { display: block; font-size: 1.02rem; }

/* Newsletter block */
.newsletter {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--navy-800);
  color: var(--text-on-deep);
  position: relative;
  overflow: hidden;
}
.newsletter h2 { color: var(--stone-100); }
.newsletter__body { position: relative; z-index: var(--z-decor); }
.newsletter .t-lead { color: rgba(233, 227, 216, 0.8); }
.newsletter .t-mute { color: rgba(233, 227, 216, 0.55); }
.newsletter .label { color: var(--gold-pale); }
.newsletter a { color: var(--gold-pale); }
.newsletter__form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.newsletter__form .input {
  flex: 1 1 15rem;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(233, 227, 216, 0.28);
  color: var(--stone-100);
}
.newsletter__form .input::placeholder { color: rgba(233, 227, 216, 0.5); }
.newsletter__form .input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(201, 165, 104, 0.18);
  color: var(--white);
}

/* -------------------------------------------------------------------------
   11. Page furniture
   ---------------------------------------------------------------------- */

/* Inner-page hero */
.page-hero {
  position: relative;
  padding-top: clamp(6rem, 4.75rem + 3vw, 7.5rem);
  padding-bottom: clamp(1.75rem, 1.25rem + 1.8vw, 3rem);
  background: var(--navy-800);
  color: var(--text-on-deep);
  overflow: hidden;
}
.page-hero h1 { color: var(--stone-100); }
.page-hero .t-lead { color: rgba(233, 227, 216, 0.8); }
.page-hero__inner { position: relative; z-index: var(--z-decor); max-width: 54rem; }
.page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; }
.page-hero--center .label { justify-content: center; }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-500);
}
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { color: var(--gold); }
.crumbs li { display: flex; align-items: center; gap: 0.7rem; }
.crumbs li + li::before { content: "/"; color: var(--gold); }
.page-hero .crumbs { color: rgba(233, 227, 216, 0.6); }
.page-hero .crumbs a:hover { color: var(--gold-light); }

/* Long-form article body */
.prose {
  max-width: var(--w-text);
  font-size: clamp(1.045rem, 1rem + 0.28vw, 1.16rem);
  line-height: 1.78;
  color: var(--text-soft);
}
.prose > * + * { margin-top: 1.5em; }
.prose h2 {
  margin-top: 2.4em;
  font-size: var(--fs-h3);
  color: var(--navy-800);
}
.prose h2 + p { margin-top: 0.9em; }
.prose ul { display: grid; gap: 0.85em; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 1.65rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.6rem; height: 1px;
  background: var(--gold);
}
.prose blockquote,
.prose .pull {
  margin-block: 2.3em;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 2px solid var(--gold);
  font-family: var(--font-quote);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 1.95rem);
  font-style: italic;
  line-height: 1.44;
  color: var(--navy-800);
}
.prose strong { color: var(--text); font-weight: 700; }

/* Reading progress bar for articles */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-top);
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  pointer-events: none;
}

/* Tag pills */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-500);
  text-decoration: none;
  transition: border-color var(--t-base), color var(--t-base);
}
a.tag:hover { border-color: var(--gold); color: var(--gold); }

/* Filter row (journal categories) */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.filter {
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-500);
  transition: all var(--t-base) var(--ease-out);
}
.filter:hover { border-color: var(--navy-700); color: var(--navy-700); }
.filter[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--stone-100);
}

/* Content advisory */
.advisory {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--gold);
  background: rgba(201, 165, 104, 0.07);
  font-size: 0.925rem;
  line-height: 1.62;
  color: var(--text-soft);
}
.advisory svg { width: 18px; height: 18px; flex: none; color: var(--gold); margin-top: 0.22rem; }
.section--deep .advisory,
.on-deep .advisory {
  border-color: rgba(201, 165, 104, 0.28);
  border-left-color: var(--gold-light);
  background: rgba(201, 165, 104, 0.1);
  color: rgba(233, 227, 216, 0.82);
}

/* Editorial draft notice on journal entries */
.draft-note {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--stone-400);
  background: var(--stone-100);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--stone-500);
}
.draft-note svg { width: 16px; height: 16px; flex: none; margin-top: 0.2rem; }

/* Author signature block */
.author-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule-soft);
  background: var(--paper);
}
.author-note__mark {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border: 1px solid var(--gold-pale);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
}

/* Stat / fact row — used only for facts confirmed by the manuscript */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.facts > div {
  background: var(--paper);
  padding: 1.35rem 1.25rem;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.section--deep .facts { background: rgba(233, 227, 216, 0.14); border-color: rgba(233, 227, 216, 0.14); }
.section--deep .facts > div { background: var(--navy-800); }
.facts dt {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--stone-500);
}
.facts dd {
  margin: 0;
  font-family: var(--font-display);
  /* Long single words such as "Northamptonshire" must scale and wrap rather
     than run past the edge of their cell. */
  font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.3;
  color: var(--navy-800);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.section--deep .facts dd { color: var(--stone-100); }
.section--deep .facts dt { color: var(--gold-pale); }

/* -------------------------------------------------------------------------
   12. Footer
   ---------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--navy-900);
  color: rgba(233, 227, 216, 0.76);
  overflow: hidden;
}
.site-footer__top {
  position: relative;
  z-index: var(--z-decor);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.75fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.site-footer h2,
.site-footer h3 { color: var(--stone-100); }
.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: 1.15rem;
}
.site-footer__links { display: grid; gap: 0.75rem; }
.site-footer__links a {
  text-decoration: none;
  font-size: 0.94rem;
  color: rgba(233, 227, 216, 0.76);
  transition: color var(--t-base);
  width: fit-content;
  position: relative;
}
.site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--t-base) var(--ease-out);
}
.site-footer__links a:hover { color: var(--white); }
.site-footer__links a:hover::after { width: 100%; }

.site-footer__brand { display: grid; gap: 1.25rem; align-content: start; }
.site-footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  color: var(--stone-100);
  line-height: 1.15;
}

.site-footer__blurb {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(233, 227, 216, 0.66);
  max-width: 24ch;
}
.footer-church {
  width: clamp(240px, 34vw, 560px);
  opacity: 0.07;
  color: var(--stone-100);
  transform: translate(8%, 6%);
}

.socials { display: flex; gap: 0.6rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(233, 227, 216, 0.24);
  color: rgba(233, 227, 216, 0.8);
  transition: all var(--t-base) var(--ease-out);
}
.socials a:hover {
  border-color: var(--gold);
  color: var(--navy-900);
  background: var(--gold);
}
.socials svg { width: 17px; height: 17px; }

.site-footer__bottom {
  position: relative;
  z-index: var(--z-decor);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: 1px solid rgba(233, 227, 216, 0.14);
  font-size: var(--fs-small);
  color: rgba(233, 227, 216, 0.55);
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a:hover { color: var(--stone-100); }

.site-footer__credit { display: flex; align-items: center; gap: 0.85rem; }
.site-footer__credit-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.site-footer__credit-logo {
  display: block;
  width: 128px;
  transition: filter var(--t-base);
}
.site-footer__credit-logo img { display: block; width: 100%; height: auto; }
.site-footer__credit-logo:hover { filter: brightness(1.15); }

/* -------------------------------------------------------------------------
   13. Utilities
   ---------------------------------------------------------------------- */

.text-center { text-align: center; }
.t-fine { font-size: 0.8rem; line-height: 1.55; }
.field--grow { flex: 1 1 15rem; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }
.mx-auto { margin-inline: auto; }
.w-text { max-width: var(--w-text); }
.w-narrow { max-width: var(--w-narrow); }
.relative { position: relative; }
.sticky-col { position: sticky; top: 7.5rem; }

/* -------------------------------------------------------------------------
   14. Home page — cinematic hero
   ---------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 60rem);
  padding-top: clamp(7rem, 5rem + 8vw, 10rem);
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(53, 84, 127, 0.55), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(74, 90, 64, 0.32), transparent 62%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-800) 46%, #16294c 100%);
  color: var(--text-on-deep);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: var(--z-decor);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
  width: 100%;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--stone-100);
  text-transform: uppercase;
  font-weight: 500;
}
.hero__title span { display: block; }
.hero__title .is-indent { padding-left: 0.1em; }
.hero__byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-light);
}
.hero__copy {
  margin-top: 2rem;
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.66;
  color: rgba(233, 227, 216, 0.84);
  font-weight: 300;
}
.hero__actions { margin-top: 2.5rem; }
.hero__meta {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(233, 227, 216, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(233, 227, 216, 0.58);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__meta span::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
}
.hero__book { --book-w: min(80vw, 400px); }

/* Small gold tick that draws itself in beside the opening label */
.hero__tick {
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
}
.hero.is-ready .hero__tick { animation: ruleGrow 900ms var(--ease-out) 200ms backwards; }

.hero__rule {
  display: inline-block;
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* Ghosted title typography set into the background */
.hero__ghost {
  position: absolute;
  left: 50%;
  bottom: -0.22em;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(14rem, 40vw, 34rem);
  line-height: 0.72;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 165, 104, 0.14);
  white-space: nowrap;
  user-select: none;
}

/* Vignette that pulls the eye back to the centre of the composition */
.hero__vignette {
  inset: 0;
  background:
    radial-gradient(88% 72% at 50% 46%, transparent 38%, rgba(9, 16, 30, 0.5) 100%);
}

/* The book, staged like an object on an altar */
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* The stage centres its children, so the book column must be told to fill it —
   otherwise the book's own min(100%, …) width resolves against nothing. */
.hero__stage > .book-stage { position: relative; z-index: 2; width: 100%; }

.hero__arch {
  position: absolute;
  z-index: 0;
  top: -6%;
  width: min(92%, 26rem);
  aspect-ratio: 1 / 1.6;
  border: 1px solid rgba(201, 165, 104, 0.3);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
}
.hero__arch::after {
  content: "";
  position: absolute;
  inset: 12px 12px 0 12px;
  border: 1px solid rgba(201, 165, 104, 0.14);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
}
.hero__spot {
  position: absolute;
  z-index: 0;
  top: 4%;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(226, 214, 190, 0.20) 0%,
    rgba(201, 165, 104, 0.10) 38%,
    transparent 68%);
}

/* Vertical rail down the right edge of the stage */
.hero__rail {
  position: absolute;
  z-index: 1;
  right: -2.75rem;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(233, 227, 216, 0.34);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2.25rem);
  z-index: var(--z-decor);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(233, 227, 216, 0.5);
  text-decoration: none;
}
.scroll-cue__line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.scroll-cue:hover { color: var(--gold-light); }

/* Hero decoration: church silhouette and foliage, drawn as SVG */
.hero-church {
  right: -4%;
  bottom: -2%;
  width: clamp(280px, 46vw, 780px);
  opacity: 0.14;
  color: var(--stone-100);
}
.hero-leaves-tl {
  top: -3%;
  left: -3%;
  width: clamp(150px, 24vw, 380px);
  opacity: 0.18;
  color: #9fb08d;
  transform-origin: top left;
}
.hero-leaves-tr {
  top: -5%;
  right: 5%;
  width: clamp(120px, 18vw, 300px);
  opacity: 0.13;
  color: #9fb08d;
  transform: scaleX(-1);
  transform-origin: top right;
}

/* Positioning quick-set for decorative pieces */
.pos-tl { top: 0; left: 0; }
.pos-tr { top: 0; right: 0; }
.pos-bl { bottom: 0; left: 0; }
.pos-br { bottom: 0; right: 0; }
.pos-word-l { left: -0.05em; bottom: -0.18em; }
.pos-word-r { right: -0.05em; top: -0.14em; }

/* -------------------------------------------------------------------------
   15. Home page — editorial compositions
   ---------------------------------------------------------------------- */

.statement {
  position: relative;
  padding-block: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem);
  background: var(--ivory);
  border-bottom: 1px solid var(--rule-soft);
}
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: end;
}
.statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.35rem);
  line-height: 1.36;
  color: var(--navy-800);
  max-width: 34ch;
  text-wrap: balance;
}

/* The artwork column is exactly as wide as the book, so the cover sits flush
   with the heading above it and the copy starts immediately after the gap
   rather than across a stretch of empty grid track. */
.feature-book {
  --book-w: min(30vw, 360px);
  position: relative;
  display: grid;
  grid-template-columns: var(--book-w) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.feature-book__media { position: relative; width: 100%; }

/* Detail block beneath the cover, so the artwork column is not left empty */
.book-brief__list { display: grid; gap: 0.9rem; }
.book-brief__list > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}
.book-brief__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.book-brief__list dt {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--stone-500);
}
.book-brief__list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--navy-800);
}

.matters__lead {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1rem + 2.1vw, 2.75rem);
  line-height: 1.32;
  color: var(--stone-100);
  max-width: 22ch;
}

.appeal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border-block: 1px solid var(--rule-soft);
}
.appeal__item {
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.appeal__n {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold);
}

.author-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.author-intro__portrait .cover-frame,
.author-intro__portrait .placeholder { aspect-ratio: 4 / 5; }
.signature {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.85rem;
  color: var(--navy-700);
  line-height: 1;
}
.section--deep .signature { color: var(--gold-pale); }

.final-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.final-cta__book { --book-w: min(60vw, 250px); width: 100%; max-width: var(--book-w); }

/* -------------------------------------------------------------------------
   16. The Book page
   ---------------------------------------------------------------------- */

.book-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: start;
}
.book-layout__aside { --book-w: min(72vw, 320px); }
.book-aside-card {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.book-block + .book-block { margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.book-block__head {
  display: flex;
  align-items: baseline;
  gap: 1.15rem;
  margin-bottom: 1.35rem;
}
.book-block__n {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  flex: none;
}

/* Themes reduced to a glance rather than an essay */
.theme-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.theme-chips li {
  display: grid;
  gap: 0.3rem;
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  min-width: 0;
}
.theme-chips__word {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--navy-800);
}
.theme-chips__note {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-mute);
}

/* -------------------------------------------------------------------------
   17. Journal
   ---------------------------------------------------------------------- */

.journal-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.journal-head-action { display: grid; gap: 0.5rem; align-content: end; }
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(2rem, 3vw, 3.25rem);
}
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.35rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-pale);
}
.article-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.article-hero__meta .icon { color: var(--gold); }
.article-foot {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.75rem;
}
.share { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.share a, .share button {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--rule);
  color: var(--stone-500);
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--t-base), color var(--t-base);
}
.share a:hover, .share button:hover {
  border-color: var(--navy-800);
  color: var(--navy-800);
}
.share svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------------------
   18. Contact
   ---------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
}
.contact-route {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.contact-route:first-child { border-top: 1px solid var(--rule-soft); }
.contact-route h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy-800);
}
.contact-route p { font-size: 0.94rem; color: var(--text-soft); }

/* -------------------------------------------------------------------------
   19. Buy page
   ---------------------------------------------------------------------- */

.buy-hero {
  position: relative;
  padding-top: clamp(6rem, 4.75rem + 3vw, 7.5rem);
  padding-bottom: clamp(1.75rem, 1.25rem + 1.8vw, 3rem);
  background:
    radial-gradient(100% 80% at 80% 12%, rgba(53, 84, 127, 0.5), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  color: var(--text-on-deep);
  overflow: hidden;
}
.buy-hero__grid {
  position: relative;
  z-index: var(--z-decor);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: center;
}
.buy-hero__book { --book-w: min(72vw, 330px); }
.buy-hero h1 { color: var(--stone-100); }
.buy-panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   20. 404
   ---------------------------------------------------------------------- */

.error-page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: clamp(7rem, 12vw, 11rem);
  background: linear-gradient(170deg, var(--navy-900), var(--navy-800));
  color: var(--text-on-deep);
  overflow: hidden;
  text-align: center;
}
.error-page__inner { position: relative; z-index: var(--z-decor); max-width: 46rem; }
.error-page h1 { color: var(--stone-100); }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 17vw, 11rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 165, 104, 0.5);
  letter-spacing: 0.02em;
}
.error-book {
  width: min(70vw, 620px);
  color: rgba(201, 165, 104, 0.1);
}
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
}
.error-links a {
  font-size: var(--fs-small);
  text-decoration: none;
  color: rgba(233, 227, 216, 0.72);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.error-links a:hover { color: var(--stone-100); border-bottom-color: var(--gold); }

/* -------------------------------------------------------------------------
   21. Legal pages
   ---------------------------------------------------------------------- */

.legal {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.legal__toc { display: grid; gap: 0.7rem; }
.legal__toc a {
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text-mute);
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
  transition: color var(--t-base), border-color var(--t-base);
}
.legal__toc a:hover { color: var(--navy-800); border-color: var(--gold); }
.legal__body h2 { margin-top: 2.75rem; font-size: var(--fs-h3); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p,
.legal__body ul { margin-top: 1rem; color: var(--text-soft); max-width: var(--w-text); }
.legal__body ul { display: grid; gap: 0.6rem; }
.legal__body ul li { position: relative; padding-left: 1.5rem; }
.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 0.55rem; height: 1px;
  background: var(--gold);
}