/* ============================================================
   drlesliewells.com: the one shared stylesheet.
   Section 1: self-hosted fonts (Fraunces, Archivo), font-display swap.
   Section 2: the Golden Hour tokens and components, unchanged from the
              Astro build's global.css.
   Section 3: rules that were page-scoped in Astro (homepage, contact),
              now global; their class names are unique to those pages.
   ============================================================ */

/* ---------- 1. fonts ---------- */
@font-face { font-family: 'Fraunces Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/fraunces-vietnamese.woff2) format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Fraunces Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/fraunces-latin.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/fraunces-vietnamese-italic.woff2) format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Fraunces Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/fraunces-latin-ext-italic.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/fraunces-latin-italic.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/archivo-vietnamese.woff2) format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/archivo-latin.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- 2. tokens and components ---------- */
/* ============================================================
   SITE A: "GOLDEN HOUR"
   Modern editorial. Ivory paper, deep ink, a golden thread.
   Type: Fraunces (display + text) · Archivo (UI)
   ============================================================ */

:root {
  /* palette: the whole set, nothing off-system */
  --paper: #f6f1e7;
  --paper-2: #ede5d2;
  --ink: #211c14;
  --ink-2: #554d3c;
  --gold: #b07818;      /* graphic gold: rules, thread, marks */
  --gold-deep: #815708; /* text-safe gold (AA on paper) */
  --gold-light: #bd8123; /* text-safe gold on ink */
  --thread-gold: #a66b0d;
  --focus-gold: #9c650c;
  /* Mixed from the palette above, not new hues (comps 3a and 1c, 2026-10-18):
     the gold band is 30% gold into paper; the two hairlines are ink-2 into
     paper-2 and into the band. */
  --gold-tint: color-mix(in srgb, var(--gold) 30%, var(--paper));
  --rule-warm: color-mix(in srgb, var(--ink-2) 26%, var(--paper-2));
  --rule-on-tint: color-mix(in srgb, var(--ink-2) 45%, var(--gold-tint));

  /* type */
  --font-display: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  --font-ui: 'Archivo Variable', 'Archivo', 'Helvetica Neue', sans-serif;

  --type-meta: 0.72rem;
  --type-ui: 0.9rem;
  --type-body: 1.0625rem;
  --type-lede: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --type-quote: clamp(1.9rem, 1.45rem + 2.2vw, 3.6rem);
  --type-display-xl: clamp(2.9rem, 1.25rem + 7.4vw, 7.25rem);
  --type-display-lg: clamp(2.3rem, 1.45rem + 3.8vw, 4.5rem);
  --type-display-md: clamp(1.7rem, 1.35rem + 1.65vw, 2.6rem);
  --type-display-sm: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --type-row-title: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  --type-monogram: clamp(3.4rem, 2.65rem + 3.2vw, 6.4rem);

  /* scale (8px base) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --s7: 7rem;
  --s8: 10rem;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --page-max: 84rem;

  --hairline: color-mix(in srgb, var(--ink) 11%, transparent);
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  /* Adopted October 12 refinement: one restrained timing for control feedback. */
  --duration-ui: 180ms;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* Big screens: grow the whole site with the window (Felix, 2026-09-26: "I want
   everything to fill the screen up more"). Every size and the page width are in
   rem, so raising the base size scales type, spacing and the column together.
   Starts at 1440px wide, about 19px base at 2000px, capped near 21px. */
@media (min-width: 1440px) {
  html { font-size: clamp(100%, 0.5rem + 0.56vw, 131%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: var(--paper);
  /* paper grain, not a colour wash: the checker flags every gradient for a human to judge */
  background-image:
    repeating-linear-gradient(97deg, transparent 0, color-mix(in srgb, var(--ink) 1.8%, transparent) 1px, transparent 2px, transparent 0.52rem),
    repeating-linear-gradient(3deg, transparent 0, color-mix(in srgb, var(--gold) 1.4%, transparent) 1px, transparent 2px, transparent 0.73rem),
    radial-gradient(ellipse at 52% 20%, transparent 48%, color-mix(in srgb, var(--ink) 4%, transparent) 145%);
  background-size: 19rem 17rem, 23rem 21rem, 100% 100%;
  color: var(--ink);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

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

::selection { background: var(--gold-deep); color: var(--paper); }

.skip-link {
  position: fixed;
  left: var(--s2);
  top: var(--s2);
  z-index: 200;
  transform: translateY(calc(-100% - var(--s3)));
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.display-xl {
  font-size: var(--type-display-xl);
  font-weight: 470;
  line-height: 0.97;
}
.display-lg { font-size: var(--type-display-lg); font-weight: 500; }
.display-md { font-size: var(--type-display-md); font-weight: 540; }
.display-sm { font-size: var(--type-display-sm); font-weight: 560; }

em, .swash {
  font-style: italic;
  font-weight: 420;
  color: var(--gold-deep);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 430;
  color: var(--gold-deep);
  margin-bottom: var(--s3);
}
.kicker::before {
  content: '';
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.folio {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.lede {
  font-size: var(--type-lede);
  line-height: 1.5;
  font-weight: 420;
  max-width: var(--measure);
  overflow-wrap: anywhere;
}

.prose {
  max-width: var(--measure);
  overflow-wrap: anywhere;
  /* The original columns and type remain; only reading rhythm is softened. */
  line-height: 1.72;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.1em; }
.prose a {
  overflow-wrap: anywhere;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}
.muted { color: var(--ink-2); }
.registered-mark {
  display: inline;
  margin-inline-start: 0.025em;
  font-size: 0.58em;
  font-style: normal;
  line-height: 0;
  vertical-align: super;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--alt {
  background-color: var(--paper-2);
  /* paper grain on the alternate band; flagged by the checker, kept on purpose */
  background-image:
    repeating-linear-gradient(94deg, transparent 0, color-mix(in srgb, var(--ink) 1.8%, transparent) 1px, transparent 2px, transparent 0.6rem),
    radial-gradient(ellipse at center, transparent 38%, color-mix(in srgb, var(--ink) 3.5%, transparent) 135%);
}

.rule { border: 0; border-top: 1px solid var(--hairline); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(0.25rem, 2.5vw, 2rem);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-ui);
  font-size: var(--type-ui);
  font-weight: 560;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.95rem 1.7rem;
  min-height: 48px;
  transition: background-color var(--duration-ui) var(--ease-editorial), color var(--duration-ui) var(--ease-editorial), border-color var(--duration-ui) var(--ease-editorial), transform var(--duration-ui) var(--ease-editorial);
}
.btn--ink {
  background: var(--ink);
  color: var(--paper);
}
.btn--ink:hover { background: var(--gold-deep); color: var(--paper); }
.btn--line {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--line:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--paper {
  background: var(--paper);
  color: var(--ink);
}
.btn--paper:hover { background: var(--gold-light); color: var(--ink); }
.btn .arr { transition: transform var(--duration-ui) var(--ease-editorial); }
/* Hover motion belongs to a mouse, not a persistent touch-hover state.
   Keyboard focus is immediate and keeps the arrow still. */
@media (hover: hover) and (pointer: fine) {
  .btn--ink:not(:disabled):hover:not(:focus-visible) { transform: translateY(-1px); }
  .btn:not(:disabled):hover:not(:focus-visible) .arr { transform: translateX(3px); }
}
.btn:not(:disabled):active:not(:focus-visible) { transform: scale(0.98); transition-duration: 100ms; }
.btn:focus-visible, .btn:focus-visible .arr { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arr { transform: none !important; }
}

/* ---------- header / nav ---------- */
.site-head {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color 0.35s var(--ease-editorial), box-shadow 0.35s var(--ease-editorial);
}
.site-head.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 0 1px 0 var(--hairline);
}
/* Glass blur lives on a pseudo-element: backdrop-filter on .site-head itself
   makes it the containing block for the fixed mobile nav, which pins the
   open menu to the header bar instead of the viewport. */
.site-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.site-head.is-scrolled::before {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(var(--s3), 2vw);
  padding-block: 1.1rem;
}
.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: min(1.22rem, 0.655rem + 0.706vw);
  font-weight: 480;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--gold-deep); }
.site-nav { display: flex; align-items: center; gap: min(clamp(1rem, 2.2vw, 2rem), 2.2vw); }
.site-nav a:not(.btn) {
  font-family: var(--font-ui);
  font-size: min(0.88rem, 0.34rem + 0.68vw);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-editorial), border-color 0.2s var(--ease-editorial);
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.site-nav .btn {
  padding: 0.62rem min(1.3rem, 1.6vw);
  min-height: 44px;
  font-size: min(var(--type-ui), 0.35rem + 0.7vw);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded='true'] .ico-menu { display: none; }
.nav-toggle[aria-expanded='true'] .ico-close { display: block; }

@media (max-width: 900px) {
  .site-head__bar { gap: min(var(--s3), 0.4rem + 2vw); }
  .brand { font-size: min(1.22rem, 0.8rem + 2vw); }
  .site-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    background: var(--paper);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.45s;
  }
  .site-nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
  }
  .site-nav a:not(.btn) {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 480;
    color: var(--ink);
  }
  .nav-toggle { display: inline-flex; position: relative; z-index: 110; flex: none; }
  @media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
  }
}

/* ---------- editorial rows (pathways, topics) ---------- */
.rows { border-top: 1px solid var(--hairline); }
.row-item {
  display: grid;
  grid-template-columns: 3.5rem clamp(6rem, 11vw, 9.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.row-item__copy { min-width: 0; }
.row-item__plate {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent);
}
.row-item__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.86) contrast(0.96) brightness(1.02);
  transition: transform 0.45s var(--ease-editorial), filter 0.45s var(--ease-editorial);
}
.row-item__num {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}
.row-item__title {
  font-size: var(--type-row-title);
  font-weight: 500;
  line-height: 1.1;
  transition: color 0.25s var(--ease-editorial), transform 0.35s var(--ease-editorial);
  overflow-wrap: normal;
}
.row-item__desc {
  margin-top: 0.45rem;
  color: var(--ink-2);
  font-size: 1rem;
  max-width: 46ch;
  overflow-wrap: anywhere;
}
.row-item__arr {
  font-family: var(--font-ui);
  font-size: 1.3rem;
  color: var(--gold-deep);
  transition: transform 0.3s var(--ease-editorial);
}
.row-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.row-item:hover::after { transform: scaleX(1); }
.row-item:hover .row-item__title { color: var(--gold-deep); }
.row-item:hover .row-item__arr { transform: translateX(6px); }
.row-item:hover .row-item__plate img { transform: scale(1.025); filter: sepia(0.08) saturate(0.92) contrast(0.98) brightness(1.02); }
@media (max-width: 640px) {
  .row-item { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .row-item__num { align-self: baseline; }
  .row-item__copy { grid-column: 2; align-self: baseline; }
  .row-item__arr { grid-column: 3; grid-row: 1; align-self: baseline; }
  .row-item__plate { grid-column: 2; grid-row: 2; width: min(11rem, 100%); }
}
@media (min-width: 641px) and (max-width: 900px) {
  .row-item { grid-template-columns: 3.5rem 11rem minmax(0, 1fr) auto; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
.cta-band .kicker { color: var(--gold-light); }
.cta-band .kicker::before { background: var(--gold); }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
}
.cta-band h2 { max-width: 18ch; }
.cta-band .muted { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  padding-block: var(--s5) var(--s4);
  font-family: var(--font-ui);
  font-size: 0.88rem;
}
.site-foot a { color: color-mix(in srgb, var(--paper) 80%, var(--ink)); text-decoration: none; }
.site-foot a:hover { color: var(--gold-light); }
.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1.55fr) repeat(2, minmax(9rem, 1fr));
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: var(--s4);
}
.site-foot__brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--paper);
}
.site-foot ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.site-foot__legal {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: color-mix(in srgb, var(--paper) 55%, var(--ink));
  font-size: 0.78rem;
}
@media (max-width: 900px) {
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__grid > :first-child { grid-column: 1 / -1; }
  .site-foot__grid > * { min-width: 0; }
  .site-foot a { overflow-wrap: anywhere; }
}
@media (max-width: 540px) {
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .site-foot__grid > :first-child { grid-column: auto; }
}

/* ---------- imagery ---------- */
.frame {
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 3 / 2; }
.photo-frame { min-width: 0; }
.photo-frame__plate {
  position: relative;
  isolation: isolate;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--paper-2);
  /* paper grain on the reserved-photo plate; flagged by the checker, kept on purpose */
  background-image:
    repeating-linear-gradient(96deg, transparent 0, color-mix(in srgb, var(--ink) 2.2%, transparent) 1px, transparent 2px, transparent 0.55rem),
    repeating-linear-gradient(4deg, transparent 0, color-mix(in srgb, var(--gold) 2%, transparent) 1px, transparent 2px, transparent 0.8rem),
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--paper) 48%, transparent), transparent 58%, color-mix(in srgb, var(--ink) 4.5%, transparent) 135%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
    inset 0 0 3.5rem color-mix(in srgb, var(--gold) 8%, transparent);
}
.photo-frame__plate::before {
  content: '';
  position: absolute;
  inset: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--thread-gold) 54%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 72%, transparent),
    0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}
.photo-frame__plate::after {
  content: '';
  position: absolute;
  width: min(34%, 7rem);
  height: 1px;
  left: 50%;
  top: calc(50% + 3.65rem);
  transform: translateX(-50%);
  background: var(--thread-gold);
  opacity: 0.48;
}
.photo-frame--tall .photo-frame__plate { aspect-ratio: 3 / 4; }
.photo-frame--wide .photo-frame__plate { aspect-ratio: 3 / 2; }
.photo-frame__monogram {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--type-monogram);
  font-style: italic;
  font-weight: 420;
  line-height: 0.9;
  letter-spacing: -0.08em;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 76%, transparent);
}
.photo-frame__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-weight: 520;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.photo-frame--candid .photo-frame__plate::before {
  inset: 1.2rem;
  border-inline: 0;
}
.photo-frame--candid .photo-frame__plate::after {
  width: min(24%, 5rem);
  top: calc(50% + 2.8rem);
}
.photo-frame--candid .photo-frame__monogram {
  font-size: clamp(2.6rem, 2.1rem + 2vw, 4.7rem);
  letter-spacing: -0.04em;
}
.photo-frame--work .photo-frame__plate::before {
  inset: 1rem 1.8rem;
}
.photo-frame--work .photo-frame__plate::after {
  width: 1px;
  height: min(24%, 4rem);
  top: auto;
  bottom: 1rem;
  opacity: 0.4;
}
.photo-frame--work .photo-frame__monogram {
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3.8rem);
  letter-spacing: 0;
}
.photo-frame--work .photo-frame__label { letter-spacing: 0.14em; }
.caption {
  font-family: var(--font-ui);
  /* Reserved-image captions remain captions, but use the existing UI token
     so their meaning is readable on all three device layouts. */
  font-size: var(--type-ui);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-top: 0.7rem;
}

/* ---------- reveal defaults (content remains visible; GSAP adds motion only) ---------- */
/* Quote words stay at full ink in every motion mode. The golden thread, not
   reduced text opacity, carries the homepage's scroll choreography. */

