/* ============================================================
   Belvest Family Wealth — Site styles
   Components & layout built against the ported design tokens.
   No hex values here — everything references the token layer.
   ============================================================ */

/* Section-header size — the single knob for every ".section-title" (Why now?,
   Who we are, We are built differently., Our core values, Our areas of excellence,
   Our current priorities, Our platform, Get to know us). Change here to resize all
   of them together. Currently 1.8rem = 28.8px (20% larger than --text-xl / 24px). */
:root { --section-title-size: 1.8rem; }

/* [hidden] must always win, even over display:flex/grid components */
[hidden] { display: none !important; }

/* ---------- Private-preview login gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--surface-page);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
}
html[data-authed="true"] #gate { display: none; }
.gate-card {
  width: 100%; max-width: 30rem;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  text-align: center;
}
.gate-logo { justify-content: center; margin-bottom: var(--space-8); cursor: default; --logo-seam: var(--surface-card); }
.gate-form { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.gate-error { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--danger-500); margin: calc(-1 * var(--space-1)) 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .gate-card.gate-shake { animation: gate-shake 0.4s var(--ease-standard); }
  @keyframes gate-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
}

/* ---------- Reveal-on-scroll (progressive enhancement) ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* Reduced-motion users still get the scroll reveal, but as an opacity-only
     cross-fade (no movement) — a fade is accessibility-safe; the transform is
     dropped. The !important re-enables just this transition past the reset above. */
  .js .reveal { opacity: 0; transform: none; transition: opacity 900ms var(--ease-out) !important; }
  .js .reveal.is-visible { opacity: 1; }
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--surface-card); color: var(--text-primary);
  padding: 0.6rem 1rem; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); font-family: var(--font-sans); font-size: 0.6875rem;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); text-decoration: none; }

/* ---------- Layout primitives ---------- */
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(52px, 6vw, 84px); }
.section--tight { padding-block: clamp(56px, 6vw, 80px); }
.bleed { width: 100%; }

.eyebrow-lg { margin-bottom: var(--space-5); }
.section-head { margin-bottom: var(--space-6); }

/* Headlines wrap gracefully: balance multi-line headings so lines are even and
   no single word is stranded; keep prominent body copy from orphaning. */
h2, h3, .section-title, .quote-band blockquote, .form-confirm h3 { text-wrap: balance; }
.hero-subhead, .section-intro, .contact-body, .partnership-copy p, .team-bio { text-wrap: pretty; }
.section-title {
  font-family: var(--font-serif);
  font-size: var(--section-title-size); /* dedicated knob (see :root at top) — 20% over --text-xl */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: var(--space-4) 0 0;
}
.section-intro {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 52ch;
  margin: var(--space-4) 0 0;
}

/* ---------- Icons (Lucide sprite consumers) ---------- */
.icon {
  width: 24px; height: 24px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--sm { width: 16px; height: 16px; stroke-width: 2; }
.icon--md { width: 24px; height: 24px; stroke-width: 1.5; }
.icon--lg { width: 28px; height: 28px; stroke-width: 1.35; }
.icon--xl { width: 38px; height: 38px; stroke-width: 1.25; }

/* ---------- Buttons ---------- */
.btn {
  --btn-py: 0.7rem; --btn-px: 1.15rem; --btn-fs: 0.8125rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.01em;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn .icon { transition: transform var(--dur-normal) var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(2px); }

.btn--sm { --btn-py: 0.5rem; --btn-px: 0.85rem; --btn-fs: 0.6875rem; }
.btn--lg { --btn-py: 0.9rem; --btn-px: 1.4rem; --btn-fs: 0.9375rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--brand); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--brand-hover); color: var(--text-on-brand); }
.btn--primary:active { background: var(--brand-active); }

