/* ============================================
   SAKIRAT WARAICH — Design System & Styles
   Scandinavian editorial. Obsessively crafted.
   ============================================ */

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

img {
  max-width: 100%;
  display: block;
  border-radius: 0;
}

ul, ol { list-style: none; }

/* --- Base --- */
html {
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-load fade-in */
main {
  padding-top: 4.5rem;
  animation: fadeIn 0.6s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Focus */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- Links — animated underline via gradient --- */
a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.5s ease;
}

.article-body a,
.about-body a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease, color 0.3s ease;
  padding-bottom: 1px;
}

.article-body a:hover,
.about-body a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}

/* --- Layout --- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 5vw;
}

.container--narrow {
  max-width: 800px;
}

/* --- Typography --- */
h1, h2, h3 {
  font-family: 'Fraunces', serif;
  text-wrap: pretty;
}

h1 {
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-variation-settings: 'opsz' 72;
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  font-variation-settings: 'opsz' 72;
}

p {
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -0.005em;
  max-width: 680px;
  text-wrap: pretty;
}

/* Meta / Captions */
.meta-line {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
}

.display {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

small,
.caption {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: 'Inter Tight', sans-serif;
}

.lead {
  font-size: 1.15rem;
  line-height: 1.8;
  max-width: 720px;
}

/* Section eyebrow — uses fixed semantic token so contrast stays safe
   regardless of theme/palette switching. The `margin-inline: auto`
   recovers centering inside a `.text-center` parent — without it the
   global `p { max-width: 680px }` caps the eyebrow's <p> below parent
   width and pins it left (the CRB-9 centered-section block trap). */
.eyebrow {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted-strong);
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
  margin: 0 auto var(--space-l);
  display: block;
}

/* Image captions */
.img-caption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-variation-settings: 'opsz' 24;
}

/* --- Nav --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--hero-bg);
  /* Hairline separation from hero bg in flat (pre-scroll) state.
     Floating state has its own border via --header-border (L3-15). */
  border-bottom: 1px solid var(--header-hairline);
  transition: top var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              border-radius var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              left var(--dur-normal) var(--ease-out),
              right var(--dur-normal) var(--ease-out),
              width var(--dur-normal) var(--ease-out);
}

/* Floating pill state — toggled by ScrollTrigger.
   Opaque surface via --header-surface (see tokens.css). Section-independent
   so the pill reads the same over every section in both themes. */
.site-header--floating {
  top: 14px;
  left: 5vw;
  right: 5vw;
  width: auto;
  border-radius: var(--radius-pill);
  background: var(--header-surface);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
  transition: background-color var(--dur-normal) ease,
              color var(--dur-normal) ease,
              border-color var(--dur-normal) ease,
              box-shadow var(--dur-normal) ease,
              top var(--dur-normal) var(--ease-out),
              border-radius var(--dur-normal) var(--ease-out),
              left var(--dur-normal) var(--ease-out),
              right var(--dur-normal) var(--ease-out),
              width var(--dur-normal) var(--ease-out);
}

/* .header--over-dark class retired as a visual variant in L3-15.
   motion.js still toggles it; kept for potential future use. */

.site-header--floating .site-nav {
  height: 3.5rem;
  padding-inline: var(--space-l);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  transition: height var(--dur-normal) var(--ease-out),
              padding var(--dur-normal) var(--ease-out);
}

.nav-wordmark {
  font-family: 'Fraunces', serif;
  /* L3-CRB-1: was off-scale 1.2rem; mapped to --text-body (1.0625rem) so
     the wordmark sits inside the type scale and gives "Home" room to
     breathe at 1280-1400. Removes a D7 entry. */
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-variation-settings: 'opsz' 48;
  white-space: nowrap;
  transition: color var(--dur-normal) ease;
}

.nav-links {
  display: flex;
  align-items: center;
  /* L3-CRB-1: tightened from --space-m (1.5rem) to --space-s (1rem) —
     7 items at 1.5rem read scattered, 1rem reads as a coherent group
     while still leaving the gold separators visible breathing room. */
  gap: var(--space-s);
}

/* Desktop nav. 1100–1399 stays compact so "Sakirat Waraich" doesn't crowd
   HOME at 1280. At 1400+ there's enough headroom to open the gap and let
   the row breathe (matches the design-target spacing in the brief). */
@media (min-width: 1100px) {
  .nav-links {
    gap: 0.6rem;
  }
  .nav-links a {
    letter-spacing: 0.08em;
    font-size: 0.7rem;
  }
  .nav-separator {
    font-size: 0.65rem;
  }
}

@media (min-width: 1400px) {
  .nav-links {
    gap: 1rem;
  }
  .nav-links a {
    font-size: 0.75rem;
  }
  .nav-separator {
    font-size: 0.7rem;
  }
  /* Wordmark/HOME were touching at 1400+ once nav-links opened up. The
     header's .container caps content at 1280 with 5vw padding, which
     pinches the row at wide viewports. Widen the cap (not uncap) so the
     row breathes at 1400-1600 but stays centred on ultra-wide displays
     instead of stranding wordmark and nav at opposite edges of a 2000+
     viewport. */
  .site-header .site-nav.container {
    max-width: 1600px;
    padding-inline: 2rem;
  }
}

/* Gold pipe separators between nav items — premium bright gold */
.nav-separator {
  color: var(--gold);
  font-size: var(--text-meta);
  font-weight: 400;
  opacity: 0.95;
  user-select: none;
  line-height: 1;
  text-shadow: 0 0 4px rgba(212, 168, 74, 0.35);
}

/* Nav link with draw-left-to-right underline */
.nav-links a {
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(232, 228, 216, 0.6);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--dur-fast) ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width var(--dur-normal) var(--ease-out);
}

.nav-links a:hover {
  color: var(--gold);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a.active {
  color: var(--paper);
}

.nav-links a.active::after {
  width: 100%;
  background: var(--gold);
}

/* When floating (scrolled past hero), revert nav to dark-on-light */
.site-header--floating .nav-wordmark {
  color: var(--ink);
}

.site-header--floating .nav-links a {
  color: var(--text-muted-strong);
}

.site-header--floating .nav-links a:hover {
  color: var(--gold);
}

.site-header--floating .nav-links a.active {
  color: var(--ink);
}

.site-header--floating .nav-links a.active::after {
  background: var(--gold);
}

.site-header--floating .nav-separator {
  color: var(--gold);
  opacity: 0.95;
}

.site-header--floating .nav-toggle span {
  background: var(--ink);
}

.site-header--floating .theme-toggle {
  color: var(--text-muted-strong);
}

.site-header--floating .theme-toggle:hover {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  flex-direction: column;
  gap: 6px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--paper);
  transition: all var(--dur-fast) ease;
}

/* Floating header on mobile — less extreme pill.
   Hamburger threshold = 1100 (L3-CONTENT-REWRITE). Bootstrap-style .98 offset
   avoids a subpixel gap at fractional devicePixelRatio (Windows HiDPI). */
@media (max-width: 1099.98px) {
  .site-header--floating {
    top: 8px;
    left: 3vw;
    right: 3vw;
    border-radius: 24px;
  }

  .site-header--floating .site-nav {
    height: 3.25rem;
    padding-inline: 1.25rem;
  }

  /* Revert floating when mobile nav is open */
  body.nav-open .site-header--floating {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  body.nav-open .site-header--floating .site-nav {
    height: 4.5rem;
  }
}

/* Mobile Nav.
   Hamburger threshold = 1100 (L3-CONTENT-REWRITE). Bootstrap-style .98 offset
   avoids a subpixel gap at fractional devicePixelRatio (Windows HiDPI). */
@media (max-width: 1099.98px) {
  .nav-toggle {
    display: flex;
  }

  /* Hide gold separators on mobile */
  .nav-separator {
    display: none;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 4.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 4.5rem);
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }

  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: var(--ink-60);
  }

  .nav-links a.active {
    color: var(--ink);
  }

  /* In-menu theme toggle is replaced by .theme-toggle--mobile in the
     header bar on mobile (L3-14) — hide the whole <li> so the column
     flex panel doesn't leave a gap where it used to sit. */
  .nav-links__theme-item {
    display: none;
  }

  /* .site-nav scope bumps specificity above the base hide rule further
     down in the stylesheet, which would otherwise win on source order. */
  .site-nav .theme-toggle--mobile {
    display: flex;
    margin-left: auto;
    margin-right: var(--space-xs);
  }

  body.nav-open .nav-links {
    display: flex;
  }

  /* Hamburger to X */
  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* --- Sections ---
   Vertical rhythm comes from the shared --section-py* tokens
   (tokens.css). ~30% tighter than the old 6/10/12rem scale —
   the diagonal dividers already create generous separation so
   padding doesn't need to pile on top. */
.section {
  padding: var(--section-py) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--section-py-md) 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--section-py-lg) 0;
  }
}

/* Compact variant for short content blocks (single-line CTAs, press strip). */
.section--compact {
  padding: var(--space-2xl) 0;
}
@media (min-width: 768px) {
  .section--compact { padding: var(--space-3xl) 0; }
}

/* Breathing space between a section-intro block (.eyebrow + h2 + intro p)
   and the content that follows. Replaces ad-hoc margin-top per page. */
.section-intro + * { margin-top: var(--section-intro-gap); }
@media (min-width: 768px) {
  .section-intro + * { margin-top: var(--section-intro-gap-md); }
}

/* Centered variant — short gold rule under the heading, mirroring the
   reference dentistry/about layout. The rule auto-centers because
   .text-center on the parent makes the inline-block child sit center. */
.section-intro--centered .section-intro__rule {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin-top: var(--space-s);
}

/* Hero variant — sits between the page h1 and the body copy. Slightly
   more vertical room so it doesn't crowd the display heading. */
.section-intro__rule--hero {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin: var(--space-s) auto var(--space-l);
}

.section--full-bleed {
  width: 100%;
  background: var(--ink);
  color: var(--bg);
}

.section--full-bleed a {
  color: var(--bg);
}

.section--full-bleed .btn--outline {
  color: var(--bg);
  border-color: var(--bg);
}

.section--full-bleed .btn--outline:hover {
  background: var(--bg);
  color: var(--ink);
}

.section--full-bleed .meta-line,
.section--full-bleed .eyebrow {
  color: var(--text-on-dark-mute);
}

.section--full-bleed p {
  color: var(--text-on-dark-body);
}

.section--full-bleed h2 {
  color: var(--bg);
}

.section--warm {
  background: var(--warm-bg);
}

/* --- Angled section dividers — bold shaped transitions --- */
.section[class*="divider-"],
.hero[class*="divider-"] {
  position: relative;
  z-index: 1;
}

/* The shape — large enough to feel intentional */
.section[class*="divider-"]::after,
.hero[class*="divider-"]::after {
  content: '';
  position: absolute;
  /* -1px (not 0) covers the sub-pixel AA seam where the polygon edge
     meets the section's own bg. The 1px overlap fills the NEXT section
     (same color), so it's invisible. Not a design value — rendering fix. */
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 3;
  pointer-events: none;
}

@media (min-width: 768px) {
  .section[class*="divider-"]::after,
  .hero[class*="divider-"]::after {
    height: 140px;
  }
}

@media (min-width: 1024px) {
  .section[class*="divider-"]::after,
  .hero[class*="divider-"]::after {
    height: 180px;
  }
}

/* Direction: steep diagonal left-to-right */
.divider-left::after {
  clip-path: polygon(0 0, 100% 65%, 100% 100%, 0 100%);
}

/* Direction: steep diagonal right-to-left */
.divider-right::after {
  clip-path: polygon(0 65%, 100% 0, 100% 100%, 0 100%);
}

/* Direction: soft curve — organic feel */
.divider-curve::after {
  clip-path: ellipse(75% 100% at 50% 100%);
}

/* Color: fill matches the NEXT section's background */
.divider-to-warm::after {
  background: var(--warm-bg);
}

.divider-to-cream::after {
  background: var(--bg);
}

.divider-to-dark::after {
  background: var(--dark-bg);
}

.divider-to-hero::after {
  background: var(--hero-bg);
}

/* Sections need extra bottom padding to not collide with the divider shape.
   Gap values come from tokens.css (--divider-gap*), tuned down from the old
   50/70/90 so the transition doesn't leave a giant empty zone. */
.section[class*="divider-"],
.hero[class*="divider-"] {
  padding-bottom: calc(var(--section-py) + var(--divider-gap));
}

@media (min-width: 768px) {
  .section[class*="divider-"],
  .hero[class*="divider-"] {
    padding-bottom: calc(var(--section-py-md) + var(--divider-gap-md));
  }
}

@media (min-width: 1024px) {
  .section[class*="divider-"],
  .hero[class*="divider-"] {
    padding-bottom: calc(var(--section-py-lg) + var(--divider-gap-lg));
  }
}

