/* ==========================================================================
   base.css — resets, fonts, elements, layout primitives. No components.
   ========================================================================== */

/* --- Self-hosted variable fonts (GDPR: no CDN, no Google Fonts) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;          /* Lenis owns smooth scrolling */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
  color: var(--ink);
  text-wrap: balance;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--green-ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--lime); color: var(--ink); }

/* --- Lenis ---------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* --- Layout primitives ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);      /* box spans the design frame...      */
  margin-inline: auto;
  padding-inline: var(--gutter);   /* ...so the CONTENT box is 1104px    */
}

/* The inset card shell used by the bento section and the footer */
.card-shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--card-inset);  /* content box = --card-width */
}

.section {
  position: relative;
  padding-block: var(--section-pad-y);
}
.section--flush  { padding-block: 0; }
.section--tight  { padding-block: calc(var(--section-pad-y) * 0.65); }
.section--surface { background: var(--surface-alt); }
.section--white   { background: var(--white); }

/* --- Type utilities ------------------------------------------------------- */
.display-1 { font-size: var(--t-display-1); line-height: var(--lh-display-1); }
.display-2 { font-size: var(--t-display-2); line-height: var(--lh-display-2); }
.display-3 { font-size: var(--t-display-3); line-height: var(--lh-display-3); }
.h4        { font-size: var(--t-h4);        line-height: var(--lh-h4); }
.h5        { font-size: var(--t-h5);        line-height: var(--lh-h5); }

.body-lg   { font-size: var(--t-body-lg);   line-height: var(--lh-body-lg); }
.body-sm   { font-size: var(--t-body-sm);   line-height: var(--lh-body-sm); }
.caption   { font-size: var(--t-caption);   line-height: var(--lh-caption); }

.muted     { color: var(--ink-64); }
.on-dark   { color: var(--on-dark); }

/* The design sets one or two words of a heading in green. On light
   backgrounds that is --green-display; on dark it is --green. */
.accent          { color: var(--green-display); }
.on-dark .accent,
.is-dark .accent { color: var(--green); }

.strong { font-weight: var(--w-semi); color: var(--ink); }
.on-dark .strong, .is-dark .strong { color: var(--on-dark); }

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

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  transition: top var(--d-base) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }