/* Lois B. Feldman — front page, v3
   Direction: architectural, not editorial. The navy panel is the central design
   moment — definition, philosophy, witnesses, spec sheet all inside ONE deep
   blue composition. Two blue panels structure the page; cream sections sit
   between them.
*/

:root {
  --paper:        #F3EAD1;
  --paper-deep:   #EADFBE;
  --paper-edge:   #D7C99E;

  --ink:          #1B2A41;
  --ink-soft:     #3A4A65;
  --muted:        #6E788B;

  --navy:         #14233E;
  --navy-deep:    #0E1B33;
  --navy-text:    #E7DEC4;
  --navy-muted:   rgba(231, 222, 196, 0.55);
  --navy-rule:    rgba(231, 222, 196, 0.22);

  --blue:         #2C4A7C;
  /* mid blue — fills the value gap between navy and cream, so yellow
     doesn't have to be the only chromatic accent. used for the witness
     names on navy, kickers, dotted leaders in the spec sheet. */
  --blue-mid:     #3A5A86;

  /* yellow — discipline. ONE moment per panel. CTA fills, primary
     button hover. NOT hairlines, NOT kickers, NOT the voices spine. */
  --yellow:       #D8A12B;
  --yellow-soft:  #F0CE6A;
  --yellow-pale:  #EDD49B;

  --rule:         rgba(27, 42, 65, 0.16);
  --rule-soft:    rgba(27, 42, 65, 0.10);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* optical-size pairings — Display for headlines, Text for body.
     applied via font-variation-settings on the headline / prose classes. */
  --opsz-display: "opsz" 60, "wght" 320;
  --opsz-head:    "opsz" 36, "wght" 380;
  --opsz-text:    "opsz" 12, "wght" 400;

  --gutter: clamp(20px, 4vw, 56px);
  --max:    1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--yellow-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; }

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ── Status strip — under the hero, above the navy panel ──────────
   A single typographic line of practical info plus a provenance
   sentence. Lifts the next-circle date so even a 5-second visitor
   sees that this practice is current and bookable. */
.status-strip {
  padding-block: clamp(32px, 4vw, 56px) clamp(40px, 5vw, 72px);
  /* blue hairline above and below, replacing the dull grey rules —
     a recurring blue mark that ties cream pages to the navy panel. */
  border-top: 1px solid rgba(44, 74, 124, 0.32);
  border-bottom: 1px solid rgba(44, 74, 124, 0.20);
  margin-block: clamp(24px, 3vw, 40px) 0;
}
.status-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.status-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
  transform: translateY(-2px);
}
.status-text {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
  line-height: 1.45;
}
.status-text strong {
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-mid);
  font-weight: 500;
  margin-right: 6px;
}
.status-text em { color: var(--ink-soft); }
.status-text a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.status-text a:hover {
  border-bottom-color: var(--yellow);
  color: var(--ink-soft);
}
.status-prov {
  margin: 22px 0 0;
  max-width: 56ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* When status elements are reused inside the navy NextCirclePanel,
   recolor for the dark background. */
.nextcircle-panel .status-row {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--navy-rule);
}
.nextcircle-panel .status-text { color: var(--navy-text); }
.nextcircle-panel .status-text strong { color: var(--yellow); }
.nextcircle-panel .status-text em { color: var(--navy-text); opacity: 0.85; }
.nextcircle-panel .status-prov {
  color: var(--navy-text);
  opacity: 0.75;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--navy-rule);
}

/* ── Door numerals (roman) — pulled forward from the data ────── */
.door .door-no {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 60, "wght" 300;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--blue-mid);
  margin-bottom: 14px;
  /* lowercase roman like a chapter mark */
  font-feature-settings: "frac";
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 26px 18px;
  gap: 24px;
}

