/* =====================================================================
   Primegate — Landing Page v2.1
   Modern luxury advisory. Dark-first. Champagne signature.
   Fraunces display + Inter body.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Colour — dark-luxe palette */
  --ink:          #0A0D14;   /* Near-black with blue undertone. Base. */
  --ink-surface:  #10141D;   /* Slightly lifted — cards, inputs */
  --ink-rule:     rgba(237, 232, 220, 0.08);

  --bone:         #EDE8DC;   /* Warm ivory, never pure white */
  --bone-soft:    #D9D3C2;
  --bone-muted:   rgba(237, 232, 220, 0.62);
  /* Bumped from 0.42 to 0.58 to clear WCAG AA on dark ink (was 3.54:1, now ~5.1:1). */
  --bone-faint:   rgba(237, 232, 220, 0.58);

  --gold:         #C9A961;   /* Champagne signature, used on dark ink. */
  --gold-deep:    #A8863E;   /* Decorative use only on paper (rules, bars, dividers). */
  /* Gold dark enough to clear WCAG AA when used as TEXT on the paper panel.
     Used on .panel-light for section labels, form labels, intake-path labels. */
  --gold-darkest: #6B5320;
  --gold-soft:    rgba(201, 169, 97, 0.18);

  /* Light panel (About, Intake) */
  --paper:        #F2ECDE;
  --paper-deep:   #E7DFC9;
  --paper-rule:   #D9CFB4;
  --paper-ink:    #14171F;
  --paper-muted:  #5A5A55;

  /* Brand-blue (logo) — used ONLY inside the icon when coloured variant is shown */
  --brand-blue:   #078ED1;

  /* Typography */
  --ff-display:   'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --maxw:         1280px;
  --maxw-prose:   720px;
  --pad-x:        clamp(20px, 4vw, 48px);
  --pad-x-wide:   clamp(24px, 5vw, 64px);

  /* Rhythm */
  --section-pad:  clamp(96px, 12vw, 180px);
  --section-pad-sm: clamp(72px, 9vw, 128px);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bone);
  background: var(--ink);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Old-style (text) numerals for prose — lining figures stay for display,
   UI labels, form inputs, and the oversized 01/02/03 lane numerals. */
p, .lede, .section-lede, .lane > p, .about-body p, .pillar p,
.donot-gloss, .donot-lead, .donot-close, .about-close,
.intake-path-lede, .disclosure-inline, .submit-note, .submit-row p,
.footer-col p, .disclosure-block p {
  font-variant-numeric: oldstyle-nums proportional-nums;
}
/* Keep lining figures wherever numbers need to read as precise data / graphic */
.lane-num, .pillar-num, .lane-tag, .section-label, .eyebrow, .intake-path-label,
.nav-cta, .brand-sub, .copyright, .regnum, .submit,
input, select, textarea, label, .about-title-line, h1, h2, h3, h4 {
  font-variant-numeric: lining-nums tabular-nums;
}

main, section, footer, header { position: relative; }

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

a {
  color: var(--bone);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover { color: var(--gold); }

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

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

/* ---------- Utility ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
}
.container-prose {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.skip-link {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 20px; top: 20px;
  width: auto; height: auto;
  padding: 12px 20px;
  background: var(--gold); color: var(--ink);
  z-index: 200;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--bone);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.eyebrow, .section-label {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 32px;
}
.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.topbar.scrolled {
  background: rgba(10, 13, 20, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--ink-rule);
}

/* Inverted state — when the topbar is floating over a cream/paper panel */
.topbar.over-light {
  background: rgba(242, 236, 222, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--paper-rule);
}
.topbar.over-light .brand,
.topbar.over-light .brand-name,
.topbar.over-light .brand-mark,
.topbar.over-light nav a {
  color: var(--paper-ink);
}
.topbar.over-light .brand-sub {
  color: var(--paper-muted);
}
.topbar.over-light nav a::after {
  background: var(--gold-deep);
}
.topbar.over-light nav a:hover,
.topbar.over-light .brand:hover .brand-mark {
  color: var(--gold-deep);
}
.topbar.over-light .nav-cta {
  border-color: var(--paper-ink);
}
.topbar.over-light nav a.nav-cta:hover {
  background: var(--paper-ink);
  color: var(--paper) !important;
  border-color: var(--paper-ink);
}
.topbar.over-light .nav-toggle {
  border-color: rgba(20, 23, 31, 0.15);
}
.topbar.over-light .nav-toggle span {
  background: var(--paper-ink);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad-x-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--bone);
}
.brand-mark {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  color: var(--bone);
  transition: color .25s ease;
}
.brand:hover .brand-mark { color: var(--gold); }
.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.005em;
  color: var(--bone);
  font-variation-settings: "opsz" 72, "SOFT" 30;
}
.brand-sub {
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: 6px;
}