/* ---------- subpage hero ---------- */
.subhero { padding-top: clamp(7.5rem, 15vh, 11rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.subhero .lede { margin-top: var(--s3); }
.subhero h1 { max-width: 16ch; }

/* ---------- editorial timeline ---------- */
.timeline { list-style: none; padding: 0; position: relative; display: grid; gap: var(--s4); }
.timeline::before {
  content: '';
  position: absolute;
  left: 0.32rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.timeline li { position: relative; padding-left: 2.2rem; max-width: 56ch; }
.timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold-deep);
  background: var(--paper);
}
.timeline .tl-title { font-weight: 560; font-size: 1.15rem; }
.timeline .tl-meta { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-2); margin-top: 0.2rem; }
.timeline p { margin-top: 0.4rem; color: var(--ink-2); }

/* ---------- forms (editorial) ---------- */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.field input[type='text'],
.field input[type='email'],
.field input[type='date'],
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--ink-2);
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.5rem 0.1rem;
  border-radius: 0;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--gold-deep);
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }

.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pills label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-editorial), border-color 0.2s var(--ease-editorial), color 0.2s var(--ease-editorial);
}
.pills input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pills label:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pills label:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-of-type { border-top: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.2rem;
  font-size: 1.18rem;
  font-weight: 540;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-ui);
  color: var(--gold-deep);
  font-size: 1.3rem;
  transition: transform 0.25s var(--ease-editorial);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { padding-bottom: 1.3rem; max-width: 58ch; color: var(--ink-2); }

/* ---------- misc ---------- */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.checklist li { display: flex; gap: 0.85rem; align-items: flex-start; }
.checklist li::before {
  content: '';
  flex: none;
  width: 1.4rem;
  height: 1px;
  background: var(--gold);
  margin-top: 0.85em;
}

.note {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-2);
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
  max-width: 52ch;
}

/* ---------- CMS-ready editorial interiors ---------- */
.photo-frame { position: relative; }
.photo-frame__image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: calc(100% - 1.45rem);
  object-fit: cover;
  opacity: 0;
}
.photo-frame:has(.photo-frame__image:not([src*='photo-reservation'])) .photo-frame__image { opacity: 1; }
.photo-frame:has(.photo-frame__image:not([src*='photo-reservation'])) .photo-frame__plate { visibility: hidden; }
.photo-frame .caption:empty { display: none; }

.interior-hero { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.interior-hero__grid { align-items: end; row-gap: var(--s4); }
.interior-hero__copy { grid-column: 1 / 8; }
.interior-hero__media { grid-column: 9 / 13; }
.interior-hero h1 { margin-top: var(--s2); max-width: 16ch; }
.interior-hero .lede { margin-top: var(--s3); }
.editorial-split { align-items: center; row-gap: var(--s5); }
.editorial-split__copy { grid-column: 1 / 7; }
.editorial-split__media { grid-column: 8 / 13; }
.editorial-split__copy h2 { margin-bottom: var(--s3); max-width: 22ch; }
.numbered-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.numbered-grid > article { border-top: 1px solid var(--gold); padding-top: var(--s2); }
.numbered-grid h3 { margin-top: var(--s2); }
.numbered-grid p:last-child { color: var(--ink-2); margin-top: var(--s2); }
.details-list { display: grid; gap: 1rem; margin: 0; }
.details-list > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s2); border-bottom: 1px solid var(--hairline); padding-bottom: 1rem; }
.details-list dt { font-family: var(--font-ui); font-size: var(--type-meta); letter-spacing: 0.1em; color: var(--ink-2); }
.details-list dd { margin: 0; }
.three-step { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.three-step > article { border-top: 1px solid var(--gold); padding-top: var(--s3); }
.three-step h3::before { counter-increment: step; content: '0' counter(step); display: block; font-family: var(--font-ui); font-size: var(--type-meta); letter-spacing: 0.16em; color: var(--gold-deep); margin-bottom: var(--s2); }
.three-step p { color: var(--ink-2); margin-top: var(--s2); }
.media-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.media-feature__copy h2 { margin-top: var(--s2); }
.media-feature__copy p { margin-top: var(--s2); color: var(--ink-2); }
.contact-layout { row-gap: var(--s5); padding-bottom: clamp(4rem, 9vw, 8rem); }
.contact-layout__form { grid-column: 1 / 8; }
.contact-layout__aside { grid-column: 9 / 13; align-self: start; }
.form-status { min-height: 1.5rem; color: var(--ink-2); }
.form-status[data-state='error'] { color: var(--gold-deep); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 900px) {
  .interior-hero__copy, .interior-hero__media, .editorial-split__copy, .editorial-split__media, .contact-layout__form, .contact-layout__aside { grid-column: 1 / -1; }
  .interior-hero__media { max-width: 30rem; }
  .numbered-grid, .three-step { grid-template-columns: 1fr; }
  .media-feature { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .details-list > div { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ---------- 3a. homepage (was scoped in index.astro) ---------- */
  /* hero */
  .hero { padding-top: clamp(5rem, 8vh, 6rem); padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }
  .hero__grid { align-items: end; row-gap: var(--s5); }
  .hero__text { grid-column: 1 / 8; }
  .hero__media { grid-column: 9 / 13; }
  .hero__title { margin-top: var(--s3); }
  .hero__title .line { display: block; }
  .hero .lede { margin-top: var(--s4); }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--s4); }
  @media (max-width: 900px) {
    .hero__text { grid-column: 1 / -1; }
    .hero__media { grid-column: 1 / 10; }
  }

  /* story + thread */
  .story { position: relative; }
  .thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    visibility: hidden;
  }
  .js .thread[data-thread-ready] { visibility: visible; }
  .thread path {
    stroke: var(--thread-gold);
    stroke-width: 2.25;
    opacity: 0.82;
  }
  .story .wrap { position: relative; z-index: 1; }
  @media (max-width: 900px) {
    .thread { display: none; }
  }

  .chapter { row-gap: var(--s3); padding-block: clamp(2.5rem, 6vw, 5rem); }
  .chapter__head { grid-column: 1 / 4; align-self: start; }
  .chapter__head .folio { margin-bottom: 0.8rem; }
  .chapter__body { grid-column: 4 / 11; }
  .chapter__body h2 { margin-bottom: var(--s3); max-width: 24ch; }
  .chapter--with-media .chapter__body { grid-column: 4 / 9; }
  .chapter--with-media .chapter__media { grid-column: 9 / 13; align-self: center; }
  @media (max-width: 900px) {
    .chapter__head, .chapter__body,
    .chapter--with-media .chapter__body, .chapter--with-media .chapter__media {
      grid-column: 1 / -1;
    }
  }

  /* pull quote */
  .pq__quote { max-width: 60rem; margin-inline: auto; }
  .pq__text {
    font-family: var(--font-display);
    font-size: var(--type-quote);
    font-weight: 480;
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-indent: -0.45em;
  }
  .pq__text::before { content: '“'; color: var(--gold-deep); }
  .pq__text::after { content: '”'; color: var(--gold-deep); }
  .pq__quote cite { display: block; margin-top: var(--s3); font-style: normal; }

  /* grounding */
  .ground { align-items: center; row-gap: var(--s4); }
  .ground__text { grid-column: 1 / 7; }
  .ground .ground__media { grid-column: 8 / 13; }
  @media (max-width: 900px) {
    .ground__text, .ground .ground__media { grid-column: 1 / -1; }
  }

  .home-cta .cta-band__inner {
    display: grid;
    justify-content: start;
    justify-items: start;
    align-items: start;
    gap: var(--s3);
  }

/* ---------- 3b. contact (was scoped in contact.astro) ---------- */
  .booking__two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
  .booking__direct { font-size:1.2rem; overflow-wrap:anywhere; }
  .field-label { font-family:var(--font-ui); font-size:var(--type-meta); letter-spacing:.08em; color:var(--ink-2); margin-bottom:.7rem; }
  @media (max-width:540px) { .booking__two { grid-template-columns:1fr; } }

/* ============================================================
   4. Corrections, 2026-09-24 build (SPEC-FRONTEND.md sections 4 to 7).
   Only existing tokens are used below; no new colour or font.
   ============================================================ */

/* ---------- header: page links alone inside nav.site-nav; the button outside it ---------- */
.site-head__bar { gap: clamp(0.75rem, 2vw, 2rem); }
.site-nav { margin-left: auto; }
.site-head__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; position: relative; z-index: 110; }
.site-head__cta { padding: 0.62rem 1.25rem; min-height: 48px; font-size: min(var(--type-ui), 0.35rem + 0.7vw); white-space: nowrap; }
.btn--ink { border: 0; }
button.btn { cursor: pointer; }
.nav-toggle { width: auto; min-width: 48px; padding: 0 0.85rem 0 0.75rem; gap: 0.45rem; }
.nav-toggle__label { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 560; letter-spacing: 0.04em; color: var(--ink); }
@media (max-width: 900px) {
  .site-head__cta { font-size: 0.78rem; padding: 0.5rem 0.9rem; }
  .site-head__actions { gap: 0.4rem; }
}
@media (max-width: 420px) {
  .brand { font-size: 1rem; }
  .site-head__cta { font-size: 0.74rem; padding: 0.45rem 0.7rem; letter-spacing: 0.01em; }
  .nav-toggle { padding: 0 0.5rem 0 0.45rem; gap: 0.35rem; }
  .site-head__bar { gap: 0.45rem; }
  .site-head__actions { gap: 0.3rem; }
}
@media (max-width: 340px) {
  /* very narrow phones: let the button and menu drop under the wordmark rather than overflow */
  .site-head__bar { flex-wrap: wrap; row-gap: 0.4rem; }
  .site-head__actions { margin-left: auto; }
}

/* ---------- the quiet echo of the golden thread on interior pages: one static node beside the page title ---------- */
.interior-hero .kicker::before {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold-deep);
  background: transparent;
}

/* ---------- recommendation notes (PROOF only; removed before launch) ---------- */
.rec-note {
  margin-top: var(--s3);
  padding: 0.85rem 1.1rem 0.95rem;
  max-width: 62ch;
  border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper-2) 55%, var(--paper));
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.rec-note::before {
  content: 'Recommendation';
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.4rem;
}
.rec-note p + p { margin-top: 0.5em; }
.rec-note a { color: var(--gold-deep); }
.cta-band .rec-note { color: color-mix(in srgb, var(--paper) 80%, var(--ink)); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.cta-band .rec-note::before, .cta-band .rec-note a { color: var(--gold-light); }
/* Hidden on screen for the preview Dr. Leslie sees (Felix, 2026-10-11): the
   notes stay in the files as the list of what she still has to answer. To show
   them again, delete this line and restore the spacing rule marked below. */
.rec-note { display: none; }

/* honest placeholder text, until she supplies the words */
.placeholder { font-style: italic; font-weight: 420; color: var(--ink-2); }

/* small spacing utilities, so pages carry no inline style */
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.measure { max-width: var(--measure); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- editorial rows without the numeral column ---------- */
.rows--plain .row-item { grid-template-columns: clamp(6rem, 11vw, 9.5rem) minmax(0, 1fr) auto; }
.rows--text .row-item { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 640px) {
  .rows--plain .row-item { grid-template-columns: minmax(0, 1fr) auto; }
  .rows--plain .row-item__copy, .rows--text .row-item__copy { grid-column: 1; }
  .rows--plain .row-item__arr, .rows--text .row-item__arr { grid-column: 2; grid-row: 1; }
  .rows--plain .row-item__plate { grid-column: 1; grid-row: 2; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .rows--plain .row-item { grid-template-columns: 11rem minmax(0, 1fr) auto; }
}

/* ---------- The Practice: the work she offers, as an editorial list ---------- */
.offers { border-top: 1px solid var(--hairline); }
.offer {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 4vw, 5rem);
  row-gap: var(--s2);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-bottom: 1px solid var(--hairline);
}
.offer h3 { font-size: var(--type-row-title); font-weight: 500; line-height: 1.1; }
.offer__body { max-width: 52ch; }
.offer__credit { margin-top: 0.7rem; font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.03em; color: var(--ink-2); }
@media (max-width: 720px) { .offer { grid-template-columns: 1fr; } }

/* ---------- About: three chapters on the timeline component ---------- */
.chapters { gap: var(--s5); }
.chapters li { max-width: 60ch; padding-left: 2.6rem; }
.chapters .tl-meta { margin-top: 0; margin-bottom: 0.6rem; font-size: var(--type-meta); letter-spacing: 0.2em; text-transform: uppercase; }
.chapters .tl-title { font-size: var(--type-display-sm); font-weight: 540; line-height: 1.1; }
.chapters p { color: var(--ink); margin-top: 0.7rem; }

/* ---------- atmospheric plates, offset in the grid (approved plates only) ---------- */
.plate-band { display: block; min-width: 0; }
.plate-band__frame { display: block; position: relative; border-radius: 2px; overflow: hidden; }
.plate-band__frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent); pointer-events: none; }
.plate-band img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; filter: sepia(0.1) saturate(0.9) contrast(0.97) brightness(1.02); }
.plate-band--right { grid-column: 4 / 13; }
.plate-band--left { grid-column: 1 / 10; }
@media (max-width: 900px) { .plate-band--right, .plate-band--left { grid-column: 1 / -1; } }