.topbar .mark {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.topbar .mark .sub {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  margin-left: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar nav { display: flex; gap: 24px; align-items: baseline; }

.topbar nav a {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.topbar nav a:hover { color: var(--ink); border-bottom-color: var(--yellow); }
.topbar nav a.on { color: var(--ink); border-bottom-color: var(--ink); }
.topbar nav a.on:hover { border-bottom-color: var(--yellow); }

/* ── Hamburger toggle + mobile drawer ───────────────────────────────
   The toggle is hidden on desktop (the inline .topbar-nav-desktop
   nav is used instead) and shown only on phones, where the topbar
   is fixed at the top of the viewport. */
.topbar-toggle {
  display: none;
  position: relative;
  width: 32px;
  height: 28px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 60;
}
.topbar-toggle .bar {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.24s ease, opacity 0.18s ease, top 0.24s ease;
}
.topbar-toggle .bar:nth-child(1) { top: 8px; }
.topbar-toggle .bar:nth-child(2) { top: 14px; }
.topbar-toggle .bar:nth-child(3) { top: 20px; }
.topbar-toggle.is-open .bar:nth-child(1) { top: 14px; transform: rotate(45deg); }
.topbar-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.topbar-toggle.is-open .bar:nth-child(3) { top: 14px; transform: rotate(-45deg); }

/* Mobile drawer — fullscreen overlay menu. Hidden on desktop. */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  padding: clamp(80px, 14vw, 96px) clamp(20px, 6vw, 32px) clamp(28px, 6vw, 36px);
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.28s ease;
  pointer-events: none;
}
.mobile-nav.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 28px);
  margin-top: clamp(8px, 4vw, 24px);
}
.mobile-nav-links a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 8vw, 44px);
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1.05;
  text-decoration: none;
}
.mobile-nav-links a.on {
  color: var(--blue-mid);
}
.mobile-nav-links a:hover { color: var(--ink-soft); }
.mobile-nav-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--rule);
  padding-top: clamp(18px, 3vw, 24px);
}
.mobile-nav-foot a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
}
.mobile-nav-foot a:hover { color: var(--ink); }

/* Lock background scroll when the drawer is open */
body.nav-open { overflow: hidden; }

/* ---------- page header (inner pages) ---------- */

.page-header {
  padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
}

.page-header .kicker { margin-bottom: 18px; }

.page-title {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}

/* ---------- about ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.about-grid .bio {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--ink);
  max-width: 38em;
}

.about-grid .bio p { margin: 0 0 1em; text-wrap: pretty; }
.about-grid .bio em { font-style: italic; }

.about-grid .bio-portrait { position: sticky; top: 32px; }

.about-grid .bio-portrait image-slot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  filter: contrast(0.95) saturate(0.9);
}

.about-grid .bio-portrait .portrait-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* CV grid */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  border-top: 1.5px solid var(--ink);
  padding-top: 28px;
}

.cv-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 16px;
  font-weight: 500;
}

.cv-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.cv-col li {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--rule);
}

.cv-col li .yr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---------- approach essay ---------- */

.essay {
  max-width: 68ch;
  margin: 0 auto;
  font-family: var(--serif);
  color: var(--ink);
}

.essay .essay-lede {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.4;
  font-weight: 380;
  color: var(--ink);
  margin: 0 0 1.8em;
  text-wrap: pretty;
}

.essay h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2.4em 0 0.6em;
  padding-top: 1em;
  border-top: 1px solid var(--rule);
}

.essay h3:first-of-type {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 0;
}

.essay p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.62;
  margin: 0 0 1em;
  text-wrap: pretty;
}

.essay .threeRules {
  display: block;
  margin: 18px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--blue);
  padding-left: 20px;
  border-left: 2px solid var(--yellow);
}

.essay .threeRules span {
  display: block;
  margin: 2px 0;
}

/* ---------- testimonials ----------
   Editorial spine: a 1px navy rule runs down the middle of the stream,
   with a yellow bead at the top of each voice. Voices alternate left/
   right of the spine, each text-aligned toward the spine. Heather
   Maloney's short quote leads as the FEATURE — same place on the spine,
   just much larger type and a bigger bead. The rest are paragraph-
   length real testimonials; Kathy Worcester's includes an inline
   "Read the rest" expansion. Mobile collapses to a single column. */

.testimonials-section {
  padding-block: clamp(40px, 5vw, 72px) clamp(72px, 9vw, 132px);
}

