/* ==========================================================================
   SOVEREIGN MINDS DESIGN SYSTEM
   Version 1.1  (+ product cards, email capture, status pills)
   ========================================================================== */

:root {
  --sov-navy:       #0c152a;
  --sov-navy-deep:  #06090f;
  --sov-cream:      #eef4d2;
  --sov-cream-warm: #e6ebc8;
  --sov-ink:        #1a1814;
  --sov-mid:        #5c5449;
  --sov-rule:       #c8bfb0;
  --sov-page:       #f8f4ee;
  --sov-gold:       #c09a52;

  --c-ink:    rgba(238,244,210,.90);
  --c-body:   rgba(238,244,210,.55);
  --c-label:  rgba(238,244,210,.70);
  --c-rule:   rgba(238,244,210,.20);
  --c-trace:  rgba(238,244,210,.10);

  --c90: var(--c-ink);
  --c55: var(--c-body);
  --c45: var(--c-label);

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale.
     User-adjustable: multiplied by --type-scale (default 1), which the
     A-/A/A+ control sets via .font-size-small and .font-size-large on <html>.
     Values are in rem so browser-level font preferences also scale them. */
  --type-scale:     1;

  --size-micro:     calc(0.6875rem * var(--type-scale));   /* 11px */
  --size-meta:      calc(0.75rem   * var(--type-scale));   /* 12px */
  --size-small:     calc(0.875rem  * var(--type-scale));   /* 14px */
  --size-body:      calc(1.0625rem * var(--type-scale));   /* 17px */
  --size-sub:       calc(1.375rem  * var(--type-scale));   /* 22px */
  --size-subsect:   calc(1.375rem  * var(--type-scale));   /* 22px */
  --size-h3:        calc(1.75rem   * var(--type-scale));   /* 28px */
  --size-h2:        calc(2.125rem  * var(--type-scale));   /* 34px */
  --size-h1:        calc(2.875rem  * var(--type-scale));   /* 46px */

  --max-column:    580px;
  --max-container: 960px;
  --nav-height:    52px;

  --ease:     cubic-bezier(.2,.8,.2,1);
  --dur-fast: 150ms;
  --dur:      250ms;
}

/* RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--sov-navy);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; }

/* TYPOGRAPHY */
.display-title {
  font-family: var(--font-serif);
  font-size: var(--size-h1); font-weight: 300;
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--c-ink); margin-bottom: 20px;
}
.display-title .lift {
  font-style: italic;
  color: var(--sov-cream-warm);
  opacity: .92;
}
.subtitle {
  font-family: var(--font-serif);
  font-size: var(--size-sub); font-weight: 400;
  font-style: italic; line-height: 1.6;
  color: var(--c-ink);
  border-left: 1.5px solid rgba(200,191,176,.38);
  padding-left: 14px;
  margin-bottom: 40px;
  max-width: var(--max-column);
}
h2.sub-label, .sub-label, h3.sub-label {
  font-family: var(--font-serif);
  font-size: var(--size-subsect); font-weight: 400;
  color: var(--c-ink); margin: 36px 0 12px;
  letter-spacing: -.01em;
}
.prose {
  font-family: var(--font-sans);
  font-size: var(--size-body); font-weight: 300;
  line-height: 1.7; color: var(--c-body);
  margin-bottom: 20px; max-width: 620px;
}
.prose strong { font-weight: 500; color: var(--c-ink); }
.prose em { font-style: italic; }
.eyebrow, .meta-label {
  font-family: var(--font-sans);
  font-size: var(--size-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-label);
}
.pullquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--size-h3); font-weight: 300;
  line-height: 1.35; color: var(--c-ink);
  max-width: 640px; margin: 48px 0;
  border-left: 1.5px solid var(--sov-rule);
  padding-left: 20px;
}

/* LAYOUT */
.container { max-width: var(--max-container); margin: 0 auto; padding: 0 60px; }
.section-container { max-width: var(--max-container); margin: 0 auto; padding: 48px 60px 56px; position: relative; }
.rule { border: 0; border-top: 1px solid var(--c-rule); margin: 32px 0; }