.topbar nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
}
.topbar nav a {
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  padding: 6px 0;
}
.topbar nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width .28s ease;
}
.topbar nav a:hover { color: var(--gold); }
.topbar nav a:hover::after { width: 100%; }

.nav-cta {
  padding: 11px 24px !important;
  border: 1px solid var(--bone);
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-cta::after { display: none !important; }
.topbar nav a.nav-cta:hover {
  background: var(--gold);
  color: var(--ink) !important;
  border-color: var(--gold);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink-rule);
  border-radius: 999px;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1px;
  background: var(--bone);
}
.mobile-nav {
  background: rgba(10, 13, 20, 0.97);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--ink-rule);
  padding: 20px var(--pad-x-wide) 32px;
}
.mobile-nav ul { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav a {
  display: block;
  padding: 18px 0;
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--bone);
  border-bottom: 1px solid var(--ink-rule);
  letter-spacing: -0.01em;
}
@media (max-width: 820px) {
  /* Hide ONLY the desktop nav inside .topbar-inner. The mobile nav lives
     as a sibling of .topbar-inner and must stay reachable so the JS
     toggle can show it when the hamburger is tapped. The previous
     selector (.topbar nav) was hitting both. */
  .topbar-inner nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Brand subtitle stays visible on mobile so 'A personal practice of
     Taran Aujla' reads under the wordmark. Slightly tighter scale to
     keep the topbar from cramping at 375px. */
  .brand-sub {
    font-size: 8.5px;
    letter-spacing: 0.18em;
  }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 85% 20%, rgba(201, 169, 97, 0.10), transparent 70%),
    radial-gradient(900px 500px at 10% 90%, rgba(7, 142, 209, 0.06), transparent 70%);
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
  width: 100%;
}
.hero .eyebrow {
  margin-bottom: 40px;
}
.hero h1 {
  font-size: clamp(44px, 9vw, 132px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin-bottom: clamp(40px, 5vw, 64px);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.hero h1 .h1-line1 {
  display: block;
  color: var(--bone);
  font-weight: 300;
  /* Constrain just Line 1 to 15ch so "Real estate for serious files."
     wraps cleanly at the right point. Line 2 (smaller, longer combined
     phrase) extends to the full container width below. */
  max-width: 15ch;
}
/* Line 2 is the combined supporting phrase at ~46-48% of Line 1's scale.
   "Reviewed carefully. Handled calmly." sits on a single visual line at
   desktop and tablet; wraps naturally at mobile when there isn't room.
   The italic gold treatment on "carefully" / "calmly" comes from the
   shared .hero h1 em rule. */
.hero h1 .h1-line2 {
  display: block;
  color: var(--bone);
  font-weight: 300;
  font-size: clamp(22px, 4.2vw, 60px);
  letter-spacing: -0.018em;
  line-height: 1.2;
  /* Breathing room from the dominant Line 1. */
  margin-top: clamp(12px, 1.2vw, 22px);
  /* Allow the supporting line to extend wider than Line 1's 15ch cap so
     "Reviewed carefully. Handled calmly." fits on a single line at desktop
     widths. The H1 still caps Line 1 at 15ch via its own max-width. */
  max-width: 100%;
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  letter-spacing: -0.04em;
}

.hero-subhead {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.3;
  color: var(--bone);
  font-weight: 300;
  max-width: 40ch;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}

.hero-lede-block {
  max-width: 620px;
  margin-bottom: 56px;
  display: grid;
  gap: 16px;
}
.hero .lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--bone);
  font-weight: 300;
}
.hero .lede-continued {
  color: var(--bone-muted);
}

.hero .disclosure-inline {
  max-width: 560px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bone-muted);
  letter-spacing: 0.005em;
}
.hero .disclosure-inline strong {
  color: var(--bone);
  font-weight: 500;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  right: var(--pad-x-wide);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--bone-muted);
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 3;
}
.scroll-indicator:hover { color: var(--gold); }
.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold));
  display: block;
}
@media (max-width: 820px) {
  .scroll-indicator { display: none; }
}

