/* Base: reset, document, typography, layout primitives, accessibility. */

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
/* ensure the hidden attribute always wins, even over components that set display */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video { display:block; max-width:100%; height:auto; }
a { color:var(--indigo-ink); text-decoration:none; }
a:hover { color:var(--indigo-hover); }
:where(a,button,input,select,textarea):focus-visible {
  outline:3px solid var(--ring); outline-offset:2px; border-radius:4px;
}

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
h1 { font-size:var(--step-4); }
h2 { font-size:var(--step-3); }
h3 { font-size:var(--step-1); letter-spacing:-.01em; }
p { max-width:var(--measure); }

/* layout primitives */
.container { width:min(100% - 2.4rem, var(--container)); margin-inline:auto; }
.container-wide { width:min(100% - 2rem, 1360px); margin-inline:auto; }
.section { padding-block:var(--pad-section); }
.stack > * + * { margin-top:1rem; }
.cluster { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.grid { display:grid; gap:var(--gap); }

/* the recurring signature: a mono eyebrow preceded by a small interictal spike glyph.
   Encodes a real signal event marker rather than a decorative number. */
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:var(--step--1); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before {
  content:""; width:26px; height:12px; flex:none;
  background:currentColor;
  -webkit-mask:var(--spike-mask) center/contain no-repeat; mask:var(--spike-mask) center/contain no-repeat;
  color:var(--focus);
}
:root {
  /* a tiny flat-then-spike path used as the eyebrow glyph mask */
  --spike-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 8 H9 L11 8 L12.5 1 L14 11 L15.5 8 H26' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-head { margin-bottom:clamp(1.6rem,1rem + 2vw,2.6rem); }
.page-head h1 { font-size:var(--step-3); margin-top:.4rem; }
.page-head .lede { margin-top:.7rem; }

.lede { font-size:var(--step-1); line-height:1.5; color:var(--muted); max-width:60ch; }
.muted { color:var(--muted); }
.mono { font-family:var(--font-mono); }

/* accessibility helpers */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; top:.5rem; left:.5rem; z-index:100;
  background:var(--indigo); color:#fff; padding:.6rem 1rem; border-radius:var(--r-sm);
  transform:translateY(-160%); transition:transform .15s ease;
}
.skip-link:focus { transform:none; color:#fff; }

main { display:block; }

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