/* ============================================================
   No Past, No Problem — editorial layout
   wired / natgeo cadence on the LUMA design system
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* override default lowercase headings — editorial uses real case for art-direction moments */
.editorial h1, .editorial h2, .editorial h3, .editorial h4 { text-transform: none; }

/* ── SCROLL PROGRESS ─────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; z-index: 100; pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, transparent, var(--glow) 30%, var(--glow) 70%, transparent);
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(207,191,149,0.6);
}

/* ── MASTHEAD ────────────────────────────────────────────── */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--fg-soft);
  background: rgba(27, 28, 28, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(246, 240, 226, 0.06);
}
.masthead a {
  color: var(--fg-soft); border: none; border-bottom: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 240ms var(--ease-exhale);
}
.masthead a:hover { color: var(--glow); }

.masthead__brand {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.28em;
  justify-self: start;
}
.masthead__brand:hover { color: var(--fg-soft); }
.masthead__back {
  width: 13px; height: 13px; opacity: 0.7;
  display: inline-block;
  transition: transform 240ms var(--ease-exhale);
}
.masthead__brand:hover .masthead__back { transform: translateX(-2px); }

.masthead__title {
  justify-self: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--fg);
  white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.masthead__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--glow);
}

.masthead__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 6px var(--glow);
  animation: luma-breath 8s var(--ease-exhale) infinite;
}

/* Right group — numeral nav + settings button */
.masthead__right-group {
  justify-self: end;
  display: flex; align-items: center; gap: 6px;
}

/* Elevator-style numeral indicator */
.masthead__right {
  display: flex; gap: 2px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* Settings / tweaks button in masthead */
.masthead__settings {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0; margin-left: 4px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color 240ms var(--ease-exhale),
              background 240ms var(--ease-exhale),
              border-color 240ms var(--ease-exhale),
              box-shadow 240ms var(--ease-exhale);
  position: relative;
}
.masthead__settings:hover {
  color: var(--glow);
  background: rgba(246,240,226,0.04);
}
.masthead__settings.is-active {
  color: var(--glow);
  background: rgba(207, 191, 149, 0.12);
  border-color: rgba(207, 191, 149, 0.30);
  box-shadow: 0 0 14px rgba(207, 191, 149, 0.25);
}
.masthead__settings svg {
  display: block;
  transition: transform 600ms var(--ease-exhale);
}
.masthead__settings:hover svg { transform: rotate(8deg); }
.masthead__settings.is-active svg { transform: rotate(0deg); }

.masthead.is-on-paper .masthead__settings { color: var(--ink-soft); }
.masthead.is-on-paper .masthead__settings:hover { color: var(--ember); background: rgba(38,39,39,0.05); }
.masthead.is-on-paper .masthead__settings.is-active {
  color: var(--ember);
  background: rgba(169, 132, 86, 0.10);
  border-color: rgba(169, 132, 86, 0.30);
  box-shadow: 0 0 14px rgba(169, 132, 86, 0.18);
}
.masthead__right a {
  padding: 5px 7px;
  min-width: 24px;
  justify-content: center;
  border-radius: 4px;
  color: var(--muted);
  text-transform: lowercase;
  transition: color 240ms var(--ease-exhale),
              background 240ms var(--ease-exhale),
              box-shadow 240ms var(--ease-exhale);
}
.masthead__right a:hover { color: var(--fg-soft); background: rgba(246,240,226,0.04); }
.masthead__right a.is-active {
  color: var(--glow);
  background: rgba(207, 191, 149, 0.12);
  box-shadow: inset 0 0 0 1px rgba(207, 191, 149, 0.30),
              0 0 14px rgba(207, 191, 149, 0.25);
  text-shadow: 0 0 8px rgba(207, 191, 149, 0.5);
}

/* on cream sections, switch the masthead chrome */
.masthead.is-on-paper {
  background: rgba(246, 240, 226, 0.65);
  color: var(--ink-soft);
  border-bottom-color: rgba(38, 39, 39, 0.08);
}
.masthead.is-on-paper a { color: var(--ink-soft); }
.masthead.is-on-paper a:hover { color: var(--ember); }
.masthead.is-on-paper .masthead__brand { color: var(--ink-soft); }
.masthead.is-on-paper .masthead__title { color: var(--ink); }
.masthead.is-on-paper .masthead__title em { color: var(--ember); }
.masthead.is-on-paper .masthead__dot {
  background: var(--ember); box-shadow: 0 0 6px var(--ember);
}
.masthead.is-on-paper .masthead__right a { color: var(--ink-soft); }
.masthead.is-on-paper .masthead__right a.is-active {
  color: var(--ember);
  background: rgba(169, 132, 86, 0.10);
  box-shadow: inset 0 0 0 1px rgba(169, 132, 86, 0.30),
              0 0 14px rgba(169, 132, 86, 0.18);
  text-shadow: 0 0 6px rgba(169, 132, 86, 0.4);
}

@media (max-width: 980px) {
  .masthead__title { display: none; }
}
@media (max-width: 720px) {
  .masthead__brand span:last-child { display: none; }
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 60px;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%,
      rgba(207, 191, 149, 0.10) 0%,
      rgba(207, 191, 149, 0.03) 35%,
      transparent 70%),
    var(--bg);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.06;
  pointer-events: none; mix-blend-mode: overlay;
}
.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 32px;
}
.hero__eyebrow span { color: var(--fg-soft); margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border); }

