/* =============================================================================
   Stack-kit Brand V2 — site-wide overrides
   -----------------------------------------------------------------------------
   Linked from all 24 pages. Loaded AFTER each page's inline <style>, so V2
   tokens + utilities override V1 inline definitions via cascade order.
   Authored 2026-05-17. Canonical token source: cells/stackkit/DESIGN.md.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Web font load (Inter + IBM Plex Mono)
   ---------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ----------------------------------------------------------------------------
   V2 token overrides
   ---------------------------------------------------------------------------- */
:root {
  /* Brand accent → TEAL (replaces forest green) */
  --accent:        #1e6b6e !important;
  --accent-soft:   #2d8585 !important;
  --accent-ink:    #0d3a3c !important;
  --accent-tint:   #e8f0f0;

  /* Ink hierarchy — ink_3 cured WCAG-AA */
  --ink-3:         #5f5f58 !important;

  /* Mono — IBM Plex Mono replaces SF Mono */
  --mono:          "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace !important;
  --sans:          "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;

  /* Domain gradient stops (preferred for new components) */
  --d-athletic-a:  #c76634; --d-athletic-b:  #e1854e;
  --d-sleep-a:     #3d2d8a; --d-sleep-b:     #2f226c;
  --d-cognitive-a: #2b6fd4; --d-cognitive-b: #2056a9;
  --d-cardio-a:    #a63d49; --d-cardio-b:    #c95764;
  --d-cleanse-a:   #497a45; --d-cleanse-b:   #79ab66;
  --d-recovery-a:  #bf4f7e; --d-recovery-b:  #d96f9c;
  --d-immune-a:    #3d8a7a; --d-immune-b:    #5cb098;
  --d-metabolic-a: #e85e1a; --d-metabolic-b: #b94712;
  --d-hormonal-a:  #8a3d6b; --d-hormonal-b:  #b85a90;
  --d-energy-a:    #c99522; --d-energy-b:    #e3b94a;
  --d-mood-a:      #6655cf; --d-mood-b:      #8f84e8;
  --d-skin-a:      #c66a6f; --d-skin-b:      #ecb0a6;
}

/* ----------------------------------------------------------------------------
   Domain gradient CLASSES — applied via .bg-d-<domain> + .domain-badge.bg-d-*
   These OVERRIDE the V1 flat .bg-d-* definitions via cascade.
   ---------------------------------------------------------------------------- */
