/* ==========================================================================
   base.css — reset, typography, surfaces, layout primitives, accessibility
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  font-stretch: var(--wdth-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption { overflow-wrap: break-word; }
/* :where() = zero specificity, so a component's own padding always wins. */
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Surfaces ---------------------------------------------------------- */
/* A dark block re-points the semantic tokens; components inside follow.  */
.surface-dark {
  --color-bg: var(--dark-bg);
  --color-bg-alt: var(--dark-bg-alt);
  --color-surface: var(--dark-bg-alt);
  --color-text: var(--dark-text);
  --color-text-muted: var(--dark-text-muted);
  --color-heading: var(--dark-heading);
  --color-accent-text: var(--dark-accent-text);
  --color-line: var(--dark-line);
  --color-line-strong: var(--dark-line-strong);
  --color-drawing: var(--dark-drawing);
  --color-focus: var(--dark-focus);
  --color-positive: var(--c-olive-light);
  --display-accent: var(--dark-display-accent);
  color: var(--color-text);
  background-color: var(--color-bg);
}
.surface-alt { background-color: var(--color-bg-alt); }

/* ---- Typography -------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: var(--weight-heading);
  font-stretch: var(--wdth-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-stretch: var(--wdth-display); font-weight: var(--weight-display); line-height: var(--leading-tight); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }
p + p { margin-top: 1em; }
strong, b { font-weight: var(--weight-strong); }
small { font-size: var(--step--1); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* In-text links. :where() keeps this at the specificity of a plain
   `a:not([class])`, so any component rule (.site-footer__col a …) wins. */
:where(.prose, p, li, dd, td) a:not([class]) {
  color: var(--color-accent-text);
  text-decoration: underline;
  font-weight: var(--weight-medium);
}
:where(.prose, p, li, dd, td) a:not([class]):hover { text-decoration-thickness: 2px; }

/* Rhythm between a heading and the text that follows it. Element-only
   selectors, so component spacing rules always override them. */
:where(h1, h2) + :where(p, .lede, ul, ol) { margin-top: var(--space-s); }
:where(h3, h4) + :where(p, ul, ol) { margin-top: 0.4rem; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--step-3); margin-top: 1.6em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }

/* ---- Focus: visible on every surface, never removed -------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

/* ---- Accessibility helpers --------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.8em 1.2em;
  background: var(--c-paper);
  color: var(--c-chassis);
  font-weight: var(--weight-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: #0b57d0; }

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

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: var(--space-2xl); }
/* Two plain white sections in a row share one gap. Only white-after-white:
   after a dark or grey band the next section keeps its full top padding. */
.section:not(.surface-dark):not(.surface-alt) + .section:not(.surface-dark):not(.surface-alt):not(.section--flush) { padding-top: 0; }

.stack > * + * { margin-top: var(--stack-gap, var(--space-s)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-xs)); align-items: center; }

.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--space-l));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 17rem)), 1fr));
}

/* Media never overflows its frame */
.frame { position: relative; overflow: hidden; background: var(--color-bg-alt); }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }