/* ==========================================================================
   base.css - reset, element defaults, typography primitives, a11y
   Depends on tokens.css
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Offset in-page anchors so the fixed header never covers the target */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-menu-open { overflow: hidden; }

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-sm);
}

/* --------------------------------------------------------------------------
   Display typography
   Regular-weight display type at large sizes, tightening tracking as size
   increases - the signature of this design system. Class names are kept
   from the structural template; values now follow Tondnet's scale (see the
   mapping comment in tokens.css).
   -------------------------------------------------------------------------- */

.t-hero,
.t-display-l,
.t-display-m,
.t-display-s {
  margin: 0;
  text-wrap: balance;
}

/* Deliberate, minimal exception: the hero-tier headlines (.t-hero - the
   home H1, .t-display-l - every inner page's H1) carry a touch more weight
   than the rest of the otherwise-regular display system, so the first
   thing a visitor reads on any page reads with a bit more authority.
   Section-level headings below stay at regular. */
.t-hero,
.t-display-l { font-weight: var(--fw-medium); }
.t-display-m,
.t-display-s { font-weight: var(--fw-regular); }

.t-hero      { font-size: var(--fs-hero);      line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.t-display-l { font-size: var(--fs-display-l); line-height: var(--lh-display);    letter-spacing: var(--ls-display); }
.t-display-m { font-size: var(--fs-display-m); line-height: var(--lh-heading-lg); letter-spacing: var(--ls-heading-lg); }
.t-display-s { font-size: var(--fs-display-s); line-height: var(--lh-heading);    letter-spacing: var(--ls-heading); }

/* The ".eyebrow" kicker that used to sit above every heading was removed
   site-wide. --fs-eyebrow / --ls-eyebrow survive in tokens.css because six
   other small-caps labels still use them - see the note there. */

/* Two-digit section index (01, 02, 03 …) */
.section-index {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--c-accent-text);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.03em;
}

.section-index--on-dark { color: var(--c-accent-on-dark); }

/* Lead / intro paragraph */
.lead {
  max-width: 62ch;
  color: var(--c-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.lead--on-dark { color: var(--c-muted-on-dark); }

.text-muted { color: var(--c-muted); }
.text-muted-on-dark { color: var(--c-muted-on-dark); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease);
}

.skip-link:focus { transform: none; }

/* Visible, consistent focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--c-accent-text);
  outline-offset: 2px;
}

.on-dark :focus-visible,
.section--dark :focus-visible,
.site-header :focus-visible {
  outline-color: var(--c-accent-on-dark);
}

/* Screen-reader-only, but focusable */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot field - hidden from humans, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Spacing utilities
   --------------------------------------------------------------------------
   These exist because the Content-Security-Policy in .htaccess sets
   style-src 'self' with no 'unsafe-inline'. That blocks inline style="..."
   attributes, so a handful of one-off spacing tweaks that used to be written
   inline would have silently lost their spacing in production while still
   looking correct locally, where no CSP applies.

   Rather than weakening the policy to allow inline styles - which would
   re-open exactly the hole the policy exists to close - the one-off values
   live here as named classes. Keep this list short: these are for genuine
   one-off adjustments, not a general utility framework. Anything used
   repeatedly belongs in a real component class in components.css.
   -------------------------------------------------------------------------- */

.u-mt-2  { margin-top: var(--sp-2); }
.u-mt-3  { margin-top: var(--sp-3); }
.u-mt-6  { margin-top: var(--sp-6); }
.u-mt-8  { margin-top: var(--sp-8); }
.u-mt-12 { margin-top: var(--sp-12); }
.u-mb-4  { margin-bottom: var(--sp-4); }
.u-mb-16 { margin-bottom: var(--sp-16); }

/* Centred block with generous top spacing - used for "load more"-style
   actions that sit centred under a grid. */
.u-block-center-14 { margin: var(--sp-14) auto 0; }

.u-justify-center { justify-content: center; }
.u-fs-sm { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Motion preferences - mirrors the reference, which disables transitions
   outright under reduced-motion.
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Scroll-reveal must never leave content invisible */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}