/* base — reset, typography, links, focus, prose (docs/DESIGN.md §3, §11). */

*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html {
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--bg); color:var(--fg);
  scroll-behavior:smooth; scroll-padding-top:var(--nav-h);
  hanging-punctuation:first last;
}
body {
  min-height:100dvh;
  font-family:var(--font-sans); font-size:var(--t-body); line-height:1.6; font-weight:400;
  color:var(--fg-2); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-kerning:normal;
  overflow-x:clip;
}
img, video, svg, picture { display:block; max-width:100%; }
img, video { height:auto; }
input, button, textarea, select { font:inherit; color:inherit; letter-spacing:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
hr { border:0; border-top:1px solid var(--line); }
[hidden] { display:none !important; }
:where(ul, ol) { padding-left:1.25em; }
:where(ul[class], ol[class]) { list-style:none; padding:0; }
table { border-collapse:collapse; width:100%; }
address { font-style:normal; }
summary { cursor:pointer; }
dialog { color:inherit; border:0; padding:0; max-width:none; max-height:none; }
dialog::backdrop { background:var(--scrim); }

/* ---- Headings & type scale --------------------------------------------------------------- */
h1, h2, h3, h4, .t-display-xl, .t-display-l, .t-h2, .t-h3 {
  font-family:var(--font-sans); color:var(--fg); font-weight:600; text-wrap:balance; overflow-wrap:anywhere;
}
h1, .t-display-l { font-size:var(--t-display-l); line-height:.98; letter-spacing:-.02em; }
.t-display-xl    { font-size:var(--t-display-xl); line-height:.92; letter-spacing:-.02em; }
h2, .t-h2        { font-size:var(--t-h2); line-height:1.05; letter-spacing:-.01em; }
h3, .t-h3        { font-size:var(--t-h3); line-height:1.15; font-weight:700; letter-spacing:0; }
h4               { font-size:var(--t-lead); line-height:1.3; }
.t-lead  { font-size:var(--t-lead); line-height:1.4; font-weight:400; max-width:var(--measure-lead); text-wrap:pretty; }
.t-body  { font-size:var(--t-body); line-height:1.6; font-weight:400; }
.t-small { font-size:var(--t-small); line-height:1.5; }
.t-numeral { font-family:var(--font-sans); font-size:var(--t-numeral); font-weight:400; line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--fg-4); }
.eyebrow, .t-eyebrow {
  font-family:var(--font-sans); font-size:var(--t-eyebrow); font-weight:600; line-height:1.4;
  text-transform:uppercase; letter-spacing:.18em; color:var(--fg-3);
}
.t-meta { font-size:var(--t-small); color:var(--fg-3); }
.num, .tabular { font-variant-numeric:tabular-nums; }
.name { font-weight:600; letter-spacing:.02em; text-transform:none; }  /* proper nouns set as printed */
.measure { max-width:var(--measure); }
.measure-lead { max-width:var(--measure-lead); }
.balance { text-wrap:balance; }
.pretty { text-wrap:pretty; }
.muted { color:var(--fg-3); }
.fg { color:var(--fg); }

/* The accent word. Upright, same weight, in var(--mark) — the colour carries the emphasis on its
   own. A coloured italic inside a sans headline is the most templated pairing of the moment, so we
   don't use one. Only accent() produces this. */
.accent, em.accent, .italic {
  font-family:inherit; font-style:normal; font-weight:inherit; font-size:inherit;
  color:var(--mark); letter-spacing:inherit;
}
.w { display:inline-block; }                    /* headline word span (see accent() helper) */
.w.accent { display:inline-block; }

/* ---- Links ---------------------------------------------------------------------------------- */
a { color:inherit; text-decoration:none; }
:where(p, li, dd, figcaption, .prose) a:not([class]),
.link {
  color:var(--mark);
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat; background-size:100% 1px; background-position:left 100%;
  transition:background-size var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
:where(p, li, dd, figcaption, .prose) a:not([class]):hover, .link:hover { background-size:0 1px; background-position:right 100%; }
/* underline that enters from the left and exits right */
.ul { background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-size:0 1px; background-position:right 100%; transition:background-size var(--d-hover) var(--ease-out); }
.ul:hover, .ul:focus-visible, a:hover > .ul, a:focus-visible > .ul, button:hover > .ul { background-size:100% 1px; background-position:left 100%; }

/* ---- Selection, focus ------------------------------------------------------------------------ */
::selection { background:var(--mark); color:var(--bg); }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; border-radius:0; }
.is-melting :focus-visible, .sentinel :focus-visible { outline-color:currentColor; }

