/* =================================================================
   SEREKO LEBENYA — Literary Author Platform
   
   Design principle: This is a printed book, moved to screen.
   Every decision comes from the tradition of fine book design,
   not from the conventions of modern web UI.
   
   Typefaces — classical display against contemporary sans. The
   contrast between the two is the signature of the identity.
     Name / masthead     → Bodoni Moda (Google)
       — High-contrast editorial serif. The author's name only.
         Licensed stand-in for Canela / Noe / Saol Display.
     Headings            → Cormorant Garamond (Google)
       — The typeface of literary publishing. Elegant, unhurried.
     Body / interface    → Inter (Google)
       — Restrained, modern, quiet. Never competes with the writing.
         Free stand-in for Neue Haas Grotesk / Suisse Int'l / Sohne.

   Palette:
     Paper   #FCFBF9   Soft warm paper. Never bright white.
     Ink     #202124   Rich charcoal. Never harsh black.
     Stone   #D9D4CC   Cards, borders, dividers.
     Bronze  #8A7555   Hover states and tiny accents. Never metallic.
   
================================================================= */


/* ── Design tokens ────────────────────────────────────────────── */
:root {
  /* Colour */
  --page:         #FCFBF9;   /* Paper  */
  --page-tint:    #F5F2ED;
  --page-deep:    #EDE9E2;
  --ink:          #202124;   /* Ink    */
  --ink-2:        #4A4540;
  --ink-3:        #8A837A;
  --ink-4:        #B8B0A8;
  --rule:         #D9D4CC;   /* Stone  */
  --rule-light:   #E8E4DD;
  --accent:       #8A7555;   /* Bronze */
  --accent-deep:  #6E5C42;

  /* Dark mode */
  --d-page:       #110F0D;
  --d-page-tint:  #181512;
  --d-page-deep:  #1E1A16;
  --d-ink:        #D8D2CA;
  --d-ink-2:      #9A938A;
  --d-ink-3:      #5A534C;
  --d-rule:       #2A2520;
  --d-rule-light: #221E1A;
  --d-accent:     #A8906E;

  /* Semantic */
  --c-bg:      var(--page);
  --c-tint:    var(--page-tint);
  --c-deep:    var(--page-deep);
  --c-text:    var(--ink);
  --c-mid:     var(--ink-2);
  --c-faint:   var(--ink-3);
  --c-ghost:   var(--ink-4);
  --c-rule:    var(--rule);
  --c-rl:      var(--rule-light);
  --c-accent:  var(--accent);
  --c-acc-d:   var(--accent-deep);

  /* Typography */
  /* Display — the author's name only. A high-contrast editorial
     serif, in the register of a magazine masthead. */
  --f-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  /* Headings — classical, literary. */
  --f-serif:  'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  /* Body and interface — restrained, contemporary. The contrast
     against the display serif is the signature. */
  --f-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Long-form reading column. Switch this one line to var(--f-serif)
     if you want the essays set in Cormorant instead. */
  --f-read:   var(--f-body);

  /* Type scale — book proportions, not UI proportions */
  --t-xs:     clamp(0.7rem,  0.65rem + 0.2vw,  0.8rem);      /* 11–13px caption */
  --t-sm:     clamp(0.875rem,0.82rem + 0.25vw, 0.975rem);    /* 14–16px label  */
  --t-base:   clamp(1rem,     0.96rem + 0.2vw, 1.0625rem);    /* 16–17px body   */
  --t-lg:     clamp(1.25rem, 1.1rem + 0.6vw,  1.625rem);     /* 20–26px        */
  --t-xl:     clamp(1.625rem,1.3rem + 1.4vw,  2.375rem);     /* 26–38px        */
  --t-2xl:    clamp(2.25rem, 1.4rem + 2.8vw,  4rem);         /* 36–64px        */
  --t-3xl:    clamp(3rem,    1.5rem + 5vw,    6rem);          /* 48–96px        */
  --t-display:clamp(3.5rem,  1rem + 8vw,      9rem);          /* 56–144px       */

  /* Spacing — based on the body line-height */
  --lh:   1.75;       /* body line-height */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.375rem;
  --sp-6: 1.75rem;
  --sp-8: 2.5rem;
  --sp-10:3.25rem;
  --sp-12:4rem;
  --sp-16:5.5rem;
  --sp-20:7rem;
  --sp-24:9rem;
  --sp-32:12rem;

  /* Grid */
  --max-text:    640px;   /* Running prose column */
  --max-default: 920px;   /* Default page width   */
  --max-wide:    1180px;  /* Full-width layouts   */

  /* Motion — barely perceptible */
  --ease: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius — none for primary elements, tiny for form inputs */
  --r: 2px;
}