/* NAV */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--sov-navy-deep);
  border-bottom: 1px solid var(--c-trace);
  display: flex; align-items: stretch;
  height: var(--nav-height);
}
.brand-tile {
  display: flex; align-items: center; gap: 10px; padding: 0 20px;
  border-right: 1px solid var(--c-trace);
  text-decoration: none;
}
.brand-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.brand-label {
  font-family: var(--font-serif); font-size: var(--size-small);
  font-style: italic; color: var(--c-body); letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .brand-label { display: none; }  /* Logo only on narrow screens */
  .brand-tile { padding: 0 14px; }
}
.tab-strip { display: flex; align-items: stretch; }
.tab {
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(210,208,200,.65);
  padding: 0 16px;
  display: flex; align-items: center;
  cursor: pointer;
  transition: color var(--dur-fast);
  border: none; border-bottom: 1.5px solid transparent;
  background: transparent; text-decoration: none;
}
.tab:hover { color: rgba(230,228,220,.90); }
.tab.active, .tab[aria-current="page"] {
  color: var(--sov-cream);
  border-bottom-color: rgba(200,191,176,.45);
}
.main { padding-top: var(--nav-height); min-height: 100vh; }

/* ABOUT DROPDOWN MENU (Option A) */
.tab-with-menu {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tab-has-menu {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(210,208,200,.65);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color var(--dur-fast);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
}
.tab-has-menu:hover { color: rgba(230,228,220,.90); }
.tab-has-menu.active,
.tab-has-menu[aria-current-section="true"] {
  color: var(--sov-cream);
  border-bottom-color: rgba(200,191,176,.45);
}
.tab-caret {
  font-size: 9px;
  line-height: 1;
  transition: transform var(--dur-fast);
  opacity: .7;
}
.tab-has-menu[aria-expanded="true"] .tab-caret {
  transform: rotate(180deg);
}
.tab-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--sov-navy-deep);
  border: 1px solid var(--c-trace);
  border-top: 0;
  min-width: 220px;
  padding: 4px 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.tab-menu[hidden] { display: none; }
.tab-menu-item {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(210,208,200,.70);
  padding: 12px 20px;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
  display: block;
}
.tab-menu-item:hover,
.tab-menu-item:focus-visible {
  background: rgba(255,255,255,.04);
  color: var(--sov-cream);
  outline: none;
}
.tab-menu-item[aria-current="page"] {
  color: var(--sov-cream);
}
@media (max-width: 640px) {
  .tab-menu {
    left: auto;
    right: 0;
    min-width: 180px;
  }
  .tab-menu-item { padding: 12px 16px; font-size: 11px; }
}

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--size-small); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 3px;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--sov-cream); color: var(--sov-navy); }
.btn-primary:hover { background: var(--sov-cream-warm); }
.btn-ghost {
  background: transparent; color: var(--c-ink);
  border-color: rgba(200,191,176,.45);
}
.btn-ghost:hover {
  background: rgba(238,244,210,.05);
  border-color: rgba(200,191,176,.70);
}

/* CALLOUT */
.callout {
  font-family: var(--font-sans); font-size: var(--size-body); font-weight: 300;
  line-height: 1.7; color: var(--c-body);
  border-left: 1.5px solid rgba(200,191,176,.38);
  padding-left: 14px;
  margin-bottom: 32px;
  font-style: italic;
}
.callout strong { font-style: normal; color: var(--c-ink); font-weight: 500; }

