/* ============================================================
   THE STROOP STUDY — base.css
   Reset, document typography, links, selection, focus, scrollbar.
   Agent A owns ALL four global stylesheets. Reads tokens.css only.

   ── GLOBAL CLASS VOCABULARY (frozen — Agent E & others depend) ──
   Layout
     .wrap            max-width var(--content-max); pad var(--gutter)
     .section         id'd band; vertical rhythm var(--section-y)
     .rule            hairline horizontal rule (var(--rule))
   Type
     .eyebrow         mono, uppercase, tracked kicker
     .h-display       Fraunces display heading
     .lede            large Newsreader intro paragraph
     .prose           reading column, max var(--measure), lh 1.62
   Components
     .callout         bordered aside on raised paper
     .callout--example  amber-tinted "simulated" variant
                        (uses --example-tint / --example-edge)
     .stat            Spline Sans Mono, tabular-nums, emphasized number
     .figure-frame    bordered figure container + .figure-frame__cap
     .btn  .btn--primary   actions (primary = inked)
     .tag             small mono pill / metadata chip
   Chrome
     .masthead  .nav  .site-foot   page furniture
   Figure mounts
     [data-fig]       D3 SVG target; min-heights set here (no CLS)
   Behaviour hooks (filled by JS, styled here)
     [data-live-n] [data-cohort-badge] [data-cohort-toggle]
     [data-stat]    [data-reveal]  (one-time staggered load reveal)

   Colour rule: the four task colours appear ONLY in data figures and
   the hero conflict motif (.stroop-word). Everything else is ink on
   warm paper with a single burnt-sienna accent for links/marks.
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;       /* clears the sticky masthead on jump */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--paper);
  /* Paper tooth: the grain SVG, tiled and faint, over the warm stock. */
  background-image: url("/assets/img/grain.svg");
  background-size: 180px 180px;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "pnum" 1;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { height: auto; }

ul, ol { list-style: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:where(a) { color: inherit; }

/* ── Headings: Fraunces, tight, optical sizing ────────────────── */
h1, h2, h3, h4, h5, h6, .h-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 40;
  text-wrap: balance;
}
h1, .h-display { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--t-h5); line-height: var(--lh-snug); }
h6 {
  font-size: var(--t-h6);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

p { text-wrap: pretty; }
b, strong { font-weight: 600; }
i, em { font-style: italic; }

small { font-size: var(--t-fine); }

sup, sub { font-size: 0.72em; line-height: 0; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum" 1;
}
code {
  background: var(--paper-sunk);
  padding: 0.12em 0.38em;
  border-radius: var(--radius-s);
  border: var(--hair) solid var(--rule);
}
pre {
  background: var(--paper-sunk);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
  overflow-x: auto;
  line-height: 1.55;
}
pre code { background: none; padding: 0; border: 0; }

blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  color: var(--ink-soft);
  font-style: italic;
}

hr {
  border: 0;
  border-top: var(--hair) solid var(--rule);
  height: 0;
}

abbr[title] { text-decoration: underline dotted; cursor: help; }

figure { margin: 0; }
figcaption {
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  color: var(--ink-faint);
  line-height: var(--lh-snug);
}

table { border-collapse: collapse; width: 100%; }

/* ── The reading column ───────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-fine);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  max-width: var(--measure-wide);
  font-weight: 400;
}
.lede em { color: var(--ink); }

.prose {
  max-width: var(--measure);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
}
.prose > * + * { margin-top: var(--s-5); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--s-8); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--s-4); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul > li { list-style: none; position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 0.42em;
  height: var(--hair);
  background: var(--rule-strong);
}
.prose ol { list-style: decimal; }
.prose ol > li { padding-left: 0.3em; }
.prose li + li { margin-top: var(--s-3); }
.prose li::marker {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ── Links: quiet burnt-sienna with a hairline underline ──────── */
a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--rule-strong), var(--rule-strong));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--hair);
  transition: background-size var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
}
a:focus-visible { color: var(--ink); }

/* utility, chrome and button anchors opt out of the underline ink */
.masthead a, .nav a, .site-foot a, .btn, .skip-link,
.eyebrow a, a.tag {
  background-image: none;
}

/* ── Selection: an inversion, a small wink at the experiment ──── */
::selection { background: var(--ink); color: var(--paper); }
::-moz-selection { background: var(--ink); color: var(--paper); }

/* ── Visible, non-jumpy focus ─────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* ── Skip link ────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -120%;
  z-index: var(--z-overlay);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  font-weight: 600;
}
.skip-link:focus-visible { top: var(--s-4); color: var(--paper); outline-color: var(--paper); }

/* ── Accessible-hidden helpers ────────────────────────────────── */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Scrollbar: thin, paper-toned ─────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-sunk); }
::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 3px solid var(--paper-sunk);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-corner { background: var(--paper-sunk); }