.bg-d-athletic  { background: linear-gradient(135deg, var(--d-athletic-a),  var(--d-athletic-b))  !important; color: #fff; }
.bg-d-sleep     { background: linear-gradient(135deg, var(--d-sleep-a),     var(--d-sleep-b))     !important; color: #fff; }
.bg-d-cognitive { background: linear-gradient(135deg, var(--d-cognitive-a), var(--d-cognitive-b)) !important; color: #fff; }
.bg-d-cardio    { background: linear-gradient(135deg, var(--d-cardio-a),    var(--d-cardio-b))    !important; color: #fff; }
.bg-d-cleanse   { background: linear-gradient(135deg, var(--d-cleanse-a),   var(--d-cleanse-b))   !important; color: #fff; }
.bg-d-recovery  { background: linear-gradient(135deg, var(--d-recovery-a),  var(--d-recovery-b))  !important; color: #fff; }
.bg-d-immune    { background: linear-gradient(135deg, var(--d-immune-a),   var(--d-immune-b))    !important; color: #fff; }
.bg-d-metabolic { background: linear-gradient(135deg, var(--d-metabolic-a), var(--d-metabolic-b)) !important; color: #fff; }
.bg-d-hormonal  { background: linear-gradient(135deg, var(--d-hormonal-a),  var(--d-hormonal-b))  !important; color: #fff; }
.bg-d-energy    { background: linear-gradient(135deg, var(--d-energy-a),    var(--d-energy-b))    !important; color: #fff; }
.bg-d-mood      { background: linear-gradient(135deg, var(--d-mood-a),      var(--d-mood-b))      !important; color: #fff; }
.bg-d-skin      { background: linear-gradient(135deg, var(--d-skin-a),      var(--d-skin-b))      !important; color: #fff; }

/* WCAG AA cure (2026-05-19 per ab_creative_director v3 finding):
   Three warm/light-value domain backgrounds (athletic ~4.27:1, cleanse ~3.80:1,
   energy ~3.03:1 against #fff at 10px badge) fail the 4.5:1 normal-text threshold.
   Switching to dark ink on these three lifts contrast to ~7:1+ on each gradient base.
   Scoped to .domain-badge (small-text case); larger .cell-hero-band keeps white text
   for editorial register — large-text 3:1 floor handled separately on the hero scale. */
/* Operator: only the energy badge uses ink text; all others stay white. */
.domain-badge.bg-d-energy, .spec-badge.bg-d-energy {
  color: var(--ink) !important;
}
/* Immune (#bf4f7e) sits at ~4.53:1 white-on-color — borderline-monitor;
   not switching yet, per ab_creative_director v4 finding. Re-evaluate if
   text size, weight, or background gradient mid-point shifts. */

/* Larger domain banners (per-cell page hero) — use these new class names on cell pages */
.cell-hero-band {
  padding: 56px 0 48px;
  margin-bottom: 32px;
  position: relative;
  isolation: isolate;
  color: #fff;
}
.cell-hero-band > .wrap { position: relative; z-index: 2; }
.cell-hero-band.d-athletic  { background: linear-gradient(135deg, var(--d-athletic-a),  var(--d-athletic-b)); }
.cell-hero-band.d-sleep     { background: linear-gradient(135deg, var(--d-sleep-a),     var(--d-sleep-b)); }
.cell-hero-band.d-cognitive { background: linear-gradient(135deg, var(--d-cognitive-a), var(--d-cognitive-b)); }
.cell-hero-band.d-cardio    { background: linear-gradient(135deg, var(--d-cardio-a),    var(--d-cardio-b)); }
.cell-hero-band.d-cleanse   { background: linear-gradient(135deg, var(--d-cleanse-a),   var(--d-cleanse-b)); }
.cell-hero-band.d-recovery  { background: linear-gradient(135deg, var(--d-recovery-a),  var(--d-recovery-b)); }
.cell-hero-band.d-immune    { background: linear-gradient(135deg, var(--d-immune-a),   var(--d-immune-b)); }
.cell-hero-band.d-metabolic { background: linear-gradient(135deg, var(--d-metabolic-a), var(--d-metabolic-b)); }
.cell-hero-band.d-hormonal  { background: linear-gradient(135deg, var(--d-hormonal-a),  var(--d-hormonal-b)); }
.cell-hero-band.d-energy    { background: linear-gradient(135deg, var(--d-energy-a),    var(--d-energy-b)); }
.cell-hero-band.d-mood      { background: linear-gradient(135deg, var(--d-mood-a),      var(--d-mood-b)); }
.cell-hero-band.d-skin      { background: linear-gradient(135deg, var(--d-skin-a),      var(--d-skin-b)); }

/* ----------------------------------------------------------------------------
   1-bit Bayer dither overlay — applied to gradient containers
   Auto-applied to .bg-d-* AND .cell-hero-band — adds tactile grain over gradients.
   ---------------------------------------------------------------------------- */
.bg-d-athletic, .bg-d-sleep, .bg-d-cognitive, .bg-d-cardio, .bg-d-cleanse,
.bg-d-recovery, .bg-d-immune, .bg-d-metabolic, .bg-d-hormonal, .bg-d-energy, .bg-d-mood, .bg-d-skin,
.cell-hero-band {
  position: relative;
  isolation: isolate;
}
.bg-d-athletic::after, .bg-d-sleep::after, .bg-d-cognitive::after, .bg-d-cardio::after, .bg-d-cleanse::after,
.bg-d-recovery::after, .bg-d-immune::after, .bg-d-metabolic::after, .bg-d-hormonal::after, .bg-d-energy::after, .bg-d-mood::after, .bg-d-skin::after,
.cell-hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='2' y='6' width='2' height='2' fill='%23000' opacity='0.08'/><rect x='6' y='2' width='2' height='2' fill='%23000' opacity='0.08'/></svg>");
  background-size: 8px 8px;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
/* Explicit utility for additional containers operator/CC want dithered */
.with-dither {
  position: relative;
  isolation: isolate;
}
.with-dither::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='2' y='6' width='2' height='2' fill='%23000' opacity='0.08'/><rect x='6' y='2' width='2' height='2' fill='%23000' opacity='0.08'/></svg>");
  background-size: 8px 8px;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Make sure dithered content stays above ::after */
.bg-d-athletic > *, .bg-d-sleep > *, .bg-d-cognitive > *, .bg-d-cardio > *, .bg-d-cleanse > *,
.bg-d-recovery > *, .bg-d-immune > *, .bg-d-metabolic > *, .bg-d-hormonal > *, .bg-d-energy > *, .bg-d-mood > *, .bg-d-skin > *,
.cell-hero-band > *, .with-dither > * { position: relative; z-index: 2; }

/* ----------------------------------------------------------------------------
   Motion — hover lift + transitions on interactive elements
   ---------------------------------------------------------------------------- */
.cell-card,
.protocol-card,
.pdp-card,
.cta {
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 250ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cell-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px -12px rgba(30, 107, 110, 0.25);
}
.cta:hover {
  transform: translateY(-1px);
}

/* Domain badge — subtle gradient + slight lift on parent hover */
.domain-badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff !important;
  border-radius: 3px;
  position: relative;
  isolation: isolate;
}

/* Grid pulse — for any element that opts in via .sk-pulse */
@keyframes sk-cell-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.94); opacity: 0.85; }
}
.sk-pulse > * { animation: sk-cell-pulse 2.4s ease-in-out infinite; }
.sk-pulse > *:nth-child(2) { animation-delay: 0.12s; }
.sk-pulse > *:nth-child(3) { animation-delay: 0.24s; }
.sk-pulse > *:nth-child(4) { animation-delay: 0.36s; }
.sk-pulse > *:nth-child(5) { animation-delay: 0.48s; }
.sk-pulse > *:nth-child(6) { animation-delay: 0.60s; }

/* ----------------------------------------------------------------------------
   Master mark (inline-SVG-friendly) wrapper helper
   ---------------------------------------------------------------------------- */
.sk-mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8%;
  aspect-ratio: 1;
}
.sk-mark .c { background: currentColor; border-radius: 0; }
.sk-mark .c.empty { background: transparent; }

/* Nav brand fallback — for pages with serif-text-only brand label, upgrade to Inter + mark */
nav.site .brand {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}
nav.site .brand > * {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
nav.site .brand svg {
  flex-shrink: 0 !important;
  display: block !important;
}
nav.site .brand span {
  white-space: nowrap !important;
  display: inline-block !important;
}
/* Ensure nav itself doesn't squash the brand on narrow viewports */
nav.site {
  flex-wrap: nowrap !important;
  gap: 12px;
}
@media (max-width: 480px) {
  nav.site .brand span { font-size: 15px !important; }
  nav.site .brand svg { width: 22px !important; height: 22px !important; }
}

/* Subtle hairline upgrade on cards (4-8px corner radius) */
.cell-card,
.protocol-card { border-radius: 8px; overflow: hidden; position: relative; }

/* ----------------------------------------------------------------------------
   Cell-card gradient top strip — driven by domain badge inside the card
   ---------------------------------------------------------------------------- */
.cell-card { padding-top: 30px !important; }
.cell-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background: var(--accent);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.10'/></svg>"),
    var(--accent);
  background-size: 8px 8px, 100% 100%;
}
.cell-card:has(.bg-d-athletic)::before,  .cell-card.has-d-athletic::before   { background: linear-gradient(110deg, var(--d-athletic-a) 10%,  var(--d-athletic-b) 90%); }
.cell-card:has(.bg-d-sleep)::before,     .cell-card.has-d-sleep::before      { background: linear-gradient(110deg, var(--d-sleep-a) 10%,     var(--d-sleep-b) 90%); }
.cell-card:has(.bg-d-cognitive)::before, .cell-card.has-d-cognitive::before  { background: linear-gradient(110deg, var(--d-cognitive-a) 10%, var(--d-cognitive-b) 90%); }
.cell-card:has(.bg-d-cardio)::before,    .cell-card.has-d-cardio::before     { background: linear-gradient(110deg, var(--d-cardio-a) 10%,    var(--d-cardio-b) 90%); }
.cell-card:has(.bg-d-cleanse)::before,   .cell-card.has-d-cleanse::before    { background: linear-gradient(110deg, var(--d-cleanse-a) 10%,   var(--d-cleanse-b) 90%); }
.cell-card:has(.bg-d-recovery)::before,  .cell-card.has-d-recovery::before   { background: linear-gradient(110deg, var(--d-recovery-a) 10%,  var(--d-recovery-b) 90%); }
.cell-card:has(.bg-d-immune)::before,    .cell-card.has-d-immune::before     { background: linear-gradient(110deg, var(--d-immune-a) 10%,    var(--d-immune-b) 90%); }
.cell-card:has(.bg-d-metabolic)::before, .cell-card.has-d-metabolic::before  { background: linear-gradient(110deg, var(--d-metabolic-a) 10%, var(--d-metabolic-b) 90%); }
.cell-card:has(.bg-d-hormonal)::before,  .cell-card.has-d-hormonal::before   { background: linear-gradient(110deg, var(--d-hormonal-a) 10%,  var(--d-hormonal-b) 90%); }
.cell-card:has(.bg-d-energy)::before,    .cell-card.has-d-energy::before     { background: linear-gradient(110deg, var(--d-energy-a) 10%,    var(--d-energy-b) 90%); }
.cell-card:has(.bg-d-mood)::before,      .cell-card.has-d-mood::before       { background: linear-gradient(110deg, var(--d-mood-a) 10%,      var(--d-mood-b) 90%); }
.cell-card:has(.bg-d-skin)::before,      .cell-card.has-d-skin::before       { background: linear-gradient(110deg, var(--d-skin-a) 10%,      var(--d-skin-b) 90%); }

/* ----------------------------------------------------------------------------
   Cell hero band — LARGE per-cell gradient zone for learn-page headers
   Use: <header class="cell-hero-band d-sleep"><div class="wrap"> ... </div></header>
   ---------------------------------------------------------------------------- */
.cell-hero-band {
  padding: 64px 0 56px !important;
  margin: 0 0 40px;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
.cell-hero-band .wrap, .cell-hero-band .wrap-wide { color: #fff; }
.cell-hero-band .eyebrow {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cell-hero-band h1 {
  color: #fff !important;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin: 0;
}
@media (min-width: 760px) { .cell-hero-band h1 { font-size: 48px; } }
.cell-hero-band .hero-meta {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

/* Stronger dither on hero bands for more visible grain */
.cell-hero-band::after {
  opacity: 0.85 !important;
}

/* CTA radius softer */
.cta { border-radius: 6px; }

/* ----------------------------------------------------------------------------
   sk:tag eyebrow — IBM Plex Mono auto-applied where the class is used
   ---------------------------------------------------------------------------- */
.sk-tag, .eyebrow { font-family: var(--mono) !important; }

/* ============================================================================
   AESTHETIC DEV — 2026-05-17 (durably persisted; consumed by every page that
   links brand-v2.css). Replaces inline-<style> aesthetic-dev block.
   ============================================================================ */

/* (4) Shimmer sweep — stacked-gradient technique (no ::after conflict w/ dither)
   Loads via background-position animation on the badge itself; the existing
   dither ::after composes on top as grain. */
@keyframes shimmer-sweep {
  0%   { background-position: 220% 0, 0 0; }
  55%  { background-position: -120% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}
.domain-badge.bg-d-athletic,  .spec-badge.bg-d-athletic {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-athletic-a), var(--d-athletic-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out infinite;
}
.domain-badge.bg-d-sleep,     .spec-badge.bg-d-sleep {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-sleep-a), var(--d-sleep-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 0.6s infinite;
}
.domain-badge.bg-d-cognitive, .spec-badge.bg-d-cognitive {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-cognitive-a), var(--d-cognitive-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 1.2s infinite;
}
.domain-badge.bg-d-cardio,    .spec-badge.bg-d-cardio {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-cardio-a), var(--d-cardio-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 1.8s infinite;
}
.domain-badge.bg-d-cleanse,   .spec-badge.bg-d-cleanse {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-cleanse-a), var(--d-cleanse-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 2.4s infinite;
}
.domain-badge.bg-d-recovery,  .spec-badge.bg-d-recovery {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-recovery-a), var(--d-recovery-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 3.0s infinite;
}
.domain-badge.bg-d-immune,    .spec-badge.bg-d-immune {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-immune-a), var(--d-immune-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 0.3s infinite;
}
.domain-badge.bg-d-metabolic, .spec-badge.bg-d-metabolic {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-metabolic-a), var(--d-metabolic-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 0.9s infinite;
}
.domain-badge.bg-d-hormonal,  .spec-badge.bg-d-hormonal {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-hormonal-a), var(--d-hormonal-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 1.5s infinite;
}
.domain-badge.bg-d-energy,    .spec-badge.bg-d-energy {
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%),
    linear-gradient(135deg, var(--d-energy-a), var(--d-energy-b)) !important;
  background-size: 220% 100%, 100% 100% !important; background-position: 220% 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: shimmer-sweep 4.5s ease-in-out 2.1s infinite;
}
/* Suppress dither ::after on badges (too noisy at small size; let shimmer carry the texture) */
.domain-badge::after, .spec-badge::after { display: none !important; }

/* (3a) Spec-row cascade — animation-play-state pattern (perceptible after page load) */
@keyframes spec-row-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.spec-showcase .spec-row,
.spec-showcase .spec-divider,
.spec-showcase .spec-drawer {
  animation: spec-row-rise 0.55s ease-out both;
  animation-play-state: paused;
}
.spec-showcase.in-view .spec-row,
.spec-showcase.in-view .spec-divider,
.spec-showcase.in-view .spec-drawer { animation-play-state: running; }
.spec-showcase.in-view .spec-divider             { animation-delay: 0ms;   }
.spec-showcase.in-view .spec-row:nth-of-type(1)  { animation-delay: 80ms;  }
.spec-showcase.in-view .spec-row:nth-of-type(2)  { animation-delay: 160ms; }
.spec-showcase.in-view .spec-row:nth-of-type(3)  { animation-delay: 240ms; }
.spec-showcase.in-view .spec-row:nth-of-type(4)  { animation-delay: 320ms; }
.spec-showcase.in-view .spec-row:nth-of-type(5)  { animation-delay: 400ms; }
.spec-showcase.in-view .spec-row:nth-of-type(6)  { animation-delay: 480ms; }
.spec-showcase.in-view .spec-row:nth-of-type(7)  { animation-delay: 560ms; }
.spec-showcase.in-view .spec-drawer              { animation-delay: 640ms; }

/* (2) Peel-back drawer + sk-monogram cube disclosure (landing + protocol pages) */
.spec-drawer {
  margin-top: 8px;
  border-top: 1px solid var(--bg-soft);
}
.spec-drawer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 14px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  transition: color 0.15s;
  user-select: none;
}
.spec-drawer > summary::-webkit-details-marker { display: none; }
.spec-drawer > summary::marker { content: ""; }
.spec-drawer > summary:hover { color: var(--ink); }
.sk-cube {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 16px; height: 16px;
  gap: 1.5px;
  transition: transform 0.28s ease-out;
  flex-shrink: 0;
}
.sk-cube .c { background: var(--ink-3); transition: background 0.18s; }
.sk-cube .c.empty { background: transparent; }
.spec-drawer > summary:hover .sk-cube .c { background: var(--accent); }
.spec-drawer[open] > summary { color: var(--accent); }
.spec-drawer[open] > summary .sk-cube { transform: rotate(90deg); }
.spec-drawer[open] > summary .sk-cube .c { background: var(--accent); }
.spec-drawer .drawer-body { padding-bottom: 4px; animation: drawer-fade 0.35s ease-out; }
@keyframes drawer-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Protocol-page H2-section drawers (auto-wrapped by inline JS on protocol pages).
   The JS converts each .protocol-content > h2 + siblings into:
     <details class="protocol-drawer">
       <summary>...spec-strip + h2-title...</summary>
       <div class="drawer-body">...content...</div>
     </details>                                                               */
.protocol-drawer {
  border-top: 1px solid var(--hairline);
  margin: 12px 0;
}
.protocol-drawer > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 20px 0 16px;
  user-select: none;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.15s;
}
.protocol-drawer > summary::-webkit-details-marker { display: none; }
.protocol-drawer > summary::marker { content: ""; }
.protocol-drawer > summary:hover { color: var(--accent); }
.protocol-drawer > summary .sk-cube { width: 18px; height: 18px; }
.protocol-drawer > summary .peel-line {
  color: var(--ink-3);
  opacity: 0.45;
  transition: opacity 0.18s ease, transform 0.28s ease, color 0.15s ease;
  flex-shrink: 0;
}
.protocol-drawer > summary:hover .peel-line { opacity: 0.75; color: var(--accent); }
.protocol-drawer[open] > summary { color: var(--accent); }
.protocol-drawer[open] > summary .sk-cube { transform: rotate(90deg); }
.protocol-drawer[open] > summary .sk-cube .c { background: var(--accent); }
.protocol-drawer[open] > summary .peel-line { opacity: 0.7; color: var(--accent); transform: rotate(180deg); }
.protocol-drawer .drawer-body { padding: 0 0 8px 34px; animation: drawer-fade 0.35s ease-out; }
.protocol-drawer .drawer-body h3 { margin-top: 18px; }
.protocol-drawer .drawer-body h4 { margin-top: 14px; color: var(--ink-2); }
@media (max-width: 600px) {
  .protocol-drawer > summary { font-size: 18px; gap: 10px; grid-template-columns: 18px 1fr auto; }
  .protocol-drawer .drawer-body { padding-left: 0; }
}

/* ============================================================================
   AESTHETIC DEV — round 3 (2026-05-17) — citation chips / mono-tag specimen /
   pull-quote / live update-cadence / section-rule scroll-progress
   ============================================================================ */

/* Citation chips — inline citations rendered as small mono-stamped tags. */
.cite-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 7px;
  margin: 0 1px;
  white-space: nowrap;
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cite-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}
/* Existing .cite spans inside spec-showcase rows — already small + secondary;
   give them a touch of chip-feel without overcommitting. */
.spec-showcase .spec-value .cite,
.supplement-value .cite {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg-soft);
  border-radius: 3px;
  padding: 1px 6px;
  margin-top: 4px;
}

/* Mono-tag as specimen ID — sk:athletic-endurance feel as museum specimen card.
   .sk-tag carries the namespace; treating it as a tactile mono-stamped label. */
.sk-tag {
  font-family: var(--mono) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 3px 9px;
  display: inline-block;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.cell-card:hover .sk-tag {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

/* Pull-quote (Iowan italic, accent-bordered) — already defined in inline shell.
   Add a generator-emitted `.pull-quote.thesis` variant that lands once at top of
   article body, between hero and editorial prose. */
.pull-quote.thesis {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 16px 0 16px 24px;
  margin: 32px 0 36px;
  max-width: 720px;
}
.pull-quote.thesis .pull-attribution {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
@media (max-width: 600px) {
  .pull-quote.thesis { font-size: 18px; padding-left: 16px; margin: 24px 0 28px; }
}

/* Live update-cadence ticker — per-page "Last reviewed" line embedded in hero
   meta, plus a sitewide footer ticker showing freshest update across all cells. */
.cell-hero-band .hero-meta .updated-stamp {
  display: inline-block;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.78);
}
.cell-hero-band .hero-meta .updated-stamp time {
  font-weight: 600;
}
footer .footer-update-ticker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}
footer .footer-update-ticker .ticker-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  animation: ticker-pulse 2.4s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Section-number rule scroll-anchored progress — the 60px hairline at section
   headers grows horizontally as that section enters view. Modern browsers via
   animation-timeline: view(); graceful fallback to static 60px. */
@supports (animation-timeline: view()) {
  .section-header .number-row .rule {
    animation: section-rule-grow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes section-rule-grow {
    from { width: 30px; opacity: 0.55; }
    to   { width: 120px; opacity: 1;   }
  }
}
@media (prefers-reduced-motion: reduce) {
  footer .footer-update-ticker .ticker-dot { animation: none; opacity: 0.85; }
  .section-header .number-row .rule { animation: none !important; }
}

/* Protocol-page hero band — colored gradient banner above the article body.
   Carries domain color + eyebrow + H1 + meta line. Restores the visual hierarchy
   the old hand-built pages had before the data-layer migration. */
.cell-hero-band {
  padding: 64px 0 56px;
  margin: 0 0 36px 0;
}
.cell-hero-band .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 16px;
  display: block;
}
.cell-hero-band h1 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 20px 0;
  max-width: 920px;
}
.cell-hero-band .hero-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
@media (max-width: 600px) {
  .cell-hero-band { padding: 40px 0 36px; margin-bottom: 24px; }
  .cell-hero-band .hero-meta { font-size: 11px; }
}

/* Compact anchor-chip TOC at top of protocol-content — jump to each supplement
   below (where the full spec-card is inlined at the matching H3). Replaces the
   old supplement-stack-summary cards-at-top block per operator feedback
   2026-05-17 (cards-then-prose was duplicate data). */
.protocol-toc {
  margin: 0 0 28px 0;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.protocol-toc > .eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 12px;
}
.protocol-toc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.protocol-toc-chip {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.protocol-toc-chip:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
  transform: translateY(-1px);
}
/* Scroll-target highlight — when jumped to via #anchor, briefly highlight the H3 */
.protocol-content h2[id^="sup-"]:target,
.protocol-content h3[id^="sup-"]:target {
  animation: target-flash 1.6s ease-out 1;
}
@keyframes target-flash {
  0%   { background: var(--accent-tint); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .protocol-toc-chip { transition: none; }
  .protocol-content [id^="sup-"]:target { animation: none; }
}
/* Inline supplement-card now appears AFTER each H3/H2 in the editorial — give
   it a touch more separation from the heading + tighter spacing inside. */
.protocol-content .supplement-card {
  margin: 8px 0 28px;
}

/* Server-side spec-strip section — supplement-cards rendered from spec.json by generator.
   Lives at top of .protocol-content per `.claude/rules/structured_content_data_layer.md`. */
.supplement-stack-summary {
  margin: 8px 0 40px;
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--hairline);
}
.supplement-stack-summary > .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
}
.supplement-stack-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 640px;
}

/* Protocol-page per-supplement spec-card (extracted from H3+H4 structure by JS) */
.supplement-card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 24px 24px 20px;
  margin: 24px 0;
  box-shadow: 0 1px 0 rgba(24,24,26,0.03), 0 1px 3px rgba(24,24,26,0.03);
}
.supplement-card-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-soft);
}
.supplement-spec-card { margin: 0; }
.supplement-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bg-soft);
}
.supplement-row:last-child { border-bottom: none; }
.supplement-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.supplement-value {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.supplement-drawer { margin-top: 12px; border-top: 1px solid var(--bg-soft); }
.supplement-drawer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  transition: color 0.15s;
  user-select: none;
}
.supplement-drawer > summary::-webkit-details-marker { display: none; }
.supplement-drawer > summary::marker { content: ""; }
.supplement-drawer > summary:hover { color: var(--ink); }
.supplement-drawer[open] > summary { color: var(--accent); }
.supplement-drawer[open] > summary .sk-cube { transform: rotate(90deg); }
.supplement-drawer[open] > summary .sk-cube .c { background: var(--accent); }
.supplement-drawer .drawer-body {
  padding: 8px 0 4px 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  animation: drawer-fade 0.35s ease-out;
}
.supplement-drawer .drawer-body h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 16px;
  margin-bottom: 6px;
}
@media (max-width: 600px) {
  .supplement-row { grid-template-columns: 1fr; gap: 4px; padding: 9px 0; }
  .supplement-label { padding-top: 0; }
  .supplement-drawer .drawer-body { padding-left: 0; }
}