/* PRODUCT CARDS */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 40px 0 32px;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
@media (max-width: 860px) {
  .product-grid { grid-template-columns: 1fr; }
}
.product-card {
  display: flex; flex-direction: column;
  padding: 28px 28px 32px;
  border-right: 1px solid var(--c-trace);
  color: inherit; text-decoration: none;
  position: relative;
  transition: background var(--dur-fast);
  min-height: 280px;
}
.product-card:last-child { border-right: none; }
@media (max-width: 860px) {
  .product-card { border-right: none; border-bottom: 1px solid var(--c-trace); }
  .product-card:last-child { border-bottom: none; }
}
.product-card:hover { background: rgba(238,244,210,.025); }
.product-card .pc-eyebrow {
  font-family: var(--font-sans); font-size: var(--size-micro); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-label); margin-bottom: 16px;
}
.product-card .pc-title {
  font-family: var(--font-serif); font-size: calc(1.6250rem * var(--type-scale, 1)); font-weight: 400;
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--c-ink); margin-bottom: 10px;
}
.product-card .pc-title em { font-style: italic; color: var(--sov-cream-warm); }
.product-card .pc-desc {
  font-family: var(--font-sans); font-size: var(--size-small); font-weight: 300;
  line-height: 1.65; color: var(--c-body);
  flex: 1; margin-bottom: 18px;
}
.product-card .pc-cta {
  font-family: var(--font-sans); font-size: var(--size-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sov-cream);
  display: inline-flex; align-items: center; gap: 6px;
}
.product-card .pc-cta::after {
  content: '→';
  transition: transform var(--dur-fast);
}
.product-card:hover .pc-cta::after { transform: translateX(4px); }

/* STATUS PILL */
.status-pill {
  display: inline-block;
  font-family: var(--font-sans); font-size: calc(0.6250rem * var(--type-scale, 1)); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--c-rule);
  color: var(--c-label);
  background: transparent;
  margin-left: 8px;
  vertical-align: middle;
}
.status-pill.available {
  color: var(--sov-cream);
  border-color: rgba(200,191,176,.5);
}

/* EMAIL CAPTURE */
.capture {
  border: 1px solid var(--c-rule);
  padding: 32px 36px 36px;
  margin: 48px 0;
  background: rgba(238,244,210,.015);
}
.capture h2.sub-label, .capture h3.sub-label { margin-top: 0; }
.capture .capture-intro { max-width: none; margin-bottom: 24px; }
.capture-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 20px;
}
.capture-field label {
  font-family: var(--font-sans); font-size: var(--size-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-label);
}
.capture-field input[type="email"],
.capture-field input[type="text"] {
  font-family: var(--font-sans); font-size: var(--size-body); font-weight: 300;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-rule);
  padding: 10px 0 10px;
  width: 100%;
  max-width: 420px;
  transition: border-color var(--dur-fast);
}
.capture-field input[type="email"]:focus,
.capture-field input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--sov-cream);
}
.capture-field input::placeholder {
  color: rgba(238,244,210,.35);
}
.capture-interests {
  display: flex; flex-direction: column; gap: 12px;
  margin: 20px 0 24px;
  border: 0; padding: 0;
}
.capture-interests legend {
  font-family: var(--font-sans); font-size: var(--size-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-label);
  margin-bottom: 8px;
  padding: 0;
}
.capture-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-sans); font-size: var(--size-small); font-weight: 300;
  line-height: 1.5; color: var(--c-body);
  cursor: pointer;
  padding: 8px 0;
}
.capture-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--c-rule);
  background: transparent;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-fast);
}
.capture-check input[type="checkbox"]:checked {
  border-color: var(--sov-cream);
  background: var(--sov-cream);
}
.capture-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid var(--sov-navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.capture-check input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(200,191,176,.95);
  outline-offset: 3px;
}
.capture-check strong {
  color: var(--c-ink);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.capture-privacy {
  font-family: var(--font-sans); font-size: var(--size-meta); font-weight: 300;
  color: var(--c-label);
  margin-top: 16px;
  max-width: none;
}
.capture-privacy a { color: inherit; }

/* FOOTER */
.contact-footer, footer.contact-footer {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--c-trace);
  font-family: var(--font-sans); font-size: var(--size-meta);
  color: var(--c-label); line-height: 1.7;
}
.contact-footer a {
  color: var(--c-label);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contact-footer a:hover { color: var(--c-ink); }

/* LINKS */
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(200,191,176,.45);
  transition: text-decoration-color var(--dur-fast);
}
a:hover { text-decoration-color: currentColor; }

