/* ============================================================
   Halvies — iPad-Air rhythm primitives
   Used by /audit (audit-v3.html) and /leaks (leaks.html).
   Layered ON TOP of halvies.css + halvies-v2.css; uses existing
   tokens (no new colours, no new fonts).
   ============================================================ */

:root {
  --rhythm-gap-tight: 24px;
  --rhythm-gap-beat: 96px;
  --rhythm-gap-section: 160px;
  /* italic warm-sand used for two-tone accent lines */
  --accent-line: #A88A6F;
}

@media (max-width: 720px) {
  :root {
    --rhythm-gap-beat: 60px;
    --rhythm-gap-section: 80px;
  }
}

/* ----- Primitive 1: .beat — the vertical screen-moment ----- */
.beat {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease-warm, cubic-bezier(0.22, 1, 0.36, 1)),
    transform .9s var(--ease-warm, cubic-bezier(0.22, 1, 0.36, 1));
}
.beat.in {
  opacity: 1;
  transform: none;
}
@media (max-width: 720px) {
  .beat {
    min-height: 60vh;
    padding: 48px 0;
  }
}

/* ----- Primitive 2: .headline-2t — two-tone headline ----- */
.headline-2t {
  margin: 18px 0 0;
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-size: clamp(38px, 5.6vw, 76px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 22ch;
}
.headline-2t .lede {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  max-width: none;
  color: var(--fg-1, #1F2A24);
}
.headline-2t .accent { color: var(--accent-line); font-style: italic; }

/* ----- Primitive 3: .bigstat — isolated stat + caption ----- */
.bigstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.bigstat .num {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(120px, 22vw, 240px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg-1, #1F2A24);
}
.bigstat .cap {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg-3, #8A857B);
  max-width: 36ch;
  line-height: 1.55;
}

/* ----- Primitive 4: [data-reveal] — staggered child reveals ----- */
.beat [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .7s var(--ease-warm, cubic-bezier(0.22, 1, 0.36, 1)),
    transform .7s var(--ease-warm, cubic-bezier(0.22, 1, 0.36, 1));
}
.beat.in [data-reveal] { opacity: 1; transform: none; }
.beat.in [data-reveal][data-reveal-order="1"] { transition-delay: 120ms; }
.beat.in [data-reveal][data-reveal-order="2"] { transition-delay: 240ms; }
.beat.in [data-reveal][data-reveal-order="3"] { transition-delay: 360ms; }
.beat.in [data-reveal][data-reveal-order="4"] { transition-delay: 480ms; }

/* ----- Shared helpers used across both pages ----- */
.rhythm-eyebrow {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-line);
  margin: 0;
}
.rhythm-eyebrow.muted { color: var(--fg-3, #8A857B); }

.rhythm-body-lg {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: var(--fg-2, #3D443F);
  max-width: 62ch;
  margin: 28px 0 0;
}

.rhythm-page {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .rhythm-page { padding: 0 22px; }
}

/* ----- Reduced motion: kill all of it, render fully visible ----- */
@media (prefers-reduced-motion: reduce) {
  .beat,
  .beat [data-reveal] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}