/* ============================================================
   CRUNCH — Base: reset, typography, landmarks, utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; min-width: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--c-char);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                 /* belt-and-braces vs 320px overflow */
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select { font: inherit; }
ul[role="list"] { list-style: none; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
p { text-wrap: pretty; overflow-wrap: anywhere; }

/* — Focus — */
:focus-visible {
  outline: 3px solid var(--c-flame);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--c-mustard); }

/* — Skip link — */
.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--c-flame-deep); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 700;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* — Layout utilities — */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.on-dark { background: var(--c-char); color: var(--c-cream); }
.on-paper { background: var(--c-paper); }

.eyebrow {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: var(--fs-300); color: var(--c-flame-deep);
  display: inline-flex; align-items: center; gap: .6rem;
}
.on-dark .eyebrow, .page-hero .eyebrow { color: var(--c-mustard); }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: currentColor; }

.lede { font-size: var(--fs-500); color: var(--c-smoke); max-width: 52ch; }
.on-dark .lede { color: #d9cdbb; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* — Reveal on scroll (only hidden when JS is active) — */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* — Interaction feedback (works on touch too) — */
.btn { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.98); }
a, button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero burger drifts gently to add life on load, desktop and mobile alike. */
  .hero-media img { animation: crunch-float 6s var(--ease-in-out) infinite; }
  @keyframes crunch-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}