/* =========================================================================
   Base — reset, document defaults, typography, and small text utilities.
   ========================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchors land below the sticky header, incl. the top safe-area inset */
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

/* The page NEVER scrolls sideways — any component wider than the viewport is
   a bug to fix locally, and this stops it from dragging the whole layout. */
html, body { max-width: 100%; overflow-x: clip; }

/* Unbreakable strings (long emails, references, URLs) break rather than
   widen their container. Only kicks in when a word exceeds the line. */
body { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* viewport-fit=cover runs the page edge-to-edge; keep the footer clear of
     the home-indicator strip. Zero in browsers without a bottom inset. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

main { flex: 1 0 auto; }

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

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

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Headings (display serif) ----------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: var(--leading-snug); }
h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { max-width: var(--measure); }

strong { font-weight: 700; color: var(--ink); }

/* ---- Text utilities --------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze);
}

.soft  { color: var(--ink-soft); }
.muted { color: var(--ink-faint); }

.lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}

.text-link {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.text-link:hover { color: var(--gold); border-color: var(--gold); }

.arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.text-link:hover .arrow, a:hover > .arrow { transform: translateX(3px); }

.req { color: var(--ember); }

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-3);
  z-index: 999;
  background: var(--gold);
  color: var(--accent-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { left: var(--space-4); }

/* ---- Long-form prose -------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-8); }
.prose p, .prose li { color: var(--ink-soft); }

.prose-callout {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--line-faint);
  font-weight: 500;
}
.prose .prose-callout { color: var(--ink); }

.check-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-top: var(--space-3);
}
.check-list li::before {
  content: "▪";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--bronze);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.step-list { list-style: none; padding: 0; counter-reset: step; }
.step-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-top: var(--space-3);
  counter-increment: step;
}
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.3em;
  color: var(--bronze);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
}

/* Long-form variant (the /about/gibier/ protocol): a continuous hairline
   rail down the left, the forged step numbers sitting ON the rail, step
   titles set as chapters in the display face. The copy's own structure is
   encoded in ink: the ordinary trade stays soft, `.step-ours` (the
   « Chez Primal Elite » paragraphs) carries full ink. */
.step-list--flow {
  border-left: 1px solid var(--line-strong);
  margin-top: var(--space-6);
}
.step-list--flow li { padding-left: var(--space-7); }
.step-list--flow li + li { margin-top: var(--space-8); }
.step-list--flow li::before {
  top: 0.35em;
  transform: translateX(-50%);
  background: var(--bg);
  padding: var(--space-2) 0;
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.step-list--flow h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.step-list--flow li > * + * { margin-top: var(--space-3); }
.prose .step-list--flow .step-ours { color: var(--ink); }

.prose .steps-label {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze);
}

@media (max-width: 640px) {
  .step-list--flow { border-left: 0; }
  .step-list--flow li { padding-left: 0; }
  .step-list--flow li::before {
    position: static;
    display: block;
    transform: none;
    padding: 0;
    margin-bottom: var(--space-2);
  }
}

.prose h3 { margin-top: var(--space-8); }