/* The Record — Cannes Lions 2026. Editorial layout + motion over the Heartful Futures tokens. */

*, *::before, *::after { box-sizing: border-box; }
:root { --navh: 58px; }

/* ── ambience ── */
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aurora { position: fixed; z-index: 0; pointer-events: none; filter: blur(90px); opacity: 0.4; width: 46vw; height: 46vw; border-radius: 50%; }
.aurora--1 { top: -14vw; left: 4vw; background: radial-gradient(circle, rgba(167,184,106,0.28), transparent 70%); }
.aurora--2 { top: 62vh; left: -14vw; background: radial-gradient(circle, rgba(208,138,60,0.20), transparent 70%); }
.aurora--3 { bottom: -10vw; right: 8vw; background: radial-gradient(circle, rgba(225,184,59,0.14), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .aurora { animation: auroraDrift 28s var(--ease-inout) infinite alternate; }
  .aurora--2 { animation-duration: 36s; } .aurora--3 { animation-duration: 32s; }
}
@keyframes auroraDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3vw,-3vw,0) scale(1.1); } }
/* NOTE: .site must NOT create a stacking context (no z-index) — the hero figure's
   mix-blend-mode needs to blend against the fixed aurora/grain layers behind it. */
.site { position: relative; }

/* ── layout ── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--gutter); border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.nav.is-scrolled { background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--hairline); }
.nav__mark { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--olive-bright); flex: none; }
.hf-mark { width: clamp(24px, 2.1vw, 30px); height: clamp(24px, 2.1vw, 30px); flex: none; display: block; transition: transform var(--dur-base) var(--ease-out); }
.nav__mark:hover .hf-mark { transform: scale(1.1); }
.nav__wordmark { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -0.01em; color: var(--olive-bright); line-height: 1; white-space: nowrap; }
.nav__project { padding-left: var(--space-3); border-left: 1px solid var(--hairline-strong); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
.navlink { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; padding: 5px 9px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); color: var(--ink-faint); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.navlink .nav__num { font-variant-numeric: tabular-nums; color: var(--brown-lit); transition: color var(--dur-fast) var(--ease-out); }
.navlink__t { white-space: nowrap; }
.navlink:hover { color: var(--ink); }
.navlink.is-current { color: var(--ink); background: var(--surface-lift); } .navlink.is-current .nav__num { color: var(--mustard); }
.nav__explore { display: inline-flex; align-items: center; gap: 7px; margin-left: var(--space-3); flex: none;
  font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--ink-muted);
  background: transparent; border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); padding: 7px 15px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav__explore svg { width: 14px; height: 14px; }
.nav__explore:hover { color: var(--ink); border-color: var(--ink-faint); }
.nav__explore.is-active { color: var(--charcoal); background: var(--mustard); border-color: var(--mustard); }
@media (max-width: 940px){ .nav__links { display: none; } }

/* ── filter drawer ── */
.filterbar { position: fixed; top: var(--navh); left: 0; right: 0; z-index: 35; padding: var(--space-4) 0;
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline);
  transform: translateY(-10px); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.filterbar.is-open { transform: none; opacity: 1; }