[data-theme="dark"] {
  --c-bg:     var(--d-page);
  --c-tint:   var(--d-page-tint);
  --c-deep:   var(--d-page-deep);
  --c-text:   var(--d-ink);
  --c-mid:    var(--d-ink-2);
  --c-faint:  var(--d-ink-3);
  --c-ghost:  var(--d-ink-3);
  --c-rule:   var(--d-rule);
  --c-rl:     var(--d-rule-light);
  --c-accent: var(--d-accent);
  --c-acc-d:  var(--d-accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:     var(--d-page);
    --c-tint:   var(--d-page-tint);
    --c-deep:   var(--d-page-deep);
    --c-text:   var(--d-ink);
    --c-mid:    var(--d-ink-2);
    --c-faint:  var(--d-ink-3);
    --c-ghost:  var(--d-ink-3);
    --c-rule:   var(--d-rule);
    --c-rl:     var(--d-rule-light);
    --c-accent: var(--d-accent);
    --c-acc-d:  var(--d-accent);
  }
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 0;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-16);
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh);
  color: var(--c-text);
  background-color: var(--c-bg);
  transition: background-color 300ms ease, color 300ms ease;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* Headings — typesetter defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--c-text);
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
}

/* Body text — generous, reader-focused */
p {
  max-width: 68ch;
  text-wrap: pretty;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
p + p { margin-top: 1.2em; }

::selection {
  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
  color: var(--c-text);
}
:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── SPA page system ──────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ── Layout ───────────────────────────────────────────────────── */
.w-text    { width: min(var(--max-text),    100% - var(--sp-8)); margin-inline: auto; }
.w-default { width: min(var(--max-default), 100% - var(--sp-8)); margin-inline: auto; }
.w-wide    { width: min(var(--max-wide),    100% - var(--sp-8)); margin-inline: auto; }

.section {
  padding-block: clamp(var(--sp-16), 7vw, var(--sp-32));
}
.section--sm {
  padding-block: clamp(var(--sp-10), 4vw, var(--sp-20));
}

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

/* ── Navigation ───────────────────────────────────────────────── */
/*
   The nav must feel like the header of a literary journal.
   Name on the left — understated, confident.
   Navigation on the right — labels only, no icons.
   No pills, no backgrounds, no decorative containers.
*/
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: clamp(3.25rem, 4.5vw, 4rem);
  display: flex;
  align-items: center;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.nav.at-top {
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-rule);
}
/* On light hero pages the nav starts light-on-dark */
.nav.hero-mode.at-top .nav__logo,
.nav.hero-mode.at-top .nav__links a,
.nav.hero-mode.at-top .nav__cta,
.nav.hero-mode.at-top .nav__theme { color: rgba(245,241,234,0.85); }
.nav.hero-mode.at-top .nav__cta { border-color: rgba(245,241,234,0.28); }
.nav.hero-mode.at-top .nav__links a::after { background: rgba(245,241,234,0.7); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--max-wide), 100% - var(--sp-8));
  margin-inline: auto;
}

/* Name — the only "logo" this site needs */
.nav__logo {
  font-family: var(--f-label);
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text);
  transition: color var(--ease);
  white-space: nowrap;
}
.nav__logo:hover { color: var(--c-accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
}

.nav__links a {
  font-family: var(--f-label);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mid);
  transition: color var(--ease);
  position: relative;
  padding-bottom: 2px;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform var(--ease);
  transform-origin: left;
}
.nav__links a:hover,
.nav__links a.active { color: var(--c-text); }
.nav__links a.active::after,
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* The single CTA — discreet, not a button */
.nav__cta {
  font-family: var(--f-label);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 2px;
  transition: border-color var(--ease), color var(--ease);
  white-space: nowrap;
}
.nav__cta:hover { border-color: var(--c-accent); color: var(--c-accent); }

.nav__theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--c-faint);
  transition: color var(--ease);
  flex-shrink: 0;
}
.nav__theme:hover { color: var(--c-text); }

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
.nav__hamburger span {
  display: block;
  width: 20px; height: 1px;
  background: currentColor;
  transition: transform var(--ease), opacity var(--ease);
}

/* Mobile overlay */
.nav__mobile {
  position: fixed; inset: 0;
  background: var(--c-bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: clamp(var(--sp-8), 8vw, var(--sp-16));
  gap: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.nav__mobile.open { opacity: 1; pointer-events: auto; }
.nav__mobile a {
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  font-weight: 300;
  color: var(--c-mid);
  transition: color var(--ease);
  line-height: 1.1;
}
.nav__mobile a:hover { color: var(--c-text); }
.nav__mobile-close {
  position: absolute;
  top: clamp(var(--sp-5), 3vw, var(--sp-8));
  right: clamp(var(--sp-5), 3vw, var(--sp-8));
  font-size: var(--t-lg);
  color: var(--c-faint);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.nav__mobile-close:hover { color: var(--c-text); }

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
}

/* ── Typography components ────────────────────────────────────── */

/*
   The chapter label — used as section markers.
   Behaves like a running head in a printed book.
*/
.kicker {
  display: block;
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}

/* The chapter rule — a single 32px line, nothing more */
.chapter-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-accent);
  margin-bottom: var(--sp-8);
}

.chapter-rule--center {
  margin-inline: auto;
}

/* Page title — the H1 equivalent */
.title-xl {
  font-family: var(--f-serif);
  font-size: var(--t-3xl);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.title-xl em { font-style: italic; }

/* Section heading */
.title-lg {
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -0.01em;
}
.title-lg em { font-style: italic; }

/* Card title */
.title-md {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.15;
}

/* The lede — opening statement under the title */
.lede {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.6;
  max-width: 54ch;
}

/* Running prose */
.prose {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh);
  color: var(--c-mid);
  max-width: 64ch;
}
.prose p + p { margin-top: 1.1em; }

/* ── Inline link — single underline, no colour ─────────────── */
.link-text {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-mid);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
  transition: border-color var(--ease), color var(--ease);
  display: inline;
  cursor: pointer;
}
.link-text:hover { color: var(--c-text); border-color: var(--c-accent); }
.link-text--arr::after { content: ' →'; }

/* ── The single primary action ────────────────────────────────── */
/*
   Not a button. A typographic element.
   Black fill. Printed label. Nothing decorative.
*/
.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  white-space: nowrap;
}
.btn--solid {
  background: var(--c-text);
  color: var(--c-bg);
  padding: 0.75em 2.2em;
}
.btn--solid:hover { background: var(--c-accent); }

.btn--outline {
  color: var(--c-text);
  border: 1px solid var(--c-rule);
  padding: 0.75em 2.2em;
}
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Horizontal rule ──────────────────────────────────────────── */
.rule {
  border: none;
  border-top: 1px solid var(--c-rule);
  margin: 0;
}

/* ── Hero ─────────────────────────────────────────────────────── */
/*
   The hero is not a marketing banner.
   It is the frontispiece of the book.
   Large name. The signature statement. Nothing else.
   The photograph is the ground, not the subject.
*/
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/hero-bg-opt.jpg');
  background-size: cover;
  background-position: center 40%;
}
/* Gradient: bottom-dark for legibility, gentle fade to mid */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(14,11,9,0.88) 0%,
      rgba(14,11,9,0.55) 45%,
      rgba(14,11,9,0.18) 100%
    );
}
[data-theme="dark"] .hero__bg {
  filter: brightness(0.75) saturate(0.6);
}
[data-theme="dark"] .hero__bg::after {
  background:
    linear-gradient(
      to top,
      rgba(6,4,3,0.94) 0%,
      rgba(6,4,3,0.65) 45%,
      rgba(6,4,3,0.3)  100%
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(var(--max-wide), 100% - var(--sp-8));
  margin-inline: auto;
  padding-bottom: clamp(var(--sp-16), 9vw, var(--sp-32));
  padding-top: var(--sp-32);
}

/* The name — the most important element on the page */
.hero__name {
  font-family: var(--f-label);
  font-size: clamp(1.8rem, 0.8rem + 4.5vw, 5.2rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,237,229,1);
  line-height: 1;
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.hero__role {
  font-family: var(--f-label);
  font-size: clamp(0.6rem, 0.55rem + 0.2vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(220,213,202,0.55);
  margin-bottom: clamp(var(--sp-10), 4vw, var(--sp-16));
}

.hero__statement {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 0.8rem + 2.2vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(238,232,222,0.93);
  line-height: 1.35;
  max-width: 26ch;
  margin-bottom: clamp(var(--sp-10), 4vw, var(--sp-16));
  text-shadow: 0 1px 16px rgba(0,0,0,0.25);
}

.hero__intro {
  font-family: var(--f-body);
  font-size: clamp(0.9rem, 0.75rem + 0.6vw, 1.1rem);
  font-weight: 400;
  color: rgba(210,203,192,0.72);
  line-height: 1.75;
  max-width: 46ch;
  margin-bottom: var(--sp-10);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.hero__cta {
  font-family: var(--f-label);
  font-size: clamp(0.62rem, 0.58rem + 0.15vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85em 2.4em;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  white-space: nowrap;
}
.hero__cta--primary {
  background: rgba(242,237,229,0.95);
  color: var(--ink);
}
.hero__cta--primary:hover {
  background: var(--accent);
  color: rgba(242,237,229,1);
}
.hero__cta--ghost {
  border: 1px solid rgba(220,213,202,0.35);
  color: rgba(220,213,202,0.85);
}
.hero__cta--ghost:hover {
  border-color: rgba(220,213,202,0.7);
  color: rgba(242,237,229,1);
}

/* scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(210,203,192,0.3);
  font-family: var(--f-label);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px;
  height: 32px;
  background: currentColor;
  animation: grow 2.2s ease infinite;
  transform-origin: top;
}
@keyframes grow {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%       { transform: scaleY(1);   opacity: 1;   }
}

/* ── Start-here band ──────────────────────────────────────────── */
.start-band {
  background: var(--c-tint);
  border-bottom: 1px solid var(--c-rl);
  padding-block: var(--sp-5);
}
.start-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.start-band p {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  max-width: none;
}

/* ── Intro two-column ─────────────────────────────────────────── */
.intro-cols {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 700px) { .intro-cols { grid-template-columns: 1fr; } }

.intro-portrait {
  position: sticky;
  top: clamp(var(--sp-12), 6vw, var(--sp-16));
}
.intro-portrait__frame {
  aspect-ratio: 3/4;
  overflow: hidden;
}
.intro-portrait__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 800ms ease;
}
.intro-portrait__frame:hover img { transform: scale(1.02); }
.intro-portrait__caption {
  margin-top: var(--sp-4);
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--c-faint);
  line-height: 1.5;
}

/* ── Books ────────────────────────────────────────────────────── */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-12);
}

.book-card__cover {
  aspect-ratio: 2/3;
  overflow: hidden;
  margin-bottom: var(--sp-6);
  background: var(--c-tint);
}
.book-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.book-card:hover .book-card__cover img { transform: scale(1.025); }
.book-card__cover--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8);
  text-align: center;
  border: 1px solid var(--c-rl);
}
.book-card__status {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.book-card__title {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: var(--sp-4);
  color: var(--c-text);
}
.book-card__synopsis {
  font-size: var(--t-sm);
  color: var(--c-mid);
  line-height: 1.8;
  margin-bottom: var(--sp-5);
  max-width: 38ch;
}

/* ── Essay archive ────────────────────────────────────────────── */
/*
   Essays are listed like entries in a literary anthology.
   Number on the left, title and lede on the right.
   The arrow is implicit. The typography does all the work.
*/
.essay-archive {
  display: flex;
  flex-direction: column;
}
.essay-entry {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-8);
  border-top: 1px solid var(--c-rl);
  cursor: pointer;
  transition: background var(--ease);
}
.essay-entry:last-child { border-bottom: 1px solid var(--c-rl); }
.essay-entry:hover { background: var(--c-tint); }
.essay-entry:hover .essay-entry__title { color: var(--c-accent); }

