/* ===========================================================================
   SSTGC — base
   Reset, typography, layout primitives. No components.
   =========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────────*/

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* sticky header clearance for #anchors */
}

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

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ── Typography ────────────────────────────────────────────────────────────
   Weight carries hierarchy. Headings tighten their tracking as they grow,
   because Poppins opens up at display sizes and needs pulling back.         */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  line-height: var(--lh-tight);
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); font-weight: 700; letter-spacing: var(--track-tight); }
h2 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.017em; }
h3 { font-size: var(--t-2xl); letter-spacing: -0.012em; }
h4 { font-size: var(--t-xl);  letter-spacing: -0.008em; }
h5 { font-size: var(--t-lg); }
h6 { font-size: var(--t-base); }

p { text-wrap: pretty; }

strong, b { font-weight: 600; color: var(--text-strong); }
small { font-size: var(--t-sm); }

/* Prose blocks — anything from the WYSIWYG editor */
.prose > * + * { margin-top: var(--s-4); }
.prose > h2 { margin-top: var(--s-10); }
.prose > h3 { margin-top: var(--s-8); }
.prose > h4 { margin-top: var(--s-6); }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose li { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: var(--s-6); }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--brand); }
.prose img { border-radius: var(--r); margin-block: var(--s-6); }

.prose blockquote {
  border-left: 3px solid var(--brand);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  color: var(--text-soft);
  font-style: italic;
  max-width: var(--measure);
}

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-10); }

/* ── Links ─────────────────────────────────────────────────────────────────*/

a { color: var(--brand); text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--brand-hover); }

/* ── Focus ─────────────────────────────────────────────────────────────────
   The old theme had no visible focus anywhere. This is the accessibility
   floor, not a style choice.                                                */

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--brand);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--white); }

/* ── Layout primitives ─────────────────────────────────────────────────────*/

.wrap {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}
.wrap--tight { width: min(100% - var(--gutter) * 2, var(--page-tight)); }
.wrap--full  { width: 100%; }

.band { padding-block: var(--band); }
.band--tight { padding-block: var(--band-tight); }
.band--sunk  { background: var(--surface-sunk); }
.band--tint  { background: var(--brand-tint); }
.band--dark  { background: var(--ground); color: var(--on-ground-soft); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--white); }

/* Two consecutive bands of the same tone would stack to a void. */
.band--sunk + .band--sunk,
.band + .band:not(.band--sunk):not(.band--tint):not(.band--dark) { padding-top: 0; }

/* Auto-fitting grid — no column classes, no breakpoints to maintain. */
.grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 280px), 100%), 1fr));
}
.grid--2 { --col: 420px; }
.grid--3 { --col: 300px; }
.grid--4 { --col: 220px; }
.grid--tight { gap: var(--s-4); }

.stack > * + * { margin-top: var(--flow, var(--s-4)); }
.stack--lg { --flow: var(--s-8); }
.stack--sm { --flow: var(--s-2); }

.row {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}
.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }

/* ── Section heading ───────────────────────────────────────────────────────
   The rule under the heading is not decoration: it marks where the band's
   content begins, so a long page reads as sections rather than a scroll.    */

/* Was 40px. Between a band's own padding and this, the gap between a heading
   and the content it introduces was larger than the gap between two sections. */
.band-head { margin-bottom: var(--s-6); }
.band-head h2 { margin-bottom: var(--s-3); }
.band-head p { color: var(--text-soft); max-width: var(--measure); }

.band-head--center { text-align: center; }
.band-head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-2);
}

/* ── Utility ───────────────────────────────────────────────────────────────*/

.screen-reader-text,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto; margin: 0;
  padding: var(--s-3) var(--s-5);
}

.text-center { text-align: center; }
.muted { color: var(--text-soft); }
.hide  { display: none !important; }

@media (max-width: 767px) { .hide\@sm { display: none !important; } }
@media (min-width: 768px) { .show\@sm { display: none !important; } }

::selection { background: var(--brand-line); color: var(--text-strong); }

/* ── Print ─────────────────────────────────────────────────────────────────
   Devotees print the timings. Make that produce something usable.           */

@media print {
  .site-header, .site-footer, .skip-link, .hero__media { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .band { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── Safe area and overflow ────────────────────────────────────────────────
   Two separate mobile problems.

   Safe area: on a notched or rounded-corner phone in landscape, content runs
   under the sensor housing. env(safe-area-inset-*) is how the browser reports
   where the usable area actually is; without it the first and last few
   characters of every line are behind hardware.

   Overflow: one element wider than the viewport makes the whole page scroll
   sideways, and nothing indicates which element. `overflow-x: hidden` on body
   hides the symptom and breaks position: sticky in some browsers — so the
   causes are fixed at source (see .masthead) and this is a floor, not a fix. */

html { overflow-x: clip; }   /* clip, not hidden — sticky keeps working */

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.wrap {
  /* The gutter already exists; the safe area is added to it rather than
     replacing it, so a notched phone gets both. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Fixed elements set their own insets — body padding does not reach them. */
.site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.to-top { right: max(var(--s-5), env(safe-area-inset-right)); bottom: max(var(--s-5), env(safe-area-inset-bottom)); }
.masthead__nav { padding-right: max(var(--s-5), env(safe-area-inset-right)); }
.site-footer { padding-bottom: env(safe-area-inset-bottom); }

/* Nothing may exceed its container. Long URLs and unbroken words in editor
   content are the usual culprits. */
img, video, iframe, table, pre, figure { max-width: 100%; }
p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt { overflow-wrap: break-word; }
pre { overflow-x: auto; }