/* (3b) Refusal-band — ambient gradient drift (always-on, touch-friendly) + cursor spotlight (desktop) */
.refusal-band { position: relative; isolation: isolate; overflow: hidden; }
.refusal-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(420px circle at 22% 28%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(360px circle at 78% 72%, rgba(96,180,168,0.07), transparent 60%);
  animation: refusal-ambient 22s ease-in-out infinite alternate;
}
.refusal-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    260px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0) 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.refusal-band.spot-active::after { opacity: 1; }
.refusal-band > * { position: relative; z-index: 1; }
@keyframes refusal-ambient {
  0%   { transform: translate3d(-8px, -6px, 0); opacity: 0.85; }
  100% { transform: translate3d(8px,   6px, 0); opacity: 1;    }
}

/* (1) 3x3 grid as category map — distinct SVG glyphs per category ----------- */
.cell-grid { row-gap: 28px; }
.domain-section-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
}
.domain-section-header .sk-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
}
.domain-section-header .sk-glyph svg { display: block; width: 24px; height: 24px; }
.domain-section-header .sk-glyph.glyph-athletic  { background: rgba(194, 93, 53, 0.08); border-color: rgba(194, 93, 53, 0.18); }
.domain-section-header .sk-glyph.glyph-sleep     { background: rgba(61,  90, 138, 0.08); border-color: rgba(61,  90, 138, 0.18); }
.domain-section-header .sk-glyph.glyph-cognitive { background: rgba(107, 74, 138, 0.08); border-color: rgba(107, 74, 138, 0.18); }
.domain-section-header .sk-glyph.glyph-cardio    { background: rgba(168, 56,  56, 0.08); border-color: rgba(168, 56,  56, 0.18); }
.domain-section-header h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.domain-section-header .domain-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}
@media (max-width: 600px) {
  .domain-section-header h4 { font-size: 16px; }
  .domain-section-header .sk-mini { width: 18px; height: 18px; }
}

