/* =====================================================================
   BASE  —  reset, fonts, typography, shared primitives.
   ===================================================================== */

/* ---- Web fonts ------------------------------------------------------
   These point at files you place in assets/fonts/. Until the files
   exist, the browser silently uses the fallbacks defined in tokens.css.
   Helvetica Now Variable and Adobe Garamond are licensed fonts — add
   your purchased/licensed files here.
--------------------------------------------------------------------- */
@font-face {
  font-family: "Helvetica Now Variable";
  src: url("../fonts/HelveticaNowVar.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Adobe Garamond Pro";
  src: url("../fonts/AGaramondPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Adobe Garamond Pro";
  src: url("../fonts/AGaramondPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Modern reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* The [hidden] attribute must always win, even over display:flex/grid
   set by a class of equal specificity (author CSS otherwise beats the
   browser's default [hidden] rule, since origin order outranks
   specificity ties). Without this, toggling `.hidden = true/false` in
   JS silently does nothing on any element styled with display: flex/grid. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Full-page, one-section-at-a-time scrolling */
  scroll-snap-type: y mandatory;
}

/* Each full-height block is a snap stop */
.section, .site-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* On short/!small viewports, relax snapping so tall content
   (e.g. the calendar) stays fully reachable. */
@media (max-width: 768px), (max-height: 700px) {
  html { scroll-snap-type: y proximity; }
  .section, .site-footer { scroll-snap-stop: normal; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Typography primitives ----------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }

.lead {
  font-size: var(--fs-lead);
  max-width: 42ch;
  line-height: 1.5;
}
.lead--muted { opacity: 0.7; }

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow--accent { color: var(--accent); }

/* ---- Layout container ---------------------------------------------- */
.section__content {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0.9em 1.8em;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--color-white); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { border: 1.5px solid currentColor; }
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--color-white); }