/* A11Y */
:focus-visible {
  outline: 2px solid rgba(200,191,176,.95);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  top: -100px; left: 8px; z-index: 200;
  background: var(--sov-cream); color: var(--sov-navy);
  font-family: var(--font-sans); font-size: var(--size-small); font-weight: 500;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 3px;
}
.skip-link:focus { top: 8px; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* TYPE-SCALE: driven by --type-scale custom property set on <html> by
   text-size.js. Default is 1 (no scaling). Range exposed through the
   UI is 1.0 to 3.0 in 0.1 steps.

   Heading dampener: body text scales at full --type-scale, but H1/H2
   scale at a gentler rate so that large settings don't produce
   unwieldy headings. The dampener preserves legibility at high scale
   while keeping layout composable.
   Formula used: effective heading scale = 1 + (type-scale - 1) * 0.5
   So at type-scale 3.0, H1 grows to 2.0x rather than 3.0x.
*/
html { --heading-scale-dampener: calc(1 + (var(--type-scale) - 1) * 0.5); }

/* Override the h1/h2 sizes to use the dampened scale */
h1, .display-title {
  font-size: calc(2.875rem * var(--heading-scale-dampener));
}
h2, .sub-label {
  font-size: calc(1.375rem * var(--heading-scale-dampener));
}

/* TEXT-SIZE CONTROL — single button with pop-over panel */
.text-size-control {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-left: auto;
  padding-right: 12px;
  border-left: 1px solid var(--c-trace);
}
.text-size-trigger {
  background: transparent;
  border: none;
  color: rgba(210, 208, 200, .70);
  font-family: var(--font-sans);
  /* Locked size so the control itself doesn't scale */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0 14px;
  cursor: pointer;
  transition: color var(--dur-fast);
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1.5px solid transparent;
  min-width: 44px;
  justify-content: center;
}
.text-size-trigger:hover { color: rgba(230, 228, 220, .95); }
.text-size-trigger[aria-expanded="true"] {
  color: var(--sov-cream);
  border-bottom-color: rgba(200, 191, 176, .45);
}
.text-size-trigger:focus-visible {
  outline: 2px solid rgba(200, 191, 176, .95);
  outline-offset: -2px;
  border-radius: 2px;
}
.text-size-indicator {
  font-variant-numeric: tabular-nums;
}
.text-size-caret {
  font-size: 9px;
  opacity: 0.7;
}

.text-size-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  min-width: 280px;
  max-width: 92vw;
  background: var(--sov-navy-deep);
  border: 1px solid rgba(200, 191, 176, .25);
  border-radius: 4px;
  padding: 20px 22px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  /* Panel content uses fixed sizes so users at very large scale can still read it */
  font-size: 14px;
}
.text-size-panel[hidden] { display: none; }
.text-size-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  color: var(--c-label);
}
.text-size-panel-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.text-size-display {
  font-size: 16px;
  color: var(--sov-cream);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.text-size-close {
  background: transparent;
  border: none;
  color: var(--c-label);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 8px;
}
.text-size-close:hover { color: var(--sov-cream); }
.text-size-close:focus-visible {
  outline: 2px solid rgba(200, 191, 176, .95);
  outline-offset: 2px;
  border-radius: 2px;
}

.text-size-slider-wrap {
  margin: 0 0 16px;
}
#text-size-slider {
  width: 100%;
  cursor: pointer;
  accent-color: var(--sov-gold);
}
#text-size-slider:focus-visible {
  outline: 2px solid rgba(200, 191, 176, .95);
  outline-offset: 4px;
  border-radius: 4px;
}
.text-size-scale-marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--c-label);
  margin-top: 4px;
}

.text-size-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.text-size-preset {
  background: transparent;
  border: 1px solid rgba(200, 191, 176, .25);
  color: var(--c-body);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 2px;
  transition: all var(--dur-fast);
}
.text-size-preset:hover {
  color: var(--sov-cream);
  border-color: rgba(200, 191, 176, .5);
}
.text-size-preset[aria-pressed="true"] {
  background: rgba(200, 191, 176, .12);
  color: var(--sov-cream);
  border-color: rgba(200, 191, 176, .6);
}
.text-size-preset:focus-visible {
  outline: 2px solid rgba(200, 191, 176, .95);
  outline-offset: 2px;
}