/* ---------- Media: the book, typeset live over the text-free cover art ---------- */
.book { display: grid; grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cover-art { position: relative; display: block; container-type: inline-size; border-radius: 2px; overflow: hidden; }
.cover-art img { display: block; width: 100%; height: auto; }
.cover-art__titles, .cover-art__author { display: none; }
@supports (container-type: inline-size) { .cover-art__titles, .cover-art__author { display: block; } }
.cover-art__titles { position: absolute; left: 7%; right: 7%; top: 7.5%; text-align: center; pointer-events: none; }
.cover-art__line { display: block; font-family: var(--font-display); font-weight: 500; font-size: 13.4cqw; line-height: 1.1; letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; color: var(--paper); }
.cover-art__line--wide { font-size: 8.45cqw; letter-spacing: 0.115em; }
.cover-art__line .registered-mark { font-size: 0.4em; margin-inline-start: 0.1em; }
.cover-art__byline { display: block; margin-top: 4.2cqw; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: max(12px, 4.6cqw); line-height: 1.4; letter-spacing: 0.02em; color: var(--gold-light); }
.cover-art__author { position: absolute; left: 7%; right: 7%; bottom: 3.8%; font-family: var(--font-display); font-size: max(0.75rem, 3.8cqw); font-weight: 500; line-height: 1; letter-spacing: 0.36em; text-align: center; text-transform: uppercase; white-space: nowrap; color: var(--gold-light); pointer-events: none; }
@media (max-width: 720px) { .book { grid-template-columns: 1fr; } .book .cover-art { max-width: 16rem; } }

/* ---------- Coaching: the frame only, three staggered blocks ---------- */
.frame-blocks { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.frame-block { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(0.25rem, 2.5vw, 2rem); }
.frame-block > div { grid-column: 1 / 8; min-width: 0; }
.frame-block:nth-child(2) > div { grid-column: 4 / 11; }
.frame-block:nth-child(3) > div { grid-column: 6 / 13; }
.frame-block h2 { font-size: var(--type-display-sm); margin-bottom: var(--s2); }
@media (max-width: 900px) { .frame-block > div, .frame-block:nth-child(2) > div, .frame-block:nth-child(3) > div { grid-column: 1 / -1; } }

/* ---------- prose with subheadings (privacy) ---------- */
.prose h2 { font-size: var(--type-display-sm); margin-top: var(--s4); margin-bottom: var(--s2); }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4em; }

/* ---------- the request form ---------- */
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; }
.field input[type='tel'] {
  border: 0;
  border-bottom: 1px solid var(--ink-2);
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.5rem 0.1rem;
  border-radius: 0;
}
.field-hint { font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.field-error { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 560; line-height: 1.4; color: var(--gold-deep); }
.field-error:empty { display: none; }
.field-group[hidden] { display: none; }
.form__privacy { font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.form__privacy a { color: var(--gold-deep); }

/* footer copy blocks (were inline styles) */
.site-foot__tagline { margin-top: 0.9rem; max-width: 38ch; color: color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.site-foot__contact { margin-top: 1.2rem; }
/* row descriptions were display:block inline; CTA band body was inline too */
.row-item__desc { display: block; }
.cta-band__body { margin-top: 1.2rem; max-width: 46ch; }
/* a note between paragraphs keeps the paragraph rhythm after it. Switched off
   while the notes are hidden (see "recommendation notes"), or a hidden note
   would still push the next paragraph down:
.rec-note + p, .rec-note + ul, .rec-note + .btn-row, .rec-note + dl { margin-top: var(--s3); } */
/* short pages (404, thanks) keep the footer at the foot of the screen */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ================================================================
   5. The first screen (2026-09-25). Felix asked for the header to earn its
   keep. The header condenses as you leave the first screen, and on interior
   pages its rule is a gold reading line that fills in as you read. On the
   homepage the hero takes the whole screen and the golden thread from her
   portrait does the reading line's job, so the header's line is hidden there
   (Felix, 2026-09-25).
   ================================================================ */

/* 5a. The living header. It condenses once you scroll, and its bottom edge is
   now the thread (5b), so the ink hairline shadow goes. */
.site-head { transition: background-color 0.35s var(--ease-editorial); }
.site-head.is-scrolled { box-shadow: none; }
.site-head__bar { position: relative; transition: padding 0.35s var(--ease-editorial); }
.site-head.is-scrolled .site-head__bar { padding-block: 0.55rem; }
.reduced-motion .site-head,
.reduced-motion .site-head__bar { transition: none; }

/* 5b. The reading thread. A content-width rule under the masthead that fills
   in thread gold as the visitor reads down the page. A small ring rides its leading end: the same
   ring that opens every interior page's kicker. Decorative only, hidden from
   assistive technology, and absent without JavaScript. */
.site-head__thread { display: none; }
.js .site-head__thread {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--thread-gold) 42%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 88%, transparent);
  pointer-events: none;
}
.site-head__thread-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--thread-gold);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 90ms linear;
}
.site-head__thread-tip {
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--thread-gold);
  background: var(--paper);
  transform: translate(calc(var(--progress, 0) * var(--thread-w, 0px) - 50%), 50%);
  transition: transform 90ms linear;
}
.reduced-motion .site-head__thread-fill,
.reduced-motion .site-head__thread-tip { transition: none; }
/* While the phone menu is open the wordmark is under the overlay, so the
   thread steps aside too. */
.site-nav.is-open ~ .site-head__thread { opacity: 0; }
/* The homepage (the page that holds the story thread) has no reading line: the
   golden thread descending from her portrait already follows the scroll, and one
   device per job is enough (Felix, 2026-09-25). The header markup stays the same
   on every page; only this rule hides the line. Once scrolled, the condensed
   header takes back the plain ink hairline at its foot. */
body:has([data-thread-scope]) .site-head__thread { display: none; }
body:has([data-thread-scope]) .site-head.is-scrolled { box-shadow: 0 1px 0 var(--hairline); }

/* 5c. The homepage's first screen. From tablet-landscape up the hero takes
   the whole height of the screen and centres in it, so the first screen is the
   cover alone; on a short screen it simply grows, nothing is clipped or pinned.
   (A band of links used to sit on the fold; Felix removed it on 2026-09-25 as
   a repeat of the header menu.) Below 900px the page flows as before. */
/* The fixed header carries a rule and a ring at its foot on interior pages,
   so the hero starts a little lower than the header is tall, at every width. */
@media (max-width: 900px) {
  .hero { padding-top: 6.75rem; }
}
@media (min-width: 901px) {
  .hero {
    padding-top: clamp(5.75rem, 8vh, 6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero__grid { width: min(100% - 2 * var(--gutter), var(--page-max)); }
}

/* 5d. The cover (Felix's call, 2026-09-25). The headline runs the full width
   of the page at a size taken from the page's own width, so the long first
   line always fits on one line; the short second line leaves room for her
   portrait, which rises beside it. Her own photograph replaces the reserved
   frame. The golden thread begins under the portrait and runs down through
   the fold into the story. */
.hero__grid { container-type: inline-size; align-items: start; }
.hero .hero__title {
  grid-column: 1 / -1;
  margin-top: 0;
  font-size: var(--type-display-xl);
  font-size: clamp(2.9rem, 12.6cqi, 10.9rem);
  line-height: 0.92;
}
.hero__text { grid-column: 1 / 8; }
.hero .lede { margin-top: 0; max-width: 38ch; }
.hero__media { grid-column: 10 / 13; }
@media (min-width: 901px) {
  .hero__grid { row-gap: var(--s4); }
  /* rises beside the short second line, clear of the first line's descenders */
  .hero__media { margin-top: calc(-0.8 * clamp(2.9rem, 12.6cqi, 10.9rem)); }
}
@media (max-width: 900px) {
  .hero .hero__title { font-size: var(--type-display-xl); line-height: 0.97; }
  .hero__text, .hero__media { grid-column: 1 / -1; }
  .hero__media { max-width: 22rem; }
}

/* A frame that holds a photograph and no caption gives the photograph its
   whole height. Portraits are framed on the upper third, where the face is. */
.photo-frame:not(:has(.caption)) .photo-frame__image { height: 100%; }
.photo-frame__image { object-position: 50% 28%; }
.photo-frame--cover .photo-frame__plate { aspect-ratio: 4 / 5; }
/* A hairline plate border just inside the photograph's edge, in the thread's gold. */
.photo-frame--cover::after {
  content: '';
  position: absolute;
  inset: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--thread-gold) 55%, transparent);
  pointer-events: none;
  z-index: 3;
}

/* The thread's first stretch, from under her portrait down to the foot of the
   hero, where the story's drawn path takes over at the same x. Its position
   and fill come from the same script that measures the chapter knots. Nothing
   shows on load: the stretch extends with scroll and hands over to the story
   path where that path's own draw begins (Felix, 2026-09-25). Without the
   script, or below 901px, nothing shows. */
.hero { position: relative; }
.hero::after {
  content: '';
  position: absolute;
  display: none;
  width: 2px;
  background: var(--thread-gold);
  opacity: 0.82;
  pointer-events: none;
  left: var(--thread-page-x);
  top: var(--thread-top);
  bottom: 0;
  transform-origin: top center;
  transform: scaleY(var(--thread-hero-fill, 0));
  transition: transform 90ms linear;
}
.reduced-motion .hero::after { transition: none; }
@media (min-width: 901px) {
  .js .has-thread-origin .hero::after { display: block; }
  /* the story gets room at the top so the thread can sweep from the portrait to chapter I */
  .story { padding-top: clamp(6rem, 13vw, 13rem); }
}

/* ---------- 5e. About: the record in two columns ----------
   The record behind the work, split by her own description of herself: "holistic
   practitioner" on the left, "multimedia communicator" on the right. At desktop the
   left takes five of the twelve columns and the right takes seven, with one gold
   hairline between them; the right also runs a row longer, so the pair reads as a
   spread and never as two matching cards. Each label sits above its value, and the
   values are set in the display face one step below the door titles of the next
   section, so the two ruled lists never blur into one. Below 901px the columns
   stack, practitioner first. No script; nothing moves. */
.ledgers { margin-top: var(--s5); row-gap: var(--s5); align-items: start; }
.ledger--practice { grid-column: 1 / 6; }
.ledger--public { grid-column: 6 / 13; }
.ledger__head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 430;
  font-size: var(--type-display-sm);
  line-height: 1.15;
  color: var(--gold-deep);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--gold);
}
.ledger__list { margin: 0; }
.ledger__list > div { padding-block: 1.15rem 1.3rem; border-bottom: 1px solid var(--hairline); }
.ledger__list dt {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ledger__list dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: var(--type-display-sm);
  font-weight: 400;
  line-height: 1.22;
  color: var(--ink);
  max-width: 38ch;
  text-wrap: pretty;
}
@media (min-width: 901px) {
  /* the gutter around the gold rule: the grid's own gap plus a little more on each
     side, equal on both, so the rule sits centred between the two columns */
  .ledger--practice { padding-right: var(--s3); }
  .ledger--public {
    padding-left: calc(var(--s3) + clamp(0.25rem, 2.5vw, 2rem));
    border-left: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  }
}
@media (max-width: 900px) {
  .ledger--practice, .ledger--public { grid-column: 1 / -1; }
}

/* ---------- 5f. Homepage: the three doors ----------
   The gold italic service word is the mark, preceded by a short rule.
   Desktop uses the original twelve-column grid: word in columns 1 to 3,
   sentence in 4 to 12, with its arrow inline. Tablet pairs the word and
   sentence with the arrow at the row end; phone puts the word above.
   The whole ruled row is one link. Hover and keyboard focus turn the
   sentence gold, draw a rule under it and nudge the arrow. */
.doors { border-top: 1px solid var(--hairline); }
.door {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.25rem, 2.5vw, 2rem);
  row-gap: 0.6rem;
  align-items: baseline;
  padding-block: clamp(1.6rem, 3.4vw, 2.75rem);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
/* the label matches the chapter folios above (CHAPTER I, II, III) but in full
   ink and a step larger, so a visitor scanning for "Speaking" finds it at once */
.door__label {
  grid-column: 1 / 4;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.door__line {
  grid-column: 4 / 13;
  /* never closer than a margin to the right end of the rule, even at tablet
     widths; lines are balanced so no word is left alone on a last line */
  max-width: min(30ch, 96%);
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 400;
  line-height: 1.14;
  text-wrap: balance;
  transition: color var(--duration-ui) var(--ease-editorial);
}
.door__arr {
  display: inline-block;
  margin-inline-start: 0.45em;
  font-family: var(--font-ui);
  font-size: 0.72em;
  color: var(--gold-deep);
  transition: transform var(--duration-ui) var(--ease-editorial);
}
.door::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-ui) var(--ease-editorial);
}
.door:hover .door__line, .door:focus-visible .door__line { color: var(--gold-deep); }
.door:focus-visible .door__arr { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .door:hover:not(:focus-visible) .door__arr { transform: translateX(3px); }
}
.door:hover::after, .door:focus-visible::after { transform: scaleX(1); }
.door:focus-visible .door__line,
.door:focus-visible .door__arr,
.door:focus-visible::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .door .door__arr { transform: none !important; }
}
.reduced-motion .door__line, .reduced-motion .door__arr, .reduced-motion .door::after { transition: none; }
/* 6. The footer's two ways to reach her, set large (2026-09-26). Label small in
   gold italic, value in the display face; on the shared footer, every page. */
.site-foot__reach { margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.site-foot__reach dt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold-light);
}
.site-foot__reach dd { margin: 0.1rem 0 0; }
.site-foot .site-foot__reach a {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  line-height: 1.2;
  color: var(--paper);
  overflow-wrap: anywhere;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: color 0.2s var(--ease-editorial), border-color 0.2s var(--ease-editorial);
}
.site-foot .site-foot__reach a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* 7. The closing band's right side (2026-09-26): window light bleeding off the
   right edge, full band height, one gold hairline seam. On phones a strip
   across the top, cropped toward the window frame. */
.home-cta--light .cta-band { position: relative; overflow: hidden; }
.cta-light { margin: 0; }
.cta-light img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 901px) {
  .home-cta--light .cta-band__inner { padding-right: 44%; }
  /* The photo's left edge sits at 58% of the page column, not 58% of the window,
     so the words keep the same 56% of the column on any screen. On wide screens
     the old window-based width ate into the text and wrapped it into a thin strip.
     Width = the right margin plus 42% of the column = 50% - 0.08 x column. */
  .home-cta--light .cta-light { position: absolute; top: 0; bottom: 0; right: 0; width: calc(50% - 0.08 * min(100% - 2 * var(--gutter), var(--page-max))); border-left: 1px solid var(--gold); }
}
@media (max-width: 900px) {
  .home-cta--light .cta-band { padding-top: 0; }
  .home-cta--light .cta-light { order: -1; margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); height: 13.75rem; margin-bottom: var(--s3); border-bottom: 1px solid var(--gold); }
  .home-cta--light .cta-light img { object-position: 60% 25%; }
}

/* Phones: the two link lists sit side by side, so the footer is shorter. */
@media (max-width: 540px) {
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__grid > :first-child { grid-column: 1 / -1; }
}

/* 8. Footer, second pass (ideas run 2026-09-26, header and footer):
   - "listen" joins "write" and "text": the show's name a step smaller than the
     email and number so contact still leads, the day and station beneath it.
   - Every page link is a full 48px row to tap (they were 16px).
   - Privacy and Faith Consciousness® move to the bottom line beside the copyright. */
.site-foot .site-foot__reach a.site-foot__show { font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.4rem); }
.site-foot__air {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--paper) 62%, var(--ink));
}
.site-foot ul { gap: 0; }
.site-foot ul a { display: inline-flex; align-items: center; min-height: 48px; }
.site-foot__legal { align-items: center; }
.site-foot__legal-links { display: flex; flex-wrap: wrap; column-gap: 1.6rem; }
.site-foot__legal-links a { display: inline-flex; align-items: center; min-height: 48px; }

/* 9. The phone menu as a contents page (ideas run 2026-09-26).
   - Her name stays on the bar above the open sheet, so the way home never vanishes.
   - The six pages sit left, on hairline rules, each with one line of the site's
     own words under it (copied from the homepage doors, Media and Contact; the
     spans are aria-hidden so each link is still read as its page name).
   - The email and number sit at the foot of the sheet (div.menu-reach, outside
     the nav). While the sheet is open the rest of the page is inert, so the
     keyboard stays inside it (menu.js).
   Desktop never shows the lines or the pair. Without JavaScript neither shows:
   the lines and the pair need html.js, and the sheet never opens. */
.site-nav__line, .menu-reach { display: none; }
@media (max-width: 900px) {
  .brand { position: relative; z-index: 110; }
  .js .site-nav {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 5.75rem var(--gutter) 10.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .site-nav a:not(.btn) {
    display: block;
    padding: 0.8rem 0 0.85rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.65rem;
    line-height: 1.15;
  }
  .js .site-nav a:not(.btn):first-child { border-top: 1px solid var(--hairline); }
  .js .site-nav a:not(.btn)[aria-current='page'] { color: var(--gold-deep); border-bottom-color: var(--hairline); font-style: italic; }
  .js .site-nav__line {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--ink-2);
  }
  .js .menu-reach {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 105;
    padding: 1rem var(--gutter) max(1.1rem, env(safe-area-inset-bottom));
    background: var(--paper-2);
    border-top: 1px solid var(--gold);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease-editorial), visibility 0s 0.3s;
  }
  .js .site-nav.is-open + .menu-reach { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease-editorial) 0.15s, visibility 0s; }
  .menu-reach__list { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 2rem; row-gap: 0.4rem; }
  .menu-reach dt { font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: var(--gold-deep); }
  .menu-reach dd { margin: 0; }
  .menu-reach a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    overflow-wrap: anywhere;
  }
  @media (prefers-reduced-motion: reduce) {
    .js .menu-reach, .js .site-nav.is-open + .menu-reach { transition: none; }
  }
}
/* Narrow phones: the pair stacks, so the sheet keeps more room at its foot; at
   340px and below the bar wraps to two rows, so the list starts lower. */