/* --- Gold thread — vertical connecting line between sections --- */
.gold-thread {
  display: block;
  width: 1px;
  height: 4rem;
  background: linear-gradient(to bottom, transparent, var(--clay) 30%, var(--clay) 70%, transparent);
  opacity: 0.3;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .gold-thread {
    height: 6rem;
  }
}

/* --- Gold divider — legacy selector, now renders as the smudge ---
   Old HTML still uses <hr class="gold-divider"> in a few places. We keep
   the selector but draw the same decorative smudge as .divider-smudge,
   so the look unifies without touching every page at once. */
.gold-divider {
  border: none;
  width: 100%;
  max-width: 180px;
  height: 28px;
  margin: 0 auto;
  background: transparent url("/assets/images/icons/smudge.svg") center/contain no-repeat;
  opacity: 0.95;
}

/* --- Divider Smudge — reusable premium decorative mark ---
   Usage:
     <hr class="divider-smudge">                      (block-level, centered)
     <span class="divider-smudge divider-smudge--sm"> (inline small variant)
     .heading-accent   (applies smudge under a heading — see below)

   One SVG asset, three size variants, works in both themes. */
.divider-smudge {
  border: none;
  display: block;
  width: 100%;
  max-width: 200px;
  height: 32px;
  margin: var(--space-l) auto;
  background: transparent url("/assets/images/icons/smudge.svg") center/contain no-repeat;
  pointer-events: none;
}

.divider-smudge--sm { max-width: 140px; height: 24px; }
.divider-smudge--lg { max-width: 260px; height: 40px; }

/* Smudge sitting flush-left under a heading (section starts) */
.divider-smudge--left { margin-inline: 0; }

/* Slight de-emphasis on light cream bg where the paper absorbs less light */
.section--warm .divider-smudge,
.section--warm .gold-divider,
.section--nila .divider-smudge,
.section--nila .gold-divider { opacity: 0.9; }

[data-theme="dark"] .divider-smudge,
[data-theme="dark"] .gold-divider { opacity: 1; filter: saturate(1.1); }

/* --- Section Divider — hairline rule between abrupt same-tone sections.
   L3-CRB-9 (C). Use sparingly: only where adjacent sections share the
   same background tone AND no other separator exists (no smudge,
   no .invitation, no color-change divider). Centered, narrow,
   generous vertical breathing room. Same color token as
   .about-chapter / .contact-block hairlines. */
.section-divider {
  border: none;
  display: block;
  width: 100%;
  max-width: 200px;
  height: 1px;
  margin: var(--space-2xl) auto;
  /* --rule-strong (one step darker than --rule) so the 1px hairline
     reads as deliberate, not as paint dust. Pass 3 audit fix. */
  background: var(--rule-strong);
}

/* --- Dark sections — warm charcoal color blocking --- */
.section--dark {
  background: var(--dark-bg);
  color: var(--paper);
}

.section--dark h2,
.section--dark h3 {
  color: var(--paper);
}

.section--dark p {
  color: var(--dark-body);
}

.section--dark .eyebrow,
.section--dark .meta-line {
  color: var(--dark-muted);
}

.section--dark a {
  color: var(--paper);
}

.section--dark .btn--primary {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--paper);
}

.section--dark .btn--primary::before {
  background: var(--clay-dark);
}

.section--dark .btn--primary:hover {
  border-color: var(--clay-dark);
}

.section--dark .btn--outline {
  color: var(--paper);
  border-color: var(--paper);
}

.section--dark .btn--outline::before {
  background: var(--paper);
}

.section--dark .btn--outline:hover {
  color: var(--dark-bg);
}

/* Discipline tiles on dark bg */
.section--dark .discipline-tile {
  border-color: var(--dark-border, rgba(245, 241, 234, 0.12));
  color: var(--paper);
  transition: border-color 0.4s ease, background 0.4s ease;
}

.section--dark .discipline-tile:hover {
  border-color: var(--clay);
  background: var(--dark-bg-card, rgba(245, 241, 234, 0.05));
}

.section--dark .discipline-tile h3 {
  color: var(--paper);
}

.section--dark .discipline-tile p {
  color: var(--dark-muted);
}

/* Nila feature section — warm bg with image overlap */
.section--nila {
  background: var(--warm-bg);
  position: relative;
}

/* .section-rule — legacy selector, now a no-op.
   Full-width horizontal rules between sections are clutter: the angled
   dividers already separate sections. Kept as a selector so old HTML
   doesn't have to change on day one, but it no longer renders anything. */
.section-rule {
  display: none;
}

/* .accent-rule — legacy decorative line, now renders as a smudge.
   Same rationale as .gold-divider: keep the selector, upgrade the look. */
.accent-rule {
  border: none;
  height: 32px;
  width: 100%;
  max-width: 200px;
  background: transparent url("/assets/images/icons/smudge.svg") center/contain no-repeat;
  opacity: 0.85;
  margin: 0 auto;
}

/* Heading accent — the brushstroke under section-intro h2s.
   Placement is driven by five knobs so the stroke can be tuned per
   instance (DevTools → edit --brushstroke-* on the element) without
   rewriting the rule. */
.heading-accent {
  --brushstroke-width: 240px;
  --brushstroke-height: 37px;
  --brushstroke-offset-x: -13px;
  --brushstroke-offset-y: -20px;
  --brushstroke-rotate: -4deg;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Mobile — scaled proportionally; tune in DevTools at 375px if needed. */
@media (max-width: 767px) {
  .heading-accent {
    --brushstroke-width: 160px;
    --brushstroke-height: 25px;
    --brushstroke-offset-x: -9px;
    --brushstroke-offset-y: -13px;
  }
}

.heading-accent::after {
  content: '';
  display: block;
  width: var(--brushstroke-width);
  height: var(--brushstroke-height);
  background: transparent url("/assets/images/icons/smudge.svg") left center/contain no-repeat;
  margin-top: var(--space-m, 1.5rem);
  transform: translate(var(--brushstroke-offset-x), var(--brushstroke-offset-y))
             rotate(var(--brushstroke-rotate));
  transform-origin: left center;
}

/* Warm glow on dark — whether dark comes from the section
   (.section--dark, .section--full-bleed) or the page theme. */
[data-theme="dark"] .heading-accent::after,
.section--dark .heading-accent::after,
.section--full-bleed .heading-accent::after {
  filter:
    saturate(1.15)
    brightness(1.06)
    drop-shadow(0 0 1.5px rgba(244, 206, 102, 0.2))
    drop-shadow(0 0 4px rgba(244, 206, 102, 0.09));
}

.text-center .heading-accent::after,
.heading-accent.text-center::after {
  background-position: left center;
}

/* --- Hero + motion initial states — CSS-level mirror of GSAP set() values.
   Prevents a one-frame flash of unrevealed content between HTML parse
   and motion.js running. GSAP overrides these with inline styles once it
   initializes; noscript restores them to visible via !important. --- */
.hero--split [data-motion="reveal-image"] {
  clip-path: inset(0 0 100% 0);
}

.hero--split [data-motion="hero-intro"],
.hero--split [data-motion="hero-ctas"] {
  opacity: 0;
}

/* Word-by-word reveal — keep final state stable so heading can never
   render with a mix of dim + bright words (the Speaking h2 bug). */
[data-motion="reveal-text"] .word {
  display: inline-block;
}

/* --- Reveal animation (CSS fallback for pages using reveal.js) --- */
/* On index.html, GSAP handles reveals via motion.js instead. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 500ms; }

/* --- Heroes ---
   min-height clamps so the hero feels generous on standard laptops/desktops
   without ballooning on ultra-wide displays (where 88vh would overshoot
   the viewport entirely). Floor 560px keeps short laptop screens from
   collapsing the hero; ceiling 820px stops it from feeling overblown
   on 1440p+ panels. */
.hero {
  min-height: clamp(560px, 75vh, 820px);
  display: flex;
  align-items: center;
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--hero-bg);
  color: var(--text-on-dark);
}

/* Hero text inversions for dark hero bg */
.hero h1 {
  color: var(--text-on-dark);
}

.hero .hero__intro {
  color: var(--text-on-dark-body);
}

/* L3-CRB-2 §2.2 — lift the role line ("Dentist · Entrepreneur · Culinary
   founder · Speaker") so it carries hierarchy beneath the wordmark. Gold
   is theme-stable (#D4A84A) and the hero bg is dark in both modes, so
   the same color works in light + dark. Paired override at
   [data-theme="dark"] .hero .meta-line to win source-order over the
   generic dark .meta-line rule below. */
.hero .meta-line {
  color: var(--gold);
  font-weight: 600;
}

.hero .btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-btn-on-gold);
}

.hero .btn--primary::before {
  background: var(--gold-hover);
}

.hero .btn--primary:hover {
  color: var(--hero-bg);
  border-color: var(--gold-hover);
}

.hero .btn--outline {
  color: var(--paper);
  border-color: var(--paper);
}

.hero .btn--outline::before {
  background: var(--paper);
}

.hero .btn--outline:hover {
  color: var(--hero-bg);
}

@media (min-width: 768px) {
  .hero {
    padding: var(--space-3xl) 0 var(--space-5xl);
  }
}

.hero__image {
  overflow: hidden;
}

.hero__image img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.hero__image:hover img {
  transform: scale(1.02);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__content .meta-line {
  margin-top: 2rem;
}

/* Hero: Split */
.hero--split .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  /* Drop the top padding so the portrait can extend up under the floating
     header — same idea as dentistry-hero-split / nila-hero-split. */
  .hero--split {
    padding-top: 0;
  }

  .hero--split .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: stretch;
  }

  /* Image column: pull rightward past the container padding so the
     portrait still feels generous against the brown hero, but stop
     short of the viewport edge. Both edges of the image alpha-feather
     into the bg so the portrait reads as merged into atmosphere
     rather than ending at a hard rectangular edge. The original
     image stays in its native colors — only its alpha is masked. */
  .hero--split .hero__image {
    margin-right: calc(-1 * (5vw + max(0px, (100vw - 1280px) / 4)));
    align-self: stretch;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 86%, transparent 100%);
  }

  /* Tablet 768–1279: image fills its column with object-fit cover. The
     column is too narrow at this range to display the full 2:3 portrait
     without overflowing into the text column. */
  .hero--split .hero__image img {
    width: 100%;
    height: clamp(560px, 75vh, 820px);
    object-fit: cover;
    object-position: 38% 30%;
  }
}

@media (min-width: 1280px) {
  /* Desktop 1280+: column is wide enough to fit the native 2:3 portrait
     without overflow, so we display the full frame — head to feet, with
     the surroundings the photographer composed — instead of cover-cropping
     to a wide box. Height clamps so it grows with the viewport on standard
     desktops but plateaus at 1080px on ultra-wide displays. */
  .hero--split .container {
    align-items: center;
  }

  .hero--split .hero__image {
    align-self: stretch;
    justify-self: end;
    height: clamp(640px, 92vh, 1080px);
    aspect-ratio: 2 / 3;
    width: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 84%, transparent 100%);
  }

  .hero--split .hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

@media (max-width: 767px) {
  /* Mobile order: title/subtitle/intro → image → buttons. display:contents
     hoists hero__content's children into the .container grid so order can
     reposition them across the hero__image sibling. */
  .hero--split .hero__content {
    display: contents;
  }
  .hero--split .hero__image { order: 2; }
  .hero--split .hero__ctas  { order: 3; }
  /* Drop the 88vh floor so content+image set the height, and zero the
     in-flex margins so the grid gap alone spaces the hoisted children. */
  .hero--split {
    min-height: auto;
  }
  .hero--split .container {
    gap: var(--space-xs);
  }
  .hero--split .meta-line,
  .hero--split .hero__intro,
  .hero--split .hero__ctas {
    margin-top: 0;
  }
  /* Soft top + bottom alpha fade so the portrait dissolves into the brown
     hero on mobile too — keeps the merged-into-atmosphere aesthetic from
     desktop instead of letting the image read as a flat rectangular card
     between the text and CTAs. */
  .hero--split .hero__image {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}

.hero__intro {
  font-size: var(--text-body-l);
  line-height: var(--lh-body);
  color: var(--ink-60);
  max-width: var(--measure-s);
  margin-top: var(--space-m);
}

.hero__ctas {
  display: flex;
  /* L3-CRB-2 §2.3 — tighten button grouping (~25% closer). Token math
     keeps it on the scale without inventing a new step. */
  gap: calc(var(--space-s) - var(--space-2xs));
  flex-wrap: wrap;
  margin-top: var(--space-l);
}

/* --- Buttons — fill animation --- */
.btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  position: relative;
  overflow: hidden;
  transition: color 0.6s ease, border-color 0.6s ease;
  z-index: 1;
}