.text-size-reset {
  background: transparent;
  border: none;
  color: var(--c-label);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 0;
  cursor: pointer;
}
.text-size-reset:hover { color: var(--sov-cream); }
.text-size-reset:focus-visible {
  outline: 2px solid rgba(200, 191, 176, .95);
  outline-offset: 2px;
  border-radius: 2px;
}

.text-size-help {
  font-size: 11px;
  color: var(--c-label);
  margin: 10px 0 0;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .text-size-control { padding-right: 6px; }
  .text-size-trigger { min-width: 36px; padding: 0 8px; font-size: 13px; }
  .text-size-panel { min-width: 260px; right: 4px; padding: 16px 18px; }
}

/* Reduce-motion users: no transitions */
@media (prefers-reduced-motion: reduce) {
  .text-size-trigger,
  .text-size-preset,
  .text-size-close,
  .text-size-reset {
    transition: none;
  }
}

/* RESPONSIVE */
@media (max-width: 760px) {
  .section-container, .container { padding-left: 20px; padding-right: 20px; }
  .display-title { font-size: calc(2.1250rem * var(--type-scale, 1)); }
  .subtitle      { font-size: calc(1.1250rem * var(--type-scale, 1)); }
  .tab           { padding: 0 12px; font-size: 12px; }
  .product-card  { padding: 24px 20px; min-height: 0; }
  .capture       { padding: 24px 20px; }
}

/* ==========================================================================
   EXPANDABLE SECTION PATTERNS (added v1.2)

   Three families of expandable rows are used across the site:

     .section-row    — row pattern with +/− indicator on the right.
                       Used for legal, methodology, advisory, peerage tiers,
                       coordination tracks, contact reasons, etc.
                       The default pattern for "expandable list of sections."

     .who-block      — feature-header pattern with a 2.0rem heading and a
                       micro-tracked "Click to..." prompt below the heading,
                       no +/− indicator. Used once per page to wrap a major
                       feature section (audience map on reads / ops).

     .routes-block   — same visual treatment as .who-block, used for wrapping
                       a list of nested items (the three offerings on ops,
                       the three tiers on peerage, the three tracks on
                       coordination). When inside a .routes-block, individual
                       items don't need eyebrow numbering — the parent block
                       names the set.

   Whichever family is used, the JS toggle handler is identical and
   targets all three .section-trigger / .who-trigger / .routes-trigger.

   Pages that previously inlined any of these may continue to do so until
   their next edit, at which point the inlines should be removed. The rules
   below take over without conflict.
   ========================================================================== */

/* ===== .section-row — expandable row with +/− indicator ===== */
.section-row {
  padding: 28px 0;
  border-bottom: 1px solid var(--c-trace);
}
.section-row:first-of-type { border-top: 1px solid var(--c-trace); }
.section-row:last-of-type { border-bottom: 0; }

.section-trigger {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0 40px 0 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  position: relative;
}
.section-trigger:focus-visible {
  outline: 1px solid rgba(238, 244, 210, 0.6);
  outline-offset: 6px;
  border-radius: 2px;
}
.section-toggle-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: calc(1.375rem * var(--type-scale, 1));
  font-weight: 300;
  line-height: 1;
  color: var(--c-label);
  transition: color 0.2s ease;
}
.section-trigger:hover .section-toggle-indicator { color: var(--c-ink); }
.section-indicator-open,
.section-indicator-close { display: none; }
.section-trigger[aria-expanded="false"] .section-indicator-open { display: inline; }
.section-trigger[aria-expanded="true"] .section-indicator-close { display: inline; }

.section-content { margin-top: 6px; }
.section-content[hidden] { display: none; }
.section-trigger h2.sub-label,
.section-trigger h3.sub-label { margin: 0; }

/* ===== .who-block / .routes-block — feature-header expandable ===== */
.who-block,
.routes-block {
  margin-top: 48px;
  border-top: 1px solid var(--c-trace);
  padding-top: 32px;
}

