/* ============================================================
   WORLDLENS V06 EDITORIAL DESIGN SYSTEM
   Shared tokens + primitives + components used across every page.
   Load AFTER shared.css.

   Linked as:
     <link rel="stylesheet" href="/css/v06.css?v=20260520" />

   Pages add their own page-specific layouts in a <style> block.
   ============================================================ */

/* ---------- THEME TOKENS ---------- */
:root[data-theme="dark"] {
  --v6-bg:        #0A0A0A;
  --v6-bg-2:      #111111;
  --v6-bg-3:      #161616;
  --v6-paper:     #F0EBE3;
  --v6-ink:       #F0EBE3;
  --v6-ink-mute:  rgba(240,235,227,0.62);
  --v6-ink-soft:  rgba(240,235,227,0.32);
  --v6-ink-faint: rgba(240,235,227,0.14);
  --v6-hair:      rgba(240,235,227,0.09);
  --v6-hair-2:    rgba(240,235,227,0.16);
  --v6-amber:     #E8960A;
  --v6-amber-bright: #F5A623;
  --v6-amber-soft:   rgba(232,150,10,0.10);
  --v6-amber-glow:   rgba(232,150,10,0.16);
  --v6-green:     #22C55E;
  --v6-red:       #EF4444;
  --v6-selection: rgba(232,150,10,0.35);
  --v6-noise:     0.025;
}
:root[data-theme="light"] {
  --v6-bg:        #FAF7F1;
  --v6-bg-2:      #F2EEE5;
  --v6-bg-3:      #ECE6D8;
  --v6-paper:     #FAF7F1;
  --v6-ink:       #14110E;
  --v6-ink-mute:  rgba(20,17,14,0.62);
  --v6-ink-soft:  rgba(20,17,14,0.40);
  --v6-ink-faint: rgba(20,17,14,0.18);
  --v6-hair:      rgba(20,17,14,0.12);
  --v6-hair-2:    rgba(20,17,14,0.20);
  --v6-amber:     #B07410;
  --v6-amber-bright: #C68514;
  --v6-amber-soft:   rgba(176,116,16,0.10);
  --v6-amber-glow:   rgba(176,116,16,0.18);
  --v6-green:     #15803D;
  --v6-red:       #B91C1C;
  --v6-selection: rgba(176,116,16,0.30);
  --v6-noise:     0.04;
}

/* ---------- V6 BASE (scoped to pages that opt in via .v6 on body) ---------- */
body.v6 {
  background: var(--v6-bg);
  color: var(--v6-ink);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
  margin: 0;
}
body.v6 ::selection { background: var(--v6-selection); color: var(--v6-ink); }
body.v6 main { position: relative; z-index: 2; }
body.v6 a { color: var(--v6-amber); text-decoration: none; }
body.v6 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.v6 *, body.v6 *::before, body.v6 *::after { box-sizing: border-box; }

/* Sitewide noise overlay */
body.v6::after {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: var(--v6-noise);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- PRIMITIVES ---------- */

.v6 .stage { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.v6 .stage-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) {
  .v6 .stage, .v6 .stage-narrow { padding: 0 20px; }
}

/* Amber period */
.v6 .dot { color: var(--v6-amber); font-style: normal; font-weight: 600; }

/* Reveal */
.v6 .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.v6 .reveal.visible { opacity: 1; transform: none; }
.v6 .reveal-d1 { transition-delay: 0.08s; }
.v6 .reveal-d2 { transition-delay: 0.16s; }
.v6 .reveal-d3 { transition-delay: 0.24s; }
.v6 .reveal-d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .v6 .reveal { opacity: 1; transform: none; transition: none; }
}