.hero__bulb {
  width: 280px; height: 280px;
  margin-bottom: 32px;
  position: relative;
}
.hero__bulb img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: lighten;
  animation: luma-breath 8s var(--ease-exhale) infinite;
}
.hero__bulb::after {
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(ellipse at center, rgba(207,191,149,0.20), transparent 60%);
  pointer-events: none; z-index: -1;
  animation: luma-breath 8s var(--ease-exhale) infinite;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--fg);
  text-transform: lowercase;
  margin: 0 0 28px;
  max-width: 14ch;
}
.hero__title .ampersand {
  font-family: var(--font-display); font-style: italic;
  color: var(--glow); font-weight: 300;
}

.hero__sub {
  font-family: var(--font-prose);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--fg-soft);
  max-width: 48ch;
  margin: 0 auto 56px;
  line-height: 1.6;
}

.hero__byline {
  display: flex; gap: 32px; align-items: center;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.hero__byline strong { color: var(--fg); font-weight: 600; letter-spacing: 0.16em; }
.hero__byline .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }

.hero__scroll {
  margin-top: 96px;
  font-family: var(--font-ui); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--glow), transparent);
  animation: drop 2.4s var(--ease-exhale) infinite;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drop {
  0%   { transform: translateY(-12px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ── ARTICLE BODY ────────────────────────────────────────── */
.editorial {
  position: relative;
}
.section {
  padding: 120px 32px;
  position: relative;
  scroll-margin-top: 60px;
}
.section--paper {
  background: var(--paper);
  color: var(--ink);
}
.section--paper.luma-grain::before { mix-blend-mode: multiply; opacity: 0.08; }

.section--lead {
  padding-top: 80px;
  padding-bottom: 80px;
}

.container {
  max-width: 720px;
  margin: 0 auto;
}
.container--wide { max-width: 1200px; }

.chapter-marker {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 56px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--glow);
}
.chapter-marker__numeral {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--glow);
  letter-spacing: -0.02em;
  text-transform: none;
}
.chapter-marker__rule {
  flex: 1; height: 1px; background: var(--border);
  max-width: 80px;
}
.section--paper .chapter-marker { color: var(--ember); }
.section--paper .chapter-marker__numeral { color: var(--ember); }
.section--paper .chapter-marker__rule { background: var(--border-paper); }

.section h2.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--fg);
  margin: 0 0 56px;
  max-width: 18ch;
}
.section--paper h2.section__title { color: var(--ink); }

.section p {
  font-family: var(--font-prose);
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg);
  margin: 0 0 24px;
  max-width: 64ch;
}
.section--paper p { color: var(--ink); }

.section em { color: var(--glow); font-style: italic; }
.section--paper em { color: var(--ember); }
.section strong { color: var(--fg); font-weight: 600; }
.section--paper strong { color: var(--ink); font-weight: 600; }

.section a {
  color: var(--glow); border-bottom: 1px solid rgba(207,191,149,0.3);
}
.section--paper a { color: var(--ember); border-bottom-color: rgba(169,132,86,0.3); }

/* drop cap on first paragraph of a section body */
.section .drop-cap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 7.5em;
  line-height: 0.84;
  float: left;
  margin: 6px 14px -8px 0;
  color: var(--glow);
  letter-spacing: -0.04em;
}
.section--paper .drop-cap::first-letter { color: var(--ember); }