.who-trigger,
.routes-trigger {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.who-trigger:focus-visible,
.routes-trigger:focus-visible {
  outline: 1px solid rgba(238, 244, 210, 0.6);
  outline-offset: 6px;
  border-radius: 2px;
}

.who-heading,
.routes-heading {
  font-family: var(--font-serif);
  font-size: calc(2rem * var(--type-scale, 1));
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.who-heading .lift,
.routes-heading .lift {
  font-style: italic;
  color: var(--c-ink);
}

.who-prompt,
.routes-prompt {
  font-family: var(--font-sans);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-label);
  margin: 0;
  transition: color 0.2s ease;
}
.who-trigger:hover .who-prompt,
.routes-trigger:hover .routes-prompt { color: var(--c-ink); }

.who-prompt-open,
.who-prompt-close,
.routes-prompt-open,
.routes-prompt-close { display: none; }
.who-trigger[aria-expanded="false"] .who-prompt-open { display: inline; }
.who-trigger[aria-expanded="true"] .who-prompt-close { display: inline; }
.routes-trigger[aria-expanded="false"] .routes-prompt-open { display: inline; }
.routes-trigger[aria-expanded="true"] .routes-prompt-close { display: inline; }

.who-content,
.routes-content { margin-top: 32px; }
.who-content[hidden],
.routes-content[hidden] { display: none; }

@media (max-width: 760px) {
  .who-heading,
  .routes-heading { font-size: calc(1.625rem * var(--type-scale, 1)); }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   ══════════════════════════════════════════════════════════════════ */

#nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(238,244,210,.85);
  -webkit-appearance: none;
  appearance: none;
}
#nav-hamburger:focus-visible {
  outline: 1px solid rgba(238,244,210,.5);
  outline-offset: 2px;
  border-radius: 2px;
}
#nav-hamburger svg {
  display: block;
  pointer-events: none;
}

@media (max-width: 768px) {
  #nav-hamburger {
    display: flex;
  }

  .tab-strip {
    display: none;
    position: absolute;
    top: var(--nav-height, 56px);
    left: 0;
    right: 0;
    flex-direction: column;
    background: #0d1329;
    border-bottom: 1px solid rgba(238,244,210,.08);
    padding: 8px 0 12px;
    z-index: 99;
  }

  .nav-open .tab-strip {
    display: flex;
  }

  .tab-strip .tab {
    padding: 13px 24px;
    border-bottom: none !important;
    border-left: 2px solid transparent;
    font-size: 13px;
    justify-content: flex-start;
    text-align: left;
  }

  .tab-strip .tab.active,
  .tab-strip .tab[aria-current="page"] {
    border-left-color: rgba(200,191,176,.5);
    border-bottom: none !important;
  }

  .container,
  .section-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .display-title {
    font-size: calc(2rem * var(--type-scale, 1));
  }
}

@media (max-width: 480px) {
  .container,
  .section-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .display-title {
    font-size: calc(1.75rem * var(--type-scale, 1));
  }

  .brand-label {
    display: none;
  }
}


/* ===== Shared Navigation ===== */

.brand-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.top-nav{
  height:64px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:#070b15;
  border-bottom:1px solid rgba(238,244,210,.14);
  z-index:1000;
}

.brand-tile{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}

.brand{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:20px;
  color:#eef4d2;
}

.nav-links{
  display:flex;
  gap:24px;
  align-items:center;
}

.nav-links a{
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(238,244,210,.72);
}

.nav-links a:hover{
  color:#eef4d2;
}

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:22px;
  height:1px;
  background:#eef4d2;
}

.skip-link{
  position:absolute;
  left:-9999px;
}

.skip-link:focus{
  left:12px;
  top:12px;
  z-index:2000;
  background:#eef4d2;
  color:#070b15;
  padding:10px 14px;
}

body{
  padding-top:64px !important;
}