.filterbar__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.filterbar__row + .filterbar__row { margin-top: var(--space-3); }
.search { flex: 1 1 220px; min-width: 160px; display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); padding: 7px 14px; }
.search input { flex: 1; background: transparent; border: 0; color: var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); outline: none; }
.search input::placeholder { color: var(--ink-faint); }
.search svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.filterbar__count { color: var(--ink-faint); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-left: auto; white-space: nowrap; }
.chip { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted); background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip:active { transform: translateY(1px); }
.chip.is-active { color: var(--charcoal); background: var(--mustard); border-color: var(--mustard); font-weight: 500; }
.chip.is-active:hover { color: var(--charcoal); }
select.chip { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23AEB39F' stroke-width='1.6'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

/* ── reveal motion (shared) ── */
.reveal { opacity: 0; }
.reveal--rise { transform: translateY(22px); }
@keyframes revealFade { to { opacity: 1; } }
@keyframes revealRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes revealLead { from { opacity: 0; filter: blur(8px); transform: translateY(16px) scale(.99); } to { opacity: 1; filter: blur(0); transform: none; } }
.reveal.is-inview { animation: revealFade var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.reveal--rise.is-inview { animation-name: revealRise; }
.q--lead.reveal.is-inview { animation: revealLead 0.95s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-inview { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } }

/* ── hero ── */
.hero { position: relative; padding-top: var(--space-12); padding-bottom: var(--rhythm-hero); }
.kicker { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: var(--text-2xs); color: var(--brown-lit); display: inline-flex; gap: var(--space-3); align-items: center; }
.kicker::before { content: ""; width: 28px; height: var(--border-accent); background: var(--grad-foresight); display: inline-block; }
.hero__title { font-family: var(--font-display); font-weight: var(--weight-display-thin); font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero); margin: var(--space-6) 0; max-width: 15ch; text-wrap: balance; }
.hero__title .line { display: block; }
/* hero entrance — transform-only so text is ALWAYS visible even if animation never runs */
@media (prefers-reduced-motion: no-preference) {
  .h-in { animation: hIn 0.85s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes hIn { from { transform: translateY(26px); } to { transform: none; } }
}
.hero__title em { font-style: italic; color: var(--olive-bright); }
.caret { color: var(--mustard); font-weight: 100; }
@media (prefers-reduced-motion: no-preference) { .caret { animation: caretBlink 1.1s steps(1) infinite; } }
@keyframes caretBlink { 0%,52% { opacity: 1; } 52.01%,100% { opacity: 0; } }
.hero__dek { font-family: var(--font-display); font-weight: 300; font-size: var(--text-h2-sm); line-height: var(--leading-snug); color: var(--ink); max-width: none; letter-spacing: var(--tracking-tight); }
.hero__meta { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); color: var(--ink-faint); font-size: var(--text-sm); }
.hero__meta b { color: var(--ink-muted); font-weight: 500; }
.hero__scroll { margin-top: var(--space-12); display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink-faint); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); }
.hero__scroll svg { width: 15px; height: 22px; }
.hero__scroll:hover { color: var(--olive-bright); }
@media (prefers-reduced-motion: no-preference) { .hero__scroll svg { animation: nudge 1.8s var(--ease-inout) infinite; } }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.hero > * { position: relative; z-index: 1; }
/* dark-native artwork: blends by its own ground — high opacity, soft edge feathering only */
/* lighten-blend: the artwork's ground == page bg, so only the glowing lines add light —
   the fixed aurora/grain ambience shines straight through, killing the rectangle on any screen */
.hero__figure { position: absolute; z-index: 0; top: 2%; right: 0; width: min(44vw, 600px); aspect-ratio: 4 / 5; overflow: hidden; margin: 0; opacity: 1; mix-blend-mode: lighten; will-change: transform; }
.hero__figure .illo__img { width: 100%; height: 100%; object-fit: cover; }
.hero__figure .illo__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--bg) 4%, rgba(25,29,21,0.55) 24%, transparent 60%),
  linear-gradient(0deg, var(--bg) 0%, transparent 26%),
  linear-gradient(180deg, var(--bg) 0%, transparent 30%),
  linear-gradient(270deg, var(--bg) 0%, transparent 18%); }
@media (max-width: 1024px){ .hero__figure { display: none; } }

/* ── the record (stat band) ── */
.record { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--rhythm-band) 0; }
.record__lead { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--text-h3); color: var(--ink-muted); margin-bottom: var(--space-10); }
.record__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-10) var(--space-6); }
.stat__value { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5vw, 64px); color: var(--mustard); letter-spacing: var(--tracking-tight); line-height: 1; }
.stat__label { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); max-width: 26ch; line-height: var(--leading-snug); }
.stat__src { margin-top: var(--space-2); color: var(--ink-faint); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* ── section heading shared ── */
.sec-title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--ink); max-width: 20ch; text-wrap: balance; }