.testimonials-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  margin: 0 auto clamp(56px, 8vw, 96px);
  max-width: 52ch;
  text-align: center;
  text-wrap: pretty;
}
.testimonials-lede em {
  font-style: italic;
  color: var(--ink-soft);
}

.testimonials-stream {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}

/* The spine — a single thin vertical rule down the middle. */
.testimonials-stream::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(27, 42, 65, 0.32);
  transform: translateX(-0.5px);
}

.testimonial {
  position: relative;
  width: 50%;
  padding-block: clamp(40px, 5vw, 64px);
  display: grid;
  gap: 18px;
}

.testimonial--left  { padding-right: clamp(28px, 4vw, 56px); }
.testimonial--right { padding-left:  clamp(28px, 4vw, 56px); margin-left: 50%; }

.testimonial-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.testimonial--left  .testimonial-no { text-align: right; display: block; }

.testimonial-quote {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--ink);
}
.testimonial-quote p {
  font-family: var(--serif);
  font-variation-settings: "opsz" 28, "wght" 380;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.testimonial-quote p:last-of-type { margin-bottom: 0; }
.testimonial--left .testimonial-quote { text-align: right; }

/* Feature voice (Heather) — much larger, balanced display type. */
.testimonial--feature .testimonial-quote p {
  font-variation-settings: "opsz" 56, "wght" 380;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.testimonial--feature .testimonial-no { color: var(--yellow); }

/* "Read the rest" expander — for Kathy's long testimonial. */
.testimonial-more {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 2px 0 3px;
  margin-top: 14px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.testimonial-more:hover {
  color: var(--ink-soft);
  border-bottom-color: var(--yellow);
}
.testimonial-more .arr { transition: transform 0.18s ease; }
.testimonial-more:hover .arr { transform: translateX(2px); }

/* Attribution — name in serif italic, role in mono caps. Sits aligned
   to the spine on each side. */
.testimonial-by {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-by .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink);
}
.testimonial-by .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.testimonial--left .testimonial-by { text-align: right; align-items: flex-end; }

/* Yellow bead on the spine — at the top of each voice, like a rosary. */
.testimonial::after {
  content: "";
  position: absolute;
  top: clamp(48px, 5.6vw, 76px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}
.testimonial--left::after  { right: -3.5px; }
.testimonial--right::after { left: -3.5px; }
/* Feature gets a slightly larger bead, ringed in paper for emphasis. */
.testimonial--feature::after {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 4px var(--paper);
}
.testimonial--feature.testimonial--left::after  { right: -5.5px; }
.testimonial--feature.testimonial--right::after { left: -5.5px; }

.testimonials-foot {
  margin-top: clamp(64px, 8vw, 96px);
  text-align: center;
}
.testimonials-foot p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
  margin: 0 auto;
  max-width: 44ch;
  text-wrap: pretty;
}
.testimonials-foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.testimonials-foot a:hover { border-bottom-color: var(--yellow); }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contact-lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 clamp(36px, 5vw, 56px);
  max-width: 36ch;
  text-wrap: pretty;
}

.contact-list {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1.5px solid var(--ink);
}

.contact-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.contact-list dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--ink);
  letter-spacing: -0.012em;
}

.contact-list dd a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}
.contact-list dd a:hover { border-bottom-color: var(--yellow); }

.contact-list dd .qual {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0;
}

/* Soft note under the contact list — answers "what about in-person?"
   without sounding dated or pandemic-pinned. */
.contact-note {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--rule);
  max-width: 56ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.contact-aside {
  background: var(--paper-deep);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rule);
}

.contact-aside h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 16px;
  font-weight: 500;
}

.contact-aside p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
  text-wrap: pretty;
}