.essay-entry__num {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  font-weight: 300;
  color: var(--c-ghost);
  letter-spacing: 0.05em;
  padding-inline: var(--sp-4);
  text-align: right;
  line-height: var(--lh);
}
.essay-entry__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.essay-entry__pillar {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.essay-entry__title {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.15;
  transition: color var(--ease);
}
.essay-entry__lede {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.75;
  max-width: 62ch;
}
.essay-entry__meta {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--c-ghost);
}

@media (max-width: 480px) {
  .essay-entry { grid-template-columns: 1fr; }
  .essay-entry__num { display: none; }
}

/* ── Featured essays (3-col on home) ─────────────────────────── */
.essays-home {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 1px;
  background: var(--c-rl);
  border: 1px solid var(--c-rl);
}
.essays-home__secondary {
  display: flex;
  flex-direction: column;
}
@media (max-width: 820px) {
  .essays-home { grid-template-columns: 1fr; }
}

.essay-cell {
  background: var(--c-bg);
  padding: var(--sp-10) var(--sp-10);
  cursor: pointer;
  transition: background var(--ease);
}
.essay-cell:hover { background: var(--c-tint); }
.essay-cell:hover .essay-cell__title { color: var(--c-accent); }
.essay-cell--secondary {
  padding: var(--sp-8) var(--sp-8);
  border-top: 1px solid var(--c-rl);
  flex: 1;
}
.essay-cell--secondary:first-child { border-top: none; }

.essay-cell__pillar {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.essay-cell__title {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.12;
  color: var(--c-text);
  margin-bottom: var(--sp-5);
  transition: color var(--ease);
}
.essay-cell--secondary .essay-cell__title { font-size: var(--t-lg); }
.essay-cell__excerpt {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.8;
  margin-bottom: var(--sp-5);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.essay-cell--secondary .essay-cell__excerpt { -webkit-line-clamp: 2; }
.essay-cell__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rl);
}
.essay-cell__time {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--c-ghost);
}
.essay-cell__arr {
  font-size: var(--t-sm);
  color: var(--c-faint);
  transition: transform var(--ease), color var(--ease);
}
.essay-cell:hover .essay-cell__arr { transform: translateX(4px); color: var(--c-accent); }

/* ── The centred literary quote ───────────────────────────────── */
/*
   This is the equivalent of the epigraph page in a printed book.
   Full-bleed tinted section. Only three elements.
*/
.epigraph {
  background: var(--c-tint);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding-block: clamp(var(--sp-16), 9vw, var(--sp-32));
  text-align: center;
}
.epigraph__text {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 0.9rem + 2.5vw, 3.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: var(--c-text);
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}
.epigraph__attr {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-faint);
}