@media (max-width: 380px) {
  .menu-reach__list { grid-template-columns: 1fr; row-gap: 0.1rem; }
  .menu-reach a { min-height: 40px; font-size: 1.02rem; }
  .js .site-nav { padding-bottom: 12rem; }
}
@media (max-width: 340px) {
  .js .site-nav { padding-top: 8.75rem; }
}

/* 10. The header, second pass (ideas run 2026-09-26, round 2 winner).
   - Her name is set as a nameplate at rest, nearly twice its old size, in the
     same single bar, so the change shows on first load without pushing the
     page down. Once the reader scrolls it leans back to about 22px. The change
     is a scale, not a new type size, so the bar does not re-lay itself, and it
     answers the scroll only; none at all under reduced motion.
   - The links grow and never drop below about 14.5px on tablets, each with a
     44px pressable area; the work pages first, then a short gold dash.
   - The current page is marked in gold italic instead of an underline. */
@media (min-width: 901px) {
  .brand {
    font-size: min(clamp(1.45rem, 0.2rem + 2.4vw, 2.35rem), 44px);
    line-height: 1;
    transform-origin: 0 60%;
    transition: transform 0.35s var(--ease-editorial);
  }
  .site-head.is-scrolled .brand { transform: scale(0.62); }
  .site-nav a:not(.btn) {
    font-size: max(0.9rem, min(0.94rem, 0.3rem + 0.72vw));
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
  .site-nav a[href="/about/"] { position: relative; margin-left: 1.9rem; }
  .site-nav a[href="/about/"]::before {
    content: '';
    position: absolute;
    left: -1.95rem;
    top: 50%;
    width: 1rem;
    height: 1px;
    background: var(--gold);
  }
  .site-nav a:not(.btn)[aria-current='page'] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: max(1rem, min(1.05rem, 0.35rem + 0.8vw));
    color: var(--gold-deep);
    border-bottom-color: transparent;
  }
  .site-nav a:not(.btn):hover { border-bottom-color: var(--gold); }
  .site-head__actions { margin-left: max(0.5rem, min(2rem, 2.2vw)); }
}
@media (prefers-reduced-motion: reduce) {
  .brand { transition: none; }
}
/* Narrow tablets: tighter link spacing, so her name keeps clear air before the links. */
@media (min-width: 901px) and (max-width: 1000px) {
  .site-nav { gap: 0.95rem; }
  .site-nav a[href="/about/"] { margin-left: 1.5rem; }
  .site-nav a[href="/about/"]::before { left: -1.5rem; width: 0.8rem; }
}

/* 11. Practice, 2026-09-27: names carry the session rows without symbols.
   Page-scoped phone, tablet and desktop layouts; all copy remains visible
   without JavaScript, with no entrance motion. */
.practice-page .practice-opening-voice { margin-top: var(--s4); }
.practice-page .practice-opening-voice::before {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--gold);
  margin-bottom: var(--s3);
}
.practice-page .practice-opening-voice blockquote {
  font-size: clamp(1.3125rem, 1.2rem + 0.47vw, 1.625rem);
  font-style: italic;
  line-height: 1.35;
  max-width: 42ch;
}
.practice-page .practice-voice-credit {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1.65;
  color: var(--ink-2);
}
.practice-page .practice-opening-voice figcaption,
.practice-page .practice-reading figcaption { margin-top: var(--s2); }

/* Session names and content form two columns until the phone breakpoint. */
.practice-page .offer {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
  scroll-margin-top: 7rem;
}
.practice-page .practice-offer-heading { min-width: 0; }
.practice-page .practice-offers-jumps { display: none; }
.practice-page .practice-reading {
  margin-top: var(--s4);
  padding-left: var(--s3);
  border-left: 1px solid var(--gold);
}
.practice-page .practice-reading__label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--gold-deep);
  margin-bottom: var(--s2);
}
.practice-page .practice-reading blockquote {
  font-size: clamp(1.25rem, 1.1rem + 0.28vw, 1.375rem);
  line-height: 1.5;
}
.practice-page .practice-reading__coda { margin-top: var(--s3); font-style: italic; }

/* A gold top rule and quiet row rules echo the About record. Credits form a
   left margin on wide screens, then sit above their own quote on phones. */
.practice-page .practice-voices__ledger { border-top: 1px solid var(--gold); }
.practice-page .practice-voices__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--hairline);
}
.practice-page .practice-voices__row figcaption { max-width: 28ch; padding-top: 0.35rem; }
.practice-page .practice-voices__row blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 0.9rem + 0.95vw, 1.75rem);
  line-height: 1.35;
  max-width: 55ch;
  text-wrap: pretty;
}
.practice-page .practice-fit .checklist {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.1rem + 0.45vw, 1.5rem);
  line-height: 1.45;
  gap: var(--s3);
}
/* Tablet retains paired content, including landscape, independently of the
   shared 900px stacking rule. The opening divides usable space 58:42. */
@media (600px <= width < 1100px) {
  .practice-page .interior-hero__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    align-items: start;
  }
  .practice-page .interior-hero__copy { grid-column: 1; }
  .practice-page .interior-hero__media { grid-column: 2; max-width: none; }
  .practice-page .offer { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .practice-page .editorial-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-page .editorial-split__copy { grid-column: 1; }
  .practice-page .editorial-split__media { grid-column: 2; }
  .practice-page .details-list > div { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); }
}
/* Phone puts the photograph in a landscape band and the request sequence
   before the ledger. Recommendation boxes remain visible at every size. */
@media (width < 600px) {
  .practice-page .interior-hero__media { max-width: none; }
  .practice-page .photo-frame__plate { aspect-ratio: 4 / 3; }
  .practice-page .offer { grid-template-columns: minmax(0, 1fr); }
  .practice-page .practice-offers-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s3);
    list-style: none;
    padding: 0;
    margin-top: var(--s2);
  }
  .practice-page .practice-offers-jumps a {
    display: inline-block;
    min-height: 48px;
    padding-block: 0.65rem;
  }
  .practice-page .practice-voices__row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .practice-page .practice-voices__row figcaption { max-width: none; padding-top: 0; }
  .practice-page .practice-begin { order: -1; }
}

/* ============================================================
   12. Devices, 2026-09-27
   The seven selected amendments: phone below 600, tablet 600 to
   1099, desktop unchanged except the service-word doors.
   ============================================================ */

/* 1. Words replace the abstract drawings. The entire row stays clickable. */
.door { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
.door__label {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 1.5vw, 3.5rem);
  font-style: italic;
  font-weight: 420;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gold-deep);
}
.door__label::before { content: ''; width: var(--s3); height: 1px; background: var(--gold); flex: none; }
.door__line { grid-column: 2; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); max-width: none; }
.door__arr { flex: none; margin: 0; }
@media (600px <= width < 1100px) {
  .door { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .door__label { font-size: 2.25rem; }
  .door__line { font-size: var(--type-display-sm); }
}
@media (width < 600px) {
  .door { grid-template-columns: minmax(0, 1fr); padding-block: var(--s3); gap: var(--s2); }
  .door__label, .door__line { grid-column: 1; }
  .door__label { font-size: 2rem; }
  .door__line { font-size: var(--type-display-sm); }
}

/* 2. A two-tier tablet masthead, reusing the six-link nav. The stronger
   selectors also retain the row when the inline noscript fallback applies. */
@media (600px <= width <= 900px) {
  .site-head .site-head__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s2); padding-block: var(--s2) 0; }
  .site-head.is-scrolled .site-head__bar { padding-block: var(--s1) 0; }
  .site-head .brand { grid-column: 1; grid-row: 1; font-size: 1.5rem; justify-self: start; }
  .site-head .site-head__actions { grid-column: 2; grid-row: 1; margin-left: 0; padding-bottom: var(--s1); }
  .site-head .site-head__cta { font-size: 1rem; }
  .site-head .site-nav {
    grid-column: 1 / -1; grid-row: 2; order: 3;
    position: static; inset: auto; width: 100%; margin: 0; padding: 0;
    display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;
    gap: var(--s1); border-top: 1px solid var(--hairline); background: none;
    transform: none; visibility: visible; transition: none; overflow: visible;
  }
  .site-head .site-nav a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 48px; min-width: 48px;
    font-family: var(--font-ui); font-size: 1rem; line-height: 1.2;
    padding: 0; border: 0; white-space: nowrap;
  }
  .js .site-head .site-nav a:not(.btn):first-child { border-top: 0; }
  .site-head .site-nav a:not(.btn)[aria-current='page'] { font-family: var(--font-display); font-style: italic; color: var(--gold-deep); }
  .site-head .site-nav a[href='/about/'] { position: relative; margin-left: var(--s3); }
  .site-head .site-nav a[href='/about/']::before { content: ''; position: absolute; left: calc(-1 * var(--s3)); top: 50%; width: var(--s2); height: 1px; background: var(--gold); }
  .site-head .nav-toggle, .site-head .site-nav__line, .site-head .menu-reach { display: none; }
  .hero, .interior-hero { padding-top: 10rem; }
}

/* 3. Reserved frames keep their caption and mark, without becoming a large
   empty tablet panel. Real portraits are explicitly outside these selectors,
   and so are the flat frames of section 14, which set their own size. */
@media (width < 600px) {
  .photo-frame:not(.photo-frame--flat):has(img[src*='photo-reservation']) .photo-frame__plate { aspect-ratio: 16 / 9; }
}
@media (600px <= width < 1100px) {
  .photo-frame:not(.photo-frame--flat):has(img[src*='photo-reservation']) { width: 100%; max-width: 280px; }
  .chapter--with-media { grid-template-columns: minmax(0, 60fr) minmax(0, 36fr); column-gap: 4%; align-items: start; }
  .chapter--with-media .chapter__head { grid-column: 1 / -1; }
  .chapter--with-media .chapter__body { grid-column: 1; }
  .chapter--with-media .chapter__media { grid-column: 2; align-self: start; }
  .ground { grid-template-columns: minmax(0, 60fr) minmax(0, 36fr); column-gap: 4%; align-items: start; }
  .ground__text { grid-column: 1; }
  .ground .ground__media { grid-column: 2; }
  .speaking-opening { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 36fr); column-gap: 4%; align-items: start; width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: var(--s5); }
  .speaking-opening > .interior-hero { padding: 0; }
  .speaking-opening > .interior-hero > .wrap, .speaking-opening > .wrap { width: 100%; }
  .speaking-opening > .wrap { display: block; }
}
@media (600px <= width <= 900px) {
  .speaking-opening { padding-top: 10rem; }
}

/* 4. Tablet partners keep prose at sixty parts, imagery at thirty-six.
   Chapter labels take the full line above, leaving the reading column intact. */
@media (600px <= width < 1100px) {
  .hero__grid, .interior-hero__grid:has([data-labyrinth-key='about.hero.portrait']),
  .editorial-split:has(> .plate-band) { grid-template-columns: minmax(0, 60fr) minmax(0, 36fr); column-gap: 4%; align-items: start; }
  .hero__text, .interior-hero__grid:has([data-labyrinth-key='about.hero.portrait']) .interior-hero__copy,
  .editorial-split:has(> .plate-band) .editorial-split__copy { grid-column: 1; }
  .hero__media, .interior-hero__grid:has([data-labyrinth-key='about.hero.portrait']) .interior-hero__media,
  .editorial-split:has(> .plate-band) .editorial-split__media { grid-column: 2; margin-top: 0; max-width: none; align-self: start; }
  .hero { min-height: 0; padding-bottom: var(--s5); }
  .hero .hero__title { font-size: clamp(2.9rem, 1rem + 5.5vw, 5rem); }
  .chapter { grid-template-columns: minmax(0, 60fr) minmax(0, 36fr); column-gap: 4%; }
  .chapter__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s3); }
  .chapter__head .folio, .chapter__head .kicker { margin-bottom: 0; }
  .chapter__body { grid-column: 1 / -1; }
  .chapter__body h2 { margin-top: 0; }
  .chapter--with-media .chapter__body { grid-column: 1; }
  /* The thread needs its original label rail; this tablet layout has labels above. */
  .thread, .js .has-thread-origin .hero::after { display: none; }
  .story { padding-top: var(--s5); }
  .home-cta--light .cta-band { padding-top: var(--s6); }
  .home-cta--light .cta-band__inner { grid-template-columns: minmax(0, 60fr) minmax(0, 36fr); column-gap: 4%; padding-right: 0; }
  .home-cta--light .cta-band__inner > div { grid-column: 1; }
  .home-cta--light .cta-light { position: static; grid-column: 2; grid-row: 1 / 3; order: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 0; border: 0; }
}
@media (width < 600px) {
  /* Flat frames (section 14) keep their own shape whatever photograph they hold. */
  .photo-frame:not(.photo-frame--flat):has(img[src*='portrait-leslie']) { width: min(100%, 56svh); }
  .photo-frame:not(.photo-frame--flat):has(img[src*='portrait-leslie']) .photo-frame__plate { aspect-ratio: 4 / 5; }
  .plate-band img { aspect-ratio: 16 / 9; }
  .home-cta--light .cta-light { height: auto; aspect-ratio: 16 / 9; }
}

/* 5. Two ledgers and split ruled rows use the tablet width without cards. */
@media (600px <= width < 1100px) {
  .ledgers { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s3); }
  .ledger--practice { grid-column: 1; padding-right: 0; }
  .ledger--public { grid-column: 2; padding-left: var(--s3); border-left: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
  .rows--text .row-item__copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: var(--s4); width: 100%; }
  .rows--text .row-item__desc { margin-top: 0; }
  .editorial-split:has([data-labyrinth-key='media.kit.title']) > .editorial-split__copy { grid-column: 1 / -1; }
  .details-list > div { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
  .editorial-split:has(> .plate-band) .details-list > div { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); }
}

/* 6. A shorter phone rhythm, retaining the body measure and every note. */
@media (width < 600px) {
  .section, .section--tight { padding-block: var(--s4); }
  .interior-hero { padding-bottom: var(--s4); }
  .chapter { padding-block: var(--s3); row-gap: var(--s2); }
  .chapter__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s2); }
  .chapter__head .folio, .chapter__head .kicker { margin-bottom: 0; }
  .chapter__head .kicker { gap: var(--s1); }
  .chapter__head .kicker::before { width: var(--s2); }
  .chapter__body h2 { margin-top: 0; }
  .hero__grid { row-gap: var(--s3); }
  .hero__cta { margin-top: var(--s3); }
  .kicker { margin-bottom: var(--s2); }
  .editorial-split { row-gap: var(--s3); }
  .chapters { gap: var(--s3); }
  .ledgers { margin-top: var(--s3); row-gap: var(--s4); }
  .ledger__list > div { padding-block: var(--s2); }
  .frame-blocks { gap: var(--s4); }
  .cta-band { padding-block: var(--s4); }
  .home-cta--light .cta-light { aspect-ratio: 5 / 2; margin-bottom: var(--s1); }
  .plate-band img { aspect-ratio: 5 / 2; }
  .site-foot { padding-top: var(--s4); }
  .mt-5 { margin-top: var(--s4); }
  .cta-band .display-lg { font-size: var(--type-display-md); }
}
/* Device touch areas and body notes. Footer ink retains its inline underline;
   its invisible extension supplies the pressable height (amendment 18).
   Metadata keeps its existing hierarchy; prose is at least 16px. */
