:root {
  --bg: #0A0908;
  --bg-2: #14110F;
  --ink: #F4EFE6;
  --ink-2: #DDD4C5;
  --muted: #6F6A60;
  --rust: #FF4D2E;
  --crimson: #C8102E;
  --stage: #6B3FA0;
  --pastel-pink: #F2C1D1;
  --pastel-cyan: #B2E3E1;
  --pastel-lavender: #C9BEE6;
  --cream: #F2EDE4;
  --sage: #7A8A6E;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  cursor: none;
  position: relative;
}
img, video, iframe { max-width: 100%; }
a, button { cursor: none; color: inherit; text-decoration: none; background: transparent; border: 0; font: inherit; }
::selection { background: var(--rust); color: var(--bg); }

/* Three.js canvas — hidden (was distracting) */
.scene-canvas {
  display: none !important;
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100vw; height: 100vh;
}

/* Subtle grain overlay */
.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main, footer { position: relative; z-index: 1; }

/* Type */
.display-heavy {
  font-family: "Anton", "Druk Wide", Impact, Haettenschweiler, sans-serif;
  font-weight: 400; letter-spacing: -0.01em;
  text-transform: uppercase; line-height: 0.85;
}
.display-italic {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic; font-weight: 300;
  font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 100;
}
.display-serif {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.72rem; color: var(--muted);
}

/* Loader — frosted glass */
.loader {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(10,9,8,0.68);
  backdrop-filter: blur(48px) saturate(1.6);
  -webkit-backdrop-filter: blur(48px) saturate(1.6);
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  transition: opacity 1.1s cubic-bezier(0.85,0,0.15,1);
}
.loader::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,46,0.8) 40%, rgba(255,77,46,1) 50%, rgba(255,77,46,0.8) 60%, transparent);
  box-shadow: 0 0 24px 2px rgba(255,77,46,0.35);
}
.loader.done { opacity: 0; pointer-events: none; }
.loader .label {
  font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.3em; font-size: 0.72rem; color: rgba(255,77,46,0.7);
  margin-bottom: 1.6rem;
}
.loader .name {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(4rem, 13vw, 13rem); line-height: 0.88;
  text-transform: uppercase; letter-spacing: -0.02em; text-align: center;
  background: linear-gradient(170deg, #fff 0%, var(--ink) 55%, rgba(244,239,230,0.45) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 32px rgba(255,77,46,0.18));
}
.loader .progress {
  width: min(280px, 60vw); height: 1px;
  background: rgba(244,239,230,0.08); position: relative; overflow: hidden;
  margin-top: 3rem; border-radius: 1px;
}
.loader .progress::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--rust), rgba(255,120,80,0.9));
  box-shadow: 0 0 12px 1px rgba(255,77,46,0.6);
  transform: scaleX(0); transform-origin: left;
  animation: load 1.6s cubic-bezier(0.85,0,0.15,1) forwards;
}
@keyframes load { to { transform: scaleX(1); } }

/* Custom cursor */
.cursor {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  background: var(--ink); transform: translate(-50%, -50%);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s, mix-blend-mode 0s;
  mix-blend-mode: difference; background-color: white;
}
.cursor.hover {
  width: 92px; height: 92px;
  background: var(--rust); color: var(--bg);
  font-family: "Geist Mono", monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.22em;
  display: flex; align-items: center; justify-content: center;
  mix-blend-mode: normal;
}
.cursor.drag {
  width: 110px; height: 110px;
  background: rgba(255,77,46,0.9);
}

/* Glass primitives (now on dark) */
.glass {
  background: rgba(244,239,230,0.05);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(244,239,230,0.12);
  box-shadow: 0 1px 0 rgba(244,239,230,0.08) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, 0 24px 80px -28px rgba(0,0,0,0.7);
}
.glass-light {
  background: rgba(242,237,228,0.85);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--bg);
}

/* Modern glass pill nav */
nav.top {
  position: fixed; top: 1.2rem; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1.2rem;
  pointer-events: none;
  transition: top 0.5s cubic-bezier(0.22,1,0.36,1);
}
nav.top.scrolled { top: 0.8rem; }
nav.top > * { pointer-events: auto; }

.nav-logo {
  font-family: "Geist Mono", monospace;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--ink); white-space: nowrap;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: rgba(10,9,8,0.45);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(244,239,230,0.12);
  box-shadow:
    0 1px 0 rgba(244,239,230,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 18px 60px -28px rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.nav-logo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
}

.nav-pill {
  position: relative; display: flex; align-items: center;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(10,9,8,0.45);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(244,239,230,0.12);
  box-shadow:
    0 1px 0 rgba(244,239,230,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 24px 80px -28px rgba(0,0,0,0.6);
  overflow: hidden;
}
.nav-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%);
}
.nav-pill::after {
  /* Subtle moving sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: sheen 6s linear infinite;
}
@keyframes sheen {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.nav-indicator {
  position: absolute; top: 0.35rem; left: 0;
  height: calc(100% - 0.7rem);
  width: 0;
  background: rgba(255,77,46,0.18);
  border: 1px solid rgba(255,77,46,0.45);
  box-shadow: 0 0 24px -4px rgba(255,77,46,0.5), 0 1px 0 rgba(255,255,255,0.18) inset;
  border-radius: 999px;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s;
  z-index: 1;
  opacity: 0;
}
.nav-indicator.ready { opacity: 1; }

.nav-link {
  position: relative; z-index: 2;
  padding: 0.6rem 1rem;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--ink-2); white-space: nowrap;
  border-radius: 999px;
  transition: color 0.35s;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active { color: var(--ink); }

.nav-cta {
  position: relative; overflow: hidden;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--bg); white-space: nowrap;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: var(--rust);
  border: 1px solid rgba(255,77,46,0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 24px 80px -28px rgba(255,77,46,0.7);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;
}
.nav-cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 32px 80px -22px rgba(255,77,46,0.9);
}
.nav-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
}

/* Scroll progress under nav */
.nav-progress-track {
  position: fixed; top: 0; left: 0; right: 0; z-index: 59;
  height: 2px; background: transparent; pointer-events: none;
}
.nav-progress {
  height: 100%; width: 0; background: var(--rust);
  box-shadow: 0 0 14px rgba(255,77,46,0.7);
  transition: width 0.08s linear;
}

@media (max-width: 900px) {
  .nav-pill { display: none; }
}
.under { position: relative; display: inline-block; }
.under::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}
.under:hover::after { transform: scaleX(0); }

/* Marquee */
.marquee-band {
  overflow: hidden; padding: 1.2rem 0;
  border-top: 1px solid rgba(244,239,230,0.08);
  border-bottom: 1px solid rgba(244,239,230,0.08);
  position: relative; z-index: 2;
}
.marquee-band.accent { background: var(--rust); color: var(--bg); border: 0; }
.marquee-track {
  display: flex; gap: 4rem; white-space: nowrap; animation: scroll 38s linear infinite;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.01em;
  text-transform: uppercase;
}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Sections */
section.block { padding: 8rem 2.4rem; position: relative; }
section.block .grid {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  max-width: 1600px; margin: 0 auto; position: relative;
}
@media (min-width: 900px) {
  section.block .grid { grid-template-columns: repeat(12, 1fr); gap: 2.5rem; }
  .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
}

/* Section color worlds */
section.world-plugverse { background: linear-gradient(180deg, transparent 0%, rgba(255,77,46,0.12) 50%, transparent 100%); }
section.world-plugverse::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 80% 20%, rgba(255,77,46,0.35) 0%, rgba(255,77,46,0) 55%);
  pointer-events: none;
}
section.world-rubber { background: linear-gradient(180deg, transparent 0%, rgba(107,63,160,0.18) 50%, transparent 100%); }
section.world-rubber::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 20% 30%, rgba(200,16,46,0.25) 0%, rgba(200,16,46,0) 60%), radial-gradient(circle at 80% 70%, rgba(107,63,160,0.3) 0%, rgba(107,63,160,0) 60%);
  pointer-events: none;
}
section.world-cooper { background: linear-gradient(180deg, transparent 0%, rgba(201,190,230,0.12) 50%, transparent 100%); }
section.world-cooper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 30% 40%, rgba(201,190,230,0.2) 0%, rgba(201,190,230,0) 60%), radial-gradient(circle at 70% 70%, rgba(178,227,225,0.18) 0%, rgba(178,227,225,0) 55%), radial-gradient(circle at 50% 20%, rgba(242,193,209,0.15) 0%, rgba(242,193,209,0) 60%);
  pointer-events: none;
}
section.world-builder {
  background: var(--cream); color: var(--bg);
  padding: 8rem 2.4rem;
}
section.world-builder .eyebrow { color: rgba(10,9,8,0.55); }
section.world-builder .body-prose { color: rgba(10,9,8,0.8); }

/* Athletic world: forest green + sky + steel chrome */
section.world-athletic { background: linear-gradient(180deg, transparent 0%, rgba(44,79,58,0.18) 50%, transparent 100%); }
section.world-athletic::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 20% 30%, rgba(44,79,58,0.3) 0%, rgba(44,79,58,0) 60%), radial-gradient(circle at 80% 70%, rgba(90,157,196,0.18) 0%, rgba(90,157,196,0) 60%);
  pointer-events: none;
}

/* =============================================
   Per-section unique visual treatments
   ============================================= */