.btn--primary {
  background: var(--gold);
  color: var(--text-btn-on-gold);
  border: 1px solid var(--gold);
  font-weight: 600;
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clay-dark);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--primary:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn--primary:hover {
  border-color: var(--gold-hover);
  color: var(--text-btn-on-gold);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn--outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--outline:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn--outline:hover {
  color: var(--bg);
}

/* Outline buttons inside full-bleed */
.section--full-bleed .btn--outline {
  color: var(--bg);
  border-color: var(--bg);
}

.section--full-bleed .btn--outline::before {
  background: var(--bg);
}

.section--full-bleed .btn--outline:hover {
  color: var(--ink);
}

/* --- Disciplines Grid — asymmetric offset --- */
.disciplines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .disciplines-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .disciplines-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* Asymmetric vertical offset — pairs */
  .disciplines-grid .discipline-tile:nth-child(2) {
    margin-top: 3rem;
  }

  .disciplines-grid .discipline-tile:nth-child(4) {
    margin-top: 3rem;
  }
}

.discipline-tile {
  padding: 2.5rem 2rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.discipline-tile:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.discipline-tile h3 {
  font-family: 'Fraunces', serif;
  margin-bottom: 0.75rem;
  font-variation-settings: 'opsz' 72;
}

.discipline-tile p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* --- Speaking Module (editorial numbered list) --- */
.speaking-list {
  margin-top: var(--space-xl);
}

.speaking-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--rule);
}

.speaking-row:first-child {
  padding-top: 0;
}

.speaking-number {
  font-family: var(--font-serif);
  font-size: var(--text-display-m);
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
  font-variation-settings: 'opsz' 72;
  padding-top: 0.15em;
}

.speaking-row__body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-s);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-xs);
  font-variation-settings: 'opsz' 72;
}

.speaking-row__body p {
  color: var(--ink-60);
  max-width: 600px;
  font-size: var(--text-body);
}

.speaking-cta {
  margin-top: var(--space-2xl);
  /* L3-CRB-2 §2.5 — pair CTAs side-by-side using the same flex shape
     as .hero__ctas. "See all topics" upgraded from underline-link to
     .btn .btn--outline so it carries weight equal to the section's
     reduced (one-paragraph) body copy. Same gap math as hero. */
  display: flex;
  gap: calc(var(--space-s) - var(--space-2xs));
  flex-wrap: wrap;
  align-items: center;
}

/* Center the homepage Speaking teaser as a block when its container
   is centered. Mirrors .text-center .about-body p (CRB-9 A) so the
   600px reading column sits visually centered, not pinned to the
   container's left edge. */
.text-center .speaking-teaser {
  max-width: 600px;
  margin-inline: auto;
}

/* L3-CRB-4 — speaking.html re-uses .speaking-cta inside a
   .text-center .invitation block. Scope the centering + margin trim
   so index.html's left-aligned homepage pair (CRB-2 ship) is
   untouched. The `.invitation` already gives a 2.5rem `p`
   margin-bottom above, so the CRB-2 default 4rem margin-top would
   stack to ~6.5rem — too cavernous in the booking context. */
.text-center .speaking-cta {
  justify-content: center;
}

.invitation .speaking-cta {
  margin-top: var(--space-l);
}

@media (max-width: 767px) {
  .speaking-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .speaking-number {
    font-size: var(--text-body-l);
  }
}

/* --- Career Journey Timeline --- */
.section--journey {
  background: var(--warm-bg);
  position: relative;
  overflow: hidden;
  /* L3-CRB-2 §2.4 — compress hero→journey gap. Hero's padding-bottom +
     divider buffer is preserved (L3-13 mobile-overlap guard, L3-CRB-1
     divider-collision lessons), so the trim happens entirely on the
     journey side. ~50% top-padding cut yields ~20% reduction of the
     visible hero→eyebrow gap. Bottom padding untouched. */
  padding-top: calc(var(--section-py) * 0.5);
}

@media (min-width: 768px) {
  .section--journey {
    padding-top: calc(var(--section-py-md) * 0.5);
  }
}

@media (min-width: 1024px) {
  .section--journey {
    padding-top: calc(var(--section-py-lg) * 0.5);
  }
}

/* Same 50% top-padding trim for sections that sit directly under a
   diagonal divider — the divider's own bottom buffer (--divider-gap-*)
   plus full --section-py-* on the incoming section reads as a
   cavernous gap to the eyebrow. Mirrors .section--journey mechanism.
   Bottom padding untouched. */
.section--speaking,
.press-cuttings,
.testimonials-refresh {
  padding-top: calc(var(--section-py) * 0.5);
}

@media (min-width: 768px) {
  .section--speaking,
  .press-cuttings,
  .testimonials-refresh {
    padding-top: calc(var(--section-py-md) * 0.5);
  }
}

@media (min-width: 1024px) {
  .section--speaking,
  .press-cuttings,
  .testimonials-refresh {
    padding-top: calc(var(--section-py-lg) * 0.25);
  }
  /* Speaking sits directly under Journey's tall divider-to-cream wedge
     plus Journey's full --section-py-lg bottom padding. The compounded
     stack reads as a cavernous gap above "02 — Speaking" on desktop;
     the same compounding applies to Press and Reviews where each follows
     a divider'd section. Trimming all three to 0.25 closes those gaps
     uniformly. Speaking gets an additional shave on ultrawide where
     Journey's wedge looms tallest. */
  .section--speaking {
    padding-top: calc(var(--section-py-lg) * 0.15);
  }

  /* Speaking's bottom padding inherits the generic divider buffer
     (--section-py-lg + --divider-gap-lg = ~160px). With buttons as the
     last content line, that empty zone reads as dead space before the
     wedge. Trim to just the divider buffer plus a small visual rest. */
  .section--speaking {
    padding-bottom: calc(var(--space-xl) + var(--divider-gap-lg));
  }
}

.journey-intro {
  color: var(--ink-60);
  max-width: 540px;
  font-size: var(--text-body-l, 1.25rem);
  line-height: 1.65;
  margin-top: var(--space-s, 1rem);
}

/* Center the narrow intro p as a block when the container is centered
   (L3-19v2). Without this the 540px block stays pinned to the left
   even though its inline text centers. */
.text-center .journey-intro {
  margin-inline: auto;
}

.journey-timeline {
  margin-top: var(--space-3xl, 5rem);
  position: relative;
  padding-left: 3.5rem;
}

/* The thread — vertical connecting line */
.journey-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink-20);
}

.journey-chapter {
  position: relative;
  padding-bottom: var(--space-3xl, 5rem);
}

.journey-chapter:last-child {
  padding-bottom: 0;
}

/* Dot on the thread line */
.journey-chapter::before {
  content: '';
  position: absolute;
  left: -3.5rem;
  top: 0.6rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--clay);
  background: var(--warm-bg);
  z-index: 1;
}

/* Ongoing chapter — golden filled dot (override default outline). */
.journey-chapter--ongoing::before {
  background: var(--gold);
  border-color: var(--gold);
}

/* Ongoing label — borderless editorial caption beside the date range.
   Sits inline with .journey-chapter__years so the line reads
   "2013 — PRESENT    ONGOING". No pill, no padding — just spaced caps. */
.journey-chapter__badge {
  display: inline-block;
  margin-left: var(--space-m, 1.5rem);
  padding: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 0;
  border-radius: 0;
  vertical-align: baseline;
  line-height: 1.4;
}

/* Sub-detail line under a chapter's main paragraph (e.g. master's degree).
   Date wears the slightly darker --text-muted-strong via the inner span;
   qualification text inherits --ink-60 here for a softer hierarchy. */
.journey-chapter__detail {
  margin-top: var(--space-s, 1rem);
  font-size: var(--text-meta, 0.85rem);
  color: var(--ink-60);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.journey-chapter__detail-years {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-strong);
}
[data-theme="dark"] .journey-chapter__detail-years {
  color: var(--gold);
}

/* Massive ghost number — uses semantic numeral token so it stays
   intentionally visible in both light and dark modes. Scaled down a
   notch so the chapter content reads first. */
.journey-chapter__number {
  font-family: 'Fraunces', serif;
  font-size: clamp(5rem, 12vw, 9.5rem);
  font-weight: 300;
  line-height: 0.8;
  color: var(--text-numeral-light);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  position: absolute;
  right: -1rem;
  top: -1.25rem;
  pointer-events: none;
  user-select: none;
}

/* Light mode: --gold on cream = ~1.67:1 (fails WCAG AA). Use
   --text-muted-strong (#575344 on cream = AA). Dark mode restores gold
   via an override below — L3-8 tuned it there, preserve. */
.journey-chapter__years {
  font-family: 'Inter Tight', sans-serif;
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted-strong);
  font-weight: 600;
  display: inline-block;
}

[data-theme="dark"] .journey-chapter__years {
  color: var(--gold);
}

.journey-chapter__header h3 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 300;
  margin-top: var(--space-2xs, 0.25rem);
  margin-bottom: var(--space-s, 1rem);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
}

.journey-chapter__header p {
  color: var(--ink-60);
  max-width: 560px;
}

/* Milestones accordion */
.journey-milestones {
  margin-top: var(--space-m, 1.5rem);
  max-width: 560px;
}

.journey-milestone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 0;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  transition: color var(--dur-normal, 0.4s) ease;
}

.journey-milestone:first-child {
  border-top: 1px solid var(--rule);
}

.journey-milestone:hover {
  color: var(--clay);
}

.journey-milestone__icon {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
  transition: transform var(--dur-normal, 0.4s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  color: var(--ink-60);
}

.journey-milestone[aria-expanded="true"] .journey-milestone__icon {
  transform: rotate(45deg);
  color: var(--clay);
}

.journey-milestone[aria-expanded="true"] {
  color: var(--clay);
}

.journey-milestone__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity 0.4s ease;
  opacity: 0;
}

.journey-milestone__detail.is-open {
  opacity: 1;
}

.journey-milestone__detail ul {
  padding: 0.75rem 0 1.25rem 1.25rem;
  list-style: disc;
}

.journey-milestone__detail li {
  color: var(--ink-60);
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 0.375rem;
}

.journey-milestone__detail li:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .journey-timeline {
    padding-left: 2.5rem;
  }

  .journey-chapter::before {
    left: -2.5rem;
    width: 11px;
    height: 11px;
  }

  .journey-timeline::before {
    left: 5px;
  }

  .journey-chapter__number {
    font-size: clamp(3.25rem, 20vw, 5.5rem);
    right: -0.5rem;
    top: -0.5rem;
  }

  .journey-chapter {
    padding-bottom: var(--space-2xl, 4rem);
  }

  /* On narrow screens the badge wraps to its own line — keep the
     left margin off so it sits flush with the years. */
  .journey-chapter__badge {
    margin-left: var(--space-s, 1rem);
  }
}

/* --- Press cuttings wall + Reviews marquee.
   Migrated from preview-press-cuttings.html (which has been retired)
   when both sections were promoted to the homepage replacing the
   former .testimonial-* marquee. The .cutting paper colors and the
   .tref-card paper colors are deliberately non-inverting (see notes
   on each block). --- */

/* Press section frame */
.press-cuttings {
  background: var(--warm-bg);
  overflow-x: clip;
}
[data-theme="dark"] .press-cuttings {
  background: var(--section-voices-dark);
}
.press-cuttings__intro .eyebrow {
  color: var(--text-muted-strong);
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
}
.press-cuttings__intro h2 em {
  font-style: italic;
  color: var(--gold);
  font-family: var(--font-serif);
}
.press-cuttings__lead {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--lh-relaxed);
  color: var(--text-body-color);
  max-width: var(--measure-l);
  margin-inline: auto;
  margin-top: var(--section-intro-gap);
}

/* Wall — relative container, fixed-height scrapbook on desktop. */
.cuttings-wall-wrap {
  position: relative;
  margin-top: var(--space-xl);
}
.cuttings-wall {
  position: relative;
  height: auto;
}
.cuttings-thread {
  display: none;
  pointer-events: none;
}

/* Each clipping (mobile defaults — vertical stack).
   --clip-paper / --clip-ink / --clip-muted are intentionally
   non-inverting per-card paper colors. tokens.css doesn't expose a
   "stays-paper" surface or "stays-dark-ink" body-text, so these are
   page-component hardcodes. Without them, dark theme remaps
   --text-heading to cream and headlines render cream-on-cream. */
.cutting {
  --clip-paper: #F4F2EC;
  --clip-ink:   #1A1712;
  --clip-muted: #5A5240;
  position: relative;
  display: block;
  width: calc(100% - 32px);
  max-width: 320px;
  margin: 0 auto var(--space-l) auto;
  padding: 12px 12px 0 12px;
  background: var(--clip-paper);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-float);
  border: 0.5px solid rgba(22, 22, 20, 0.08);
  transform: none;
  z-index: var(--z-raised);
  transition:
    transform 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}