.contact-aside .aside-site {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.012em;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.contact-aside .aside-site:hover { color: var(--blue); }

.contact-aside .aside-site .arr {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-left: 4px;
}

.contact-aside .aside-site .aside-desc {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0;
  line-height: 1.4;
}

/* ---------- mobile (pages) ---------- */

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-grid .bio-portrait { position: static; max-width: 320px; }

  .cv-grid { grid-template-columns: 1fr; gap: 32px; }

  .quotes-grid { display: flex; flex-direction: column; }
  .quote-card.quote-sm,
  .quote-card.quote-md,
  .quote-card.quote-lg { grid-column: auto; }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-list > div { grid-template-columns: 100px 1fr; gap: 12px 16px; }

  /* Testimonials: collapse to a single column, kill the spine, beads
     swap to the left edge of each card. */
  .testimonials-stream::before { left: 0; }
  .testimonial { width: 100%; }
  .testimonial--left,
  .testimonial--right {
    margin-left: 0;
    padding-left: 28px;
    padding-right: 0;
    text-align: left;
  }
  .testimonial--left .testimonial-no,
  .testimonial--left .testimonial-quote,
  .testimonial--left .testimonial-by { text-align: left; align-items: flex-start; }
  .testimonial::after { left: -3.5px; right: auto; }
  .testimonial--feature.testimonial--left::after,
  .testimonial--feature.testimonial--right::after { left: -5.5px; right: auto; }
}

/* ---------- generic section ---------- */

.section { padding-block: clamp(72px, 9vw, 132px); }
.section.tight { padding-block: clamp(48px, 6vw, 88px); }

.section h2.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 clamp(32px, 4vw, 56px);
  text-wrap: balance;
  max-width: 24ch;
}

.section h2.section-title.long { max-width: 32ch; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}
/* small blue accent rule before each kicker on cream sections —
   gives the page a recurring blue mark to balance the navy panels. */
.kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--blue);
  opacity: 0.65;
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(48px, 7vw, 96px) clamp(80px, 10vw, 144px);
}

.hero .stage {
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  gap: clamp(36px, 5vw, 96px);
  align-items: end;
}

.hero .name {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.hero .lede-line {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.hero .lede-line em {
  font-style: italic;
  font-family: var(--serif);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin-right: 2px;
}

.hero .standfirst {
  margin: clamp(28px, 3.5vw, 42px) 0 0;
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 38ch;
  text-wrap: pretty;
}

.hero .portrait-wrap {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
}

.hero .portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* The photograph is roughly square with empty wall above her head and
     cardigan running off the bottom. A 4:5 crop biased upward keeps the
     eyes ~⅓ from the top and trims the cardigan. */
  object-position: 50% 28%;
  filter: contrast(0.95) saturate(0.92);
}

.hero .portrait-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- DEEP BLUE PANEL — the speaking circle ---------- */

.panel-blue {
  background: var(--navy);
  color: var(--navy-text);
  position: relative;
}

.panel-blue .panel-inner {
  padding-block: clamp(80px, 10vw, 144px);
}

.panel-blue .panel-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(72px, 9vw, 120px);
}

.panel-blue .panel-header .lede {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-pale);
  margin: 0 0 16px;
}

.panel-blue .panel-header h2 {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--navy-text);
  margin: 0;
  text-wrap: balance;
}

.panel-blue .panel-header .panel-gloss {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--navy-muted);
  margin: 0;
  text-wrap: pretty;
}

.panel-blue .panel-header .panel-gloss em {
  font-style: italic;
  color: var(--yellow-pale);
}

/* ── The Speaking Circle panel, rebuilt ────────────────────────────
   No more SVG ring with names floating on a circumference. The section
   now reads as a chapter: number, epigraph at top, prose, photographic
   plate with witness names below, colophon spec. The "circle" is in
   the mind of the reader who counts twelve names. */

.panel-chapno {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 36px;
}
.panel-chapno .dash {
  width: 28px; height: 1px;
  background: var(--yellow);
  opacity: 0.7;
}

/* epigraph — Rotella at the top, Roman not italic, attribution italic. */
.epigraph {
  max-width: 32ch;
  margin: 0 0 clamp(56px, 7vw, 88px);
}
.epigraph blockquote {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: "opsz" 36;
  font-variation-settings: "opsz" 36, "wght" 360;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--navy-text);
  text-wrap: balance;
}
.epigraph .attr {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy-muted);
  font-style: italic;
}
.epigraph .attr .em-dash {
  margin-right: 6px;
  font-style: normal;
  color: var(--navy-muted);
}
.epigraph .attr em { color: var(--navy-text); }
.epigraph .attr .cite {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-left: 14px;
  color: var(--navy-muted);
}