/* Typography helpers */
.v6 .display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.98;
}
.v6 .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- MASTHEAD STRIP ---------- */
.v6 .masthead {
  border-top: 1px solid var(--v6-hair);
  border-bottom: 1px solid var(--v6-hair);
  background: var(--v6-bg);
  position: relative; z-index: 2;
}
.v6 .masthead-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 11px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.v6 .mast-l, .v6 .mast-r {
  display: flex; align-items: center; gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v6-ink-soft);
}
.v6 .mast-sep { color: var(--v6-ink-faint); }
.v6 .mast-live { display: flex; align-items: center; gap: 6px; color: var(--v6-green); }
.v6 .mast-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--v6-green); animation: v6Pulse 1.6s ease-in-out infinite;
}
@keyframes v6Pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}
@media (max-width: 768px) {
  .v6 .masthead-inner { padding: 10px 20px; font-size: 9px; }
  .v6 .mast-l .hide-sm, .v6 .mast-r .hide-sm { display: none; }
}

/* ---------- SECTION RULE EYEBROW ---------- */
.v6 .sect-rule {
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--v6-amber); margin-bottom: 28px;
}
.v6 .sect-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--v6-hair-2); max-width: 80px;
}
.v6 .sect-rule.center { justify-content: center; }
.v6 .sect-rule.center::before {
  content: ''; flex: 1; height: 1px; background: var(--v6-hair-2); max-width: 80px;
}

/* ---------- DISPLAY HEADLINES ---------- */
.v6 .h-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0; color: var(--v6-ink);
}
.v6 .h-section {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 16px; color: var(--v6-ink);
}
.v6 .h-block {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0; color: var(--v6-ink);
}
.v6 .h-display em, .v6 .h-section em, .v6 .h-block em { font-style: italic; }

/* ---------- LEDE / BODY ---------- */
.v6 .lede {
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6; color: var(--v6-ink-mute);
  max-width: 540px; margin: 0;
}
.v6 .lede strong { color: var(--v6-ink); font-weight: 500; }
.v6 .body {
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75; color: var(--v6-ink-mute);
}
.v6 .body p { margin: 0 0 22px; }
.v6 .body p:last-child { margin: 0; }
.v6 .body strong { color: var(--v6-ink); font-weight: 500; }

/* Drop cap utility */
.v6 .dropcap > p:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: 5.5em; line-height: 0.78;
  float: left; margin: 6px 14px -2px 0; color: var(--v6-amber);
}

/* ---------- BUTTONS ---------- */
.v6 .btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px;
  background: var(--v6-amber-bright); color: #0A0A0A;
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: 13.5px; letter-spacing: 0.02em;
  border: 0; border-radius: 2px; text-decoration: none;
  box-shadow: 0 8px 24px var(--v6-amber-glow);
  transition: background 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.v6 .btn-primary:hover { background: #F5B342; box-shadow: 0 12px 32px var(--v6-amber-glow); text-decoration: none; }
.v6 .btn-primary .arr { transition: transform 0.2s ease; display: inline-block; }
.v6 .btn-primary:hover .arr { transform: translateX(3px); }

.v6 .btn-ghost {
  display: inline-flex; align-items: center;
  padding: 16px 22px;
  background: transparent; color: var(--v6-ink);
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--v6-hair-2); border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.v6 .btn-ghost:hover { border-color: var(--v6-amber); color: var(--v6-amber); text-decoration: none; }

.v6 .cta-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--v6-ink-soft);
}
.v6 .cta-sub .amb { color: var(--v6-amber); }