/* short single-line statements get more air */
.beat {
  font-family: var(--font-prose);
  font-size: 19px;
  color: var(--fg-soft);
  margin: 32px 0;
  line-height: 1.6;
}
.section--paper .beat { color: var(--ink-soft); }

/* large pull quote */
.pull-quote {
  margin: 96px auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg);
  text-align: center;
  position: relative;
  padding: 48px 0;
}
.pull-quote::before, .pull-quote::after {
  content: ""; display: block;
  width: 56px; height: 1px;
  background: var(--glow);
  margin: 0 auto;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.pull-quote::before { top: 0; }
.pull-quote::after { bottom: 0; }
.pull-quote em { font-style: italic; color: var(--glow); }
.section--paper .pull-quote { color: var(--ink); }
.section--paper .pull-quote::before,
.section--paper .pull-quote::after { background: var(--ember); }
.section--paper .pull-quote em { color: var(--ember); }

/* aside / small panel for quoted research line */
.aside {
  border-left: 2px solid var(--glow);
  padding: 4px 0 4px 24px;
  margin: 48px 0;
  font-family: var(--font-prose);
  font-style: italic;
  font-size: 19px;
  color: var(--fg-soft);
  line-height: 1.65;
  max-width: 56ch;
}
.section--paper .aside { border-color: var(--ember); color: var(--ink-soft); }

/* italic-section heading inside body — "Investigation into Memory..." */
.section__deck {
  font-family: var(--font-prose);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 50ch;
  margin: 0 0 56px;
}

/* viz container */
.viz {
  margin: 96px -32px;
  padding: 0;
  position: relative;
}
.viz__frame {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 48px;
  background: linear-gradient(180deg, rgba(246,240,226,0.02), rgba(246,240,226,0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.section--paper .viz__frame {
  background: linear-gradient(180deg, rgba(38,39,39,0.03), rgba(38,39,39,0.01));
  border-color: var(--border-paper);
}
.viz__label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 6px;
}
.section--paper .viz__label { color: var(--ember); }
.viz__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 6px;
  text-transform: none;
}
.section--paper .viz__title { color: var(--ink); }
.viz__caption {
  font-family: var(--font-prose);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 36px;
  max-width: 60ch;
  line-height: 1.6;
}
.viz__figure {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.section--paper .viz__figure { border-color: var(--border-paper); }

/* breath pause moments */
.breath-pause {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: 96px auto;
  padding: 56px 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.breath-pause__bulb {
  width: 80px; height: 80px;
  position: relative;
}
.breath-pause__bulb img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: lighten;
  animation: luma-breath 8s var(--ease-exhale) infinite;
}
.breath-pause__bulb::after {
  content: ""; position: absolute; inset: -50%;
  background: radial-gradient(ellipse at center, rgba(207,191,149,0.20), transparent 65%);
  z-index: -1;
  animation: luma-breath 8s var(--ease-exhale) infinite;
}

/* deep rest variant — for the closing of section X */
@keyframes luma-rest-breath {
  0%   { opacity: 0.50; transform: scale(0.92); filter: brightness(0.82); }
  50%  { opacity: 1.00; transform: scale(1.04); filter: brightness(1.18); }
  100% { opacity: 0.50; transform: scale(0.92); filter: brightness(0.82); }
}
.breath-pause--deep {
  margin: 140px auto 80px;
  padding: 80px 0;
  gap: 56px;
}
.breath-pause--deep .breath-pause__bulb {
  width: 260px; height: 260px;
}
.breath-pause--deep .breath-pause__bulb img,
.breath-pause--deep .breath-pause__bulb::after {
  animation: luma-rest-breath 14s var(--ease-exhale) infinite;
}
.breath-pause--deep .breath-pause__bulb::after {
  inset: -40%;
  background: radial-gradient(ellipse at center, rgba(207,191,149,0.30), rgba(207,191,149,0.08) 40%, transparent 70%);
}
.breath-pause--deep__label {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--ember);
  text-transform: none;
  line-height: 1.1;
  white-space: nowrap;
  animation: luma-rest-breath 14s var(--ease-exhale) infinite;
}
.breath-pause--deep__hint {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: -32px;
}
.section--paper .breath-pause__bulb img {
  display: none;
}
.section--paper .breath-pause__bulb {
  background: radial-gradient(circle, rgba(207,191,149,0.9) 0%, rgba(207,191,149,0.4) 35%, rgba(207,191,149,0.10) 65%, transparent 80%);
  border-radius: 50%;
}
.section--paper .breath-pause--deep .breath-pause__bulb {
  background: radial-gradient(circle, rgba(207,191,149,0.95) 0%, rgba(207,191,149,0.55) 20%, rgba(207,191,149,0.18) 50%, rgba(207,191,149,0.04) 75%, transparent 90%);
  animation: luma-rest-breath 14s var(--ease-exhale) infinite;
}
.section--paper .breath-pause__bulb::after {
  background: radial-gradient(ellipse at center, rgba(169,132,86,0.22), transparent 65%);
}
.section--paper .breath-pause--deep .breath-pause__bulb::after {
  background: radial-gradient(ellipse at center, rgba(169,132,86,0.30), rgba(169,132,86,0.08) 40%, transparent 70%);
}

/* citation list (sources) */
.sources {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 56px;
  max-width: none;
}
@media (min-width: 900px) {
  .sources { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.source {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.section--paper .source { border-color: var(--border-paper); }
.source__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--glow);
  text-transform: none;
  margin-bottom: 6px;
  line-height: 1;
}
.section--paper .source__name { color: var(--ember); }
.source__affil {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.source__body {
  font-family: var(--font-prose);
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-soft);
}
.section--paper .source__body { color: var(--ink-soft); }
.source__cite {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  font-style: italic;
  line-height: 1.5;
}

/* transition between dark and paper section */
.transition--to-paper {
  height: 240px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--paper) 100%);
  position: relative;
}
.transition--to-paper::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.06;
  pointer-events: none; mix-blend-mode: overlay;
}