.btn--secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--paper-2); border-color: var(--border-strong); color: var(--text-primary); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--brand-subtle); color: var(--brand); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card--pad-lg { padding: var(--space-7); }
.card--interactive { transition: box-shadow var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard), border-color var(--dur-normal) var(--ease-standard); }
.card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-2px); }
.card--raised { box-shadow: var(--shadow-lg); border-color: var(--border-subtle); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.62rem 0.75rem;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field textarea { min-height: 116px; resize: vertical; line-height: var(--leading-normal); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner { display: flex; align-items: center; gap: var(--space-5); height: 76px; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 0.22em; }
/* Active nav item — the page you're currently on. The hover treatment made
   permanent (brand-brown + underline) via aria-current="page"; set on the
   Commentary links when on /commentary. */
.nav-links a[aria-current="page"] { color: var(--brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 0.22em; }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle {
  display: none;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-primary); padding: 8px; margin: -8px -4px -8px 0;
}

/* Logo lockup.
   The arch mark uses a viewBox cropped to the artwork bounds (19 10 62 80) so
   its rendered box == the visible arch; height-sized and top-aligned so the
   arch top meets the top of "Belvest" and its base meets the foot of
   "FAMILY WEALTH". Caslon Display has no bold face, so weight is added with a
   fine text-stroke. */
/* nowrap + flex:none keep "FAMILY WEALTH" on one line: the lockup holds its
   natural width instead of being squeezed by whatever shares its row. Without
   this the nav lockup split across two lines between ~861px and ~950px, and
   the gate lockup split at 320px. */
.logo-lockup { display: inline-flex; align-items: flex-start; gap: 0; text-decoration: none; flex: none; white-space: nowrap; }
.logo-lockup:hover { text-decoration: none; }
/* Whole lockup uses the tagline/body ink color (--text-primary). */
/* Arch scaled as a bookend: its top aligns with the cap of "B", its base with the
   "FAMILY WEALTH" baseline (measured against the wordmark, not eyeballed). */
.logo-lockup .mark { height: 48px; width: auto; color: var(--text-primary); flex: none; margin-top: -1px; }
.logo-lockup .lockup-text { display: flex; flex-direction: column; align-items: flex-start; margin-left: 7px; }
/* Wordmark set in Caslon TEXT (not Display): sturdier, more even strokes, so it
   reads solid/present without any faux-bold — especially "FAMILY WEALTH". */
.logo-lockup .brand-name {
  font-family: var(--font-serif);
  font-size: 33px; line-height: 0.9; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.logo-lockup .brand-sub {
  font-family: var(--font-serif);
  font-size: 14.5px; letter-spacing: 0.04em; line-height: 1;
  color: var(--text-primary);
  margin: 3px 0 0 1px;
}

/* Mobile menu panel */
.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; padding: var(--space-4) 0 var(--space-6); }
.mobile-menu a:not(.btn) {
  font-family: var(--font-sans); font-size: 0.9375rem;
  color: var(--text-primary); text-decoration: none;
  padding: 0.8rem 0; border-bottom: 1px solid var(--border-subtle);
  transition: color var(--dur-fast) var(--ease-standard);
}
.mobile-menu a:not(.btn):hover { color: var(--brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 0.22em; }
.mobile-menu a[aria-current="page"] { color: var(--brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 0.22em; }
.mobile-menu .btn { margin-top: var(--space-5); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(22px, 3vw, 40px); padding-bottom: clamp(48px, 6vw, 76px); }
.hero-copy { max-width: none; }
.hero-eyebrow { margin-bottom: var(--space-5); }
/* Largest headline on the page. Sized to sit on one line at desktop; wraps
   naturally (balanced) on narrower screens. */
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 var(--space-6);   /* full-width band above the image + lede */
  max-width: none;
  text-wrap: balance;
}
.hero-subhead {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 52ch;
  margin: var(--space-5) 0 var(--space-7);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Stat band */
.stat-band {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.stat {
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
}
.stat + .stat { border-left: 1px solid var(--border-subtle); padding-left: var(--space-6); }
.stat-num {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--text-primary);
  font-feature-settings: var(--nums-tabular);
}
.stat-label { margin-top: var(--space-2); }

/* ============================================================
   PHILOSOPHY (mist panel)
   ============================================================ */
.philosophy { background: var(--surface-mist); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.philosophy-lead { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 64ch; margin: var(--space-5) 0 0; text-wrap: pretty; }
/* Core-values infographic: three pillars strung on one antique-gold thread.
   The thread is the section's single warm accent against the cool mist panel;
   each medallion sits on it as a node (card fill masks the line behind the disc). */
.pillars {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 52px);
  --thread: var(--warning-500);   /* muted antique gold */
}
.pillars::before {
  content: ""; position: absolute; top: 33px; left: 16.66%; right: 16.66%;
  height: 2px; background: var(--thread); opacity: 0.5; z-index: 0;
}
.pillar { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pillar-node {
  width: 66px; height: 66px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-card); border: 1.5px solid var(--brand); color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.pillar-node .icon { width: 27px; height: 27px; }
.pillar-num { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.16em; color: var(--thread); margin-top: var(--space-4); }
.pillar-title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--fw-regular); color: var(--text-primary); margin: var(--space-1) 0 var(--space-3); }
.pillar-body { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; align-self: stretch; text-align: left; text-wrap: pretty; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-8); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.service-card { display: flex; flex-direction: column; }
.service-card .service-icon { color: var(--brand); display: inline-flex; margin-bottom: var(--space-4); }
.service-card h3 { font-family: var(--font-serif); font-size: var(--text-lg); margin: 0 0 var(--space-3); color: var(--text-primary); font-weight: var(--fw-regular); }
.service-card p { font-family: var(--font-sans); font-size: 0.8125rem; line-height: var(--leading-normal); color: var(--text-secondary); margin: 0; }

/* ============================================================
   THE BELVEST DIFFERENCE (comparison)
   ============================================================ */
.compare { border-top: 1px solid var(--border-default); }
.compare-head, .compare-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr; }
.compare-head > div, .compare-row > div { padding: var(--space-5) var(--space-6); }
.compare-head { border-bottom: 1px solid var(--border-default); }
.compare-head .ch-bank, .compare-head .ch-belv {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.compare-head .ch-bank { color: var(--text-muted); }
.compare-head .ch-belv { color: var(--brand); }
.compare-row { border-bottom: 1px solid var(--border-subtle); }
.compare-row .rl { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--text-primary); }
.compare-row .c-bank { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-secondary); border-left: 1px solid var(--border-subtle); }
.compare-row .c-belv { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-primary); font-weight: var(--fw-medium); background: var(--brown-50); border-left: 1px solid var(--border-subtle); }
.compare-head .ch-belv { background: var(--brown-50); border-left: 1px solid var(--border-subtle); }
.compare-head .ch-bank { border-left: 1px solid var(--border-subtle); }

