/* ============================================================
   DIANA — "The Invisible Roller Coaster"
   A masterpiece read, unique to her. The page is a journey
   from night into dawn: a dark, tender hero; the descent in
   shadow; the crash at the bottom; then the light comes up and
   the words resolve into warmth. Her accent is a sunset coral.
   Prefix: d-
   ============================================================ */

/* Her palette — warm bone + sunset coral, narrower intimate measure.
   Overrides the dark article-base (loads after it). */
[data-page="article-diana-roller-coaster"] {
  --bg: #efe7da;
  --bg-elev: #e6dccb;
  --bg-elev-2: #dacfbb;
  --ink: #1a120d;
  --ink-dim: #5c5046;
  --ink-mute: #9a8e7e;
  --rule: rgba(26, 18, 13, 0.15);
  --rule-strong: rgba(26, 18, 13, 0.30);
  --accent: #d35d5f;
  --accent-soft: #a23f44;
  --accent-glow: #f0876f;
  --accent-ink: #fff6ef;

  /* night end of the journey */
  --night: #16100d;
  --night-2: #1f1612;
  --dusk-ink: #f2e7da;
  --dusk-dim: #c9b9aa;

  --col: 660px;
  --f-poem: "Instrument Serif", "Playfair Display", Georgia, serif;
}

body { background: var(--bg); }

/* keep the breadcrumb warm + quiet above the night hero */
[data-page="article-diana-roller-coaster"] .acrumb { background: var(--bg); }

/* ============================================================
   HERO — night. The internal weather before a word is said.
   ============================================================ */
.d-hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  border-bottom: 1px solid rgba(242,231,218,0.12);
  color: var(--dusk-ink);
}
.d-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 82% 8%, color-mix(in oklab, var(--accent-glow) 26%, transparent) 0%, transparent 46%),
    radial-gradient(90% 60% at 8% 100%, color-mix(in oklab, var(--accent-soft) 30%, transparent) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0.85;
}
.d-hero-inner {
  position: relative; z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 116px) var(--gutter) clamp(36px, 5vw, 72px);
}
.d-eye {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--dusk-dim);
  margin-bottom: clamp(22px, 4vw, 40px);
}
.d-eye .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 14px 2px var(--accent-glow);
}
.d-eye .glow { color: var(--accent-glow); }
.d-eye .ed { margin-left: auto; color: var(--dusk-dim); }

.d-kick {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: 20px;
}
.d-title {
  font-family: var(--f-poem);
  font-weight: 400;
  font-size: clamp(52px, 8.2vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0 0 2px;
  max-width: 15ch;
  color: #fff;
  text-wrap: balance;
}
.d-title .it { font-style: italic; color: var(--accent-glow); }
.d-subtitle {
  font-family: var(--f-poem);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--dusk-ink) 78%, transparent);
  margin: clamp(16px, 2vw, 26px) 0 0;
}
.d-hero-dek {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--dusk-dim);
  max-width: 46ch;
  margin: clamp(28px, 4vw, 44px) 0 0;
}

/* byline on night */
.d-byline {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid rgba(242,231,218,0.16);
}
.d-byline .ava {
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 1px solid rgba(242,231,218,0.3);
  background: var(--night-2);
}
.d-byline .ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.d-byline .nm {
  font-family: var(--f-poem); font-style: italic;
  font-size: 26px; color: #fff; line-height: 1;
}
.d-byline .nm small {
  display: block; font-family: var(--f-mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dusk-dim); margin-bottom: 4px;
}
.d-byline .meta {
  margin-left: auto;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--dusk-dim);
}
.d-byline .meta strong { color: var(--dusk-ink); font-weight: 400; }
.d-byline .meta .sep { opacity: 0.4; }

/* ============================================================
   THE READ — a continuous descent-then-dawn. Each movement is
   a band; backgrounds step from night → dusk → the lowest dark
   → a sunrise gradient → warm day.
   ============================================================ */
.d-mv { position: relative; }

/* The descent — a single continuous night. One tone, threaded by the
   coral line and lifted by a fine grain, so the dark space reads as
   intentional breath rather than empty panels. */