/* ----------------------------------------------------------------------------
   Brand-mark domain colors + polychromatic monogram
   Six cells of the logo each carry a Stack-kit domain hue. The cherry on top
   (top-right corner) stays brand-teal to anchor the polychromatic mark to the
   brand identity.
   ---------------------------------------------------------------------------- */

/* Resting state: every rect of every monogram is INK. The mark resolves to black. */
.monogram-img rect { fill: var(--ink); }

/* Home / non-protocol "rainbow" — dedicated vivid palette (saturation 70%+)
   distinct from the site's editorial -b stops. The rainbow is a fleeting
   brand-reveal moment; the mark resolves to ink so brand consistency at-rest
   is preserved. At 28px these saturated hues read crisp against ink/light bg. */
.monogram-img.sk-mark-polychrome rect.sk-r1     { --sk-c: #ef4444; }   /* vivid red */
.monogram-img.sk-mark-polychrome rect.sk-r2     { --sk-c: #f59e0b; }   /* vivid amber */
.monogram-img.sk-mark-polychrome rect.sk-r3     { --sk-c: #10b981; }   /* vivid emerald */
.monogram-img.sk-mark-polychrome rect.sk-r4     { --sk-c: #3b82f6; }   /* vivid blue */
.monogram-img.sk-mark-polychrome rect.sk-r5     { --sk-c: #d946ef; }   /* vivid fuchsia */
.monogram-img.sk-mark-polychrome rect.sk-cherry { --sk-c: #14b8a6; }   /* vivid brand-adjacent teal */

/* On a protocol page, override ALL six rects to the page's BRIGHTER -b domain
   color so the entrance is monochromatic-in-that-color. */
html.sk-page-domain-endurance      .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-athletic-b); }
html.sk-page-domain-sleep          .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-sleep-b); }
html.sk-page-domain-cognitive      .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-cognitive-b); }
html.sk-page-domain-cardiovascular .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-cardio-b); }
html.sk-page-domain-cleanse        .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-cleanse-b); }
html.sk-page-domain-recovery       .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-recovery-b); }
html.sk-page-domain-immune         .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-immune-b); }
html.sk-page-domain-metabolic      .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-metabolic-b); }
html.sk-page-domain-hormonal       .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-hormonal-b); }
html.sk-page-domain-energy         .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-energy-b); }
html.sk-page-domain-digestive      .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-cleanse-b); }
html.sk-page-domain-mood           .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-mood-b); }
html.sk-page-domain-skin           .monogram-img.sk-mark-polychrome rect { --sk-c: var(--d-skin-b); }