/* ── contents (magazine TOC) ── */
.contents { padding: var(--rhythm-section) 0; }
.contents__head { margin-bottom: var(--rhythm-band); }
.contents__note { margin-top: var(--space-4); color: var(--ink-faint); font-size: var(--text-lead); font-family: var(--font-display); font-style: italic; font-weight: 300; }
.contents__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.toc__link { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: start; padding: var(--space-8) 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; position: relative; }
.toc__link::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--grad-foresight); transition: width var(--dur-slow) var(--ease-out); }
.toc__link:hover::before { width: 100%; }
.toc__num { font-family: var(--font-display); font-weight: 100; font-size: clamp(34px, 4vw, 52px); line-height: 0.9; color: var(--ink-faint); transition: color var(--dur-base) var(--ease-out); }
.toc__link:hover .toc__num { color: var(--mustard); }
.toc__on { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-sm); color: var(--brown-lit); margin-bottom: var(--space-2); }
.toc__title { display: block; font-family: var(--font-display); font-weight: 300; font-size: var(--text-h3); color: var(--ink); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
.toc__dek { display: block; margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--text-sm); max-width: 52ch; }
.toc__teaser { display: block; margin-top: var(--space-4); color: var(--ink-faint); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--text-base); max-width: 60ch;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.toc__teaser em { color: var(--ink-muted); font-style: normal; }
.toc__link:hover .toc__teaser, .toc__link:focus-visible .toc__teaser { max-height: 6em; opacity: 1; transform: none; }
.toc__go { align-self: center; font-size: var(--text-h3); color: var(--ink-faint); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.toc__link:hover .toc__go { color: var(--olive-bright); transform: translate(3px,-3px); }
@media (max-width: 620px){ .toc__link { grid-template-columns: auto 1fr; } .toc__go { display: none; } }

/* ── theme spread ── */
.theme { padding: var(--rhythm-section) 0; border-top: 1px solid var(--hairline); scroll-margin-top: var(--navh); }
.theme__card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.9fr); gap: var(--space-12); align-items: start; margin-bottom: var(--rhythm-band); }
.theme__eyebrow { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.theme__no { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-2xs); letter-spacing: var(--tracking-kicker); color: var(--ink-faint); text-transform: uppercase; }
.theme__on { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-h3); color: var(--brown-lit); }
.theme__title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
.theme__dek { margin-top: var(--space-5); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--text-h3); color: var(--olive-bright); max-width: 34ch; }
.theme__figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--cream); }
.illo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.theme__figure .illo__scrim { position: absolute; inset: 0; background: var(--tile-scrim); }
.figure--empty { display: none !important; }
@media (max-width: 860px){ .theme__card { grid-template-columns: minmax(0,1fr); gap: var(--space-8); } .theme__figure { max-width: 320px; aspect-ratio: 5/4; } }

/* cathedral lead quote — full page width, left-aligned */
.q.q--lead { margin: var(--rhythm-section) 0; max-width: none; width: 100%; text-align: left; border: 0; padding: 0; }
.q.q--lead::before { content: none; }
.q--lead .q__text { font-family: var(--font-display); font-weight: 300; font-size: var(--text-quote); line-height: 1.14; letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; hyphens: none; }
.q--lead .q__text::before { content: "“"; color: var(--mustard); }
.q--lead .q__text::after { content: "”"; color: var(--mustard); }
.q--lead .q__cap { margin-top: var(--space-6); align-items: flex-start; text-align: left; }
.q--lead .q__by { font-size: var(--text-base); }

/* synthesis prose */
.theme__synthesis { max-width: 62ch; margin: var(--rhythm-band) 0; }
.theme__synthesis p { color: var(--ink-muted); font-size: var(--text-lead); line-height: var(--leading-body); text-wrap: pretty; }
.theme__synthesis p::first-line { color: var(--ink); }

/* subtheme */
.subtheme { padding-top: var(--rhythm-band); }
.subtheme__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4) var(--space-6);
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-10); }
.subtheme__rule { grid-column: 1 / -1; width: 0; height: var(--border-accent); background: var(--grad-foresight); }
.subtheme.is-inview .subtheme__rule { width: 44px; transition: width var(--dur-slow) var(--ease-out); }
.subtheme__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h3); color: var(--ink); letter-spacing: var(--tracking-snug); }
.subtheme__synthesis { color: var(--ink-faint); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--text-base); max-width: 44ch; text-align: left; }
@media (max-width: 700px){ .subtheme__head { grid-template-columns: 1fr; } }

