/* =========================================================================
   Base — reset, element defaults, typography utilities
   Requires tokens.css.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--type-body-family);
  font-size: var(--fs-body-100);
  font-weight: var(--type-body-weight);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 2px;
}

/* Headings default to the display serif */
h1, h2, h3, h4 {
  font-family: var(--type-headline-family);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-lh);
  color: var(--color-text);
}

/* Links ------------------------------------------------------------------- */
a { color: inherit; }

/* In-body (editorial) link: blue, underlined, black on hover */
.prose a,
.link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
  transition: color var(--dur-fast) var(--ease-standard);
}
.prose a:hover, .link:hover { color: var(--color-link-hover); }

/* Quiet link: inherits ink color, underlined (bylines, footer) */
.link-quiet {
  color: var(--color-link-quiet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1.68px;
}
.link-quiet:hover { text-decoration-thickness: 2px; }

/* Prose (article body rhythm) --------------------------------------------- */
.prose > * + * { margin-top: var(--space-16); }
.prose p {
  font-size: var(--fs-body-100);
  line-height: var(--lh-body);
}
.prose h2 {
  font-size: var(--fs-title-200);
  margin-top: var(--space-48);
  margin-bottom: var(--space-16);
}
.prose h3 {
  font-size: var(--fs-title-100);
  margin-top: var(--space-32);
}
.prose ul, .prose ol { padding-left: var(--space-24); }
.prose li + li { margin-top: var(--space-8); }
.prose strong { font-weight: var(--fw-bold); }

/* Typography utilities (mirror the reference's named text styles) --------- */
.text-headline-400 { font: var(--type-headline-weight) var(--fs-headline-400)/var(--lh-120) var(--font-display); }
.text-headline-300 { font: var(--type-headline-weight) var(--fs-headline-300)/var(--lh-120) var(--font-display); }
.text-headline-200 { font: var(--type-headline-weight) var(--fs-headline-200)/var(--lh-120) var(--font-display); }
.text-headline-100 { font: var(--type-headline-weight) var(--fs-headline-100)/var(--lh-120) var(--font-display); }

.text-title-300 { font: var(--type-title-weight) var(--fs-title-300)/var(--lh-120) var(--font-display); }
.text-title-200 { font: var(--type-title-weight) var(--fs-title-200)/var(--lh-120) var(--font-display); }
.text-title-100 { font: var(--type-title-weight) var(--fs-title-100)/var(--lh-120) var(--font-display); }
.text-title-50  { font: var(--fw-bold) var(--fs-title-50)/var(--lh-130) var(--font-display); }

.text-body-200 { font: var(--fw-regular) var(--fs-body-200)/var(--lh-150) var(--font-sans); }
.text-body-100 { font: var(--fw-regular) var(--fs-body-100)/var(--lh-body) var(--font-sans); }

.text-utility-300 { font: var(--fw-regular) var(--fs-utility-300)/var(--lh-140) var(--font-sans); }
.text-utility-200 { font: var(--fw-regular) var(--fs-utility-200)/var(--lh-130) var(--font-sans); }
.text-utility-100 { font: var(--fw-regular) var(--fs-utility-100)/var(--lh-130) var(--font-sans); }

.text-label-300 { font: var(--fw-bold) var(--fs-label-300)/var(--lh-140) var(--font-sans); letter-spacing: var(--ls-label);    text-transform: uppercase; }
.text-label-200 { font: var(--fw-bold) var(--fs-label-200)/var(--lh-140) var(--font-sans); letter-spacing: var(--ls-label-sm); text-transform: uppercase; }
.text-label-100 { font: var(--fw-bold) var(--fs-label-100)/var(--lh-140) var(--font-sans); letter-spacing: var(--ls-label-sm); text-transform: uppercase; }

.is-prominent { font-weight: var(--fw-bold); }
.text-secondary { color: var(--color-text-secondary); }

/* Layout primitives ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--w-container) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.container--article {
  max-width: calc(var(--w-article) + 2 * var(--page-gutter));
}
.container--content {
  max-width: calc(var(--w-content) + 2 * var(--page-gutter));
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}