/* The blog is static files outside Vite, so it cannot import src/styles/tokens.css.
   These are that file's values under the same names; tokens.test.ts holds them equal. */
:root {
  color-scheme: light dark;
  --relay-amber: #f5a623;
  --space-hair: 2px;
  --space-tight: 4px;
  --space-snug: 8px;
  --space-step: 12px;
  --space-block: 16px;
  --space-region: 24px;
  --radius-chip: 8px;
  --radius-surface: 16px;
  --tap-min: 44px;
  --type-large-title: 2.125rem;
  --type-title: 1.5rem;
  --type-heading: 1.25rem;
  --type-body: 1.0625rem;
  --type-subhead: 0.9375rem;
  --type-footnote: 0.8125rem;
  --ground: #eff0f4;
  --surface: #ffffff;
  --raised: #f4f5f8;
  --separator: rgba(60, 60, 67, 0.18);
  --hairline: rgba(60, 60, 67, 0.16);
  --text: #11131a;
  --text-secondary: #55585f;
  --text-tertiary: #6a6d75;
  --accent: #22262b;
  --accent-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000;
    --surface: #1c1c1e;
    --raised: #2c2c2e;
    --separator: rgba(84, 84, 88, 0.6);
    --hairline: rgba(235, 235, 245, 0.16);
    --text: #f2f3f5;
    --text-secondary: #a1a4ac;
    --text-tertiary: #90939b;
    --accent: #e6e9ed;
    --accent-ink: #1c1c1e;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A short page, like an index with few posts, still ends at the window's edge. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header.site, main, footer.site {
  width: 100%;
  max-width: calc(760px + var(--space-block) * 2);
  margin-inline: auto;
  padding-inline: var(--space-block);
}
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-step);
  padding-block: var(--space-step);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-snug);
  min-height: var(--tap-min);
  font-size: var(--type-heading);
  font-weight: 600;
  text-decoration: none;
}
.glyph { width: 28px; height: 28px; }
header.site nav {
  display: flex;
  align-items: center;
  gap: var(--space-region);
  font-size: var(--type-subhead);
}
header.site nav a:not(.sign-in) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-secondary);
  text-decoration: none;
}
header.site nav a:not(.sign-in):hover { color: var(--text); }
.sign-in, .clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-step);
  border: 1px solid var(--separator);
  border-radius: var(--radius-chip);
  font-weight: 500;
  text-decoration: none;
}
.clear {
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--type-subhead);
  cursor: pointer;
}
.sign-in:hover, .clear:hover { background: var(--raised); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main { flex: 1 0 auto; padding-block: var(--space-region) calc(var(--space-region) * 3); }
article, main > p, main > ul { max-width: 40rem; }
h1 {
  margin: var(--space-snug) 0 var(--space-block);
  font-size: var(--type-large-title);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h2 {
  margin: calc(var(--space-region) * 2) 0 var(--space-step);
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3 { margin: var(--space-region) 0 var(--space-tight); font-size: var(--type-heading); font-weight: 600; }
.crumbs, .meta, .lede { color: var(--text-secondary); font-size: var(--type-subhead); }
.crumbs { margin: 0; color: var(--text-tertiary); font-size: var(--type-footnote); font-weight: 500; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap-min); text-decoration: none; }
.meta { padding-bottom: var(--space-region); border-bottom: 1px solid var(--separator); font-variant-numeric: tabular-nums; }
.intro { font-size: var(--type-heading); line-height: 1.5; }
blockquote {
  margin: var(--space-region) 0;
  padding: var(--space-block);
  border-radius: var(--radius-surface);
  background: var(--surface);
  font-weight: 600;
}
blockquote p { margin: 0; }
ul, ol { padding-left: 1.25rem; }
li { margin: var(--space-tight) 0; }
.faq details { border-top: 1px solid var(--separator); padding: var(--space-block) 0; }
.faq details:last-child { border-bottom: 1px solid var(--separator); }
.faq summary { min-height: var(--tap-min); cursor: pointer; font-weight: 600; }
.cta {
  margin: calc(var(--space-region) * 2) 0 var(--space-region);
  padding: var(--space-region);
  border-radius: var(--radius-surface);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.cta p { margin: 0 0 var(--space-tight); color: var(--text-secondary); }
.cta .cta-title { color: var(--text); font-weight: 600; }
.cta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--space-step);
  padding-inline: var(--space-block);
  border-radius: var(--radius-chip);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.related ul { list-style: none; padding: 0; }

/* The index: search and topics, then compact rows grouped by month. */
.finder { display: flex; flex-direction: column; gap: var(--space-step); margin-top: var(--space-region); }
.finder input {
  width: 100%;
  min-height: var(--tap-min);
  padding-inline: var(--space-step);
  border: 1px solid var(--separator);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.finder input::placeholder { color: var(--text-tertiary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-snug); }
.chip {
  min-height: var(--tap-min);
  padding-inline: var(--space-step);
  border: 1px solid var(--separator);
  border-radius: var(--radius-chip);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--type-subhead);
  cursor: pointer;
}
.chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.results {
  margin: var(--space-step) 0 0;
  color: var(--text-tertiary);
  font-size: var(--type-footnote);
  font-variant-numeric: tabular-nums;
}
.listing { margin-top: calc(var(--space-region) * 2); }
.month + .month { margin-top: calc(var(--space-region) * 2); }
.month h2 { margin: 0 0 var(--space-step); font-size: var(--type-heading); font-weight: 600; }
ul.posts {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border-radius: var(--radius-surface);
  background: var(--surface);
}
ul.posts li { position: relative; margin: 0; padding: var(--space-block) var(--space-region); }
/* Hidden rows must not leave a divider on the first row still showing. */
ul.posts li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid var(--separator); }
ul.posts h3 { margin: 0 0 var(--space-tight); font-size: var(--type-body); font-weight: 600; line-height: 1.35; }
ul.posts h3 a { text-decoration: none; }
ul.posts h3 a::after { content: ''; position: absolute; inset: 0; }
ul.posts h3 a:focus-visible { outline: none; }
ul.posts li:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-surface); }
ul.posts p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--type-subhead);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
ul.posts .meta {
  display: block;
  margin-top: var(--space-snug);
  padding: 0;
  border: 0;
  color: var(--text-tertiary);
  font-size: var(--type-footnote);
}
.empty { padding: var(--space-region); border-radius: var(--radius-surface); background: var(--surface); }
.empty p { margin: 0 0 var(--space-step); color: var(--text-secondary); }
@media (hover: hover) {
  ul.posts li:hover { background: var(--raised); }
  .chip:hover:not([aria-pressed='true']) { background: var(--raised); color: var(--text); }
}

