/* ============================================================
   LUVUZONE — Design Polish Overlay (2026-04-23)
   Tighter, louder, more editorial. Loaded AFTER homepage.css.
   ============================================================ */

/* ============================================================
   0. SECTION RHYTHM — bigger breathing room between units
   ============================================================ */
.wisdom,
.ticker,
.triad,
.score-banner,
.featured,
.manifesto,
.newsletter {
  padding-top: clamp(80px, 12vh, 180px);
  padding-bottom: clamp(80px, 12vh, 180px);
  position: relative;
}

/* Hairline dividers between sections (subtle, editorial) */
.wisdom::after,
.ticker::after,
.triad::after,
.featured::after,
.manifesto::after,
.newsletter::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: var(--lv-ink-15);
}
.manifesto::after,
.newsletter::after { background: rgba(245, 240, 232, 0.22); }

/* ============================================================
   1. HEADLINES — monumental editorial italics
   ============================================================ */

/* Ticker heading */
.ticker-head h2 {
  font-family: var(--ff-editorial);
  font-weight: 900;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--lv-maroon);
  text-wrap: balance;
  margin: 0 0 var(--s-5);
}
.ticker-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--lv-ink);
}
.ticker-head p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--lv-ink-60);
  max-width: 56ch;
  margin-inline: auto;
}

/* Triad heading */
.triad-head h2 {
  font-family: var(--ff-editorial);
  font-weight: 900;
  font-size: clamp(52px, 7.2vw, 116px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
  color: var(--lv-maroon) !important;
  text-wrap: balance;
}
.triad-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--lv-ink);
}
.triad-head p {
  font-family: var(--ff-editorial);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--lv-ink-60);
}
.triad-head p em {
  font-style: italic;
  color: var(--lv-ink);
}

/* Featured title */
.featured-title {
  font-family: var(--ff-editorial);
  font-weight: 900;
  font-size: clamp(40px, 5.4vw, 80px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em;
  color: var(--lv-maroon) !important;
  text-wrap: balance;
  margin-bottom: var(--s-5);
}
.featured-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--lv-ink);
}

/* Manifesto — the emotional peak */
.manifesto-quote {
  font-family: var(--ff-editorial) !important;
  font-weight: 900 !important;
  font-size: clamp(54px, 8vw, 132px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
  margin-bottom: var(--s-6);
}
.manifesto-sub {
  font-family: var(--ff-editorial) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.45 !important;
  color: rgba(245, 240, 232, 0.80);
  letter-spacing: -0.005em;
}
.manifesto-sub b {
  font-weight: 700;
  color: var(--lv-cream);
}

/* Newsletter heading */
.newsletter h2 {
  font-family: var(--ff-editorial) !important;
  font-weight: 900 !important;
  font-size: clamp(48px, 6.5vw, 104px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
}
.newsletter h2 .small {
  font-weight: 400;
  font-style: italic;
  font-size: 0.5em;
  color: rgba(245, 240, 232, 0.62);
}
.newsletter-lede {
  font-family: var(--ff-editorial);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(245, 240, 232, 0.75);
  max-width: 46ch;
}

/* Wisdom quote (rotating citations) */
.wisdom-stage .quote {
  font-family: var(--ff-editorial);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 42px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em;
  color: var(--lv-ink);
  text-wrap: balance;
  font-style: italic;
}

/* Section eyebrows — spacing + gravitas */
.ticker-head .eyebrow,
.triad-head .eyebrow,
.featured-kicker,
.newsletter .eyebrow,
.manifesto-eyebrow,
.wisdom-eyebrow {
  font-family: var(--ff-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lv-maroon);
  margin-bottom: var(--s-5);
  display: inline-block;
}
.manifesto-eyebrow { color: var(--lv-brass); }

/* ============================================================
   2. BUTTONS — fill animation + sliding arrow
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
  padding: 20px 34px !important;
  font-size: 12px !important;
  letter-spacing: 0.26em !important;
  border-width: 1px !important;
  transition: color 260ms var(--ease), border-color 260ms var(--ease) !important;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lv-maroon-deep);
  transform: translateX(100%);
  transition: transform 420ms var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: translateX(0); }
.btn span[aria-hidden] {
  display: inline-block;
  transition: transform 320ms var(--ease);
}
.btn:hover span[aria-hidden] {
  transform: translateX(-6px);
}

/* Ghost variant — invert fill */
.btn-ghost::before { background: var(--lv-maroon); }
.btn-ghost { color: var(--lv-maroon) !important; }
.btn-ghost:hover { color: var(--lv-cream) !important; }

/* Text button arrow */
.btn-text {
  position: relative;
  padding-inline-end: 22px !important;
}
.btn-text::after {
  content: "→";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  transition: transform 320ms var(--ease);
}
.btn-text:hover::after { transform: translateY(-52%) translateX(-4px); }

/* ============================================================
   3. CARDS / Triad columns — subtle lift on hover
   ============================================================ */
.triad-col {
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease) !important;
  will-change: transform;
}
.triad-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(26, 21, 18, 0.08), 0 2px 4px rgba(26, 21, 18, 0.04) !important;
}

.featured-image {
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease) !important;
  will-change: transform;
}
.featured-image:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 32px 80px rgba(26, 21, 18, 0.12);
}

/* ============================================================
   4. RULES / DIVIDERS — thinner, more editorial
   ============================================================ */
hr, .rule {
  border-top-width: 1px !important;
  border-top-color: var(--lv-ink-15) !important;
}