/* prose — all serif on this panel (no sans-serif body voice here). */
.panel-prose {
  max-width: 56ch;
  margin: 0 0 clamp(56px, 7vw, 96px);
}
.panel-prose p {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 12, "wght" 400;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--navy-text);
  text-wrap: pretty;
}

/* ── THE VESICA ─────────────────────────────────────────────────
   Two overlapping circles. Self · Other · the lens of intersection.
   Geometry as the practice: presence in two domains at once.

   The SVG draws two cream hairline circles + a soft yellow glow that
   only fills the intersection lens (via a clipPath). A small yellow
   center dot marks the meeting point. Witness names sit on the outer
   half of each circle. The Rotella quote lives inside the lens. */

/* ── Pinned scroll for the vesica ──────────────────────────────────
   Scrollspace is 150vh; sticky inside is 100vh. That gives 50vh of
   captured scroll while the figure is pinned at viewport center —
   just enough for the merge animation to play out. After the pin
   releases, the figure scrolls naturally with the page. */
.vesica-scrollspace {
  position: relative;
  height: 150vh;
  margin: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 36px);
}
.vesica-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vesica {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.vesica-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;        /* matches viewBox 120 × 90 */
}

.vesica-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Merge transition ─────────────────────────────────────────────
   The geometry (circles' cx, lens accents' opacity, names' left/top)
   is driven from React via requestAnimationFrame each frame, so no
   CSS transitions are needed here. JS handles the eased interpolation
   and respects prefers-reduced-motion. */

/* small mono labels above each circle — pedagogical and quiet */
.vesica-label {
  position: absolute;
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.85vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow-pale);
  opacity: 0.65;
  white-space: nowrap;
}
.vesica-label-self  { left: calc(36.7% - 0px); top: 2.5%; transform: translateX(-50%); }
.vesica-label-other { left: calc(63.3% - 0px); top: 2.5%; transform: translateX(-50%); }

/* the lens — HTML overlay positioned over the SVG's intersection.
   Lens spans x = ~50% (50% ± 13.3%) and y = (45 ± 27.7)/90 = ~19.2% to ~80.8%.
   Visually we use a slightly narrower box so the text doesn't kiss the lens edges. */
.vesica-lens {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22%;                /* the lens is r-wide; padding inside */
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.vesica-lens blockquote {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 28, "wght" 360;
  font-style: italic;
  font-size: clamp(13px, 1.35vw, 18px);
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--navy-text);
  text-wrap: balance;
}
.vesica-rule {
  width: 22px;
  height: 1px;
  background: var(--yellow);
  opacity: 0.85;
  margin: 12px 0 9px;
  display: block;
}
.vesica-attr {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(8.5px, 0.7vw, 9.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-muted);
  line-height: 1.5;
}
.vesica-attr em {
  font-style: normal;
  color: var(--navy-text);
}
.vesica-attr .cite {
  display: inline-block;
  margin-left: 8px;
  color: var(--yellow);
  font-style: normal;
}

/* witness names placed on the outer arcs of each circle.
   The position is absolute (left/top from the inline style); we offset
   from the placement point via transform so the text aligns relative
   to the circle's outer edge — names on the left circle anchor RIGHT
   (so the longest names extend further left), and right-circle names
   anchor LEFT. */
.vesica-name {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400;
  font-size: clamp(11.5px, 1.0vw, 14.5px);
  color: var(--navy-text);
  opacity: 0.86;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.vesica-name.side-left {
  transform: translate(-100%, -50%);
  padding-right: 12px;
  text-align: right;
}
.vesica-name.side-right {
  transform: translate(0, -50%);
  padding-left: 12px;
  text-align: left;
}

/* caption below the vesica — intentional two lines.
   Line 1: mono kicker (yellow). Line 2: italic serif sentence. */
.vesica-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: clamp(32px, 4vw, 56px) auto clamp(64px, 8vw, 96px);
  text-align: center;
}
.vesica-caption-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}
.vesica-caption-line {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--navy-muted);
}