/* ---------- HAIRLINE GRIDS ---------- */
.v6 .hair-grid {
  display: grid;
  gap: 1px;
  background: var(--v6-hair);
  border: 1px solid var(--v6-hair);
}
.v6 .hair-grid-2 { grid-template-columns: 1fr 1fr; }
.v6 .hair-grid-3 { grid-template-columns: repeat(3, 1fr); }
.v6 .hair-grid > .cell { background: var(--v6-bg); padding: clamp(28px, 4vw, 48px); }
@media (max-width: 768px) {
  .v6 .hair-grid-2, .v6 .hair-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- METHOD-STYLE NUMBERED ROW ---------- */
.v6 .mrow {
  display: grid;
  grid-template-columns: 120px 1fr 1.2fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(44px, 5vw, 64px) 0;
  border-top: 1px solid var(--v6-hair);
  align-items: start;
}
.v6 .mrow:last-child { border-bottom: 1px solid var(--v6-hair); }
.v6 .mrow-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9; letter-spacing: -0.04em;
  color: var(--v6-amber);
}
.v6 .mrow-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0; color: var(--v6-ink);
}
.v6 .mrow-title .dot { color: var(--v6-amber); font-style: normal; }
.v6 .mrow-title small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal; font-weight: 500;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v6-amber); margin-bottom: 12px;
}
.v6 .mrow-body {
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.7; color: var(--v6-ink-mute);
}
.v6 .mrow-body p { margin: 0 0 14px; }
.v6 .mrow-body p:last-child { margin: 0; }
.v6 .mrow-body strong { color: var(--v6-ink); font-weight: 500; }
@media (max-width: 1024px) {
  .v6 .mrow { grid-template-columns: 80px 1fr; }
  .v6 .mrow > .mrow-body { grid-column: 1 / -1; padding-top: 4px; }
}
@media (max-width: 768px) {
  .v6 .mrow { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
  .v6 .mrow-num { font-size: 56px; }
  .v6 .mrow > .mrow-body { padding-top: 0; }
}

/* ---------- AUTHOR/BYLINE ---------- */
.v6 .byline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; color: var(--v6-ink-soft);
  border-top: 1px solid var(--v6-hair); padding-top: 18px;
}
.v6 .byline strong { color: var(--v6-ink-mute); font-weight: 500; }
.v6 .byline .amb { color: var(--v6-amber); }

/* ---------- STATS / BIG NUMBER CELLS ---------- */
.v6 .num-cell { padding: 24px 18px; background: var(--v6-bg-2); }
.v6 .num-cell .num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--v6-ink);
}
.v6 .num-cell .num .amb { color: var(--v6-amber); font-style: normal; }
.v6 .num-cell .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v6-amber); margin: 12px 0 6px;
}
.v6 .num-cell .desc {
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: 12px; line-height: 1.55; color: var(--v6-ink-soft);
}

/* ---------- MOBILE STICKY CTA ---------- */
.v6 .m-sticky {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 800;
  background: var(--v6-amber-bright); color: #0A0A0A;
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 14px; text-align: center; text-decoration: none;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
@media (max-width: 768px) {
  body.v6 { padding-bottom: 70px; }
  .v6 .m-sticky { display: block; }
}

/* ---------- LAST WORD (final CTA pattern) ---------- */
.v6 .lastword {
  position: relative;
  padding: clamp(96px, 14vw, 200px) 0;
  overflow: hidden;
}
.v6 .lastword-stage { position: relative; z-index: 2; max-width: 920px; }
.v6 .lastword-ghost {
  position: absolute; right: -48px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(220px, 28vw, 400px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--v6-ink-faint);
  pointer-events: none; user-select: none; z-index: 0;
}
.v6 .lastword-glow {
  position: absolute; width: 580px; height: 460px;
  top: 50%; left: 30%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--v6-amber-glow) 0%, transparent 65%);
  filter: blur(56px);
  pointer-events: none; z-index: 0;
}
.v6 .lastword-rule {
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--v6-amber); margin-bottom: 24px;
}
.v6 .lastword-rule::before { content: ''; width: 32px; height: 1px; background: var(--v6-amber); }
.v6 .lastword-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 0.98; letter-spacing: -0.035em;
  max-width: 760px; color: var(--v6-ink);
  margin: 0 0 32px;
}
.v6 .lastword-h em { font-style: italic; }
.v6 .lastword-h .dot { color: var(--v6-amber); font-style: normal; }
.v6 .lastword-sub {
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65; color: var(--v6-ink-mute);
  max-width: 480px; margin: 0 0 48px;
}

