/* ==========================================================================
   Metabolic Uncle — Blog stylesheet (/blog)   [SELECTED DESIGN]
   ==========================================================================
   Structure: the original App Glass skin, followed by the approved override block
   ("GLASS + PROTOCOL"). The override is appended rather than merged in because the
   owner signed off on exactly this cascade; folding the two together by hand would
   risk silent regressions in a design that took several rounds to settle.
   The later block wins wherever the two disagree — that is intentional.

   Contains: the 21.3px reading scale, one text edge across masthead / body / cards,
   the protocol navigation (contents card + payoff panels), and the day view.
   A future cleanup could flatten the two halves; it is cosmetic, not behavioural.
   ========================================================================== */
/* ==========================================================================
   Metabolic Uncle — Blog stylesheet (/blog)
   Mirrors the app design system (liquid-card glass, one gold #D4AF37, canvas
   #1E1E1E, 22px root) but ships standalone: zero React, zero app-bundle CSS.
   Dark-committed, matching the app. Long-form reading first; motion is decorative
   and gated behind prefers-reduced-motion.
   ========================================================================== */

:root {
  --canvas: #1E1E1E;
  --canvas-card: #262626;
  --canvas-elevated: #2E2E2E;
  --gold: #D4AF37;
  --gold-hover: #E0BC45;
  --gold-dark: #A68B61;
  --sage: #8FA38D;
  --ai: #14B8A6;
  --ink: #FFFFFF;
  --ink-muted: #A3A3A3;
  --ink-dim: #7A7A7A;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-soft: rgba(255, 255, 255, 0.05);

  --measure: 68ch;
  --radius: 1.5rem;
  --radius-sm: 0.85rem;

  --glass: linear-gradient(165deg,
      rgba(50, 50, 55, 0.92) 0%, rgba(40, 40, 45, 0.88) 30%,
      rgba(32, 32, 36, 0.85) 60%, rgba(26, 26, 30, 0.82) 100%);
  --glass-shadow:
      0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 2px 8px 0 rgba(0, 0, 0, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
      inset 0 -1px 0 0 rgba(0, 0, 0, 0.15);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

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

html {
  font-size: 22px; /* app design canon: 22px root rem scale */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--canvas);
  /* Tasteful on-brand glow: a soft gold aura at the top, fading to flat canvas. */
  background-image:
    radial-gradient(1100px 520px at 50% -280px, rgba(212, 175, 55, 0.10), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, rgba(20, 184, 166, 0.05), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }

.post__header h1 {
  font-size: 2.15rem;
  line-height: 1.12;
  margin: 0.2rem 0 0.75rem;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.post__body h2 {
  font-size: 1.5rem;
  margin: 2.4rem 0 0.9rem;
  padding-top: 0.4rem;
  scroll-margin-top: 1.5rem;
}
.post__body h3 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; color: #ededed; }
.post__body p { margin: 0 0 1.15rem; color: #e4e4e4; }
.post__body ul, .post__body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; color: #e4e4e4; }
.post__body li { margin: 0.35rem 0; }
.post__body strong { color: #fff; font-weight: 650; }

a { color: var(--gold); text-decoration: none; }
.post__body a {
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.post__body a:hover { color: var(--gold-hover); border-color: var(--gold-hover); }

/* --- Back-to-blog navigation --------------------------------------------- */
.backlink {
  display: inline-block; margin: 0 0 1.4rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); transition: color 0.15s;
}
.backlink:hover { color: var(--gold); }
a.blog__brand { text-decoration: none; }
a.blog__brand:hover { color: var(--gold-hover); }

/* --- Post meta ----------------------------------------------------------- */
.post__meta {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}
.post__meta time { color: var(--gold); }
.post__dot { color: var(--ink-dim); }

/* --- Liquid-glass panel base (mirrors .liquid-card) ---------------------- */
.tldr, .keyfacts, .promo, .audio, .references, .related, .card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--hair);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.tldr::before, .keyfacts::before, .promo::before, .card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.026) 40%, transparent 100%);
  pointer-events: none; border-radius: inherit; z-index: 0;
}
.tldr > *, .keyfacts > * { position: relative; z-index: 1; }

/* --- TL;DR + Key facts (gold left border, like the course player callouts) */
.tldr, .keyfacts {
  padding: 1.15rem 1.35rem 1.15rem 1.5rem;
  margin: 0 0 1.35rem;
  border-left: 4px solid var(--gold);
}
.keyfacts { border-left-color: var(--sage); }
.tldr h2, .keyfacts h2 {
  font-size: 0.62rem; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.14em; margin: 0 0 0.7rem;
}
.tldr h2 { color: var(--gold); }
.keyfacts h2 { color: var(--sage); }
.tldr ul, .keyfacts ul { margin: 0; padding-left: 1.1rem; }
.tldr li, .keyfacts li { margin: 0.4rem 0; color: #ededed; font-size: 0.9rem; }
.tldr li::marker { color: var(--gold); }
.keyfacts li::marker { color: var(--sage); }

/* --- Promo unit (the animated ad — liquid-card-gold + moving aura) -------- */
.promo { margin: 0 0 2rem; border-color: rgba(212, 175, 55, 0.22); }
.promo:hover {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 12px 44px 0 rgba(212, 175, 55, 0.16), var(--glass-shadow);
  transform: translateY(-1px);
}
.promo { transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.35s, box-shadow 0.35s; }
.promo__link { display: grid; grid-template-columns: 8.5rem 1fr; align-items: stretch; color: inherit; }
.promo__art {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(212, 175, 55, 0.55), transparent 55%),
    radial-gradient(140% 140% at 90% 90%, rgba(20, 184, 166, 0.35), transparent 55%),
    linear-gradient(150deg, #2a2a2e, #1c1c20);
}
.promo__art::before {
  content: ''; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(212, 175, 55, 0.5) 12%, transparent 30%);
  animation: promo-spin 7s linear infinite;
}
.promo__art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(20,20,22,0.65) 100%);
}
@keyframes promo-spin { to { transform: rotate(360deg); } }
.promo__copy { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.15rem 1.35rem; position: relative; z-index: 1; }
.promo__eyebrow { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.promo__heading { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
.promo__body { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.5; }
.promo__cta {
  margin-top: 0.35rem; align-self: flex-start; font-size: 0.72rem; font-weight: 600;
  color: #1a1a1a; background: linear-gradient(180deg, var(--gold-hover), var(--gold));
  padding: 0.4rem 0.9rem; border-radius: 999px;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* --- Audio (native player, styled on-brand) ------------------------------ */
.audio { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1.05rem; margin: 0.4rem 0 0; }
.audio__label {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: 0.4rem;
}
.audio__label::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.audio__player { width: 100%; height: 2.2rem; accent-color: var(--gold); }
.audio__player::-webkit-media-controls-panel { background: var(--canvas-elevated); }

/* --- Video facade (no third-party request until click) ------------------- */
.video { margin: 2rem 0; }
.video-facade { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair); }
.video-facade__poster {
  position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(212, 175, 55, 0.18), transparent 60%),
    linear-gradient(150deg, #26262b, #161619);
}
.video-facade__play {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hover), var(--gold));
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45), 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative; animation: play-pulse 2.4s ease-out infinite;
}
.video-facade__play::before {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem; border-color: transparent transparent transparent #1a1a1a;
}
@keyframes play-pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5), 0 10px 30px rgba(0,0,0,0.5); }
  70% { box-shadow: 0 0 0 1.6rem rgba(212, 175, 55, 0), 0 10px 30px rgba(0,0,0,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 10px 30px rgba(0,0,0,0.5); }
}
.video-facade__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1.1rem;
  font-size: 0.78rem; color: #fff; font-weight: 600;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
}
.video-facade.is-loaded { cursor: default; }
.video-facade__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
/* Featured hero image */
.hero { margin: 0.4rem 0 1.6rem; }
.hero__img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--hair); }