/* ----------------------------------------------------------------------------
   Nav-brand stack-build entrance — six blocks stack bottom-up; top-right is
   the cherry on top. Plays on home/protocol-domain pages, resolves to ink,
   then JS gates hover replay until the current play has finished.
   ---------------------------------------------------------------------------- */

/* Stack-thunk holds each block in its domain color through the full motion —
   fill: var(--sk-c) is set EXPLICITLY at every keyframe so the browser can't
   interpolate fill toward any other value during the build. Synchronized
   fade-to-ink fires later, after all six blocks have landed. */
@keyframes sk-stack-thunk {
  0%   { fill: var(--sk-c, var(--ink)); transform: translateY(-110px) scaleY(1.15) scaleX(0.92); opacity: 0; }
  25%  { fill: var(--sk-c, var(--ink)); opacity: 1; }
  55%  { fill: var(--sk-c, var(--ink)); transform: translateY(0) scaleY(0.72) scaleX(1.20); opacity: 1; }
  72%  { fill: var(--sk-c, var(--ink)); transform: translateY(-4px) scaleY(1.06) scaleX(0.97); opacity: 1; }
  88%  { fill: var(--sk-c, var(--ink)); transform: translateY(-1px) scaleY(1.02) scaleX(0.99); opacity: 1; }
  100% { fill: var(--sk-c, var(--ink)); transform: translateY(0) scaleY(1) scaleX(1); opacity: 1; }
}
@keyframes sk-stack-cherry {
  0%   { fill: var(--sk-c, var(--ink)); transform: translateY(-150px) scaleY(1.18) scaleX(0.9); opacity: 0; }
  16%  { fill: var(--sk-c, var(--ink)); transform: translateY(-138px) scale(1); opacity: 1; }
  26%  { fill: var(--sk-c, var(--ink)); transform: translateY(-132px) scale(1); opacity: 1; }
  58%  { fill: var(--sk-c, var(--ink)); transform: translateY(0) scaleY(0.66) scaleX(1.26); opacity: 1; }
  74%  { fill: var(--sk-c, var(--ink)); transform: translateY(-5px) scaleY(1.08) scaleX(0.95); opacity: 1; }
  87%  { fill: var(--sk-c, var(--ink)); transform: translateY(-1px) scaleY(1.02) scaleX(0.99); opacity: 1; }
  100% { fill: var(--sk-c, var(--ink)); transform: translateY(0) scaleY(1) scaleX(1); opacity: 1; }
}
/* Synchronized fade-to-ink — runs after the cherry lands; all six rects fade
   together so the mark resolves to black as one. */