/* ============================================================
   QUOTE (ink band)
   ============================================================ */
.quote-band { background: var(--surface-inverse); color: var(--paper); }
.quote-band .wrap { text-align: center; padding-block: clamp(72px, 9vw, 112px); }
.quote-band blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 auto;
  max-width: 30ch;
}
.quote-band .quote-attr { margin-top: var(--space-6); color: var(--mist-300); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.team-card { display: flex; flex-direction: column; }
.team-portrait {
  width: 112px; height: 112px; flex: none;
  border-radius: var(--radius-full);
  background: var(--surface-mist);
  box-shadow: 0 0 0 1px var(--border-default);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.team-portrait .initials {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--brand);
  letter-spacing: 0.01em;
  line-height: 1;
}
.team-portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) saturate(0.9); }
.team-card .team-name { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--text-primary); margin: 0 0 var(--space-1); font-weight: var(--fw-regular); }
.team-card .team-role {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand);
  margin: 0 0 var(--space-4);
}
.team-card .team-bio { font-family: var(--font-sans); font-size: 0.8125rem; line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }

/* ============================================================
   PARTNERSHIP (Ethos)
   ============================================================ */
.partnership { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.partnership-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.partnership-copy p { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 60ch; }
.partnership-copy .partnership-link { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--brand); }
.fact-panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-7); }
.fact-panel .fact-eyebrow { margin-bottom: var(--space-4); }
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.fact-list li:first-child { border-top: none; padding-top: 0; }
.fact-list li:last-child { padding-bottom: 0; }
.fact-list .fact-icon { color: var(--brand); margin-top: 1px; }
.fact-list .fact-text { font-family: var(--font-sans); font-size: 0.8125rem; line-height: var(--leading-snug); color: var(--text-primary); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-copy .contact-body { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 46ch; margin: var(--space-4) 0 0; }
.contact-notes { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.contact-notes .note-item { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-secondary); }
.contact-notes .note-item .icon { color: var(--brand); margin-top: 2px; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-confirm { text-align: center; padding: var(--space-6) var(--space-2); }
.form-confirm .confirm-icon { color: var(--success-500); display: inline-flex; }
.form-confirm h3 { font-family: var(--font-serif); font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); color: var(--text-primary); font-weight: var(--fw-regular); }
.form-confirm p { font-family: var(--font-sans); color: var(--text-secondary); margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--border-subtle); }
.footer-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-9) var(--space-7); }
.footer-brand .footer-tagline { font-family: var(--font-serif); font-size: var(--text-base); color: var(--text-muted); max-width: 30ch; margin-top: 0; }
.footer-col .footer-col-head { margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a, .footer-col .footer-static {
  font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer-col a:hover { color: var(--brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 0.22em; }
.footer-col a[aria-current="page"] { color: var(--brand); font-weight: var(--fw-semibold); }
.footer-col address { font-style: normal; font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-secondary); line-height: var(--leading-normal); }

.footer-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans); font-size: 0.625rem; color: var(--text-faint);
}
.footer-disclosure { padding: var(--space-6) 0 var(--space-9); }
.footer-disclosure p {
  font-family: var(--font-sans); font-size: 0.625rem; line-height: var(--leading-normal);
  color: var(--text-muted); max-width: none; margin: 0 0 var(--space-3);
}
.footer-disclosure .disclosure-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.footer-disclosure .disclosure-links a { font-size: 0.625rem; color: var(--text-secondary); text-decoration: none; }
.footer-disclosure .disclosure-links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .partnership-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .pillars { grid-template-columns: 1fr; gap: var(--space-8); }
  .pillars::before { display: none; }   /* thread connects the 3-up row; drop it when stacked */
  .pillar-body { text-align: left; max-width: 52ch; }
  .team-grid { grid-template-columns: 1fr; }

  /* Comparison → stacked cards */
  .compare { border-top: none; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-default); border-bottom: none; }
  .compare-row:first-of-type { border-top: none; }
  .compare-head > div, .compare-row > div { padding: 0; }
  .compare-row .rl { grid-column: 1 / -1; margin-bottom: var(--space-3); }
  .compare-row .c-bank, .compare-row .c-belv { border-left: none; background: transparent; padding: 0; }
  .compare-row .c-bank::before, .compare-row .c-belv::before {
    display: block; margin-bottom: var(--space-1);
    font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  }
  .compare-row .c-bank::before { content: "Private bank"; color: var(--text-muted); }
  .compare-row .c-belv::before { content: "Belvest"; color: var(--brand); }
}

@media (max-width: 560px) {
  .hero-subhead { font-size: var(--text-md); }
  .service-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; }
  .stat { padding: var(--space-5) 0; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--border-subtle); padding-left: 0; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
  .hero-ctas .btn { flex: 1 1 auto; }
}

/* ============================================================
   LONG-FORM PAGE SECTIONS
   ============================================================ */

/* Section intro line — body text (sans), identical to all other body copy.
   Only the hero lede stays serif; every other body block is uniform sans. */
.section-lead {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 66ch;
  margin: var(--space-4) 0 0;
  /* balance (not pretty): even out the rag so the lead reads as deliberately
     set — still reflows with the viewport, just without a stranded short line. */
  text-wrap: balance;
}

/* Full-bleed background panels */
.panel-mist { background: var(--surface-mist); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.panel-sunken { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

/* Hero lede — no max-width: a cap here shrinks the text box, which (with the
   floated figure) starved the wrap-around column to a cramped ribbon. Full width
   gives a comfortable measure beside the image; the last lines flow under it. */
.hero-lede { max-width: none; margin-top: 0; }   /* first line aligns with the image top (below the full-width headline) */
.hero-lede p {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}
.hero-lede p:last-child { margin-bottom: 0; }

/* Why now — uniform serif prose */
.whynow-body { display: flow-root; }
.whynow-body p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}
.whynow-body p:last-child { margin-bottom: 0; }

/* Hero & Why-now figures — FLOATED so the text wraps around them (magazine
   style). Shared sepia treatment so both images read as one warm set. The
   containers are flow-root so they contain their float. */
.hero-copy { display: flow-root; }
.hero-figure, .whynow-figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-mist); box-shadow: var(--shadow-md); }
.hero-figure { float: left; width: 34%; max-width: 360px; margin: 0.35em var(--space-8) var(--space-5) 0; aspect-ratio: 2 / 3; }
.whynow-figure { float: right; width: 44%; max-width: 470px; margin: 0.35em 0 var(--space-5) var(--space-8); aspect-ratio: 16 / 9; }
.hero-figure img, .whynow-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Hero doorway: pulled back a touch cooler/less saturated so it isn't as warm. */
  filter: sepia(0.44) saturate(1.12) brightness(1.04) contrast(0.97) hue-rotate(-2deg);
}
/* Armillary: darker B&W source. Warmer + browner than the hero (more sepia +
   saturation, a warmer hue, less of the brightness lift so it reads as a deeper
   brown rather than a pale tan) — the two now meet in the middle tonally. */