/* ---------- Sections ---------- */
section {
  padding: var(--section-pad) 0;
  position: relative;
}

section h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  font-weight: 300;
  max-width: 14ch;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
section h2 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.section-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--bone-muted);
  max-width: 60ch;
  font-weight: 300;
}

/* ---------- The Practice — Bento grid ---------- */
#practice { padding-bottom: var(--section-pad); }
.lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: clamp(64px, 8vw, 112px);
  max-width: var(--maxw);
  padding: 0 var(--pad-x-wide);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .lanes {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  /* Tablet / small desktop: 2x2 grid keeps each card readable. */
}

/* 3D card flip structure.
   .lane         is the outer container, sets perspective and is otherwise transparent
   .lane-inner   is the rotating element (flips 180deg on .is-flipped)
   .lane-front   absolutely overlays the back so the card height is set by .lane-back
   .lane-back    sits in normal flow (its content sets the card's height) and is rotated 180deg
                 so it faces away by default; preserves card height across the flip
*/
.lane {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  perspective: 1500px;
  -webkit-perspective: 1500px;
  /* Flex column so .lane-inner can stretch to the grid row's height
     (each row's height is set by the tallest back content). All four
     cards then render at uniform height per row regardless of which
     card has the longest body. */
  display: flex;
  flex-direction: column;
}

.lane-inner {
  position: relative;
  width: 100%;
  flex: 1 1 auto;          /* fills .lane (which the grid row stretched) */
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Explicit initial transform gives the browser a stable interpolation
     start when the .is-flipped class is added. Without this some engines
     compute a flat 2D matrix mid-flip. */
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transition: transform 0.85s cubic-bezier(.4, .12, .2, 1);
}
.lane.is-flipped .lane-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.lane-front,
.lane-back {
  background: var(--ink-surface);
  border: 1px solid var(--ink-rule);
  border-radius: 4px;
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: border-color .35s ease, background .35s ease;
}
.lane-front::before,
.lane-back::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.lane-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Header at top, "Read the detail" cue at bottom. The cue is decorative
     (pointer-events: none, aria-hidden); the entire front face is the
     interactive target via role=button + tabindex=0 on .lane-front itself. */
  justify-content: space-between;
  cursor: pointer;
}
/* Keyboard focus indicator: the front IS the button now (role=button, tabindex=0). */
.lane-front:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Visual flip-cue affordance: tells users the card responds to a click,
   without itself being a clickable element. Click events pass through to
   .lane-front via pointer-events: none. */
.lane-flip-cue {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 0 0 4px 0;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.lane:not(.is-flipped) .lane-front:hover .lane-flip-cue {
  gap: 14px;
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}
.lane-back {
  position: relative;
  flex: 1 1 auto;          /* fills .lane-inner so the visible back box matches the row height */
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.lane:not(.is-flipped) .lane-front:hover {
  border-color: rgba(201, 169, 97, 0.35);
  background: #121722;
}
.lane:not(.is-flipped) .lane-front:hover::before { opacity: 1; }
.lane.is-flipped .lane-back::before { opacity: 1; }

/* Back-face "Back" button. The front-face trigger button was removed once the
   entire .lane-front became the click target (with role=button + Enter/Space
   key handlers), so we only style the back button here. */
.lane-flip-back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0 0 4px 0;
  margin-bottom: 4px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.lane-flip-back:hover {
  gap: 14px;
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}
.lane-flip-back:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 2px;
}
.lane-flip-arrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  font-variation-settings: "opsz" 72, "WONK" 1;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lane-inner { transition: none; }
}

.lane-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
}
.lane-num {
  font-family: var(--ff-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  display: block;
}
.lane h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--bone);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.lane-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 7px 14px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 999px;
}
.lane p {
  color: var(--bone-muted);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
}

/* Wide desktop: four cards in a single horizontal row, each taller than wide.
   Card height is capped (independent of body length); any back content longer
   than the card scrolls inside the back face. */