@media(max-width:860px){

  .menu-toggle{
    display:flex;
  }

  .nav-links{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:#070b15;
    border-bottom:1px solid rgba(238,244,210,.14);
    padding:20px 24px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

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

/* ══════════════════════════════════════════════════════════════════
   HERO — cover-led grid (used by Trilogy / manual / author)
   ══════════════════════════════════════════════════════════════════ */

.trilogy-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
  margin: 0 0 56px;
}
.trilogy-cover {
  width: 100%;
  display: block;
  border: 1px solid var(--c-trace);
}
.trilogy-intro { max-width: 640px; }
.trilogy-intro .display-title { margin-bottom: 16px; }

@media (max-width: 640px) {
  .trilogy-hero { grid-template-columns: 1fr; gap: 32px; }
}


/* ══════════════════════════════════════════════════════════════════
   AUTHOR-PAGE PRIMITIVES (v1.3 backport)
   Backports the v1.3 primitives that the author page (and any future
   citation/testimonial-style page) needs. Calibrated to:
   - Issue 1: render .tag spans as visible bordered chips
   - Issue 2: 73px gap between citation rows (was 56px)
   - Issue 3: 113px breathing room before each .section--rule heading
   - Issue 4: testimonial type at body size (17px) instead of h3 (28px)
   ══════════════════════════════════════════════════════════════════ */

/* TAGS — wrap-flex chip wall.
   Without these rules the <span class="tag"> elements render as adjacent
   inline text and read as a comma-less run-on. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 56px;
}
.tag {
  padding: 8px 14px;
  border: 1px solid var(--c-trace);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: 300;
  color: var(--c-label);
  background: transparent;
  display: inline-block;
}

/* SECTION--RULE — top-bordered content section.
   Generous breathing room above each one (margin + padding both contribute,
   so successive sections feel like distinct chapters of the page rather
   than continuations). */
.section--rule {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--c-trace);
}
.section--rule > .eyebrow      { display: block; margin-bottom: 8px; }
.section--rule > .sub-label    { margin: 0 0 28px; }

/* CLAIM family — citation block (Selected Work, Press, etc.).
   Inter-claim gap is now 73px (36px above + 1px border + 36px below).
   The first claim drops its top border and most of its top padding so it
   docks cleanly under the .sub-label heading. */
.claim {
  padding: 36px 0;
  border-top: 1px solid var(--c-trace);
}
.claim:first-of-type {
  border-top: 0;
  padding-top: 8px;
}
.claim-title {
  font-family: var(--font-serif);
  font-size: calc(1.3125rem * var(--type-scale, 1));   /* 21px scaled */
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0 0 12px;
}
.source {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--c-label);
  line-height: 1.55;
  margin: 16px 0 0;
}
.source a { color: var(--c-body); }
.source a:hover { color: var(--c-ink); }

/* SUBNOTE — small italic muted caption (NDA disclaimer, footnote-style). */
.subnote {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: var(--c-label);
  margin-top: 20px;
  max-width: var(--max-column);
}

/* PULLQUOTE—TESTIMONIAL — restrained, body-sized quote.
   Overrides the base .pullquote font-size (28px) down to body (17px).
   This is the "significantly reduced" size the user asked for: quiet
   italic prose with a left rule, in keeping with the editorial restraint
   of the rest of the system. */
.pullquote.pullquote--testimonial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-body);                         /* 17px */
  line-height: 1.55;
  color: var(--c-ink);
  border-left: 1.5px solid rgba(200,191,176,.38);
  padding-left: 14px;
  max-width: 720px;
  margin: 0 0 8px;
}
.quote-source {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: 400;
  color: var(--c-label);
  line-height: 1.55;
  padding-left: 14px;            /* aligns with pullquote text */
  margin: 0 0 36px;
}

/* ══════════════════════════════════════════════════════════════════
   BOOK BUY BUTTON — canonical purchase CTA
   Used by books.html, manual.html, trilogy.html.
   Was originally inline in books.html; promoted to system-level so
   the same visual treatment is available everywhere a purchase CTA
   appears.
   ══════════════════════════════════════════════════════════════════ */
.book-buy-btn {
  display: block;
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: calc(0.6875rem * var(--type-scale, 1));
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-label);
  text-decoration: none;
  text-align: center;
  max-width: 280px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.book-buy-btn:hover {
  border-color: var(--c-ink);
  color: rgba(238,244,210,1);
}
.book-buy-btn:focus-visible {
  outline: 1px solid rgba(238,244,210,.6);
  outline-offset: 3px;
}
.book-buy-btn-primary {
  background: rgba(238,244,210,.05);
  border-color: var(--c-ink);
  color: rgba(238,244,210,1);
}