/* ---------- COVER (hero) patterns ---------- */
.v6 .cover {
  position: relative;
  padding: clamp(72px, 12vw, 140px) 0 clamp(64px, 9vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.v6 .cover-stage { position: relative; z-index: 2; }
.v6 .cover-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--v6-amber); margin-bottom: clamp(36px, 6vw, 64px);
}
.v6 .cover-meta::after { content: ''; flex: 1; height: 1px; background: var(--v6-hair-2); margin-left: 8px; }

/* Section dividers */
.v6 .sect-divider { border-bottom: 1px solid var(--v6-hair); }
.v6 .sect-pad { padding: clamp(72px, 10vw, 140px) 0; }
.v6 .sect-pad-lg { padding: clamp(80px, 11vw, 160px) 0; }

/* Card primitive (hairline only, no drop shadow) */
.v6 .card {
  background: var(--v6-bg-2);
  border: 1px solid var(--v6-hair);
  border-radius: 3px;
  padding: clamp(24px, 3vw, 36px);
}
.v6 .card-amber {
  background: var(--v6-amber-soft);
  border: 1px solid var(--v6-hair);
  border-left: 2px solid var(--v6-amber);
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 0 3px 3px 0;
}

/* Inline labels */
.v6 .lbl-amber {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--v6-amber); font-weight: 700;
}
.v6 .lbl-soft {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v6-ink-soft);
}

/* ---------- BRIEF CARD (reusable for demo pages) ---------- */
.v6 .brief-card {
  position: relative;
  background: var(--v6-bg-2);
  border: 1px solid var(--v6-hair);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,0.30);
}
:root[data-theme="light"] .v6 .brief-card,
.v6 :root[data-theme="light"] .brief-card { box-shadow: 0 28px 60px rgba(20,17,14,0.08), 0 2px 4px rgba(20,17,14,0.04); }
.v6 .brief-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--v6-amber), transparent); z-index: 4;
}
.v6 .bc-chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v6-hair);
  background: var(--v6-bg-3);
}
.v6 .bc-dots { display: flex; gap: 6px; }
.v6 .bc-dots span { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.v6 .bc-dots span:nth-child(1) { background: #FF5F57; }
.v6 .bc-dots span:nth-child(2) { background: #FEBC2E; }
.v6 .bc-dots span:nth-child(3) { background: #28C840; }
.v6 .bc-url { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--v6-ink-soft); }
.v6 .bc-url .pth { color: var(--v6-ink); }
.v6 .bc-live { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: var(--v6-green); display: flex; align-items: center; gap: 6px; }
.v6 .bc-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--v6-green); animation: v6Pulse 1.4s ease-in-out infinite; }

/* ---------- TICKER (reusable) ---------- */
.v6 .ticker {
  width: 100%; height: 42px;
  background: var(--v6-bg-2);
  border-top: 1px solid var(--v6-hair);
  border-bottom: 1px solid var(--v6-hair);
  overflow: hidden; position: relative;
}
.v6 .ticker-track {
  display: flex; align-items: center; height: 100%;
  width: max-content;
  animation: v6Ticker 70s linear infinite;
  will-change: transform;
}
.v6 .ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes v6Ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.v6 .tk-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 38px; white-space: nowrap; }
.v6 .tk-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; color: var(--v6-amber-bright); }
.v6 .tk-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--v6-hair-2); }
.v6 .tk-text { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v6-ink-soft); }

/* ============================================================
   PAGE HERO BACKGROUND SYSTEM
   Drop into any hero / cover section to give it the same
   "live intelligence" atmosphere as the homepage.

   Usage:
   <section class="ab-cover page-hero">          // existing cover class + .page-hero
     <div class="page-bg-feed" aria-hidden="true">
       <div class="page-bg-item"><span class="pi-score">91</span><span class="pi-title">…</span><span class="pi-bar"></span></div>
       … 10 items …
     </div>
     <div class="page-bg-mask" aria-hidden="true"></div>
     <span class="page-bg-ghost" aria-hidden="true">WHY</span>
     <div class="stage" style="position:relative; z-index:2"> … existing content … </div>
   </section>
   ============================================================ */