@media (max-width: 720px) {
  /* on narrow screens, the vesica gets unreadable — collapse to a
     stacked layout with the quote stacked above the cohort. */
  .vesica { aspect-ratio: auto; max-width: 100%; }
  .vesica-svg { position: relative; aspect-ratio: 4 / 3; }
  .vesica-name { font-size: 12px; }

}

/* spec sheet on navy */
.panel-specs {
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: 32px;
  border-top: 1px solid var(--navy-rule);
}

.panel-specs-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-pale);
  margin: 0 0 24px;
}

/* Horizontal spec sheet — five facts side by side, divided by thin
   cream rules. Each cell stacks an index numeral (yellow), a mono
   caps term, a serif value, and an italic qualifier. */
.panel-specs dl {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
}

.panel-specs dl > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 22px;
  border-left: 1px solid var(--navy-rule);
}
.panel-specs dl > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.panel-specs .idx {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--yellow);
}

.panel-specs dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-muted);
}

.panel-specs dd {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 28, "wght" 380;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.18;
  color: var(--navy-text);
  letter-spacing: -0.012em;
}

.panel-specs dd .qual {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--navy-muted);
  margin-top: 4px;
  letter-spacing: 0;
}

@media (max-width: 800px) {
  /* on narrow screens, two rows of 3+2 or stack as 2 columns */
  .panel-specs dl {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
  .panel-specs dl > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 480px) {
  .panel-specs dl {
    grid-template-columns: 1fr;
  }
  .panel-specs dl > div {
    border-left: 0;
    padding-left: 0;
    padding-block: 14px;
    border-bottom: 1px solid var(--navy-rule);
  }
  .panel-specs dl > div:last-child {
    border-bottom: 0;
  }
}

.panel-blue .panel-footer {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  border-top: 1px solid var(--navy-rule);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--navy-text);
}

.panel-blue .panel-footer a {
  color: var(--yellow-pale);
  border-bottom: 1px solid var(--yellow);
  padding-bottom: 2px;
  font-style: italic;
  margin-left: 6px;
}
.panel-blue .panel-footer a:hover { color: var(--yellow-soft); }

/* ---------- three doors ---------- */

.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.doors .door {
  padding: 32px 28px 30px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: transparent;
  transition: background 0.2s ease;
}

.doors .door:last-child { border-right: 0; }
.doors .door:hover { background: rgba(216, 161, 43, 0.07); }

.doors .door .door-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.doors .door h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}

.doors .door .blurb {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.doors .door .more {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--yellow);   /* yellow underline by default — Lois's color */
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease, gap 0.18s ease;
}
.doors .door .more > span {
  color: var(--yellow);                       /* arrow in yellow */
  font-weight: 600;
  transition: transform 0.22s ease;
}
.doors .door:hover .more {
  border-bottom-color: var(--blue);           /* hover swaps to blue — the two colors trade places */
  color: var(--blue);
}
.doors .door:hover .more > span {
  color: var(--blue);
  transform: translateX(4px);
}

/* ---------- elsewhere (was: around-the-web) ---------- */