.d-read {
  position: relative;
  background: var(--night-2);
  overflow: hidden;
}
.d-read::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.d-mv-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

/* dark bands (the descent) — transparent so the continuous night shows through */
.d-night { background: transparent; color: var(--dusk-ink); }
.d-night-deep { background: transparent; color: var(--dusk-ink); }
.d-night .d-text, .d-night-deep .d-text { color: var(--dusk-ink); }
.d-night .d-text em, .d-night-deep .d-text em { color: var(--accent-glow); }
.d-night .d-line, .d-night-deep .d-line { color: #fff; }
.d-night .d-line .it, .d-night-deep .d-line .it { color: var(--accent-glow); }

/* the dawn band — a literal sunrise gradient */
.d-dawn {
  background: linear-gradient(180deg,
    #0c0908 0%,
    #2a1a14 28%,
    #6e3f33 54%,
    #c77a5e 76%,
    var(--bg) 100%);
  color: #fff;
}
.d-dawn .d-text { color: #fff7ef; }

/* warm day bands (resolution) */
.d-day { background: var(--bg); color: var(--ink); }
.d-day-elev { background: var(--bg-elev); color: var(--ink); }

/* running prose inside a movement */
.d-text {
  font-family: var(--f-display);
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.72;
  margin: 0 0 26px;
  text-wrap: pretty;
}
.d-text:last-child { margin-bottom: 0; }
.d-text em { font-style: italic; color: var(--accent-soft); }
.d-day .d-text em, .d-day-elev .d-text em { color: var(--accent-soft); }
.d-text strong { font-weight: 500; }

/* opening lede + drop cap */
.d-lede { padding: clamp(40px, 5vw, 72px) 0 clamp(30px, 3.5vw, 48px); }
.d-lede .d-text:first-child::first-letter {
  font-family: var(--f-poem);
  font-style: italic;
  font-size: 5.4em;
  float: left;
  line-height: 0.78;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent-glow);
}
.d-lede .d-text:first-child {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.55;
}

/* standalone poetic line (big) */
.d-line {
  font-family: var(--f-poem);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.d-line .it { font-style: italic; color: var(--accent); }
.d-band { padding: clamp(34px, 4.2vw, 62px) 0; }
.d-band--tight { padding: clamp(24px, 3vw, 40px) 0; }

/* the intimate aside — "if you believe in God..." */
.d-aside-band { background: var(--night-2); }
.d-aside {
  max-width: var(--col);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--gutter);
  position: relative; z-index: 2;
}
.d-aside p {
  font-family: var(--f-poem);
  font-style: italic;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--dusk-ink);
  margin: 0;
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 2px solid var(--accent);
  text-wrap: pretty;
}
.d-aside p .hi { color: var(--accent-glow); }

/* the "racing" stack — a thousand miles an hour */
.d-racing { display: flex; flex-direction: column; gap: 4px; margin: 0 0 26px; }
.d-racing .r {
  font-family: var(--f-poem);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.12;
  color: var(--dusk-ink);
  opacity: 0;
  transform: translateX(-8px);
}
.reveal-on .d-racing.rv-in .r { animation: d-race 0.5s cubic-bezier(.2,.7,.2,1) forwards; }
.d-racing .r:nth-child(1) { animation-delay: 0.05s; }
.d-racing .r:nth-child(2) { animation-delay: 0.22s; }
.d-racing .r:nth-child(3) { animation-delay: 0.39s; }
.d-racing .r .it { font-style: italic; color: var(--accent-glow); }
@keyframes d-race { to { opacity: 1; transform: none; } }