@media (width < 1100px) {
  .brand { display: inline-flex; align-items: center; min-height: 48px; }
  .site-foot a { min-width: 48px; }
  .site-foot .site-foot__reach a { position: relative; }
  .site-foot .site-foot__reach a::after { content: ''; position: absolute; inset: -.5rem 0; min-height: 48px; }
  .note, .field-hint, .form__privacy { font-size: 1rem; }
  /* 20. Centre whole-line link text in its existing pressable box. */
  main a.standalone-link { display: inline-flex; align-items: center; min-height: 48px; padding-block: var(--s1); }
  .field input:not([type='radio']) { min-height: 48px; }
  .menu-reach a { min-height: 48px; }
  .site-nav a { min-width: 48px; }
}

/* 7. Phone contents use the existing headings, with room for the sticky bar. */
.device-jumps { display: none; }
@media (width < 600px) {
  .device-jumps { display: grid; list-style: none; padding: 0; margin-bottom: var(--s2); }
  .device-jumps a { display: flex; align-items: center; min-height: 48px; padding-block: var(--s1); text-decoration-color: var(--gold); }
  h2[id] { scroll-margin-top: 10rem; }
}
/* Wrap checks: balance the split-row headings, and retain a complete first
   cover line on the narrowest phone without editing the words. */
@media (width < 1100px) {
  .row-item__title { text-wrap: balance; }
}
/* 9. Preserve the original service-name sizes, balancing their lines. */
@media (width < 1100px) {
  .practice-page .offer h3 { text-wrap: balance; }
}

/* 8. The landscape-tablet cover retains the original composition and thread,
   with breathing room beneath the single-row masthead. */
@media (901px <= width < 1100px) {
  .hero { min-height: 100vh; min-height: 100svh; padding-top: 8rem; padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }
  .hero__grid { grid-template-columns: repeat(12, 1fr); column-gap: clamp(0.25rem, 2.5vw, 2rem); }
  .hero .hero__title { font-size: clamp(2.9rem, 12.6cqi, 10.9rem); }
  .hero__text { grid-column: 1 / 8; }
  .hero__media { grid-column: 10 / 13; margin-top: calc(-0.8 * clamp(2.9rem, 12.6cqi, 10.9rem)); }
  .thread, .js .has-thread-origin .hero::after { display: block; }
}

/* 14. Desktop door sentences share the chapter text's original column. */
@media (width >= 1100px) {
  .door { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .door__label { grid-column: 1 / 4; }
  .door__line { grid-column: 4 / 13; display: block; max-width: min(30ch, 96%); }
  .door__arr { margin-inline-start: .45em; }
}

/* 15. Larger phones regain headline presence without changing 320px. */
@media (375px <= width < 600px) {
  .home-cta--light .cta-band .display-lg { font-size: clamp(2.375rem, 1.25rem + 4.8vw, 2.5rem); }
}

/* 16. With no fixed masthead, avoid reserving its height a second time. */
@media (600px <= width <= 900px) {
  html:not(.js) .interior-hero, html:not(.js) .speaking-opening { padding-top: var(--s5); }
  html:not(.js) .speaking-opening > .interior-hero { padding-top: 0; }
}

/* 17. Align the plate to the page edge and give phone contents breathing room. */
@media (600px <= width < 1100px) {
  .speaking-opening .photo-frame { justify-self: end; }
}
@media (width < 600px) {
  .speaking-opening + .device-jumps { margin-top: var(--s3); }
  [data-labyrinth-key='about.hero.portrait'] { object-position: 50% 20%; }
}

/* 19. The phone legal line keeps its original full-width measure. Privacy's
   hit width extends invisibly instead of consuming the small text gap. */
@media (width < 600px) {
  .site-foot__legal { column-gap: var(--s1); }
  .site-foot__legal-links { column-gap: var(--s2); }
  .site-foot__legal-links a { position: relative; min-width: 0; }
  .site-foot__legal-links a::after { content: ''; position: absolute; inset: 0; min-width: 48px; min-height: 48px; }
}

/* 21. Tablet sections meet with 48px on each side of the boundary, rather
   than the desktop fluid spacing. The upright cover needs less trailing air. */
@media (600px <= width < 1100px) {
  .section, .section--tight, .chapter, .cta-band,
  .home-cta--light .cta-band { padding-block: var(--s5); }
}
@media (600px <= width <= 900px) {
  .hero { padding-bottom: var(--s3); }
  .story { padding-top: var(--s3); }
}

/* 13. The phone held sideways, 2026-10-12. All new layout rules below are
   confined to the short landscape band selected by Felix. */
@media (600px <= width <= 900px) and (height <= 500px) {
  /* The narrow phone held sideways gets a single slim bar and the existing
     sheet; its tablet link row would consume a third of the screen. */
  .js .site-head .site-head__bar,
  .js .site-head.is-scrolled .site-head__bar {
    display: flex; flex-wrap: nowrap; padding-block: 0.25rem;
    min-height: 56px; max-height: 64px;
  }
  .js .site-head .brand { font-size: 1.25rem; }
  .js .site-head .site-head__actions {
    display: flex; align-items: center; gap: var(--s1); padding: 0;
    position: relative; z-index: 110;
  }
  .js .site-head .site-head__cta { min-height: 48px; padding: 0.65rem 1rem; font-size: 0.875rem; }
  .js .site-head .nav-toggle { display: inline-flex; }
  .js .site-head .site-nav {
    position: fixed; inset: 0; width: 100%; margin: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-flow: column;
    align-content: center; justify-content: stretch; align-items: stretch;
    gap: 0 var(--s3); padding: 64px var(--gutter) 90px;
    border: 0; background: var(--paper); overflow: hidden;
    transform: translateY(-100%); visibility: hidden;
    transition: transform 0.45s var(--ease-editorial), visibility 0s 0.45s;
  }
  .js .site-head .site-nav.is-open { transform: translateY(0); visibility: visible; transition: transform 0.45s var(--ease-editorial), visibility 0s; }
  .js .site-head .site-nav a:not(.btn) {
    display: flex; align-items: center; min-height: 48px; min-width: 0;
    padding: 0; border: 0; border-bottom: 1px solid var(--gold);
    font-family: var(--font-display); font-size: clamp(1.25rem, 5vh, 1.55rem);
    line-height: 1.1; white-space: normal;
  }
  .js .site-head .site-nav a:not(.btn):first-child { border-top: 0; }
  .js .site-head .site-nav a[href='/about/'] { margin: 0; }
  .js .site-head .site-nav a[href='/about/']::before,
  .js .site-head .site-nav__line { display: none; }
  .js .site-head .menu-reach { display: block; padding-block: 0.25rem; }
  .js .site-head .menu-reach__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .js .site-head .menu-reach dt { font-size: 0.75rem; }
  .js .site-head .menu-reach a { font-size: 1rem; min-height: 48px; }

  /* Without script, a phone held sideways keeps the six page links visible
     in the in-flow row already provided by each page's noscript fallback. */
  html:not(.js) .site-head .site-head__bar { display: flex; flex-wrap: wrap; padding-block: var(--s1); max-height: none; }
  html:not(.js) .site-head .site-nav {
    position: static; display: flex; flex-flow: row wrap; order: 3; width: 100%;
    gap: 0 var(--s2); padding: 0; border: 0; transform: none; visibility: visible;
  }
  html:not(.js) .site-head .site-nav a:not(.btn) { font-family: var(--font-ui); font-size: 1rem; border: 0; }
  html:not(.js) .site-head .site-head__actions { margin-left: auto; padding: 0; }
  html:not(.js) .site-head .nav-toggle { display: none; }
}

@media (600px <= width < 1100px) and (height <= 500px) {
  /* A phone held sideways reads the headline across its width, then a compact
     picture, words and actions row within the short first screen. */
  .hero, .interior-hero { min-height: 0; padding-top: calc(64px + var(--s2)); padding-bottom: var(--s3); }
  .hero { display: block; justify-content: initial; }
  .interior-hero h1, .hero .hero__title {
    max-width: none; margin-top: 0;
    font-size: clamp(2rem, 9.5svh, 3.125rem); line-height: 1.03;
  }
  .interior-hero .kicker { margin-bottom: var(--s1); }
  .interior-hero .lede { margin-top: 0; font-size: clamp(1rem, 4.4svh, 1.2rem); line-height: 1.4; }
  .hero .lede { font-size: clamp(1rem, 4.4svh, 1.2rem); line-height: 1.4; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 19fr) minmax(11rem, 11fr); gap: var(--s2); align-items: start; }
  .hero .hero__title { grid-column: 1 / -1; grid-row: 1; white-space: nowrap; }
  .hero .hero__title .line { display: inline; }
  .hero__text { display: contents; }
  .hero__media { grid-column: 1; grid-row: 2; width: min(100%, 9.5rem); margin: 0; }
  .hero .lede { grid-column: 2; grid-row: 2; max-width: none; }
  .hero__cta { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); margin: 0; }
  .hero__cta .btn { min-height: 48px; padding: 0.5rem 0.9rem; font-size: 0.85rem; justify-content: center; }
  .hero__media .photo-frame__plate { aspect-ratio: 4 / 5; }
  .hero__media .photo-frame__image { object-position: 50% 20%; }

  /* The About and Practice openings on a phone held sideways give the title
     its own line and place the portrait or reserved slip beside the words. */
  .interior-hero__grid { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: var(--s1) var(--s3); align-items: start; }
  .interior-hero__grid:has([data-labyrinth-key='about.hero.portrait']) { grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); }
  .interior-hero__copy { display: contents; }
  .interior-hero__copy > .kicker { grid-column: 1 / -1; grid-row: 1; }
  .interior-hero__copy > h1 { grid-column: 1 / -1; grid-row: 2; }
  .interior-hero__copy > .lede { grid-column: 2; grid-row: 3; }
  .interior-hero__copy > .lede + .lede,
  .interior-hero__copy > .practice-opening-voice { grid-column: 2; grid-row: 4; }
  .interior-hero__copy > .lede + .lede { margin-top: 0; }
  .interior-hero__media { grid-column: 1; grid-row: 3 / span 2; width: min(100%, 10rem); max-width: none; margin: 0; }
  .interior-hero__media .photo-frame:has(img[src*='portrait-leslie']) .photo-frame__plate { aspect-ratio: 4 / 5; }
  .interior-hero__media .photo-frame__image { object-position: 50% 20%; }
  .interior-hero__grid:has([data-labyrinth-key='about.hero.portrait']) .interior-hero__media { grid-column: 1; grid-row: 3 / span 2; }
  .practice-page .interior-hero__grid { grid-template-columns: minmax(11rem, 1fr) minmax(0, 2fr); }
  .practice-page .interior-hero__copy,
  .practice-page .interior-hero__media { grid-column: auto; }
  .practice-page .interior-hero__media { grid-column: 1; width: min(100%, 13rem); }
  .practice-page .interior-hero__media .photo-frame__plate { aspect-ratio: 2 / 1; }

  /* On picture-free openings, a phone held sideways keeps the words at a
     reading width and puts an existing action beside them when present. */
  .interior-hero:not(:has(.interior-hero__grid)) > .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s1) var(--s3); align-items: start;
  }
  .interior-hero:not(:has(.interior-hero__grid)) .kicker,
  .interior-hero:not(:has(.interior-hero__grid)) h1 { grid-column: 1 / -1; }
  .interior-hero:not(:has(.interior-hero__grid)) .lede { grid-column: 1; grid-row: 3; max-width: 48ch; }
  .interior-hero:not(:has(.interior-hero__grid)) .btn-row,
  .interior-hero:not(:has(.interior-hero__grid)) p:has(> .btn) { grid-column: 2; grid-row: 3; margin: 0; }
  .interior-hero:not(:has(.interior-hero__grid)) .btn-row { flex-direction: column; gap: var(--s1); }
  .interior-hero:not(:has(.interior-hero__grid)) .btn { min-height: 48px; padding-block: 0.6rem; }
  .speaking-opening { display: block; padding: 0 0 var(--s2); width: auto; }
  .speaking-opening > .interior-hero { padding-top: calc(64px + var(--s2)); padding-bottom: var(--s2); }
  .speaking-opening > .interior-hero > .wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); }
  .speaking-opening > .wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); }
  .speaking-opening .photo-frame { justify-self: start; }

  /* The phone held sideways uses the existing jump words as a ruled contents
     line; the new Media links are otherwise hidden by their HTML attribute. */
  .device-jumps, .practice-page .practice-offers-jumps, .media-jumps[hidden] {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0 var(--s2); list-style: none; padding: 0;
    margin-block: var(--s1) var(--s2);
    border-block: 1px solid var(--gold);
  }
  .practice-page .practice-offers-jumps { margin-top: var(--s2); }
  .device-jumps a, .practice-page .practice-offers-jumps a, .media-jumps a {
    display: inline-flex; align-items: center; min-height: 48px;
    padding: 0 var(--s1); font-family: var(--font-ui); font-size: 1rem;
    text-decoration: none;
  }
  .device-jumps a:hover, .practice-page .practice-offers-jumps a:hover, .media-jumps a:hover { text-decoration: underline; }
  .device-jumps + .section, .media-jumps + .section { padding-top: var(--s3); }
  h2[id], .practice-page .offer[id] { scroll-margin-top: 6rem; }

  /* Reserved body photographs become short slips beside their text on the
     phone held sideways, keeping the mark and caption readable. */
  main .photo-frame:not(.photo-frame--flat):has(img[src*='photo-reservation']):not(.interior-hero .photo-frame) {
    width: min(100%, 16rem); max-width: 16rem;
  }
  main .photo-frame:not(.photo-frame--flat):has(img[src*='photo-reservation']):not(.interior-hero .photo-frame) .photo-frame__plate { aspect-ratio: 8 / 3; max-height: 100px; }
  main .photo-frame:has(img[src*='photo-reservation']) .photo-frame__monogram { font-size: clamp(2.25rem, 8svh, 3rem); }
  main .photo-frame:not(.photo-frame--flat):has(img[src*='photo-reservation']) .photo-frame__label { font-size: 0.75rem; }
  .plate-band img, .home-cta--light .cta-light img { max-height: 55svh; object-fit: cover; }
  .plate-band__frame, .home-cta--light .cta-light { max-height: 55svh; overflow: hidden; }

  /* The book stays beside its words at every sideways-phone width; its live
     cover lettering scales with the capped cover instead of becoming tall. */
  .book { grid-template-columns: minmax(0, min(12rem, 44svh)) minmax(0, 1fr); gap: var(--s3); align-items: start; }
  .book .cover-art { width: 100%; max-width: none; }
  .book .cover-art img { max-height: 60svh; object-fit: contain; }
  .book .cover-art__author { font-size: 0.7rem; letter-spacing: 0.12em; }

  /* The phone held sideways arranges the shared footer in three columns:
     name and write, text and listen, then both existing page-link groups. */
  .site-foot { padding-block: var(--s2) var(--s1); font-size: 1rem; }
  .site-foot__grid {
    display: grid; grid-template-columns: minmax(0, 33fr) minmax(0, 32fr) minmax(0, 35fr);
    gap: var(--s1) var(--s2); align-items: start;
  }
  .site-foot__grid > :first-child, .site-foot__reach { display: contents; }
  .site-foot__brand { grid-column: 1; grid-row: 1; font-size: 1.25rem; }
  .site-foot__tagline { grid-column: 1; grid-row: 2; margin: 0; line-height: 1.35; }
  .site-foot__reach > div:first-child { grid-column: 1; grid-row: 3; }
  .site-foot__reach > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .site-foot__reach > div:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
  .site-foot__reach dt { font-size: 1rem; }
  .site-foot .site-foot__reach a,
  .site-foot .site-foot__reach a.site-foot__show { font-size: 1rem; line-height: 1.25; }
  .site-foot__air { font-size: 1rem; line-height: 1.25; }
  .site-foot__grid > :nth-child(2), .site-foot__grid > :nth-child(3) {
    grid-column: 3; grid-row: 1 / span 3; min-width: 0; width: 50%;
  }
  .site-foot__grid > :nth-child(2) { justify-self: start; padding-right: var(--s1); }
  .site-foot__grid > :nth-child(3) { justify-self: end; padding-left: var(--s1); }
  .site-foot ul a { min-height: 48px; line-height: 1.2; }
  .site-foot__legal { flex-wrap: nowrap; gap: var(--s1); margin-top: var(--s1); padding-top: var(--s1); }
  .site-foot__legal-links { flex-wrap: nowrap; gap: var(--s2); }
}

