:root {
  
  --frame: 1320px;          
  --prose: 1120px;          
  --measure: 38rem;         
  --pad: clamp(1.75rem, 11.5vw, 3.75rem);   

  
  --band-y: clamp(4rem, 7.2vw, 6.5rem);  
  --gap-head-body: 1.5rem;  
  --gap-body-cta: 3.5rem;   
  --header-h: 3.5rem;       

  
  --bg: #ffffff;
  --bg-cool: #f4f6f7;
  --bg-warm: #faf8f3;
  --bg-dark: #131c28;

  
  --ink: #1e242c;           
  --ink-inv: #ffffff;       

  
  --accent: #7a5c1a;        
  --accent-inv: #d0ab52;    
  --brandbar: #8a6a1f;

  
  --rule: #d9dcdf;
  --rule-strong: #b9bec3;
  --rule-inv: #3a4453;

  
  --fig-faint: #c3c8cc;
  --fig-dot: #8d97a1;     
  --fig-rule: #b9bec3;
  --fig-line: #1e242c;

  
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.375rem, 5.6vw, 4rem);    
  --lh-display: 1.125;
  --fs-h2: clamp(1.625rem, 3.6vw, 3rem);         
  --lh-h2: 1.2;
  --fs-h3: 1.3125rem;                            
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem);  
  --fs-body: 1rem;                               
  --fs-small: 0.875rem;                          
  --fs-micro: 0.8125rem;                         
  --fs-stat: clamp(3.75rem, 5.4vw, 4.5rem);      

  --focus: #8a6a1f;
}

@media (min-width: 60em) {
  :root { --header-h: 6.25rem; }
}

@media (max-width: 59.99em) {
  .display, .h2 { font-weight: 400; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-menu-open], html[data-menu-open] body { overflow: hidden; }
:target { scroll-margin-top: 7.5rem; }
[id] { scroll-margin-top: 7.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
::selection { background: #efe4c8; color: var(--ink); }

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.band-dark :focus-visible { outline-color: var(--accent-inv); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--ink-inv);
  padding: 0.75rem 1.25rem; font-size: var(--fs-small);
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.frame { max-width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
.prose { max-width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
.prose > .display, .prose > .h2 { max-width: 22ch; }
.prose > .lead, .prose > .body, .prose > p:not(.pullquote), .prose > .small { max-width: var(--measure); }

.band { padding-block: var(--band-y); }
.band-cool { background: var(--bg-cool); }
.band-warm { background: var(--bg-warm); }
.band-dark {
  background: var(--bg-dark);
  color: var(--ink-inv);
  --accent: #d0ab52;
  --ink: #ffffff;
  --rule: var(--rule-inv);
  --fig-faint: #6e7f92;   
  --fig-dot: #79879a;
  --fig-rule: #6b7889;
  --ink-2: #dce1e7;       
  --ink-3: #bfc7d1;       
  --fig-line: #ffffff;
}
.site-footer {
  --accent: #d0ab52;
  --ink: #ffffff;
  --ink-2: #dce1e7;
  --ink-3: #bfc7d1;
  --rule: var(--rule-inv);
}

.band-dark .display, .band-dark .h2 { font-weight: 400; }
.band-dark .lead, .band-dark .body, .band-dark p, .band-dark dd, .band-dark li { color: var(--ink-2); }
.band-dark .display, .band-dark .h2, .band-dark .h3, .band-dark dt { color: var(--ink-inv); }
.band-dark .disclosure, .band-dark .small, .band-dark .figcaption, .band-dark .table-note { color: var(--ink-3); }

.measure { max-width: var(--measure); }

.display {
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.016em;
  word-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.013em;
  text-wrap: pretty;
}
.h3 {
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.45;
}
.lead {
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.body { font-size: var(--fs-body); line-height: 1.6; }
.small { font-size: var(--fs-small); line-height: 1.45; }

.eyebrow {
  display: block;
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: 1.55;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.accent { color: var(--accent); }
.band-dark .accent { color: var(--accent-inv); }

.rule { height: 1px; background: var(--rule); border: 0; }

.link {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding-block: 0.375rem;
  border-bottom: 1px solid transparent;
}
.link:hover { border-bottom-color: currentColor; }
.link::after { content: " \2192"; }
.band-dark .link { color: var(--accent-inv); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;                 
  padding: 0 2.625rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--ink-inv);
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }

.band-dark .btn {
  background: var(--ink-inv); border-color: var(--ink-inv); color: var(--bg-dark);
}
.band-dark .btn:hover { background: var(--accent-inv); border-color: var(--accent-inv); color: var(--bg-dark); }
.band-dark .btn-ghost { background: transparent; color: var(--ink-inv); border-color: var(--ink-inv); }
.band-dark .btn-ghost:hover { background: var(--ink-inv); color: var(--bg-dark); }

.btn-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.btn-pair .btn { flex: 0 0 auto; }

.btn-pair.matched { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 30rem; }
@media (min-width: 30em) { .btn-pair.matched { grid-template-columns: 1fr 1fr; } }
.btn-pair.matched .btn { padding-inline: 1rem; }

.figure { margin: 0; }
.fig-svg { width: 100%; height: auto; }
.fig-lab { font: 400 13px/1 var(--sans); fill: var(--ink); }
.fig-val { font: 300 22px/1 var(--sans); fill: var(--ink); letter-spacing: -0.01em; }
.band-dark .fig-lab, .band-dark .fig-val { fill: var(--ink-inv); }

.figcaption {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: 46rem;
}
.band-dark .figcaption { border-top-color: var(--rule-inv); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .btn, .link { display: none; }
  body { color: #000; }
}