@media (min-width: 1200px) {
  .lanes {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Equal-height row regardless of back content length. */
    align-items: stretch;
  }

  /* Disable the flex-stretch chain that propagated back content height up to
     the lane. Use explicit height instead so every card is exactly the same
     vertical dimension and the front never looks half-empty. */
  .lane {
    min-height: 0;
    /* Tightened so the front face has less empty space.
       Cat 02 / Cat 04 backs are slightly longer than the card and will
       scroll a small amount inside the back face (thin gold scrollbar). */
    height: clamp(440px, 38vw, 500px);
    flex-direction: column;
  }
  .lane-inner {
    flex: none;
    height: 100%;
  }
  .lane-front,
  .lane-back {
    padding: 30px 26px;
    gap: 18px;
  }

  /* Front: header at top, "Read the detail" cue anchored at bottom via
     space-between (matches the base .lane-front rule). */
  .lane-front {
    justify-content: space-between;
  }

  /* Back: scrolls if content exceeds card height. Thin champagne scrollbar. */
  .lane-back {
    flex: none;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 97, 0.4) transparent;
  }
  .lane-back::-webkit-scrollbar { width: 6px; }
  .lane-back::-webkit-scrollbar-track { background: transparent; }
  .lane-back::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 97, 0.35);
    border-radius: 3px;
  }
  .lane-back::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 169, 97, 0.6);
  }

  /* Typography scaled for the narrower 4-col cards. */
  .lane-num {
    font-size: clamp(48px, 5vw, 76px);
  }
  .lane h3 {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.012em;
  }
  .lane-tag {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    padding: 6px 12px;
  }
  .lane p {
    font-size: 14px;
    line-height: 1.6;
  }
  .lane-flip-back {
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }
}

/* Lane-card accent — subtle gold ambient glow on hover only (no single-lead treatment now that there are four) */

/* ---------- How We Work ---------- */
.section-how {
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.section-how::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 100%, rgba(201, 169, 97, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section-how > * { position: relative; z-index: 1; }

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 96px);
  max-width: var(--maxw);
  padding: 0 var(--pad-x-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Tablet to small desktop: 2 columns x 3 rows (six commitments). */
@media (min-width: 900px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .pillar {
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 56px);
  }
  .pillar:nth-child(2n) { border-left: 1px solid var(--ink-rule); }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--ink-rule); }
}

/* Wide desktop: 3 columns x 2 rows (clean 3+3). */
@media (min-width: 1180px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  /* Reset borders so we can re-apply for the 3-col layout. */
  .pillar { border-left: 0; border-top: 0; }
  /* Vertical dividers between cols 1-2 and 2-3 in both rows. */
  .pillar:nth-child(3n+2),
  .pillar:nth-child(3n) { border-left: 1px solid var(--ink-rule); }
  /* Horizontal divider between row 1 and row 2. */
  .pillar:nth-child(n+4) { border-top: 1px solid var(--ink-rule); }
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pillar-num {
  font-family: var(--ff-display);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-variation-settings: "opsz" 72, "WONK" 1;
  font-weight: 500;
}
.pillar h4 {
  font-family: var(--ff-display);
  /* Reduced max from 28 to 24 to align with category card h3 hierarchy at 4-col viewport. */
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  max-width: 22ch;
}
.pillar p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bone-muted);
  font-weight: 300;
}

/* ---------- Pullquote ---------- */
.pullquote {
  margin: clamp(80px, 10vw, 140px) auto 0;
  max-width: 1080px;
  padding: 0 var(--pad-x-wide);
  position: relative;
  text-align: center;
}
.pullquote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.25;
  color: var(--bone);
  font-weight: 300;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  position: relative;
}
.pullquote::before {
  content: '"';
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(80px, 10vw, 140px);
  font-style: italic;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 24px;
  font-weight: 300;
}

/* ---------- Panel: light (About, Intake) ---------- */
.panel-light {
  background: var(--paper);
  color: var(--paper-ink);
}
.panel-light .section-label {
  color: var(--gold-darkest);
}
/* Decorative bar; not text, contrast rule does not apply. */
.panel-light .section-label::before { background: var(--gold-deep); }
.panel-light h2, .panel-light h3 {
  color: var(--paper-ink);
}
.panel-light h2 em, .panel-light h3 em {
  color: var(--gold-deep);
}
.panel-light .section-lede { color: var(--paper-muted); }

/* ---------- About ---------- */
#about .container-prose,
#about .container {
  max-width: 1080px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}