@media (901px <= width < 1100px) and (height <= 500px) {
  /* The wider phone held sideways keeps its original one-row header, so its
     opening starts below that taller bar rather than under its links. */
  .hero, .interior-hero, .speaking-opening > .interior-hero { padding-top: calc(86px + var(--s2)); }
}

/* Adopted October 12 isolated CSS candidate, after Felix found its first pass
   too subtle. The same Golden Hour cover and story become easier to read at a
   glance: give her real portrait more presence on desktop, and let the
   chapter titles use the display-md role already present in their markup.
   These are homepage refinements, not a replacement visual system. */
@media (min-height: 601px) {
  .story .chapter__body.prose {
    font-size: var(--type-lede);
    line-height: 1.6;
  }
  .story .chapter__body h2 {
    font-size: var(--type-display-md);
    line-height: 1.1;
    max-width: 22ch;
  }
}
@media (min-width: 1100px) and (min-height: 601px) {
  .hero__media { grid-column: 9 / 13; }
}

/* Authorized refinement, 2026-10-13. Golden Hour stays the visual authority.
   Upright phone cover: title across, Leslie beside her words, invitation below.
   The portrait is encountered before the visitor scrolls through the biography. */
@media (width < 600px) {
  .hero { min-height: 0; padding-top: 6.75rem; padding-bottom: var(--s4); }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s3) var(--s2); align-items: start; }
  .hero .hero__title { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: clamp(2rem, 1.2rem + 4.8vw, 2.85rem); line-height: 1.02; }
  .hero__text { display: contents; }
  .hero .lede { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--type-body); line-height: 1.5; }
  .hero__media { grid-column: 1; grid-row: 2; width: 100%; max-width: none; margin: 0; }
  .hero__media .photo-frame { width: 100%; }
  .hero__media .photo-frame__plate { aspect-ratio: 4 / 5; }
  .hero__cta { grid-column: 1 / -1; grid-row: 3; margin: 0; gap: var(--s1); flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__cta .btn--line { border-color: transparent; background: none; text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: .3em; }
  /* Keep the improved chapter hierarchy without turning every paragraph into
     lead type on a narrow screen. The story stays shorter and easy to read. */
  .story .chapter__body.prose { font-size: var(--type-body); line-height: 1.65; }
  .story .chapter__body h2 { font-size: var(--type-display-md); line-height: 1.15; }
}

/* Speaking: invitation and evidence share the cover on tablet and desktop.
   The only copy change is splitting her existing provisional paragraph. */
.speaking-invite { margin-top: var(--s3); }
.speaking-support { margin-top: var(--s3); max-width: 54ch; color: var(--ink-2); }
@media (width >= 1100px) {
  .speaking-opening { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: center; width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding-top: clamp(8rem, 14vh, 10rem); padding-bottom: var(--s5); }
  .speaking-opening > .interior-hero { padding: 0; }
  .speaking-opening > .interior-hero > .wrap, .speaking-opening > .wrap { width: 100%; }
  .speaking-opening > .wrap { display: block; }
  .speaking-opening .photo-frame { width: 100%; grid-column: auto; }
  .speaking-opening .photo-frame__plate { aspect-ratio: 4 / 3; }
}
@media (width < 600px) {
  .speaking-opening .interior-hero { padding-top: 6.75rem; padding-bottom: var(--s3); }
  .speaking-opening .interior-hero h1 { margin-top: var(--s1); }
  .speaking-opening .interior-hero .lede { font-size: var(--type-body); line-height: 1.6; margin-top: var(--s3); }
  .speaking-support { font-size: var(--type-body); line-height: 1.6; }
  .speaking-opening .photo-frame { width: 100%; }
}
@media (600px <= width < 1100px) and (height <= 500px) {
  /* Supporting words stay below the invitation row on a phone held sideways. */
  .speaking-support { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s2); }
}

/* Content-preview labels describe missing inputs, never Leslie's offer.
   All colours and type come from the existing system. */
.preview-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-top: var(--s3); padding-block: var(--s2); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--hairline); color: var(--ink-2); font-family: var(--font-ui); font-size: var(--type-ui); line-height: 1.6; }
.preview-note > span { flex: none; font-weight: 600; color: var(--gold-deep); }
.speaking-talks-preview .rows { margin-top: var(--s2); }
.speaking-talks-preview .preview-note, .coaching-page .preview-note { border-bottom: 0; }
.speaking-talks-preview .row-item { padding-block: var(--s3); }
.speaking-talks-preview .row-item__title { font-size: var(--type-display-sm); }
.coaching-invite { margin-top: var(--s3); }
.coaching-page .interior-hero { padding-bottom: var(--s4); }
.coaching-page .interior-hero + .section { padding-top: var(--s4); }
.coaching-page .frame-blocks { gap: 0; }
.coaching-page .frame-block { display: block; padding-block: var(--s3); border-top: 1px solid var(--hairline); }
.coaching-page .frame-block:first-child { border-top: 0; }
.coaching-page .frame-block > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s1) var(--s4); }
.coaching-page .frame-block .kicker { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.coaching-page .frame-block h2, .coaching-page .frame-block .placeholder { grid-column: 2; margin: 0; }
@media (width < 600px) {
  .coaching-page .interior-hero { padding-top: 6.75rem; }
  .coaching-page .interior-hero .lede { font-size: var(--type-body); line-height: 1.6; }
  .coaching-page .frame-block > div { display: block; }
  .coaching-page .frame-block .kicker { margin-bottom: var(--s2); }
  .coaching-page .frame-block h2 { margin-bottom: var(--s1); }
}
.preview-note--form { margin-top: 0; margin-bottom: 0; }
.btn:disabled { cursor: not-allowed; background: var(--ink-2); color: var(--paper); transform: none; }
.btn:disabled .arr { transform: none; }

@media (600px <= width < 1100px) and (height <= 500px) {
  /* The preview disclosure shares the complete contents row sideways; its
     single gold rule aligns with the full-width detail rows beneath it. */
  .coaching-page .interior-hero .preview-note { grid-column: 1 / -1; }
}

/* ============================================================
   14. Proof, 2026-10-18: comp 3a (the homepage story) and comp 1c
   (Media) from DLW Comps. Each comp is drawn at five sizes and each
   size gets its own layout here; the sizes in between flow:
     phone            under 600 wide (drawn at 390)
     phone sideways   600 to 1099 wide, 500 tall or less (drawn at 844)
     tablet upright   600 to 900 wide, taller than 500 (drawn at 820)
     tablet sideways  wider than 900 to 1279 wide, taller than 500
                      below 1100 (drawn at 1180)
     desktop          1280 and up (drawn at 1280)
   The comps draw 1180 and 1280 differently, so tablet sideways reaches
   past the site's 1100 desktop line. On desktop the drawn column keeps
   its width and centres; from 1440 it grows with the root size (section
   2). Fluid sizes are anchored to their band's drawn width.
   ============================================================ */

/* ---------- 14a. The flat reserved frame (both comps) ----------
   A plain plate with its label, a warm hairline and the caption beneath:
   the comps' "PHOTOGRAPH RESERVED". Still a photo-frame, so Labyrinth swaps
   the photograph in exactly as elsewhere, and it takes the plate's shape. */
.photo-frame--flat .photo-frame__plate {
  aspect-ratio: var(--plate-ratio, 3 / 2);
  border: 1px solid var(--rule-warm);
  border-radius: 0;
  background: var(--plate-bg, var(--paper));
  box-shadow: none;
}
.photo-frame--flat .photo-frame__plate::before,
.photo-frame--flat .photo-frame__plate::after { content: none; }
.photo-frame--flat .photo-frame__label {
  padding-inline: var(--s1);
  font-size: var(--plate-label, 0.8125rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-align: center;
}
.photo-frame--flat .photo-frame__image { bottom: auto; height: auto; aspect-ratio: var(--plate-ratio, 3 / 2); }
.photo-frame--flat .caption {
  margin-top: var(--cap-gap, 0.625rem);
  font-size: var(--cap-size, 0.875rem);
  letter-spacing: 0;
  line-height: normal;
}

/* ---------- 14b. Homepage story: three chapters on a golden spine ----------
   Each chapter draws its own stretch of the spine and its marker, so the
   line runs unbroken from Chapter I into the last marker, where it ends.
   Chapter II sits on the gold band. Phone values are the base. Comp 3a
   retires the drawn SVG thread and its stretch under her portrait, so the
   story, thread and chapter rules of sections 3a, 5d and 12 and the thread
   geometry in thread.js no longer match any markup; they wait for removal
   once the proof is signed off. */
.spine-story {
  --spine-x: 1.75rem;
  --mark: 2.25rem;
  --pad-l: 4rem;
  --pad-r: 1.375rem;
  --row-gap: 0.875rem;
  --label-size: 0.8125rem;
  --label-track: 0.2em;
  --kicker-size: 1.0625rem;
  --title-size: clamp(1.875rem, 1rem + 5.641vw, 2.75rem);
  --title-lh: 1.04;
  --title-track: normal;
  --work-size: clamp(1.75rem, 1rem + 6.154vw, 2.75rem);
  --work-lh: 1.02;
  --work-track: -0.012em;
  --work-gap: 1rem;
  --sub-size: clamp(1.375rem, 1rem + 2.564vw, 1.75rem);
  --sub-lh: 1.12;
  --body-size: 1.0625rem;
  --body-lh: 1.7;
  --body-gap: 0.875rem;
  --body-mt: 0.375rem;
}
.spine-ch {
  --pad-t: 3.5rem;
  --pad-b: 3.5rem;
  --mark-top: calc(var(--pad-t) - 0.25rem);
  --mark-size: 1rem;
  position: relative;
}
.spine-ch--1 { --pad-t: 4.5rem; }
.spine-ch--2 { --mark-size: 0.875rem; background: var(--gold-tint); }
.spine-ch--3 { --pad-b: 4.5rem; --mark-size: 0.8125rem; }
.spine-ch::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--spine-x) - 1px);
  width: 2px;
  background: var(--thread-gold);
  opacity: 0.82;
  pointer-events: none;
}
.spine-ch--2::before { background: var(--gold-deep); opacity: 1; }
.spine-ch--3::before { bottom: auto; height: calc(var(--mark-top) + var(--mark) / 2); }
.spine-ch__mark {
  position: absolute;
  z-index: 1;
  top: var(--mark-top);
  left: calc(var(--spine-x) - var(--mark) / 2);
  display: grid;
  place-items: center;
  width: var(--mark);
  height: var(--mark);
  border: 2px solid var(--thread-gold);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: var(--mark-size);
  font-style: italic;
  line-height: 1;
  color: var(--gold-deep);
}
/* On the band the numeral is ink: gold-deep there is 4.1:1, under AA at this size. */
.spine-ch--2 .spine-ch__mark { border-color: var(--gold-deep); background: var(--gold-tint); color: var(--ink); }
/* The last marker is filled with gold-deep rather than the thread gold, so its
   paper numeral reaches AA (5.6:1 where the thread gold gives 3.9:1). */
.spine-ch--3 .spine-ch__mark { border-color: var(--gold-deep); background: var(--gold-deep); color: var(--paper); }
.spine-ch__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--row-gap);
  align-content: start;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
}
.spine-ch__label {
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-track);
  line-height: normal;
  color: var(--ink-2);
}
/* inline-block, so a narrow line moves the whole phrase down instead of splitting it */
.spine-ch__kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--kicker-size);
  font-style: italic;
  letter-spacing: 0;
  color: var(--gold-deep);
}
.spine-ch--2 .spine-ch__kicker { color: var(--ink); }
.spine-ch__title {
  font-size: var(--title-size);
  font-weight: 520;
  line-height: var(--title-lh);
  letter-spacing: var(--title-track);
}
.spine-ch__title--work { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: var(--work-gap); }
/* "Faith" over "Consciousness®:", as drawn; break-word keeps min-content whole words. */
/* "Consciousness®:" is one unit. The narrow min-content box let the colon
   fall to a line of its own at many in-between widths (Felix, 2026-10-19),
   so the word, its mark and the colon never wrap apart. */
.spine-ch__fc-word { white-space: nowrap; }
.spine-ch__fc {
  display: block;
  width: min-content;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: var(--work-size);
  line-height: var(--work-lh);
  letter-spacing: var(--work-track);
}
.spine-ch__sub {
  display: block;
  font-size: var(--sub-size);
  font-style: italic;
  font-weight: 420;
  line-height: var(--sub-lh);
  letter-spacing: normal;
  color: var(--gold-deep);
}
.spine-story .registered-mark { font-size: 0.38em; margin-inline-start: 0.04em; }
.spine-ch__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--body-gap);
  align-content: start;
  margin-top: var(--body-mt);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.spine-ch--2 .spine-ch__body em { color: var(--ink); }
/* As .prose had it: the site address may break at large text sizes rather than overflow. */
.spine-ch__body a { overflow-wrap: anywhere; }
.spine-ch__media { --plate-ratio: 4 / 3; margin-top: 0.625rem; }

/* The phone keeps Chapter III to its first sentence; tablet upright and
   phone leave out the faithconsciousness.com line, as the comp draws them. */
@media (width < 600px) {
  .spine-ch__more { display: none; }
  .spine-ch__media { --cap-gap: 0.875rem; }
  /* "Consciousness®:" is one word: its size is capped by its own column, so
     it stays whole at 320, at larger text sizes and with wider spacing. */
  .spine-ch__title--work { container-type: inline-size; }
  .spine-ch__fc { font-size: min(var(--work-size), 13.5cqi); }
}
@media (width < 600px), (600px <= width <= 900px) and (height > 500px) {
  .spine-ch__teaching { display: none; }
}