/* ---- Utilities ------------------------------------------------------------------------------- */
.visually-hidden, .sr-only {
  position:absolute !important; 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;
}
.skip-link {
  position:fixed; left:var(--margin); top:-100%; z-index:calc(var(--z-gate) + 1);
  padding:.75rem 1rem; background:var(--fg); color:var(--bg);
  font-size:var(--t-button); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus { top:1rem; }
.flow > * + * { margin-block-start:var(--flow, 1.25em); }
.stack > * + * { margin-block-start:var(--stack, 1.5rem); }
.stack--tight { --stack:.75rem; }
.stack--loose { --stack:var(--block); }
.mt-block { margin-block-start:var(--block); }
.mb-block { margin-block-end:var(--block); }
.mt-gap { margin-block-start:var(--gap); }
.mb-gap { margin-block-end:var(--gap); }
.text-right { text-align:right; }
.center { text-align:center; }
.nowrap { white-space:nowrap; }
.arrow::after { content:"\00a0→"; }
.arrow-down::after { content:"\00a0↓"; }
.arrow-back::before { content:"←\00a0"; }

/* ---- Prose (journal articles, legal, letters) ------------------------------------------------ */
.prose { max-width:var(--measure); color:var(--fg-2); font-size:var(--t-body); line-height:1.6; text-wrap:pretty; }
.prose > * + * { margin-block-start:1.25em; }
.prose h2 { font-size:var(--t-h3); font-weight:700; margin-block-start:2.5em; }
.prose h3 { font-size:var(--t-lead); font-weight:600; line-height:1.3; margin-block-start:2em; }
.prose h2 + *, .prose h3 + * { margin-block-start:.75em; }
.prose p.lead, .prose .t-lead { font-size:var(--t-lead); line-height:1.4; }
.prose blockquote { border-left:1px solid var(--line); padding-left:var(--gap); font-size:var(--t-lead); line-height:1.4; color:var(--fg); margin-inline:0; }
.prose blockquote p { font-family:var(--font-italic); font-style:italic; font-variation-settings:"opsz" 24; }
.prose ul, .prose ol { padding-left:1.1em; }
.prose li + li { margin-block-start:.35em; }
.prose li::marker { color:var(--fg-3); }
.prose figure { margin-block:2em; }
.prose figcaption, .caption { font-size:var(--t-small); color:var(--fg-3); margin-block-start:.75rem; }
.prose strong { font-weight:400; color:var(--fg); }          /* no bold body; emphasis is the italic */
.prose em { font-family:var(--font-italic); font-style:italic; font-size:1.04em; color:var(--mark); font-variation-settings:"opsz" 18; }
.prose hr { margin-block:2.5em; }
.prose table th, .prose table td { text-align:left; padding:.6em 0; border-bottom:1px solid var(--line); vertical-align:top; }
.prose table th { font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }

/* Drop cap: initial-letter in Newsreader Italic, floated fallback where unsupported. */
.dropcap::first-letter, .prose--dropcap > p:first-of-type::first-letter {
  font-family:var(--font-italic); font-style:italic; font-weight:400; color:var(--mark);
  -webkit-initial-letter:3; initial-letter:3; margin-right:.12em; font-variation-settings:"opsz" 72;
}
@supports not (initial-letter: 2) {
  .dropcap::first-letter, .prose--dropcap > p:first-of-type::first-letter { float:left; font-size:3.2em; line-height:.8; padding-top:.1em; margin-right:.15em; }
}

/* ---- Reduced-motion baseline. html[data-still] is the server-rendered "Still" switch. --------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:200ms !important; scroll-behavior:auto !important; }
}
html[data-still] { scroll-behavior:auto; }
html[data-still] *, html[data-still] *::before, html[data-still] *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:200ms !important; }