/* Manifesto: drifting wave lines behind the type */
.fx-waves {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.fx-waves svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-waves path {
  fill: none; stroke: rgba(255,77,46,0.15); stroke-width: 1;
  animation: wave-drift 22s ease-in-out infinite alternate;
}
.fx-waves path:nth-child(2) { stroke: rgba(244,239,230,0.08); stroke-width: 0.6; animation-duration: 30s; animation-direction: alternate-reverse; }
.fx-waves path:nth-child(3) { stroke: rgba(255,77,46,0.08); stroke-width: 0.4; animation-duration: 38s; }
@keyframes wave-drift {
  0% { transform: translateX(-3%) translateY(0); }
  50% { transform: translateX(2%) translateY(-1.5%); }
  100% { transform: translateX(0) translateY(1%); }
}

/* Plugverse: animated cable drawing */
.fx-cable {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.fx-cable svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-cable .cable-line {
  fill: none; stroke: rgba(255,77,46,0.65); stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(255,77,46,0.6));
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: cable-draw 4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
.fx-cable .cable-plug {
  fill: rgba(255,77,46,0.9); opacity: 0;
  filter: drop-shadow(0 0 14px rgba(255,77,46,0.8));
  animation: plug-pulse 2.4s ease-in-out 4.4s infinite;
}
@keyframes cable-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes plug-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Music: ambient SVG waveform that pulses */
.fx-waveform {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.fx-waveform svg { width: 100%; height: 60%; opacity: 0.25; }
.fx-waveform path { fill: none; stroke: rgba(200,16,46,0.6); stroke-width: 1.2; stroke-linecap: round; }
.fx-waveform .bar {
  fill: rgba(200,16,46,0.4);
  animation: bar-pulse 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes bar-pulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Fitness EKG / heart-rate line */
.fx-ekg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.fx-ekg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-ekg .ekg-line {
  fill: none;
  stroke: rgba(244,239,230,0.28);
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255,77,46,0.35));
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: ekg-draw 6s linear infinite;
}
.fx-ekg .ekg-baseline {
  fill: none; stroke: rgba(244,239,230,0.08); stroke-width: 0.5;
}
.fx-ekg .ekg-blip {
  fill: rgba(255,77,46,0.95);
  filter: drop-shadow(0 0 10px rgba(255,77,46,0.85));
  animation: ekg-blip-move 6s linear infinite;
}
@keyframes ekg-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ekg-blip-move {
  0%   { transform: translateX(-2%);  opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateX(102%); opacity: 0; }
}

/* Barbell silhouette accent for fitness sections */
.fx-barbell {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: 38vw; max-width: 720px; min-width: 320px; z-index: -1; pointer-events: none;
  opacity: 0.18;
}
.fx-barbell svg { width: 100%; height: auto; display: block; }
.fx-barbell rect, .fx-barbell circle {
  fill: rgba(244,239,230,0.85);
}
.fx-barbell .plate-outer { fill: rgba(244,239,230,0.95); }
.fx-barbell .plate-inner { fill: rgba(10,9,8,1); }
.fx-barbell .bar { fill: rgba(244,239,230,0.65); }

/* Athletic: golf trajectory + barbell line */
.fx-athletic {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.fx-athletic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-athletic .arc {
  fill: none; stroke: rgba(244,239,230,0.18); stroke-width: 1; stroke-dasharray: 4 6;
  stroke-dashoffset: 0;
  animation: arc-march 12s linear infinite;
}
.fx-athletic .ball {
  fill: rgba(244,239,230,0.9);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
  offset-path: path("M 80 700 Q 600 100 1300 580");
  animation: ball-fly 7s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes arc-march {
  to { stroke-dashoffset: -200; }
}
@keyframes ball-fly {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.fx-athletic .barbell-line {
  stroke: rgba(90,157,196,0.18); stroke-width: 4; stroke-linecap: round;
}

/* Cooper Delo: slow-spinning vinyl record on the right */
.fx-vinyl {
  position: absolute; right: -240px; top: 50%; transform: translateY(-50%);
  width: 700px; height: 700px; z-index: -1; pointer-events: none;
  opacity: 0.6;
}
.fx-vinyl-spin {
  width: 100%; height: 100%;
  animation: vinyl-spin 28s linear infinite;
  transform-origin: 50% 50%;
}
.fx-vinyl svg { width: 100%; height: 100%; display: block; }
.fx-vinyl .disc { fill: #0e0c0a; stroke: rgba(244,239,230,0.18); stroke-width: 1; }
.fx-vinyl .ring { fill: none; stroke: rgba(244,239,230,0.06); stroke-width: 0.5; }
.fx-vinyl .label-base { fill: rgba(201,190,230,0.55); }
.fx-vinyl .label-line { fill: none; stroke: rgba(10,9,8,0.5); stroke-width: 0.6; }
.fx-vinyl .hole { fill: rgba(244,239,230,0.85); }
.fx-vinyl .highlight {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 8;
  stroke-linecap: round;
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

/* Now: pulsing dot grid + live indicator */
.fx-dot-grid {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(244,239,230,0.08) 1px, transparent 1.5px);
  background-size: 32px 32px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 75%);
}
.fx-live-dot {
  position: absolute; top: 6rem; right: 2.4rem; z-index: 0;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.7rem; color: var(--ink-2);
}
.fx-live-dot::before {
  content: ""; width: 10px; height: 10px;
  border-radius: 50%; background: var(--rust);
  box-shadow: 0 0 0 0 rgba(255,77,46,0.7);
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,46,0.6); transform: scale(1); }
  100% { box-shadow: 0 0 0 16px rgba(255,77,46,0); transform: scale(1.08); }
}

/* Headings */
h1.poster {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(3.6rem, 14vw, 15rem);
  line-height: 0.86; letter-spacing: -0.018em;
  text-transform: uppercase;
}
h1.poster .accent {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic; font-weight: 300; text-transform: none;
  font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 100;
  color: var(--rust);
}
h2.section-poster {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.88; letter-spacing: -0.015em;
  text-transform: uppercase;
}
h2.section-poster .accent {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic; font-weight: 300; text-transform: none;
  font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 100;
  color: var(--rust);
}
h3.row-poster {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 0.95; letter-spacing: -0.01em;
  text-transform: uppercase;
}

.lede { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.4rem, 2.4vw, 2.4rem); line-height: 1.18; }
.body-prose { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); max-width: 38rem; }

/* Number plate */
.plate {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.95rem; border-radius: 999px;
}
.plate .num {
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.1rem; color: var(--rust);
}

/* Stat cards */
.stats {
  margin-top: 2.6rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem;
}
.stat-card { padding: 1rem 1.1rem 1.05rem; border-radius: 16px; }
.stat-card .label {
  display: block; font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.68rem; color: var(--muted); margin-bottom: 0.45rem;
}
.stat-card .value { font-family: "Anton", Impact, sans-serif; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; }

/* Photo — 3D artifact frame
   Tilt transforms live on .photo-frame so the entire casing
   (image + caption placard) moves as one rigid object. */
.photo-frame {
  position: relative;
  padding: 8px 0 56px;
  transform-style: preserve-3d;
  transform: perspective(1800px) rotateZ(-0.8deg) rotateY(2deg) rotateX(-1deg);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Alternate the rest tilt per image so the gallery feels hand-placed */
.col-5 .photo-frame,
.photo-frame.flip,
.col-4 + .col-8 .photo-frame {
  transform: perspective(1800px) rotateZ(0.7deg) rotateY(-2deg) rotateX(-1deg);
}

.photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, rgba(244,239,230,0.08) 0%, rgba(20,17,15,0.6) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: "Geist Mono", monospace;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; text-align: center;
  padding: 6px;
  position: relative;
  border-radius: 4px;
  border: 1px solid rgba(244,239,230,0.22);
  transition: border-color 0.6s, box-shadow 0.6s, filter 0.6s;
  box-shadow:
    /* Inner rim highlight + base */
    inset 0 1px 0 rgba(244,239,230,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(244,239,230,0.05),
    /* Outer thin chrome line */
    0 0 0 1px rgba(244,239,230,0.06),
    /* Stack of receding shadows for depth */
    0 2px 0 rgba(0,0,0,0.35),
    0 14px 28px -8px rgba(0,0,0,0.55),
    0 38px 70px -18px rgba(0,0,0,0.7),
    0 70px 120px -36px rgba(0,0,0,0.55),
    /* Warm rust bleed underneath */
    0 80px 130px -40px rgba(255,77,46,0.25);
}
.photo-frame:hover .photo {
  border-color: rgba(255,77,46,0.55);
  box-shadow:
    inset 0 1px 0 rgba(244,239,230,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,77,46,0.18),
    0 0 0 1px rgba(255,77,46,0.18),
    0 4px 0 rgba(0,0,0,0.4),
    0 22px 40px -12px rgba(0,0,0,0.7),
    0 56px 100px -22px rgba(0,0,0,0.85),
    0 100px 180px -40px rgba(255,77,46,0.5);
}

/* Top sheen — subtle reflection on the chrome rim */
.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(244,239,230,0.03) 0px, rgba(244,239,230,0.03) 1px, transparent 1px, transparent 14px),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 18%);
}
.photo span { position: relative; max-width: 70%; z-index: 1; }
.photo img, .photo video {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover; object-position: center;
  z-index: 2;
  border-radius: 2px;
  filter: saturate(1.05) contrast(1.06) brightness(0.96);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 6px rgba(0,0,0,0.4);
}
.photo:hover img, .photo:hover video {
  transform: scale(1.04);
  filter: saturate(1.2) contrast(1.12) brightness(1);
}
.photo.has-media span { display: none; }
.photo.landscape { aspect-ratio: 3 / 2; }
.photo.square { aspect-ratio: 1 / 1; }
.photo.portrait-tall { aspect-ratio: 3 / 4; }

/* Color world overlays — tints each photo with its section's atmosphere */
.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(135deg, rgba(255,77,46,0.06) 0%, transparent 50%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
  transition: opacity 0.5s, background 0.5s;
}
.world-plugverse .photo::after, .photo[data-world="plugverse"]::after {
  background: linear-gradient(135deg, rgba(255,77,46,0.22) 0%, rgba(200,16,46,0.08) 50%, rgba(0,0,0,0.3) 100%);
}
.world-rubber .photo::after, .photo[data-world="rubber"]::after {
  background: linear-gradient(135deg, rgba(200,16,46,0.18) 0%, rgba(107,63,160,0.14) 50%, rgba(0,0,0,0.32) 100%);
}
.world-cooper .photo::after, .photo[data-world="cooper"]::after {
  background: linear-gradient(135deg, rgba(201,190,230,0.14) 0%, rgba(178,227,225,0.1) 50%, rgba(0,0,0,0.22) 100%);
}
.world-builder .photo::after, .photo[data-world="builder"]::after {
  background: linear-gradient(135deg, rgba(255,77,46,0.06) 0%, transparent 50%, rgba(10,9,8,0.18) 100%);
}

/* Subtle film grain on photos */
.photo > .photo-grain {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.has-media .photo-grain { opacity: 0.22; }

/* Caption shard above all overlays */
.caption-shard { z-index: 5; }

/* Page-wide atmospheric backdrop (used on Builder, optional on others) */
.page-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.page-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.78) contrast(1.0) brightness(0.55) sepia(0.18) hue-rotate(-4deg);
  transform: scale(1.06);
  will-change: transform;
}
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.25) 30%, rgba(10,9,8,0.85) 100%),
    radial-gradient(ellipse at 30% 50%, rgba(10,9,8,0) 0%, rgba(10,9,8,0.4) 80%),
    linear-gradient(135deg, rgba(255,140,80,0.08) 0%, rgba(0,0,0,0) 50%, rgba(60,30,15,0.2) 100%);
}
.page-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='12'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.08; mix-blend-mode: overlay;
}
body.has-page-bg .scene-canvas { display: none; }
body.has-page-bg .ambient { display: none; }

/* Hero background photo (home page) — vintage Kodak Portra grade */
.hero-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none;
}
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 28%;
  filter: saturate(0.85) contrast(1.0) brightness(0.78) sepia(0.22) hue-rotate(-4deg);
  transform: scale(1.04);
  transition: transform 12s linear;
  will-change: transform;
}
.hero-bg::after {
  /* warm vignette + corner shadow, lifted so the figure reads */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.1) 0%, rgba(10,9,8,0.02) 35%, rgba(10,9,8,0.55) 100%),
    radial-gradient(ellipse at 25% 50%, rgba(10,9,8,0) 0%, rgba(10,9,8,0.22) 80%),
    linear-gradient(135deg, rgba(255,140,80,0.08) 0%, rgba(0,0,0,0) 50%, rgba(60,30,15,0.16) 100%);
}
.hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.1; mix-blend-mode: overlay;
}

/* Wins list (Plugverse recognition section) */
.wins-list { list-style: none; margin: 0; padding: 0; }
.wins-list li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem;
  align-items: baseline;
  border-bottom: 1px solid rgba(244,239,230,0.18);
  padding: 1.6rem 0;
}
.wins-list li:first-child { border-top: 1px solid rgba(244,239,230,0.18); }
.wins-list .amount {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 4vw, 4rem); line-height: 0.95;
  letter-spacing: -0.01em; color: var(--rust);
}
.wins-list .title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1.2;
}
.wins-list .when {
  font-family: "Geist Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.72rem; color: var(--muted);
}

/* Video as section header background */
.video-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(0.55) contrast(1.05);
}
.video-cover-wrap { position: relative; overflow: hidden; }
.video-cover-wrap > .inner { position: relative; z-index: 2; }
.video-cover-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.7) 100%);
  pointer-events: none;
}
/* Caption shard — museum placard style */
.caption-shard {
  position: absolute; left: 14px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  font-family: "Geist Mono", monospace; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--bg);
  background: linear-gradient(180deg, rgba(244,239,230,0.96) 0%, rgba(214,205,189,0.94) 100%);
  border: 1px solid rgba(244,239,230,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 0 rgba(0,0,0,0.4),
    0 8px 22px -8px rgba(0,0,0,0.7);
  max-width: calc(100% - 28px);
  transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
}
.caption-shard::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--rust);
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(255,77,46,0.8);
}

/* Project rows (builder) */
.project-row {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  border-bottom: 1px solid rgba(244,239,230,0.18); padding: 2.4rem 0;
}
.world-builder .project-row { border-bottom-color: rgba(10,9,8,0.18); }
@media (min-width: 900px) {
  .project-row { grid-template-columns: 2fr 7fr 3fr; gap: 2rem; align-items: start; }
}
.project-row .meta {
  font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.72rem; color: rgba(244,239,230,0.55); padding-top: 0.4rem;
}
.world-builder .project-row .meta { color: rgba(10,9,8,0.55); }
.project-row h3 {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s;
  color: var(--ink);
}
.world-builder .project-row h3 { color: var(--bg); }
.project-row:hover h3 { transform: translateX(0.6rem); color: var(--rust); }

/* Drag gallery (CSS-based) */
.drag-section {
  position: relative;
  padding: 5rem 0 5rem;
  overflow: hidden;
  isolation: isolate;
}
.drag-section .grid + .drag-gallery,
.drag-section [class*="drag-gallery"] { margin-top: 1.6rem; }
.drag-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.drag-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  filter: saturate(0.78) contrast(1.06) brightness(0.62) sepia(0.12);
  transform: scale(1.08);
  transition: transform 12s linear;
  will-change: transform;
}
.drag-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.18) 35%, rgba(10,9,8,0.55) 100%),
    radial-gradient(ellipse at 30% 50%, rgba(10,9,8,0) 0%, rgba(10,9,8,0.25) 75%),
    linear-gradient(135deg, rgba(255,77,46,0.06), rgba(0,0,0,0));
}
.drag-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='8'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06; mix-blend-mode: overlay;
}
.drag-section > *:not(.drag-bg) { position: relative; z-index: 2; }

.drag-gallery {
  position: relative;
  height: 580px;
  width: 100%;
  overflow: hidden;
  user-select: none;
  margin-top: 3rem;
}