[data-theme="dark"] .cutting {
  --clip-paper: #DDD7C8;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  border-color: rgba(22, 22, 20, 0.18);
}

/* Brass thumbtack pin — radial gradient + box-shadow stack. */
.cutting::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translateX(-50%) rotate(2deg);
  background:
    radial-gradient(
      circle at 32% 30%,
      rgba(255, 235, 180, 0.95) 0%,
      var(--gold) 45%,
      #8a6e2a 100%
    );
  border-radius: 50%;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.35),
    0 0.5px 1px rgba(0, 0, 0, 0.25),
    inset 0 0.6px 0.6px rgba(255, 255, 255, 0.55);
  z-index: 4;
  pointer-events: none;
}
[data-theme="dark"] .cutting::before {
  background:
    radial-gradient(
      circle at 32% 30%,
      rgba(255, 240, 195, 1) 0%,
      var(--gold) 45%,
      #6e5421 100%
    );
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 0.6px 0.6px rgba(255, 255, 255, 0.65);
}
/* Per-card pin variation. */
.cutting--c1::before { left: calc(50% - 6px);  transform: translateX(-50%) rotate(-3deg); }
.cutting--c2::before { left: calc(50% + 8px);  transform: translateX(-50%) rotate(4deg); width: 14px; height: 14px; }
.cutting--c3::before { left: calc(50% - 10px); transform: translateX(-50%) rotate(-1deg); top: -6px; }
.cutting--c4::before { left: calc(50% + 4px);  transform: translateX(-50%) rotate(5deg); }
.cutting--c5::before { left: calc(50% - 4px);  transform: translateX(-50%) rotate(-2deg); top: -8px; }
.cutting--c6::before { left: calc(50% + 10px); transform: translateX(-50%) rotate(3deg); }

.cutting__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cutting__body {
  /* Polaroid feel — narrow side padding (already supplied by .cutting
     frame) and a wider bottom for the caption strip. */
  padding: 12px 4px 18px 4px;
}
.cutting__meta {
  /* 10px micro-typography for the wordmark line — off-token by design. */
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--clip-muted);
  margin: 0;
}
.cutting__headline {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: var(--lh-heading);
  font-weight: 500;
  color: var(--clip-ink);
  margin: var(--space-xs) 0 0 0;
}

/* Center card — slot --c2 (Outlook India). Square photo to read as a
   focal anchor without breaking the equal-card-size composition. */
.cutting--c2 .cutting__photo { aspect-ratio: 1 / 1; }

/* Bottom CTA — the <p> picks up a global max-width: 680px from the
   body-copy measure, so width: 100% is capped. Without
   margin-inline: auto the capped <p> sits left-pinned in the 1280px
   container and the flex-centred button reads off-centre. Same family
   as the centered-section block trap fixed in CRB-9. */
.press-cuttings__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  margin-top: var(--space-3xl);
}

/* Desktop wall — absolute pinning + rotations. 5-card composition,
   Center for Soft Power (id 3) filtered at render time. Equal-width
   cards; centre card is the same width as siblings but with a square
   photo so the composition reads anchored without breaking equality.
   Outer cards sit at 18% from each side so the gap to c2 is ~30-50px
   on a 1200-wide viewBox — tight scrapbook spacing per the reference. */
@media (min-width: 1024px) {
  .cuttings-wall {
    height: 700px;
  }
  .cuttings-thread {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: var(--z-base);
  }
  .cutting {
    position: absolute;
    width: 232px;
    max-width: none;
    margin: 0;
  }
  .cutting--c2 {
    top: 30px;
    left: calc(50% - 116px);
    transform: rotate(-1deg);
    z-index: calc(var(--z-raised) + 2);
  }
  /* Tilt directions follow the reference polaroid composition:
     top corners mirror outward (top-left leans left, top-right leans
     right); bottom corners do the same. Centre keeps a -1° lean so
     it reads slightly scrap-pinned rather than perfectly upright. */
  .cutting--c1 { top: 30px;  left: 10%;             transform: rotate(-4deg); }
  .cutting--c3 { top: 30px;  right: 10%; left: auto; transform: rotate(3deg); }
  .cutting--c5 { top: 380px; left: 17%;             transform: rotate(-3deg); }
  .cutting--c4 { top: 380px; right: 17%; left: auto; transform: rotate(2deg); }
}

@media (hover: hover) and (min-width: 1024px) {
  .cutting:hover,
  .cutting:focus-visible {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: var(--shadow-float-strong);
    z-index: calc(var(--z-raised) + 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cutting {
    transition: box-shadow 0s;
  }
  @media (hover: hover) and (min-width: 1024px) {
    .cutting:hover,
    .cutting:focus-visible {
      transform: none;
    }
  }
}

@media (max-width: 767px) {
  .cuttings-thread:not(.cuttings-thread--mobile) { display: none; }
  .cuttings-wall { height: auto; }
  .cutting {
    /* position: relative (not static) so z-index pulls cards above the
       mobile thread spine. Static positioning would ignore z-index and
       leave the SVG painting over the card images. */
    position: relative;
    z-index: var(--z-raised);
    transform: none;
    width: calc(100% - 32px);
    margin: 0 auto var(--space-l) auto;
  }
  .cutting::before {
    width: 11px;
    height: 11px;
    top: -6px;
  }
  .cutting--c2::before {
    width: 11px;
    height: 11px;
  }
  .cutting--c2 .cutting__photo {
    aspect-ratio: 4 / 3;
  }
}

/* Show only the matching thread SVG per theme. */
.cuttings-thread--dark { display: none; }
[data-theme="dark"] .cuttings-thread:not(.cuttings-thread--dark):not(.cuttings-thread--mobile) { display: none; }
@media (min-width: 1024px) {
  [data-theme="dark"] .cuttings-thread--dark { display: block; }
}

/* Mobile-only thread: a vertical dashed gold spine running behind the
   stacked cards. Cards (z-index --z-raised+) cover most of it, leaving
   the inter-card gaps as visible thread segments. Hidden on tablet/desktop
   where the absolute-positioned scrapbook composition takes over. */
.cuttings-thread--mobile { display: none; }
@media (max-width: 767px) {
  .cuttings-thread--mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-base);
    pointer-events: none;
  }
  .cuttings-wall { position: relative; }
}

/* --- Reviews / Testimonials refresh ---
   Section bg: --bg cream in light mode for the home alternation rhythm
   (Press warm → Reviews cream → Nila warm); --section-voices-dark in
   dark mode for parity with the homepage rhythm there. */
.testimonials-refresh {
  --testimonials-bg: var(--bg);
  background: var(--testimonials-bg);
  overflow: hidden;
}
[data-theme="dark"] .testimonials-refresh {
  --testimonials-bg: var(--section-voices-dark);
  background: var(--testimonials-bg);
}

.testimonials-refresh__intro .eyebrow {
  color: var(--text-muted-strong);
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
}
.testimonials-refresh__intro h2 {
  color: var(--text-heading);
}
.testimonials-refresh__lead {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--lh-relaxed);
  color: var(--text-body-color);
  max-width: var(--measure-l);
  margin-inline: auto;
  margin-top: var(--section-intro-gap);
}
/* Bidirectional marquee. */
.tref-tracks {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.tref-track {
  display: flex;
  gap: var(--space-m);
  width: max-content;
  will-change: transform;
}
.tref-track--left  { animation: tref-marquee-left  90s linear infinite; }
.tref-track--right { animation: tref-marquee-right 90s linear infinite; }
.tref-track:hover  { animation-play-state: paused; }

@keyframes tref-marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes tref-marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Card — text-only, paper-feel surface. NO photo, NO avatar.
   --tref-paper / --tref-ink / --tref-muted are non-inverting per-card
   paper hardcodes (same family as .cutting). */
.tref-card {
  --tref-paper: #F4F2EC;
  --tref-ink:   #1A1712;
  --tref-muted: #5A5240;
  position: relative;
  flex-shrink: 0;
  width: 360px;
  padding: 30px 32px 28px;
  background: var(--tref-paper);
  color: var(--tref-ink);
  border: 0.5px solid rgba(22, 22, 20, 0.08);
  border-radius: 4px;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
[data-theme="dark"] .tref-card {
  --tref-paper: #DDD7C8;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  border-color: rgba(22, 22, 20, 0.18);
}

/* Gold open-quote glyph, top-left. */
.tref-card__quote {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--gold);
  pointer-events: none;
  user-select: none;
}

/* Gold uppercase category label, top-right corner. */
.tref-card__category {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
  color: var(--gold);
}

.tref-card__body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tref-ink);
  margin: 18px 0 0 0;
  font-weight: 300;
}
.tref-card__attribution {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid rgba(22, 22, 20, 0.12);
}
.tref-card__name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--tref-ink);
  display: block;
}
.tref-card__role {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--tref-muted);
  margin-top: 2px;
  display: block;
}

/* Reduced motion — disable marquee, render a calm static grid. */
@media (prefers-reduced-motion: reduce) {
  .tref-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-m);
  }
  .tref-track {
    display: contents;
  }
  .tref-track--left,
  .tref-track--right {
    animation: none;
  }
  .tref-card[data-tref-dup="true"] { display: none; }
}

@media (max-width: 767px) {
  .tref-card {
    width: 280px;
    padding: 24px 22px 22px;
  }
  .tref-card__body {
    font-size: 14px;
  }
  .tref-card__quote {
    font-size: 28px;
  }
  .tref-track:active {
    animation-play-state: paused;
  }
}

/* --- Pull Quote — balanced whitespace.
   Pass 3 audit: dropped min-height entirely (let content set), pulled
   md padding back to --section-py so the section isn't a desert at
   ultrawide. Quote is a punctuation moment, not a hero. --- */
.pull-quote-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-py) 5vw;
}

/* Pull quote text color when section is dark */
.section--dark .pull-quote,
.section--dark .pull-quote p {
  color: var(--text-on-dark);
  max-width: none;
}

/* On dark bg, the smudge stays fully bright. */
.section--dark .pull-quote::before,
.section--dark .pull-quote::after {
  opacity: 1;
  filter: saturate(1.1);
}

.pull-quote {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
  font-style: italic;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  position: relative;
  padding: var(--space-xl) 0;
}

/* Decorative smudges above and below the pull quote — shared component */
.pull-quote::before,
.pull-quote::after {
  content: '';
  display: block;
  width: 160px;
  height: 28px;
  background: transparent url("/assets/images/icons/smudge.svg") center/contain no-repeat;
  opacity: 0.9;
  margin: 0 auto;
}

.pull-quote::before { margin-bottom: var(--space-l); }
.pull-quote::after  {
  margin-top: var(--space-l);
  transform: scaleX(-1);
}

.pull-quote p {
  font-size: inherit;
  line-height: inherit;
  max-width: none;
}

/* --text-on-dark (fixed-contrast cream), not --bg: --bg remaps dark in
   dark mode and painted the quote dark-on-dark on speaking.html (L3-23,
   same D13 class-of-bug as L3-2). Speaking's pull-quote-section carries
   .section--full-bleed without .section--dark, so the section--dark
   override at L1615 doesn't apply. */
.section--full-bleed .pull-quote,
.section--full-bleed .pull-quote p {
  color: var(--text-on-dark);
}

/* --- Invitation --- */
.invitation {
  text-align: center;
}

.invitation h2 {
  margin-bottom: 1.5rem;
}

.invitation p {
  margin-bottom: 2.5rem;
  color: var(--muted);
  max-width: 600px;
  margin-inline: auto;
}

/* --- Nila Feature (homepage) --- */
.nila-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .nila-feature {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
  }
}

.nila-feature__image {
  overflow: hidden;
}

.nila-feature img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.nila-feature__image:hover img {
  transform: scale(1.02);
}

/* Image overlap on desktop */
@media (min-width: 768px) {
  .section--nila .nila-feature__image {
    margin-top: -5rem;
    margin-bottom: -5rem;
  }

  .section--nila .nila-feature__image img {
    height: 110%;
    min-height: 500px;
  }
}

.nila-feature .nila-feature__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nila-feature__content h2 {
  margin-bottom: 1.5rem;
}

.nila-feature__content p {
  margin-bottom: 1rem;
}

.nila-feature__content .btn {
  margin-top: 1.5rem;
  align-self: flex-start;
}

/* --- Footer — compact, editorial, maroon-brown site-wide --- */
.site-footer {
  padding: 3.5rem 0 2.25rem;
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid rgba(212, 168, 74, 0.22);
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1.35rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-nav a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: var(--footer-divider);
  opacity: 0.9;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--gold-bright);
}

