/* ============================================================
   WSOOL — BASE
   Reset, document defaults, typography primitives, layout shells.
   Depends on tokens.css. Contains no component styling.
   ============================================================ */

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

html{
  background:var(--canvas);
  scroll-behavior:smooth;
  /* clip (not hidden) so position:sticky still works inside the story chapter */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-padding-block-start:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}

img,svg,video{display:block;max-width:100%}
img{height:auto}          /* with width/height attrs present → no CLS */
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,p{margin-block-start:0}
h1,h2,h3,h4{line-height:var(--lh-tight);text-wrap:balance;font-weight:700}
/* Element-level defaults so a page never depends on a utility class being
   remembered. The .display/.h1/.h2/.h3/.h4 classes below still win on
   specificity — these are the floor, not the ceiling. This also matters for
   the WordPress port, where block markup emits bare <h2>/<h3>. */
h1{font-size:var(--fs-h1);letter-spacing:var(--track-display)}
h2{font-size:var(--fs-h2);letter-spacing:var(--track-tight)}
h3{font-size:var(--fs-h3);letter-spacing:var(--track-tight)}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug)}
p{text-wrap:pretty}

:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset);border-radius:2px}
::selection{background:var(--coral-ink);color:#fff}

/* ── Layout shells ───────────────────────────────────────── */
.wrap{position:relative;width:var(--wrap);margin-inline:auto}
.wrap-narrow{position:relative;width:var(--wrap-narrow);margin-inline:auto}
.section{padding-block:var(--section-y)}
.section-sm{padding-block:var(--section-y-sm)}
.section-paper{background:var(--paper)}
.section-canvas{background:var(--canvas)}
.section-dark{background:var(--ink-deep);color:var(--on-dark)}
.section-dark p{color:var(--on-dark-soft)}

/* Two-column section header: title block + supporting paragraph. */
.section-head{
  display:grid;grid-template-columns:1fr 350px;gap:clamp(24px,6vw,90px);
  align-items:end;margin-block-end:clamp(40px,5vw,72px);
}
.section-head>p{margin:0;color:var(--text)}
.section-head-center{
  grid-template-columns:1fr;justify-items:center;text-align:center;
  max-width:760px;margin-inline:auto;
}

/* ── Typography primitives ───────────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 var(--sp-3);
  color:var(--coral-ink);
  font-size:var(--fs-xs);font-weight:700;line-height:1.4;
  letter-spacing:var(--track-wide);
}
.eyebrow::before{content:"";flex:none;width:32px;height:2px;background:currentColor}
.eyebrow-plain::before{display:none}

.display{margin:0;font-size:var(--fs-display);letter-spacing:var(--track-display);line-height:var(--lh-display)}
.h1{margin:0;font-size:var(--fs-h1);letter-spacing:var(--track-display);line-height:var(--lh-h1)}
.h2{margin:0;font-size:var(--fs-h2);letter-spacing:var(--track-tight);line-height:var(--lh-h2)}
.h3{margin:0;font-size:var(--fs-h3);letter-spacing:var(--track-tight);line-height:var(--lh-h3)}
.h4{margin:0;font-size:var(--fs-h4);line-height:1.35}
.accent{color:var(--coral)}
.accent-block{display:block;color:var(--coral)}

.lead{max-width:68ch;margin:var(--sp-3) 0 0;color:var(--text);font-size:var(--fs-lead);line-height:1.72}
.body-sm{color:var(--text);font-size:var(--fs-sm);line-height:1.7}
.meta{color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.mono-no{color:var(--coral-ink);font-size:var(--fs-xs);font-weight:700;direction:ltr;letter-spacing:var(--track-wide)}

/* ── Accessibility utilities ─────────────────────────────── */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* First stop in the tab order; invisible until it takes focus. */
.skip-link{
  position:fixed;z-index:400;inset-block-start:-120px;inset-inline-start:16px;
  padding:12px 20px;border-radius:var(--radius-sm);
  background:var(--ink);color:#fff;font-size:15px;font-weight:700;
  transition:inset-block-start var(--dur-fast) var(--ease);
}
.skip-link:focus{inset-block-start:16px}

/* ── Print ───────────────────────────────────────────────── */
@media print{
  .header,.mobile-nav,.mobile-cta,.progress,.skip-link,.cta-band{display:none!important}
  body{background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:12px;color:#555}
}