/* Self-hosted native video (no ads, no third-party) */
.video-native { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: var(--radius); border: 1px solid var(--hair); background: #000; }
.video__caption { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--ink-muted); }

/* --- References ---------------------------------------------------------- */
.references { padding: 1.2rem 1.4rem; margin: 2rem 0 0; }
.references h2 { font-size: 0.95rem; margin: 0 0 0.7rem; color: var(--ink); }
.references__list { margin: 0; padding-left: 1.4rem; }
.references__list li { margin: 0.5rem 0; font-size: 0.78rem; color: var(--ink-muted); }
.references__list li::marker { color: var(--gold); font-family: var(--font-mono); }
.references__list a { color: #cfcfcf; border-bottom: 1px solid var(--hair); }
.references__list a:hover { color: var(--gold-hover); border-color: var(--gold-hover); }

/* --- Related ------------------------------------------------------------- */
.related { padding: 1.2rem 1.4rem; margin: 1.4rem 0 0; }
.related h2 { font-size: 0.95rem; margin: 0 0 0.8rem; }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.related__list a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); border: 1px solid var(--hair-soft); transition: border-color 0.2s, background 0.2s; }
.related__list a:hover { border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.04); }
.related__title { color: #fff; font-weight: 600; font-size: 0.85rem; }
.related__desc { color: var(--ink-muted); font-size: 0.74rem; line-height: 1.4; }

/* --- Footer -------------------------------------------------------------- */
.blog__footer {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
}
.blog__brand { font-weight: 700; color: var(--gold); letter-spacing: -0.01em; }
.blog__about { font-size: 0.78rem; color: var(--ink-muted); }
.blog__disclaimer { font-size: 0.74rem; color: var(--ink-muted); margin: 0; opacity: 0.8; }
.blog__nav { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.75rem; }
.blog__nav a { color: var(--ink-muted); }
.blog__nav a:hover { color: var(--gold); }

/* --- Index page ---------------------------------------------------------- */
.index__header { padding: 2rem 0 1.6rem; text-align: center; }
.index__header h1 {
  font-size: 2.4rem; margin: 0 0 0.5rem; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.index__tagline { color: var(--ink-muted); font-size: 0.9rem; margin: 0; }
.cards { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.card { transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1), border-color 0.35s, box-shadow 0.35s; }
.card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.3); box-shadow: 0 12px 40px rgba(212,175,55,0.12), var(--glass-shadow); }
.card a { display: block; padding: 1.3rem 1.5rem; color: inherit; position: relative; z-index: 1; }
.card__title { font-size: 1.2rem; margin: 0 0 0.4rem; color: #fff; letter-spacing: -0.01em; }
.card__desc { color: var(--ink-muted); font-size: 0.82rem; margin: 0 0 0.7rem; line-height: 1.5; }
.card__meta { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.card--empty { padding: 2.5rem; text-align: center; color: var(--ink-muted); }
.card--empty p { margin: 0; }

/* --- Overview filter (spec D: narrowing only, empty = the full list) ------ */
.filter { margin: 1.4rem 0 0; display: grid; gap: 0.6rem; }
.filter__input {
  font-family: var(--font-sans); font-size: 0.88rem; color: var(--ink);
  background: var(--canvas-elevated); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); padding: 0.7rem 1rem; width: 100%;
  outline: none; transition: border-color 0.2s;
}
.filter__input::placeholder { color: var(--ink-dim); }
.filter__input:focus { border-color: rgba(212,175,55,0.45); }
.filter__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter__tag {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em;
  color: var(--ink-muted); background: transparent; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 999px; padding: 0.32rem 0.75rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.filter__tag:hover { color: var(--gold); border-color: rgba(212,175,55,0.35); }
.filter__tag.is-active {
  color: #1E1E1E; background: var(--gold); border-color: var(--gold); font-weight: 600;
}
.filter__status { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; color: var(--ink-dim); margin: 0; min-height: 1em; }
.filter__clear {
  font: inherit; color: var(--gold); background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline;
}
:root[data-theme="light"] .filter__input { background: #fff; }
:root[data-theme="light"] .filter__tag.is-active { color: #fff; }

/* --- Responsive (mobile 375, thumb-first) -------------------------------- */
@media (max-width: 640px) {
  html { font-size: 20px; }
  .filter { gap: 0.5rem; margin-top: 1rem; }
  .wrap { padding: 1rem 1rem 3rem; }
  .post__header h1 { font-size: 1.85rem; }
  .post__body h2 { font-size: 1.3rem; }
  .promo__link { grid-template-columns: 1fr; }
  .promo__art { min-height: 5.5rem; }
  .index__header h1 { font-size: 2rem; }
}

/* --- Motion safety ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Rotating product banner + share row (template components added later).
   The banner supersedes the old single .promo unit; every slide is real text
   in the DOM, so crawlers read all four whichever is visually foremost.
   ========================================================================== */
.field { display: none; }               /* this skin uses its own body gradient */
.rotator {
  position: relative; overflow: hidden; margin: 0 0 2rem;
  border-radius: var(--radius); background: var(--glass);
  border: 1px solid rgba(212,175,55,0.22); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.rotator__art {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 8% 0%, rgba(212,175,55,0.22), transparent 58%);
}
.rotator__track { list-style: none; margin: 0; padding: 0; display: grid; }
.rotator__slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s ease;
}
.rotator__slide.is-active { opacity: 1; visibility: visible; }
.rotator__link { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.4rem; text-decoration: none; color: inherit; position: relative; z-index: 1; }
.rotator__label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.rotator__heading { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.25; }
.rotator__body { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.5; }
.rotator__cta {
  margin-top: 0.4rem; align-self: flex-start; font-size: 0.7rem; font-weight: 600; color: #1a1a1a;
  background: linear-gradient(180deg, var(--gold-hover), var(--gold)); padding: 0.38rem 0.9rem; border-radius: 999px;
}
.rotator__dots { position: absolute; right: 1.1rem; bottom: 1rem; display: flex; gap: 0.4rem; z-index: 2; }
.rotator__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.25); transition: background 0.25s, transform 0.25s; }
.rotator__dot.is-active { background: var(--gold); transform: scale(1.3); }

.share {
  margin: 2.2rem 0 0; padding: 1.15rem 1.3rem; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 0.8rem; align-items: center; text-align: center;
}
.share__label { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.share__row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.share__btn {
  width: 2.3rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--hair); background: rgba(255,255,255,0.03);
  color: var(--ink-muted); cursor: pointer; padding: 0; transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
}
.share__btn svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.share__btn:hover { color: #1a1a1a; background: linear-gradient(180deg, var(--gold-hover), var(--gold)); border-color: var(--gold); transform: translateY(-2px); }
.share__btn.is-copied { color: #1a1a1a; background: var(--sage); border-color: var(--sage); }
@media (prefers-reduced-motion: reduce) { .rotator__slide { transition: none; } }

/* Focus rings: these are the last interactive controls on the page and the most
   likely to be reached by keyboard. Every one needs a visible ring. */
.share__btn:focus-visible, .rotator__dot:focus-visible, .rotator__link:focus-visible,
.backlink:focus-visible, .card a:focus-visible {
  outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}
.share__btn:active { transform: scale(0.94); }
.share__status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.share { position: relative; }

/* --- Day/night toggle control ---------------------------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.topbar--index { justify-content: flex-end; margin-bottom: 0; }
.topbar .backlink { margin: 0; }
.theme-toggle {
  width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--hair); background: transparent;
  color: var(--ink-muted); cursor: pointer; padding: 0; flex: none;
  transition: color .18s, border-color .18s, background .18s;
}
.theme-toggle svg { width: .85rem; height: .85rem; fill: currentColor; }
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* Show the theme you would switch TO, not the one you are in. Dark now offers a sun
   ("go light"); light offers a moon. The previous rule did the opposite of the comment
   directly above it, so the control advertised the state you were already looking at. */
.theme-toggle__sun { display: block; }
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }

/* ==========================================================================
   DAY VIEW. Only the palette flips; every rule above is reused. Gold #D4AF37
   scores ~2:1 on white, so light mode uses a deeper gold for anything that
   carries text and keeps the bright gold for fills and accents only.
   ========================================================================== */
:root[data-theme="light"] {
  --canvas: #FBF9F4;
  --canvas-card: #FFFFFF;
  --canvas-elevated: #F3F0E8;
  --gold: #7C5E14;            /* text-safe gold */
  --gold-hover: #5E460E;
  --sage: #55684F;
  --ink: #1B1A17;
  --ink-muted: #5C574E;
  --ink-dim: #7C766B;
  --hair: rgba(27, 26, 23, 0.14);
  --hair-soft: rgba(27, 26, 23, 0.07);
  --glass: linear-gradient(165deg, rgba(255,255,255,0.96) 0%, rgba(250,247,240,0.92) 100%);
  --glass-shadow: 0 8px 28px 0 rgba(60, 50, 20, 0.08), inset 0 0 0 1px rgba(27,26,23,0.05);
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 520px at 50% -280px, rgba(212, 175, 55, 0.16), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, rgba(20, 184, 166, 0.06), transparent 60%);
}
:root[data-theme="light"] .post__header h1 { background: none; -webkit-text-fill-color: initial; color: var(--ink); }
:root[data-theme="light"] .post__body h3 { color: #2A2822; }
:root[data-theme="light"] .post__body p,
:root[data-theme="light"] .post__body ul,
:root[data-theme="light"] .post__body ol { color: #2E2C26; }
:root[data-theme="light"] .post__body strong { color: #12110F; }
:root[data-theme="light"] .tldr li, :root[data-theme="light"] .keyfacts li { color: #2E2C26; }
:root[data-theme="light"] .rotator__heading, :root[data-theme="light"] .card__title { color: var(--ink); }
:root[data-theme="light"] .rotator__cta, :root[data-theme="light"] .promo__cta { color: #FFF9E8; background: linear-gradient(180deg, #9A7618, #7C5E14); }
:root[data-theme="light"] .rotator__dot { background: rgba(27,26,23,0.22); }
:root[data-theme="light"] .share__btn:hover { color: #FFF9E8; background: linear-gradient(180deg, #9A7618, #7C5E14); }
:root[data-theme="light"] .rotator__art, :root[data-theme="light"] .promo__art::before { opacity: .5; }

/* The base skin hardcodes near-white text for headings, strong, related/card titles
   and reference links. Those are invisible on a light card, so each needs a
   light-mode counterpart. (The reference links were #cfcfcf — effectively gone.) */
:root[data-theme="light"] .post__body h3,
:root[data-theme="light"] .post__body strong,
:root[data-theme="light"] .related__title,
:root[data-theme="light"] .card__title,
:root[data-theme="light"] .rotator__heading,
:root[data-theme="light"] .promo__heading { color: var(--ink); }
:root[data-theme="light"] .references__list a {
  color: var(--gold); border-bottom-color: rgba(124, 94, 20, 0.35);
}
:root[data-theme="light"] .references__list a:hover { color: var(--gold-hover); }


/* ==========================================================================
   GLASS + PROTOCOL  —  single override block appended to blog.css.
   Nothing below is duplicated: this file is regenerated from blog.css, never
   edited in place (an in-place patch previously duplicated the day-view block
   and the stale copy won).
   ========================================================================== */
:root {
  --fs-micro: 0.55rem;
  --fs-meta:  0.70rem;
  --fs-small: 0.86rem;
  --fs-body:  0.97rem;      /* 21.3px at the 22px root */
  --fs-h3:    1.16rem;
  --fs-h2:    1.45rem;
  --fs-h1:    2.20rem;
  --lh-body:  1.55;
  --lh-tight: 1.15;
}
body, .post__body, .tldr li, .keyfacts li { font-size: var(--fs-body); line-height: var(--lh-body); }
.rotator__body, .promo__body, .card__desc, .related__desc, .index__tagline { font-size: var(--fs-small); }
.post__header h1, .index__header h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.post__body h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.post__body h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
.rotator__heading, .promo__heading, .related__title { font-size: var(--fs-h3); }
.card__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.references__list li, .blog__about, .blog__nav, .video__caption { font-size: var(--fs-meta); }
.wrap { max-width: 38rem; }

/* ---- contents ------------------------------------------------------------ */
.jump { display: none; }
.contents {
  margin: 0 0 1.6rem; padding: 1rem 1.3rem; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.contents__label {
  font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.2em; margin: 0 0 0.7rem; color: var(--ink-muted);
}
.contents__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.34rem; }
.contents__item a { color: var(--ink-muted); text-decoration: none; font-size: var(--fs-small); transition: color .15s; }
.contents__item.is-payoff a { color: var(--gold); font-weight: 650; }
.contents__item.is-payoff a::after { content: ' \2192'; }

/* ---- payoff sections: ONE homogeneous field ------------------------------ */
.payoff {
  margin: 2.6rem 0 1.8rem; padding: 1.3rem 1.5rem 1.5rem; border-radius: var(--radius);
  background: var(--glass); border: 1px solid rgba(212, 175, 55, 0.26);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.payoff > h2 { margin-top: 0; padding-top: 0; color: var(--gold); }
.payoff > h2::before, .payoff > h2::after { display: none; }
.payoff > h3 { margin-top: 1.5rem; }
.payoff > *:last-child { margin-bottom: 0; }
.payoff > ol { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.payoff > ol li { counter-increment: step; position: relative; padding-left: 2.5rem; margin: 0.85rem 0; }
.payoff > ol li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.12em;
  font-family: var(--font-mono); font-size: 0.7em; font-weight: 600; color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.42); border-radius: 4px; padding: 0.06em 0.32em;
}

/* ==========================================================================
   DAY VIEW
   ONE card colour in a tight range — the earlier near-white -> cream gradient
   made a single card change colour down its own height.
   Every hardcoded near-white in the base skin gets a counterpart here, and every
   :hover gets one too: a `:root[data-theme=light] .x a` rule outranks a plain
   `.x a:hover`, so without these the light view simply loses its hover states.
   ========================================================================== */
:root[data-theme="light"] {
  --canvas:          #E8DFCC;
  --canvas-card:     #F7F2E6;
  --canvas-elevated: #FBF7ED;
  --gold:            #6B4F0E;
  --gold-hover:      #97701A;
  --gold-dark:       #4E3906;
  --sage:            #46583F;
  --ink:             #14130D;
  --ink-muted:       #565147;
  --ink-dim:         #78725F;
  --hair:            rgba(20, 19, 13, 0.15);
  --hair-soft:       rgba(20, 19, 13, 0.07);
  --glass: linear-gradient(165deg, #F8F3E8 0%, #F4EFE2 100%);
  --glass-shadow:
      0 12px 30px -14px rgba(58, 45, 15, 0.22),
      0 2px 5px -2px rgba(58, 45, 15, 0.14),
      inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 520px at 50% -280px, rgba(190, 152, 44, 0.28), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, rgba(20, 184, 166, 0.05), transparent 60%);
}
/* text that is hardcoded near-white in the base skin */
:root[data-theme="light"] .post__body p,
:root[data-theme="light"] .post__body ul,
:root[data-theme="light"] .post__body ol,
:root[data-theme="light"] .tldr li,
:root[data-theme="light"] .keyfacts li { color: #2B2921; }
:root[data-theme="light"] .post__body h3,
:root[data-theme="light"] .post__body strong,
:root[data-theme="light"] .related__title,
:root[data-theme="light"] .card__title,
:root[data-theme="light"] .rotator__heading,
:root[data-theme="light"] .promo__heading { color: var(--ink); }
:root[data-theme="light"] .post__header h1 {
  background: none; -webkit-text-fill-color: initial; color: var(--ink);
}
:root[data-theme="light"] .references__list a { color: var(--gold); border-bottom-color: rgba(107,79,14,0.35); }

/* --- HOVER STATES. Each needs the same specificity as its light colour rule,
       or the static colour outranks the hover and nothing changes. ---------- */
:root[data-theme="light"] .post__body a:hover,
:root[data-theme="light"] .references__list a:hover,
:root[data-theme="light"] .contents__item a:hover,
:root[data-theme="light"] .related__list a:hover .related__title,
:root[data-theme="light"] .card:hover .card__title,
:root[data-theme="light"] .blog__nav a:hover,
:root[data-theme="light"] .backlink:hover,
:root[data-theme="light"] .blog__brand:hover,
:root[data-theme="light"] .theme-toggle:hover { color: var(--gold-hover); }
:root[data-theme="light"] .post__body a:hover,
:root[data-theme="light"] .references__list a:hover { border-bottom-color: var(--gold-hover); }

:root[data-theme="light"] .payoff { border-color: rgba(107, 79, 14, 0.26); }
:root[data-theme="light"] .payoff > ol li::before { border-color: rgba(107, 79, 14, 0.42); }
:root[data-theme="light"] .rotator__cta,
:root[data-theme="light"] .promo__cta,
:root[data-theme="light"] .share__btn:hover {
  color: #FBF7ED; background: linear-gradient(180deg, #86641A, #6B4F0E); border-color: #6B4F0E;
}
:root[data-theme="light"] .rotator__dot { background: rgba(20, 19, 13, 0.22); }
:root[data-theme="light"] .rotator__art, :root[data-theme="light"] .promo__art::before { opacity: .55; }

/* ==========================================================================
   ONE TEXT EDGE
   Card text was inset by the card's padding while loose body text sat hard against
   the wrap padding — four different left edges on a phone (20 / 44 / 47 / 76px),
   which reads as untidy. Cards keep their full width; the text inside them and the
   text between them now start at the same place.
   ========================================================================== */
:root { --card-pad-x: 1.25rem; }
.tldr, .keyfacts, .contents, .share, .references, .related { padding-left: var(--card-pad-x); padding-right: var(--card-pad-x); }
.payoff { padding-left: var(--card-pad-x); padding-right: var(--card-pad-x); }
.rotator__link { padding-left: var(--card-pad-x); padding-right: var(--card-pad-x); }
/* the masthead is not inside .post__body, so it needs the inset stated too — the
   backlink, title and dateline were sitting 24px left of every other line on the page */
.topbar,
.post__header,
.index__header { padding-left: var(--card-pad-x); padding-right: var(--card-pad-x); }
/* loose body text picks up the same inset; the cards themselves stay full width */
.post__body > p,
.post__body > h2,
.post__body > h3,
.post__body > ul,
.post__body > ol,
.post__body > blockquote { padding-left: var(--card-pad-x); padding-right: var(--card-pad-x); }
/* lists inside cards hang their markers instead of indenting the text away */
.tldr ul, .keyfacts ul { padding-left: 0; list-style: none; }
.tldr li, .keyfacts li { position: relative; padding-left: 1.1rem; }
.tldr li::before, .keyfacts li::before {
  content: ''; position: absolute; left: 0; top: 0.66em; width: 7px; height: 1px; background: var(--gold);
}
.keyfacts li::before { background: var(--sage); }

@media (max-width: 640px) {
  /* the base skin drops the root to 20px here, which pulled body text down to
     19.4px — below the size the owner approved. Restate it. */
  html { font-size: 22px; }
  :root { --fs-h1: 1.62rem; --fs-h2: 1.24rem; --fs-h3: 1.10rem; --card-pad-x: 1.1rem; }
  .wrap { padding-left: 0.85rem; padding-right: 0.85rem; }
  /* hanging markers get only the room they need; a 2.5rem indent on a 375px screen
     spends a quarter of the line width on empty space */
  .payoff > ol li { padding-left: 1.95rem; }
  .tldr li, .keyfacts li { padding-left: 0.85rem; }
  .post__body p, .post__body li, .tldr li, .keyfacts li {
    hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; text-wrap: pretty;
  }
}

/* ---- index masthead ---------------------------------------------------------
   The index h1 is gradient-clipped white -> gold, which on a cream ground leaves
   the top of every letter nearly invisible. Give it a solid colour in day view.
   It is also left-aligned here so the overview shares the article's text edge
   rather than centring on its own. */
.index__header { text-align: left; }
:root[data-theme="light"] .index__header h1 {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: var(--ink);
}
:root[data-theme="light"] .index__tagline { color: var(--ink-muted); }

/* ==========================================================================
   BRAND LOCKUP IN THE BANNER
   The brand rides the rotating banner, so it is present on every page including
   articles (which carried no brand mark at all), and the overview no longer needs
   a full-screen masthead to say who this is. Mark = the shipped ECG pulse.
   ========================================================================== */
.rotator__brand {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem var(--card-pad-x) 0.7rem;
  border-bottom: 1px solid var(--hair-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--gold);
}
.brand__mark { width: 1.5rem; height: auto; flex: none; }
.brand__name {
  font-size: var(--fs-small); font-weight: 650; letter-spacing: -0.012em;
  color: var(--ink); white-space: nowrap;
}
.brand:hover .brand__name { color: var(--gold-hover); }
.brand:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* the dots now live in the brand row, so the slide keeps its full width */
.rotator__brand .rotator__dots { position: static; }
.rotator__link { padding-top: 1rem; }

/* The overview label shares the toggle's row — the same shape the article page uses
   for its backlink. It previously sat on its own line under the toggle, spending two
   rows and a block of empty space on one word. */
.topbar--index { justify-content: space-between; margin-bottom: 1.1rem; }
.topbar--index h1 {
  font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.015em;
  margin: 0; color: var(--ink); background: none; -webkit-text-fill-color: initial;
}
:root[data-theme="light"] .topbar--index h1 { color: var(--ink); }