/* ==========================================================================
   Base — reset, document rhythm, typography primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* `clip` contains the off-canvas drawer without turning the root into a
     scroll container, which would break position: fixed. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); font-weight: 800; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-display); font-weight: 800; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-8) 0; }

strong, b { font-weight: 600; }

::selection { background: var(--g-100); color: var(--g-900); }

:focus-visible {
  outline: 3px solid var(--g-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--g-800); color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600;
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.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; border: 0;
}

/* ---- shared type helpers ---------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--g-600);
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--g-500); border-radius: 2px; flex: none;
}
.eyebrow.on-deep { color: var(--g-300); }
.eyebrow.on-deep::before { background: var(--gold); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 62ch;
}
.lead.on-deep { color: var(--on-deep-muted); }

.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-display); font-weight: 800; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: var(--fs-sm); }
.measure { max-width: var(--container-text); }
.center { text-align: center; margin-inline: auto; }

.rule-gold { width: 54px; height: 3px; background: var(--gold); border-radius: 3px; margin: var(--s-5) 0; }
.center .rule-gold { margin-inline: auto; }

/* Photographs are licensed work. These rules stop the two ways a picture
   leaves a page by accident - dragging it to the desktop, and the iOS
   press-and-hold "Save Image" sheet. They are a deterrent, not protection:
   anything the browser has rendered has already been downloaded, and remains
   reachable through devtools, the network tab, or a screenshot. Real
   protection is a visible watermark or not publishing the full-resolution
   file, not a script. */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}