/* base.css — reset, typography, layout scaffolding, focus, prose, and the three surface primit… */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--midnight);
  color: var(--pearl);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
/* Static warm wash — the ground stays lit even when the canvas never starts. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  background: radial-gradient(52vw 40vw at 16% 8%, rgba(245,165,36,.09), transparent 68%), radial-gradient(46vw 38vw at 88% 62%, rgba(255,112,67,.06), transparent 70%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body::before {
    background: radial-gradient(52vw 40vw at 16% 8%, rgba(201,122,6,.07), transparent 68%), radial-gradient(46vw 38vw at 88% 62%, rgba(212,80,28,.05), transparent 70%);
  }
}
[data-theme="light"] body::before {
  background: radial-gradient(52vw 40vw at 16% 8%, rgba(201,122,6,.07), transparent 68%), radial-gradient(46vw 38vw at 88% 62%, rgba(212,80,28,.05), transparent 70%);
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; border-style: none; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.35em; }
li { margin: 0 0 var(--s-2); }
p { margin: 0 0 var(--s-4); }
hr { border: 0; height: 1px; background: var(--foil-line-soft); margin: var(--s-7) 0; }
/* --- Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  color: var(--pearl);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); line-height: var(--lh-snug); }
h5, h6 { font-size: 1rem; line-height: var(--lh-snug); }
strong, b { font-weight: 700; color: var(--pearl); }
small { font-size: var(--t-xs); }
/* --- Links */
a {
  color: var(--ink-peacock);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .22em;
  transition: color var(--d-fast) var(--ease-out), text-decoration-color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--ink-marigold); text-decoration-color: currentColor; }
/* --- Focus: peacock, never gold, so it is never read as a hover rim */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--peacock); outline-offset: 3px; border-radius: inherit; }
::selection { background: var(--foil-soft); color: var(--pearl); }
/* --- Type helpers */
/* the mono uppercase micro-label, shared by kickers, field labels, stat and table captions — one definition so the tracking never drifts apart */
.kicker, .field__label, .stat__label, .digit__k, .rail h3, .footer__inner h2, thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}
.kicker {
  display: inline-block;
  font-size: var(--t-kicker);
  color: var(--ink-marigold);
  margin: 0 0 var(--s-3);
}
.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--pearl-soft); max-width: 60ch; }
.meta { font-size: var(--t-xs); color: var(--pearl-dim); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* One foil-gradient headline per page. */
.foil-text {
  color: var(--foil);
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil-text { background: none; -webkit-text-fill-color: currentColor; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -200%;
  z-index: var(--z-progress);
  background: var(--panel);
  color: var(--pearl);
  border: var(--hairline-lit);
  border-radius: 0 0 var(--r-input) var(--r-input);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus-visible { translate: -50% 0; }
/* --- Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.section { position: relative; padding-block: var(--section); }
.section > .container { position: relative; z-index: var(--z-base); }
/* Alternating recessed band, jaali-screened. */
.section--band { background: var(--midnight-2); }
.section--band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image: linear-gradient(180deg, var(--lattice), transparent 78%);
  -webkit-mask: var(--jaali) 0 0/var(--jaali-size) repeat;
  mask: var(--jaali) 0 0/var(--jaali-size) repeat;
}
.stack-lg > * + * { margin-top: var(--s-6); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.section-head { max-width: 62ch; margin: 0 0 var(--s-8); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-bottom: var(--s-4); }
.section-head h2 + .lead { margin-top: 0; }
/* the fading gold rule that underlines a section title */
.section-head::after {
  content: "";
  display: block;
  width: 168px;
  height: 1px;
  margin-top: var(--s-5);
  background: var(--foil-line);
}
.section-head.center::after { margin-inline: auto; }
/* --- Surface primitive 1: the arch */
.arch { position: relative; border-radius: var(--arch); background: var(--panel); box-shadow: var(--lift-2); }
/* --- Surface primitive 2: the foil hairline */
.foil-rim {
  border: var(--hairline);
  transition: border-color var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-arch), box-shadow var(--d-base) var(--ease-out);
}
.foil-rim:hover, .foil-rim:focus-within { border-color: var(--foil); }
/* --- Surface primitive 3: the brass well (numerals cut into a plate) */
.well {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .12em;
  padding: .34em .62em;
  border-radius: var(--r-well);
  border: 1px solid var(--foil-faint);
  background: linear-gradient(180deg, rgba(230,193,109,.09), rgba(230,193,109,.02) 62%), var(--midnight-2);
  color: var(--foil);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -6px 12px -8px rgba(0,0,0,.5);
}
/* --- Prose (long-form legal + SEO copy) */
.prose { max-width: var(--measure); color: var(--pearl-soft); }
.prose > * { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-9); color: var(--pearl); }
.prose h3 { margin-top: var(--s-7); color: var(--pearl); }
.prose h4 { margin-top: var(--s-6); color: var(--pearl); }
.prose > :first-child { margin-top: 0; }
.prose li { color: var(--pearl-soft); }
.prose strong { color: var(--pearl); }
.prose a { font-weight: 600; }
.prose dt { font-weight: 700; color: var(--pearl); margin-top: var(--s-4); }
.prose dd { margin: 0 0 var(--s-3); }
/* Tables scroll inside their own rail; the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-input);
  border: var(--hairline);
  margin-bottom: var(--s-6);
}
table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--t-sm); }
caption {
  caption-side: bottom;
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--pearl-dim);
  text-align: left;
}
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--foil-faint); }
thead th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pearl);
  background: var(--midnight-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody td { color: var(--pearl-soft); }
blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  border-left: 2px solid var(--foil-soft);
  color: var(--pearl-soft);
  font-style: italic;
}
code, kbd {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--midnight-2);
  border: 1px solid var(--foil-faint);
  border-radius: 6px;
  padding: .12em .4em;
  color: var(--pearl);
}