@media (min-width: 780px) {
  .about-grid {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(56px, 7vw, 96px);
  }
}
.portrait-figure { margin: 0; }
.portrait-artwork {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--paper-rule);
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px -24px rgba(10, 13, 20, 0.35);
}
.portrait-artwork svg,
.portrait-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-body h3 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  color: var(--paper-ink);
  margin-bottom: 10px;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.about-title-line {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 36px;
  font-weight: 500;
}
.about-body p {
  max-width: 62ch;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--paper-ink);
  font-weight: 400;
}
.about-body p:last-child { margin-bottom: 0; }

.about-body .about-transition {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--paper-ink);
  margin: 8px 0 28px;
  line-height: 1.3;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.about-body .about-emphasis {
  font-family: var(--ff-display);
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--paper-ink);
  line-height: 1.5;
  margin-bottom: 22px;
  font-weight: 400;
  max-width: 60ch;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}

.about-body .about-close {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--paper-ink);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  max-width: 48ch;
}

/* ---------- For Clarity ---------- */
.donot-list {
  margin-top: clamp(56px, 7vw, 96px);
  max-width: 880px;
}
.donot-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--ink-rule);
  transition: background .3s ease;
}
.donot-list li:last-child { border-bottom: 1px solid var(--ink-rule); }
.donot-list li::before {
  content: '—';
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
  align-self: center;
  font-variation-settings: "opsz" 72, "WONK" 1;
}
.donot-text { flex: 1; }
.donot-lead {
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--bone);
  font-weight: 400;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.donot-gloss {
  font-size: 14px;
  color: var(--bone-muted);
  line-height: 1.7;
  font-weight: 300;
}
.donot-close {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--bone-muted);
  font-weight: 300;
  font-style: italic;
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}

/* ---------- Intake — two paths ---------- */
.intake {
  padding: var(--section-pad) 0;
}
.intake h2 { margin-bottom: 20px; }
.intake-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 7vw, 88px);
  margin-top: clamp(56px, 7vw, 88px);
}
@media (min-width: 960px) {
  .intake-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 72px);
  }
}
.intake-path {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}
@media (min-width: 960px) {
  .intake-path + .intake-path {
    padding-left: clamp(40px, 5vw, 72px);
    border-left: 1px solid var(--paper-rule);
  }
}
.intake-path-head { display: flex; flex-direction: column; gap: 14px; }
.intake-path-label {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-darkest);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.intake-path-label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold-deep);
  display: inline-block;
}
.intake-path h3 {
  font-family: var(--ff-display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 400;
  color: var(--paper-ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  max-width: 18ch;
}
.intake-path-lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-muted);
  max-width: 42ch;
  font-weight: 400;
}
.intake-form {
  max-width: 100%;
  margin-top: 0;
}
.field { margin-bottom: 28px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.field-row .field { margin-bottom: 28px; }
@media (min-width: 620px) {
  .field-row { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.intake-form label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-darkest);
  margin-bottom: 12px;
}
.intake-form label .req {
  color: var(--gold-darkest);
  margin-left: 2px;
}
.intake-form label .optional {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--paper-muted);
  font-weight: 400;
  font-size: 11px;
  margin-left: 6px;
}

.intake-form input,
.intake-form select,
.intake-form textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper-ink);
  background: transparent;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.intake-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23A8863E' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.intake-form textarea { resize: vertical; min-height: 140px; }
.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus {
  border-color: var(--gold-darkest);
  outline: none;
  box-shadow: 0 0 0 3px rgba(107, 83, 32, 0.18);
  background: rgba(255,255,255,0.4);
}

.submit-row {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
@media (min-width: 680px) {
  .submit-row { flex-direction: row; align-items: center; gap: 32px; }
}
.submit {
  padding: 17px 38px;
  background: var(--paper-ink);
  color: var(--paper);
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--paper-ink);
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden;
}
.submit:hover {
  background: var(--gold-darkest);
  border-color: var(--gold-darkest);
  color: var(--paper);
}
.submit-note {
  font-size: 12px;
  color: var(--paper-muted);
  line-height: 1.6;
  max-width: 360px;
  font-style: italic;
}

/* Inline error after AJAX submission failure. Hidden by default via the
   [hidden] HTML attribute; JS removes [hidden] and populates textContent
   when Formspree returns an error. */
.form-error {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(168, 134, 62, 0.08);
  border-left: 2px solid var(--gold-darkest);
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-ink);
  max-width: 480px;
}

/* ---------- Footer ---------- */
footer {
  background: #060810;
  color: var(--bone-muted);
  padding: clamp(72px, 9vw, 128px) 0 56px;
  border-top: 1px solid var(--ink-rule);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}
