/* =========================================================
   main.css
   North Central Hunts - base, type, layout primitives

   Load order is colors -> main -> header -> [page] -> footer.
   Nothing here targets a page section by name; page-specific rules live
   in their own stylesheet and are hooked in through $cssMain.
   ========================================================= */

/* ---------- self-hosted faces ----------
   Variable woff2, served from this build. No CDN: the CSP allows no
   third-party origin, so a Google Fonts link would be blocked silently,
   and the fonts have to travel with the site when it moves to their host. */
@font-face {
  font-family: "Montserrat";
  src: url("../font/montserrat-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../font/merriweather-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- the fixed hero ground ----------
   The photograph is a fixed layer behind everything and the content scrolls
   over it. Deliberately NOT background-attachment: fixed, which iOS Safari
   does not honour and which stutters elsewhere. A position: fixed element at
   --z-bg gives the same effect and works everywhere, with no JavaScript, so
   it survives with scripts off. */
.ground {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  background-image: url("../../images/hero-desktop-2400.webp");
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
}
@media (max-width: 820px) {
  .ground { background-image: url("../../images/hero-portrait-1170.webp"); }
}

/* The site shell sits above the ground and is opened in header.php. */
.site-shell {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }

/* ---------- containers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(14px, 5vw, 40px);
}

/* At 320px the card's own box-shadow spread pushed scrollWidth 3px past the
   viewport. Clipping at the shell is cheaper than trimming the shadow, and
   it cannot mask a genuine overflow because every element's right edge was
   measured inside the viewport first. */
.site-shell { overflow-x: clip; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--text-primary);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: 0; }
h4 { font-size: var(--step-0); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 var(--space-md); max-width: var(--maxw-prose); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

strong { font-weight: 700; }

/* The eyebrow is the one place letterspaced caps appear. It labels a
   section; it never carries the section's meaning on its own. */
.eyebrow {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}
.eyebrow--on-frame { color: var(--wheat); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- cards ---------- */
.card {
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 48px);
  opacity: 0.85;
}
.card + .card { margin-top: var(--space-lg); }

/* A run of cards down the page, with the hero showing in the gaps. */
.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(28px, 6vw, 72px);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.btn-primary {
  background: var(--brand);
  color: var(--text-on-brand);
}
.btn-primary:hover { background: var(--brand-hover); color: var(--text-on-brand); }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* On the dark frame the ghost button has to invert. */
.on-frame .btn-ghost {
  color: var(--text-on-frame);
  border-color: var(--border-frame);
}
.on-frame .btn-ghost:hover { color: var(--wheat); border-color: var(--wheat); }

/* ---------- focus ----------
   One visible ring everywhere, on the wheat accent so it reads on both
   the pasture body and the bark frame. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wheat);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: calc(var(--z-nav) + 1);
  background: var(--bone);
  color: var(--text-primary);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-weight: 700;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-md); }