footer.site {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-step);
  padding-block: var(--space-region);
  border-top: 1px solid var(--separator);
  color: var(--text-tertiary);
  font-size: var(--type-footnote);
}
footer.site > div { display: flex; flex-wrap: wrap; gap: var(--space-step); }
.footer-wordmark { color: var(--text); font-weight: 600; }
.footer-links { gap: var(--space-region); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-secondary); }

/* Mirrors the landing page from 1200px: the frame widens to 1120px, the
   heading takes a sticky rail, and posts keep the 760px reading column. */
@media (min-width: 1200px) {
  .index :is(header.site, main, footer.site) { max-width: calc(1120px + var(--space-block) * 2); }
  .index main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 760px;
    column-gap: calc(var(--space-region) * 2);
    align-items: start;
  }
  .index-heading h1 { margin-top: 0; }
  .index .listing { grid-column: 2; margin-top: 0; }
}
/* The rail holds search and topics, so it only sticks where it fits. */
@media (min-width: 1200px) and (min-height: 760px) {
  .index-heading { position: sticky; top: calc(var(--space-region) * 2); }
}

@media (max-width: 520px) {
  header.site nav a:not(.sign-in) { display: none; }
  ul.posts li { padding-inline: var(--space-block); }
  .cta, .empty { padding: var(--space-block); }
}