.footer-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-socials a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--footer-text);
  opacity: 0.85;
  transition: color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--gold-bright);
  opacity: 1;
  transform: translateY(-1px);
}

.footer-socials svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-copyright {
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--footer-muted);
}

@media (max-width: 560px) {
  .site-footer {
    padding: 2.75rem 0 1.75rem;
  }
  .footer-nav {
    flex-direction: column;
    gap: 0.6rem;
  }
  .footer-nav a {
    padding: 0.25rem 0;
  }
  .footer-nav a + a::before {
    display: none;
  }
  .footer-socials {
    gap: 1.25rem;
  }
}

/* --- Journal --- */

/* L3-CRB-7 — journal intro section spacing reduction. Top section
   reads too cavernous with the default --section-py applied symmetrically.
   ~30% trim matches the safe dial range from CRB-1's section-rhythm
   tightening. Bottom padding untouched so the gap to the journal-list
   below stays editorial. Mirrors the .section--journey breakpoint shape
   from CRB-2. */
.section--journal-intro {
  padding-top: calc(var(--section-py) * 0.7);
}

@media (min-width: 768px) {
  .section--journal-intro {
    padding-top: calc(var(--section-py-md) * 0.7);
  }
}

@media (min-width: 1024px) {
  .section--journal-intro {
    padding-top: calc(var(--section-py-lg) * 0.7);
  }
}

.journal-list {
  list-style: none;
  padding: 0;
}

.journal-entry {
  padding: 3rem 0;
  border-bottom: 1px solid var(--rule);
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.journal-entry .meta-line {
  margin-bottom: 0.75rem;
}

.journal-entry h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  margin-bottom: 0.5rem;
  transition: color 0.4s ease;
  font-variation-settings: 'opsz' 72;
}

.journal-entry p {
  color: var(--muted);
  font-size: 0.95rem;
}

.journal-entry:hover h3 {
  color: var(--accent);
}

/* --- Article --- */
.article-header {
  padding: 10rem 0 3rem;
  text-align: left;
}

@media (min-width: 768px) {
  .article-header {
    padding: 12rem 0 4rem;
  }
}

.article-header h1 {
  max-width: 800px;
}

.article-header .meta-line {
  margin-top: 2rem;
}

.article-body {
  max-width: 720px;
}

.article-body p {
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
}

.article-back {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.article-back a {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
}

.article-back a:hover {
  color: var(--accent);
}

/* --- About Page --- */
.about-body {
  max-width: 720px;
}

.about-body ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.about-body li {
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Centered paragraph list — Past Appearances (L3-22). Scoped to
   .text-center .about-body so the about.html prose wall (L3-20)
   is not affected. Mirrors the .invitation p centering pattern
   so the block is visually centered, not just inline-centered.

   L3-CRB-9 (A) extension: also center the .about-body block itself
   within its .text-center container. Without this the 720px
   .about-body sat left-pinned at the container's left edge while
   the 600px inner p centered within it — visually the paragraph's
   midpoint sat ~60px LEFT of container center on wide viewports.
   Now both block + paragraph center, so dentistry hero, speaking
   Book a talk, speaking Past Appearances, dentistry Book an
   appointment, nila Closing all read symmetric. */
.text-center .about-body {
  margin-inline: auto;
}

.text-center .about-body p {
  max-width: 600px;
  margin-inline: auto;
}

.text-center .about-body p + p {
  margin-top: var(--space-s);
}

.about-body li strong {
  color: var(--ink);
}

/* About chapters — segmented editorial layout (L3-20). Mirrors
   journal.html's per-entry hairline rhythm. Centered narrow
   column within the standard container. */
.about-chapters {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

.about-chapter {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--rule);
}

.about-chapter:first-child {
  padding-top: 0;
}

.about-chapter:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.about-chapter .eyebrow {
  margin-bottom: var(--space-s);
}

/* Tight variant — for single-line items like Selected Talks where
   space-xl per row reads as a wall. Pass 3 audit B.2.8. */
.about-chapters--tight .about-chapter {
  padding: var(--space-m) 0;
}

/* --- About Hero — two-column layout: left visual stack (cream
   backdrop + giant gold "S" monogram + portrait, all overlapping);
   right copy stack (heading + intro + pull-quote + 3 discipline rows).
   Mobile collapses to a single column with portrait above copy. --- */
.about-hero-v2 {
  background: var(--bg);
}

.about-hero-v2__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .about-hero-v2__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-4xl);
    align-items: center;
  }
}

/* Visual column — relative wrap; backdrop + monogram absolute under
   the portrait, portrait sits in normal flow at z-raised. */
.about-hero-v2__visual {
  position: relative;
  margin: 0;
  min-height: 320px;
  isolation: isolate;
}

@media (min-width: 768px) {
  .about-hero-v2__visual {
    min-height: 480px;
  }
}

/* Backdrop is a slightly lighter, warmer cream than --bg so it reads
   as a distinct rectangle behind the portrait. Local hardcode — no
   semantic token sits between --bg and pure paper. */
.about-hero-v2__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 88%;
  background: rgba(244, 241, 230, 0.18);
  z-index: 0;
  pointer-events: none;
}

[data-theme="dark"] .about-hero-v2__backdrop {
  background: rgba(38, 36, 31, 0.18);
}

/* Giant Fraunces "S" monogram, gold-tinted, sitting on the backdrop.
   scaleY stretches the glyph vertically to match the lean/long
   proportion in the mockup; SOFT=0 keeps the strokes sharp (the
   default SOFT 50 read as too soft/thick at this size). */
.about-hero-v2__monogram {
  position: absolute;
  top: 0;
  left: 4%;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(13rem, 28vw, 24rem);
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.42;
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  transform: scaleY(1.25);
  transform-origin: top left;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

[data-theme="dark"] .about-hero-v2__monogram {
  opacity: 0.55;
}

/* Portrait sits OVER the panel (panel + S peek out top-left).
   margin-top is generous so a large portion of the giant S shows
   above the portrait — matches the reference where the S reads as
   the dominant decorative mark, with the portrait offset bottom-
   right inside the panel. */
.about-hero-v2__portrait {
  position: relative;
  display: block;
  width: 85%;
  margin-left: 12%;
  margin-top: 18%;
  height: auto;
  z-index: 2;
}

/* Indus Lens "A Culinary Bridge" featured-film card — sits where the
   portrait used to sit (offset inside the cream panel, S monogram peek-
   ing out above-left). Vertical 9:16 video, native controls, autoplay
   muted. Bottom-left text overlay carries the editorial attribution. */
.about-hero-v2__video-card {
  position: relative;
  display: block;
  width: 78%;
  margin-left: 14%;
  margin-top: 18%;
  aspect-ratio: 9 / 16;
  z-index: 2;
  overflow: hidden;
  background: #1c1a16;
  box-shadow: 0 30px 60px -32px rgba(28, 26, 22, 0.55);
}

@media (min-width: 768px) {
  .about-hero-v2__video-card {
    width: 70%;
    margin-left: 18%;
    margin-top: 20%;
  }
}

.about-hero-v2__video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1c1a16;
}

/* Decorative play button — visible while paused, fades when playing.
   Native controls handle the actual interaction. */
.about-hero-v2__video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.4));
  transition: opacity var(--dur-normal, 0.3s) var(--ease-out, ease);
}

.about-hero-v2__video-play svg {
  width: 100%;
  height: 100%;
  display: block;
}

.about-hero-v2__video-card.is-playing .about-hero-v2__video-play {
  opacity: 0;
}

/* Editorial attribution overlay, anchored bottom-left, kept above the
   native controls bar. Pointer-events: none so video controls remain
   interactive. */
.about-hero-v2__video-info {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 3.4rem;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.about-hero-v2__video-badge {
  display: inline-block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.about-hero-v2__video-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  margin: 0 0 0.25rem 0;
}

.about-hero-v2__video-source {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

@media (min-width: 768px) {
  .about-hero-v2__portrait {
    width: 82%;
    margin-left: 14%;
    margin-top: 22%;
  }
}

/* Copy column */
.about-hero-v2__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.about-hero-v2__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

/* Intro block wraps the two paragraphs so the outer copy column's
   gap (--space-l) treats them as one unit; the tighter inner gap
   (--space-s) keeps the paragraphs reading as a pair. */
.about-hero-v2__intro-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.about-hero-v2__intro {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body-color);
  max-width: var(--measure-m);
  margin: 0;
}

/* Pull-quote — italic Fraunces, gold opening quote glyph, gold
   left rule. NOT reusing the global .pull-quote (which is centered
   and uses smudge ornaments) — this hero quote sits left-aligned
   with a side rule, more editorial than punctuational. */
.about-hero-v2__quote {
  position: relative;
  margin: var(--space-s) 0 0 0;
  padding: var(--space-s) 0 var(--space-s) var(--space-l);
  border-left: 1px solid var(--gold);
}

.about-hero-v2__quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--space-2xs);
}

.about-hero-v2__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  max-width: 28ch;
}

.about-hero-v2__rule {
  border: 0;
  border-top: 1px solid var(--gold);
  width: 64px;
  margin: var(--space-s) 0;
}

/* --- Discipline rows (small icon + label + 1-line body, hairline
   dividers between). Scoped to about hero today; reusable elsewhere
   if needed. --- */
.discipline-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.discipline-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--gold);
}

.discipline-row:first-child {
  padding-top: 0;
}

.discipline-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.discipline-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-top: 2px;
}

.discipline-row__icon svg {
  width: 100%;
  height: 100%;
}

.discipline-row__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: var(--space-2xs);
}

.discipline-row__body {
  font-family: var(--font-sans);
  font-size: var(--text-s);
  line-height: var(--lh-relaxed);
  color: var(--text-body-color);
  margin: 0;
  max-width: var(--measure-m);
}


/* --- Selected press preview (about.html) + Press Archive page
   shared card family. Flat editorial cards — NOT the home polaroid
   .cutting (which has thumbtack pin + paper rotation + scrapbook
   layout). Magazine-grid feel: image top, meta line, headline.
   Card paper is a non-inverting hardcode same family as .cutting
   so the card surface stays visually consistent across themes.
--- */
.press-preview {
  background: var(--warm-bg);
}

.press-preview__intro {
  margin-bottom: var(--space-2xl);
}

.press-preview__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.press-preview__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin-top: var(--space-s);
}

.press-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

/* "View all press" CTA below the curated grid on About — centered
   button, generous breathing room above. */
.press-preview__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  margin-top: var(--space-2xl);
}

/* Card — flat magazine cell. Non-inverting paper hardcodes mirror
   the .cutting / .tref-card pattern so card surfaces stay
   consistent across themes (avoids the D13 inverting-token pit). */
.press-card {
  --press-paper: #F4F2EC;
  --press-ink:   #1A1712;
  --press-muted: #5A5240;
  display: flex;
  flex-direction: column;
  background: var(--press-paper);
  color: var(--press-ink);
  text-decoration: none;
  border: 0.5px solid rgba(22, 22, 20, 0.08);
  box-shadow: var(--shadow-float);
  transition: transform 280ms var(--ease-out),
              box-shadow 280ms var(--ease-out);
}

[data-theme="dark"] .press-card {
  --press-paper: #DDD7C8;
  border-color: rgba(22, 22, 20, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
}

@media (hover: hover) {
  .press-card:hover,
  .press-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float-strong);
  }
}

.press-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--press-paper);
}

.press-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-card__body {
  padding: var(--space-m) var(--space-m) var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.press-card__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--press-muted);
  margin: 0;
}

.press-card__headline {
  font-family: var(--font-serif);
  font-size: var(--text-m);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--press-ink);
  margin: 0;
}

/* --- Press Archive layout (now hosted inside about.html's
   "Selected press" section). Featured large card on left + 2-col
   grid on right at desktop; stacks single-column on mobile.
--- */
.press-archive__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .press-archive__layout {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.press-grid--archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 640px) {
  .press-grid--archive {
    grid-template-columns: 1fr 1fr;
  }
}

/* Featured card — taller image, body text bigger, FEATURED badge,
   "Read full story →" affordance. Uses .press-card--featured
   modifier on the same .press-card base. */
.press-card--featured .press-card__image {
  aspect-ratio: 4 / 4;
  position: relative;
}

@media (min-width: 1024px) {
  .press-card--featured .press-card__image {
    aspect-ratio: 4 / 4.4;
  }
}

.press-card__badge {
  position: absolute;
  top: var(--space-s);
  left: 0;
  background: #2E1A12;
  color: var(--text-on-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 6px 14px 6px 18px;
  z-index: 2;
}

.press-card--featured .press-card__body {
  padding: var(--space-l) var(--space-l) var(--space-xl);
  gap: var(--space-s);
}

.press-card--featured .press-card__headline {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
}

.press-card__excerpt {
  font-family: var(--font-sans);
  font-size: var(--text-s);
  line-height: var(--lh-relaxed);
  color: var(--press-muted);
  margin: 0;
}

.press-card__readmore {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-s);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* --- Press page (/press.html) — full mention archive ---
   Three groups (Norwegian / International / Media) of single-line
   editorial rows (no images). Linked rows use .press-mention__link;
   rows missing a recovered URL render as muted with a "URL pending"
   tag.
--- */
/* Press page shell — widens beyond container--narrow so list rows breathe.
   Intro stays narrow + centered via .press-page__intro max-width below. */
.press-page__shell {
  max-width: 1100px;
}

.press-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-bottom: var(--space-l);
  transition: color var(--dur-normal) var(--ease-out);
}

.press-page__back:hover,
.press-page__back:focus-visible {
  color: var(--gold);
}

.press-page__intro {
  text-align: center;
  margin: 0 auto var(--space-3xl);
  max-width: var(--container-narrow);
}

.press-page__intro .eyebrow {
  display: block;
  color: var(--gold);
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
  font-size: var(--text-meta);
  font-weight: 600;
  margin-bottom: var(--space-s);
}

.press-page__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.press-page__lead {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--lh-relaxed);
  color: var(--text-body-color);
  max-width: var(--measure-l);
  margin: var(--space-m) auto 0;
}

.press-mentions__group {
  margin-top: var(--space-3xl);
}

.press-mentions__group:first-of-type {
  margin-top: 0;
}

.press-mentions__group-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-l);
  color: var(--text-heading);
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--rule-strong);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.press-mentions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.press-mention {
  border-bottom: 1px solid var(--rule);
}

.press-mention__link,
.press-mention {
  display: block;
}

.press-mention__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-l);
  padding: var(--space-m) 0;
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-normal) var(--ease-out);
}

.press-mention__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xs);
  min-width: 0;
}

@media (min-width: 768px) {
  .press-mention__body {
    grid-template-columns: minmax(180px, 22%) 1fr auto;
    align-items: baseline;
    gap: var(--space-m);
  }
}

.press-mention__outlet {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted-strong);
}

.press-mention__headline {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--text-heading);
}

.press-mention__date {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--text-muted-strong);
  white-space: nowrap;
}

.press-mention__readmore {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  align-self: center;
}

@media (hover: hover) {
  .press-mention__link:hover .press-mention__headline,
  .press-mention__link:focus-visible .press-mention__headline {
    color: var(--gold);
  }
}

/* --- Nila Page --- */
.nila-hero {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.nila-hero img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

/* Bottom-up dark scrim behind title + eyebrow. ::before (not ::after) so it
   paints below the positioned .container text. Hardcoded rgbas — if D8
   resolves with an --overlay-* token family, absorb these then. */
.nila-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0) 75%
  );
  pointer-events: none;
}

/* --text-on-dark, not --white: --white remaps to near-black in dark mode
   (D13) and would invert the overlay. --text-on-dark is fixed-contrast cream. */
.nila-hero .container {
  position: absolute;
  bottom: 5rem;
  left: 0;
  right: 0;
  color: var(--text-on-dark);
}

.nila-hero h1 {
  text-shadow: 0 2px 40px rgba(0,0,0,0.3);
}

.nila-hero .meta-line {
  color: rgba(255,255,255,0.8);
  margin-top: 1rem;
}

/* === Contact page — "Get in touch" card layout =====================
   Two-column grid: left column has Email card (with CTA) + Based-In card,
   right column has Inquiry topics + Follow along + Other links cards.
   Mockup match: dontCommit/referenceImages/contactNewRedesignImage.png.
   Tight, near-one-viewport scale; uses --shadow-card + --radius-card. */
.contact-page.section--compact {
  padding-block: var(--space-l);
}

@media (min-width: 768px) {
  .contact-page.section--compact {
    padding-block: var(--space-xl);
  }
}

.contact-page__intro {
  margin-bottom: var(--space-m);
}

.contact-page__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0 0 var(--space-s) 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.contact-page__lead {
  font-family: var(--font-sans);
  font-size: var(--text-s);
  line-height: var(--lh-relaxed);
  color: var(--text-body-color);
  max-width: 60ch;
  margin: 0;
}

.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .contact-page__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    align-items: start;
  }
}

.contact-page__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Footnote inside the email card — italic asterisk-prefixed line tying the
   "responds within a few working days" promise to the email action it sits
   below. Replaces the previous twin standalone captions. */
.contact-card__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-meta);
  color: var(--text-muted-strong);
  margin: var(--space-s) 0 0 0;
  line-height: var(--lh-relaxed);
}

.contact-card__note span[aria-hidden="true"] {
  color: var(--gold);
  font-weight: 600;
  margin-right: 2px;
}

.contact-card {
  /* Subtle lift vs page bg — half the contrast of var(--white) so cards
     don't read as stark white panels. Light-mode hardcode; dark mode keeps
     the inverted --white (#1E1E1C) which is already a subtle lift. */
  background: #EEEBE2;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-m);
}

[data-theme="dark"] .contact-card {
  background: var(--white);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--gold);
  margin-bottom: var(--space-s);
}

.contact-card__icon svg {
  width: 18px;
  height: 18px;
}

.contact-card__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
  color: var(--text-muted-strong);
  margin-bottom: var(--space-2xs);
}

.contact-card__email {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-m);
  color: var(--text-heading);
  text-decoration: none;
  margin-bottom: var(--space-s);
  word-break: break-word;
}

.contact-card__email:hover {
  color: var(--gold);
}

/* Dark CTA — charcoal-on-cream in light, cream-on-charcoal in dark.
   --ink and --white BOTH invert across themes (opposite directions), so this
   pair stays readable in both. --paper does NOT invert, so don't pair --ink
   with --paper for fg/bg — that collapses to cream-on-cream in dark mode. */
.contact-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  font-family: 'Inter Tight', sans-serif;
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.contact-card__cta:hover {
  background: var(--gold);
  color: var(--text-btn-on-gold);
  border-color: var(--gold);
}

.contact-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-display-s);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 var(--space-2xs) 0;
  line-height: var(--lh-heading);
}

.contact-card__detail {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--text-muted-strong);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.contact-card__heading {
  font-family: var(--font-serif);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 var(--space-s) 0;
  line-height: var(--lh-heading);
}

/* Inquiry-topics chip grid */
.contact-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.contact-topic {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  font-size: var(--text-s);
  color: var(--text-body-color);
}

.contact-topic__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.contact-topic__icon svg {
  width: 100%;
  height: 100%;
}

/* Follow-along socials row */
.contact-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.contact-socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  font-size: var(--text-s);
  color: var(--text-body-color);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.contact-socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.contact-socials svg {
  width: 14px;
  height: 14px;
}

/* Other-links rows with right-arrow indicator */
.contact-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-links li + li {
  border-top: 1px solid var(--rule);
}

.contact-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s) 0;
  font-family: var(--font-sans);
  font-size: var(--text-s);
  color: var(--text-body-color);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-links li:first-child a {
  padding-top: 0;
}

.contact-links li:last-child a {
  padding-bottom: 0;
}

.contact-links a:hover {
  color: var(--gold);
}

.contact-link__arrow {
  font-family: var(--font-sans);
  color: var(--text-muted-strong);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.contact-links a:hover .contact-link__arrow {
  color: var(--gold);
  transform: translateX(2px);
}

/* --- Speaking Page --- */
/* Topics — bordered editorial cards in a 4-col grid (4 + 3 layout).
   Each card has a custom decorative gold icon at the top, sentence-case
   serif title, and short serif body. Mockup match for howitShouldlook.png. */
.speaking-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 600px) {
  .speaking-topics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .speaking-topics {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
  }
}

.speaking-topic {
  padding: var(--space-m);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-card);
  background: transparent;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.speaking-topic__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: var(--space-s);
}

.speaking-topic__icon svg {
  width: 32px;
  height: 32px;
}

.speaking-topic__title {
  font-family: var(--font-serif);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-s) 0;
}

.speaking-topic__caption {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  margin: 0;
}

/* Speaking gallery — captioned grid of speaking moments. Phone-camera
   shots are sized small enough that grain reads as documentary; the
   collective grid is the message: many rooms, many talks. */
.speaking-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l) var(--space-m);
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .speaking-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl) var(--space-l);
  }
}

.speaking-gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
  /* Clip the hover-scale on the img child so it can't bleed into
     adjacent grid cells. The caption sits in its own flex slot below
     the img — overflow doesn't affect its rendering. Pass 3 audit. */
  overflow: hidden;
}

.speaking-gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.speaking-gallery__item:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .speaking-gallery__item img,
  .speaking-gallery__item:hover img {
    transition: none;
    transform: none;
  }
}

.speaking-gallery__caption {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: var(--lh-heading);
}

/* --- Theme Toggle Button (inline with nav links) ---
   Icon uses the bright gold token so it stays readable against the
   dark hero bg and the frosted pill bg alike. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: color var(--dur-normal) ease, background var(--dur-normal) ease, transform var(--dur-fast) ease;
  margin-left: 0.25rem;
  opacity: 0.85;
}

.theme-toggle:hover {
  color: var(--gold);
  opacity: 1;
  background: rgba(212, 168, 74, 0.12);
  transform: rotate(15deg);
}

/* Mobile-only instance rendered in the header bar (not inside the
   hamburger panel). Hidden on desktop; shown at <768px via the mobile
   nav block above. Pairs with .nav-links__theme-item hide. */
.theme-toggle--mobile {
  display: none;
}

/* Show the OPPOSITE icon — indicates what clicking will switch TO */
/* Light mode: show moon (click to go dark) */
.theme-toggle__sun {
  display: none;
}