.whynow-figure img { filter: sepia(0.85) saturate(1.35) brightness(1.08) contrast(0.92) hue-rotate(-10deg); }
.hero-figure.is-empty, .whynow-figure.is-empty { box-shadow: none; }
.hero-figure.is-empty img, .whynow-figure.is-empty img { display: none; }

@media (max-width: 760px) {
  .hero-figure, .whynow-figure { float: none; width: 100%; max-width: none; margin: 0 0 var(--space-6) 0; }
  .hero-figure { aspect-ratio: 3 / 2; }
}

/* Team — expandable bios */
/* Both collapse labels ("Our Leadership" / "Our Partners") are deliberately louder
   than a standard eyebrow — bolder, brand-brown, and a touch larger — so they read
   as interactive, expandable controls. This intentionally departs from the muted
   eyebrow guideline; the "(click to expand)" hint reinforces the affordance. */
.team-subhead, .partners-subhead {
  font-size: 0.875rem; font-weight: var(--fw-bold); color: var(--brand); margin: 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.toggle-hint {
  font-size: 0.85em; font-weight: var(--fw-regular); text-transform: none;
  letter-spacing: 0.01em; color: var(--text-muted);
}

/* Our Leadership — collapsible, open by default (mirrors the partners collapse). */
.team-toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.team-chevron { flex: none; color: var(--text-muted); transition: transform var(--dur-normal) var(--ease-out), color var(--dur-fast) var(--ease-standard); }
.team-toggle:hover .team-subhead,
.team-toggle:hover .team-chevron { color: var(--brand-hover); }
.team-collapse.is-open .team-chevron { transform: rotate(180deg); }
.team-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.team-panel > div { overflow: hidden; }
.team-collapse.is-open .team-panel { grid-template-rows: 1fr; }
.team-panel .team-list { padding-top: var(--space-6); }
.team-list { display: flex; flex-direction: column; }
/* Bios: medallion on the LEFT, then name + role (each on one line) above the
   paragraphs on the RIGHT — nothing wraps in a normal window. */
.bio { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 36px); padding: var(--space-8) 0; }
.bio-aside { flex: none; }
.bio-body { flex: 1; min-width: 0; max-width: 74ch; }
.bio:first-child { padding-top: 0; }
.bio + .bio { border-top: 1px solid var(--border-subtle); }
.bio-aside .team-portrait { margin-bottom: 0; }
/* Name takes the former (smaller) header treatment, capped at the header size so a
   name never renders larger than the section header above it. */
.bio-name { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.3vw, 1.5rem); font-weight: var(--fw-regular); color: var(--text-primary); margin: 0 0 var(--space-2); line-height: var(--leading-snug); }
.bio-name-full { white-space: nowrap; }        /* the name never wraps */
.bio-creds { font-size: 0.86em; }               /* credentials ~2pt smaller; may wrap */
.bio-role { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); margin: 0; white-space: nowrap; }
.bio-teaser, .bio-rest p { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0 0 var(--space-4); }
.bio-rest { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.bio-rest > div { overflow: hidden; }
.bio-rest p:last-child { margin-bottom: 0; }
.bio.is-open .bio-rest { grid-template-rows: 1fr; }
.bio-toggle {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-4);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; color: var(--brand);
  transition: color var(--dur-fast) var(--ease-standard);
}
.bio-toggle:hover { color: var(--brand-hover); }
.bio-chevron { transition: transform var(--dur-normal) var(--ease-out); }
.bio.is-open .bio-chevron { transform: rotate(180deg); }

/* Our Partners — extended-resource roster. Same portrait+name treatment as the
   leadership bios, with smaller headshots; the whole block collapses (closed by
   default) with the eyebrow acting as the toggle. */
