/* 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;
  /* Yellow ink — darker variant of yellow that passes 4.5:1 on cream.
     Used for small yellow-tone text on the paper background (e.g. the
     featured "01" numeral on the testimonials page) where the bright
     yellow fails contrast. */
  --yellow-ink:   #8C6411;

  --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); }

/* ── Focus indicators (WCAG 2.4.7) ───────────────────────────────────
   Single global rule using :focus-visible so the ring only appears
   for keyboard users, not mouse clicks. The blue ring works on cream
   sections; we override to yellow inside the navy panels. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.panel-blue :focus-visible,
.mobile-nav :focus-visible {
  outline-color: var(--yellow);
}

/* ── Skip-to-content link ───────────────────────────────────────────
   Visible only when focused; lets keyboard users jump past the topbar. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 100;
  transform: translateY(-200%);
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ── prefers-reduced-motion fallback ────────────────────────────────
   Disable the Reveal animation entirely for visitors who request
   reduced motion; otherwise elements stay invisible until the
   IntersectionObserver fires, which is still motion. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

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-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);
}

/* ---------- 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;
  /* 44×44 hit area (WCAG 2.5.5) — the visible bars sit inside via
     padding so the icon stays compact. */
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 60;
}
.topbar-toggle .bar {
  position: absolute;
  /* bars span the inner 24px column, centered in the 44px button */
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.24s ease, opacity 0.18s ease, top 0.24s ease;
}
/* 24px-tall icon centered vertically in the 44px button — bars at
   y = 16 / 22 / 28 within the 44 (i.e. 16, 22, 28 = centered). */
.topbar-toggle .bar:nth-child(1) { top: 16px; }
.topbar-toggle .bar:nth-child(2) { top: 22px; }
.topbar-toggle .bar:nth-child(3) { top: 28px; }
.topbar-toggle.is-open .bar:nth-child(1) { top: 22px; transform: rotate(45deg); }
.topbar-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.topbar-toggle.is-open .bar:nth-child(3) { top: 22px; 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,
.about-grid .bio-portrait .portrait {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Bias the crop up so the eyes sit roughly a third from the top. */
  object-position: 50% 28%;
  filter: contrast(0.95) saturate(0.92);
}

/* CV grid */

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

.essay {
  /* left-align under the page H1, no auto-margin centering */
  max-width: 68ch;
  margin: 0;
  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 h2,
.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 h2:first-of-type,
.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;
}

/* ---------- testimonials ----------
   Editorial left-spine: a 1px navy rule runs along the left edge of
   the stream with a yellow bead at the top of each voice. All voices
   sit to the right of the spine, left-justified. Heather Maloney's
   short quote leads as the FEATURE — same spine slot, larger type,
   bigger bead. Kathy Worcester's long testimonial has an inline
   "Read the rest" expansion. */

.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 0 clamp(56px, 8vw, 96px);
  max-width: 52ch;
  text-align: left;
  text-wrap: pretty;
}

.testimonials-stream {
  /* Flush-left — spine hugs the shell gutter, not the page center */
  max-width: 720px;
  margin: 0;
  position: relative;
  padding-left: clamp(28px, 4vw, 44px);
}

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

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

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

.testimonial-quote {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--ink);
}
.testimonial-quote p {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "wght" 400;
  font-style: normal;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--ink-soft);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.testimonial-quote p:last-of-type { margin-bottom: 0; }

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

/* "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;
  /* visual underline below the text, expanded vertical hit area
     via top/bottom padding so the tap target meets 44px (WCAG 2.5.5) */
  box-shadow: 0 1px 0 var(--ink);
  padding: 12px 4px;
  margin: 14px -4px 0;
  cursor: pointer;
  transition: color 0.18s ease, box-shadow 0.18s ease;
}
.testimonial-more:hover {
  color: var(--ink-soft);
  box-shadow: 0 1px 0 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, left-justified. */
.testimonial-by {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.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;
}

/* Yellow bead on the spine — at the top of each voice, on the left. */
.testimonial::after {
  content: "";
  position: absolute;
  top: clamp(48px, 5.6vw, 76px);
  left: calc(-1 * clamp(28px, 4vw, 44px) - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}
/* 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);
  left: calc(-1 * clamp(28px, 4vw, 44px) - 5.5px);
}

.testimonials-foot {
  margin-top: clamp(64px, 8vw, 96px);
  text-align: left;
}
.testimonials-foot p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  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); }

/* ---------- 404 ---------- */
.notfound-msg {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 40ch;
  text-wrap: pretty;
}
.notfound-msg a {
  border-bottom: 1px solid var(--yellow);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.notfound-msg a:hover { border-bottom-color: var(--ink); }

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

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
/* min-width: 0 lets the grid columns shrink below their min-content
   width at narrow viewports (e.g. when a long email address would
   otherwise push the column wider than the viewport at 320px). */
.contact-grid > * { min-width: 0; }
.contact-list dd a { overflow-wrap: anywhere; word-break: break-word; }

.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 on mobile: same left-spine layout, slightly tighter. */
  .testimonials-stream { padding-left: 24px; }
  .testimonial::after { left: -27.5px; }
  .testimonial--feature::after { left: -29.5px; }
}

/* ---------- 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;
  font-weight: 500;  /* explicit so kicker H2s don't inherit browser bold */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}
/* When a kicker is also an H2 (semantic section heading), keep the
   visual identical — it's a small mono caps label that doubles as a
   landmark for screen readers. */
h2.kicker.as-heading { display: inline-flex; }
/* 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);
}

/* ---------- 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;
}

/* epigraph — Rotella at the top, Roman not italic, attribution italic. */
.epigraph {
  max-width: 32ch;
  margin: 0 0 clamp(56px, 7vw, 88px);
}
.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 { color: var(--navy-text); }

/* prose — all serif on this panel (no sans-serif body voice here). */
.panel-prose {
  max-width: 56ch;
  margin: 0 0 clamp(56px, 7vw, 96px);
}

/* ── 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(24px, 4vw, 56px) 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-self  { left: calc(36.7% - 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-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

@media (max-width: 880px) {
  /* On tablets through narrow desktops the vesica figure runs full
     width and the surrounding name labels reach the viewport edges.
     Constrain the figure container + clip overflow so labels are
     bounded by the stage instead of the viewport. */
  .vesica { aspect-ratio: auto; max-width: 100%; }
  .vesica-svg { position: relative; aspect-ratio: 4 / 3; }
  .vesica-stage { overflow: hidden; }
  .vesica-name { font-size: 12px; max-width: 110px; white-space: normal; line-height: 1.2; }
}

/* 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;
  /* No underline on the "more" label — the arrow alone is the cue, so
     the doors section doesn't compound to six yellow marks at once. */
  padding-bottom: 2px;
  transition: 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 {
  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;
}

/* ---------- 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; }
  /* Smaller mono kicker so "Speaking Circles® · NEW YORK CITY · SINCE 2003"
     stays on a single line at ~375px wide. */
  .hero .lede-line { font-size: 11px; letter-spacing: 0.10em; }
  .hero .lede-line em { font-size: 12.5px; }
  .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;
  }
}