/* shared quote type — used by the cathedral lead quote AND the carousel faces */
.q { margin: 0; position: relative; }
.q__text { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); letter-spacing: var(--tracking-snug); text-wrap: pretty; hyphens: none; }
.q__cap { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-5); }
.q__by { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.q__role { color: var(--ink-muted); font-size: var(--text-xs); }
.q__src { margin-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-faint); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); text-decoration: none; width: fit-content;
  background-image: linear-gradient(var(--olive-bright), var(--olive-bright)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.q__src:hover, .q__src:focus-visible { color: var(--olive-bright); background-size: 100% 1px; }
.q__src .tick { color: var(--olive-bright); }
.q.is-hidden { display: none; }

/* quote carousel — one panel per subtheme, cube/card-flips between quotes */
.qc { margin-top: var(--space-6); }
.qc__stage { position: relative; perspective: 1500px; } /* min-height set from tallest quote by JS */
.qc__cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.72s var(--ease-out); }
.qc__face { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; }
.qc__face--b { transform: rotateY(180deg); }
.qc__face .q__text, .qc__meas .q__text { font-size: clamp(20px, 2vw, 27px); line-height: 1.4; max-width: 42ch; }
.qc__face .q__cap, .qc__meas .q__cap { margin-top: var(--space-6); }
.qc__controls { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-8); }
.qc__nav { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-muted); font-family: var(--font-display); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.qc__nav:hover { color: var(--charcoal); background: var(--mustard); border-color: var(--mustard); }
.qc__nav:active { transform: translateY(1px); }
.qc__count { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-kicker); font-size: var(--text-2xs); text-transform: uppercase; color: var(--ink-faint); min-width: 6ch; text-align: center; }
.qc__dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.qc__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--hairline-strong); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.qc__dot:hover { background: var(--ink-faint); }
.qc__dot.is-on { background: var(--mustard); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .qc__cube { transform: none !important; transition: none; }
  .qc__face { position: relative; backface-visibility: visible; transition: opacity 0.28s ease; }
  .qc__face--b { display: none; }
  .qc__face.is-fading { opacity: 0; }
}

/* ── speaker index ── */
.speakers { padding: var(--rhythm-section) 0; border-top: 1px solid var(--hairline); }
.speakers__grid { columns: 3 240px; column-gap: var(--space-12); margin-top: var(--rhythm-band); }
.speaker-row { break-inside: avoid; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--hairline); background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.speaker-row__l { display: flex; flex-direction: column; }
.speaker-row__name { color: var(--ink); font-size: var(--text-sm); font-weight: 500; transition: color var(--dur-fast) var(--ease-out); }
.speaker-row__co { color: var(--ink-faint); font-size: var(--text-2xs); }
.speaker-row__n { color: var(--mustard); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.speaker-row:hover .speaker-row__name { color: var(--olive-bright); }

/* ── footer ── */
.footer { border-top: 1px solid var(--hairline); padding: var(--rhythm-section) 0 var(--rhythm-band); }
.footer__method { max-width: 64ch; color: var(--ink-muted); font-size: var(--text-base); line-height: var(--leading-body); }
.footer__mark { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.footer__lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--olive-bright); }
.hf-mark--lg { width: 34px; height: 34px; }
.footer__lockup:hover .hf-mark { transform: scale(1.1); }
.footer__wordmark { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; color: var(--olive-bright); line-height: 1; }
.footer__mark > span { color: var(--ink-faint); font-size: var(--text-sm); font-style: italic; font-family: var(--font-display); }

/* ── progress + empty ── */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--grad-foresight); z-index: 50; width: 0; }
.empty { color: var(--ink-muted); font-family: var(--font-display); font-weight: 300; font-size: var(--text-h3); padding: var(--rhythm-section) 0; text-align: center; }
.empty__reset { margin-left: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--charcoal); background: var(--mustard); border: 0; border-radius: var(--radius-pill); padding: 8px 18px; cursor: pointer; }
.empty__reset:hover { filter: brightness(1.06); }

/* ══ FLOURISHES: flips, cube, magnetic, tilt ══ */