.drag-track {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 1.6rem;
  height: 100%;
  padding: 0 1rem;
  will-change: transform;
}

.drag-card {
  position: relative;
  flex: 0 0 auto;
  width: 320px; height: 440px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(244,239,230,0.04);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(244,239,230,0.18);
  box-shadow:
    0 1px 0 rgba(244,239,230,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 36px 100px -28px rgba(0,0,0,0.75);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s, box-shadow 0.5s;
  isolation: isolate;
}
.drag-card:hover {
  border-color: rgba(255,77,46,0.45);
  box-shadow:
    0 1px 0 rgba(244,239,230,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 44px 120px -28px rgba(0,0,0,0.85),
    0 0 80px -20px rgba(255,77,46,0.5);
}
.drag-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.05) contrast(1.05);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s;
  pointer-events: none;
}
.drag-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.2) contrast(1.1);
}
.drag-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,9,8,0) 50%, rgba(10,9,8,0.85) 100%);
  pointer-events: none;
}
.drag-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(135deg, rgba(255,77,46,0.1) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
  pointer-events: none; mix-blend-mode: overlay;
}
.drag-card .card-grain {
  position: absolute; inset: 0; z-index: 4;
  opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Lineup cards (Rubber Band) ── */
.lineup-stage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(244,239,230,0.14);
  margin-top: 2.5rem;
}
@media (max-width: 800px) {
  .lineup-stage { grid-template-columns: repeat(2, 1fr); }
  .lineup-stage .member-card:nth-child(5) { border-right: none; }
}
.member-card {
  padding: 3rem 1.5rem 2.5rem;
  border-right: 1px solid rgba(244,239,230,0.1);
  position: relative; overflow: hidden;
  transition: background 0.5s ease;
}
.member-card:last-child { border-right: none; }
.member-card::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--crimson);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.member-card:hover::after { transform: scaleX(1); }
.member-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(200,16,46,0.12) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.5s ease;
  pointer-events: none;
}
.member-card:hover::before { opacity: 1; }
.member-card .member-role {
  font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.25em; font-size: 0.66rem; color: var(--crimson);
  margin-bottom: 1.2rem;
}
.member-card .member-name {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: 0.9;
  text-transform: uppercase; color: var(--ink);
  transition: color 0.3s;
}
.member-card:hover .member-name { color: #fff; }
.member-card .member-detail {
  font-family: "Geist Mono", monospace; font-size: 0.7rem;
  color: var(--muted); margin-top: 1rem; letter-spacing: 0.1em;
}
.member-card.is-you .member-name { color: var(--crimson); }
.member-card.is-you:hover .member-name { color: var(--crimson); }

/* ── Spotify setlist embed ── */
.setlist-wrap {
  margin-top: 3rem;
  perspective: 1200px;
}
.setlist-tilt {
  transform: rotateX(4deg) rotateY(-2deg) scale(0.98);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 12px; overflow: hidden;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(244,239,230,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.setlist-tilt:hover {
  transform: rotateX(0deg) rotateY(0deg) scale(1);
}
.setlist-tilt iframe {
  display: block; width: 100%; border: none;
}

/* ───────────────────────────────────────────────────────
   GEAR SHOWCASE — used on Lens (camera kit) and
   Rubber Band (music rig). Cards float in 3D space.
   ─────────────────────────────────────────────────────── */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  perspective: 1800px;
  margin-top: 1.5rem;
}
.gear-card.gear-card-wide { grid-column: span 2; }
@media (max-width: 900px) {
  .gear-card.gear-card-wide { grid-column: span 1; }
}
.gear-card {
  position: relative;
  background: rgba(244,239,230,0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(244,239,230,0.1);
  border-radius: 18px;
  padding: 1.4rem;
  transform-style: preserve-3d;
  transition:
    transform 0.7s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.6s, border-color 0.4s, background 0.4s;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(244,239,230,0.06);
  overflow: hidden;
}
.gear-card::before {
  /* Hairline grid backdrop for the "blueprint" feel */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(244,239,230,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,239,230,0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.6;
}
.gear-card > * { position: relative; z-index: 1; }
.gear-card:hover {
  transform: translateZ(20px) rotateX(-2deg) rotateY(2deg);
  border-color: rgba(255,77,46,0.35);
  background: rgba(244,239,230,0.06);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(255,77,46,0.18),
    inset 0 1px 0 rgba(244,239,230,0.1);
}
.gear-card .gear-img {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1a1815 0%, #0a0908 100%);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(244,239,230,0.08);
}
.gear-card .gear-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.gear-card:hover .gear-img img {
  transform: scale(1.05);
}
.gear-card .gear-img::after {
  /* Top-left rust glow on hover */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(255,77,46,0.15), transparent 60%);
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.gear-card:hover .gear-img::after { opacity: 1; }
.gear-card .gear-badge {
  position: absolute; top: 0.8rem; left: 0.8rem;
  font-family: "Geist Mono", monospace;
  font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  background: rgba(10,9,8,0.7);
  border: 1px solid rgba(255,77,46,0.4);
  padding: 0.3rem 0.55rem; border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.gear-card h4 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.005em;
  margin-bottom: 0.4rem; color: var(--ink);
}
.gear-card .gear-desc {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic; font-size: 0.95rem;
  color: var(--ink-2); margin-bottom: 0.9rem;
  line-height: 1.4;
}
.gear-card .gear-specs {
  list-style: none;
  font-family: "Geist Mono", monospace;
  font-size: 0.7rem;
  border-top: 1px solid rgba(244,239,230,0.08);
}
.gear-card .gear-specs li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(244,239,230,0.06);
  gap: 1rem;
}
.gear-card .gear-specs li:last-child { border-bottom: 0; }
.gear-card .gear-specs .key {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.58rem;
  white-space: nowrap;
}
.gear-card .gear-specs .val {
  color: var(--ink);
  text-align: right;
  font-weight: 500;
  font-size: 0.72rem;
}

/* ───────────────────────────────────────────────────────
   TRAVEL GRID — magazine-style place cards with caption
   ─────────────────────────────────────────────────────── */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
/* Concerts grid (rubber-band shows) — sized for ~5 per row */
.travel-grid:has(.show-card) {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
}
.travel-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
  cursor: none;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.travel-card:hover { transform: translateY(-6px); }
.travel-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1), filter 0.6s;
  filter: saturate(0.85) contrast(1.04);
}
.travel-card:hover img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.1);
}
.travel-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.travel-card .travel-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.1rem 1.2rem;
  z-index: 2;
}
.travel-card .travel-date {
  font-family: "Geist Mono", monospace;
  font-size: 0.6rem;
  color: var(--rust);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.travel-card .travel-place {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--ink);
}
.travel-card .travel-venue {
  font-family: "Geist Mono", monospace;
  font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.5rem;
  opacity: 0.85;
}
/* Show cards (concerts) — visual-only, no pointer cursor */
.show-card { cursor: default !important; }

/* ───────────────────────────────────────────────────────
   REEL GRID — vertical 9:16 video tiles for socials
   ─────────────────────────────────────────────────────── */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
}
.reel-card {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid rgba(244,239,230,0.08);
  transition: transform 0.5s, border-color 0.4s, box-shadow 0.5s;
}
.reel-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,77,46,0.4);
  box-shadow: 0 24px 50px rgba(0,0,0,0.5), 0 0 40px rgba(255,77,46,0.1);
}
.reel-card video, .reel-card img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.reel-card .reel-platform {
  position: absolute; top: 0.6rem; right: 0.6rem;
  font-family: "Geist Mono", monospace;
  font-size: 0.5rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.25rem 0.5rem;
  background: rgba(10,9,8,0.7);
  border: 1px solid rgba(244,239,230,0.15);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 3px;
  z-index: 2;
}
.reel-card::after {
  /* Subtle bottom gradient so any title would read */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────
   RELEASE GRID — Spotify album / artist embeds, side-by-side
   ─────────────────────────────────────────────────────── */
.release-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  perspective: 1600px;
}
.release-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(244,239,230,0.08);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.5),
    0 0 50px rgba(255,77,46,0.04);
  transform: rotateX(2deg) scale(0.99);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s, border-color 0.4s;
  background: #0a0908;
}
.release-card:hover {
  transform: rotateX(0deg) scale(1) translateY(-4px);
  border-color: rgba(255,77,46,0.3);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 80px rgba(255,77,46,0.08);
}
.release-card iframe {
  display: block; width: 100%; border: 0;
  background: #0a0908;
}
@media (max-width: 900px) {
  .release-grid { grid-template-columns: 1fr; }
  .release-card { transform: none; border-radius: 10px; }
  .release-card:hover { transform: translateY(-2px); }
}

/* ───────────────────────────────────────────────────────
   APPLE MUSIC ROTATION — embed wrapper with subtle tilt
   ─────────────────────────────────────────────────────── */
.rotation-wrap {
  margin-top: 2rem;
  perspective: 1400px;
}
.rotation-tilt {
  transform: rotateX(2deg) scale(0.99);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(244,239,230,0.1);
  box-shadow:
    0 36px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(255,77,46,0.05),
    inset 0 1px 0 rgba(244,239,230,0.06);
  position: relative;
}
.rotation-tilt:hover { transform: rotateX(0deg) scale(1); }
.rotation-tilt iframe {
  display: block; width: 100%; border: none;
  background: #0a0908;
}

/* ───────────────────────────────────────────────────────
   REPLAY ARCHIVE — monthly image drops, glass tiles
   ─────────────────────────────────────────────────────── */
.replay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 290px);
  gap: 1.6rem;
  margin-top: 1rem;
  justify-content: start;
}
.replay-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(244,239,230,0.04);
  border: 1px solid rgba(244,239,230,0.08);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s, box-shadow 0.5s;
}
.replay-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,77,46,0.4);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 50px rgba(255,77,46,0.1);
}
.replay-card img {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  object-fit: cover; object-position: center top;
  transition: transform 0.7s, filter 0.4s;
  filter: saturate(0.95);
}
.replay-card:hover img { transform: scale(1.04); filter: saturate(1); }
.replay-card figcaption {
  padding: 0.7rem 0.9rem;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.6rem;
  color: var(--ink-2);
  border-top: 1px solid rgba(244,239,230,0.06);
}
.replay-card.placeholder img { display: none; }
.replay-card.placeholder::before {
  content: "Awaiting drop";
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 9 / 16;
  font-family: "Geist Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: linear-gradient(135deg, rgba(255,77,46,0.04), rgba(10,9,8,0.6));
  border-bottom: 1px solid rgba(244,239,230,0.06);
}
@media (max-width: 900px) {
  .replay-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Page-head static photo (used on Lens hero) */
.page-head .page-cover {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.05) saturate(0.92);
}

/* ───────────────────────────────────────────────────────
   TRIP MODAL — glassmorphic popup with gallery + journal
   Triggered when a .travel-card is clicked. Pulls the
   <template class="trip-detail"> content from the card.
   ─────────────────────────────────────────────────────── */
.travel-card { cursor: none; }
.trip-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,9,8,0.78);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1.5rem 3rem;
  opacity: 0; pointer-events: none;
  overflow-y: auto;
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1);
}
.trip-modal::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,46,0.8) 40%, rgba(255,77,46,1) 50%, rgba(255,77,46,0.8) 60%, transparent);
  box-shadow: 0 0 24px 2px rgba(255,77,46,0.35);
  opacity: 0;
  transition: opacity 0.5s 0.1s;
  pointer-events: none;
}
.trip-modal.open { opacity: 1; pointer-events: auto; }
.trip-modal.open::before { opacity: 1; }
.trip-modal-content {
  width: 100%; max-width: 980px;
  background: rgba(20,17,15,0.86);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(244,239,230,0.12);
  border-radius: 24px;
  padding: 2.6rem 2.2rem;
  box-shadow:
    0 50px 120px rgba(0,0,0,0.7),
    0 0 80px rgba(255,77,46,0.06),
    inset 0 1px 0 rgba(244,239,230,0.08);
  transform: translateY(28px) scale(0.97);
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}
.trip-modal.open .trip-modal-content { transform: translateY(0) scale(1); }
.trip-close {
  position: fixed; top: 1.4rem; right: 1.4rem;
  width: 46px; height: 46px;
  background: rgba(10,9,8,0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(244,239,230,0.15);
  border-radius: 999px;
  color: var(--ink); font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background 0.3s, transform 0.4s, border-color 0.3s;
  cursor: pointer;
}
.trip-close:hover {
  background: rgba(255,77,46,0.22);
  border-color: rgba(255,77,46,0.5);
  transform: rotate(90deg) scale(1.05);
}

.trip-detail h3 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.95;
  text-transform: uppercase; letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
  background: linear-gradient(170deg, #fff 0%, var(--ink) 55%, rgba(244,239,230,0.55) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.trip-detail .trip-meta-row {
  display: flex; gap: 1.5rem; align-items: center;
  flex-wrap: wrap;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.7rem;
  margin-bottom: 1.8rem;
}
.trip-detail .trip-meta-row .accent { color: var(--rust); }
.trip-detail .trip-meta-row span { color: var(--muted); }
.trip-detail .trip-blurb {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 2rem;
  max-width: 62ch;
}
.trip-detail .trip-blurb p + p { margin-top: 1rem; }
.trip-detail .trip-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.trip-detail .trip-gallery img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(244,239,230,0.08);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, filter 0.4s;
  filter: saturate(0.88) contrast(1.04);
  cursor: pointer;
}
.trip-detail .trip-gallery img:hover {
  transform: scale(1.04);
  border-color: rgba(255,77,46,0.45);
  filter: saturate(1) contrast(1.08);
}
.trip-detail .trip-gallery img.wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

