/* Purpose: Reset, element defaults and the shared type scale.
   Consumes tokens from design-system.css only - no raw values. */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-offset) + var(--space-24));
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--weight-regular);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
figure{margin:0}
address{font-style:normal}
::selection{background:var(--c-accent-high);color:var(--c-bg)}

/* ---------- Headings ---------- */
/* Headings run in the heading face at 1.25 line-height. The design sets them Extra
   Light with the closing phrase in Medium, which the .h-em span carries. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--weight-extralight);
  line-height:1.25;
  letter-spacing:0.01em;
  margin:0;
}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3)}
h4,.h4{font-size:var(--fs-h4);font-weight:var(--weight-medium)}
h5,.h5{font-size:var(--fs-h5);font-weight:var(--weight-medium)}
h6,.h6{font-size:var(--fs-h6);font-weight:var(--weight-medium)}
.display{font-family:var(--font-display);font-size:var(--fs-display);font-weight:var(--weight-bold)}

/* The emphasised half of a two-line heading. */
.h-em{font-weight:var(--weight-medium)}

/* Card and block titles: heading face, Medium, 24px. */
.title-md{
  font-family:var(--font-heading);
  font-size:var(--fs-h4);
  font-weight:var(--weight-medium);
  line-height:1.25;
  letter-spacing:0.01em;
}

/* ---------- Body copy ---------- */
.lede{
  font-size:var(--fs-body);
  font-weight:var(--weight-regular);
  line-height:1.5;
  color:var(--c-text);
  max-width:66ch;
}
.body-lg{font-size:var(--fs-body-lg);line-height:1.6;color:var(--c-text-muted)}
.body-sm{font-size:var(--fs-caption);line-height:1.571;color:var(--c-text)}
.caption{font-size:var(--fs-caption);line-height:1.5;color:var(--c-text-muted)}
.text-accent{color:var(--c-accent)}
.text-crimson{color:var(--c-crimson-light)}
.text-muted{color:var(--c-text-muted)}

/* ---------- Accessibility ---------- */
.screen-reader-text,.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;
}
.skip-link{
  position:absolute;left:var(--space-8);top:calc(var(--space-8) * -12);
  z-index:var(--z-toast);
  background:var(--c-primary);color:var(--c-text-on-brand);
  font-family:var(--font-heading);font-weight:var(--weight-semibold);
  font-size:var(--fs-body);
  padding:var(--space-12) var(--space-24);
  border-radius:var(--r-hairline);
  transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:var(--space-8)}

:focus-visible{
  outline:2px solid var(--c-accent-high);
  outline-offset:var(--space-4);
  border-radius:var(--r-hairline);
}

/* ---------- Rich text (ACF wysiwyg / the_content) ---------- */
.rte{color:var(--c-text-muted);line-height:var(--lh-loose)}
.rte > * + *{margin-top:var(--space-24)}
.rte h2,.rte h3,.rte h4{color:var(--c-text);margin-top:var(--space-48)}
.rte h2:first-child,.rte h3:first-child,.rte h4:first-child{margin-top:0}
.rte a{color:var(--c-accent);text-decoration:underline;text-underline-offset:var(--space-4)}
.rte a:hover{color:var(--c-accent-high)}
.rte strong{color:var(--c-text);font-weight:var(--weight-semibold)}
.rte ul,.rte ol{padding-left:var(--space-24)}
.rte ul{list-style:disc}
.rte ol{list-style:decimal}
.rte li + li{margin-top:var(--space-8)}
.rte blockquote{
  border-left:2px solid var(--c-border-strong);
  padding-left:var(--space-24);
  font-family:var(--font-heading);
  font-size:var(--fs-h5);
  line-height:var(--lh-snug);
  color:var(--c-text);
}
.rte table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.rte th,.rte td{
  text-align:left;padding:var(--space-12) var(--space-16);
  border-bottom:1px solid var(--c-border);
}
.rte th{color:var(--c-text);font-weight:var(--weight-semibold);font-family:var(--font-heading)}
.rte img{border-radius:var(--r-sm)}
.rte code{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-accent-high)}