.partners { margin-top: var(--space-4); }
.partners-toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.partners-subhead { margin: 0; transition: color var(--dur-fast) var(--ease-standard); }
.partners-chevron { flex: none; color: var(--text-muted); transition: transform var(--dur-normal) var(--ease-out), color var(--dur-fast) var(--ease-standard); }
.partners-toggle:hover .partners-subhead,
.partners-toggle:hover .partners-chevron { color: var(--brand-hover); }
.partners.is-open .partners-chevron { transform: rotate(180deg); }
/* Grid-rows 0fr -> 1fr gives a smooth height animation without measuring. */
.partners-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.partners-panel > div { overflow: hidden; }
.partners.is-open .partners-panel { grid-template-rows: 1fr; }
.partners-lead { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); margin: var(--space-6) 0 0; max-width: 68ch; }
.partners-list {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7);
}
.partner { display: flex; align-items: center; gap: var(--space-4); }
.partner-portrait {
  width: 64px; height: 64px; flex: none; border-radius: var(--radius-full);
  overflow: hidden; background: var(--surface-mist); box-shadow: 0 0 0 1px var(--border-default);
}
.partner-portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) saturate(0.9); display: block; }
.partner-name { font-family: var(--font-serif); font-size: var(--text-md); font-weight: var(--fw-regular); color: var(--text-primary); margin: 0; line-height: var(--leading-snug); }
.partner-creds { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); margin-top: var(--space-1); }
@media (max-width: 680px) {
  .partners-list { grid-template-columns: 1fr; }
}

/* Infographic — We are built differently */
.info-legend { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
.info-legend-item { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); }
.info-legend--adv { color: var(--mist-600); }
.info-legend--fo { color: var(--success-500); }
.infographic { display: flex; flex-direction: column; gap: var(--space-5); }
.info-item { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-7); }
.info-cat { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.info-cat-icon { color: var(--brand); display: inline-flex; }
.info-cat h3 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--fw-regular); color: var(--text-primary); margin: 0; line-height: var(--leading-snug); }
.info-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.info-side { border-radius: var(--radius-lg); padding: var(--space-5); }
.info-side--adv { background: var(--mist-100); }
.info-side--fo { background: var(--success-50); }
.info-side-head { display: flex; align-items: center; gap: 0.4em; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin: 0 0 var(--space-3); }
.info-side--adv .info-side-head { color: var(--mist-600); }
.info-side--fo .info-side-head { color: var(--success-500); }
.info-side-text { font-family: var(--font-sans); font-size: 0.8125rem; line-height: var(--leading-normal); color: var(--text-primary); margin: 0; }

/* Current priorities — numbered */
.priorities-list { display: flex; flex-direction: column; }
.priority { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 48px); align-items: start; padding: var(--space-7) 0; }
.priority:first-child { padding-top: 0; }
.priority + .priority { border-top: 1px solid var(--border-subtle); }
.priority-num { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 0.95; color: var(--brand); font-feature-settings: var(--nums-tabular); }
.priority-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.priority-icon { color: var(--brand); display: inline-flex; }
.priority-head h3 { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--fw-regular); color: var(--text-primary); margin: 0; line-height: var(--leading-snug); }
.priority-body p { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; max-width: 74ch; }

/* Reveal: gentle upward fade with per-group stagger (delay set in JS) */
.js .reveal { will-change: opacity, transform; }

@media (max-width: 680px) {
  /* Keep the medallion on the left on phones too, just smaller so the text fits. */
  .bio { gap: var(--space-4); }
  .bio-aside .team-portrait { width: 76px; height: 76px; }
  .bio-aside .team-portrait .initials { font-size: var(--text-lg); }
  /* Long roles must wrap in the narrow phone column (they only stay on one line
     in a standard desktop window); nowrap here overflowed the viewport. */
  .bio-role { white-space: normal; }
}
@media (max-width: 680px) {
  .info-compare { grid-template-columns: 1fr; }
  .priority { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-6) 0; }
  .priority-num { font-size: var(--text-3xl); }
}

/* ============================================================
   HERITAGE — "About our brand" illuminated plate
   A framed frontispiece between Team and The Difference. Everything is
   built from the tokens; the Renaissance note reads through proportion,
   hairline rules, small caps, and a Caslon versal — not costume. No
   gradients, no textures, no script faces.
   ============================================================ */

/* Team → callout boundary: OUR PARTNERS now tucks under the leadership (its old
   divider is gone), and the dividing rule sits just above the plate so the
   callout reads as immediately following it. Section padding is pulled in. */
#team { padding-bottom: var(--space-7); }
#heritage { padding-top: var(--space-6); }
.heritage-rule {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0 0 var(--space-7);
}

.heritage-plate {
  --logo-seam: var(--brown-50);            /* keystone seam must match the plate ground */
  position: relative;
  max-width: none;                         /* full page content width (matches other sections) */
  margin-inline: auto;
  background: var(--brown-50);             /* warm parchment cream */
  border: 1.5px solid color-mix(in srgb, var(--brown-600) 42%, var(--paper));
  border-radius: var(--radius-sm);
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 3.5rem);
}
/* Inner hairline — the second rule of the engraved double frame. */
.heritage-plate::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--brown-600) 22%, var(--paper));
  border-radius: calc(var(--radius-sm) - 1px);
  pointer-events: none;
}

