/* ==========================================================================
   base.css — shared foundation for every page on the site.

   Holds the design tokens (type scale, spacing, motion, layout), the reset,
   and the typographic defaults. Page stylesheets layer a palette and their
   own components on top, and are loaded after this file.
   ========================================================================== */

:root {
  color-scheme: light;

  --font-sans: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid type scale, tuned between a 380px and a 1440px viewport. Sized in
     rem rather than px so it still tracks the reader's own browser setting.
     11px (--text-3xs) is the floor: nothing on the site reads smaller. */
  --text-3xs: 0.6875rem;  /* 11px */
  --text-2xs: 0.75rem;    /* 12px */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-md: 0.9375rem;   /* 15px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: clamp(1.125rem, 0.28vw + 1.06rem, 1.3125rem);   /* 18 → 21px */
  --text-2xl: clamp(1.25rem, 0.57vw + 1.12rem, 1.625rem);    /* 20 → 26px */
  --display-2xs: clamp(1.3125rem, 0.5vw + 1.19rem, 1.5rem);  /* 21 → 24px */
  --display-xs: clamp(1.5rem, 0.76vw + 1.32rem, 2rem);       /* 24 → 32px */
  --display-sm: clamp(1.75rem, 1.32vw + 1.44rem, 2.625rem);  /* 28 → 42px */
  --display-md: clamp(2.25rem, 2.26vw + 1.71rem, 3.75rem);   /* 36 → 60px */
  --display-lg: clamp(2.75rem, 3.21vw + 1.99rem, 4.875rem);  /* 44 → 78px */
  --display-xl: clamp(3rem, 4.53vw + 1.93rem, 6rem);         /* 48 → 96px */

  --leading-tight: 1.04;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-display: -0.035em;
  --tracking-tight: -0.018em;
  --tracking-label: 0.12em;

  /* Line-length caps. Long-form prose stays inside --measure; supporting
     copy in cards and captions uses the narrower one. */
  --measure: 68ch;
  --measure-narrow: 44ch;

  /* Spacing, on a 4px grid. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5.5rem;
  --s-10: 7.5rem;

  --section-y: clamp(4rem, 7vw, 7.5rem);
  --container: 80rem;                        /* 1280px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --control-h: 2.375rem;                     /* shared header-control height */

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* The site's hard offset shadows. Used as `box-shadow: var(--lift) <color>`
     so every raised surface shares one geometry. */
  --lift: 6px 6px 0;
  --lift-lg: 9px 9px 0;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-7);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-weight: 700;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* Only display-scale headings get the tight optical tracking; smaller
   headings and card titles read better near their natural spacing. */
h1,
h2 {
  letter-spacing: var(--tracking-display);
}

h3 {
  letter-spacing: var(--tracking-tight);
}

p,
blockquote,
figure,
dl {
  margin-top: 0;
}

p {
  text-wrap: pretty;
}

blockquote {
  text-wrap: balance;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: 3px solid var(--focus-ring, currentColor);
  outline-offset: 3px;
}

.mono {
  font-family: var(--font-mono);
}

/* ---- Shared utilities --------------------------------------------------- */

/* Centres a block on the page gutter grid. */
.wrap {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* For full-bleed sections that colour their own background: keeps the inner
   content on the same grid as .wrap. Uses % rather than vw so a visible
   scrollbar cannot push the layout sideways. */
.bleed {
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--s-3);
  left: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--skip-fg, #fffdf8);
  background: var(--skip-bg, #16252a);
  box-shadow: var(--lift) var(--skip-accent, #b84322);
  font-size: var(--text-sm);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--s-5)));
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

@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;
  }
}