/* nav-heart wink on hover */
.nav__mark:hover .hf-mark { transform: rotateY(180deg) scale(1.08); }
.hf-mark { transform-style: preserve-3d; }

/* stat CARD FLIP — front: value+label · back: attribution */
.stat { perspective: 1100px; }
.stat__flip { position: relative; transform-style: preserve-3d; transition: transform 0.7s var(--ease-out); min-height: 8.5em; }
.stat:hover .stat__flip, .stat:focus-within .stat__flip, .stat.is-flipped .stat__flip { transform: rotateY(180deg); }
.stat__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stat__back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: flex-start; }
.stat__back-by { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); color: var(--olive-bright); line-height: 1.05; letter-spacing: var(--tracking-tight); }
.stat__back-tag { margin-top: var(--space-3); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: var(--text-2xs); color: var(--ink-faint); }
.stat__hint { position: absolute; top: 2px; right: 0; font-size: 13px; color: var(--ink-faint); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.stat:hover .stat__hint { opacity: 0; }
.stat:not(:hover) .stat__hint { opacity: 0.55; }

/* theme illustration CUBE FLIP — front: art · back: the dek (punch line) */
.flip-scene { perspective: 1300px; }
.flip-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); transform: translateZ(calc(var(--depth, 320px) / -2)); }
.flip-scene:hover .flip-cube, .flip-scene:focus-within .flip-cube, .flip-scene.is-flipped .flip-cube { transform: translateZ(calc(var(--depth, 320px) / -2)) rotateY(180deg); }
.cube-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cube-front, .cube-back { inset: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); }
.cube-front { transform: translateZ(calc(var(--depth, 320px) / 2)); }
.cube-back { transform: rotateY(180deg) translateZ(calc(var(--depth, 320px) / 2));
  background: radial-gradient(120% 120% at 50% 0%, var(--surface-lift), var(--bg)); display: flex; flex-direction: column; justify-content: flex-start; padding: var(--space-8); text-align: left; }
.cube-side { top: 0; bottom: 0; width: var(--depth, 320px); left: calc(50% - var(--depth, 320px) / 2); background: linear-gradient(90deg, #3A4329, #262D1C 45%, #12150D); }
.cube-right { transform: rotateY(90deg) translateZ(calc(var(--depth, 320px) / 2)); }
.cube-left { transform: rotateY(-90deg) translateZ(calc(var(--depth, 320px) / 2)); }
.cube-back__on { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-base); color: var(--brown-lit); margin-bottom: var(--space-4); }
.cube-back__dek { font-family: var(--font-display); font-weight: 300; font-size: var(--text-h3); line-height: 1.24; color: var(--ink); letter-spacing: var(--tracking-snug); text-wrap: balance; }
.cube-back__cue { margin-top: var(--space-6); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: var(--text-2xs); color: var(--ink-faint); }
.cube-front { background: var(--cream); }
.theme__figure.flip-scene { overflow: visible; border: 0; border-radius: 0; background: none; }
.theme__figure.flip-scene .illo__img { width: 100%; height: 100%; object-fit: cover; }

/* magnetic wrappers own transform; keep inner hover transforms intact */
.mag { display: inline-flex; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .nav__mark:hover .hf-mark { transform: scale(1.08); }
  .stat__flip, .stat:hover .stat__flip, .stat.is-flipped .stat__flip { transform: none !important; }
  .stat__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .stat__back { transform: none; opacity: 0; transition: opacity 0.2s ease; }
  .stat:hover .stat__back, .stat:focus-within .stat__back, .stat.is-flipped .stat__back { opacity: 1; background: var(--bg); }
  .flip-cube, .flip-scene:hover .flip-cube, .flip-scene:focus-within .flip-cube, .flip-scene.is-flipped .flip-cube { transform: none !important; }
  .cube-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .cube-front, .cube-back { transform: none !important; } .cube-side { display: none; }
  .cube-back { opacity: 0; transition: opacity 0.2s ease; }
  .flip-scene:hover .cube-back, .flip-scene:focus-within .cube-back, .flip-scene.is-flipped .cube-back { opacity: 1; }
  .mag { transform: none !important; }
}

h1, h2, h3, h4 { hyphens: none; }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; border-radius: var(--radius-xs); }