/* ============================================================
   SWEETFRONT DRAMA v7 — contrast, scale, light (docs/DRAMA-v7.md; what was built and why: its chapter 11)
   Loaded after components.css by all three pages. Without this file the page is the calm v6 page —
   nothing here is structural.
   D1 + D2  night hero            D4  type poster = the page's ONE full-accent ground
   D5       one giant number      D6  a lantern under the pointer       D8  the header takes the ground's colour
   D3 (the section takes the colour of the syrup / the honey) is palette work: it lives in each demo's style.css.
   ============================================================ */

/* ---------- D1 + D2 — the hero is night. Tokens are re-scoped, so type, buttons, rules and focus rings follow. ---------- */
.hero-night {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --bg: var(--dark-b);
  --bg-2: var(--dark-c);
  --fg: var(--on-dark);
  --muted: var(--muted-dark);
  --accent: var(--accent-on-dark);              /* the CTA glows: gold / wax with ink text (never white on honey) */
  --accent-text: var(--accent-on-dark-text, var(--on-dark));
  --on-accent: var(--night-ink, #1C1917);
  --rule: var(--rule-dark);
  --rule-soft: var(--rule-dark-soft);
  --focus: var(--focus-dark);
  color: var(--fg);
  background: var(--dark-b);
  background:
    radial-gradient(70% 55% at 26% 94%, color-mix(in oklab, var(--accent-on-dark) 30%, transparent), transparent 62%),   /* the fire under the arch */
    radial-gradient(120% 90% at 72% 0%, var(--dark-a) 0%, var(--dark-b) 55%, var(--dark-c) 100%);
}
/* on the night ground the stamped offset reads as a blur (owner, 20 Sep): the glowing button stands alone and lifts instead */
.hero-night .btn-primary, .hero-night .btn-primary:hover { box-shadow: none; }
.hero-night .btn-primary:hover { transform: translateY(-2px); }
.hero-night .btn-primary:active { transform: translateY(1px); }
/* the poster loses its plate: the numerals stand in the night, held by their hairline frame only */
.hero-night .hero-plate { padding: 0; border: 0; background: transparent; }
.hero-night .hero-plate .plate-inner { border: 0; background: transparent; }
.hero-night .poster { background: none; }
/* slow steam over the pan — the one ambient motion on the page; still under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .has-steam::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10% -20% auto;
    height: 60%;
    background: radial-gradient(50% 60% at 40% 50%, color-mix(in oklab, var(--on-dark) 9%, transparent), transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    animation: steam-drift 26s ease-in-out infinite alternate;
  }
  @keyframes steam-drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -2%, 0); } }
}

/* ---------- D8 — the header takes the colour of the ground under it (micro.js toggles .is-dark).
   Desktop only: the phone menu panel is paper, and the demos' phone header is not sticky anyway. ---------- */
@media (min-width: 900px) {
  .site-head { transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
  .site-head.is-dark {
    --fg: var(--on-dark);
    --muted: var(--muted-dark);
    --accent-text: var(--accent-on-dark-text, var(--on-dark));
    --rule: var(--rule-dark);
    --focus: var(--focus-dark);
    color: var(--fg);
    background: var(--dark-c);
    border-bottom-color: var(--rule-dark-soft);
  }
  .site-head.is-dark .nav-cta:hover { background: var(--on-dark); color: var(--night-ink, #1C1917); }
  .site-head.is-dark .nav-list a:hover, .site-head.is-dark .nav-list a[aria-current] { border-bottom-color: var(--accent-on-dark); }   /* the brand accent is 2.6:1 on the dark header */
}

/* ---------- D4 — once per page the text stops being content and becomes the picture. It is also the page's ONE
   full-accent ground (D1). From 860px the lines run past the right edge on purpose; the section clips them. ---------- */
.type-poster {
  overflow: clip;
  padding: clamp(56px, 8vw, 116px) 0 clamp(48px, 7vw, 100px);
  background: var(--poster-bg, var(--accent));
  color: var(--poster-fg, var(--on-accent));
}
.tp-lines {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-variation-settings: 'WONK' 1;
  font-weight: 620;
  font-size: clamp(2.75rem, 12.5vw, 5rem);
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.tp-lines span { display: block; }
.tp-foot { margin: clamp(18px, 3vw, 36px) 0 0; max-width: none; color: inherit; }
@media (min-width: 860px) {
  .tp-lines { font-size: min(var(--tp-size, 8.6vw), 9.5rem); white-space: nowrap; }
}
@media (min-width: 64rem) and (max-height: 780px) { .type-poster { padding-block: 48px 40px; } .tp-lines { font-size: min(var(--tp-size, 8.6vw), 22vh); } }

/* ---------- D5 — one number is the picture, the rest are footnotes ---------- */
.stat-hero { display: grid; gap: 12px; margin: 28px 0 0; max-width: none; }
.stat-hero-num {
  margin-left: -.06em;                          /* hangs over the left edge of the column, like type printed off the page */
  font-family: var(--display);
  font-variation-settings: 'WONK' 1;
  font-weight: 600;
  font-size: clamp(4.5rem, min(17vw, 30vh), 15rem);
  line-height: .82;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
  color: var(--on-dark);
}
.stat-hero-cap { color: var(--muted-dark); }
.stat-band-rest .stat dd { font-size: 1.75rem; }
@media (min-width: 860px) { .stat-band-rest { grid-template-columns: repeat(2, minmax(0, 260px)); } }

/* ---------- D6 — a lantern follows the pointer across the dark sheets (micro.js feeds --mx / --my).
   Desktop with a fine pointer only; under reduced motion there is no lantern at all. ---------- */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .section-dark::after, .hero-night::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent-on-dark) 18%, transparent), transparent 70%);
    transition: opacity var(--t-slow) var(--ease);
  }
  .section-dark:hover::after, .hero-night:hover::before { opacity: 1; }
}