/* final card */
.final-card {
  text-align: center;
  margin: 96px auto;
  max-width: 30ch;
}
.final-card__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: none;
  margin: 0 0 32px;
}
.final-card__small {
  font-family: var(--font-prose);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.final-card__final {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 36px);
  letter-spacing: -0.015em;
  color: var(--ember);
  text-transform: none;
  font-style: italic;
  margin-top: 32px;
}

/* footer */
.colophon {
  text-align: center;
  padding: 80px 32px 60px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
}
.colophon__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -0.045em;
  color: var(--fg);
  text-transform: lowercase;
  line-height: 1;
  margin-bottom: 14px;
}
.colophon__cite {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.colophon__rights {
  font-family: var(--font-prose);
  font-size: 12px;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}
.colophon__rights a { color: var(--fg-soft); border-bottom-color: var(--border); }

/* ── TWEAK THEMES ────────────────────────────────────────── */
/* default 'editorial': dark sections + paper section X (no overrides needed) */

/* 'night' — everything stays on charcoal */
body.theme-night .section--paper {
  background: var(--bg);
  color: var(--fg);
}
body.theme-night .section--paper p,
body.theme-night .section--paper .section__title,
body.theme-night .section--paper .pull-quote,
body.theme-night .section--paper .beat,
body.theme-night .section--paper strong,
body.theme-night .section--paper em {
  color: var(--fg);
}
body.theme-night .section--paper em,
body.theme-night .section--paper .pull-quote em,
body.theme-night .section--paper .chapter-marker,
body.theme-night .section--paper .chapter-marker__numeral,
body.theme-night .section--paper .source__name,
body.theme-night .section--paper .final-card__final { color: var(--glow); }
body.theme-night .section--paper .drop-cap::first-letter { color: var(--glow); }
body.theme-night .section--paper .source__body,
body.theme-night .section--paper .final-card__small,
body.theme-night .section--paper .final-card__line { color: var(--fg-soft); }
body.theme-night .section--paper .pull-quote::before,
body.theme-night .section--paper .pull-quote::after { background: var(--glow); }
body.theme-night .section--paper .chapter-marker__rule,
body.theme-night .section--paper .source { border-color: var(--border); }
body.theme-night .section--paper .viz__frame {
  background: linear-gradient(180deg, rgba(246,240,226,0.02), rgba(246,240,226,0.01));
  border-color: var(--border);
}
body.theme-night .section--paper .viz__title,
body.theme-night .section--paper p { color: var(--fg); }
body.theme-night .section--paper .viz__label,
body.theme-night .section--paper .viz__caption { color: var(--muted); }
body.theme-night .transition--to-paper {
  background: var(--bg);
}
body.theme-night .breath-pause__bulb { display: flex; align-items: center; justify-content: center; }
body.theme-night .section--paper .breath-pause__bulb img { display: block; mix-blend-mode: lighten; }
body.theme-night .section--paper .breath-pause__bulb {
  background: none; border-radius: 0;
}
body.theme-night .section--paper .breath-pause__bulb::after {
  background: radial-gradient(ellipse at center, rgba(207,191,149,0.20), transparent 65%);
}

/* 'dawn' — everything on paper */
body.theme-dawn .hero,
body.theme-dawn .section {
  background: var(--paper);
  color: var(--ink);
}
body.theme-dawn .hero { background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(207,191,149,0.30) 0%, rgba(207,191,149,0.06) 35%, transparent 70%), var(--paper); }
body.theme-dawn .section p,
body.theme-dawn .section .section__title,
body.theme-dawn .section .beat,
body.theme-dawn .section strong,
body.theme-dawn .hero__title,
body.theme-dawn .hero__sub { color: var(--ink); }
body.theme-dawn .section em,
body.theme-dawn .chapter-marker,
body.theme-dawn .chapter-marker__numeral { color: var(--ember); }
body.theme-dawn .section .drop-cap::first-letter { color: var(--ember); }
body.theme-dawn .chapter-marker__rule { background: var(--border-paper); }
body.theme-dawn .pull-quote em,
body.theme-dawn .pull-quote::before,
body.theme-dawn .pull-quote::after { background: var(--ember); color: var(--ember); }
body.theme-dawn .section a { color: var(--ember); }
body.theme-dawn .aside { border-color: var(--ember); color: var(--ink-soft); }
body.theme-dawn .hero__eyebrow,
body.theme-dawn .hero__byline { color: var(--ink-soft); }
body.theme-dawn .hero__byline strong { color: var(--ink); }
body.theme-dawn .hero__scroll { color: var(--ink-soft); }
body.theme-dawn .hero__bulb img { display: none; }
body.theme-dawn .hero__bulb {
  background: radial-gradient(circle, rgba(207,191,149,0.9) 0%, rgba(207,191,149,0.45) 30%, rgba(207,191,149,0.12) 60%, transparent 80%);
  border-radius: 50%;
}
body.theme-dawn .hero__bulb::after {
  background: radial-gradient(ellipse at center, rgba(169,132,86,0.30), transparent 65%);
}
body.theme-dawn .viz__frame {
  background: linear-gradient(180deg, rgba(38,39,39,0.03), rgba(38,39,39,0.01));
  border-color: var(--border-paper);
}
body.theme-dawn .viz__title { color: var(--ink); }
body.theme-dawn .viz__label { color: var(--ember); }
body.theme-dawn .viz__figure { border-color: var(--border-paper); }
body.theme-dawn .transition--to-paper { background: var(--paper); }
body.theme-dawn .colophon {
  background: var(--paper-deep);
  border-top-color: var(--border-paper);
}
body.theme-dawn .colophon__mark { color: var(--ink); }
body.theme-dawn .colophon__cite,
body.theme-dawn .colophon__rights { color: var(--ink-soft); }
body.theme-dawn .scroll-progress__bar { background: linear-gradient(90deg, transparent, var(--ember) 30%, var(--ember) 70%, transparent); }
body.theme-dawn .masthead {
  background: rgba(246, 240, 226, 0.65);
  color: var(--ink-soft);
  border-bottom-color: rgba(38, 39, 39, 0.08);
}
body.theme-dawn .masthead a { color: var(--ink-soft); }
body.theme-dawn .masthead a:hover { color: var(--ember); }
body.theme-dawn .masthead__dot { background: var(--ember); box-shadow: 0 0 8px var(--ember); }