.elsewhere {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: 22px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.elsewhere .line {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  max-width: 38ch;
}

/* ---------- buttons ---------- */

.btn-yellow {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 22px;
  text-decoration: none;
  transition: background 0.18s ease;
  border-radius: 1px;
  white-space: nowrap;
}
.btn-yellow:hover { background: var(--yellow-soft); }
.btn-yellow .arrow { transition: transform 0.18s ease; }
.btn-yellow:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.btn-ghost:hover { border-bottom-color: var(--yellow); color: var(--blue); }

/* ---------- adjacent practices ---------- */

.adjacent {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  border-top: 1.5px solid var(--ink);
  padding-top: 32px;
}

.adjacent .intro {
  font-family: var(--serif);
  font-weight: 380;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.adjacent .site {
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 8px;
}

.adjacent .site .url {
  font-family: var(--serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--ink);
  /* blue rule under each adjacent site link — more blue presence on cream */
  border-bottom: 1.5px solid var(--blue);
  padding-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.adjacent .site .url .arr {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--yellow);            /* yellow arrows by default */
  font-weight: 600;
  transition: transform 0.18s ease, color 0.18s ease;
}

.adjacent .site:hover .url { color: var(--blue); border-bottom-color: var(--yellow); }
.adjacent .site:hover .url .arr { transform: translate(3px, -3px); color: var(--blue); }

.adjacent .site .desc {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- next-circle panel ---------- */

.nextcircle-panel .panel-inner {
  padding-block: clamp(64px, 8vw, 112px);
}

.nextcircle-panel > .panel-inner > .reveal:first-of-type .lede {
  /* handled by .lede selector below */
}

.nextcircle-panel .lede {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-pale);
  margin: 0 0 24px;
}

.nextcircle-panel .grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.nextcircle-panel .date {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--navy-text);
  margin: 0;
  text-wrap: balance;
  max-width: 16ch;
}

.nextcircle-panel .specs {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.nextcircle-panel .specs span::before {
  content: "·";
  margin-right: 12px;
  color: var(--yellow);
}

.nextcircle-panel .specs span:first-child::before { display: none; }

.nextcircle-panel .right { display: grid; gap: 24px; }

.nextcircle-panel .invite {
  font-family: var(--serif);
  font-weight: 380;
  font-size: 19px;
  line-height: 1.55;
  color: var(--navy-text);
  margin: 0;
  text-wrap: pretty;
  max-width: 30ch;
}

.nextcircle-panel .actions {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}

.nextcircle-panel .actions .text-her {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--navy-text);
  border-bottom: 1px solid var(--yellow);
  padding-bottom: 2px;
}
.nextcircle-panel .actions .text-her:hover { color: var(--yellow-soft); }

/* ---------- footer ---------- */

footer.site {
  padding-block: 56px 36px;
  font-family: var(--sans);
}

footer.site .row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr;
  gap: 36px;
  align-items: start;
}

footer.site .brand {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.25;
}

footer.site .brand .tag {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-soft);
  max-width: 36ch;
  line-height: 1.4;
}
footer.site .brand .tag-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

footer.site .col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}