.footer-bottom {
  border-top: 1px solid var(--lv-ink-15) !important;
}

/* ============================================================
   5. SIGNATURE — maroon, not white, visible on cream
   ============================================================ */
.footer-sig { padding-top: var(--s-6); }
.sig-logo {
  height: 28px !important;
  filter: none;
}
.sig-link {
  opacity: 0.75 !important;
}
.sig-link:hover { opacity: 1 !important; }

/* ============================================================
   6. NAVIGATION — slightly firmer on scroll
   ============================================================ */
.nav.scrolled {
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  background: rgba(245, 240, 232, 0.88) !important;
  border-bottom: 1px solid var(--lv-ink-08);
}

/* ============================================================
   7. SCROLL REVEAL — subtle fade + translate for key elements
   ============================================================ */
.u-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.u-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   8. BODY TEXT — tighter optimum, warmer
   ============================================================ */
p {
  text-wrap: pretty;
}
p strong, p b {
  color: var(--lv-maroon);
  font-weight: 700;
}

/* ============================================================
   9. SELECTION polish
   ============================================================ */
::selection {
  background: var(--lv-maroon);
  color: var(--lv-cream);
  text-shadow: none;
}

/* ============================================================
   11. GATE SLIDES — new duotone art direction (2026-04-23)
   Each slide now has its own artwork (Vesalius / Cajal / Muybridge / Haeckel).
   Strip the legacy sepia filters — the duotone treatment on the image
   already carries the mood. Keep subtle per-slide background + crop.
   ============================================================ */

/* Kill all legacy filter/tone rules from homepage.css */
.slide[data-tone] .slide-img,
.slide[data-tone="maroon"] .slide-img,
.slide[data-tone="indigo"] .slide-img,
.slide[data-tone="ochre"]  .slide-img,
.slide[data-tone="forest"] .slide-img {
  filter: none !important;
  opacity: 0.96 !important;
}

/* Unified dark background for all slides (ink) */
.slide,
.slide[data-tone="maroon"],
.slide[data-tone="indigo"],
.slide[data-tone="ochre"],
.slide[data-tone="forest"],
.slide[data-tone="body"],
.slide[data-tone="mental"],
.slide[data-tone="flow"],
.slide[data-tone="sovereign"] {
  background: #14100D !important;
}

/* Per-slide crop/zoom — each image has a different sweet spot.
   translate Y controls which vertical band is visible in a landscape viewport.
   Lower Y% = more of the top portion; 50% = dead center. */

/* Michelangelo's David (2063×3095 portrait) — show head, chest, torso (the iconic view) */
.slide[data-tone="body"] .slide-img {
  transform: translate(-50%, -28%) scale(1.04) !important;
}
.slide[data-tone="body"].active .slide-img {
  transform: translate(-50%, -28%) scale(1.10) !important;
}

/* Blake's Newton (2400×1846 landscape) — full figure, the bent pose with compass */
.slide[data-tone="mental"] .slide-img {
  transform: translate(-50%, -50%) scale(1.02) !important;
}
.slide[data-tone="mental"].active .slide-img {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/* Discobolus (1472×1711 portrait) — show the coiled tension, torso & arms */
.slide[data-tone="flow"] .slide-img {
  transform: translate(-50%, -42%) scale(1.05) !important;
}
.slide[data-tone="flow"].active .slide-img {
  transform: translate(-50%, -42%) scale(1.12) !important;
}

/* Friedrich's Wanderer (2400×3078 portrait) — emphasize the figure on the peak */
.slide[data-tone="sovereign"] .slide-img {
  transform: translate(-50%, -33%) scale(1.03) !important;
}
.slide[data-tone="sovereign"].active .slide-img {
  transform: translate(-50%, -33%) scale(1.10) !important;
}

/* Refined overlay — less muddy, more editorial */
.slide::before {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, transparent 28%, transparent 68%, rgba(0,0,0,0.48) 100%) !important;
}

/* Highlight quote — maroon brass combo for italics */
.slide-quote em {
  color: var(--lv-brass) !important;
  font-weight: 400 !important;
}

/* Kicker dash color */
.slide-kicker::before,
.slide-kicker::after {
  background: var(--lv-brass) !important;
  opacity: 0.55 !important;
}

/* ============================================================
   10. TRIAD CTA (TOP) — primary conversion right under the diagram
   ============================================================ */
.triad-cta.triad-cta-top {
  display: flex;
  justify-content: center;
  margin: var(--s-6) auto var(--s-5);
  padding: 0 var(--gutter);
}
.triad-cta.triad-cta-top .btn {
  font-size: 13px !important;
  padding: 22px 40px !important;
}

/* ============================================================
   10b. TRIAD BRIDGE — visual connector between CTA and 9-component grid
   ============================================================ */
.triad-bridge {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin: var(--s-7) auto var(--s-6);
  max-width: 640px;
  padding: 0 var(--gutter);
}
.triad-bridge-hr {
  flex: 1;
  height: 1px;
  background: var(--lv-ink-15);
}
.triad-bridge-label {
  font-family: var(--ff-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--lv-ink-40);
  white-space: nowrap;
  max-width: none;
  margin: 0;
}

/* ============================================================
   11-bis. SMALLER SCREEN — keep scale ratio
   ============================================================ */
@media (max-width: 700px) {
  .wisdom, .ticker, .triad, .score-banner, .featured, .manifesto, .newsletter {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .btn { padding: 16px 26px !important; }
}