.v6 .page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The animated feed layer */
.v6 .page-bg-feed {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  overflow: hidden;
}
:root[data-theme="light"] .v6 .page-bg-feed { opacity: 0.30; }

.v6 .page-bg-item {
  position: absolute; left: 6%; top: 110%;
  width: 84%; max-width: 540px;
  display: flex; align-items: center; gap: 14px;
  animation: v6PageFeed 22s linear infinite;
  will-change: transform, opacity;
}
@keyframes v6PageFeed {
  0%   { top: 110%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: -10%; opacity: 0; }
}
.v6 .page-bg-item .pi-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: var(--v6-amber-bright);
  flex-shrink: 0; min-width: 22px;
}
.v6 .page-bg-item .pi-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v6-ink-mute);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v6 .page-bg-item .pi-bar {
  height: 1px; background: var(--v6-amber-bright);
  flex-shrink: 0;
}
/* Stagger items + vary horizontal position + vary bar widths */
.v6 .page-bg-item:nth-child(1)  { animation-delay: -0s;    left: 5%;  }
.v6 .page-bg-item:nth-child(2)  { animation-delay: -2.2s;  left: 12%; }
.v6 .page-bg-item:nth-child(3)  { animation-delay: -4.4s;  left: 4%;  }
.v6 .page-bg-item:nth-child(4)  { animation-delay: -6.6s;  left: 14%; }
.v6 .page-bg-item:nth-child(5)  { animation-delay: -8.8s;  left: 8%;  }
.v6 .page-bg-item:nth-child(6)  { animation-delay: -11s;   left: 10%; }
.v6 .page-bg-item:nth-child(7)  { animation-delay: -13.2s; left: 6%;  }
.v6 .page-bg-item:nth-child(8)  { animation-delay: -15.4s; left: 12%; }
.v6 .page-bg-item:nth-child(9)  { animation-delay: -17.6s; left: 8%;  }
.v6 .page-bg-item:nth-child(10) { animation-delay: -19.8s; left: 4%;  }
.v6 .page-bg-item:nth-child(1) .pi-bar  { width: 92px; }
.v6 .page-bg-item:nth-child(2) .pi-bar  { width: 64px; }
.v6 .page-bg-item:nth-child(3) .pi-bar  { width: 78px; }
.v6 .page-bg-item:nth-child(4) .pi-bar  { width: 50px; }
.v6 .page-bg-item:nth-child(5) .pi-bar  { width: 96px; }
.v6 .page-bg-item:nth-child(6) .pi-bar  { width: 70px; }
.v6 .page-bg-item:nth-child(7) .pi-bar  { width: 56px; }
.v6 .page-bg-item:nth-child(8) .pi-bar  { width: 84px; }
.v6 .page-bg-item:nth-child(9) .pi-bar  { width: 44px; }
.v6 .page-bg-item:nth-child(10) .pi-bar { width: 38px; }

/* Soft radial mask so the headline stays readable */
.v6 .page-bg-mask {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 22% 50%, rgba(0,0,0,0) 0%, var(--v6-bg) 95%);
}
:root[data-theme="light"] .v6 .page-bg-mask {
  background: radial-gradient(ellipse 70% 90% at 22% 50%, rgba(255,255,255,0) 0%, var(--v6-bg) 95%);
}

/* Big italic ghost word/number — page-specific marker */
.v6 .page-bg-ghost {
  position: absolute; right: -60px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(220px, 32vw, 480px);
  line-height: 0.82; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--v6-ink-faint);
  pointer-events: none; user-select: none;
  z-index: 0;
  white-space: nowrap;
}

/* Make sure the page's own .stage / content lives above the bg */
.v6 .page-hero > .stage,
.v6 .page-hero > .stage-narrow { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .v6 .page-bg-ghost { font-size: clamp(160px, 50vw, 280px); right: -80px; opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .v6 .page-bg-item { animation: none; opacity: 0; }
}