@media (max-width: 900px) {
  .trip-modal { padding: 2rem 0.8rem; }
  .trip-modal-content { padding: 1.8rem 1.2rem; border-radius: 18px; }
  .trip-detail .trip-gallery { grid-template-columns: repeat(2, 1fr); }
  .trip-detail .trip-gallery img.wide { grid-column: span 2; }
  .trip-close { top: 0.9rem; right: 0.9rem; width: 40px; height: 40px; font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .trip-detail .trip-gallery { grid-template-columns: 1fr; }
  .trip-detail .trip-gallery img.wide { grid-column: span 1; }
}

/* ── Mobile responsive for new components ── */
@media (max-width: 900px) {
  .gear-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .gear-card { padding: 1rem; }
  .gear-card:hover { transform: none; }
  .gear-card h4 { font-size: 1.3rem; }
  .gear-card .gear-desc { font-size: 0.85rem; }
  .gear-card .gear-specs li { padding: 0.4rem 0; }

  .travel-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }
  /* Concert show-cards: collapse to single column on mobile so each card
     gets full width and the artist headline doesn't crush. */
  .travel-grid:has(.show-card) { grid-template-columns: 1fr !important; gap: 0.7rem; }
  .travel-card.show-card { aspect-ratio: 16 / 11; max-width: 480px; margin-left: auto; margin-right: auto; }
  .travel-card .travel-place { font-size: 1.05rem !important; }
  .travel-card .travel-meta { padding: 0.8rem 0.9rem; }

  .reel-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }

  .rotation-tilt { transform: none !important; border-radius: 12px; }
  .rotation-tilt iframe { height: 380px !important; }
}
@media (max-width: 480px) {
  .travel-grid { grid-template-columns: 1fr !important; }
  .travel-grid:has(.show-card) { grid-template-columns: 1fr !important; }
  .reel-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Mobile hamburger button ── */
.mob-menu-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; padding: 0.8rem 1rem;
  background: rgba(10,9,8,0.45);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(244,239,230,0.12);
  border-radius: 999px;
  pointer-events: auto; cursor: pointer;
}
.mob-menu-btn span {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.25s;
}
.mob-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mob-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile nav overlay ── */
.mob-nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 58;
  background: rgba(10,9,8,0.92);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1);
}
.mob-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mob-nav-overlay a {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.8rem, 10vw, 5.5rem); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--ink-2); padding: 0.3rem 0;
  transition: color 0.2s;
}
.mob-nav-overlay a:hover, .mob-nav-overlay a.active { color: var(--ink); }
.mob-nav-overlay .mob-cta {
  margin-top: 2rem; font-family: "Geist Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rust); background: none; border: none;
  cursor: pointer; padding: 0;
}

/* ───────────────────────────────────────────────────────
   MOBILE RESPONSIVE — comprehensive overrides
   Strategy: every page section and component scaled down,
   nothing overflows the viewport, no horizontal scroll.
   ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Kill all horizontal scroll */
  html, body { overflow-x: hidden !important; max-width: 100vw; width: 100%; cursor: auto; }
  a, button { cursor: pointer; }
  .cursor { display: none !important; }

  /* Stop any element from creating horizontal overflow */
  main, section, header, footer, div { max-width: 100%; }

  /* ── Nav: show hamburger, hide desktop pill + CTA ── */
  nav.top { padding: 0 0.9rem; top: 0.8rem !important; }
  .nav-pill { display: none !important; }
  .nav-cta { display: none !important; }
  .mob-menu-btn { display: flex !important; }
  .mob-nav-overlay { display: flex; }
  .nav-logo { font-size: 0.62rem; padding: 0.65rem 0.95rem; letter-spacing: 0.2em; }

  /* ── Section padding ── */
  section.block { padding: 3.2rem 1.1rem; }
  section.world-builder { padding: 3.2rem 1.1rem; }
  .drag-section { padding: 3.5rem 0; }

  /* ── Hero (home page) ── */
  section.hero { padding: 5rem 1.1rem 2.5rem !important; min-height: 100svh; perspective: none !important; }
  .hero-meta {
    top: 5.2rem !important; left: 1.1rem !important; right: 1.1rem !important;
    font-size: 0.58rem !important; letter-spacing: 0.18em !important;
    flex-wrap: wrap; gap: 0.5rem;
  }
  .hero-meta span { white-space: nowrap; }
  .hero h1 { transform: none !important; margin-top: 1rem !important; }
  .hero h1 .row span { font-size: clamp(2.8rem, 16vw, 7rem); }
  .hero-bottom { margin-top: 2rem !important; gap: 1.1rem !important; flex-direction: column !important; align-items: stretch !important; }
  .hero-bottom .lead-glass {
    max-width: 100% !important;
    padding: 1rem 1.1rem !important;
    border-radius: 16px !important;
    transform: none !important;
  }
  .hero-bottom .lead { font-size: clamp(0.95rem, 4vw, 1.2rem) !important; }

  /* Role pill — fix the way-too-big role on mobile */
  .role-glass {
    padding: 0.4rem 0.9rem !important;
    border-radius: 999px !important;
    gap: 0.7rem !important;
    align-self: flex-start;
    width: auto !important;
    max-width: 100% !important;
  }
  .role-glass .eyebrow { font-size: 0.6rem !important; letter-spacing: 0.2em; }
  .role-track {
    height: 1.4rem !important;
    font-size: 1.05rem !important;
    line-height: 1.4rem !important;
  }
  .role-track .inner span { height: 1.4rem !important; }

  .scroll-cue { font-size: 0.58rem !important; bottom: 0.8rem !important; }

  /* ── Page head (video / photo header on inner pages) ── */
  .page-head { min-height: 56vh; padding: 5rem 1.1rem 2.2rem; }
  .video-cover-wrap { min-height: 56vh; }

  /* ── Poster typography ── */
  .poster, h1.poster { font-size: clamp(3.4rem, 17vw, 7.5rem) !important; line-height: 0.92 !important; }
  .section-poster, h2.section-poster { font-size: clamp(2.2rem, 11vw, 4.5rem) !important; line-height: 0.92 !important; }
  .row-poster, h3.row-poster { font-size: clamp(1.6rem, 7vw, 2.6rem) !important; line-height: 0.98 !important; }

  /* ── Body copy ── */
  .lede { font-size: clamp(1.05rem, 4.5vw, 1.4rem) !important; line-height: 1.3 !important; }
  .body-prose { font-size: 0.95rem !important; line-height: 1.55 !important; max-width: 100%; }
  .eyebrow { font-size: 0.62rem !important; letter-spacing: 0.18em !important; }

  /* ── Marquee ── */
  .marquee-band { padding: 0.8rem 0; }
  .marquee-track { font-size: clamp(1.4rem, 6.5vw, 3rem); gap: 1.6rem; }

  /* ── Plate (numbered chips) ── */
  .plate { padding: 0.4rem 0.8rem; gap: 0.5rem; }
  .plate .num { font-size: 0.95rem; }

  /* ── Stats: 2 columns, never overflow ── */
  .stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    margin-top: 1.6rem !important;
  }
  .stat-card { padding: 0.85rem 0.95rem !important; min-width: 0 !important; }
  .stat-card .label { font-size: 0.58rem !important; letter-spacing: 0.18em !important; }
  .stat-card .value { font-size: 1.05rem !important; word-wrap: break-word; }

  /* ── Project rows (Builder) ── */
  .project-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.6rem 0 !important; }
  .project-row .meta { font-size: 0.62rem; padding-top: 0; }
  .project-row:hover h3 { transform: none !important; }
  /* Glass-card variant (home page Builder section) — keep horizontal padding so
     text doesn't touch the card edges, and shrink margin/radius for mobile. */
  .block.world-builder.has-bg .project-row {
    padding: 1.4rem 1.2rem !important;
    margin-bottom: 0.8rem !important;
    border-radius: 14px !important;
  }

  /* ── Lineup cards (Rubber Band) ── */
  .lineup-stage { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
  .member-card { padding: 1.6rem 0.9rem 1.4rem; }
  .member-card { border-right: 1px solid rgba(244,239,230,0.1); }
  .member-card:nth-child(2n) { border-right: none; }
  .member-card:nth-child(n+3) { border-top: 1px solid rgba(244,239,230,0.1); }
  .member-card:nth-child(5) { grid-column: span 2; }
  .member-card .member-role { font-size: 0.58rem !important; margin-bottom: 0.7rem !important; }
  .member-card .member-name { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  .member-card .member-detail { font-size: 0.6rem !important; margin-top: 0.6rem !important; }

  /* ── Setlist (Spotify embed) — kill 3D tilt on touch ── */
  .setlist-wrap { perspective: none; margin-top: 1.5rem; }
  .setlist-tilt { transform: none !important; border-radius: 8px; display: block; }
  .setlist-tilt iframe { height: 580px !important; min-height: 580px; width: 100% !important; display: block; }
  /* Setlist section grid must collapse to single col so the iframe stops
     leaving the col-5 photos in a sidebar void on phones. */
  .setlist-section .grid { grid-template-columns: 1fr !important; }
  .setlist-section .col-5, .setlist-section .col-7 { grid-column: 1 / -1 !important; }

  /* ── Drag gallery ── */
  .drag-section { padding: 3.5rem 0 !important; }
  .drag-gallery, #drag-gallery { height: 280px !important; }
  .drag-card { width: 170px !important; height: 240px !important; }
  .drag-card .card-meta .title { font-size: 1rem !important; }
  .drag-card .card-meta .year { font-size: 0.55rem !important; }

  /* ── Photo frames — flatten 3D, prevent overflow ── */
  .photo-frame {
    max-width: 100% !important;
    transform: none !important;
    padding: 6px 0 36px !important;
  }
  .photo-frame:hover { transform: none !important; }
  .photo.portrait-tall { aspect-ratio: 3/4; }
  .photo.landscape { aspect-ratio: 16/9; }
  .caption-shard {
    font-size: 0.55rem !important;
    padding: 0.35rem 0.6rem !important;
    left: 8px !important;
    bottom: 6px !important;
    max-width: calc(100% - 16px) !important;
  }

  /* ── Now list ── */
  .now-list { margin-top: 1.5rem; }
  .now-list li {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    padding: 0.9rem 0 !important;
    font-size: 0.92rem !important;
  }

  /* ── Grid columns: stack everything single-column ── */
  section.block .grid { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
  .col-3, .col-4, .col-5, .col-7, .col-8, .col-9, .col-12 { grid-column: 1 / -1 !important; }

  /* ── Footer ── */
  footer.site {
    padding: 3rem 1.1rem 2rem !important;
    overflow: hidden !important;
  }
  footer.site > div {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* The "Get in touch" email button — was looking like raw HTML */
  footer.site button.under {
    font-size: clamp(1.6rem, 7vw, 3rem) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1 !important;
    display: block !important;
  }
  .massive {
    font-size: clamp(2.4rem, 18vw, 6rem) !important;
    margin-top: 1.5rem !important;
    white-space: nowrap;
  }

  /* ── Modal ── */
  .modal-backdrop { padding: 1rem; }
  .modal {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.6rem 1.2rem !important;
    border-radius: 18px !important;
  }
  .modal h3 { font-size: 1.8rem !important; margin-bottom: 1rem !important; }
  .modal .email-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.78rem !important;
    word-break: break-all;
  }
  .modal .options { grid-template-columns: 1fr !important; gap: 0.45rem !important; }

  /* ── SVG decorative effects: scale down, less prominent ── */
  .fx-waves, .fx-cable, .fx-waveform, .fx-ekg { opacity: 0.4; }

  /* ── Plugverse / world-specific atmosphere overlays ── */
  section.world-plugverse::before,
  section.world-rubber::before,
  section.world-cooper::before,
  section.world-athletic::before { background-size: 100% 100%; }

  /* ── Disable scroll progress bar visual on tiny screens (keep functional) ── */
  .nav-progress-track { height: 1.5px; }

  /* ── Disable photo-frame 3D mouse tilt (fingers don't hover) ── */
  .photo-frame { transform: none !important; transition: none !important; }
}

/* ───────────────────────────────────────────────────────
   EXTRA-SMALL screens (≤480px) — tighter clamps
   ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  section.block { padding: 2.6rem 0.9rem; }
  .page-head { padding: 4.5rem 0.9rem 1.8rem; min-height: 50vh; }
  .video-cover-wrap { min-height: 50vh; }

  .poster, h1.poster { font-size: clamp(3.2rem, 18vw, 6.5rem) !important; }
  .section-poster, h2.section-poster { font-size: clamp(1.9rem, 11vw, 3.5rem) !important; }

  .lede { font-size: 1rem !important; }
  .body-prose { font-size: 0.9rem !important; }

  /* Stats: 1 column at very small widths */
  .stats { grid-template-columns: 1fr !important; }

  /* Lineup cards: still 2-col but tighter */
  .member-card { padding: 1.2rem 0.7rem 1.1rem; }

  /* Drag gallery */
  .drag-gallery, #drag-gallery { height: 240px !important; }
  .drag-card { width: 150px !important; height: 210px !important; }

  /* Setlist iframe — keep tall so Spotify's mobile playlist isn't truncated */
  .setlist-tilt iframe { height: 540px !important; min-height: 540px; }

  /* Modal h3 */
  .modal h3 { font-size: 1.5rem !important; }

  .massive { font-size: clamp(2rem, 16vw, 4.5rem) !important; }

  footer.site button.under { font-size: clamp(1.3rem, 6.5vw, 2.4rem) !important; }
}
.drag-card .card-meta {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  z-index: 5; pointer-events: none;
}
.drag-card .card-meta .title {
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.4rem; line-height: 1; text-transform: uppercase;
  color: var(--ink); filter: drop-shadow(0 1px 6px rgba(0,0,0,0.8));
}
.drag-card .card-meta .year {
  font-family: "Geist Mono", monospace; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(244,239,230,0.65);
}

/* Drag hint */
.drag-hint {
  position: absolute; bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.62rem; color: rgba(244,239,230,0.3);
  pointer-events: none; white-space: nowrap; z-index: 3;
}

/* ── Page transition veil — matches the loader exactly so the
   handoff to the next page's loader feels like ONE screen ── */
.transition-veil {
  position: fixed; inset: 0; z-index: 8001; /* sits ABOVE the loader (8000) */
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(10,9,8,0.68);
  backdrop-filter: blur(48px) saturate(1.6);
  -webkit-backdrop-filter: blur(48px) saturate(1.6);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.85,0,0.15,1);
}
/* Rust accent line at the top — same as the loader */
.transition-veil::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,46,0.8) 40%, rgba(255,77,46,1) 50%, rgba(255,77,46,0.8) 60%, transparent);
  box-shadow: 0 0 24px 2px rgba(255,77,46,0.35);
  opacity: 0;
  transition: opacity 0.4s 0.05s;
}
.transition-veil .label {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(4rem, 13vw, 13rem); line-height: 0.88;
  text-transform: uppercase; letter-spacing: -0.02em; text-align: center;
  background: linear-gradient(170deg, #fff 0%, var(--ink) 55%, rgba(244,239,230,0.45) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(255,77,46,0.18));
  opacity: 0;
  transform: translateY(30px) scale(0.94);
  transition: opacity 0.45s 0.15s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s 0.15s cubic-bezier(0.22,1,0.36,1);
  padding: 0 1.5rem;
}
.transition-veil.in {
  opacity: 1;
  pointer-events: auto;
}
.transition-veil.in::before { opacity: 1; }
.transition-veil.in .label {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.transition-veil.out {
  opacity: 0;
  pointer-events: none;
}

/* ── Page head (inner pages: athletic, builder, now, plugverse, rubber-band) ── */
.page-head {
  min-height: 72vh;
  padding: 10rem 2.4rem 5rem;
  position: relative;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.page-head .inner { position: relative; z-index: 2; max-width: 1600px; width: 100%; margin: 0 auto; }
.page-head.world-rubber::before,
.page-head.world-athletic::before,
.page-head.world-plugverse::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.2) 40%, rgba(10,9,8,0.75) 100%);
}