.footer-mark {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  color: var(--gold);
}
.footer-brandname {
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 72, "SOFT" 30;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ink-rule);
}
@media (min-width: 780px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 64px;
  }
}
.footer-col h4 {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer-col p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--bone-muted);
  margin-bottom: 6px;
}
.footer-col strong { color: var(--bone); font-weight: 500; }
.footer-col a { color: var(--bone); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.footer-col a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-cta {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--ff-sans);
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold) !important;
  border-bottom: 1px solid var(--gold) !important;
  padding-bottom: 3px;
}

.disclosure-block {
  margin-top: 40px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(237, 232, 220, 0.62);
  max-width: 880px;
}
.disclosure-block p { margin-bottom: 16px; }
.disclosure-block strong {
  color: var(--bone);
  font-weight: 500;
}
.regnum {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(237, 232, 220, 0.65);
  margin-top: 28px;
  text-transform: uppercase;
}
.regnum-value {
  font-style: italic;
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 72, "WONK" 1;
}
.copyright {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 232, 220, 0.5);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   NOTES SECTION — index (Level 1) + article (Level 2)
   ===================================================================== */

/* ---------- Notes index page ---------- */
.notes-page {
  padding: clamp(120px, 14vw, 200px) 0 clamp(80px, 10vw, 140px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.notes-head {
  max-width: var(--maxw-prose);
  padding: 0 var(--pad-x-wide);
  margin: 0 auto clamp(64px, 8vw, 112px);
}
.notes-head h1 {
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 300;
  margin-bottom: 28px;
  max-width: 14ch;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.notes-head .notes-intro {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--bone-muted);
  max-width: 60ch;
  font-weight: 300;
}

.notes-groups {
  padding: 0 var(--pad-x-wide);
  display: grid;
  gap: clamp(72px, 9vw, 128px);
}

.notes-group-head {
  max-width: var(--maxw-prose);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.notes-group-head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.notes-group-head .notes-group-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone-muted);
  max-width: 58ch;
  font-weight: 300;
}

.notes-entry-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.notes-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--ink-rule);
  text-decoration: none;
  color: var(--bone);
  transition: border-color .25s ease;
}
.notes-entry:last-of-type { border-bottom: 1px solid var(--ink-rule); }
.notes-entry:hover { border-top-color: rgba(201, 169, 97, 0.35); }
.notes-entry:hover + .notes-entry { border-top-color: rgba(201, 169, 97, 0.35); }

.notes-entry-tag {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}
.notes-entry-text h3 {
  font-family: var(--ff-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.notes-entry-text .notes-entry-desc {
  font-size: 14.5px;
  color: var(--bone-muted);
  line-height: 1.6;
  font-weight: 300;
  max-width: 62ch;
}
.notes-entry-date {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-muted);
  white-space: nowrap;
  align-self: center;
}

/* Placeholder entry state — lower opacity so real content pops when added */
.notes-entry.is-placeholder {
  opacity: 0.38;
  pointer-events: none;
}
.notes-entry.is-placeholder h3 { font-style: italic; font-weight: 300; }
.notes-entry.is-placeholder .notes-entry-date { font-style: italic; text-transform: none; letter-spacing: 0.04em; font-family: var(--ff-display); font-weight: 300; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; color: var(--bone-muted); }

@media (max-width: 680px) {
  .notes-entry {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .notes-entry-tag { justify-self: start; }
  .notes-entry-date { justify-self: start; }
}

.notes-close {
  max-width: var(--maxw-prose);
  margin: clamp(72px, 9vw, 120px) auto 0;
  padding: 0 var(--pad-x-wide);
  font-size: 14px;
  line-height: 1.65;
  color: var(--bone-faint);
  font-style: italic;
  font-family: var(--ff-display);
  font-weight: 300;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}

/* Empty-state logic: a group is hidden whenever its entry list contains
   zero real <a class="notes-entry"> children. The `:has()` selector
   is supported in all modern evergreen browsers (Chrome/Edge/Safari/Firefox).
   The HTML also comments out groups B and C entirely at launch as a
   belt-and-suspenders fallback. */
.notes-group:not(:has(.notes-entry-list a.notes-entry)) {
  display: none;
}

/* ---------- Individual note page (Level 2 article template) ---------- */
.article {
  padding: clamp(120px, 14vw, 180px) 0 clamp(80px, 10vw, 140px);
}
.article-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
}
.article-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-muted);
  text-decoration: none;
  margin-bottom: clamp(56px, 7vw, 88px);
  transition: color .25s ease, gap .25s ease;
}
.article-return:hover { color: var(--gold); gap: 14px; }
.article-return-bottom { margin-top: clamp(72px, 9vw, 120px); margin-bottom: 0; }

