/* PostData — base element layer (replaces Pico)
   Styles plain HTML once. No forms, no tables on this site, so neither is
   covered. */

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

html {
  font-size: 16px;              /* fixed root, never stepped by viewport */
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--c-border-strong) var(--c-bg);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fw-regular) var(--fs-md) / var(--lh-body) var(--font-sans);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* Flow: no top margins anywhere; every element owns its space below. */
h1, h2, h3, h4, h5, h6, p, ul, ol, pre, figure, blockquote, hgroup, details {
  margin: 0 0 var(--sp-6);
}
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, figure, hgroup, details):last-child {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--c-text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
h5 { font-size: var(--fs-md);  line-height: var(--lh-snug); }

/* h6 is the site's overline/eyebrow — mono, uppercase, muted. */
h6 {
  font: var(--fw-medium) var(--fs-2xs) / 1 var(--font-mono);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}

/* hgroup: heading + one-line deck, tightly coupled. */
hgroup { display: flex; flex-direction: column; gap: var(--sp-3); }
hgroup > * { margin: 0; }
hgroup > p { color: var(--c-text-dim); font-size: var(--fs-lg); max-width: var(--prose-max); }

p { max-width: var(--prose-max); }
p.lead { font-size: var(--fs-lg); color: var(--c-text-dim); }

small { font-size: var(--fs-xs); color: var(--c-muted); }
strong { font-weight: var(--fw-semi); color: var(--c-text); }
em { font-style: italic; }

mark {
  background: var(--c-accent-subtle);
  color: var(--c-accent-hover);
  border-radius: var(--r-xs);
  padding: 0 0.2em;
}

hr {
  border: 0;
  border-top: var(--bw) solid var(--c-border);
  margin: var(--sp-8) 0;
}

/* ---------- Links ---------- */
a {
  color: var(--c-accent-dim);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--c-accent-dim) 40%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  border-radius: var(--r-xs);
  transition: color var(--dur-2) var(--ease),
              text-decoration-color var(--dur-2) var(--ease);
}
a:hover { color: var(--c-accent-hover); text-decoration-color: currentColor; }
a:active { color: var(--c-accent-active); }

/* ---------- Focus: one ring, everywhere ---------- */
:where(a, button, summary, [tabindex], [role="button"]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Lists ---------- */
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--sp-3); }
li::marker { color: var(--c-faint); }
ul ul, ol ol, ul ol, ol ul { margin: var(--sp-3) 0 0; }

/* Feature bullets: checkmark list. `<ul class="checks">` */
ul.checks {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
ul.checks > li { margin: 0; padding-left: 1.65em; position: relative; }
ul.checks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.68em;
  height: 0.38em;
  border: 0 solid var(--c-text-dim);
  border-width: 0 0 var(--bw-thick) var(--bw-thick);
  rotate: -45deg;
}

/* ---------- Code ---------- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Inline code: a chip, not a highlight. */
:not(pre) > code {
  font-size: 0.875em;
  background: var(--c-raised);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 0.1em 0.34em;
  color: var(--c-text);
  word-break: break-word;
}

/* Bare <pre> — the .code component wraps this for anything user-facing. */
pre {
  font-size: var(--fs-sm);
  line-height: var(--lh-code);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--syn-text);
  padding: var(--sp-5) var(--sp-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  tab-size: 2;
}
pre > code { background: none; border: 0; padding: 0; font-size: inherit; }

kbd {
  font-size: var(--fs-2xs);
  background: var(--c-overlay);
  border: var(--bw) solid var(--c-border-strong);
  border-bottom-width: var(--bw-thick);
  border-radius: var(--r-sm);
  padding: 0.15em 0.4em;
  color: var(--c-text-dim);
}

/* Scrollbars inside code blocks stay thin and dark. */
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--r-pill);
}

/* ---------- Sections & articles ---------- */
section { margin-bottom: var(--sp-10); }
section:last-child { margin-bottom: 0; }

article {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
}

/* ---------- Disclosure ---------- */
details {
  border-bottom: var(--bw) solid var(--c-border);
  margin-bottom: 0;
}
summary {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--tap);
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-weight: var(--fw-medium);
  color: var(--c-text);
  list-style: none;
  transition: color var(--dur-2) var(--ease);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 7px;
  height: 7px;
  border: 0 solid var(--c-faint);
  border-width: 0 var(--bw-thick) var(--bw-thick) 0;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease);
}
summary:hover { color: var(--c-accent-dim); }
summary:hover::after { border-color: var(--c-accent); }
details[open] > summary::after { rotate: -135deg; translate: 0 2px; }
details > :not(summary) {
  color: var(--c-text-dim);
  padding-bottom: var(--sp-6);
  max-width: var(--prose-max);
}

/* ---------- Page container ---------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1360px; }
.container--prose { max-width: calc(var(--prose-max) + var(--gutter) * 2); }

/* ---------- Utilities: the only four ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: var(--num-feat); }
.muted { color: var(--c-muted); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}