/* Phone held sideways: spine at the left, Chapter I's paragraphs side by
   side, Chapter II's photograph beside its words, Chapter III's title
   beside its words. */
@media (600px <= width < 1100px) and (height <= 500px) {
  .spine-story {
    --spine-x: 3rem;
    --pad-l: 5.75rem;
    --pad-r: 2.25rem;
    --row-gap: 0.75rem;
    --label-track: 0.22em;
    --title-size: calc(1rem + 2.607vw);
    --work-size: calc(1rem + 3.318vw);
    --sub-size: calc(1rem + 1.185vw);
    --sub-lh: 1.16;
    --body-size: 1rem;
    --body-mt: 0.25rem;
  }
  .spine-ch { --pad-t: 3.25rem; --pad-b: 3.25rem; --mark-size: 0.875rem; }
  .spine-ch--1 { --pad-t: 4rem; --pad-b: 3rem; }
  .spine-ch--3 { --pad-b: 4rem; }
  .spine-ch__title { max-width: 38.75rem; }
  .spine-ch--1 .spine-ch__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .spine-ch--2 .spine-ch__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .spine-ch--2 .spine-ch__label, .spine-ch--2 .spine-ch__title { grid-column: 1 / -1; }
  .spine-ch--2 .spine-ch__media { align-self: start; margin-top: var(--body-mt); }
  .spine-ch--3 .spine-ch__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.25rem 2.25rem; }
  .spine-ch--3 .spine-ch__label { grid-column: 1 / -1; }
  .spine-ch--3 .spine-ch__body { margin-top: 0; padding-top: 0.375rem; }
}

/* Tablet upright: spine at the left, one reading column, Chapter II's
   upright photograph beside its words. */
@media (600px <= width <= 900px) and (height > 500px) {
  .spine-story {
    --spine-x: 4.5rem;
    --mark: 3rem;
    --pad-l: 8.5rem;
    --pad-r: 3.5rem;
    --row-gap: 1.125rem;
    --label-size: 0.875rem;
    --label-track: 0.22em;
    --kicker-size: 1.1875rem;
    --title-size: calc(1rem + 4.878vw);
    --title-lh: 1.02;
    --title-track: -0.012em;
    --work-size: calc(1rem + 5.366vw);
    --sub-size: calc(1rem + 2.683vw);
    --body-size: 1.125rem;
    --body-lh: 1.72;
    --body-gap: 1.125rem;
    --body-mt: 0.5rem;
  }
  .spine-ch { --pad-t: 5.5rem; --pad-b: 5.5rem; --mark-top: var(--pad-t); --mark-size: 1.125rem; }
  .spine-ch--1 { --pad-t: 6.5rem; --pad-b: 5rem; --mark-size: 1.25rem; }
  .spine-ch--3 { --pad-b: 6.5rem; --mark-size: 1.0625rem; }
  .spine-ch__label { margin-top: 0.75rem; }
  .spine-ch--1 .spine-ch__body { max-width: 35rem; }
  .spine-ch--3 .spine-ch__body { max-width: 36.25rem; }
  .spine-ch--2 .spine-ch__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 2rem; }
  .spine-ch--2 .spine-ch__label, .spine-ch--2 .spine-ch__title { grid-column: 1 / -1; }
  .spine-ch--2 .spine-ch__media { --plate-ratio: 3 / 4; align-self: start; margin-top: var(--body-mt); }
}

/* Tablet sideways and desktop: the spine at the centre, title on one side
   and words on the other, Chapter II mirrored. The middle row is flexible,
   so a tall title never pushes the words beside it down, and Chapter II's
   photograph hangs under its title however long the words run. */
@media (900px < width < 1100px) and (height > 500px), (width >= 1100px) {
  .spine-story { --spine-x: 50%; }
  .spine-ch { --mark-top: calc(var(--pad-t) + 0.5rem); }
  .spine-ch__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--col-gap);
    padding-inline: var(--pad-x);
  }
  .spine-ch__label { grid-column: 2; grid-row: 1; margin-top: var(--label-mt); }
  .spine-ch__title { grid-column: 1; grid-row: 1 / span 2; }
  .spine-ch__body { grid-column: 2; grid-row: 2; }
  .spine-ch--1 .spine-ch__title { text-align: right; }
  .spine-ch--2 .spine-ch__inner { grid-template-rows: auto auto 1fr; }
  .spine-ch--2 .spine-ch__label { grid-column: 1; }
  .spine-ch--2 .spine-ch__title { grid-column: 2; }
  .spine-ch--2 .spine-ch__body { grid-column: 1; grid-row: 2 / span 2; }
  .spine-ch--2 .spine-ch__media { --plate-ratio: 3 / 2; grid-column: 2; grid-row: 3; align-self: start; max-width: var(--media-max); margin-top: var(--media-gap); }
}
@media (900px < width < 1100px) and (height > 500px), (1100px <= width < 1280px) {
  .spine-story {
    --mark: 3rem;
    --pad-x: 5.424vw;
    --col-gap: 9.492vw;
    --row-gap: 1rem;
    --label-size: 0.875rem;
    --label-track: 0.22em;
    --label-mt: 0.5rem;
    --kicker-size: 1.125rem;
    --title-size: calc(1rem + 3.39vw);
    --title-lh: 1.02;
    --title-track: -0.012em;
    --work-size: calc(1rem + 4.407vw);
    --work-lh: 1;
    --work-track: -0.014em;
    --sub-size: calc(1rem + 1.864vw);
    --body-gap: 1rem;
    --body-mt: 0;
    --media-max: 21.25rem;
    --media-gap: 1rem;
  }
  .spine-ch { --pad-t: 5.5rem; --pad-b: 5.5rem; --mark-size: 1.125rem; }
  .spine-ch--1 { --pad-t: 7rem; }
  .spine-ch--3 { --pad-b: 7rem; }
}
/* Where Chapter III's title shares the line with its words, the one-word
   "Consciousness®:" is capped by its own column so it never reaches them. */
@media (600px <= width < 1100px) and (height <= 500px), (900px < width < 1100px) and (height > 500px), (1100px <= width < 1280px) {
  .spine-ch__title--work { container-type: inline-size; }
  .spine-ch__fc { font-size: min(var(--work-size), 14.5cqi); }
}
/* With the colon held to its word, "Consciousness®:" is the widest line, about
   7.3 times the type size on small screens and 7 on large ones. These caps keep
   it inside the title's column at every width, so nothing overruns the spine. */
.spine-ch__title--work { container-type: inline-size; }
.spine-ch__fc { font-size: min(var(--work-size), 13.6cqi); }
@media (width >= 1100px) { .spine-ch__fc { font-size: min(var(--work-size), 14.2cqi); } }
@media (width >= 1280px) {
  .spine-story {
    --mark: 3.5rem;
    --pad-x: max(5.5rem, (100% - 69rem) / 2);
    --col-gap: 8.5rem;
    --row-gap: 1.125rem;
    --label-size: 0.875rem;
    --label-track: 0.22em;
    --label-mt: 0.75rem;
    --kicker-size: 1.1875rem;
    --title-size: 4.5rem;
    --title-lh: 1;
    --title-track: -0.015em;
    --work-size: 4.5rem;
    --work-lh: 1;
    --work-track: -0.015em;
    --work-gap: 0.5625rem;
    --sub-size: 2.875rem;
    --sub-lh: 1.2;
    --body-size: 1.125rem;
    --body-lh: 1.72;
    --body-gap: 1.125rem;
    --body-mt: 0;
    --media-max: 26.25rem;
    --media-gap: 1.375rem;
  }
  .spine-ch { --pad-t: 7.5rem; --pad-b: 7.5rem; --mark-size: 1.375rem; }
  .spine-ch--1 { --pad-t: 9.5rem; }
  .spine-ch--3 { --pad-b: 9.5rem; --mark-size: 1.25rem; }
  .spine-ch--2 .spine-ch__label { text-align: right; }
  .spine-ch--2 .spine-ch__media { --plate-label: 0.875rem; }
}

/* ---------- 14c. Media: the show on the gold band, the book, the kit on ink ----------
   Phone values are the base. Body text is 15px or larger; the reserved
   photograph's label (13 to 14px, as drawn), the ® marks and the cover
   lettering are smaller. */
.media-page { --media-pad: 1.375rem; --kicker-size: 1.125rem; }
/* Keyboard focus never lands under the fixed header. */
html:has(main.media-page) { scroll-padding-top: 8.5rem; }
.media-kicker {
  font-family: var(--font-display);
  font-size: var(--kicker-size);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gold-deep);
}
.media-page .btn { font-size: 1rem; letter-spacing: 0; line-height: 1.2; }
.media-page h2 .registered-mark { font-size: 0.38em; margin-inline-start: 0.04em; }

/* The opening and its reserved photograph */
.media-page .media-open { padding-inline: var(--media-pad); padding-bottom: 3.25rem; }
.media-open__inner, .media-open__head { display: grid; row-gap: 0.75rem; }
.media-page .media-open__title {
  max-width: none;
  margin: 0;
  font-size: clamp(2.25rem, 1rem + 7.179vw, 3.25rem);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: normal;
  text-wrap: wrap;
}
.media-open__lede { margin-top: 0.375rem; font-size: 1.1875rem; line-height: 1.5; }
.media-open__photo { --plate-bg: var(--paper-2); --plate-ratio: 4 / 3; --cap-size: 0.9375rem; margin-top: 2.75rem; }

/* The radio show. "Thursdays" stays gold-deep: 4.1:1 on the band, which
   AA allows as large text (it is 41px or more at every size); smaller gold
   text on the band moves to ink. */
.media-show { padding: 3.5rem var(--media-pad); background: var(--gold-tint); color: var(--ink); }
.media-show .media-kicker { color: var(--ink); }
.media-show__inner, .media-show__air, .media-show__about, .media-show__text { display: grid; row-gap: 1.125rem; align-content: start; }
.media-show__text { container-type: inline-size; }
.media-show__when { display: grid; row-gap: 1.125rem; }
.media-show__day {
  font-size: clamp(3.25rem, 1rem + 13.33vw, 4.5rem);
  font-style: italic;
  line-height: 0.92;
  color: var(--gold-deep);
}
.media-show__station { font-size: clamp(1.875rem, 1rem + 4.615vw, 2.5rem); font-weight: 520; line-height: 1; }
.media-show__title {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 1rem + 2.564vw, 1.875rem);
  font-weight: 540;
  line-height: 1.18;
  letter-spacing: normal;
  text-wrap: wrap;
}
.media-show__body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.media-show__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.media-show__listen {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 560;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--duration-ui) var(--ease-editorial);
}
.media-show__listen:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* In a narrow column the link takes its own line and the two rings stay
   together beneath it, without the rule. */
@container (width < 19rem) {
  .media-show__rule { display: none; }
  .media-show__listen { flex-basis: 100%; }
}
.media-show__rule { width: 1px; height: 1.375rem; background: var(--rule-on-tint); }
/* A 44px ring as drawn, inside a 48px target; both grow with the root size. */
.media-show__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: max(48px, 3rem);
  height: max(48px, 3rem);
  margin: -2px;
  border-radius: 50%;
  color: var(--gold-deep);
  transition: color var(--duration-ui) var(--ease-editorial);
}
.media-show__icon::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid var(--rule-on-tint);
  border-radius: 50%;
  transition: border-color var(--duration-ui) var(--ease-editorial);
}
.media-show__icon svg { width: 1.1875rem; height: 1.1875rem; }
.media-show__icon:hover { color: var(--ink); }
.media-show__icon:hover::before { border-color: var(--ink); }
.media-show__icon:focus-visible { border-radius: 50%; }

/* The book */
.media-book { padding: 3.5rem var(--media-pad); }
.media-book__inner { display: grid; row-gap: 0.875rem; align-items: center; }
.media-book__cover { box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--ink) 45%, transparent); }
.media-book__text { display: grid; row-gap: 0.875rem; align-content: start; }
.media-book__title { font-size: clamp(1.875rem, 1rem + 4.615vw, 2.5rem); font-weight: 540; line-height: 1.06; letter-spacing: normal; text-wrap: wrap; }
.media-book__byline { font-size: 1.25rem; font-style: italic; line-height: 1.3; }
.media-book__body { margin-top: 0.25rem; font-size: 1.0625rem; line-height: 1.7; }
.media-book__cta { justify-self: start; margin-top: 0.375rem; padding: 0.875rem 1.625rem; }

/* The press and speaker kit */
.media-kit { padding: 3.25rem var(--media-pad); background: var(--ink); color: var(--paper); }
.media-kit .media-kicker { color: var(--gold-light); }
.media-kit__inner, .media-kit__text { display: grid; row-gap: 0.875rem; }
/* A measure keeps the drawn two lines ("Materials for organizers / and press.") where one line would only just fit. */
.media-kit__title { max-width: 12em; font-size: clamp(1.75rem, 1rem + 4.103vw, 2.375rem); font-weight: 540; line-height: 1.08; letter-spacing: normal; text-wrap: wrap; }
.media-kit__body { max-width: 37.5rem; margin-bottom: 0.5rem; font-size: 1.0625rem; line-height: 1.65; }
.media-kit__cta { justify-self: start; padding: 1rem 1.75rem; }

/* Phone: the cover centred at 72%, the two buttons full width. */
@media (width < 600px) {
  /* The phone opening sits under the header as the other phone openings do (6.75rem; 10rem below 341). */
  .media-page .media-open { padding-top: 6.75rem; }
  .media-book__cover { justify-self: center; width: 72%; margin-bottom: 1rem; }
  /* The author line meets its 12px floor on the smaller cover; tighter tracking keeps it whole. */
  .media-book__cover .cover-art__author { letter-spacing: 0.24em; }
  /* Grids that can shrink below "Thursdays", and a size capped by its column,
     so larger text sizes and wider spacing never push the band off screen. */
  .media-show__inner, .media-show__air, .media-show__about, .media-show__text, .media-show__when { grid-template-columns: minmax(0, 1fr); }
  .media-show__air { container-type: inline-size; }
  .media-show__day { min-width: 0; overflow-wrap: break-word; font-size: min(clamp(3.25rem, 1rem + 13.33vw, 4.5rem), 22cqi); }
  .media-book__cta, .media-kit__cta { justify-self: stretch; justify-content: center; padding-inline: 1.5rem; }
}

/* Air time on one ruled line, the show's name beside its words: tablet
   upright, phone held sideways and tablet sideways. */
@media (600px <= width < 1280px) {
  .media-show__when {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule-on-tint);
    white-space: nowrap;
  }
  .media-show__day, .media-show__station { line-height: 1; }
  .media-show__about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 2rem; align-items: start; margin-top: 0.25rem; }
  .media-show__title { margin-top: 0; line-height: 1.16; }
  .media-show__text { row-gap: 0.25rem; }
  .media-show__body { line-height: 1.65; }
  .media-book__text { row-gap: 0.75rem; }
  .media-book__title { line-height: 1.04; }
  .media-book__body { line-height: 1.65; }
  .media-book__cta { margin-top: 0; }
  .media-book__cover { box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ink) 45%, transparent); }
  .media-kit__text { row-gap: 0.75rem; }
  .media-kit__title { line-height: 1.06; }
  .media-kit__body { margin-bottom: 0; line-height: 1.6; }
}

