/* =====================================================================
   Base styles: browser reset, typography, layout helpers.
   Uses only the values from tokens.css.
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }   /* widths include padding */

html {
  -webkit-text-size-adjust: 100%;    /* stop iPhones enlarging text in landscape */
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);  /* #links don't hide under the header */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;   /* crisper text on Mac */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                    /* never a sideways scroll on phones */
}

/* Locks the page behind an open menu/overlay (added by JavaScript). */
body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

/* A clear focus ring for keyboard users only (not on mouse clicks). */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-accent-soft); }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
}
.h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.lead {
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--c-text-2);
}
.eyebrow {                       /* small label above a heading */
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-3);
  letter-spacing: 0;
}
.muted { color: var(--c-text-3); }
.small { font-size: var(--fs-sm); }
.fine  { font-size: var(--fs-xs); color: var(--c-text-3); }

/* Grey-then-black headline effect: <h2>Text <span class="soft">more</span></h2> */
.soft { color: var(--c-text-3); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section-gap) 0; }
.section:last-of-type { padding-bottom: var(--section-gap); }

.stack > * + * { margin-top: var(--s-4); }      /* even vertical rhythm */
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-7); }

/* Visually hidden, still read by screen readers. */
.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;
}

/* "Skip to content" link: appears only when tabbed to. */
.skip-link {
  position: absolute;
  left: var(--s-4); top: -60px;
  z-index: calc(var(--z-overlay) + 1);
  padding: var(--s-2) var(--s-4);
  background: var(--c-text); color: #fff;
  border-radius: var(--radius-s);
  font-size: var(--fs-sm);
}
.skip-link:focus { top: var(--s-2); }

[hidden] { display: none !important; }

/* ---------- Fade-in on scroll (added by JavaScript, see lib/reveal.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}