/* ============================================
   PHNX — COMPONENTS
   Requires tokens.css.

   Claude Code: compose pages from these.
   Do not write one-off styles in a page file.
   If a page needs something not here, add it
   HERE first, built from tokens, then use it.
   ============================================ */


/* ---- FONT (self-hosted, spec §8) --------- */

@font-face {
  font-family: 'Anton';
  src: url('anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---- RESET (minimal) --------------------- */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }


/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

/* .stack — vertical rhythm. The single most
   useful primitive. Children get consistent
   spacing without margin guesswork. */
.stack > * + * { margin-top: var(--s-3); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* .section — the standard vertical block */
.section {
  padding: var(--section-y) var(--gutter);
}

/* .container — centred, capped */
.container {
  max-width: var(--container);
  margin-inline: auto;
}

.container-wide {
  max-width: var(--container-w);
  margin-inline: auto;
}


/* ============================================
   MOLECULES
   ============================================ */

/* ---- .btn -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.btn:hover { background: #23292C; }

.btn:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* full width below 640 — thumb reach */
@media (max-width: 640px) {
  .btn { width: 100%; }
}

/* inverted, for use on --ink backgrounds */
.btn-inv {
  background: var(--paper);
  color: var(--ink);
}
.btn-inv:hover { background: #FFFCF5; }


/* ---- .label ------------------------------ */

.label {
  display: block;
  font-size: var(--t-xs);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-60);
}

.label-red { color: var(--red); }


/* ---- .h1 / .h2 --------------------------- */

.h1 {
  margin: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-size: var(--t-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  font-weight: 400;
}

.h2 {
  margin: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-size: var(--t-lg);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  font-weight: 400;
}


/* ---- .lede ------------------------------- */

.lede {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}


/* ---- .stat — numeral + text -------------- */

.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: baseline;
}

.stat-num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: var(--t-lg); /* spec v3 asks 36px; --t-lg (26–34) is the nearest token */
  line-height: 1;
  letter-spacing: var(--track-head);
  color: var(--red);
  font-weight: 400;
}

.stat-body { line-height: var(--lh-tight); }
.stat-body strong { display: block; }


/* ============================================
   ORGANISMS
   ============================================ */

/* ---- .hero ------------------------------- */

.hero {
  padding: var(--s-16) var(--gutter) var(--section-y);
}

.hero .h1 { margin-bottom: var(--s-3); }
.hero .lede { margin-bottom: var(--s-6); }
.hero .label { margin-top: var(--s-2); }


/* ---- .band — full-bleed inverted --------- */

.band {
  background: var(--ink);
  color: var(--paper);
  padding: var(--section-y) var(--gutter);
}

.band .label { color: rgba(244,240,232,0.60); }


/* ---- .split — photo + text --------------- */

.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
  .split-reverse > :first-child { order: 2; }
}


/* ---- .steps — numbered protocol ---------- */

.steps {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
}


/* ---- .cta -------------------------------- */

.cta {
  text-align: center;
  padding: var(--section-y) var(--gutter);
}

.cta .h2 { margin-bottom: var(--s-4); }
.cta .label { margin-top: var(--s-3); }

.cta-rule {
  width: 48px;
  height: 2px;
  background: var(--red);
  border: 0;
  margin: 0 auto var(--s-4);
}


/* ---- .nav -------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  max-width: var(--container-w);
  margin-inline: auto;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}

.nav a:hover { color: var(--red); }

/* the link cluster on the right of .nav */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}


/* ---- .float — WhatsApp, CSS only --------- */

.float {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 40;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  text-decoration: none;
}


/* ---- .btn-wide — hero button ------------- */
/* Spec v3 block 1: full width mobile (base
   .btn already does this), 300px desktop.
   300px is a spec literal, like .btn's 56px. */

@media (min-width: 641px) {
  .btn-wide { min-width: 300px; }
}


/* ---- .center ----------------------------- */

.center { text-align: center; }


/* ---- .link — plain text link ------------- */

.link {
  color: var(--ink);
  text-decoration: underline;
  transition: color var(--duration) var(--ease);
}

.link:hover { color: var(--red); }


/* ---- .img-square — spec §3 photo A ------- */

.img-square {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

/* ---- .img-landscape — spec §3 photos B/C - */

.img-landscape {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}


/* ---- .ph — photo placeholder ------------- */
/* Marks a slot awaiting a photograph from the
   §3 shoot. Swap in the real <img> and delete
   the block; layout is identical either way. */

.ph {
  display: grid;
  place-items: center;
  border: var(--hair) solid var(--ink-12);
  padding: var(--s-3);
  text-align: center;
}

.ph .label { color: var(--ink-60); }


/* ---- .footer ----------------------------- */

.footer {
  padding: var(--s-6) var(--gutter);
  text-align: center;
}

.footer .label { margin-bottom: var(--s-2); }

.footer a {
  color: var(--ink-60);
  text-decoration: none;
  font-size: var(--t-sm);
}

.footer a:hover { color: var(--ink); }


/* ============================================
   RULES

   1. Pages contain markup and content only.
      No <style> blocks, no inline styles.
   2. Need a new pattern? Add it here, built
      from tokens, then use it.
   3. Never override a component in a page.
   4. Every value traces to tokens.css.
   5. .split and .steps are the only grids.
      Do not invent layout systems per page.
   ============================================ */