/* the crash — the floor drops out: the only deepening of the night */
.d-crash-band { background: #0c0908; padding: clamp(72px, 12vw, 184px) 0; text-align: center; }
.d-crash {
  font-family: var(--f-poem);
  font-style: italic;
  font-size: clamp(40px, 8vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.d-crash .it { color: var(--accent); font-style: normal; }

/* the climax — warrior, glowing */
.d-warrior-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in oklab, var(--accent-glow) 22%, transparent) 0%, transparent 55%),
    var(--bg);
  padding: clamp(64px, 10vw, 150px) 0 clamp(48px, 7vw, 110px);
  text-align: center;
}
.d-warrior-lead {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 26px);
  color: var(--ink-dim);
  margin: 0 auto clamp(28px, 4vw, 48px);
  max-width: 34ch;
}
.d-warrior {
  font-family: var(--f-poem);
  font-size: clamp(48px, 9vw, 122px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.d-warrior .it { font-style: italic; color: var(--accent); }
.d-admire {
  font-family: var(--f-poem);
  font-style: italic;
  font-size: clamp(26px, 4vw, 56px);
  line-height: 1.05;
  color: var(--accent-soft);
  margin: clamp(26px, 3.5vw, 44px) 0 0;
}

/* signature */
.d-sign {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: clamp(40px, 5vw, 64px) 0;
}
.d-sign-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.d-sign .mono {
  font-family: var(--f-poem); font-style: italic;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--accent); line-height: 1;
}
.d-sign .who {
  text-align: right;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute);
  line-height: 1.9;
}
.d-sign .who strong {
  display: block; font-family: var(--f-poem); font-style: italic;
  font-size: 28px; letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* ============================================================
   SUPPORT NOTE — quiet, warm, never clinical. Bilingual touch.
   ============================================================ */
.d-support {
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(40px, 5vw, 72px) 0;
}
.d-support-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.d-support .rule { background: var(--rule); width: 1px; height: 100%; }
.d-support .lab {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px;
}
.d-support .lab::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.d-support h4 {
  font-family: var(--f-poem);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12; font-weight: 400; margin: 0 0 12px; color: var(--ink);
}
.d-support h4 .es { font-style: italic; color: var(--accent-soft); }
.d-support p {
  font-family: var(--f-display);
  font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 14px;
}
.d-support .lines { display: flex; flex-direction: column; gap: 10px; }
.d-support .ln {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink);
}
.d-support .ln:first-child { padding-top: 0; }
.d-support .ln .where { color: var(--ink-mute); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; }
.d-support .ln .num { color: var(--accent-soft); font-weight: 500; }

/* ============================================================
   ENDNOTE — about Diana, links to her profile
   ============================================================ */
.d-end {
  background: var(--bg);
  padding: clamp(44px, 5vw, 76px) 0;
}
.d-end-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 88px 1fr; gap: 22px; align-items: start;
  border-top: 1px solid var(--rule); padding-top: 32px;
}
.d-end .ava {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--rule-strong); background: var(--bg-elev-2);
}
.d-end .ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.d-end .role {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-soft);
}
.d-end h5 {
  font-family: var(--f-poem); font-size: 30px; line-height: 1; margin: 8px 0 0; font-weight: 400; color: var(--ink);
}
.d-end h5 .it { font-style: italic; color: var(--accent); }
.d-end p {
  font-family: var(--f-display); font-style: italic;
  font-size: 16px; line-height: 1.55; color: var(--ink-dim); margin: 12px 0 0;
}
.d-end .more {
  display: inline-block; margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-soft);
  text-decoration: none;
}
.d-end .more:hover { color: var(--accent); }

/* ============================================================
   ROLLER-COASTER SPINE — a faint coral line riding the column
   ============================================================ */
.d-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: min(var(--col), calc(100% - 2 * var(--gutter)));
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.d-spine svg { width: 100%; height: 100%; display: block; }
.d-spine path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0.16;
  stroke-linecap: round;
}

/* ============================================================
   REVEAL MOTION — progressive enhancement (visible without JS)
   ============================================================ */
.reveal-on [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-on [data-reveal].rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
  .reveal-on .d-racing.rv-in .r { animation: none; opacity: 1; transform: none; }
  .d-racing .r { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .d-byline .meta { margin-left: 0; width: 100%; }
  .d-support-inner { grid-template-columns: 1fr; }
  .d-support .rule { display: none; }
  .d-sign-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .d-sign .who { text-align: left; }
}