/* shared interactive control */
.luma-button {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--glow);
  cursor: pointer;
  transition: all var(--dur-hover) var(--ease-exhale);
}
.luma-button:hover { background: var(--glow-veil); box-shadow: var(--shadow-glow-soft); color: var(--glow); }
.luma-button:active { transform: scale(0.98); opacity: 0.85; }
.luma-button--primary { background: var(--glow); color: var(--bg); }
.luma-button--primary:hover { background: var(--glow); color: var(--bg); box-shadow: var(--shadow-glow); }
.section--paper .luma-button { color: var(--ink); border-color: var(--ember); }
.section--paper .luma-button:hover { color: var(--ember); background: rgba(169,132,86,0.08); }
.section--paper .luma-button--primary { background: var(--ember); color: var(--paper); }

/* responsive */
@media (max-width: 720px) {
  .section { padding: 80px 24px; }
  .section h2.section__title { font-size: 36px; }
  .viz { margin: 64px -24px; }
  .viz__frame { padding: 32px 20px; border-radius: 0; border-left: none; border-right: none; }
  .pull-quote { margin: 56px auto; font-size: 32px; }
  .hero__bulb { width: 200px; height: 200px; }
  .hero__byline { flex-direction: column; gap: 12px; }
  .masthead { padding: 14px 18px; font-size: 10px; }
  .masthead__right { gap: 2px; }
  .masthead__right a { padding: 4px 5px; min-width: 20px; }

  /* ── Animation panels stack vertically on mobile ──
     Each viz mounts into #viz-* and the root child is the wrap div
     with inline grid styles. Override here. */
  #viz-reconsolidation > div,
  #viz-cascade > div,
  #viz-loop > div {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* secondary inner grids (2-col legends) → single column too */
  #viz-twomaps [data-mobile-stack],
  #viz-witness [data-mobile-stack] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* tighten the side panels so they read like an inline figure caption */
  #viz-reconsolidation > div > div:last-child,
  #viz-cascade > div > div:last-child,
  #viz-loop > div > div:last-child {
    padding: 18px !important;
  }
  /* canvas/stage aspect ratios — keep landscape but allow them to be a bit shorter */
  #viz-reconsolidation > div > div:first-child,
  #viz-cascade > div > div:first-child {
    aspect-ratio: 5 / 4 !important;
    /* iOS Safari: aspect-ratio alone doesn't drive height for abs-positioned SVG children
       when the element has no explicit height. Force a min-height as fallback. */
    width: 100% !important;
    min-height: 200px;
  }
  /* Loop stage — 5/3 inline ratio is fine in portrait; add iOS Safari fallback */
  #viz-loop > div > div:first-child {
    width: 100% !important;
    min-height: 180px;
  }
  /* felt — drop its inner padding on mobile */
  #viz-felt > div {
    padding: 28px 20px !important;
    margin: 32px 0 !important;
  }
}