/* Dark mode: show sun (click to go light) */
[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

/* Dark-mode token overrides live in tokens.css. Style applications follow. */

/* Body & page-level color transitions */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

/* Header in dark mode (flat state) — inherits var(--hero-bg) so it matches
   the hero bg tone exactly (both use --section-hero-dark). Excluded from
   the floating state so .site-header--floating can paint --header-surface;
   without :not() the (0,2,0) selector wins over the floating rule (0,1,0). */
[data-theme="dark"] .site-header:not(.site-header--floating) {
  background: var(--hero-bg);
  border-bottom-color: transparent;
}

/* Dark floating pill surface/border/shadow handled by --header-surface,
   --header-border, --header-shadow token remaps (tokens.css [data-theme="dark"]). */

/* Dark mode floating pill — nav text stays light since dark mode bg is dark */
[data-theme="dark"] .site-header--floating .nav-wordmark,
[data-theme="dark"] .site-header--floating .nav-links a.active {
  color: var(--ink);
}

[data-theme="dark"] .site-header--floating .nav-links a {
  color: var(--text-muted-strong);
}

[data-theme="dark"] .site-header--floating .nav-toggle span {
  background: var(--ink);
}

/* Hero in dark mode handled above via --section-hero-dark token. */

/* Selection */
[data-theme="dark"] ::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Buttons in dark mode */
[data-theme="dark"] .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

[data-theme="dark"] .btn--primary::before {
  background: var(--clay-dark);
}

[data-theme="dark"] .btn--primary:hover {
  border-color: var(--clay-dark);
}

[data-theme="dark"] .btn--outline {
  color: var(--ink);
  border-color: var(--ink);
}

[data-theme="dark"] .btn--outline::before {
  background: var(--ink);
}

[data-theme="dark"] .btn--outline:hover {
  color: var(--bg);
}

/* Sections in dark mode — rhythmic tonal variation.
   Each section reads for its own section-*-dark token so the palette
   switcher can re-tune the whole dark palette at once. */
[data-theme="dark"] .hero {
  background: var(--section-hero-dark);
}

[data-theme="dark"] .section--journey {
  background: var(--section-journey-dark);
}

[data-theme="dark"] .section--speaking {
  background: var(--section-speaking-dark);
}

[data-theme="dark"] .section--nila {
  background: var(--section-nila-dark);
}

[data-theme="dark"] .pull-quote-section {
  background: var(--section-pull-dark);
}

/* Generic .section--dark (fallback) still uses base dark-bg */
[data-theme="dark"] .section--dark {
  background: var(--dark-bg);
}

[data-theme="dark"] .pull-quote-section.section--dark {
  background: var(--section-pull-dark);
}

/* Journey timeline in dark mode */
[data-theme="dark"] .journey-timeline::before {
  background: var(--ink-20);
}

[data-theme="dark"] .journey-chapter::before {
  border-color: var(--accent);
  background: var(--warm-bg);
}

[data-theme="dark"] .journey-chapter--ongoing::before {
  background: var(--accent);
  border-color: var(--accent);
}

[data-theme="dark"] .journey-chapter__number {
  color: var(--text-numeral-dark);
}

[data-theme="dark"] .journey-milestone {
  border-bottom-color: var(--rule);
  color: var(--ink);
}

[data-theme="dark"] .journey-milestone:first-child {
  border-top-color: var(--rule);
}

[data-theme="dark"] .journey-milestone:hover {
  color: var(--accent);
}

[data-theme="dark"] .journey-milestone__icon {
  color: var(--muted);
}

[data-theme="dark"] .journey-milestone[aria-expanded="true"] .journey-milestone__icon,
[data-theme="dark"] .journey-milestone[aria-expanded="true"] {
  color: var(--accent);
}

[data-theme="dark"] .journey-milestone__detail li {
  color: var(--muted);
}

/* Speaking rows in dark mode */
[data-theme="dark"] .speaking-row {
  border-bottom-color: var(--rule);
}

[data-theme="dark"] .speaking-number {
  color: var(--gold);
  opacity: 0.75;
}

[data-theme="dark"] .speaking-row__body p {
  color: var(--text-on-dark-mute);
}

/* Pull quote in dark mode */
/* Pull quote on cream bg — in dark mode uses main dark bg */
[data-theme="dark"] .pull-quote-section {
  background: var(--bg);
}

/* Nila feature in dark mode */
[data-theme="dark"] .nila-feature__content p {
  color: var(--muted);
}

/* Gold thread in dark mode */
[data-theme="dark"] .gold-thread {
  opacity: 0.2;
}

/* Footer — maroon-brown tone is shared by both themes (see tokens.css) */
/* (no override needed; .site-footer already uses --footer-bg) */

/* Divider colors in dark mode — each divider fill has to match the
   ACTUAL bg of the next section (now per-section tokens), not a generic
   dark tone, otherwise the angle shows a visible color seam. */
[data-theme="dark"] .divider-to-warm::after {
  background: var(--section-nila-dark, var(--warm-bg));
}

[data-theme="dark"] .divider-to-cream::after {
  background: var(--bg);
}

[data-theme="dark"] .section--journey.divider-to-cream::after {
  background: var(--section-speaking-dark);
}

/* Speaking → Voices: fill the divider with Voices' own tone. */
[data-theme="dark"] .section--speaking.divider-to-dark::after {
  background: var(--section-voices-dark);
}

/* Speaking → Press: press-cuttings dark bg is --section-voices-dark, not
   the generic --section-nila-dark inherited from divider-to-warm. Without
   this scoped override, a horizontal seam appears at the wedge edge. */
[data-theme="dark"] .section--speaking.divider-to-warm::after {
  background: var(--section-voices-dark);
}

/* Press → Reviews: testimonials dark bg is --section-voices-dark, not the
   generic --bg inherited from divider-to-cream. Same D13-family seam fix
   as the Speaking → Press override above. */
[data-theme="dark"] .press-cuttings.divider-to-cream::after {
  background: var(--section-voices-dark);
}

/* Nila → Pull Quote: fill with pull-quote's tone. */
[data-theme="dark"] .section--nila.divider-to-dark::after {
  background: var(--section-pull-dark);
}

[data-theme="dark"] .divider-to-dark::after {
  background: var(--dark-bg);
}

[data-theme="dark"] .divider-to-hero::after {
  background: var(--hero-bg);
}

/* Eyebrow / captions */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .meta-line,
[data-theme="dark"] .caption,
[data-theme="dark"] small {
  color: var(--muted);
}

/* L3-CRB-2 §2.2 — keep hero role line gold in dark mode. Without this,
   the rule above (equal-specificity, same source-position context) would
   recolor it to --muted and lose the lift. */
[data-theme="dark"] .hero .meta-line {
  color: var(--gold);
}

/* Image caption */
[data-theme="dark"] .img-caption {
  color: var(--muted);
  border-top-color: var(--rule);
}

/* Section rule */
[data-theme="dark"] .section-rule {
  border-top-color: var(--rule);
}

/* Mobile nav overlay in dark mode */
@media (max-width: 767px) {
  [data-theme="dark"] .nav-links {
    background: var(--bg);
  }
}

/* Focus ring in dark mode */
[data-theme="dark"] *:focus-visible {
  outline-color: var(--accent);
}

/* Smooth transition when toggling theme */
html {
  transition: background 0.5s ease;
}

html body,
html .site-header,
html .hero,
html .section,
html .site-footer {
  transition: background var(--dur-normal) var(--ease-in-out),
              color var(--dur-normal) var(--ease-in-out),
              border-color var(--dur-normal) var(--ease-in-out);
}

/* --- Utilities --- */
.text-center { text-align: center; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 5rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-5 { margin-bottom: 5rem; }

/* --- Language Toggle (EN | NO, sibling of .theme-toggle) -----------------
   Compact two-letter pill mirroring .nav-separator rhythm. Active option
   carries full opacity; inactive sits at 0.55. Color tokens follow the
   same floating-pill swap as .theme-toggle (gold on hero -> muted on the
   floating pill -> ink on hover/active). */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 30px;
  margin-left: 0.5rem;
}

.lang-toggle__option {
  background: none;
  border: none;
  padding: 0 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.55;
  cursor: pointer;
  transition: color var(--dur-normal) ease, opacity var(--dur-normal) ease;
}

.lang-toggle__option:hover {
  opacity: 1;
}

.lang-toggle__option[aria-pressed="true"] {
  opacity: 1;
  font-weight: 600;
}

.lang-toggle__sep {
  color: var(--gold);
  opacity: 0.4;
  font-size: 0.75rem;
  user-select: none;
}

/* Mobile-only instance rendered in the header bar (not inside the
   hamburger panel). Hidden on desktop; shown below 1100px alongside
   .theme-toggle--mobile. Pairs with .nav-links__lang-item hide. */
.lang-toggle--mobile {
  display: none;
}

/* Floating pill: tone the toggle down to match .theme-toggle behaviour
   (gold reads loud on the dark hero; .text-muted-strong sits cleaner on
   the .header-surface pill). */
.site-header--floating .lang-toggle__option {
  color: var(--text-muted-strong);
}

.site-header--floating .lang-toggle__option:hover,
.site-header--floating .lang-toggle__option[aria-pressed="true"] {
  color: var(--ink);
}

.site-header--floating .lang-toggle__sep {
  color: var(--text-muted-strong);
}

/* Dark mode floating pill — the floating-pill override above already uses
   semantic tokens (--text-muted-strong, --ink) that remap in dark mode via
   tokens.css, so no extra dark-mode rules are needed here. */

/* Mobile: hide the desktop <li> and show the header-bar instance.
   Second @media block — same breakpoint as the existing nav block at
   line 439. Source-order wins, so this sits at end-of-file safely. */
@media (max-width: 1099.98px) {
  .nav-links__lang-item {
    display: none;
  }

  .site-nav .lang-toggle--mobile {
    display: inline-flex;
    margin-left: 0;
    margin-right: var(--space-xs);
  }
}

/* --- Dentistry: Areas of Focus grid -------------------------------------
   2-col on desktop with subtle gold outline-SVG icons next to each item.
   Stacks single-col on mobile. Hairline divider between rows mirrors the
   .about-chapter rhythm so the page reads as one editorial system. */
.focus-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l) var(--space-2xl);
}

@media (min-width: 768px) {
  .focus-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.focus-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: var(--space-m);
  row-gap: var(--space-2xs);
  align-items: start;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
}

.focus-item:last-child,
.focus-item:nth-last-child(2):nth-child(odd) {
  /* Drop the bottom hairline on the final row at both column counts */
  border-bottom: 0;
}

@media (max-width: 767px) {
  .focus-item:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--rule);
  }
}

.focus-item__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--gold);
}

.focus-item__icon svg {
  width: 40px;
  height: 40px;
}

.focus-item__title {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
  line-height: var(--lh-heading);
}

.focus-item__caption {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  margin: 0;
  line-height: var(--lh-body);
}

/* --- Dentistry: clinical-grounding strip --------------------------------
   4-column horizontal row on desktop, 2-col tablet, 1-col mobile.
   Compact typography — credentials at a glance, not an editorial list. */
.clinical-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 600px) {
  .clinical-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .clinical-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }
}

.clinical-strip__item {
  text-align: center;
  padding-inline: var(--space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clinical-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: var(--space-s);
}

.clinical-strip__icon svg {
  width: 22px;
  height: 22px;
}

.clinical-strip__title {
  font-family: var(--font-serif);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 var(--space-2xs) 0;
  line-height: var(--lh-heading);
}

.clinical-strip__caption {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--text-muted-strong);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: var(--lh-body);
}

/* Slim modifier — captions hidden, title only. Used on the dentistry
   "Practice at a glance" strip per redesign brief: 4 compact factual
   pillars that read as labels, not micro-bios. */
.clinical-strip--slim .clinical-strip__caption {
  display: none;
}

.clinical-strip--slim .clinical-strip__title {
  margin-bottom: 0;
  font-size: var(--text-s);
}

/* --- Dentistry: appointment block (split layout) -----------------------
   Image LEFT (placeholder cream well until clinic interior surfaces)
   + text/CTA RIGHT on subtle warm card. Mockup match. Stacks on mobile. */
.appointment-section {
  background: var(--bg);
}

.appointment-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--warm-bg);
  overflow: hidden;
}

@media (min-width: 768px) {
  .appointment-block {
    grid-template-columns: 1fr 1.2fr;
    align-items: stretch;
  }
}

/* Solo variant — no media column. Card centers and breathes. */
.appointment-block--solo {
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .appointment-block--solo {
    grid-template-columns: 1fr;
  }
  .appointment-block--solo .appointment-block__body {
    align-items: center;
    text-align: center;
  }
}

/* Card variant — sits on a cream section with a soft enclosure so it
   reads as a card, not a section panel. Uses the shared --shadow-card
   + --radius-card token family (already defined in tokens.css). */
.appointment-block--card {
  border-radius: var(--radius-card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
}

.appointment-block__media {
  min-height: 260px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.appointment-block__placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(212, 168, 74, 0.06) 0%,
      rgba(212, 168, 74, 0.0) 60%),
    var(--bg);
}

.appointment-block__body {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
  background: var(--warm-bg);
}

@media (min-width: 768px) {
  .appointment-block__body {
    padding: var(--space-3xl) var(--space-2xl);
  }
}

.appointment-block__title {
  font-family: var(--font-serif);
  font-size: var(--text-display-s);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0;
  line-height: var(--lh-heading);
}

.appointment-block__copy {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 42ch;
}

/* --- Speaking: hero --------------------------------------------------------
   Left-aligned heading + body + CTA buttons. Decorative gold brushstroke
   floats top-right. Mockup match for speaking_Redesign.png. */
.speaking-hero__inner {
  position: relative;
  max-width: var(--measure-l);
  text-align: left;
}

.speaking-hero h1 {
  text-align: left;
}

.speaking-hero__body {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  max-width: var(--measure-m);
}

.speaking-hero .speaking-cta {
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.speaking-hero__brushstroke {
  position: absolute;
  top: -1rem;
  right: -2rem;
  width: 220px;
  opacity: 0.6;
  pointer-events: none;
}

.speaking-hero__brushstroke img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .speaking-hero__brushstroke {
    width: 140px;
    top: 0;
    right: -1rem;
    opacity: 0.45;
  }
}

/* --- Speaking: event grid ---------------------------------------------------
   Mockup pattern:
     - Featured row (2-up): text card LEFT + image card RIGHT, equal width
     - Supporting grid: 4-col on desktop, 2-col tablet, 1-col mobile.
       7th card lands left-aligned on its own row when count is odd.
   No card shadows, no border-radius (per CLAUDE.md). */
.event-grid {
  margin-top: var(--space-xl);
}

.event-grid__featured-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: var(--space-xl);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .event-grid__featured-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.event-grid__supporting {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 600px) {
  .event-grid__supporting {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
  }
}

@media (min-width: 1024px) {
  .event-grid__supporting {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl) var(--space-l);
  }
}

.event-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Inside .event-grid__featured-row the wrapper carries the border + radius
   + shadow; the inner text + image cards are unframed cells. */
.event-grid__featured-row .event-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.event-card--text {
  justify-content: center;
  padding: var(--space-l);
  position: relative;
}

.event-card--text .event-card__title {
  font-size: var(--text-display-s);
}

.event-card--text .event-card__caption {
  font-size: var(--text-body);
  max-width: var(--measure-m);
}

/* Featured badge — small gold pill above the title on the featured card. */
.event-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-btn-on-gold);
  background: var(--gold);
  padding: 6px 14px;
  margin-bottom: var(--space-m);
}

/* Inline gold "View details →" link on the featured card. */
.event-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--gold);
  text-decoration: none;
  margin-top: var(--space-m);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) var(--ease-out);
}

.event-card__link:hover {
  border-bottom-color: var(--gold);
}