/* ── Newsletter ───────────────────────────────────────────────── */
/*
   The opposite of a typical newsletter band.
   No bright colours, no urgency language.
   Dark ground — like the endpapers of a book.
*/
.letter-band {
  background: var(--c-text);
  color: var(--c-bg);
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-32));
}
[data-theme="dark"] .letter-band {
  background: var(--d-page-deep);
  color: var(--d-ink);
  border-top: 1px solid var(--d-rule);
}
.letter-band .kicker { color: var(--c-accent); }
[data-theme="dark"] .letter-band .kicker { color: var(--d-accent); }
.letter-band .chapter-rule { background: var(--c-accent); }

.letter-band__title {
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: var(--sp-5);
  color: inherit;
}
.letter-band__title em { font-style: italic; }
.letter-band__sub {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 400;
  font-style: italic;
  line-height: 1.8;
  opacity: 0.6;
  max-width: 52ch;
  margin-bottom: var(--sp-10);
}
.letter-form {
  display: flex;
  gap: var(--sp-3);
  max-width: 440px;
}
.letter-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding: var(--sp-3) 0;
  color: inherit;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  transition: border-color var(--ease);
}
.letter-input::placeholder { opacity: 0.4; font-style: italic; }
.letter-input:focus { outline: none; border-color: currentColor; }
.letter-submit {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-accent);
  color: rgba(242,237,229,1);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ease);
}
.letter-submit:hover { background: var(--accent-deep, #5E4A34); }

.letter-promises {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
.letter-promises span {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-style: italic;
  opacity: 0.38;
}
@media (max-width: 480px) { .letter-form { flex-direction: column; } }

/* ── Purpose box ─────────────────────────────────────────────── */
.purpose-box {
  border-left: 1px solid var(--c-accent);
  padding-left: var(--sp-8);
  padding-block: var(--sp-2);
}
.purpose-box__label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.purpose-box__text {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.6;
  max-width: 42ch;
}

/* ── Block quote / pull quote ─────────────────────────────────── */
.pull {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--c-text);
  border-left: 1px solid var(--c-accent);
  padding-left: var(--sp-8);
  margin-block: var(--sp-10);
  max-width: 48ch;
  line-height: 1.5;
}

/* ── Speaking section ─────────────────────────────────────────── */
.speaking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 680px) { .speaking-grid { grid-template-columns: 1fr; } }

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block: var(--sp-6);
}
.topic-item {
  display: flex;
  gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-rl);
  font-family: var(--f-body);
  font-size: var(--t-base);
  color: var(--c-mid);
  font-style: italic;
}
.topic-item:first-child { border-top: 1px solid var(--c-rl); }
.topic-item::before {
  content: '—';
  color: var(--c-accent);
  flex-shrink: 0;
  font-style: normal;
}

/* ── Speaking cards ───────────────────────────────────────────── */
.speaking-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--c-rl);
  border: 1px solid var(--c-rl);
  margin-block: var(--sp-10);
}
.speaking-card {
  background: var(--c-bg);
  padding: var(--sp-8);
  transition: background var(--ease);
}
.speaking-card:hover { background: var(--c-tint); }
.speaking-card__num {
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  font-weight: 300;
  color: var(--c-rl);
  line-height: 1;
  margin-bottom: var(--sp-5);
}
.speaking-card__title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}
.speaking-card__desc {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.75;
}

/* ── Contact form ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 680px) { .contact-grid { grid-template-columns: 1fr; } }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form-label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.form-input, .form-select, .form-textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-3) 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-style: italic;
  color: var(--c-text);
  transition: border-color var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--c-ghost); }
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.75; }

/* ── Media cards ──────────────────────────────────────────────── */
.media-list { display: flex; flex-direction: column; }
.media-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-rl);
  cursor: pointer;
  transition: background var(--ease);
}
.media-item:first-child { border-top: 1px solid var(--c-rl); }
.media-item:hover { background: var(--c-tint); }
.media-item__kind {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.media-item__title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.2;
}

/* ── Story Letter page promises ───────────────────────────────── */
.promises-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-rl);
  border: 1px solid var(--c-rl);
}
@media (max-width: 580px) { .promises-grid { grid-template-columns: 1fr; } }
.promise {
  background: var(--c-bg);
  padding: var(--sp-8);
}
.promise__n {
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  font-weight: 300;
  color: var(--c-rl);
  line-height: 1;
  margin-bottom: var(--sp-5);
}
.promise__title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.promise__desc {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.75;
}

/* ── Essay reader ─────────────────────────────────────────────── */
/*
   Designed like a chapter in a well-produced book.
   The text column is text-width only.
   Generous top margin — the reader must arrive slowly.
*/
.reader-wrap {
  padding-top: clamp(var(--sp-20), 10vw, var(--sp-32));
  padding-bottom: clamp(var(--sp-20), 8vw, var(--sp-32));
  min-height: 100svh;
}

.reader-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-faint);
  cursor: pointer;
  margin-bottom: var(--sp-16);
  transition: color var(--ease);
}
.reader-back::before { content: '←'; }
.reader-back:hover { color: var(--c-accent); }