/* Phone held sideways */
@media (600px <= width < 1100px) and (height <= 500px) {
  .media-page { --media-pad: 2.5rem; }
  .media-page .media-open { padding-bottom: 3rem; }
  .media-open__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 2rem; align-items: end; }
  .media-page .media-open__title { font-size: calc(1rem + 3.318vw); line-height: 1; letter-spacing: -0.012em; }
  .media-open__lede { margin-top: 0; font-size: 1.125rem; }
  .media-open__photo { --plate-ratio: 21 / 8; --plate-label: 0.875rem; margin-top: 2rem; }
  .media-show { padding-block: 3rem; }
  .media-show__day, .media-show__station { font-size: calc(1rem + 4.265vw); }
  .media-show__title { font-size: 1.5rem; }
  .media-book { padding-block: 3rem; }
  .media-book__inner { grid-template-columns: 10.625rem minmax(0, 1fr); column-gap: 2rem; }
  /* The 170px cover's author line, as the sideways-phone .book cover had it (section 13). */
  .media-book__cover .cover-art__author { font-size: 0.7rem; letter-spacing: 0.12em; }
  .media-book__title { font-size: 2.125rem; }
  .media-book__byline { font-size: 1.3125rem; }
  .media-kit { padding-block: 3rem; }
  .media-kit__inner { grid-template-columns: minmax(0, 1.4fr) minmax(max-content, 1fr); column-gap: 2rem; align-items: end; }
  .media-kit__title { font-size: 2.125rem; }
}

/* Tablet upright */
@media (600px <= width <= 900px) and (height > 500px) {
  .media-page { --media-pad: 3.5rem; --kicker-size: 1.1875rem; }
  .media-page .media-open { padding-bottom: 5rem; }
  .media-open__inner, .media-open__head { row-gap: 1rem; }
  .media-page .media-open__title { font-size: calc(1rem + 5.854vw); line-height: 1; letter-spacing: -0.012em; }
  .media-open__lede { margin-top: 0.5rem; font-size: 1.3125rem; }
  .media-open__photo { --plate-ratio: 16 / 9; --plate-label: 0.875rem; margin-top: 4rem; }
  .media-show { padding-block: 4rem; }
  .media-show__inner, .media-show__air { row-gap: 1.25rem; }
  .media-show__when { padding-bottom: 1.5rem; }
  .media-show__day, .media-show__station { font-size: calc(1rem + 5.366vw); }
  .media-show__about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 2.5rem; }
  .media-show__title { font-size: min(1.75rem, 4.5vw); }
  .media-book { padding-block: 5rem; }
  .media-book__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 3rem; }
  .media-book__text { row-gap: 0.875rem; }
  /* Capped by the width, so "Consciousness®" stays whole down to 600. */
  .media-book__title { font-size: min(calc(1rem + 3.415vw), 5.4vw); }
  .media-book__byline { font-size: min(1.375rem, 3.6vw); }
  .media-book__body { margin-top: 0.375rem; line-height: 1.7; }
  .media-book__cta { margin-top: 0.375rem; }
  .media-kit { padding-block: 4.5rem; }
  .media-kit__inner, .media-kit__text { row-gap: 1rem; }
  .media-kit__title { font-size: calc(1rem + 3.415vw); }
  .media-kit__body { margin-bottom: 0.75rem; font-size: 1.125rem; }
}

/* Tablet sideways */
@media (900px < width < 1100px) and (height > 500px), (1100px <= width < 1280px) {
  .media-page { --media-pad: 6.102vw; }
  .media-page .media-open { padding-bottom: 5rem; }
  .media-open__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: end; }
  .media-page .media-open__title { font-size: calc(1rem + 4.746vw); line-height: 1; letter-spacing: -0.012em; }
  .media-open__lede { margin-top: 0; font-size: 1.3125rem; }
  .media-open__photo { --plate-ratio: 21 / 9; --plate-label: 0.875rem; margin-top: 3.5rem; }
  .media-show { padding-block: 5rem; }
  .media-show__day, .media-show__station { font-size: calc(1rem + 5.763vw); }
  .media-show__about { column-gap: 3.5rem; }
  .media-show__title { font-size: 2rem; }
  .media-book { padding-block: 5rem; }
  .media-book__inner { grid-template-columns: 17.5rem minmax(0, 1fr); column-gap: 3.5rem; }
  .media-book__title { font-size: calc(1rem + 2.712vw); }
  .media-book__byline { font-size: 1.3125rem; }
  .media-kit { padding-block: 5rem; }
  .media-kit__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: end; }
  .media-kit__title { font-size: calc(1rem + 2.712vw); }
}

/* Desktop: the air time stacked large beside the show's name and words. */
@media (width >= 1280px) {
  .media-page { --media-pad: max(6rem, (100% - 68rem) / 2); --kicker-size: 1.1875rem; }
  .media-page .media-open { padding-bottom: 6.5rem; }
  .media-open__inner, .media-open__head { row-gap: 1.25rem; }
  .media-page .media-open__title { max-width: 56.25rem; font-size: 5.25rem; line-height: 1; letter-spacing: -0.015em; }
  .media-open__lede { max-width: 45rem; margin-top: 0.5rem; font-size: 1.4375rem; }
  .media-open__photo { --plate-ratio: 21 / 9; --plate-label: 0.9375rem; margin-top: 5rem; }
  .media-show { padding-block: 6.5rem; }
  .media-show__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5rem; align-items: end; }
  .media-show__air { row-gap: 0.5rem; }
  .media-show__air .media-kicker { margin-bottom: 1rem; }
  .media-show__when { row-gap: 0.5rem; }
  .media-show__day { font-size: 7.5rem; }
  .media-show__station { font-size: 4rem; }
  .media-show__about, .media-show__text { row-gap: 1.25rem; }
  .media-show__title { margin-top: 0; font-size: 2.125rem; line-height: 1.12; }
  .media-show__body { font-size: 1.125rem; }
  .media-book { padding-block: 6.5rem; }
  .media-book__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5.5rem; }
  .media-book__cover { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 45%, transparent); }
  .media-book__text { max-width: 35rem; row-gap: 1.125rem; }
  .media-book__title { font-size: 4rem; line-height: 1.02; }
  .media-book__byline { font-size: 1.625rem; }
  .media-book__body { margin-top: 0.5rem; font-size: 1.125rem; }
  .media-book__cta { margin-top: 0.5rem; padding: 0.9375rem 1.75rem; }
  .media-kit { padding-block: 5.5rem; }
  .media-kit__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4.5rem; align-items: end; }
  .media-kit__text { row-gap: 1rem; }
  .media-kit__title { font-size: 3.25rem; line-height: 1.04; }
  .media-kit__body { margin: 0.25rem 0 0; font-size: 1.1875rem; line-height: 1.6; }
  .media-kit__cta { padding: 1.0625rem 1.875rem; }
}

/* At 320px the header has two rows. Preserve the original narrow-phone
   clearance and its one-line first cover phrase after all general overrides. */
@media (width < 341px) {
  .hero, .interior-hero, .speaking-opening .interior-hero, .coaching-page .interior-hero, .media-page .media-open { padding-top: 10rem; }
  .hero .hero__title { font-size: 1.8rem; }
  .js .site-nav { padding-top: 10rem; }
  h1[data-labyrinth-key='privacy.hero.title'] { font-size: var(--type-display-md); }
}

/* Waterfall video cover, 2026-10-19. Felix generated the sunlit canyon on his
   Higgsfield account with GPT Image 2.5 stills and MiniMax H3 motion, version B.
   The CSS still survives loading, reduced motion and no script. A near-opaque
   token-paper wash holds AA ink contrast over every moving frame, tapering
   before the falls so the water remains visible. Her portrait stays on About.
   The fixed header keeps its own paper surface over the video. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--paper) url('/assets/video/waterfall-wide-1280-poster.webp') center / cover no-repeat;
}
@media (orientation: portrait) {
  .hero { background-image: url('/assets/video/waterfall-tall-720-poster.webp'); }
}
@media (orientation: landscape) and (min-width: 1400px),
       (orientation: landscape) and (min-resolution: 1.5dppx) {
  .hero { background-image: url('/assets/video/waterfall-wide-1920-poster.webp'); }
}
@media (orientation: portrait) and (min-width: 721px),
       (orientation: portrait) and (min-resolution: 1.5dppx) {
  .hero { background-image: url('/assets/video/waterfall-tall-1080-poster.webp'); }
}
.hero__waterfall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
body:has(.hero) .site-head:not(.is-scrolled) {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.hero--video-ready .hero__waterfall { opacity: 1; }
.hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  /* The fade ends before the waterfall column on wide covers. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 97%, transparent) 0%, color-mix(in srgb, var(--paper) 97%, transparent) 40%, color-mix(in srgb, var(--paper) 87%, transparent) 54%, transparent 72%);
  pointer-events: none;
}
.hero .hero__grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(100% - 2 * var(--gutter), var(--page-max));
  height: 100%;
  margin-inline: auto;
  padding-top: 4rem;
  container-type: normal;
}
.hero .hero__title {
  max-width: none;
  margin: 0;
  font-size: var(--type-display-xl);
  line-height: 0.96;
  color: var(--ink);
  white-space: normal;
}
.hero .hero__title .line { display: block; }
.hero .hero__text { display: block; max-width: 38rem; margin-top: var(--s5); }
.hero .lede { max-width: 38ch; margin: 0; color: var(--ink); }
.hero .hero__cta { display: flex; flex-direction: row; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.hero .hero__cta .btn { min-height: 48px; }
.hero .hero__cta .btn--line { border-color: var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); text-decoration: none; }
@media (width >= 1100px) {
  /* Keep a strong desktop headline while freeing the right-hand waterfall. */
  .hero .hero__grid { container-type: inline-size; }
  .hero .hero__title { font-size: clamp(4.4rem, 6.3vw, 7.4rem); }
}
/* No gold line in the cover (Felix, 2026-10-19: "Remove this line right
   here"). The thread's first stretch used to rise from the lower hero to meet
   the story's spine at the fold; the spine now simply starts in the story.
   thread.js still sets its variables, harmlessly. */
.hero::after,
.js .has-thread-origin .hero::after { display: none; }
@media (600px <= width < 1100px) {
  .hero .hero__title { font-size: clamp(3.5rem, 1.3rem + 5vw, 5.6rem); }
  .hero .hero__text { margin-top: var(--s4); }
  /* Keep the shorter tablet's reading area left of the water. */
  .hero::before { background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 97%, transparent) 0%, color-mix(in srgb, var(--paper) 97%, transparent) 48%, transparent 76%); }
}
@media (600px <= width < 1100px) and (orientation: portrait) {
  .hero .hero__grid { justify-content: flex-end; padding-top: 9rem; padding-bottom: 12%; }
  .hero .hero__title { font-size: clamp(3.9rem, 1.5rem + 6vw, 6rem); }
  /* Nearly half the upright cover remains completely open above the copy. */
  .hero::before { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 97%, transparent) 0%, color-mix(in srgb, var(--paper) 97%, transparent) 42%, transparent 68%); }
}
@media (600px <= width < 1100px) and (orientation: landscape) and (height <= 850px) {
  .hero .hero__grid { justify-content: flex-end; padding-top: 7rem; padding-bottom: 7%; }
  .hero .hero__title { font-size: clamp(3.2rem, 1.1rem + 5vw, 5.1rem); }
  .hero .hero__text { margin-top: var(--s3); }
  .hero .hero__cta { margin-top: var(--s3); }
}
@media (width < 600px) {
  .hero .hero__grid { justify-content: flex-end; padding-top: 6.5rem; padding-bottom: max(6%, env(safe-area-inset-bottom)); }
  .hero .hero__title { font-size: clamp(2.15rem, 1.25rem + 4.4vw, 2.85rem); line-height: 1.02; }
  .hero .hero__text { max-width: 100%; margin-top: var(--s3); }
  .hero .lede { font-size: clamp(1rem, 0.875rem + 0.6vw, 1.125rem); line-height: 1.48; }
  .hero .hero__cta { flex-direction: column; align-items: stretch; gap: var(--s1); margin-top: var(--s3); }
  .hero .hero__cta .btn { justify-content: center; }
  /* The waterfall occupies the open upper half; only the words get paper. */
  .hero::before { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 98%, transparent) 0%, color-mix(in srgb, var(--paper) 98%, transparent) 48%, transparent 72%); }
}
@media (width < 600px) and (height <= 680px) {
  .hero .hero__grid { padding-top: 5.75rem; padding-bottom: 3%; }
  .hero .hero__text { margin-top: var(--s2); }
  .hero .hero__cta { margin-top: var(--s2); }
  .hero .lede { font-size: 0.875rem; line-height: 1.3; }
  .hero .hero__cta { flex-direction: row; }
  .hero .hero__cta .btn { flex: 1; padding-inline: 0.35rem; font-size: 0.75rem; }
}
@media (orientation: landscape) and (height <= 500px) {
  .hero .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: min(56%, 27rem);
    margin-left: var(--gutter);
    margin-right: auto;
    padding-top: 4.5rem;
    padding-bottom: 1rem;
  }
  .hero .hero__title { font-size: clamp(2rem, 4.5vw, 2.8rem); }
  .hero .hero__text { margin-top: 0.75rem; }
  .hero .lede { font-size: 0.875rem; line-height: 1.3; }
  .hero .hero__cta { flex-direction: row; gap: var(--s1); margin-top: var(--s1); }
  .hero .hero__cta .btn { min-height: 48px; padding: 0.5rem; font-size: 0.8rem; }
  /* Sideways phone keeps the water entirely beside the copy. */
  .hero::before { background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 98%, transparent) 0%, color-mix(in srgb, var(--paper) 98%, transparent) 50%, transparent 79%); }
}
/* Without script the mobile header becomes an in-flow link row. Its height
   comes out of the cover's viewport budget so the next section stays below. */
@media (width <= 900px) {
  html:not(.js) .hero { height: calc(100svh - 7.5625rem); }
  html:not(.js) .hero .hero__grid { padding-top: 0; }
}
@media (width < 600px) {
  html:not(.js) .hero { height: calc(100svh - 11.875rem); }
  html:not(.js) .hero .hero__grid { padding-bottom: 0.5rem; }
  /* The in-flow no-script menu shortens the cover, so paper starts at the
     raised headline instead of using the full-height phone fade. */
  html:not(.js) .hero::before { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 98%, transparent) 0%, color-mix(in srgb, var(--paper) 98%, transparent) 61%, transparent 79%); }
}
@media (width <= 350px) {
  /* The 320px no-script cover is shorter again; its first line needs paper. */
  html:not(.js) .hero::before { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 98%, transparent) 0%, color-mix(in srgb, var(--paper) 98%, transparent) 67%, transparent 84%); }
}
@media (600px <= width <= 900px) and (orientation: portrait) {
  /* The in-flow tablet menu raises the copy above the live layout's fade. */
  html:not(.js) .hero::before { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 97%, transparent) 0%, color-mix(in srgb, var(--paper) 97%, transparent) 56%, transparent 76%); }
}
@media (600px <= width <= 900px) and (orientation: landscape) and (height <= 500px) {
  html:not(.js) .hero { height: calc(100svh - 7rem); }
  html:not(.js) .hero .hero__grid { padding-bottom: 0.5rem; }
}