/* ── Footer ── */
footer.site {
  padding: 5rem 2.4rem;
  border-top: 1px solid rgba(244,239,230,0.1);
  position: relative; z-index: 1;
  overflow: hidden;
}
.massive {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(5rem, 18vw, 22rem);
  line-height: 0.85; letter-spacing: -0.02em; text-transform: uppercase;
  color: rgba(244,239,230,0.06);
  pointer-events: none; user-select: none;
}

/* ── Now list ── */
.now-list { list-style: none; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 0; }
.now-list li {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(244,239,230,0.08);
  font-size: 1.05rem; line-height: 1.5; color: var(--ink-2);
}
.now-list li:first-child { border-top: 1px solid rgba(244,239,230,0.08); }
.now-list .tag {
  font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.63rem;
  color: var(--rust); white-space: nowrap;
  background: rgba(255,77,46,0.1); border: 1px solid rgba(255,77,46,0.25);
  padding: 0.2rem 0.55rem; border-radius: 4px; flex-shrink: 0;
}

/* ── Contact modal ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,9,8,0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: rgba(20,17,15,0.88);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(244,239,230,0.14);
  box-shadow:
    0 1px 0 rgba(244,239,230,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 60px 140px -40px rgba(0,0,0,0.9),
    0 0 80px -20px rgba(255,77,46,0.15);
  border-radius: 24px;
  padding: 2.5rem 2.2rem;
  width: min(480px, calc(100vw - 2rem));
  position: relative;
}
.modal h3 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.4rem;
}
.email-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(244,239,230,0.05);
  border: 1px solid rgba(244,239,230,0.12);
  border-radius: 12px; margin-bottom: 1.2rem;
  font-family: "Geist Mono", monospace; font-size: 0.82rem;
  color: var(--ink-2); letter-spacing: 0.04em;
}
.copy-btn {
  font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.66rem;
  padding: 0.42rem 0.9rem; border-radius: 8px;
  background: var(--rust); color: var(--bg); white-space: nowrap;
  transition: transform 0.3s, box-shadow 0.3s;
}
.copy-btn:hover { transform: scale(1.04); box-shadow: 0 0 20px -4px rgba(255,77,46,0.7); }
.options {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(244,239,230,0.1);
  margin-bottom: 0.8rem;
}
.options a {
  font-family: "Geist Mono", monospace; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.66rem;
  padding: 0.5rem 0.9rem; border-radius: 8px;
  background: rgba(244,239,230,0.05);
  border: 1px solid rgba(244,239,230,0.1);
  color: var(--ink-2); transition: color 0.3s, border-color 0.3s;
}
.options a:hover { color: var(--ink); border-color: rgba(244,239,230,0.3); }

/* Toast */
.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(60px);
  z-index: 1000; background: rgba(20,17,15,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(244,239,230,0.16);
  border-radius: 12px; padding: 0.7rem 1.2rem;
  font-family: "Geist Mono", monospace; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink);
  opacity: 0; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s;
  pointer-events: none; white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   NEW VISUAL SYSTEMS — version 2
═══════════════════════════════════════════════════════════════ */

/* ── Hero ambient video background ──
   Drop videos/hero-ambient.mp4 — see AI guide for generation specs */
.hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.65) contrast(1.05) brightness(0.6) sepia(0.12);
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: transform;
}
.hero-bg.video-loaded video { opacity: 1; }

/* ── Parallax photo divider (athletic.html between sections) ──
   Drop photos/gym_photo.jpg and photos/golf_course.jpg */
.parallax-divider {
  position: relative; height: 55vh; min-height: 340px;
  overflow: hidden; isolation: isolate;
}
.parallax-divider .para-img {
  position: absolute; top: -20%; left: 0; right: 0; bottom: -20%;
  width: 100%; height: 140%;
  object-fit: cover; object-position: center;
  filter: saturate(0.55) contrast(1.18) brightness(0.38);
  will-change: transform;
}
.parallax-divider::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.7) 0%, rgba(10,9,8,0.08) 30%, rgba(10,9,8,0.08) 70%, rgba(10,9,8,0.75) 100%);
}
.parallax-divider .para-label {
  position: absolute; bottom: 2rem; left: 2.4rem; z-index: 2;
}

/* ── Plugverse app mockup tilt card ── */
.mockup-card {
  position: relative; border-radius: 14px;
  overflow: hidden; background: rgba(10,9,8,0.8);
  border: 1px solid rgba(255,77,46,0.28);
  box-shadow:
    0 1px 0 rgba(255,77,46,0.3) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 40px 100px -28px rgba(255,77,46,0.45),
    0 0 0 1px rgba(255,77,46,0.08);
  transform: perspective(1200px) rotateY(-10deg) rotateX(4deg) translateZ(0);
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), box-shadow 0.8s;
  will-change: transform;
}
.mockup-card:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(0deg) translateY(-8px) translateZ(0);
  box-shadow:
    0 1px 0 rgba(255,77,46,0.4) inset,
    0 60px 140px -28px rgba(255,77,46,0.6);
}
.mockup-bar {
  padding: 0.65rem 0.9rem;
  background: rgba(16,13,11,0.98);
  border-bottom: 1px solid rgba(255,77,46,0.12);
  display: flex; align-items: center; gap: 0.45rem;
}
.mockup-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mockup-bar .dot:nth-child(1) { background: rgba(255,96,55,0.85); }
.mockup-bar .dot:nth-child(2) { background: rgba(255,190,0,0.55); }
.mockup-bar .dot:nth-child(3) { background: rgba(0,200,81,0.45); }
.mockup-bar .url {
  flex: 1; margin-left: 0.3rem;
  font-family: "Geist Mono", monospace; font-size: 0.63rem;
  color: rgba(244,239,230,0.38); text-transform: lowercase; letter-spacing: 0.04em;
}
.mockup-body { background: rgba(12,10,9,0.95); min-height: 220px; }
.mockup-body img, .mockup-body video {
  display: block; width: 100%; height: auto;
}
/* Laptop: cap mockup-card width so the screenshot section doesn't
   dominate one viewport. Image stays natural-aspect (no crop). */
@media (max-width: 1500px) {
  .mockup-card { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 1280px) {
  .mockup-card { max-width: 380px; }
}
.mockup-placeholder {
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.8rem; padding: 2rem;
  background: linear-gradient(160deg, rgba(255,77,46,0.06) 0%, rgba(10,9,8,0.9) 60%);
}
.mockup-placeholder .eyebrow { color: rgba(255,77,46,0.5); }
.mockup-placeholder p {
  font-family: "Geist Mono", monospace; font-size: 0.68rem;
  color: rgba(244,239,230,0.25); text-align: center; letter-spacing: 0.08em;
  max-width: 24rem; line-height: 1.7;
}

/* ── Builder page code-grid backdrop (replaces beach photo) ── */
.code-backdrop {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: var(--bg-2);
}
.code-backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,77,46,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,77,46,0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at 35% 35%, black 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 35% 35%, black 0%, transparent 68%);
}
.code-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 18%, rgba(255,77,46,0.14) 0%, transparent 48%),
    radial-gradient(circle at 18% 78%, rgba(200,16,46,0.08) 0%, transparent 44%),
    linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.55) 100%);
}

/* ── Countdown timer (now.html) ── */
.countdown-target {
  font-family: "Geist Mono", monospace; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--rust);
  margin-bottom: 0.8rem; display: block;
}
.countdown-block {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
  margin: 1.5rem 0 2.5rem;
}
.countdown-unit {
  padding: 1.3rem 0.8rem 1.1rem; border-radius: 14px;
  background: rgba(244,239,230,0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(244,239,230,0.1); text-align: center;
}
.countdown-unit .num {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2rem, 5vw, 4.5rem); line-height: 0.92;
  text-transform: uppercase; color: var(--rust); display: block;
}
.countdown-unit .lbl {
  display: block; font-family: "Geist Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.6rem; color: var(--muted); margin-top: 0.5rem;
}
@media (max-width: 600px) { .countdown-block { grid-template-columns: repeat(2, 1fr); } }

/* ── Now page workspace photo background ──
   Drop photos/workspace.jpg — see AI guide */
.now-workspace-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.now-workspace-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.35) contrast(1.1) brightness(0.22);
  transform: scale(1.06); will-change: transform;
}
.now-workspace-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.45) 0%, rgba(10,9,8,0.15) 40%, rgba(10,9,8,0.88) 100%);
}

/* ── Drag gallery video card ── */
.drag-card.is-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transition: transform 1.2s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.drag-card.is-video:hover video { transform: scale(1.06); }

/* ── Project row tech badge ── */
.tech-tag {
  display: inline-block;
  font-family: "Geist Mono", monospace; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 0.18rem 0.5rem; border-radius: 4px;
  background: rgba(244,239,230,0.07);
  border: 1px solid rgba(244,239,230,0.14);
  color: var(--muted); margin-right: 0.35rem; margin-top: 0.5rem;
  vertical-align: middle;
}
.world-builder .tech-tag {
  background: rgba(10,9,8,0.08); border-color: rgba(10,9,8,0.18); color: rgba(10,9,8,0.55);
}

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Body prose link ── */
.body-prose a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
/* ============================================================
   v2 polish — added during the asset triage / wiring pass
   Concert cards (rubber-band) — meta over a darkened image
   3D tilt accents on gear-cards
   Parallax depth + perf-friendly motion
   Mobile responsive guards on the new sections
   ============================================================ */

/* Concert card — has show-card class, no modal, just date + artist + venue */
.travel-card.show-card { cursor: default; }
.travel-card.show-card .travel-meta { padding-bottom: 1.4rem; }
.travel-card.show-card .travel-venue {
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  color: rgba(244,239,230,0.72);
  margin-top: 0.3rem;
  display: block;
}
.travel-card.show-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0) 30%, rgba(10,9,8,0.45) 65%, rgba(10,9,8,0.85) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.travel-card.show-card .travel-meta { z-index: 2; position: relative; }

/* Gear-card 3D tilt — pure CSS, GPU-accelerated, respects prefers-reduced-motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gear-card {
    transform-style: preserve-3d;
    perspective: 900px;
    will-change: transform;
  }
  .gear-card .gear-img {
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
    transform: translateZ(0);
  }
  .gear-card:hover .gear-img {
    transform: translateZ(20px) rotateX(2deg) rotateY(-3deg);
  }
  .gear-card .gear-img img {
    transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease;
  }
  .gear-card:hover .gear-img img {
    transform: scale(1.08);
    filter: brightness(1.1) saturate(1.1);
  }
  .gear-card h4 {
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  }
  .gear-card:hover h4 {
    transform: translateZ(8px);
  }
}

/* Cinematic page-cover treatment — subtle radial vignette + film grain layer */
.page-head .page-cover {
  filter: brightness(0.55) saturate(1.05) contrast(1.05);
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(10,9,8,0.35) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.45) 0%, rgba(10,9,8,0) 25%, rgba(10,9,8,0.6) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-head .inner { position: relative; z-index: 1; }

/* Trip-gallery — hover: slow Ken Burns scale */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .trip-gallery img {
    transition: transform 1.2s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease;
  }
  .trip-gallery img:hover {
    transform: scale(1.06);
    filter: saturate(1.15) brightness(1.05);
  }
}

/* Replay grid placeholders — soft loading shimmer when image fails (lens.html) */
.replay-card.placeholder {
  background: linear-gradient(110deg, rgba(244,239,230,0.04) 35%, rgba(244,239,230,0.10) 50%, rgba(244,239,230,0.04) 65%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Concert grid mobile responsiveness — keep 1 col below 640px */
@media (max-width: 640px) {
  .travel-card.show-card .travel-place { font-size: 1.4rem; }
  .travel-card.show-card .travel-venue { font-size: 0.6rem; }
}

/* Lens hero — special treatment for the cooper_tux_with_canon photo (portrait subject) */
.world-cooper.page-head .page-cover {
  object-position: center 30%;
}

/* Athletic golf-bag section — match existing world-athletic gear-grid spacing */
.world-athletic .gear-grid { margin-top: 2rem; }

/* Parallax-divider — subtle scale on intersect (still GPU friendly) */
.parallax-divider .para-img {
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1);
}
.parallax-divider:hover .para-img { transform: scale(1.04); }

/* Reduced motion — kill scale and tilt animations entirely */
@media (prefers-reduced-motion: reduce) {
  .gear-card:hover .gear-img,
  .gear-card:hover .gear-img img,
  .gear-card:hover h4,
  .trip-gallery img:hover,
  .parallax-divider:hover .para-img {
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile ergonomics — tighter padding on rubber band gear-grid (12 cards now) */
@media (max-width: 720px) {
  .gear-grid { gap: 1.2rem; }
  .gear-card { padding: 1rem; }
  .gear-card .gear-img { aspect-ratio: 1 / 1; }
}

/* Now-page workspace backdrop — heavy darkening so the foreground text reads */
.now-workspace-bg img {
  filter: brightness(0.35) saturate(0.85) contrast(1.05);
}

/* ============================================================
   Concert show-card v2 — genre tag + hover blurb reveal
   The card sits at rest with image + date/artist/venue.
   On hover (or focus), a short blurb fades up from the bottom
   over the dark gradient. Text is always readable, never floats
   in mid-air without a backdrop.
   ============================================================ */

.travel-card.show-card .show-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
  padding: 0.32rem 0.7rem;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.6rem;
  color: rgba(244,239,230,0.92);
  background: rgba(10,9,8,0.55);
  border: 1px solid rgba(244,239,230,0.16);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.travel-card.show-card .show-blurb {
  margin-top: 0.7rem;
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(244,239,230,0.85);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 0.55s cubic-bezier(0.22,1,0.36,1),
              opacity 0.4s ease,
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}

@media (hover: hover) {
  .travel-card.show-card:hover .show-blurb,
  .travel-card.show-card:focus-within .show-blurb {
    max-height: 12rem;
    opacity: 1;
    transform: translateY(0);
  }
  .travel-card.show-card:hover::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(10,9,8,0) 10%, rgba(10,9,8,0.55) 50%, rgba(10,9,8,0.92) 100%);
  }
}

/* On touch devices — always show the blurb (no hover state) */
@media (hover: none) {
  .travel-card.show-card .show-blurb {
    max-height: 12rem;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced-motion: instant reveal, no slide */
@media (prefers-reduced-motion: reduce) {
  .travel-card.show-card .show-blurb {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* ============================================================
   Hero video-cover utility — used on rubber-band, lens, builder,
   athletic, plugverse. Full-viewport ambient looping background.
   The .video-cover element fills the page-head; .inner sits on
   top with a vignette gradient between for legibility.
   ============================================================ */
.page-head.video-cover-wrap {
  position: relative;
  min-height: 100vh;
  padding: 8rem 2.4rem 4rem;
  overflow: hidden;
}
.page-head .video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.45) saturate(0.95) contrast(1.05);
}
.page-head.video-cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(10,9,8,0.55) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.05) 35%, rgba(10,9,8,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-head.video-cover-wrap .inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .page-head.video-cover-wrap { padding: 6rem 1.4rem 3rem; min-height: 80vh; }
}

/* Reduced motion — pause the loop, show the poster */
@media (prefers-reduced-motion: reduce) {
  .page-head .video-cover { animation: none; }
}

/* ============================================================
   Concert show-card v3 — artist name burned into the image
   The artist name now lives at the bottom of the image area
   as a poster-style overlay, always visible. Genre tag stays
   top-left, blurb still hover-reveals beneath the meta.
   ============================================================ */
.travel-card.show-card .show-headline {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 3;
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink, #F4EFE6);
  text-shadow:
    0 2px 24px rgba(0,0,0,0.85),
    0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
.travel-card.show-card .show-headline .accent-strip {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--rust, #c44a26);
  margin-bottom: 0.55rem;
  box-shadow: 0 0 14px rgba(196,74,38,0.5);
}

/* Strengthen the bottom gradient so the headline always reads */
.travel-card.show-card::before {
  background: linear-gradient(180deg, rgba(10,9,8,0) 25%, rgba(10,9,8,0.5) 60%, rgba(10,9,8,0.95) 100%);
  opacity: 1;
}

/* The meta block sits below the image now */
.travel-card.show-card .travel-meta {
  position: relative;
  z-index: 2;
  padding-top: 1rem;
}
.travel-card.show-card .travel-place { display: none; } /* duplicated by show-headline */

/* ============================================================
   gear-card-wide image — constrain height so the studio shot
   doesn't push the card past one viewport.
   ============================================================ */
.gear-card.gear-card-wide .gear-img {
  aspect-ratio: 16 / 9;
  max-height: 380px;
}
.gear-card.gear-card-wide .gear-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 720px) {
  .gear-card.gear-card-wide .gear-img { aspect-ratio: 4 / 3; max-height: 280px; }
}

/* ============================================================
   Section backdrops — full-bleed darkened image behind a section
   Used on: index Builder, index Now, lens Manifesto, etc.
   ============================================================ */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-bg img,
.section-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.32) saturate(0.85) contrast(1.05);
}
.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(10,9,8,0.55) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.6) 0%, rgba(10,9,8,0.05) 25%, rgba(10,9,8,0.7) 100%);
}
.block.has-bg { position: relative; overflow: hidden; }
.block.has-bg > .grid,
.block.has-bg > div:not(.section-bg) { position: relative; z-index: 1; }
.block.has-bg > .section-bg { z-index: 0; }

/* When the .block.world-builder gets a backdrop, drop the cream
   block entirely and turn each project row into a dark glassmorphic
   card so the Vegas backdrop bleeds through. Light text on dark glass. */
section.world-builder.has-bg {
  background: transparent !important;
  color: var(--ink) !important;
}
.block.world-builder.has-bg .project-row {
  background: rgba(10,9,8,0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(244,239,230,0.18);
  border-radius: 18px;
  margin-bottom: 1rem;
  padding: 1.6rem 2rem;
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,0.55),
    0 1px 0 rgba(244,239,230,0.16) inset;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.4s ease, border-color 0.4s ease;
}
.block.world-builder.has-bg .project-row:hover {
  background: rgba(10,9,8,0.55);
  border-color: rgba(244,239,230,0.28);
  transform: translateY(-2px);
}
.block.world-builder.has-bg .project-row .meta { color: rgba(244,239,230,0.6) !important; }
.block.world-builder.has-bg .project-row h3,
.block.world-builder.has-bg .project-row h3.row-poster { color: var(--ink) !important; }
.block.world-builder.has-bg .project-row .body-prose { color: rgba(244,239,230,0.78) !important; }
.block.world-builder.has-bg .project-row:hover h3 { color: var(--rust) !important; }
.block.world-builder.has-bg .section-poster { color: var(--ink) !important; }
.block.world-builder.has-bg .section-poster .accent { color: var(--rust) !important; }
.block.world-builder.has-bg .plate {
  background: rgba(244,239,230,0.06) !important;
  border-color: rgba(244,239,230,0.16) !important;
  color: var(--ink) !important;
}
.block.world-builder.has-bg .plate .num { color: var(--rust) !important; }
.block.world-builder.has-bg .plate .eyebrow { color: rgba(244,239,230,0.7) !important; }
.block.world-builder.has-bg .eyebrow { color: rgba(244,239,230,0.7) !important; }
.block.world-builder.has-bg .tech-tag {
  background: rgba(244,239,230,0.06) !important;
  border-color: rgba(244,239,230,0.18) !important;
  color: rgba(244,239,230,0.72) !important;
}
.block.world-builder.has-bg .under { color: var(--ink) !important; }
.block.world-builder.has-bg [style*="border-top"] { border-top-color: rgba(244,239,230,0.18) !important; }

/* ============================================================
   v3 — vintage section backdrops, square gear cards, manifesto
   glass, lineup-banner video overlay, golf gallery polish
   ============================================================ */

/* Make every gear card image square — the AI-generated isolated
   shots are 1:1, this stops cropping. */
.gear-card .gear-img,
.gear-card.gear-card-wide .gear-img {
  aspect-ratio: 1 / 1;
  max-height: none;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
}
.gear-card .gear-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section backdrop — vintage filter (warm sepia + faded contrast),
   not raw exposure reduction. */
.section-bg img,
.section-bg video {
  filter: brightness(0.55) saturate(0.78) contrast(1.04) sepia(0.18) hue-rotate(-4deg);
}
.section-bg::after {
  background:
    radial-gradient(ellipse at center, rgba(10,9,8,0.25) 0%, rgba(10,9,8,0.7) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.18) 35%, rgba(10,9,8,0.7) 100%);
}