.reader-header {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--c-rule);
  max-width: var(--max-text);
}
.reader-chapter {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-6);
}
.reader-title {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 1rem + 4vw, 4.5rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-6);
  color: var(--c-text);
}
.reader-lede {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
  max-width: 54ch;
}
.reader-meta {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--c-ghost);
}

/* The body — set like a book page */
.reader-body {
  max-width: var(--max-text);
}
.reader-body p {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 2;
  color: var(--c-text);
  margin-bottom: var(--sp-5);
  max-width: 66ch;
}
.reader-body em { font-style: italic; }

.reflection-box {
  background: var(--c-tint);
  border-left: 1px solid var(--c-accent);
  padding: var(--sp-8) var(--sp-10);
  margin-top: var(--sp-12);
}
.reflection-label {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.reflection-text {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.6;
  max-width: 54ch;
}

/* ── About page ───────────────────────────────────────────────── */
.about-opening {
  min-height: 85svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--sp-32);
  background: var(--c-tint);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: clamp(var(--sp-16), 6vw, var(--sp-24));
}
.about-opening__inner {
  display: grid;
  grid-template-columns: 5fr 3.5fr;
  gap: var(--sp-16);
  align-items: end;
}
@media (max-width: 780px) {
  .about-opening__inner { grid-template-columns: 1fr; }
  .about-portrait-col { display: none; }
}
.about-portrait-col {
  aspect-ratio: 3/4;
  overflow: hidden;
}
.about-portrait-col img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 680px) { .about-bio { grid-template-columns: 1fr; } }

/* ── Manifesto ────────────────────────────────────────────────── */
.manifesto {
  padding: var(--sp-10);
  border: 1px solid var(--c-rl);
}
.manifesto__primary {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 300;
  font-style: italic;
  color: var(--c-text);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}
.manifesto__secondary {
  font-family: var(--f-serif);
  font-size: var(--t-base);
  font-weight: 300;
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.85;
  margin-bottom: var(--sp-5);
}
.manifesto__accent {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.manifesto__coda {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-faint);
  margin-top: var(--sp-3);
  line-height: 1.7;
}

/* ── Books page detail ────────────────────────────────────────── */
.book-detail {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 680px) {
  .book-detail { grid-template-columns: 1fr; }
  .book-detail__cover-col { max-width: 220px; }
}
.book-detail__cover-col {
  position: sticky;
  top: clamp(var(--sp-12), 5vw, var(--sp-16));
}
.book-detail__cover {
  aspect-ratio: 2/3;
  overflow: hidden;
}
.book-detail__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Footer ───────────────────────────────────────────────────── */
/*
   The colophon. Minimal. Four columns.
   The name and signature statement on the left.
   Navigation to the right.
*/
.footer {
  border-top: 1px solid var(--c-rule);
  background: var(--c-tint);
  padding-block: clamp(var(--sp-12), 5vw, var(--sp-20));
}
.footer__cols {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: var(--sp-10);
}
@media (max-width: 780px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__cols { grid-template-columns: 1fr; } }

.footer__name {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.footer__sig {
  font-family: var(--f-serif);
  font-size: var(--t-base);
  font-style: italic;
  font-weight: 300;
  color: var(--c-mid);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
  max-width: 28ch;
}
.footer__location {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  color: var(--c-ghost);
  max-width: none;
}

.footer__nav-head {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
}
.footer__nav-list a {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  transition: color var(--ease);
}
.footer__nav-list a:hover { color: var(--c-text); }

.footer__bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-rl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer__copy {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  color: var(--c-ghost);
  max-width: none;
}

/* ── Page-level top padding (for fixed nav) ───────────────────── */
.page-top {
  padding-top: clamp(var(--sp-20), 10vw, var(--sp-32));
}
.page-top--hero { padding-top: 0; }

/* ════════════════════════════════════════════════════════════
   SUPPLEMENTAL — Components added in HTML rebuild
════════════════════════════════════════════════════════════ */

/* ── Start here band ─────────────────────────────────────── */
.start-band {
  background: var(--c-tint);
  border-bottom: 1px solid var(--c-rl);
  padding: var(--sp-5) 0;
}
.start-band__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.start-band__inner p {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  margin: 0;
  max-width: none;
}

/* ── Intro two-col (home) ─────────────────────────────────── */
.intro-cols {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(var(--sp-12), 5vw, var(--sp-20));
  align-items: start;
}
@media (max-width: 640px) {
  .intro-cols { grid-template-columns: 1fr; }
}
.intro-portrait__frame {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-tint);
}
.intro-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-portrait__caption {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--c-ghost);
  margin-top: var(--sp-3);
  text-align: center;
  max-width: none;
}

