/* Base: reset, modes, type roles, layout. Token names only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* mode variables: dark is the default */
  --canvas: var(--ink-900);
  --text: var(--bone);
  --text-muted: var(--bone-muted);
  --text-faint: var(--bone-faint);
  --hairline: var(--line);
  --accent: var(--signal);
  --serif-weight: var(--weight-serif-dark);
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: "ss01" on, "cv11" on;
}
.paper {
  --canvas: var(--paper);
  --text: var(--ink-text);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --hairline: var(--rule);
  --accent: var(--deep);
  --serif-weight: var(--weight-serif-paper);
}
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Type roles */
h1, .display {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 15ch;
}
h2 {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}
h3 {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--text-muted); max-width: 52ch; }
.muted { color: var(--text-muted); }
.label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.label--accent { color: var(--accent); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-4); }

/* Links and focus */
a { color: inherit; }
p a, .prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
p a:hover, .prose a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--accent); color: var(--ink-900);
  padding: var(--space-2) var(--space-4); z-index: 10; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* Layout */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-block: var(--section-y); border-top: 1px solid var(--hairline); }
.rail-grid { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--space-6); }
@media (max-width: 860px) {
  .rail-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}