@keyframes sk-fade-to-ink {
  from { fill: var(--sk-c, var(--ink)); }
  to   { fill: var(--ink); }
}

/* RESTORED 2026-05-31, enriched 2026-06-04: sweep + twinkle logo variants
   (rotated by the head script alongside stack). Lengthened + hold the color
   longer so each variant plays fully through before settling to ink — keeps the
   variety/charm without the abrupt black-out. The html.sk-anim-sweep/twinkle
   prefix is more specific than the stack per-rect rules, so it wins on those
   reloads. All three rest at ink. */
@keyframes sk-sweep-flash {
  0%   { fill: var(--ink); }
  20%  { fill: var(--sk-c, var(--ink)); }
  68%  { fill: var(--sk-c, var(--ink)); }
  100% { fill: var(--ink); }
}
@keyframes sk-twinkle-flash {
  0%   { fill: var(--ink);              transform: scale(1); }
  22%  { fill: var(--sk-c, var(--ink)); transform: scale(1.16); }
  42%  { fill: var(--sk-c, var(--ink)); transform: scale(0.96); }
  60%  { fill: var(--sk-c, var(--ink)); transform: scale(1.08); }
  78%  { fill: var(--sk-c, var(--ink)); transform: scale(1.0); }
  100% { fill: var(--ink);              transform: scale(1); }
}
/* SWEEP — a colour wash that travels across the blocks, holds, then eases to ink. */
html.sk-anim-sweep   .monogram-img.sk-stack rect { animation: none; opacity: 1; transform: none; fill: var(--ink); }
html.sk-anim-sweep   .monogram-img.sk-stack rect.sk-r1     { animation: sk-sweep-flash 1.15s ease-in-out 0.00s forwards; }
html.sk-anim-sweep   .monogram-img.sk-stack rect.sk-r2     { animation: sk-sweep-flash 1.15s ease-in-out 0.13s forwards; }
html.sk-anim-sweep   .monogram-img.sk-stack rect.sk-r4     { animation: sk-sweep-flash 1.15s ease-in-out 0.21s forwards; }
html.sk-anim-sweep   .monogram-img.sk-stack rect.sk-r3     { animation: sk-sweep-flash 1.15s ease-in-out 0.26s forwards; }
html.sk-anim-sweep   .monogram-img.sk-stack rect.sk-r5     { animation: sk-sweep-flash 1.15s ease-in-out 0.34s forwards; }
html.sk-anim-sweep   .monogram-img.sk-stack rect.sk-cherry { animation: sk-sweep-flash 1.15s ease-in-out 0.47s forwards; }
/* TWINKLE — blocks pop/sparkle from their centres with a little bounce, then settle. */
html.sk-anim-twinkle .monogram-img.sk-stack rect { animation: none; opacity: 1; transform: none; transform-origin: 50% 50%; fill: var(--ink); }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r1     { animation: sk-twinkle-flash 1.30s ease-out 0.00s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r3     { animation: sk-twinkle-flash 1.30s ease-out 0.14s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r2     { animation: sk-twinkle-flash 1.30s ease-out 0.26s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r5     { animation: sk-twinkle-flash 1.30s ease-out 0.38s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r4     { animation: sk-twinkle-flash 1.30s ease-out 0.50s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-cherry { animation: sk-twinkle-flash 1.30s ease-out 0.64s forwards; }

.monogram-img.sk-stack rect {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-fill-mode: both;
}

/* Tempo knobs — overridden per-domain so each protocol-domain stack-build has
   its own cadence/feel (slow + restful for sleep, snappy + light for cognitive,
   etc.). Defaults below are the "rainbow" / non-protocol cadence. */
.monogram-img.sk-stack {
  --sk-thunk-dur: 0.72s;
  --sk-stagger: 0.19s;
  --sk-cherry-dur: 1.00s;
  --sk-cherry-delay: 1.40s;
  --sk-fade-pause: 0.65s;   /* hold all-color beat after cherry lands */
  --sk-fade-dur: 0.70s;     /* duration of the synchronized fade-to-ink */
}
/* Rainbow (non-protocol pages) holds longer — it's the brand-reveal moment and
   the polychromatic state needs more time to register than a monochromatic one. */
html:not([class*="sk-page-domain-"]) .monogram-img.sk-stack {
  --sk-fade-pause: 1.40s;
}
/* Per-domain tempo — grouped into 3 feels (slow / medium / fast). */
html.sk-page-domain-sleep        .monogram-img.sk-stack,
html.sk-page-domain-recovery     .monogram-img.sk-stack,
html.sk-page-domain-cleanse      .monogram-img.sk-stack,
html.sk-page-domain-immune       .monogram-img.sk-stack { --sk-thunk-dur: 0.88s; --sk-stagger: 0.24s; --sk-cherry-dur: 1.15s; --sk-cherry-delay: 1.75s; }

html.sk-page-domain-cognitive       .monogram-img.sk-stack,
html.sk-page-domain-cardiovascular  .monogram-img.sk-stack,
html.sk-page-domain-metabolic       .monogram-img.sk-stack,
html.sk-page-domain-hormonal        .monogram-img.sk-stack { --sk-thunk-dur: 0.70s; --sk-stagger: 0.19s; --sk-cherry-dur: 1.00s; --sk-cherry-delay: 1.40s; }

html.sk-page-domain-endurance .monogram-img.sk-stack,
html.sk-page-domain-energy    .monogram-img.sk-stack { --sk-thunk-dur: 0.55s; --sk-stagger: 0.13s; --sk-cherry-dur: 0.85s; --sk-cherry-delay: 1.05s; }

/* Initial entrance — every rect runs two animations: the per-block thunk
   (or cherry), and then the synchronized fade-to-ink shared by all six. */
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect { opacity: 0; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r1     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(0.10s + var(--sk-stagger) * 0) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(0.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r2     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(0.10s + var(--sk-stagger) * 1) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(0.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r3     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(0.10s + var(--sk-stagger) * 2) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(0.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r4     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(0.10s + var(--sk-stagger) * 3) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(0.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r5     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(0.10s + var(--sk-stagger) * 4) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(0.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-cherry { animation:
    sk-stack-cherry var(--sk-cherry-dur) cubic-bezier(.4,1.85,.5,1)   var(--sk-cherry-delay) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(0.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }

html.sk-anim-settled .monogram-img.sk-stack rect {
  opacity: 1;
  animation: none;
  transform: none;
  fill: var(--ink);
}

/* JS-guarded hover replay — same animations, but skip the initial 0.10s lead-in. */
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect {
  opacity: 0;
  animation: none;
}
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect.sk-r1     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger) * 0) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(var(--sk-cherry-delay) - 0.10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect.sk-r2     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger) * 1) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(var(--sk-cherry-delay) - 0.10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect.sk-r3     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger) * 2) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(var(--sk-cherry-delay) - 0.10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect.sk-r4     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger) * 3) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(var(--sk-cherry-delay) - 0.10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect.sk-r5     { animation:
    sk-stack-thunk  var(--sk-thunk-dur)  cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger) * 4) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(var(--sk-cherry-delay) - 0.10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay nav.site .brand .monogram-img.sk-stack rect.sk-cherry { animation:
    sk-stack-cherry var(--sk-cherry-dur) cubic-bezier(.4,1.85,.5,1)   calc(var(--sk-cherry-delay) - 0.10s) both,
    sk-fade-to-ink  var(--sk-fade-dur)  ease-out                       calc(var(--sk-cherry-delay) - 0.10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }

/* Skipped entrance: non-animated pages show the resting ink mark immediately.
   The <html class="sk-logo-seen"> flag is set by inline script in <head>. */
html.sk-logo-seen .monogram-img.sk-stack rect {
  opacity: 1;
  animation: none;
  transform: none;
  fill: var(--ink);
}

/* Reduced-motion respect ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .domain-badge, .spec-badge { animation: none !important; }
  .spec-showcase .spec-row,
  .spec-showcase .spec-divider,
  .spec-showcase .spec-drawer { animation: none; opacity: 1; transform: none; }
  .sk-cube { transition: none; }
  .spec-drawer .drawer-body,
  .protocol-drawer .drawer-body { animation: none; }
  .refusal-band::before { animation: none; transform: none; }
  .refusal-band::after { display: none; }
  /* Stack-build: skip animation entirely, show all six blocks at rest */
  .monogram-img.sk-stack rect { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------------------------
   Polish batch 2026-05-31 (CC, Class-1 technical-evidence; all reversible)
   ---------------------------------------------------------------------------- */
/* Nav links: crisper, deliberate weight (was inline 500). Later source order
   overrides the inline `nav.site .links a` rule at equal specificity. */
nav.site .links a { font-weight: 600; }
/* Current-page nav link reads as "you are here" rather than a hover target. */
nav.site .links a[aria-current="page"] { color: var(--ink); cursor: default; }
/* Hide the sk: taxonomy slug on public browse cards — system IDs shouldn't
   leak to readers. .sk-tag stays available for any future non-card use.
   Specificity (0,2,0) beats the bare `.sk-tag` display rule (0,1,0). */
.cell-card .sk-tag { display: none; }
/* sk: taxonomy reclaimed as a deliberate domain kicker on the protocols index
   (one per drawer — the designed counterpart to the per-card slug we hid). */
.domain-drawer .sk-namespace {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--accent);
  margin-bottom: 3px; line-height: 1;
}
/* Keyboard accessibility: a visible brand focus ring on interactive elements
   (was missing site-wide). Shows for keyboard nav, suppressed on mouse click.
   Outline follows each element's own border-radius in modern browsers. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* Text selection in brand teal — small premium touch. */
::selection { background: var(--accent-tint); color: var(--accent-ink); }

/* ----------------------------------------------------------------------------
   Polish batch 2 (design-audit findings) 2026-05-31 — shared overrides, reversible
   ---------------------------------------------------------------------------- */
/* Editorial vertical rhythm: breathing space above section headings (were flush
   against prior prose). Scoped to h2/h3 — h4 is left alone since the supplement
   card name is an h4 with its own in-card layout. */
.protocol-content h2, .page-editorial h2 { margin-top: 40px; }
.protocol-content h3, .page-editorial h3 { margin-top: 28px; }
.protocol-content h2:first-child, .page-editorial h2:first-child,
.protocol-content h3:first-child, .page-editorial h3:first-child { margin-top: 0; }

/* Reading measure: cap editorial body to ~68ch (was running ~110ch in the 900px wrap). */
.page-editorial > p, .protocol-content > p,
.page-editorial > ol, .page-editorial > ul { max-width: 68ch; }

/* Editorial list rhythm (the global reset zeroed list padding/marker indent). */
.protocol-content ol, .protocol-content ul,
.page-editorial ol, .page-editorial ul { margin: 16px 0; padding-left: 24px; }
.protocol-content li, .page-editorial li { margin-bottom: 8px; line-height: 1.6; }

/* Operator: ONLY energy (light gold) uses ink hero text; every other band uses white.
   White text carries a subtle shadow so it stays legible on the lighter warm bands. */
.cell-hero-band.d-energy, .cell-hero-band.d-energy h1 { color: var(--ink) !important; }
.cell-hero-band.d-energy .eyebrow,
.cell-hero-band.d-energy .hero-meta { color: var(--ink-2) !important; }
.cell-hero-band:not(.d-energy) h1,
.cell-hero-band:not(.d-energy) .eyebrow,
.cell-hero-band:not(.d-energy) .hero-meta { text-shadow: 0 1px 3px rgba(0,0,0,0.30); }

/* Focus-ring corrections to the rings added above: visible on dark surfaces +
   on the teal CTA (a teal ring on a teal button was invisible). */
.refusal-band :focus-visible, .bg-dark :focus-visible { outline-color: var(--ink-on-dark); }
.cta:focus-visible { outline-color: var(--ink); outline-offset: 3px; }

/* WCAG AA: darken prose-link hover (accent-soft was 4.18:1 on cream). Scoped to
   reading content so dark-chrome links keep their own treatment. */
.protocol-content a:hover, .page-editorial a:hover { color: var(--accent-ink); }

/* Mobile: keep the colon-joined sk: slug eyebrow from forcing horizontal scroll. */
.cell-hero-band .eyebrow { overflow-wrap: anywhere; max-width: 100%; }

/* Mobile tap targets (WCAG 2.5.x): nav links + TOC chips clear the ~44px floor. */
@media (max-width: 480px) {
  nav.site .links { gap: 12px; }
  nav.site .links a { padding: 12px 6px; }
}
.protocol-toc-chip { min-height: 44px; display: inline-flex; align-items: center; }

/* Reduced-motion: suppress the one infinite loop the contract missed. */
@media (prefers-reduced-motion: reduce) { .sk-pulse > * { animation: none !important; } }

/* Spacing grid: on-grid step + tighter editorial-note gap. */
.stack-commerce-note { margin-top: 12px !important; }
.editorial-note { margin-top: 40px; }

/* QA: white badge text legibility shadow on the lighter domain bands (energy uses ink). */
.domain-badge:not(.bg-d-energy), .spec-badge:not(.bg-d-energy) { text-shadow: 0 1px 2px rgba(0,0,0,0.28); }

/* QA: keep a visible focus ring on the newsletter email input. */
.newsletter-input-focus, footer input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* QA: buy link is now a sibling of the toggle, not nested in the label. Toggle wraps only checkbox+name; display:contents keeps the original grid columns. */
.stack-commerce-item-toggle { display: contents; cursor: pointer; }