footer.site .col a, footer.site .col p {
  display: block;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 6px 0;
  line-height: 1.5;
  padding-bottom: 1px;
  width: max-content;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

footer.site .col a:hover {
  color: var(--ink);
  border-bottom-color: var(--yellow);
}

footer.site .fineprint {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 16px;
  flex-wrap: wrap;
}

footer.site .ft {
  color: var(--muted);
  opacity: 0.4;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  transition: opacity 0.18s ease, color 0.18s ease;
}

footer.site .ft:hover { opacity: 1; color: var(--blue); }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- mobile ---------- */

/* Global safeguard: nothing scrolls horizontally out of plane.
   The vesica figure has wide name labels, the hero headline runs
   long — clamp any rogue overflow at the page edge. */
html, body { overflow-x: clip; }

@media (max-width: 880px) {
  /* All four nav links remain visible on tablet/small-laptop.
     Tightened gap + smaller font so they fit. */
  .topbar-nav-desktop { gap: clamp(14px, 3vw, 22px); font-size: 14px; }

  .hero .stage { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .hero .portrait-wrap { max-width: 280px; margin: 0 auto; }

  .panel-blue .panel-header { grid-template-columns: 1fr; gap: 18px; align-items: start; }

  .doors { grid-template-columns: 1fr; }
  .doors .door { border-right: 0; border-bottom: 1px solid var(--rule); padding: 28px 0; }
  .doors .door:last-child { border-bottom: 0; }

  .elsewhere { grid-template-columns: 1fr; gap: 20px; }

  .adjacent { grid-template-columns: 1fr; }

  .nextcircle-panel .grid { grid-template-columns: 1fr; gap: 28px; }

  footer.site .row { grid-template-columns: 1fr 1fr; gap: 28px; }
  footer.site .fineprint { flex-direction: column; align-items: flex-start; gap: 6px; }

  .circle-composition { --radius: 44%; }
  .circle-composition .who { font-size: 12.5px; }

  .panel-specs dl { grid-template-columns: 1fr 1fr; gap: 20px; }
  .panel-specs dl > div { padding: 16px 0; border-left: 0; border-top: 1px solid var(--navy-rule); }
  .panel-specs dl > div:first-child { border-top: 0; padding-top: 0; }
}

/* Phones — single-column everything, tighter padding, contained figure. */
@media (max-width: 600px) {
  /* shell padding: tighter on phones */
  .shell { padding-inline: 18px; }
  .panel-inner.shell { padding-block: clamp(56px, 12vw, 80px); }
  .section { padding-block: clamp(56px, 12vw, 80px); }

  /* topbar — fixed at top of viewport, mark on left, hamburger on
     right. The inline desktop nav is hidden; the hamburger opens
     the full-screen drawer. Body gets top padding to compensate. */
  body { padding-top: var(--topbar-h, 56px); }
  .topbar {
    --topbar-h: 56px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 55;
    background: rgba(243, 234, 209, 0.94);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid rgba(27, 42, 65, 0.08);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 12px;
    min-height: var(--topbar-h);
  }
  .topbar .mark { font-size: 15px; white-space: nowrap; }
  .topbar .topbar-nav-desktop { display: none; }
  .topbar-toggle { display: inline-block; }

  /* hero headline: smaller, full bleed, no awkward break */
  .hero .name { font-size: clamp(40px, 11vw, 56px); line-height: 1.02; }
  .hero .lede-line { font-size: 13px; }
  .hero .standfirst { font-size: 16px; line-height: 1.55; }
  .hero .portrait-wrap { max-width: 100%; }
  .hero .portrait { aspect-ratio: 4 / 5; max-width: 320px; margin: 0 auto; display: block; }

  /* Vesica figure on phones — constrain the stage to a tight central
     column so the surrounding name labels stay on-screen. Names allow
     wrapping (no nowrap) so long labels break to 2 lines instead of
     overflowing horizontally. Overflow clipped on the stage only
     (NOT on the scrollspace — that would break the sticky pin). */
  .vesica {
    max-width: 340px;
    margin-inline: auto;
  }
  .vesica-stage { overflow: hidden; }
  .vesica-name {
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: normal;
    max-width: 72px;
    word-break: normal;
  }
  /* Lens text region — wider on phones so the quote fits inside the
     merged circle without choking at 22% width. Also slightly tighter
     line-height for the wrapped attribution. */
  .vesica-lens { width: 44%; max-width: 180px; }
  .vesica-lens blockquote { font-size: 12px; line-height: 1.32; }
  .vesica-rule { margin: 8px 0 6px; }
  .vesica-attr { font-size: 9.5px; line-height: 1.45; }
  .vesica-attr .cite { font-size: 9px; margin-left: 0; display: block; margin-top: 2px; }

  /* Booking grid actions sit one per row at narrow widths */
  .nextcircle-panel .actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nextcircle-panel .btn-yellow { width: 100%; text-align: center; }

  /* Footer: stack the four columns; 1fr 1fr is too cramped at 320–375px */
  footer.site .row { grid-template-columns: 1fr; gap: 24px; }

  /* Spec sheet: ensure single column at very small widths */
  .panel-specs dl { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 540px) {
  /* witness ring collapses to list on small screens */
  .circle-composition {
    aspect-ratio: auto;
    height: auto;
    padding: 56px 0;
  }
  .circle-composition .ring-svg { display: none; }
  .circle-composition .center { position: static; padding: 0; }
  .circle-composition .who {
    position: static;
    transform: none;
    display: block;
    text-align: center;
    margin: 8px 0;
    font-size: 14px;
    color: var(--yellow-pale);
    left: auto !important;
    top: auto !important;
  }
  .circle-composition .witnesses-list-title {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow-pale);
    text-align: center;
    margin-top: 40px;
    margin-bottom: 18px;
  }
}