/* The System — shared design tokens and base styles.
   Extracted from the original front page so every page can link one file.
   Light theme only. Fonts come from /fonts/fonts.css (self-hosted, OFL). */

:root{
  --ink:#1E2430;
  --ink-soft:#4A5162;
  --paper:#FAF9F6;
  --card:#FFFFFF;
  --highlight:#F5C04A;
  --highlight-soft:#FBE7B4;
  --green:#7A9E7E;
  --green-soft:#E4EDE4;
  --amber:#D99A3D;
  --amber-soft:#F7E8CE;
  --amber-ink:#8A6D2A;
  --red:#C4553B;
  --red-soft:#F3DDD6;
  --rule:#E7E4DB;
  --serif:'Source Serif 4',Georgia,serif;
  --grotesque:'Bricolage Grotesque',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.155rem;
  line-height:1.72;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Layout */
.wrap{max-width:46rem;margin:0 auto;padding:0 1.4rem}

/* Site bar */
.sitebar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:1.15rem 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.76rem}
.sitebar a{text-decoration:none;letter-spacing:.13em;text-transform:uppercase}
.sitebar .brand{color:var(--ink);font-weight:500}
.sitebar nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.sitebar nav a{color:var(--ink-soft)}
.sitebar nav a:hover,.sitebar nav a[aria-current]{color:var(--ink)}

/* Site footer */
.sitefoot{padding:0 0 3.5rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);line-height:2}
.sitefoot a{color:var(--ink-soft)}
.divider{border:none;border-top:1px solid var(--rule);margin:2.6rem 0 2rem}

/* Type */
header.hero{padding:4.5rem 0 3rem;border-bottom:1px solid var(--rule)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.1rem;
}
h1{
  font-family:var(--grotesque);font-weight:800;
  font-size:clamp(2.1rem,5.4vw,3.35rem);line-height:1.08;
  letter-spacing:-.015em;margin-bottom:1.2rem;
}
h2{
  font-family:var(--grotesque);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.15;
  letter-spacing:-.01em;margin-bottom:1.1rem;
}
h3{font-family:var(--grotesque);font-weight:600;font-size:1.18rem;margin:1.9rem 0 .6rem}
.standfirst{font-size:1.28rem;line-height:1.6;color:var(--ink-soft);max-width:38rem}
.meta{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);margin-top:1.6rem}
section{padding:2.6rem 0 .4rem}
.part-label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.6rem;
}
p{margin-bottom:1.15rem}
ul,ol{margin:0 0 1.15rem 1.25rem}
li{margin-bottom:.5rem}
.quiet{color:var(--ink-soft);font-size:1.02rem}
.hl{
  background:linear-gradient(104deg, transparent 0%, transparent 3%, var(--highlight-soft) 3.5%, var(--highlight-soft) 96%, transparent 97%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:.06em .18em;border-radius:.18em;
}
.hl-strong{
  background:linear-gradient(102deg, transparent 1%, var(--highlight) 4%, var(--highlight) 96%, transparent 99%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:.06em .2em;border-radius:.18em;font-weight:600;
}

@media (max-width:640px){
  body{font-size:1.06rem}
  header.hero{padding:3rem 0 2.2rem}
  .standfirst{font-size:1.16rem}
}