/* ── Books grid (home) ───────────────────────────────────── */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(var(--sp-8), 4vw, var(--sp-14));
}
.book-card {}
.book-card__cover {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--c-tint);
  border: 1px solid var(--c-rl);
  margin-bottom: var(--sp-6);
}
.book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-card__cover--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.book-card__status {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
  max-width: none;
}
.book-card__title {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}
.book-card__synopsis {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  color: var(--c-mid);
  line-height: 1.75;
  margin-bottom: var(--sp-5);
  max-width: 38ch;
}

/* ── Epigraph ────────────────────────────────────────────── */
.epigraph {
  background: var(--c-tint);
  border-top: 1px solid var(--c-rl);
  border-bottom: 1px solid var(--c-rl);
  padding: clamp(var(--sp-16), 8vw, var(--sp-28)) 0;
  text-align: center;
}
.epigraph__text {
  font-family: var(--f-serif);
  font-size: clamp(var(--t-xl), 2.8vw, var(--t-2xl));
  font-weight: 300;
  font-style: italic;
  color: var(--c-text);
  line-height: 1.55;
  quotes: none;
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}
.epigraph__attr {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-ghost);
  max-width: none;
}

/* ── Speaking two-col ────────────────────────────────────── */
.speaking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-10), 5vw, var(--sp-20));
  align-items: start;
}
@media (max-width: 640px) {
  .speaking-grid { grid-template-columns: 1fr; }
}
.topic-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.topic-item {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-style: italic;
  color: var(--c-mid);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-rl);
  line-height: 1.5;
  max-width: none;
}
.topic-item:first-child { border-top: 1px solid var(--c-rl); }

/* ── About page ──────────────────────────────────────────── */
.about-opening {
  padding-top: clamp(var(--sp-20), 10vw, var(--sp-32));
  padding-bottom: clamp(var(--sp-16), 6vw, var(--sp-24));
  background: var(--c-tint);
  border-bottom: 1px solid var(--c-rl);
}
.about-opening__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(var(--sp-12), 5vw, var(--sp-20));
  align-items: start;
}
@media (max-width: 700px) {
  .about-opening__inner { grid-template-columns: 1fr; }
  .about-portrait-col { order: -1; }
}
.about-portrait-col img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.about-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-12), 5vw, var(--sp-20));
  align-items: start;
}
@media (max-width: 640px) {
  .about-bio { grid-template-columns: 1fr; }
}

/* ── Purpose box ─────────────────────────────────────────── */
.purpose-box {
  background: var(--c-tint);
  border: 1px solid var(--c-rl);
  border-left: 3px solid var(--c-accent);
  padding: var(--sp-7);
}
.purpose-box__label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
  max-width: none;
}
.purpose-box__text {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-mid);
  line-height: 1.75;
  max-width: none;
}

/* ── Manifesto ───────────────────────────────────────────── */
.manifesto {
  padding: var(--sp-7);
  border: 1px solid var(--c-rl);
}
.manifesto__primary {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--c-text);
  line-height: 1.3;
  margin-bottom: var(--sp-6);
  max-width: none;
}
.manifesto__secondary {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  color: var(--c-mid);
  line-height: 1.8;
  margin-bottom: var(--sp-6);
  max-width: none;
}
.manifesto__accent {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
  max-width: none;
}
.manifesto__coda {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-ghost);
  max-width: none;
}

/* ── Book detail ─────────────────────────────────────────── */
.book-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(var(--sp-12), 5vw, var(--sp-20));
  align-items: start;
}
@media (max-width: 700px) {
  .book-detail { grid-template-columns: 1fr; }
  .book-detail__cover-col { max-width: 220px; }
}
.book-detail__cover {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--c-tint);
  border: 1px solid var(--c-rl);
}
.book-detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Media list ──────────────────────────────────────────── */
.media-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.media-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--c-rl);
  cursor: default;
  transition: background var(--ease);
}
.media-item:first-child { border-top: 1px solid var(--c-rl); }
.media-item__kind {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
  max-width: none;
}
.media-item__title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--c-text);
  line-height: 1.3;
}

/* ── Speaking cards ──────────────────────────────────────── */
.speaking-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.speaking-card {
  border: 1px solid var(--c-rl);
  padding: var(--sp-8);
}
.speaking-card__num {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.speaking-card__title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--c-text);
  line-height: 1.25;
  margin-bottom: var(--sp-4);
}
.speaking-card__desc {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  color: var(--c-mid);
  line-height: 1.75;
  max-width: none;
}

/* ── Story Letter — promise grid ─────────────────────────── */
.promises-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 640px) {
  .promises-grid { grid-template-columns: 1fr; }
}
.promise {
  padding: var(--sp-7);
  border: 1px solid var(--c-rl);
}
.promise__n {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.promise__title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.promise__desc {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  color: var(--c-mid);
  line-height: 1.7;
  max-width: none;
}

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(var(--sp-12), 5vw, var(--sp-20));
  align-items: start;
}
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form-label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-mid);
}
.form-input,
.form-select,
.form-textarea {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-rl);
  padding: var(--sp-3) 0;
  outline: none;
  transition: border-color var(--ease);
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--c-accent); }
.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.7;
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238A837A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: var(--sp-6);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--c-ghost); }