/* ── Mobile landscape (iPhone in landscape) ────────────────
   max-width: 720px never fires at 844-932px landscape widths.
   Target by orientation + max-height so tablets in landscape
   (768px+ height) are not affected. Stack viz panels vertically
   and keep the heart canvas at a readable size. */
@media (orientation: landscape) and (max-height: 500px) {
  .section { padding: 60px 24px; }
  .viz { margin: 40px -24px; }
  .viz__frame { padding: 24px 20px; border-radius: 0; border-left: none; border-right: none; }

  /* Stack viz panels — same override as portrait but fired by height */
  #viz-reconsolidation > div,
  #viz-cascade > div,
  #viz-loop > div {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* secondary inner grids */
  #viz-twomaps [data-mobile-stack],
  #viz-witness [data-mobile-stack] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* tighten side panels */
  #viz-reconsolidation > div > div:last-child,
  #viz-cascade > div > div:last-child,
  #viz-loop > div > div:last-child {
    padding: 16px !important;
  }
  /* In landscape the screen is wide but short: use wider aspect ratios
     so visualizations don't consume the whole viewport height */
  #viz-reconsolidation > div > div:first-child,
  #viz-cascade > div > div:first-child {
    aspect-ratio: 16 / 7 !important;
    width: 100% !important;
    min-height: 160px;
  }
  /* Loop stage: SVG viewBox is 550×300 (≈11:6). At 5/3 inline ratio the stage
     would be 804×482px in landscape — taller than the viewport. Use 16/6
     (≈2.67:1) so the stage sits at ~301px, the full circle + labels stay
     visible, and the controls panel is reachable without excessive scrolling. */
  #viz-loop > div > div:first-child {
    aspect-ratio: 16 / 6 !important;
    width: 100% !important;
    min-height: 160px;
  }
  /* felt */
  #viz-felt > div {
    padding: 20px 20px !important;
    margin: 24px 0 !important;
  }
}