/* Crowning arch mark */
.heritage-crest {
  display: block;
  width: 46px; height: 46px;
  margin: 0 auto var(--space-5);
  color: var(--brown-600);
}

/* Movement heads — Caslon small caps, letterspaced. A deliberate classical
   departure from the site's sans eyebrows. */
.heritage-head {
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  color: var(--brown-600);
  text-align: center;
  margin: 0 0 var(--space-6);
}
.heritage-head--sub { margin-top: var(--space-2); }

/* Prose — Caslon body. This and the hero lede are the only serif body copy on
   the site; apt for a 'voice' passage. The plate spans the full page width, so
   the reading column is capped to a comfortable measure and centred within it. */
.heritage-body {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--brown-600);
  text-align: left;
  max-width: 40rem;
  margin-inline: auto;
}
.heritage-body p { margin: 0 0 var(--space-5); }
.heritage-body p:last-child { margin-bottom: 0; }
.heritage-body em { font-style: italic; }

/* Versal / drop cap on the opening paragraph */
.heritage-lead::first-letter {
  font-family: var(--font-serif-display);
  font-size: 3.5em;
  line-height: 0.86;
  float: left;
  margin: 0.02em 0.09em -0.06em 0;
  color: var(--brown-600);
}

/* Featured virtues — the Loggia's four statues set as an inscription band */
.heritage-virtues {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  width: min(32rem, 100%);   /* definite width so the auto side-margins centre the band (it's a <div>, not a <p>, to escape the .heritage-body p margin reset) */
  margin: var(--space-7) auto;
  padding: var(--space-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--brown-600) 20%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--brown-600) 20%, var(--paper));
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: var(--text-md);
  color: var(--brown-600);
}
.heritage-virtues .v-sep {
  color: color-mix(in srgb, var(--brown-400) 70%, var(--paper));
  font-size: 0.62em;
  letter-spacing: 0;
  transform: translateY(-0.12em);
}

/* Fleuron between the two movements */
.heritage-flourish {
  text-align: center;
  margin: var(--space-7) 0;
  color: color-mix(in srgb, var(--brown-400) 80%, var(--paper));
  font-size: var(--text-xl);
  line-height: 1;
}

@media (max-width: 680px) {
  .heritage-plate { padding: clamp(1.75rem, 7vw, 2.5rem) clamp(1.15rem, 6vw, 1.75rem); }
  .heritage-plate::before { inset: 6px; }
  .heritage-body { font-size: var(--text-base); }
  .heritage-virtues { gap: var(--space-1) var(--space-3); letter-spacing: 0.12em; }
}

/* ============================================================
   COMMENTARY — letters & articles index (homepage #commentary)
   Post cards are built from the shared .card primitives; the whole
   card is a single link. The .commentary-empty state shows until the
   first piece is published (see /commentary/README.md).
   ============================================================ */
.commentary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
/* The link carries the padding so the entire card is clickable. */
.post-card { padding: 0; }
.post-card-link {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--space-7);
  text-decoration: none; color: inherit;
}
.post-card-link:hover { text-decoration: none; }
.post-meta { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.post-kind {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand);
}
.post-date { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--text-muted); }
.post-title {
  font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--fw-regular);
  color: var(--text-primary); line-height: var(--leading-snug); margin: 0 0 var(--space-3);
}
.post-excerpt {
  font-family: var(--font-sans); font-size: 0.8125rem; line-height: var(--leading-normal);
  color: var(--text-secondary); margin: 0 0 var(--space-5);
}
.post-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; color: var(--brand);
}
.post-more .icon { transition: transform var(--dur-normal) var(--ease-out); }
.post-card-link:hover .post-title { text-decoration: underline; text-underline-offset: 0.18em; }
.post-card-link:hover .post-more .icon--arrow { transform: translateX(2px); }

/* Empty state — spans the grid until there are posts. */
.commentary-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2);
  padding: clamp(var(--space-8), 6vw, var(--space-10)) var(--space-6);
  background: var(--surface-mist);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}
.commentary-empty-icon { color: var(--brand); display: inline-flex; margin-bottom: var(--space-3); }
.commentary-empty-title {
  font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--fw-regular);
  color: var(--text-primary); margin: 0;
}
.commentary-empty-text {
  font-family: var(--font-sans); font-size: 0.8125rem; line-height: var(--leading-normal);
  color: var(--text-secondary); margin: 0; max-width: 46ch;
}
.commentary-empty .btn { margin-top: var(--space-4); }