/* ── Btn (full action button) ────────────────────────────── */
.btn {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  padding: var(--sp-4) var(--sp-8);
  cursor: pointer;
  border: none;
  transition: background var(--ease), color var(--ease);
  text-decoration: none;
}
.btn--solid {
  background: var(--c-accent);
  color: #fff;
}
.btn--solid:hover { background: var(--c-ink); }


/* =================================================================
   CLEANUP PASS — additions
================================================================= */

/* Skip link: visible only to keyboard users, in the page's own voice */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 200;
  background: var(--c-text);
  color: var(--c-bg);
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  transition: top var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* Anchors that were spans or articles keep the typography they had */
a.link-text,
a.essay-cell,
a.essay-entry,
a.reader-back { text-decoration: none; color: inherit; }
a.essay-cell { display: block; }
a.essay-entry { color: inherit; }
.essay-entry__body { display: block; }
.essay-entry__pillar,
.essay-entry__title,
.essay-entry__lede,
.essay-entry__meta { display: block; }

/* Focus that is visible without being loud */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 3px;
}
.essay-cell:focus-visible,
.essay-entry:focus-visible { outline-offset: -1px; background: var(--c-tint); }

/* Pillar filters: state carried by a class, not by inline style */
.pillar-filter {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--c-mid);
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.pillar-filter:hover { color: var(--c-text); border-color: var(--c-accent); }
.pillar-filter.active-filter { color: var(--c-text); border-color: var(--c-accent); }

/* Form feedback — states the truth, never celebrates a send that
   did not happen */
.form-status {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  line-height: 1.7;
  margin-top: var(--sp-4);
  max-width: 46ch;
  min-height: 1lh;
}
.form-status:empty { margin-top: 0; min-height: 0; }
.form-status[data-kind="ok"]    { color: var(--c-accent); }
.form-status[data-kind="error"] { color: var(--c-text); border-left: 2px solid var(--c-rule); padding-left: var(--sp-4); }

button[disabled] { opacity: 0.55; cursor: progress; }


/* =================================================================
   BRIEF ALIGNMENT
================================================================= */

/* The line that completes the frontispiece */
.hero__promise {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 400;
  font-style: italic;
  line-height: 1.8;
  color: rgba(242, 237, 229, 0.78);
  max-width: 34ch;
  margin: var(--sp-6) auto 0;
}

/* The plate: one image, no text, no caption. Silence between chapters. */
.plate {
  margin: 0;
  width: 100%;
  height: clamp(320px, 52vh, 620px);
  overflow: hidden;
  border-bottom: 1px solid var(--c-rl);
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Media entries now carry their own weight typographically */
.media-item { grid-template-columns: 1fr; }


/* =================================================================
   TYPOGRAPHIC IDENTITY
   Classical display serif against contemporary sans. The contrast
   is the signature — neither face does the other's job.
================================================================= */

/* The wordmark. Set in the display serif at every size; weight rises
   as the size falls so the hairlines survive at nav scale. */
.nav__logo {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-size: clamp(0.9rem, 0.82rem + 0.32vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The frontispiece. Stacked, tightly leaded, barely tracked — a
   Didone wants far less letter-spacing than a sans at this size. */
.hero__name {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-size: clamp(2.6rem, 1.1rem + 6.4vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 0.94;
  /* No shadow: it thickens and muddies the hairlines. Legibility
     comes from the gradient on the image instead. */
  text-shadow: none;
}

.hero__role {
  font-family: var(--f-label);
  font-weight: 400;
  letter-spacing: 0.34em;
}

/* A little more darkness under the type, now that nothing is
   propping the letterforms up. */
.hero__bg::after {
  background: linear-gradient(
    to top,
    rgba(14,11,9,0.92) 0%,
    rgba(14,11,9,0.62) 45%,
    rgba(14,11,9,0.20) 100%
  );
}

/* Labels, kickers, navigation: sans, tracked, quiet. */
.kicker,
.nav__links a,
.nav__mobile a,
.link-text,
.pillar-filter,
.btn,
.form-label,
.footer__nav-head,
.essay-cell__pillar,
.essay-entry__pillar,
.book-card__status {
  font-family: var(--f-label);
  font-weight: 400;
}

/* The reading column. */
.reader-body,
.prose,
.essay-entry__lede,
.essay-cell__excerpt,
.lede {
  font-family: var(--f-read);
}

/* Headings stay classical. */
.title-xl, .title-lg, .title-md,
.reader-title,
.essay-cell__title,
.essay-entry__title,
.book-card__title,
.letter-band__title,
.epigraph__text,
.manifesto__primary {
  font-family: var(--f-serif);
}

/* Inter's default figures are lining; old-style suits running prose. */
.prose, .reader-body { font-variant-numeric: oldstyle-nums; }