/* ═══════════ STRIDETOBER — BASE ═══════════
   Reset, typography, layout primitives, focus, utilities. Spec: PLAN §3.3–§3.5. */

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

html {
  overflow-x: clip;                       /* fixed decorative layers must never widen the page */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  /* no scroll-behavior:smooth — it strands route changes mid-page (PLAN §4.4 M3) */
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-synthesis: style;                  /* never fake a bold: Fraunces ships at 600 only */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.locked { overflow: hidden; }
#view { overflow-x: clip; }   /* a settling card's −0.4° tilt must never poke past the screen edge */

/* paper grain: an image tile, not a live filter */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img, svg, canvas { display: block; max-width: 100%; }
svg { fill: currentColor; }                /* sprite symbols inherit the element's color */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -.01em;
  line-height: 1.04;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

main#view {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 60svh;
  padding-bottom: var(--s-7);
}
main#view:focus { outline: none; }

.icon { width: 24px; height: 24px; flex: none; fill: currentColor; }
.icon-stroke { fill: none; stroke: currentColor; }

.kicker {
  display: block;
  color: var(--ink-2);
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.num { font-variant-numeric: tabular-nums; }

.hand {
  font-family: var(--font-hand);
  font-weight: 600;
}

noscript p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 96px auto;
  padding: 0 16px;
  text-align: center;
}