/* Manifesto glassmorphic card — text floats over the landscape */
.manifesto-section {
  position: relative;
  min-height: 80vh;
  padding: 8rem 2.4rem 6rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.manifesto-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.manifesto-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.82) contrast(1.05) sepia(0.18);
}
.manifesto-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.18) 40%, rgba(10,9,8,0.7) 100%);
}
.manifesto-section > .grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.manifesto-glass {
  padding: 2.4rem 2.8rem;
  border-radius: 26px;
  background: rgba(244,239,230,0.04);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(244,239,230,0.14);
  box-shadow:
    0 32px 80px -28px rgba(0,0,0,0.7),
    0 1px 0 rgba(244,239,230,0.18) inset;
  max-width: 64rem;
  position: relative;
  overflow: hidden;
}
.manifesto-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .manifesto-section { min-height: 70vh; padding: 5rem 1.4rem 4rem; }
  .manifesto-glass { padding: 1.6rem 1.4rem; }
}

/* Lineup banner — video full-bleed with member cards overlaid */
.lineup-banner {
  position: relative;
  height: 88vh;
  min-height: 640px;
  overflow: hidden;
  padding: 0;
}
.lineup-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.45) saturate(0.95) contrast(1.05);
}
.lineup-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,9,8,0.45) 0%, rgba(10,9,8,0.05) 30%, rgba(10,9,8,0.85) 100%);
  pointer-events: none;
}
.lineup-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7rem 0 4rem;
}
.lineup-banner .lineup-stage {
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
  padding: 0 2.4rem;
}
@media (max-width: 720px) {
  .lineup-banner { height: auto; min-height: 0; padding: 6rem 0 3rem; }
  .lineup-overlay { padding: 0; gap: 2.4rem; }
}

/* Golf videos — chained loop container in the photo-frame */
.golf-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Tame the new clips' brighter exposure so they match the older ones */
  filter: brightness(0.78) saturate(0.95) contrast(1.04) !important;
}
/* Constrain the golf-video photo-frame so the portrait video doesn't grow
   taller than the col-7 text block on the left. Cap width and use a less
   extreme aspect ratio so it scales nicely on every viewport. */
.col-5 .photo-frame:has(.golf-video-frame) {
  max-width: 440px;
  margin-left: auto;
}
.photo.golf-video-frame { aspect-ratio: 4 / 5 !important; }
@media (max-width: 900px) {
  .col-5 .photo-frame:has(.golf-video-frame) { max-width: 100%; margin: 0 auto; }
}

/* Iron section — two overlapping photo cards (polaroid stack, like /cover) */
.iron-stack {
  position: relative;
  max-width: 440px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
}
.iron-card {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(244,239,230,0.08);
}
.iron-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.iron-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}
.iron-card-back {
  top: 0; left: 0;
  width: 78%; height: 78%;
  transform: rotate(-3deg);
  z-index: 1;
}
.iron-card-front {
  bottom: 0; right: 0;
  width: 60%; height: 65%;
  transform: rotate(5deg);
  z-index: 2;
}
.iron-stack-caption {
  position: absolute;
  bottom: 0; left: 0;
  z-index: 3;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.6rem;
  color: rgba(244,239,230,0.92);
  background: rgba(10,9,8,0.55);
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  backdrop-filter: blur(6px);
  transform: rotate(-3deg) translateY(0.4rem);
}
@media (max-width: 900px) {
  .iron-stack { max-width: 100%; margin: 0 auto; }
}

/* Golf gallery — small triptych below the section */
.golf-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 2.4rem;
}
.golf-gallery .photo-frame { margin: 0; }
.golf-gallery .photo { aspect-ratio: 4 / 3; }
@media (max-width: 720px) {
  .golf-gallery { grid-template-columns: 1fr; }
}

/* ============================================================
   Strip-grid — full-width 3-up photo strip used below text rows
   to absorb supporting photos without creating horizontal
   whitespace next to the col-7/col-5 layout.
   ============================================================ */
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.strip-grid .photo-frame { margin: 0; }
.strip-grid .photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}
.strip-grid .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 720px) {
  .strip-grid { grid-template-columns: 1fr; }
}

/* Variant: 4-up for tighter packing if needed */
.strip-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .strip-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v4 — performance overrides for low-power devices and slow nets
   - prefers-reduced-data: drop hero videos to poster-only,
     simplify backdrop-filters, hide grain layer
   - small-viewport heuristic: lower blur radius
   ============================================================ */
@media (prefers-reduced-data: reduce) {
  .video-cover, .lineup-video, video.video-cover { display: none !important; }
  .page-head.video-cover-wrap { background: #14110F; }
  .grain::after, body.grain::after { display: none !important; }
  /* Soften backdrop-filters that hammer the GPU */
  .gear-card,
  .photo-frame .photo,
  .stat-card.glass,
  .nav-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Below 720px the canvas-based scene + heavy blurs aren't worth the
   battery. Keep a reduced version. */
@media (max-width: 720px) {
  .scene-canvas { opacity: 0.4; }
  .gear-card, .stat-card.glass, .photo-frame .photo, .nav-pill {
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  }
  .manifesto-glass {
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  }
}

/* GPU-friendly: kill expensive will-change on hover-out states */
.gear-card,
.travel-card,
.drag-card { contain: layout paint; }

/* ============================================================
   v5 — fix the manifesto-glass plate contrast and provide a
   reusable .glass-section pattern (background image + dark
   glass card overlay) that can drop into any sparse block.
   ============================================================ */
.manifesto-glass .plate.glass {
  background: rgba(244,239,230,0.10);
  border-color: rgba(244,239,230,0.28);
  color: var(--ink);
}
.manifesto-glass .plate.glass .num { color: var(--rust); }
.manifesto-glass .plate.glass .eyebrow { color: rgba(244,239,230,0.85); }

/* Reusable glass-section: section gets a backdrop photo, content goes
   inside .glass-card which becomes the readable glass overlay. */
.glass-section {
  position: relative;
  min-height: 70vh;
  padding: 7rem 2.4rem 6rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.glass-section .gs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.glass-section .gs-bg img,
.glass-section .gs-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.82) contrast(1.05) sepia(0.16);
}
.glass-section .gs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.18) 40%, rgba(10,9,8,0.7) 100%);
}
.glass-section > .grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.glass-card {
  padding: 2.4rem 2.8rem;
  border-radius: 26px;
  background: rgba(244,239,230,0.04);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(244,239,230,0.14);
  box-shadow:
    0 32px 80px -28px rgba(0,0,0,0.7),
    0 1px 0 rgba(244,239,230,0.18) inset;
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.glass-card .plate.glass {
  background: rgba(244,239,230,0.10);
  border-color: rgba(244,239,230,0.28);
  color: var(--ink);
}
.glass-card .plate.glass .num { color: var(--rust); }
.glass-card .plate.glass .eyebrow { color: rgba(244,239,230,0.85); }
.glass-card .lede { color: var(--ink); }
.glass-card .body-prose { color: rgba(244,239,230,0.78); }
.glass-card .eyebrow { color: rgba(244,239,230,0.85); }
.glass-card h2.section-poster,
.glass-card h3.row-poster { color: var(--ink); }
.glass-card h2.section-poster .accent,
.glass-card h3.row-poster .accent { color: var(--rust); }
.glass-card .stat-card.glass {
  background: rgba(244,239,230,0.06);
  border-color: rgba(244,239,230,0.18);
  color: var(--ink);
}
@media (max-width: 720px) {
  .glass-section { min-height: 60vh; padding: 4rem 1.2rem 3rem; }
  .glass-card { padding: 1.6rem 1.4rem; }
}

/* ============================================================
   v6 — broken-apart glass pattern
   Inside a .glass-section, instead of one big .glass-card you
   can scatter individual floating glass elements. The photo
   reads through the gaps. Each piece has its own depth shadow.
   ============================================================ */

/* Heading sits directly on the photo, no card. Strong text-shadow
   for legibility, light cream/rust gradient text. */
.glass-section .gs-poster {
  position: relative;
  z-index: 2;
  text-shadow:
    0 2px 30px rgba(0,0,0,0.75),
    0 1px 6px rgba(0,0,0,0.55);
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.45))
    drop-shadow(0 6px 14px rgba(255,77,46,0.12));
}

/* Tight glass card — smaller, more padding control for floating use */
.glass-card-tight {
  padding: 1.4rem 1.6rem;
  border-radius: 18px;
  background: rgba(244,239,230,0.05);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(244,239,230,0.14);
  box-shadow:
    0 24px 60px -22px rgba(0,0,0,0.65),
    0 1px 0 rgba(244,239,230,0.18) inset;
  position: relative;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
}
.glass-card-tight::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%);
}
.glass-card-tight .lede,
.glass-card-tight .body-prose,
.glass-card-tight p { color: var(--ink); }
.glass-card-tight .body-prose { color: rgba(244,239,230,0.78); }

/* Floating pill row (eyebrow strip with optional right meta) */
.glass-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.glass-row .eyebrow,
.glass-section .eyebrow {
  color: rgba(244,239,230,0.85);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

/* Glass plate inside .glass-section — readable contrast */
.glass-section .plate.glass {
  background: rgba(244,239,230,0.10);
  border-color: rgba(244,239,230,0.28);
  color: var(--ink);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.glass-section .plate.glass .num { color: var(--rust); }
.glass-section .plate.glass .eyebrow { color: rgba(244,239,230,0.85); }

/* Stat cards inside .glass-section — get individual depth, 3D-ish */
.glass-section .stat-card.glass {
  background: rgba(10,9,8,0.32);
  border: 1px solid rgba(244,239,230,0.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 18px 36px -16px rgba(0,0,0,0.55),
    0 1px 0 rgba(244,239,230,0.16) inset;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.4s ease, box-shadow 0.4s ease;
  color: var(--ink);
}
.glass-section .stat-card.glass:hover {
  transform: translateY(-3px);
  background: rgba(10,9,8,0.42);
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,0.7),
    0 1px 0 rgba(244,239,230,0.22) inset;
}
.glass-section .stat-card.glass .label { color: rgba(244,239,230,0.6); }
.glass-section .stat-card.glass .value { color: var(--ink); }

/* Floating link/button glass pill */
.glass-section .glass-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.2rem;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--rust);
  background: rgba(10,9,8,0.32);
  border: 1px solid rgba(244,239,230,0.16);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.55);
}
.glass-section .glass-pill:hover {
  transform: translateY(-2px);
  background: rgba(10,9,8,0.42);
  border-color: rgba(255,77,46,0.45);
}

/* Body text on photo (no card) — strong shadow, larger max-width */
.glass-section .lede.gs-prose {
  color: var(--ink);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
  max-width: 56rem;
  position: relative;
  z-index: 2;
}

/* ============================================================
   v6.1 — text on photo, no blur container
   For .glass-section content, prefer text-shadow on the prose
   over wrapping it in a blurred glass card. Background image
   reads through cleanly.
   ============================================================ */
.glass-section .lede {
  color: var(--ink);
  text-shadow:
    0 2px 14px rgba(0,0,0,0.7),
    0 1px 4px rgba(0,0,0,0.6);
  position: relative;
  z-index: 2;
}
.glass-section .body-prose {
  color: rgba(244,239,230,0.92);
  text-shadow:
    0 2px 12px rgba(0,0,0,0.7),
    0 1px 3px rgba(0,0,0,0.55);
  position: relative;
  z-index: 2;
}

/* Lighter dim on the gs-bg img so the photo actually shows. The
   bottom gradient on ::after handles legibility, not brightness
   reduction on the image itself. */
.glass-section .gs-bg img,
.glass-section .gs-bg video {
  filter: brightness(0.72) saturate(0.85) contrast(1.04) sepia(0.1);
}
.glass-section .gs-bg::after {
  background: linear-gradient(180deg, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.15) 35%, rgba(10,9,8,0.55) 100%);
}

/* ============================================================
   v6.2 — softer glass everywhere over backdrop photos
   The user wants to actually see the backgrounds. Drop the blur
   radii on glass elements that float over photos.
   ============================================================ */
.glass-section .stat-card.glass {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  background: rgba(10,9,8,0.28);
}
.glass-section .glass-pill {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  background: rgba(10,9,8,0.28);
}
.glass-section .plate.glass {
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  background: rgba(10,9,8,0.32);
}

/* Manifesto glass on the lens page — blur removed; rely on solid bg for legibility */
.manifesto-glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(10,9,8,0.62) !important;
  border-color: rgba(244,239,230,0.16) !important;
}

/* Glass-card (any remaining usage) — keep but soften */
.glass-card {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(10,9,8,0.26);
}

/* Glass-card-tight (still around in some pages) — softer too */
.glass-card-tight {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  background: rgba(10,9,8,0.22);
}