@media (max-width: 680px) {
  .commentary-list { grid-template-columns: 1fr; }
}

/* ============================================================
   COMMENTARY ARTICLE — standalone piece page (/commentary/<slug>)
   Shared by every article/letter page so a new piece only needs
   markup, not new CSS. .prose is the one place we style bare
   elements (h2/h3/p/ul/blockquote) — scoped to article bodies.
   ============================================================ */
.article { padding-block: clamp(40px, 6vw, 72px); }
.article-wrap { max-width: 44rem; }   /* narrower reading measure than the site .wrap */
.article-back {
  display: inline-flex; align-items: center; gap: 0.4em; margin-bottom: var(--space-6);
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--fw-medium);
  color: var(--text-secondary); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.article-back:hover { color: var(--brand); }
.article-back .icon { transition: transform var(--dur-normal) var(--ease-out); }
.article-back:hover .icon { transform: translateX(-2px); }
.article-header { margin-bottom: var(--space-7); }
.article-meta { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.article-kind {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand);
}
.article-date { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--text-muted); }
.article-title {
  font-family: var(--font-serif); font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--text-primary); margin: 0 0 var(--space-4); text-wrap: balance;
}
.article-byline { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-secondary); margin: 0; }
.article-lede {
  font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-relaxed);
  color: var(--text-secondary); margin: 0 0 var(--space-6); text-wrap: pretty;
}
.article-rule { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-7) 0; }
.article-footer { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

/* Prose body */
.prose { font-family: var(--font-sans); font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--text-secondary); }
.prose p { margin: 0 0 var(--space-5); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--fw-regular); color: var(--text-primary); line-height: var(--leading-snug); margin: var(--space-7) 0 var(--space-4); }
.prose h3 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--fw-regular); color: var(--text-primary); line-height: var(--leading-snug); margin: var(--space-6) 0 var(--space-3); }
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.prose li { margin: 0 0 var(--space-2); }
.prose li:last-child { margin-bottom: 0; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }
.prose a:hover { color: var(--brand-hover); }
.prose blockquote {
  margin: var(--space-6) 0; padding-left: var(--space-5);
  border-left: 2px solid var(--brand);
  font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg);
  line-height: var(--leading-normal); color: var(--text-primary);
}
.prose em { font-style: italic; }
.prose strong { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* ============================================================
   SHARE — a Commentary piece's own public link
   Progressive enhancement of a plain URL: copy-to-clipboard on
   desktop (popover), the native OS share sheet on touch devices.
   No backend — the piece is already public, so the "link" is just
   its own address. JS in main.js wires up any [data-share] block.
   ============================================================ */

/* Header row that carries the back-link (left) and the share control (right). */
.article-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
/* The back-link owns its own bottom margin when it stands alone; the row
   supplies the spacing here, so drop it inside the topbar. */
.article-topbar .article-back { margin-bottom: 0; }

.share { position: relative; display: inline-flex; }
.share-btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.share-btn:hover,
.share-btn[aria-expanded="true"] { background: var(--paper-2); border-color: var(--border-strong); color: var(--brand); }

/* Popover — anchored under the button on the right (desktop path). */
.share-pop {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20;
  width: min(20rem, calc(100vw - 2rem));
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}
.share-pop[hidden] { display: none; }
.share-pop-title {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--fw-semibold);
  color: var(--text-primary); margin: 0 0 var(--space-1);
}
.share-pop-note {
  font-family: var(--font-sans); font-size: 0.625rem; line-height: var(--leading-normal);
  color: var(--text-muted); margin: 0 0 var(--space-3);
}
.share-field { display: flex; align-items: center; gap: var(--space-2); }
.share-url {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-sans); font-size: 0.625rem; color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.6rem;
}
.share-url:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.share-copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.share-copy:hover { background: var(--paper-3); color: var(--brand); }
.share-copy.is-copied { color: var(--success-500); border-color: var(--success-500); }
/* Copy ⇄ check swap, driven by .is-copied on the button. */
.share-check-icon { display: none; color: var(--success-500); }
.share-copy.is-copied .share-copy-icon { display: none; }
.share-copy.is-copied .share-check-icon { display: inline-block; }

@media (max-width: 480px) {
  .share-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}