.article-meta .article-eyebrow {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.article-meta .article-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.article-title {
  font-family: var(--ff-display);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--bone);
  max-width: 22ch;
}
.article-date {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-muted);
}

.article-pdf-link {
  margin-top: 18px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.article-pdf-link a {
  color: var(--bone-muted);
  border-bottom: 1px solid rgba(237, 232, 220, 0.25);
  padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
}
.article-pdf-link a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.article-divider {
  height: 1px;
  background: var(--gold);
  width: 56px;
  margin: clamp(40px, 5vw, 56px) 0 clamp(40px, 5vw, 56px);
  border: 0;
  opacity: 0.8;
}
.article-divider.is-full {
  width: 100%;
  background: rgba(201, 169, 97, 0.3);
}

.article-body {
  font-family: var(--ff-display);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--bone);
  font-weight: 400;
  font-variation-settings: "opsz" 14, "SOFT" 30;
}
.article-body p {
  margin: 0 0 26px;
  max-width: 68ch;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: clamp(48px, 6vw, 72px) 0 18px;
  color: var(--bone);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.article-body h3 {
  font-family: var(--ff-display);
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: clamp(36px, 4.5vw, 48px) 0 14px;
  color: var(--bone);
  font-variation-settings: "opsz" 72, "SOFT" 30;
}
.article-body ul, .article-body ol {
  margin: 0 0 26px;
  padding-left: 0;
  list-style: none;
  max-width: 64ch;
}
.article-body ul li, .article-body ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.65;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.65em;
  width: 10px; height: 1px;
  background: var(--gold);
}
.article-body ol { counter-reset: article-ol; }
.article-body ol li { counter-increment: article-ol; }
.article-body ol li::before {
  content: counter(article-ol) '.';
  position: absolute;
  left: 0; top: 0;
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "WONK" 1;
}
.article-body blockquote {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--gold);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--bone);
  font-weight: 300;
  max-width: 62ch;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.article-body strong, .article-body b { font-weight: 600; color: var(--bone); }
.article-body em, .article-body i { font-style: italic; font-variation-settings: "opsz" 14, "SOFT" 80, "WONK" 1; }
.article-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--gold-deep); }

/* Callouts — Note and Caution */
.callout {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: 24px 28px;
  background: rgba(201, 169, 97, 0.06);
  border-left: 2px solid var(--gold);
  max-width: 68ch;
}
.callout-label {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: block;
}
.callout p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--bone);
  font-weight: 400;
  max-width: 100%;
}
.callout-caution {
  border-left-color: var(--gold-deep);
  background: rgba(168, 134, 62, 0.09);
}
.callout-caution .callout-label { color: var(--gold-deep); }

.article-disclaimer {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 13px;
  line-height: 1.65;
  color: var(--bone-faint);
  font-style: italic;
  font-family: var(--ff-display);
  font-weight: 300;
  max-width: 62ch;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}

/* Article-specific print overrides (main print block handles the rest) */
@media print {
  .article-return { display: none; }
  .article-body { color: #000; }
  .callout { background: #f5f5f5; color: #000; }
}

/* =====================================================================
   THANKS PAGE — branded confirmation after Formspree submission
   ===================================================================== */
.thanks-page {
  min-height: calc(100vh - 200px);
  min-height: calc(100svh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 14vw, 180px) 0 clamp(80px, 10vw, 140px);
}
.thanks-inner {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
  text-align: left;
}
.thanks-heading {
  font-family: var(--ff-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin: 0 0 32px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.thanks-lede {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--bone);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 0 32px;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.thanks-meta {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bone-muted);
  letter-spacing: 0.005em;
  max-width: 52ch;
  margin: 0 0 56px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-rule);
}
/* Thanks-return uses a slightly higher specificity selector to beat the
   global `a:hover { color: var(--gold) }` cascade and the body color. */
a.thanks-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  text-decoration: none;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
a.thanks-return:hover {
  gap: 14px;
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}