/* Section-bg images get a gentler darken — same vintage feel */
.section-bg img,
.section-bg video {
  filter: brightness(0.7) saturate(0.85) contrast(1.04) sepia(0.12);
}
.section-bg::after {
  background: linear-gradient(180deg, rgba(10,9,8,0.45) 0%, rgba(10,9,8,0.15) 30%, rgba(10,9,8,0.6) 100%);
}

/* ============================================================
   v6.3 — heavier tint on the home Now section so the now-list
   text is fully readable over the gig backdrop.
   ============================================================ */
.now-section .section-bg img,
.now-section .section-bg video {
  filter: brightness(0.42) saturate(0.78) contrast(1.05) sepia(0.14);
}
.now-section .section-bg::after {
  background:
    radial-gradient(ellipse at center, rgba(10,9,8,0.35) 0%, rgba(10,9,8,0.75) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.35) 35%, rgba(10,9,8,0.75) 100%);
}

/* ============================================================
   v6.4 — Cooper Delo section vintage tinted backdrop
   ============================================================ */
.cooper-section .section-bg img,
.cooper-section .section-bg video {
  filter: brightness(0.5) saturate(0.78) contrast(1.06) sepia(0.28) hue-rotate(-8deg);
}
.cooper-section .section-bg::after {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(10,9,8,0.35) 0%, rgba(10,9,8,0.7) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.25) 35%, rgba(10,9,8,0.7) 100%);
}

/* ============================================================
   v6.5 — kill blur on stat-cards in the music-page cover-band
   (.glass-section.world-rubber) and solo-project (.cooper-section)
   sections. Container shape stays, just no backdrop blur.
   ============================================================ */
.glass-section.world-rubber .stat-card.glass,
.cooper-section .stat-card.glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10,9,8,0.4);
  border: 1px solid rgba(244,239,230,0.18);
  box-shadow: 0 18px 36px -16px rgba(0,0,0,0.55);
}
.glass-section.world-rubber .stat-card.glass:hover,
.cooper-section .stat-card.glass:hover {
  background: rgba(10,9,8,0.55);
  border-color: rgba(244,239,230,0.28);
}

/* ============================================================
   v7 — laptop / medium-screen responsive scaling
   Default sizing was tuned for 1600px+ ultrawide. On 1280-1500px
   laptop screens everything was reading too big. Tighter padding,
   smaller gear-card padding/text, smaller section paddings, smaller
   stat-cards. Concert grid switches to denser min-widths.
   ============================================================ */
@media (max-width: 1500px) {
  section.block { padding: 6rem 2rem; }
  .gear-grid { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .gear-card { padding: 1rem; border-radius: 14px; }
  .gear-card h4 { font-size: 1.05rem; }
  .gear-card .gear-desc { font-size: 0.78rem; }
  .gear-card .gear-specs li { padding: 0.4rem 0; font-size: 0.7rem; }
  .gear-card .gear-badge { font-size: 0.55rem; padding: 0.28rem 0.55rem; }
  .travel-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; }
  .travel-grid:has(.show-card) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.9rem; }
  .travel-card.show-card .show-headline { font-size: clamp(1rem, 1.7vw, 1.5rem); }
  .travel-card.show-card .show-tag { font-size: 0.55rem; padding: 0.26rem 0.55rem; }
  .stat-card.glass { padding: 0.9rem 1rem; }
  .stat-card.glass .label { font-size: 0.6rem; }
  .stat-card.glass .value { font-size: 0.95rem; }
  .strip-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; }
  .replay-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; }
}

@media (max-width: 1280px) {
  section.block { padding: 5rem 1.6rem; }
  .gear-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .gear-card { padding: 0.85rem; }
  .gear-card .gear-img { border-radius: 10px; }
  .travel-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .travel-grid:has(.show-card) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .replay-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .now-list li { font-size: 0.95rem; }
  .lede { font-size: clamp(1rem, 1.6vw, 1.25rem); }
  .body-prose { font-size: 0.92rem; }
}

/* Make the home Plugverse mockup not dominate on laptops */
@media (max-width: 1500px) {
  .col-6 .photo-frame .photo { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Manifesto card on the home page — glass container, no blur
   ============================================================ */
.manifesto-card {
  display: inline-block;
  padding: 2rem 2.4rem;
  border-radius: 22px;
  background: rgba(10,9,8,0.42);
  border: 1px solid rgba(244,239,230,0.18);
  box-shadow:
    0 24px 60px -22px rgba(0,0,0,0.6),
    0 1px 0 rgba(244,239,230,0.16) inset;
  max-width: 60rem;
}
.manifesto-card .plate.glass {
  background: rgba(244,239,230,0.10);
  border-color: rgba(244,239,230,0.28);
  color: var(--ink);
}
.manifesto-card .plate.glass .num { color: var(--rust); }
.manifesto-card .plate.glass .eyebrow { color: rgba(244,239,230,0.85); }
.manifesto-card .lede { color: var(--ink); }
.manifesto-card .body-prose { color: rgba(244,239,230,0.85); }

@media (max-width: 720px) {
  .manifesto-card { padding: 1.4rem 1.4rem; border-radius: 18px; }
}

/* ============================================================
   Plugverse role-grid — three-sided marketplace explainer cards
   ============================================================ */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.4rem;
}
.role-card {
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  background: rgba(10,9,8,0.42);
  border: 1px solid rgba(244,239,230,0.16);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.role-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,77,46,0.4);
}
.role-card .role-tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rust);
  background: rgba(255,77,46,0.12);
  border: 1px solid rgba(255,77,46,0.38);
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.role-card h4 {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.4rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.7rem 0;
}
.role-card p {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(244,239,230,0.78);
}
@media (max-width: 1280px) {
  .role-card { padding: 1.2rem 1.1rem; }
  .role-card h4 { font-size: 1.2rem; }
  .role-card p { font-size: 0.85rem; }
}

/* ============================================================
   Footer "Get in touch" — Vegas Strip backdrop, vintage tinted
   ============================================================ */
footer.site {
  isolation: isolate;
}
footer.site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("photos/vegas_trip_1.jpg");
  background-size: cover;
  background-position: center 60%;
  filter: brightness(0.28) saturate(0.78) contrast(1.05) sepia(0.24) hue-rotate(-6deg);
}
footer.site::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(10,9,8,0.2) 0%, rgba(10,9,8,0.7) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.85) 100%);
  pointer-events: none;
}

/* Footer continue-reading row — merged with the get-in-touch block */
.footer-continue {
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(244,239,230,0.14);
  margin-bottom: 2.5rem;
}
.footer-continue .eyebrow {
  display: block;
  margin-bottom: 1.2rem;
  color: rgba(244,239,230,0.85);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.footer-continue .pills {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
footer.site > div {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Music page — lineup intro glass + setlist poster + bg
   ============================================================ */

/* Glass card around 'The lineup / Country, rock, alt-rock...' */
.lineup-intro {
  display: inline-block;
  padding: 1.1rem 1.4rem;
  border-radius: 14px;
  background: rgba(244,239,230,0.08);
  border: 1px solid rgba(244,239,230,0.2);
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,0.55),
    0 1px 0 rgba(244,239,230,0.18) inset;
  max-width: 560px;
}
.lineup-intro .eyebrow {
  color: rgba(244,239,230,0.85);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.lineup-intro p {
  margin: 0.5rem 0 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.35;
  color: rgba(244,239,230,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Setlist section — wedding gig backdrop, vintage tinted */
.setlist-section .section-bg img,
.setlist-section .section-bg video {
  filter: brightness(0.42) saturate(0.78) contrast(1.06) sepia(0.22) hue-rotate(-6deg);
}
.setlist-section .section-bg::after {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(10,9,8,0.3) 0%, rgba(10,9,8,0.7) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.25) 35%, rgba(10,9,8,0.7) 100%);
}

/* Setlist poster — Forty-FIVE, bigger and more dramatic */
.setlist-poster {
  font-size: clamp(4rem, 12vw, 11rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.18))
    drop-shadow(0 30px 60px rgba(0,0,0,0.6))
    drop-shadow(0 6px 14px rgba(255,77,46,0.18));
}
.setlist-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  color: rgba(244,239,230,0.88);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  max-width: 38rem;
}

/* ============================================================
   v8 — comprehensive laptop scale-down
   Default sizing assumed 1600px+ ultrawide. On 13-15" laptops
   (1280-1500px) the section posters were rendering at 200+ px,
   sections were taking 80-100vh of vertical space, and the page
   felt physically oversized. This scales the whole vertical
   rhythm down for medium screens.
   ============================================================ */
@media (max-width: 1500px) {
  /* Section poster — was clamp(4, 14vw, 18rem) which hits ~200px on a
     14" laptop. Tightened to match the plugverse/laptop scale. */
  h2.section-poster, .section-poster {
    font-size: clamp(2.4rem, 5.5vw, 5rem) !important;
    line-height: 0.92 !important;
  }
  h1.poster {
    font-size: clamp(3.6rem, 9vw, 7.5rem) !important;
    line-height: 0.92 !important;
  }
  h3.row-poster {
    font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
    line-height: 1 !important;
  }

  /* Section block padding — already dropped from 8 to 6 in v7,
     drop another notch to 4. */
  section.block { padding: 4.5rem 2rem; }

  /* Full-viewport sections: stop forcing 100vh / 80vh on medium
     screens. Let content drive height. */
  .page-head.video-cover-wrap { min-height: 70vh; padding: 5rem 1.8rem 3rem; }
  .glass-section { min-height: 0; padding: 4.5rem 1.8rem 3.5rem; }
  .manifesto-section { min-height: 0; padding: 4.5rem 1.8rem 3.5rem; }
  .lineup-banner { height: auto; min-height: 0; padding: 5rem 0 3rem; }
  .now-section, section.now-section { padding: 4.5rem 2rem; }

  /* Lede + body prose on laptop — slight scale down */
  .lede { font-size: clamp(1rem, 1.5vw, 1.2rem) !important; line-height: 1.4; }
  .body-prose { font-size: 0.92rem; line-height: 1.55; }

  /* Stat cards in hero callouts */
  .hero .stats, header .stats { gap: 0.6rem; }

  /* Setlist poster — was clamp(4, 12vw, 11rem) which is too much */
  .setlist-poster { font-size: clamp(3rem, 8vw, 6.5rem) !important; }

  /* Marquee strip a touch smaller */
  .marquee-band { font-size: 0.7rem; }
  .marquee-track span { padding: 0 1.6rem; }
}

@media (max-width: 1280px) {
  h2.section-poster, .section-poster {
    font-size: clamp(2.2rem, 5vw, 4rem) !important;
  }
  h1.poster {
    font-size: clamp(3rem, 8vw, 5.6rem) !important;
  }
  section.block { padding: 3.5rem 1.4rem; }
  .page-head.video-cover-wrap { min-height: 60vh; padding: 4rem 1.4rem 2.4rem; }
  .glass-section { padding: 3.5rem 1.4rem 2.8rem; }
  .manifesto-section { padding: 3.5rem 1.4rem 2.8rem; }
  .lineup-banner { padding: 4rem 0 2.5rem; }
  .now-section, section.now-section { padding: 3.5rem 1.4rem; }
  .lede { font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important; }
  .setlist-poster { font-size: clamp(2.4rem, 7.5vw, 5rem) !important; }

  /* Reduce hero in lineup banner heading too */
  .lineup-overlay { padding: 5rem 0 3rem !important; }
}

/* Re-tighten margins between section header and grid below */
@media (max-width: 1500px) {
  section.block .grid + .grid { margin-top: 2rem !important; }
}
@media (max-width: 1280px) {
  section.block .grid + .grid { margin-top: 1.5rem !important; }
}

/* ============================================================
   FINAL mobile hero override — must come last so it beats the
   v8 laptop scale-down rules above (max-width: 1500/1280) which
   also match mobile viewports and previously won by source order.
   ============================================================ */
@media (max-width: 900px) {
  .poster, h1.poster {
    font-size: clamp(3.4rem, 17vw, 7.5rem) !important;
    line-height: 0.92 !important;
  }

  /* Section eyebrow rows like
     [01 The discipline]    5 days a week, no skipping
     are inline display:flex space-between divs. On phones the two ends
     crash into each other. Force wrap with a gap so they stack cleanly.
     The :has() narrows the override to rows that actually contain a
     .plate or .eyebrow so unrelated flex layouts aren't disturbed. */
  div[style*="space-between"][style*="display: flex"]:has(.plate, .eyebrow) {
    flex-wrap: wrap !important;
    gap: 0.6rem 1rem !important;
    align-items: flex-start !important;
  }
}
@media (max-width: 480px) {
  .poster, h1.poster {
    font-size: clamp(3.2rem, 18vw, 6.5rem) !important;
    line-height: 0.92 !important;
  }
}