.event-card--image {
  display: flex;
  border: 0;
  padding: 0;
}

.event-card--image .event-card__media {
  aspect-ratio: auto;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.event-card__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.event-grid__supporting .event-card__media {
  margin: 0 0 var(--space-m) 0;
}

.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.event-card:hover .event-card__media img {
  transform: scale(1.03);
}

.event-card__body {
  padding: var(--space-m);
}

.event-card--text .event-card__body {
  padding: 0;
}

.event-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 var(--space-2xs) 0;
  line-height: var(--lh-heading);
}

.event-card__meta {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-s) 0;
  line-height: var(--lh-heading);
}

.event-card__caption {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  margin: 0;
  line-height: var(--lh-body);
  max-width: var(--measure-m);
}

/* --- Nila: split hero (text LEFT + portrait RIGHT) --------------------
   Mockup match for nila_redesign.png. Stacks on mobile, image first.
   Kills section top padding so hero abuts the header bar; bottom padding
   trimmed too to keep the page compact. */
.section.nila-hero-split {
  padding-top: 0;
  padding-bottom: var(--space-l);
}

@media (min-width: 768px) {
  .section.nila-hero-split {
    padding-top: 0;
    padding-bottom: var(--space-xl);
  }
}

/* Tighter section padding for the rest of the Nila page so the chapter
   sections sit closer together than the global default. */
.nila-hero-split + .section,
.nila-hero-split + .section + .section,
.nila-hero-split ~ .section {
  padding-block: var(--space-xl);
}

@media (min-width: 768px) {
  .nila-hero-split + .section,
  .nila-hero-split + .section + .section,
  .nila-hero-split ~ .section {
    padding-block: var(--space-2xl);
  }
}

.nila-hero-split__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.nila-hero-split__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: var(--space-m) 0 var(--space-m) 0;
}

.nila-hero-split__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .nila-hero-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.nila-hero-split__text {
  order: 2;
}

.nila-hero-split__media {
  order: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .nila-hero-split__text {
    order: 1;
  }
  /* Hero image bleeds out of the container to the viewport right edge and
     feathers on the left so it merges with the cream copy column. Source is
     1536×864 (16:9); using a 3:2 frame trims only ~8% per side with center
     positioning so face stays visible AND pantry text on the right is in
     frame. */
  .nila-hero-split__media {
    order: 2;
    aspect-ratio: 3 / 2;
    margin-right: calc(-1 * (5vw + max(0px, (100vw - 1280px) / 2)));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  }
}

.nila-hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.nila-hero-split__lead {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  max-width: var(--measure-m);
  margin-top: var(--space-s);
}

/* Portrait-orientation modifier for inline story media (Section 1).
   Tightens aspect to 4:5 so image reads as a portrait, not a landscape. */
.nila-story__media--portrait {
  aspect-ratio: 4 / 5;
}

/* --- Nila: numbered story chapters -------------------------------------
   `.nila-story` is the chapter unit (number + heading + optional image +
   caption). It composes inside several layout containers — paired
   `.nila-chapter-pair` for sections 1+2, `.nila-stories-trio` for 4/5/6.
   On its own it stacks vertically. */
.nila-chapter-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .nila-chapter-pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.nila-stories-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .nila-stories-trio {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .nila-stories-trio {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

.nila-story {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.nila-story__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-display-m);
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
}

.nila-story__heading {
  font-family: var(--font-serif);
  font-size: var(--text-display-s);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0;
  line-height: var(--lh-heading);
}

.nila-story__heading--small {
  font-size: var(--text-m);
}

.nila-story__media {
  margin: var(--space-xs) 0 var(--space-xs) 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.nila-story--with-media .nila-story__media {
  aspect-ratio: 3 / 4;
}

.nila-stories-trio .nila-story__media {
  aspect-ratio: 4 / 3;
}

.nila-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Anchor crop window to the top of the source so portraits whose subject
   sits high in the frame don't get clipped at the hairline. */
.nila-story__media--anchor-top img {
  object-position: center top;
}

.nila-story:hover .nila-story__media img {
  transform: scale(1.03);
}

.nila-story__caption {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  max-width: var(--measure-m);
}

.nila-story__caption p {
  margin: 0;
}

/* --- Nila: 3-image craft strip -----------------------------------------
   Section 3 — three captioned images side-by-side on desktop, stacks on
   mobile. Caption sits below image with a small gold label above it. */
.nila-strip {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 768px) {
  .nila-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

.nila-strip__media {
  margin: 0 0 var(--space-m) 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.nila-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.nila-strip__item:hover .nila-strip__media img {
  transform: scale(1.03);
}

.nila-strip__label {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 var(--space-2xs) 0;
}

.nila-strip__caption {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  margin: 0;
  line-height: var(--lh-body);
}

/* --- Nila: Selected collaborations small cards -------------------------
   Section 7 — three small collaboration cards in a horizontal row on
   desktop, stacks on mobile. Smaller image aspect than story media. */
.nila-collabs {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 768px) {
  .nila-collabs {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

.nila-collab-card__media {
  margin: 0 0 var(--space-m) 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.nila-collab-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.nila-collab-card:hover .nila-collab-card__media img {
  transform: scale(1.03);
}

.nila-collab-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 var(--space-2xs) 0;
  line-height: var(--lh-heading);
}

.nila-collab-card__caption {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  margin: 0;
  line-height: var(--lh-body);
}

/* --- Nila CTA banner ---------------------------------------------------
   Closing call-to-action at the end of the redesigned Nila page. Pairs
   with `.section--warm` modifier in markup for the warm ground tone;
   no extra background rule needed here. Reserved selector for any future
   banner-specific tweaks (max-width, padding). */
.nila-cta-banner .container {
  max-width: var(--container-narrow, 800px);
}

/* --- Speaking page: compaction overrides ------------------------------
   Page-scoped via `body.page-speaking` so other pages keep their default
   vertical rhythm. Tightens hero/Topics/Selected-Talks/CTA padding and
   the section-intro-to-content gap to match the redesign reference (less
   real estate, sections still clearly separated). */
.page-speaking .section {
  padding-block: var(--space-xl);
}

@media (min-width: 768px) {
  .page-speaking .section {
    padding-block: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .page-speaking .section {
    padding-block: var(--space-3xl);
  }
}

.page-speaking .section--compact {
  padding-block: var(--space-l);
}

@media (min-width: 768px) {
  .page-speaking .section--compact {
    padding-block: var(--space-xl);
  }
}

.page-speaking .section-intro + * {
  margin-top: var(--space-m);
}

@media (min-width: 768px) {
  .page-speaking .section-intro + * {
    margin-top: var(--space-l);
  }
}

/* Featured event card: explicit aspect-ratio on the image side so the
   row stays horizontal instead of growing tall with portrait imagery. */
.event-card--image .event-card__media {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

@media (min-width: 768px) {
  .event-card--image .event-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
  /* On desktop the row height comes from the text card content; the
     image fills that height via object-fit: cover. Cap row height so
     a portrait image can't push the row tall. */
  .event-grid__featured-row {
    max-height: 420px;
  }
}

/* Featured-video variant of the Selected Press card. Vertical media frame
   with overlaid title text + play button, ivory card body underneath. */
.press-card--video {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  background: var(--cream-bg, #EEEADD);
  transition: transform var(--dur-normal, 0.3s) var(--ease-out, ease);
}
.press-card--video:hover .press-card__play {
  transform: translate(-50%, -50%) scale(1.06);
}
.press-card--video:hover .press-card__video {
  transform: scale(1.02);
}

.press-card__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  overflow: hidden;
  background: #1c1a16;
}
.press-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower, 0.6s) var(--ease-out, ease);
}
.press-card__video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.20) 35%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.78) 100%
  );
  pointer-events: none;
}

.press-card__badge--video {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.85rem;
  background: var(--gold);
  color: var(--text-btn-on-gold, #1c1a16);
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.press-card__video-overlay {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 2;
  pointer-events: none;
}
.press-card__video-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
}
.press-card__video-title--accent {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7em;
  letter-spacing: 0.02em;
}

.press-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35));
  transition: transform var(--dur-normal, 0.3s) var(--ease-out, ease);
}
.press-card__play svg { width: 100%; height: 100%; display: block; }

.press-card--video .press-card__body {
  padding: var(--space-l, 1.5rem);
}

@media (min-width: 1024px) {
  .press-card__video-frame {
    aspect-ratio: 4 / 5;
  }
}

/* --- Dentistry: split hero (text LEFT + portrait RIGHT) -----------------
   Mirrors .nila-hero-split convention so the two child-page heroes feel
   like siblings. Stacks on mobile (image first), splits at 768px+. Trims
   section padding so hero abuts the floating header. */
.section.dentistry-hero-split {
  padding-top: 0;
  padding-bottom: var(--space-l);
}

@media (min-width: 768px) {
  .section.dentistry-hero-split {
    padding-top: 0;
    padding-bottom: var(--space-xl);
  }
}

.dentistry-hero-split__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.dentistry-hero-split__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: var(--space-m) 0 var(--space-m) 0;
}

.dentistry-hero-split__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .dentistry-hero-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.dentistry-hero-split__text {
  order: 2;
}

.dentistry-hero-split__media {
  order: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .dentistry-hero-split__text {
    order: 1;
  }
  /* Hero image bleeds out of the container to the viewport right edge and
     feathers on the left so it merges with the cream copy column — same
     treatment as the Nila hero so the two child pages read as siblings. */
  .dentistry-hero-split__media {
    order: 2;
    aspect-ratio: 3 / 2;
    margin-right: calc(-1 * (5vw + max(0px, (100vw - 1280px) / 2)));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  }
}

.dentistry-hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

.dentistry-hero-split__lead {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  max-width: var(--measure-m);
  margin-top: var(--space-s);
}

/* Qualification block — sits below hero lead. Graduate-cap icon (gold)
   + degree + thin vertical hairline + date. Mirrors the editorial,
   flat icon language of .focus-item icons. */
.dentistry-hero-split__qualification {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
  max-width: var(--measure-m);
  flex-wrap: wrap;
}

.dentistry-hero-split__qualification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dentistry-hero-split__qualification-icon svg {
  width: 100%;
  height: 100%;
}

.dentistry-hero-split__qualification-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-serif);
}

.dentistry-hero-split__qualification-title {
  font-size: var(--text-s);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}

.dentistry-hero-split__qualification-institution {
  font-size: var(--text-meta);
  color: var(--text-muted-strong);
  line-height: var(--lh-tight);
  font-style: italic;
}

.dentistry-hero-split__qualification-divider {
  width: 1px;
  height: 36px;
  background: var(--rule);
  flex-shrink: 0;
}

[data-theme="dark"] .dentistry-hero-split__qualification-divider {
  background: var(--dark-border);
}

.dentistry-hero-split__qualification-date {
  font-family: var(--font-serif);
  font-size: var(--text-s);
  color: var(--text-body-color);
  margin: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* When the column is too narrow for inline layout (tablet split + mobile),
   hide the vertical hairline and let the date stack under the text,
   aligned with the text column so it still reads as one group. */
@media (max-width: 1099.98px) {
  .dentistry-hero-split__qualification-divider {
    display: none;
  }
  .dentistry-hero-split__qualification-date {
    flex-basis: 100%;
    padding-left: calc(36px + var(--space-m));
  }
}

/* --- Public Speaking: split hero (text LEFT + portrait RIGHT) -----------
   Mirrors .nila-hero-split / .dentistry-hero-split convention so the
   child-page heroes feel like siblings. Stacks on mobile (image first),
   splits at 768px+. Trims section padding so hero abuts the floating
   header. */
.section.speaking-hero-split {
  padding-top: 0;
  padding-bottom: var(--space-l);
}

@media (min-width: 768px) {
  .section.speaking-hero-split {
    padding-top: 0;
    padding-bottom: var(--space-xl);
  }
}

.speaking-hero-split__heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.speaking-hero-split__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: var(--space-m) 0 var(--space-m) 0;
}

.speaking-hero-split__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .speaking-hero-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.speaking-hero-split__text {
  order: 2;
}

.speaking-hero-split__media {
  order: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .speaking-hero-split__text {
    order: 1;
  }
  /* Hero image bleeds out of the container to the viewport right edge and
     feathers on the left so it merges with the cream copy column — same
     treatment as Nila/Dentistry heroes for sibling pages. */
  .speaking-hero-split__media {
    order: 2;
    aspect-ratio: 3 / 2;
    margin-right: calc(-1 * (5vw + max(0px, (100vw - 1280px) / 2)));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  }
}

.speaking-hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  display: block;
}

.speaking-hero-split__lead {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--text-body-color);
  line-height: var(--lh-body);
  max-width: var(--measure-m);
  margin-top: var(--space-s);
}