/* Hallmark base: token styles, immediate focus, mobile containment. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-body); line-height: var(--leading-body); font-synthesis: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: -.025em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0; max-width: 65ch; }
a { color: var(--color-ink); text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; }
button, [role='tab'], nav a { white-space: nowrap; }
button { touch-action: manipulation; }
:focus-visible, .control[data-ui-state='focus-visible'] { outline: var(--rule-focus) solid var(--color-focus); outline-offset: var(--rule-fine); }
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
code, pre { font-family: var(--font-mono); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
table, output, .tabular { font-variant-numeric: tabular-nums; }
.image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: var(--dur-reduced) !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-property: opacity !important; transition-duration: var(--dur-reduced) !important; }
}

.page { width: min(100%, var(--size-content)); margin-inline: auto; padding: var(--space-2xl) var(--space-md); }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.stack > * { max-width: 100%; min-width: 0; }
@media (min-width: 40rem) { .page { padding-inline: var(--space-xl); } }