/* ══════════════════════════════════════════════════════════════
   MSANGAMBE SIGUDLA — msangambe.com
   css/style.css — Complete Design System
   Son Dynasty · South Africa · 2026
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bastliga One';
  src: url('../Bastliga One.ttf') format('truetype'),
       url('../Bastliga One.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ─────────────────────────────────────────────────────────────
   0. DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
  --white:          #FFFFFF;
  --off-white:      #F7F5F2;
  --grey-light:     #EFEFED;
  --grey-mid:       #D4D4D4;
  --silver:         #C0C0C0;
  --silver-bright:  #E8E8E8;
  --silver-deep:    #8A8A8A;
  --black:          #0A0A0A;
  --charcoal:       #1C1C1C;
  --olive-hint:     #8B8B6B;

  --glow-sm:        0 0 12px rgba(192,192,192,0.4);
  --glow-md:        0 0 24px rgba(192,192,192,0.6);
  --glow-lg:        0 0 48px rgba(192,192,192,0.9);
  --glow-white-sm:  0 0 12px rgba(255,255,255,0.5);
  --glow-accent:    0 0 20px rgba(192, 192, 192, 0.45);
  --glow-neon-red:  0 0 25px rgba(239, 68, 68, 0.5);
  --glow-ambient:   radial-gradient(circle, rgba(192,192,192,0.06) 0%, transparent 70%);

  --nav-height:     108px;
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-nav:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
   1. RESET & BASE
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  line-height: 1.9;
  overflow-x: hidden;
  cursor: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}

button {
  background: none;
  border: none;
  cursor: none;
  font-family: inherit;
}

/* ─────────────────────────────────────────────────────────────
   2. TYPOGRAPHY
───────────────────────────────────────────────────────────── */
.label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--silver);
}

.section-stamp {
  display: block;
  margin-bottom: 48px;
  color: var(--silver);
}

.section-link {
  display: inline-block;
  margin-top: 32px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--silver-deep);
  transition: letter-spacing 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-link:hover {
  letter-spacing: 0.48em;
  color: var(--black);
  transform: scale(1.06) translateX(4px);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 0, 0, 0.1);
}

/* ─────────────────────────────────────────────────────────────
   3. CUSTOM CURSOR
───────────────────────────────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background-color: var(--silver);
}

.cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid var(--silver);
  background: transparent;
  transition: transform 0s, width 0.3s ease, height 0.3s ease,
              background 0.3s ease, border-color 0.3s ease;
}

.cursor-ring.is-hovering {
  width: 70px;
  height: 70px;
  background: rgba(192, 192, 192, 0.08);
}

.cursor-ring.is-clicking {
  transform: translate(-50%, -50%) scale(0.8);
}

/* ─────────────────────────────────────────────────────────────
   4. REVEAL ANIMATIONS
───────────────────────────────────────────────────────────── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.reveal             { transform: translateY(28px); }
.reveal-left        { transform: translateX(-40px); }
.reveal-right       { transform: translateX(40px); }
.reveal-scale       { transform: scale(0.95) translateY(16px); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger via CSS custom property --i */
.reveal[style*='--i'],
.reveal-left[style*='--i'],
.reveal-right[style*='--i'],
.reveal-scale[style*='--i'] {
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* ─────────────────────────────────────────────────────────────
   5. NAVIGATION
───────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 1000;
  background: transparent;
  transition: background 0.4s ease, border-color 0.4s ease,
              transform 0.35s var(--ease-nav), box-shadow 0.4s ease;
  border-bottom: 1px solid transparent;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.nav.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
}

.nav.is-scrolled .marquee-strip--top {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav.is-scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(192, 192, 192, 0.25);
}

/* Dark pages (Sound, HOX) — nav stays black on scroll */
.nav.is-dark-page.is-scrolled .marquee-strip--top {
  background: rgba(6, 6, 6, 0.95) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav.is-dark-page.is-scrolled .nav-inner {
  background: rgba(6, 6, 6, 0.95) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Nav links always visible on dark pages */
.nav.is-dark-page .nav-link {
  color: rgba(255,255,255,0.55) !important;
}

.nav.is-dark-page .nav-link:hover,
.nav.is-dark-page .nav-link.active {
  color: var(--white) !important;
  border-bottom-color: rgba(255,255,255,0.6) !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
}

/* Make marquee text visible on dark nav */
.nav.is-dark-page .marquee-text {
  color: rgba(255,255,255,0.45) !important;
}

/* Make burger lines visible on black pages (Sound / HOX) when closed */
.nav.is-dark-page .nav-burger:not(.is-open) .burger-line {
  background-color: var(--silver) !important;
}

/* Stagger lines on desktop hover when menu is closed */
.nav-burger:hover:not(.is-open) .burger-line:nth-child(1) {
  width: 65% !important;
}
.nav-burger:hover:not(.is-open) .burger-line:nth-child(2) {
  width: 80% !important;
}
.nav-burger:hover:not(.is-open) .burger-line:nth-child(3) {
  width: 50% !important;
}

.nav.is-hidden .nav-inner {
  transform: translateY(-108px);
  opacity: 0;
  pointer-events: none;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 32px;
  gap: 24px;
  pointer-events: auto;
  transition: transform 0.35s var(--ease-nav), opacity 0.35s ease,
              background 0.4s ease, border-color 0.4s ease;
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
  transform: translateY(12px);
}

.nav-logo-globe {
  height: 112px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
  animation: globe-slow-spin 25s linear infinite;
}

.nav-logo:hover .nav-logo-wrapper {
  transform: translateY(12px) scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(0, 255, 204, 0.25));
}

@keyframes globe-slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--silver-deep);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--black);
  border-bottom-color: var(--silver);
  text-shadow: var(--glow-sm);
}

/* Dynasty social icons in nav */
.nav-socials {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.dynasty-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--silver-deep);
  transition: color 0.4s ease, box-shadow 0.4s ease;
  text-align: center;
}

.dynasty-social svg {
  transition: box-shadow 0.4s ease;
}

.dynasty-social span {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dynasty-social:hover {
  color: var(--black);
}

.dynasty-social:hover svg {
  filter: drop-shadow(var(--glow-sm));
}

.dynasty-social--desktop-only {
  display: flex;
}

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transform: scale(1.13); /* 13% larger all round */
  transform-origin: right center;
}

.nav-burger:not(.is-open) .burger-line:nth-child(1) {
  animation: burger-suggest-line1 3s ease-in-out infinite;
}
.nav-burger:not(.is-open) .burger-line:nth-child(2) {
  animation: burger-suggest-line2 3s ease-in-out infinite;
}
.nav-burger:not(.is-open) .burger-line:nth-child(3) {
  animation: burger-suggest-line3 3s ease-in-out infinite;
}

@keyframes burger-suggest-line1 {
  0%, 100% { width: 100%; }
  50% { width: 65%; }
}
@keyframes burger-suggest-line2 {
  0%, 100% { width: 100%; }
  50% { width: 80%; }
}
@keyframes burger-suggest-line3 {
  0%, 100% { width: 100%; }
  50% { width: 50%; }
}

.burger-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--black);
  transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
}

.nav-burger.is-open .burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-burger.is-open .burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger.is-open .burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────
   6. MOBILE OVERLAY
───────────────────────────────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);           /* lighter blur = faster compositing */
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px 60px;
  /* Start: invisible, shifted up just 12px (less travel = faster feel) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  /* GPU-compositor-only properties: opacity + transform — zero layout cost */
  will-change: opacity, transform;
  contain: layout style;
  transition:
    opacity  180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 180ms; /* hide after fade completes */
}

.mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity  180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 0ms; /* show immediately on open */
}

.mobile-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.mobile-close span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--black);
}

.mobile-close span:first-child { transform: translateY(0.5px) rotate(45deg); }
.mobile-close span:last-child  { transform: translateY(-0.5px) rotate(-45deg); }

.mobile-logo {
  margin-bottom: 48px;
}

.mobile-nav-links {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 48px;
}

@keyframes menu-glow-pulse {
  from {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.04);
  }
  to {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
  }
}

.mobile-nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  padding: 8px 16px;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
  animation: menu-glow-pulse 3s ease-in-out infinite alternate;
}

.mobile-nav-links a:hover {
  color: var(--silver-deep);
  letter-spacing: 0.28em;
}

.mobile-socials {
  display: flex;
  gap: 28px;
  justify-content: center;
  color: var(--silver-deep);
}

/* ─────────────────────────────────────────────────────────────
   7. HERO
───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  background-color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Layer 1 — Watermark */
.hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

.hero-watermark img {
  width: 85vw;
  max-width: 900px;
  height: auto;
  opacity: 0.06;
  user-select: none;
}

/* Layer 2 — 3D Interactive WebGL Viewport & HUD */
.hero-3d-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
  opacity: 0;
  transition: opacity 1s ease 0.6s;
  pointer-events: none;
}

.hero-3d-wrap.is-loaded {
  opacity: 1;
}

#hero-3d-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
  pointer-events: auto;
}

/* Symmetrical Heads-Up Display (HUD) Controls */
.hero-3d-hud {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 90%;
  max-width: 620px;
  pointer-events: auto;
}

.hud-group {
  display: flex;
  gap: 12px;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hud-group--actions {
  background: rgba(15, 15, 15, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
}

.hero-3d-tab {
  position: relative;
  padding: 8px 24px;
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.hero-3d-tab:hover {
  color: var(--white);
}

.hero-3d-tab.active {
  color: var(--black);
  background: var(--white);
  box-shadow: var(--glow-sm);
}

/* Unique Active Glows for HUD Material Tabs */
.hero-3d-tab.active[data-material="platinum"] {
  background: linear-gradient(135deg, #e0e0e0, #ffffff);
  color: #0c0c0c;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

.hero-3d-tab.active[data-material="cyber"] {
  background: #00ffcc;
  color: #000000;
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.7);
}

.hero-3d-tab.active[data-material="obsidian"] {
  background: #151515;
  color: var(--grey-light);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
}

.hero-3d-tab.active[data-material="diamond"] {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
}

/* Action HUD buttons styling */
.hero-hud-action-btn {
  padding: 10px 24px;
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--white);
  background: transparent;
  border: none;
  transition: all 0.3s ease;
  position: relative;
}

.hero-hud-action-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

.hero-hud-action-btn::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 24%;
  width: 52%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease, left 0.3s ease;
}

.hero-hud-action-btn:hover::after {
  width: 80%;
  left: 10%;
  background: var(--white);
}

/* Layer 3 — Content */
.hero-content {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 90%;
  max-width: 800px;
  text-align: center;
  will-change: transform;
  pointer-events: none;
}

.hero-content--top {
  top: 25%;
}

.hero-content--bottom {
  top: 83%;
}

.hero-stamp {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  margin-bottom: 24px;
  display: block;
}

.hero-stamp.is-visible { opacity: 1; transform: none; }

.hero-stamp--bottom {
  font-family: 'Bastliga One', 'Alex Brush', 'Italianno', cursive;
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 71px;
  font-weight: 400;
}

.hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 10vw, 140px);
  line-height: 0.9;
  color: var(--black);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out-expo),
              transform 0.9s var(--ease-out-expo);
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.hero-name.is-visible { opacity: 1; transform: none; }

.hero-name::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.7) 50%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: -200% 0;
  pointer-events: none;
}

.hero-name:hover::after {
  animation: shimmer 0.6s ease forwards;
}

.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--silver-deep);
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out-expo) 0.3s,
              transform 0.9s var(--ease-out-expo) 0.3s;
}

.hero-tagline.is-visible { opacity: 1; transform: none; }

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out-expo) 0.45s,
              transform 0.9s var(--ease-out-expo) 0.45s;
}

.hero-ctas.is-visible { opacity: 1; transform: none; }

.cta-link {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--black);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--silver);
  transition: letter-spacing 0.4s ease, box-shadow 0.4s ease;
}

.cta-link:hover {
  letter-spacing: 0.3em;
  text-shadow: var(--glow-sm);
}

.cta-divider {
  color: var(--silver);
  font-size: 14px;
  user-select: none;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.scroll-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: var(--silver);
  transform-origin: bottom;
  animation: scroll-pulse-up 1.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────
   8. SECTION STRUCTURE
───────────────────────────────────────────────────────────── */
.section {
  position: relative;
}

/* ─────────────────────────────────────────────────────────────
   9. MARQUEE STRIP
───────────────────────────────────────────────────────────── */
.marquee-strip {
  height: 56px;
  background: var(--white);
  border-top: 1px solid rgba(192, 192, 192, 0.3);
  border-bottom: 1px solid rgba(192, 192, 192, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.marquee-track span {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-deep);
  padding-right: 0;
}

.marquee-track--left {
  animation: marquee-left 35s linear infinite;
}

.marquee-track--right {
  animation: marquee-right 35s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────────────────────
   10. THE STORY
───────────────────────────────────────────────────────────── */
.section--story {
  background: var(--off-white);
  padding: 140px 10vw;
}

.story-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 8vw;
  align-items: start;
  margin-top: 16px;
}

/* Left column */
.story-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 100px; /* Pushes the image down to align beautifully with the right-column heading on desktop */
  position: sticky;
  top: 140px;
  align-self: start;
}

.story-signature { margin-bottom: 24px; }

.story-sig-img {
  filter: invert(1);
  transition: filter 0.4s ease;
  max-width: 260px;
}

.story-rule-wrap { margin-bottom: 16px; }

.story-v-rule {
  width: 1px;
  height: 80px;
  background: var(--silver);
}

.story-byline {
  margin-bottom: 40px;
  color: var(--silver-deep);
  font-size: 9px;
  letter-spacing: 0.3em;
}

.story-images-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 60px;
}

.story-img-a {
  width: 75%;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.story-img-a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-img-b {
  width: 55%;
  aspect-ratio: 3/4;
  overflow: hidden;
  position: absolute;
  bottom: -40px;
  right: -20px;
  border: 1px solid var(--silver);
  transition-delay: 0.3s !important;
}

.story-img-b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Single story image styles */
.story-images-wrap--single {
  padding-bottom: 0;
}

.story-img-single {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-img-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-img-single:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.story-img-single:hover img {
  transform: scale(1.04);
}

/* Right column */
.story-right {
  padding-top: 60px;
}

.story-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 58px;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 8px;
}

.story-h-rule {
  width: 60px;
  height: 1px;
  background: var(--silver);
  margin: 32px 0;
}

.story-body {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: var(--charcoal);
  max-width: 520px;
}

/* ─────────────────────────────────────────────────────────────
   11. SOUND
───────────────────────────────────────────────────────────── */
.section--sound {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

/* ── SOUND SECTION — HOX-style dark theme ─────────────────── */
.section--sound.spa-page {
  background: #090909;
  color: var(--white);
}

.sound-container {
  position: relative;
  z-index: 1;
  padding: 80px 10vw 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 100vh;
}

.sound-header {
  text-align: center;
  margin-bottom: 16px;
  width: 100%;
}

.sound-header .section-stamp {
  display: block;
  text-align: center;
  margin-bottom: 8px;
  color: var(--silver);
}

.sound-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 64px;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 16px;
  text-shadow:
    0 0 18px rgba(200,200,220,0.25),
    0 0 40px rgba(200,200,220,0.1);
}

.sound-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--silver-deep);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Streaming row */
.streaming-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin: 48px 0;
}

.streaming-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--silver);
  transition: color 0.4s ease;
}

.streaming-link span {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-deep);
  transition: color 0.4s ease;
}

.streaming-link:hover {
  color: var(--white);
}

.streaming-link:hover svg {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

.streaming-link:hover span {
  color: var(--white);
}

/* Globe */
.sound-globe {
  display: block;
  margin: 48px auto 0;
  animation: globe-spin 25s linear infinite;
  opacity: 0.7;
}

/* Footer CTA */
.sound-footer-cta {
  margin-top: 48px;
  text-align: center;
}

/* ── YOUTUBE VLOG GRID ────────────────────────────────────── */
.sound-youtube-section {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 0 16px;
  text-align: center;
}

.sound-youtube-label {
  color: var(--silver);
  letter-spacing: 0.3em;
  font-size: 9px;
  margin-bottom: 12px;
}

.sound-youtube-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: var(--silver-deep);
  margin-bottom: 40px;
}

.sound-yt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sound-yt-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.sound-yt-card:hover {
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

.sound-yt-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #111;
}

.sound-yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.sound-yt-card:hover .sound-yt-thumb img {
  transform: scale(1.04);
}

.sound-yt-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sound-yt-card:hover .sound-yt-play-icon {
  opacity: 1;
}

.sound-yt-info {
  padding: 16px 20px;
  text-align: left;
}

.sound-yt-title {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: var(--silver);
  letter-spacing: 0.04em;
  line-height: 1.6;
  display: block;
  transition: color 0.3s ease;
}

.sound-yt-card:hover .sound-yt-title {
  color: var(--white);
}

/* ── MUSIC SECTION WRAP ────────────────────────────────── */
.music-section-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.music-top-row {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
}

/* NOW PLAYING HERO */
.now-playing-hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.now-playing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(200,200,220,0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* Album art */
.hero-art-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-disc-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  animation: ring-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

.hero-disc-ring::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.03);
  animation: ring-pulse 7s ease-in-out infinite reverse;
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%       { transform: scale(1.07); opacity: 1;   }
}

/* Album art — CIRCULAR cover */
.hero-art-wrap .album-disc-wrapper {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--black);
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.hero-art-wrap .album-disc-wrapper:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.15);
  transform: scale(1.03);
}

/* Controls */
.hero-controls-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-genre-tag {
  font-size: 7.5px;
  color: var(--silver-deep);
  letter-spacing: 0.25em;
  margin-bottom: 2px;
}

.hero-track-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-shadow: 0 0 24px rgba(255,255,255,0.12);
}

.hero-track-artist,
.hero-track-producer,
.hero-track-meta {
  font-size: 8px;
  color: var(--silver-deep);
  letter-spacing: 0.2em;
  line-height: 1.8;
}

/* Waveform + scrub */
.hero-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-waveform-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  pointer-events: none;
  margin-bottom: 1px;
}

.hero-waveform-bars span {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
  transform-origin: bottom;
  transition: background 0.3s ease;
}

.hero-waveform-bars.playing span {
  background: rgba(255,255,255,0.5);
  animation: waveform-dance 1.1s ease-in-out infinite alternate;
}

.hero-waveform-bars.playing span:nth-child(odd)  { animation-delay: 0.1s; }
.hero-waveform-bars.playing span:nth-child(3n)   { animation-delay: 0.22s; }
.hero-waveform-bars.playing span:nth-child(5n)   { animation-delay: 0.4s; }
.hero-waveform-bars.playing span:nth-child(7n+1) { animation-delay: 0.55s; }

@keyframes waveform-dance {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1.0); }
}

/* Hero buttons */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-btn {
  background: transparent;
  border: none;
  color: var(--silver);
  padding: 4px;
  cursor: none;
  transition: color 0.3s ease, transform 0.2s ease;
}

.hero-btn:hover {
  color: var(--white);
  transform: scale(1.12);
}

.hero-btn--play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(255,255,255,0.04);
  transition: all 0.4s ease;
}

.hero-btn--play:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
  box-shadow: 0 0 18px rgba(255,255,255,0.1);
}

.hero-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--silver-deep);
  margin-left: auto;
}

/* MUSIC LIBRARY */
.music-library {
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
  margin-bottom: 40px;
}

.music-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.music-library-label {
  font-size: 9px;
  color: var(--silver);
  letter-spacing: 0.3em;
}

.music-library-count {
  font-size: 8px;
  color: var(--silver-deep);
  letter-spacing: 0.2em;
}

.library-track-row {
  display: grid;
  grid-template-columns: 52px 1fr 60px 44px;
  gap: 14px;
  align-items: center;
  padding: 11px 22px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  width: 100%;
  text-align: left;
  cursor: none;
  transition: background 0.3s ease;
}

.library-track-row:last-child  { border-bottom: none; }
.library-track-row:hover       { background: rgba(255,255,255,0.04); }
.library-track-row.is-active   { background: rgba(255,255,255,0.06); }

.library-track-art {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.library-track-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.library-track-row:hover .library-track-thumb { transform: scale(1.08); }

.library-track-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.library-track-row:hover .library-track-play-overlay,
.library-track-row.is-active .library-track-play-overlay { opacity: 1; }

.library-track-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.library-track-name {
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  color: var(--white);
  letter-spacing: 0.1em;
}

.library-track-row.is-active .library-track-name {
  text-shadow: 0 0 12px rgba(255,255,255,0.4);
}

.library-track-meta {
  font-size: 7.5px;
  color: var(--silver-deep);
  letter-spacing: 0.15em;
}

.library-track-waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.library-track-row:hover .library-track-waveform,
.library-track-row.is-active .library-track-waveform { opacity: 1; }

.library-track-waveform span {
  width: 2px;
  background: rgba(255,255,255,0.45);
  border-radius: 1px;
}

.library-track-waveform.playing span {
  background: var(--white);
  animation: vis-bounce 0.85s ease-in-out infinite alternate;
}

.library-track-waveform.playing span:nth-child(even) { animation-delay: 0.15s; }
.library-track-waveform.playing span:nth-child(3n)   { animation-delay: 0.3s; }

.library-track-duration {
  font-size: 8px;
  color: var(--silver-deep);
  letter-spacing: 0.1em;
  text-align: right;
}

/* ══ SPOTIFY-GRADE PLAYER UPGRADES ══════════════════════════ */

/* Blurred album art ambient background */
.now-playing-hero .hero-bg-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(0.4) brightness(0.18);
  opacity: 0.65;
  z-index: 0;
  transition: background-image 0.6s ease;
  pointer-events: none;
}

.now-playing-hero > *:not(.hero-bg-blur) {
  position: relative;
  z-index: 1;
}

/* Spotify-style thin scrub bar */
#player-scrub {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
  transition: height 0.15s ease;
}

#player-scrub:hover { height: 5px; }

#player-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#player-scrub:hover::-webkit-slider-thumb { opacity: 1; }

/* Volume slider */
#player-volume {
  -webkit-appearance: none;
  width: 72px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  background: var(--white);
  border-radius: 50%;
  cursor: pointer;
}

/* Hide the decorative ring on square-cover layout */
.hero-disc-ring { display: none; }

/* App-style outer wrapper padding */
.music-top-row {
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 24px;
}

/* Radio terminal widget look */
.section--sound.spa-page .audio-terminal {
  border-radius: 4px;
}

/* ══ ALBUM ART ZOOM MODAL ═══════════════════════════════ */
#album-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#album-zoom-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.album-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.album-zoom-inner {
  position: relative;
  z-index: 1;
  animation: zoom-pop 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoom-pop {
  from { transform: scale(0.72); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

#album-zoom-img {
  display: block;
  width: min(82vmin, 540px);
  height: min(82vmin, 540px);
  object-fit: cover;
  border-radius: 6px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.08);
}

.album-zoom-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
}

.album-zoom-close:hover {
  background: rgba(255,255,255,0.22);
  transform: scale(1.1) rotate(90deg);
}

/* Old area helpers kept for compatibility */
.sound-embed-wrap {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border: 1px solid var(--silver);
  transition: box-shadow 0.4s ease;
  margin-bottom: -4vw;
}

.sound-embed-wrap:hover { box-shadow: var(--glow-md); }

.sound-embed-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   12. THE DYNASTY
───────────────────────────────────────────────────────────── */
.section--dynasty {
  background: var(--off-white);
  padding: 120px 10vw;
}

.dynasty-header {
  margin-bottom: 64px;
}

.dynasty-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  color: var(--black);
  margin-bottom: 12px;
}

.dynasty-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--silver-deep);
}

.dynasty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1fr;
  gap: 2px;
  background: var(--grey-mid);
}

.dynasty-card {
  background: var(--off-white);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease;
}

.dynasty-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(192,192,192,0.06) 100%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}

.dynasty-card:hover::before {
  background-position: 0% 0;
}

.dynasty-card-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 80px;
  margin-bottom: 8px;
}

.dynasty-card-visual img {
  max-height: 80px;
  width: auto;
  transition: box-shadow 0.4s ease;
}

.dynasty-card:hover .dynasty-card-visual img {
  filter: drop-shadow(var(--glow-sm));
}

.dynasty-card-visual--xyon {
  font-family: 'Cinzel', serif;
  font-size: 64px;
  font-weight: 700;
  color: var(--silver);
  line-height: 1;
  transition: text-shadow 0.4s ease;
}

.dynasty-card:hover .dynasty-card-visual--xyon {
  text-shadow: var(--glow-sm);
}

.dynasty-card-visual--dots {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--grey-mid);
  letter-spacing: 0.2em;
}

.dynasty-card-title {
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--black);
}

.dynasty-card-desc {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.7;
  flex: 1;
}

.dynasty-card-link {
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--silver-deep);
  transition: letter-spacing 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
  align-self: flex-start;
}

.dynasty-card-link:hover {
  letter-spacing: 0.45em;
  color: var(--black);
  text-shadow: var(--glow-sm);
}

.dynasty-card--placeholder .dynasty-card-title,
.dynasty-card--placeholder .dynasty-card-desc {
  color: var(--silver-deep);
}

/* ─────────────────────────────────────────────────────────────
   13. THE FORM — MODELLING GALLERY
───────────────────────────────────────────────────────────── */
.section--modelling {
  background: var(--white);
  padding-top: 120px;
}

.modelling-header {
  padding: 0 10vw 32px;
  text-align: center;
}

.modelling-header .section-stamp {
  margin-bottom: 14px;
}

.modelling-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 64px;
  color: var(--black);
  margin-bottom: 12px;
  animation: title-glow-pulse 4s ease-in-out infinite alternate;
}

.modelling-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--silver-deep);
}

/* Masonry gallery */
.modelling-grid {
  column-count: 3;
  column-gap: 4px;
  padding: 0 0;
}

.model-cell {
  break-inside: avoid;
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
  cursor: pointer;
  display: block;
}

.model-cell img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.model-cell:hover img {
  transform: scale(1.04);
}

.model-cell:hover {
  box-shadow: var(--glow-sm);
}

.model-cell figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10, 10, 10, 0.85));
  padding: 40px 20px 20px;
  translate: 0 100%;
  transition: translate 0.5s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.model-cell:hover figcaption {
  translate: 0 0;
}

.model-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--white);
}

.model-credit {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 12px;
  color: var(--grey-mid);
}

.model-context {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--silver);
}

.modelling-footer-logo {
  padding: 80px 10vw 80px;
  display: flex;
  justify-content: center;
}

.modelling-footer-img {
  filter: invert(1);
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────
   14. VISUAL ART
───────────────────────────────────────────────────────────── */
.section--visual-art {
  background: var(--off-white);
  padding: 120px 10vw;
  text-align: center;
}

.section--visual-art .section-stamp {
  text-align: center;
  margin-bottom: 40px;
}

.visual-art-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1.15;
  color: var(--black);
  margin-bottom: 16px;
  text-align: center; /* Center-align the text explicitly */
  width: 100%;
  animation: title-glow-pulse 4s ease-in-out infinite alternate;
}

.visual-art-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--silver-deep);
  line-height: 1.8;
  margin-bottom: 64px;
}

.visual-art-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  background: var(--grey-mid);
  margin-bottom: 48px;
}

.art-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.art-placeholder {
  aspect-ratio: 1/1;
  background: var(--grey-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey-mid);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.art-cell:hover .art-placeholder {
  border-color: var(--silver);
  box-shadow: var(--glow-sm);
}

.art-placeholder .label {
  color: var(--silver);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 20px;
}

.art-cell figcaption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 90%;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.art-cell:hover figcaption {
  opacity: 1;
}

.art-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--white);
}

.art-meta {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--silver);
}

/* CardSwap Showcase stack container */
.art-card-swap-container {
  position: relative;
  width: 480px;
  height: 360px;
  margin: 180px auto 100px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.art-card-swap-container .art-cell {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 360px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible; /* Prevent shadow clipping */
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none; /* Let mouse events bypass transparent card areas */
}

.art-card-swap-container .art-cell .art-media-wrap {
  pointer-events: auto; /* Enable hover/clicks on actual visual contents */
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.art-card-swap-container .art-cell:hover {
  border-color: transparent;
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────
   15. THE JOURNAL
───────────────────────────────────────────────────────────── */
.section--journal {
  background: var(--white);
  padding: 120px 10vw;
}

.journal-header {
  margin-bottom: 72px;
}

.journal-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 64px;
  color: var(--black);
  margin-bottom: 12px;
}

.journal-freq {
  display: block;
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--silver);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--silver);
}

.journal-card {
  background: var(--white);
  padding: 48px 40px;
  position: relative;
}

.journal-card-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.journal-date {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--silver);
  display: block;
}

.journal-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--black);
}

.journal-excerpt {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: var(--silver-deep);
  flex: 1;
}

.journal-read {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--silver-deep);
  transition: letter-spacing 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
  align-self: flex-start;
  display: inline-block;
}

.journal-read:hover {
  letter-spacing: 0.45em;
  color: var(--black);
  text-shadow: var(--glow-sm);
}

/* ─────────────────────────────────────────────────────────────
   16. CONTACT
───────────────────────────────────────────────────────────── */
.section--contact {
  background: var(--black);
  padding: 140px 10vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.contact-logo {
  display: block;
  margin: 0 auto 56px;
  opacity: 0.9;
}

.contact-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 64px;
  color: var(--white);
  margin-bottom: 16px;
}

.contact-heading .letter {
  display: inline-block;
  animation: keyword-glow-pulse 3s ease-in-out infinite alternate;
}

.contact-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 18px;
  color: var(--silver);
  line-height: 1.7;
  margin-bottom: 56px;
}

.contact-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 64px;
}

.contact-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--silver);
  padding: 14px 36px;
  background: transparent;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  cursor: none;
}

.contact-btn:hover {
  background: var(--silver);
  color: var(--black);
  box-shadow: var(--glow-md);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 64px;
}

.contact-details p {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--silver);
  line-height: 1.6;
}

.contact-details .label {
  color: var(--silver-deep);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  margin-right: 4px;
}

.contact-socials {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.dynasty-social--white {
  color: var(--silver);
}

.dynasty-social--white:hover {
  color: var(--white);
}

.dynasty-social--white:hover svg {
  filter: drop-shadow(var(--glow-white-sm));
}

.dynasty-social--white span {
  color: var(--silver);
}

/* ─────────────────────────────────────────────────────────────
   17. FOOTER
───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--off-white);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 30px 10vw 20px;
}

body.is-locked .site-footer {
  display: none !important;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.footer-brand-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.footer-msangambe-wordmark {
  display: block;
  font-family: 'Dancing Script', 'Pacifico', cursive;
  font-size: 38px;
  font-weight: 400;
  color: var(--black);
  opacity: 0.7;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
  user-select: none;
}

.footer-msangambe-wordmark:hover {
  opacity: 1;
  transform: scale(1.03);
}

/* Dark footer — white wordmark */
.site-footer.is-dark .footer-msangambe-wordmark {
  color: rgba(255,255,255,0.85);
}

.footer-msangambe-logo {
  display: block;
  font-family: 'Bastliga One', cursive;
  font-size: 53px;
  font-weight: 400;
  color: var(--black);
  opacity: 0.75;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
  user-select: none;
  cursor: pointer;
}

.footer-msangambe-logo:hover {
  opacity: 1;
  transform: scale(1.06);
}

/* Dark footer (Sound / HOX) — white text */
.site-footer.is-dark .footer-msangambe-logo {
  color: rgba(255,255,255,0.88) !important;
  filter: none !important;
  opacity: 0.9 !important;
}

.footer-tagline {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--grey-dark);
  line-height: 1.5;
  text-align: center;
  margin-top: 4px;
}

/* Breathing glow variant */
.footer-tagline--glow {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  animation: footer-tagline-glow 4s ease-in-out infinite alternate;
}

@keyframes footer-tagline-glow {
  0% {
    color: rgba(100, 100, 100, 0.7);
    text-shadow: none;
  }
  100% {
    color: rgba(40, 40, 40, 0.95);
    text-shadow:
      0 0 6px rgba(0,0,0,0.15),
      0 0 14px rgba(80,80,80,0.12),
      0 0 24px rgba(120,120,120,0.08);
  }
}

/* On dark footers (Sound / HOX) the glow flips to silver-white */
.site-footer.is-dark .footer-tagline--glow {
  animation: footer-tagline-glow-dark 4s ease-in-out infinite alternate;
}

@keyframes footer-tagline-glow-dark {
  0% {
    color: rgba(180,180,180,0.55);
    text-shadow: none;
  }
  100% {
    color: #ffffff;
    text-shadow:
      0 0 8px rgba(255,255,255,0.7),
      0 0 18px rgba(210,210,210,0.45),
      0 0 32px rgba(170,170,170,0.25);
  }
}

.footer-col--centre {
  width: 100%;
}

.footer-col--centre ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 8px 0;
}

.footer-col--centre a {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--grey-dark);
  transition: color 0.3s ease;
}

.footer-col--centre a:hover { color: var(--black); }

.footer-bottom {
  border-top: 0;
}

.footer-rule {
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

.footer-copy {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--grey-dark);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────────────────────
   18. KEYFRAMES
───────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes dragon-settle {
  0% {
    transform: translate(-100px, -20px) scale(0.7) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.65;
  }
}

@keyframes scroll-pulse-up {
  0%   { transform: scaleY(0); transform-origin: bottom; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: top; opacity: 0; }
}

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes globe-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   19. RESPONSIVE — TABLET (max-width: 1024px)
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }

  .nav-socials {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .hero-3d-wrap {
    width: 100vw;
    height: 100vh;
  }

  .hero-content {
    max-width: 80vw;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .story-left {
    margin-top: 0;
    position: static;
    align-self: auto;
  }

  .story-right { padding-top: 0; }

  .dynasty-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modelling-grid {
    column-count: 2;
  }

  .journal-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 1px;
  }

  .journal-card {
    background: var(--white);
    border-bottom: 1px solid var(--silver);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-col--right {
    display: none;
  }

  .sound-heading {
    font-size: 48px;
  }
}

/* ─────────────────────────────────────────────────────────────
   20. RESPONSIVE — MOBILE (max-width: 768px)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide custom cursor and medallion prompt tooltip on mobile except when locked on landing page */
  .cursor-dot,
  .cursor-ring,
  #medallion-prompt {
    display: none !important;
  }
  body.is-locked .cursor-dot,
  body.is-locked .cursor-ring {
    display: block !important;
  }
  body.is-locked #medallion-prompt.is-active {
    display: block !important;
  }

  /* 15% smaller logo globe on mobile */
  .nav-logo-globe {
    height: 95px !important;
  }

  /* Suggestion animation is now global */

  .hero {
    align-items: center;
    justify-content: center;
  }

  .hero-3d-wrap {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none;
    max-height: none;
    padding: 0;
  }

  .hero-content {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    max-width: 90% !important;
    width: 90%;
    text-align: center;
    background: transparent !important;
  }

  .hero-content--top {
    top: 21% !important;
  }

  .hero-content--bottom {
    top: 79% !important;
  }

  .hero-3d-hud {
    bottom: 6vh !important;
  }

  .hero-3d-tab {
    padding: 6px 14px !important;
    font-size: 8px !important;
  }

  .hero-hud-action-btn {
    padding: 8px 16px !important;
    font-size: 8px !important;
  }

  .hero-name {
    font-size: clamp(56px, 14vw, 80px);
  }

  .hero-watermark { display: none; }

  .section--story { padding: 100px 6vw; }

  .story-images-wrap { display: none; }

  .story-heading { font-size: 40px; }

  .sound-heading { font-size: 40px; }

  .sound-white-area { padding: 80px 6vw 0; }

  .sound-black-area { padding: 6vw 6vw 60px; }

  .streaming-row { gap: 20px; }

  .section--dynasty { padding: 80px 6vw; }

  .dynasty-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 1px;
  }

  .dynasty-card { padding: 36px 24px; }

  .dynasty-heading { font-size: 40px; }

  .modelling-grid {
    column-count: 1;
  }

  .modelling-heading { font-size: 44px; }

  .section--visual-art { padding: 80px 6vw; }

  .art-card-swap-container {
    width: 290px;
    height: 220px;
    margin: 100px auto 60px;
  }

  .art-card-swap-container .art-cell {
    width: 290px;
    height: 220px;
  }

  .visual-art-heading { font-size: 36px; }

  .section--journal { padding: 80px 6vw; }

  .journal-heading { font-size: 44px; }

  .journal-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 1px;
  }

  .journal-card {
    border-bottom: 1px solid var(--silver);
  }

  .section--contact { padding: 100px 6vw; }

  .contact-heading { font-size: 44px; }

  .contact-buttons {
    flex-direction: column;
    align-items: center;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-col--centre { align-items: flex-start; }

  .footer-col--centre ul { align-items: flex-start; }

  .footer-col--right { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   21. RESPONSIVE — SMALL MOBILE (max-width: 480px)
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav-inner { padding: 0 20px; }

  .hero-content { padding: 32px 20px; }

  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 12px; }

  .cta-divider { display: none; }

  .dynasty-social--desktop-only { display: none; }

  .sound-embed-wrap { width: 100%; }

  .streaming-row { gap: 16px; }

  .streaming-link span { display: none; }

  .contact-sub { font-size: 16px; }

  .footer-copy { font-size: 10px; }
}

/* ─────────────────────────────────────────────────────────────
   22. PREFERS REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-stamp,
  .hero-name,
  .hero-tagline,
  .hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-3d-wrap {
    opacity: 1 !important;
    transition: none !important;
  }

  .marquee-track { animation: none !important; }

  .sound-globe { animation: none !important; }

  .scroll-line { animation: none !important; }

  .dragon-element { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   23. BESPOKE INTERACTIVE STYLES
───────────────────────────────────────────────────────────── */

/* Cinema Dashboard */
.cinema-dashboard {
  display: grid;
  grid-template-columns: 60% 40%;
  border: 1px solid rgba(192, 192, 192, 0.25);
  background: var(--white);
  box-shadow: var(--glow-sm);
  margin-top: 48px;
}

.cinema-player-side {
  background: var(--black);
  display: flex;
  align-items: center;
}

.cinema-iframe-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
}

.cinema-iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.cinema-playlist-side {
  border-left: 1px solid rgba(192, 192, 192, 0.25);
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  height: 100%;
}

.cinema-playlist-title {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(192, 192, 192, 0.2);
  color: var(--black);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.cinema-playlist-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 240px;
  overflow-y: auto;
}

.cinema-item {
  display: flex;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(192, 192, 192, 0.15);
  background: transparent;
  width: 100%;
  text-align: left;
  gap: 16px;
  align-items: center;
  transition: background 0.4s ease;
  cursor: none;
}

.cinema-item:hover,
.cinema-item.active {
  background: rgba(192, 192, 192, 0.1);
}

.cinema-item-num {
  font-size: 11px;
  color: var(--silver-deep);
}

.cinema-item.active .cinema-item-num {
  color: var(--black);
  text-shadow: var(--glow-sm);
}

.cinema-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cinema-item-name {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--black);
}

.cinema-item-tagline {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: var(--silver-deep);
}

.cinema-commentary-box {
  padding: 24px;
  background: var(--white);
  border-top: 1px solid rgba(192, 192, 192, 0.2);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cinema-commentary-title {
  font-size: 8px;
  color: var(--silver-deep);
}

#cinema-commentary-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--charcoal);
}

/* Audio Dashboard Grid */
.audio-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1000px;
  gap: 40px;
  margin: 32px auto 60px;
}

/* Terminal Column */
.audio-terminal {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 18, 18, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.audio-terminal:hover {
  border-color: rgba(57, 255, 20, 0.25);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 15px rgba(57, 255, 20, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}

.terminal-status-dot {
  width: 6px;
  height: 6px;
  background: #39FF14;
  border-radius: 50%;
  box-shadow: 0 0 8px #39FF14;
}

.audio-terminal:has(.terminal-btn.active) .terminal-status-dot {
  animation: pulse-green 1.5s ease-in-out infinite;
}

.terminal-status-text {
  font-size: 8px;
  color: #39FF14;
  text-shadow: 0 0 5px rgba(57, 255, 20, 0.3);
  letter-spacing: 0.2em;
}

.terminal-para {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--grey-light);
  margin-top: 16px;
}

.terminal-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 48px;
  margin: 20px 0;
}

.visualizer-bar {
  width: 3px;
  height: 10%;
  background: rgba(255,255,255,0.15);
  transition: height 0.15s ease;
}

.terminal-visualizer.animating .visualizer-bar {
  background: #39FF14;
  box-shadow: 0 0 4px #39FF14;
  animation: vis-bounce 1s ease-in-out infinite alternate;
}

.terminal-visualizer.animating .bar-1 { animation-delay: 0.1s; }
.terminal-visualizer.animating .bar-2 { animation-delay: 0.3s; }
.terminal-visualizer.animating .bar-3 { animation-delay: 0.5s; }
.terminal-visualizer.animating .bar-4 { animation-delay: 0.2s; }
.terminal-visualizer.animating .bar-5 { animation-delay: 0.4s; }
.terminal-visualizer.animating .bar-6 { animation-delay: 0.1s; }
.terminal-visualizer.animating .bar-7 { animation-delay: 0.6s; }
.terminal-visualizer.animating .bar-8 { animation-delay: 0.3s; }

.terminal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  margin-top: 16px;
}

.terminal-btn {
  font-size: 8px;
  color: var(--white);
  border: 1px solid var(--silver-deep);
  padding: 6px 14px;
  transition: all 0.4s ease;
  cursor: none;
}

.terminal-btn:hover,
.terminal-btn.active {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--glow-white-sm);
  border-color: var(--white);
}

.terminal-stat {
  font-size: 8px;
  color: var(--silver-deep);
  margin-left: auto;
  padding-left: 24px;
}

/* Audio Player */
.audio-player {
  background: rgba(28, 28, 28, 0.45); /* translucent charcoal */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 24px;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.05);
}

.player-visual-side {
  display: flex;
  justify-content: center;
}

.album-disc-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--black);
}

.album-cover-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.album-cover-img:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.album-disc-wrapper.spinning {
  animation: disc-spin 12s linear infinite;
}

.player-control-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-track-info h3 {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.1em;
}

.player-track-info p {
  font-size: 8px;
  color: var(--silver);
  margin-top: 4px;
}

.player-scrub-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-scrub {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: none;
}

.player-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  cursor: none;
}

.player-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: var(--silver-deep);
}

.player-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-btn {
  color: var(--silver);
  padding: 4px;
  transition: color 0.4s ease;
  cursor: none;
  background: transparent;
  border: none;
}

.player-btn:hover {
  color: var(--white);
}

.player-btn--play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--silver);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all 0.4s ease;
}

.player-btn--play:hover {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--glow-white-sm);
}

.player-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--silver-deep);
  margin-top: 4px;
}

.player-volume {
  -webkit-appearance: none;
  height: 2px;
  width: 60px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: none;
}

.player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
  background: var(--silver);
  border-radius: 50%;
  cursor: none;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex; /* Centers the content wrapper perfectly */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* No modal-level scrolling needed on desktop */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}

.lightbox-modal.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lightbox-backdrop {
  position: fixed; /* Keeps backdrop fixed behind scrolling content */
  inset: 0;
  background: rgba(10,10,10,0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1;
  pointer-events: none; /* Let all click events hit empty spaces on the wrapper */
}

/* Lightbox Content Wrapper (Desktop: Side-by-Side Split) */
.lightbox-content-wrapper {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 1100px;
  display: flex;
  flex-direction: row; /* Side-by-side layout on desktop */
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-sizing: border-box;
  margin: auto;
}

.lightbox-close {
  position: fixed; /* Viewport-fixed so it stays at top-right while scrolling text */
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: none;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: 10005;
  transition: background 0.3s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lightbox-close span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--white);
}

.lightbox-close span:first-child { transform: translateY(0.5px) rotate(45deg); }
.lightbox-close span:last-child  { transform: translateY(-0.5px) rotate(-45deg); }

.lightbox-arrow {
  position: fixed; /* Fixed relative to viewport to stay centered */
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver);
  transition: color 0.4s ease;
  cursor: none;
  padding: 10px;
  background: transparent;
  border: none;
  z-index: 10005;
}

.lightbox-arrow:hover { color: var(--white); }
.lightbox-arrow--prev { left: 24px; }
.lightbox-arrow--next { right: 24px; }

/* Left Media Container (60% width) */
.lightbox-media-container {
  position: relative; /* Anchor for sub-gallery navigation overlay */
  flex: 1.2;
  max-width: 60%;
  height: auto;
  max-height: 80vh;
  aspect-ratio: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important; /* Remove container border */
  background: transparent !important; /* Remove container background */
  box-shadow: none !important; /* Remove container box shadow */
  overflow: visible !important; /* Allow the image drop shadow to float out */
  transform: scale(0.95);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-modal:not(.is-hidden) .lightbox-media-container {
  transform: scale(1);
}

.lightbox-media-container img,
.lightbox-media-container video {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px !important; /* Premium rounded image corners */
  border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Glassmorphic border outline directly on the image */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 255, 255, 0.08) !important; /* High contrast drop shadow and glowing outline directly on the image */
  box-sizing: border-box !important;
}

/* Right Details Card (38% width with independent native scroll area) */
.lightbox-caption {
  flex: 0.8;
  max-width: 38%;
  max-height: 80vh; /* Limits height to fit screen alongside image */
  overflow-y: auto; /* Independent native scrolling inside card */
  background: rgba(20, 20, 20, 0.6) !important; /* Elegant dark glass fill */
  backdrop-filter: none !important; /* Disabled card blur for maximum performance */
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Clean glowing edge */
  border-radius: 16px !important; /* Elegant rounded corners */
  padding: 24px 30px !important;
  box-sizing: border-box;
  z-index: 10;
  text-align: left;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important; /* Added signature Apple top-light bevel edge glow */
}

/* Sleek custom scrollbar inside the details card */
.lightbox-caption::-webkit-scrollbar {
  width: 5px;
}

.lightbox-caption::-webkit-scrollbar-track {
  background: transparent;
}

.lightbox-caption::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.lightbox-caption::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.lightbox-caption,
.lightbox-caption h3,
.lightbox-caption p,
.lightbox-caption span,
.lightbox-caption div,
.lightbox-detail-item,
.detail-notes-text {
  color: #ffffff !important; /* Force high visibility white */
}

.detail-label {
  color: rgba(255, 255, 255, 0.65) !important;
}

.lightbox-caption h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 4px;
}

.lightbox-caption p {
  font-size: 9px;
  margin-top: 4px;
  letter-spacing: 0.2em;
}

/* Visual Art Motion Overlays */
.art-cell {
  position: relative;
}

.art-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.art-media-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* Do not crop or resize the art images */
  background: transparent;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.art-cell:hover .art-media-wrap img {
  transform: translateY(-16px) translateZ(40px) scale(1.05); /* Elevate card physically above stack */
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.28), var(--glow-md);
}

.art-motion-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.art-cell:hover .art-motion-overlay {
  opacity: 1;
}

.art-motion-overlay .label {
  color: var(--white);
  border: 1px solid var(--white);
  padding: 8px 16px;
  font-size: 8px;
  letter-spacing: 0.25em;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(4px);
}

/* Journal tab toggling & tweet feed styling */
.journal-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 0;
}

.journal-tab-btn {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--silver-deep);
  border: 1px solid var(--grey-mid);
  padding: 8px 24px;
  background: transparent;
  transition: all 0.4s ease;
  cursor: none;
}

.journal-tab-btn.active,
.journal-tab-btn:hover {
  border-color: var(--black);
  color: var(--black);
  background: rgba(192, 192, 192, 0.08);
}

.journal-view {
  display: none;
}

.journal-view.active {
  display: block;
}

/* Tweet list terminal styles */
.tweet-feed-terminal {
  border: 1px solid rgba(192, 192, 192, 0.25);
  background: var(--charcoal);
  max-width: 750px;
  margin: 48px auto 0;
  box-shadow: var(--glow-sm);
}

.tweet-terminal-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--silver-deep);
}

.tweet-terminal-header .label {
  font-size: 8px;
  color: var(--silver);
}

.tweet-list {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow-y: auto;
}

.tweet-card {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tweet-card-header {
  display: flex;
  justify-content: space-between;
}

.tweet-handle {
  font-size: 9px;
  color: var(--silver-bright);
}

.tweet-date {
  font-size: 8px;
  color: var(--silver-deep);
}

.tweet-text {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--white);
}

.tweet-footer {
  display: flex;
  gap: 20px;
}

.tweet-footer .label {
  font-size: 7px;
  color: var(--silver-deep);
}

/* Contact Booking Form styling */
.booking-container {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 56px;
  position: relative;
  min-height: 380px;
  background: rgba(15, 15, 15, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.4s ease;
}

.booking-form.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.form-row-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.booking-form input,
.booking-form textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
  padding: 14px 20px;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  outline: none;
  transition: all 0.4s ease;
}

.booking-form input:focus,
.booking-form textarea:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: var(--silver-deep);
}

/* Success Card */
.booking-success-card {
  position: absolute;
  inset: 0;
  border: 1px solid var(--silver);
  background: var(--charcoal);
  box-shadow: var(--glow-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  transition: opacity 0.4s ease;
}

.booking-success-card.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.success-glow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #39FF14;
  box-shadow: 0 0 16px #39FF14;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-glow::after {
  content: '✓';
  color: #39FF14;
  font-size: 20px;
  font-weight: bold;
}

.success-title {
  color: #39FF14;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-shadow: 0 0 5px rgba(57, 255, 20, 0.4);
}

.booking-success-card p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-light);
  max-width: 320px;
}

/* Custom Responsive Rules */
@media (max-width: 1024px) {
  .cinema-dashboard {
    grid-template-columns: 1fr;
  }
  .cinema-playlist-side {
    border-left: 0;
    border-top: 1px solid rgba(192, 192, 192, 0.25);
  }
  .audio-dashboard {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sound-yt-grid {
    grid-template-columns: 1fr 1fr;
  }
  .music-top-row {
    grid-template-columns: 1fr;
  }
  .now-playing-hero {
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 24px;
  }
  .hero-art-wrap .album-disc-wrapper {
    width: 110px;
    height: 110px;
  }
}

@media (max-width: 700px) {
  .sound-yt-grid {
    grid-template-columns: 1fr;
  }
  .sound-container {
    padding: 80px 5vw 60px;
  }
  .sound-heading {
    font-size: 38px;
  }
  .now-playing-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-art-wrap {
    margin: 0 auto;
    width: 130px;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-volume-wrap {
    margin-left: 0;
  }
  .library-track-row {
    grid-template-columns: 42px 1fr 44px;
  }
  .library-track-waveform {
    display: none;
  }
}


@media (max-width: 768px) {
  .audio-player {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .form-row-dual {
    grid-template-columns: 1fr;
  }
  .lightbox-arrow {
    display: none !important;
  }
  .lightbox-media-container {
    aspect-ratio: auto !important;
    max-height: 70vh !important;
    max-width: 95vw !important;
  }
  .lightbox-media-container img,
  .lightbox-media-container video {
    max-height: 70vh !important;
  }

  /* Spacing rules to reduce footer height on mobile */
  .site-footer {
    padding: 15px 5vw 10px !important;
  }
  .footer-inner {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .footer-col--centre ul {
    gap: 12px !important;
    margin: 4px 0 !important;
  }
  .footer-rule {
    margin-bottom: 8px !important;
  }

  /* Rounded corners for model and art cells on mobile */
  .model-cell {
    border-radius: 12px !important;
  }
  .art-cell {
    border-radius: 12px !important;
  }
}

/* Animations */
@keyframes vis-bounce {
  from { height: 10%; }
  to   { height: 100%; }
}

@keyframes disc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   24. PLAYSTATION-STYLE ENTRANCE EXPERIENCE
───────────────────────────────────────────────────────────── */

body.is-locked {
  overflow: hidden;
  height: 100vh;
}

/* Landing state for navigation */
.nav.is-landing .nav-links,
.nav.is-landing .nav-socials,
.nav.is-landing .nav-burger,
.nav.is-landing .marquee-strip--top {
  opacity: 0;
  pointer-events: none;
}

/* Transition revealing navigation items */
.nav-links,
.nav-socials,
.nav-burger,
.marquee-strip--top {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Cursor Tooltip */
.cursor-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  padding: 6px 14px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.cursor-tooltip.is-active {
  opacity: 1;
}

/* Fullscreen Transition Overlay */
.transition-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.transition-flash.is-active {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.transition-flash.is-fast {
  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-flash.is-fast.is-active {
  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top Marquee inside Navigation */
.marquee-strip--top {
  height: 36px;
  background: transparent;
  border-top: none;
  border-bottom: 1px solid rgba(192, 192, 192, 0.15);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 1001;
  pointer-events: auto;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease, border-color 0.4s ease;
}

.marquee-strip--top .marquee-track span {
  font-size: 8px;
  letter-spacing: 0.25em;
  color: var(--silver-deep);
}

/* ─────────────────────────────────────────────────────────────
   25. DETAILED STORY PAGE
───────────────────────────────────────────────────────────── */
.story-page-view {
  background: var(--off-white);
  min-height: 100vh;
  padding-top: 140px; /* offset for nav bar */
  padding-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.story-page-view.is-visible {
  opacity: 1;
}

.story-page-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.story-page-header {
  text-align: center;
  margin-bottom: 60px;
}

.story-page-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-top: 16px;
  margin-bottom: 16px;
  text-transform: uppercase;
  animation: title-glow-pulse 4s ease-in-out infinite alternate;
}

@media (min-width: 769px) {
  .story-page-title {
    white-space: nowrap;
  }
}

.story-page-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 300;
  color: var(--silver-deep);
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.story-page-content {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.story-page-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

@media (max-width: 768px) {
  .story-page-editorial {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.editorial-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.editorial-col p {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--grey-dark);
}

.editorial-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px !important;
  line-height: 1.6 !important;
  font-style: italic;
  color: var(--black);
  margin-bottom: 10px;
}

.story-page-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.back-home-btn {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  padding-bottom: 4px;
  transition: opacity 0.3s ease;
}

.back-home-btn:hover {
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────
   26. EXPANDED SPA PAGE VIEW STYLING & CONTACT THEME
───────────────────────────────────────────────────────────── */
.section--modelling.spa-page,
.section--visual-art.spa-page,
.section--contact.spa-page,
.dwi-view.spa-page {
  min-height: 100vh;
  padding-top: 140px !important;
  padding-bottom: 80px !important;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: var(--off-white);
}

.section--modelling.spa-page.is-visible,
.section--visual-art.spa-page.is-visible {
  display: block;
  opacity: 1;
}

.section--contact.spa-page.is-visible,
.dwi-view.spa-page.is-visible {
  display: flex;
  opacity: 1;
  flex-direction: column;
  align-items: center;
}

/* Light/Off-White Theme Styling for Contact Page */
.section--contact.spa-page {
  background: var(--off-white) !important;
}

.section--contact.spa-page .contact-heading {
  color: var(--black) !important;
}

.section--contact.spa-page .contact-sub {
  color: var(--grey-dark) !important;
}

.section--contact.spa-page .contact-details p {
  color: var(--grey-dark) !important;
}

.section--contact.spa-page .contact-details p .label {
  color: var(--black) !important;
}

/* Light Frosted Glass Form Container */
.section--contact.spa-page .booking-container {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
}

/* Input Fields & Textareas - Light Theme */
.section--contact.spa-page .booking-form input,
.section--contact.spa-page .booking-form textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: var(--black) !important;
}

.section--contact.spa-page .booking-form input:focus,
.section--contact.spa-page .booking-form textarea:focus {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05) !important;
}

.section--contact.spa-page .booking-form input::placeholder,
.section--contact.spa-page .booking-form textarea::placeholder {
  color: var(--silver-deep) !important;
}

/* Booking Submit Button - Light Theme */
.section--contact.spa-page .contact-btn {
  color: var(--black) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.section--contact.spa-page .contact-btn:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Social links in contact - Light Theme */
.section--contact.spa-page .dynasty-social--white {
  color: var(--black) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.section--contact.spa-page .dynasty-social--white:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}

/* Success Card - Light Theme */
.section--contact.spa-page .booking-success-card {
  background: var(--off-white) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.section--contact.spa-page .booking-success-card p {
  color: var(--grey-dark) !important;
}

.section--contact.spa-page .booking-success-card .success-title {
  color: #15803d !important; /* Premium dark green for readability */
  text-shadow: none !important;
}

.section--contact.spa-page .booking-success-card .success-glow {
  border-color: #15803d !important;
  box-shadow: 0 0 10px rgba(21, 128, 61, 0.2) !important;
}

.section--contact.spa-page .booking-success-card .success-glow::after {
  color: #15803d !important;
}

.section--contact.spa-page .booking-success-card .terminal-btn {
  color: var(--black) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────
   27. SOUND PAGE VIEW STYLING
───────────────────────────────────────────────────────────── */
.section--sound.spa-page {
  min-height: 100vh;
  padding-top: 140px !important;
  padding-bottom: 80px !important;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: #090909 !important; /* Deep black — matches HOX */
  color: var(--white) !important;
}

.section--sound.spa-page .sound-container {
  padding-top: 10px;
}

.section--sound.spa-page.is-visible {
  display: block;
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   27b. SOUND PAGE — DARK THEME OVERRIDES (mirror of HOX)
───────────────────────────────────────────────────────────── */
.section--sound.spa-page {
  background: #090909 !important;
  color: var(--white) !important;
}

/* Force every text element on the page to be visible on black */
.section--sound.spa-page .sound-heading {
  color: var(--white) !important;
  animation: sound-heading-glow 4s ease-in-out infinite alternate !important;
}

@keyframes sound-heading-glow {
  0% {
    text-shadow:
      0 0 6px rgba(180,180,180,0.25),
      0 0 14px rgba(150,150,150,0.1);
    color: rgba(210,210,210,0.85);
  }
  100% {
    text-shadow:
      0 0 8px rgba(255,255,255,0.9),
      0 0 18px rgba(220,220,220,0.75),
      0 0 32px rgba(180,180,180,0.55),
      0 0 48px rgba(130,130,130,0.35);
    color: #ffffff;
  }
}

.section--sound.spa-page .sound-sub {
  color: rgba(255,255,255,0.55) !important;
}

.section--sound.spa-page .section-stamp {
  color: rgba(255,255,255,0.5) !important;
}

.section--sound.spa-page .audio-terminal {
  background: rgba(10,10,10,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.section--sound.spa-page .terminal-para {
  color: rgba(255,255,255,0.55) !important;
}

.section--sound.spa-page .now-playing-hero {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.section--sound.spa-page .hero-track-title {
  color: var(--white) !important;
}

.section--sound.spa-page .hero-track-artist,
.section--sound.spa-page .hero-track-producer,
.section--sound.spa-page .hero-track-meta,
.section--sound.spa-page .hero-genre-tag {
  color: rgba(255,255,255,0.45) !important;
}

.section--sound.spa-page .streaming-link {
  color: rgba(255,255,255,0.6) !important;
}

.section--sound.spa-page .streaming-link span {
  color: rgba(255,255,255,0.4) !important;
}

.section--sound.spa-page .streaming-link:hover {
  color: var(--white) !important;
}

.section--sound.spa-page .streaming-link:hover span {
  color: var(--white) !important;
}

.section--sound.spa-page .music-library {
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

.section--sound.spa-page .music-library-label {
  color: rgba(255,255,255,0.6) !important;
}

.section--sound.spa-page .music-library-count {
  color: rgba(255,255,255,0.35) !important;
}

.section--sound.spa-page .library-track-name {
  color: var(--white) !important;
}

.section--sound.spa-page .library-track-meta {
  color: rgba(255,255,255,0.35) !important;
}

.section--sound.spa-page .library-track-duration {
  color: rgba(255,255,255,0.35) !important;
}

.section--sound.spa-page .back-home-btn {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

.section--sound.spa-page .back-home-btn:hover {
  background: var(--white) !important;
  color: var(--black) !important;
}

.section--sound.spa-page .sound-youtube-label {
  color: rgba(255,255,255,0.5) !important;
}

.section--sound.spa-page .sound-youtube-sub {
  color: rgba(255,255,255,0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   28. HOUSE OF XYON (HOX) PAGE
───────────────────────────────────────────────────────────── */
.section--hox.spa-page {
  background: var(--off-white);
  min-height: 100vh;
  padding-top: 140px !important;
  padding-bottom: 80px !important;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.section--hox.spa-page.is-visible {
  display: flex;
  opacity: 1;
}

.hox-container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hox-header {
  margin-bottom: 48px;
}

.hox-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--black);
  margin-top: 16px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.hox-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 300;
  color: var(--silver-deep);
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* Interactive Card */
.hox-card-interactive {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 56px 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.hox-card-interactive:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}

.hox-glow-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 0, 0, 0.02) 0%, transparent 60%);
  pointer-events: none;
}

.hox-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.coming-soon-label {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--black);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  animation: pulse-coming-soon 2.5s infinite ease-in-out;
}

@keyframes pulse-coming-soon {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.hox-loading-indicator {
  display: flex;
  gap: 6px;
}

.hox-bar {
  width: 4px;
  height: 24px;
  background: var(--black);
  border-radius: 2px;
  animation: hox-bar-grow 1.2s infinite ease-in-out;
}

.hox-bar:nth-child(1) { animation-delay: -0.4s; }
.hox-bar:nth-child(2) { animation-delay: -0.2s; }
.hox-bar:nth-child(3) { animation-delay: 0s; }

@keyframes hox-bar-grow {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.hox-desc-wrap {
  max-width: 550px;
}

.hox-desc-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--black);
  margin-bottom: 16px;
}

.hox-description {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--grey-dark);
}

.hox-interactive-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 48px;
}

.hox-action-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  padding: 14px 32px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hox-action-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.hox-success-note {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #15803d;
  animation: fade-in-success 0.4s ease forwards;
}

@keyframes fade-in-success {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hide dock on landing page */
body.is-locked .magnification-dock-container {
  display: none !important;
}

.magnification-dock-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  height: 100px; /* Increased to fit dynamically expanded dock height */
  pointer-events: none;
}

.magnification-dock {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 12px; /* Adjusted padding around items */
  border-radius: 24px; /* Slightly more rounded pill */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  height: auto; /* Dynamic height to size perfectly around expanding items */
  box-sizing: border-box;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.dock-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  width: 42px;
  height: 42px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.dock-item.is-resetting {
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s, color 0.3s;
}

.dock-item:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--black);
}

.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dock-icon svg {
  width: 50%;
  height: 50%;
}

.dock-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(20, 20, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-18px);
}

/* ─────────────────────────────────────────────────────────────
   19. TRANSITIONS.DEV UTILITIES & HEADING REVEAL ANIMATIONS
   ───────────────────────────────────────────────────────────── */

/* Transitions.dev — Stagger text reveal */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* Transitions.dev — Shimmer text */
:root {
  --shimmer-dur: 2000ms;
  --shimmer-base: #6e6e6e;
  --shimmer-highlight: #ededed;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
}

.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}

@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

/* Transitions.dev — Icon swap */
:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

/* Character Split Entrance and Glow Keyword Styles */
.story-heading .letter {
  display: inline-block;
  opacity: 0.5;
  filter: blur(5px);
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, filter, transform;
}
.story-heading.play-entrance .letter {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Breathing Glow Accent for "dynasty" Keyword */
.glow-keyword {
  display: inline-block;
  font-weight: 400;
}
.glow-keyword .letter {
  animation: keyword-glow-pulse 3s ease-in-out infinite alternate;
}
.story-heading.play-entrance .glow-keyword .letter {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@keyframes keyword-glow-pulse {
  0% {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2), 0 0 10px rgba(138, 138, 138, 0.1);
    color: var(--black);
  }
  100% {
    text-shadow: 
      0 0 6px #ffffff, 
      0 0 12px rgba(255, 255, 255, 0.9), 
      0 0 20px rgba(120, 120, 120, 0.8), 
      0 0 30px rgba(160, 160, 160, 0.6), 
      0 0 45px rgba(90, 90, 90, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.25);
    color: #111111;
  }
}

/* Character Typing Reveal & Glow for Detailed Story Title */
.typing-heading .letter {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.1s ease;
  transition-delay: var(--delay, 0ms);
}

.story-page-title .letter {
  animation: title-glow-pulse 4s ease-in-out infinite alternate;
}

.typing-heading.play-typing.story-page-title .letter {
  opacity: 1;
}

@keyframes typing-reveal {
  to {
    opacity: 1;
  }
}



@keyframes title-glow-pulse {
  0% {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2), 0 0 10px rgba(138, 138, 138, 0.1);
    color: var(--black);
  }
  100% {
    text-shadow: 
      0 0 8px #ffffff, 
      0 0 15px rgba(255, 255, 255, 0.9), 
      0 0 25px rgba(120, 120, 120, 0.8), 
      0 0 38px rgba(160, 160, 160, 0.6), 
      0 0 50px rgba(90, 90, 90, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.25);
    color: #111111;
  }
}

/* Scroll-driven journey connector line ("Msangambe Dragon") */
.story-journey-wrap {
  width: 35px; /* Restrict width so serpentine curves are narrow & elegant */
  height: 280px;
  margin: 0 auto 24px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c5a059; /* Accent gold */
}

.story-page-divider-wrap {
  grid-column: span 1;
  height: 450px;
  width: 35px; /* Restrict width for narrow, elegant column division */
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  color: #c5a059; /* Accent gold */
}

.scroll-journey-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scroll-journey-path {
  stroke: #c5a059; /* Golden/bronze serpentine line */
  stroke-width: 1.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(197, 160, 89, 0.3));
}

@media (max-width: 768px) {
  .story-page-divider-wrap {
    display: none; /* Hide vertical divider on mobile screen widths */
  }
}

/* ══════════════════════════════════════════════════════════════
   20. DIVINE INVERTED HOX SECTION (DARK THEME)
   ══════════════════════════════════════════════════════════════ */
.section--hox.spa-page {
  background: #090909 !important; /* Deep black background */
  color: var(--white) !important;
}

.section--hox.spa-page .hox-title {
  color: var(--white) !important;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.15) !important;
}

.section--hox.spa-page .hox-subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
}

.section--hox.spa-page .hox-card-interactive {
  background: rgba(15, 15, 15, 0.96) !important; /* Premium dark background */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
}

.section--hox.spa-page .hox-glow-overlay {
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08) 0%, transparent 60%) !important;
}

.section--hox.spa-page .coming-soon-label {
  color: var(--white) !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2) !important;
}

.section--hox.spa-page .hox-bar {
  background: var(--white) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

.section--hox.spa-page .hox-desc-title {
  color: var(--white) !important;
}

.section--hox.spa-page .hox-description {
  color: rgba(255, 255, 255, 0.65) !important;
}

.section--hox.spa-page .hox-action-btn {
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
}

.section--hox.spa-page .hox-action-btn:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
}

.section--hox.spa-page .hox-success-note {
  color: #4ade80 !important; /* Vibrant emerald green for dark mode */
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.25) !important;
}

/* Expanded container for e-commerce store layout */
.section--hox.spa-page .hox-container {
  max-width: 1000px !important;
}

/* SLEEK REGISTRATION FORM */
.hox-form-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .hox-form-group {
    flex-direction: row;
    gap: 12px;
  }
}

.hox-email-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  color: var(--white) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  padding: 14px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  text-align: center !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.hox-email-input:focus {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

/* PREVIEW GALLERY SECTION */
.hox-gallery-section {
  width: 100%;
}

.hox-gallery-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--white);
  margin-bottom: 24px;
  text-transform: uppercase;
}

.hox-filters-wrap {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.hox-filter-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.4s ease, border-bottom-color 0.4s ease;
  border-bottom: 1px solid transparent;
  text-transform: uppercase;
}

.hox-filter-btn.is-active,
.hox-filter-btn:hover {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.hox-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px;
  width: 100%;
}

.hox-product-card {
  background: rgba(15, 15, 15, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease !important;
  opacity: 1;
}

.hox-product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.hox-product-image-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
  background: #050505;
}

.hox-product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hox-product-card:hover .hox-product-image-wrap img {
  transform: scale(1.05);
}

.hox-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--black);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 2;
}

.hox-product-info {
  padding: 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hox-product-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--white) !important;
  margin: 0;
  line-height: 1.4;
  min-height: 32px;
}

.hox-product-price {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.hox-card-notify-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px;
  color: var(--white) !important;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
  width: 100%;
  margin-top: 8px;
  text-transform: uppercase;
}

.hox-card-notify-btn:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
}

/* ══════════════════════════════════════════════════════════════
   21. SLEEK CONTACT PAGE DESIGN SYSTEM OVERRIDES (LIGHT THEME)
   ══════════════════════════════════════════════════════════════ */
.section--contact.spa-page .booking-container {
  background: transparent !important; /* Completely transparent borderless layout */
  border: none !important;
  box-shadow: none !important;
  max-width: 650px;
  margin: 0 auto;
}

/* Single bottom-line inputs - ultra-sleek & modern */
.section--contact.spa-page .booking-form input,
.section--contact.spa-page .booking-form textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 !important;
  padding: 14px 4px !important;
  color: var(--black) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.section--contact.spa-page .booking-form input:focus,
.section--contact.spa-page .booking-form textarea:focus {
  background: transparent !important;
  border-color: var(--black) !important;
  box-shadow: none !important;
  border-bottom-width: 1.5px !important;
}

.section--contact.spa-page .booking-form input::placeholder,
.section--contact.spa-page .booking-form textarea::placeholder {
  color: var(--silver-deep) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
}

.section--contact.spa-page .contact-btn {
  margin-top: 16px !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  padding: 15px 32px !important;
  color: var(--black) !important;
  transition: all 0.3s ease !important;
}

.section--contact.spa-page .contact-btn:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   22. SILVER GLOWS, SERPENTS & DOCK CURSOR OVERRIDES
   ══════════════════════════════════════════════════════════════ */

/* Force letter spans to inherit color & glow from parent animations except for the glow keywords */
.story-heading .letter:not(.glow-keyword .letter) {
  color: inherit !important;
  text-shadow: inherit !important;
}

/* Cursor override for magnification dock hover */
.magnification-dock-container {
  cursor: none !important;
}
.dock-item,
.dock-item * {
  cursor: pointer !important;
}

body.hide-custom-cursor,
body.hide-custom-cursor * {
  cursor: auto;
}
body.hide-custom-cursor .cursor-dot,
body.hide-custom-cursor .cursor-ring {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* HOX Page Dark Footer Override */
.site-footer.is-dark {
  background: #090909 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--white) !important;
}
.site-footer.is-dark .footer-tagline,
.site-footer.is-dark .footer-copy {
  color: rgba(255, 255, 255, 0.6) !important;
}
.site-footer.is-dark .footer-col--centre a {
  color: rgba(255, 255, 255, 0.6) !important;
}
.site-footer.is-dark .footer-col--centre a:hover {
  color: var(--white) !important;
}
.site-footer.is-dark .footer-rule {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Dark footer — logo is already white, just remove the invert and boost opacity */
.site-footer.is-dark .footer-msangambe-logo {
  filter: none !important;
  opacity: 0.9 !important;
}

/* Scroll-driven text animations default state and transition */
.story-body p,
.editorial-col p,
.editorial-lead {
  filter: blur(8px);
  opacity: 0.15;
  transform: translateY(15px);
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, opacity, transform;
}

/* ══════════════════════════════════════════════════════════════
   25. COMING SOON MODAL DIALOG
   ══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-card {
  position: relative;
  background: rgba(15, 15, 15, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  padding: 48px 32px;
  max-width: 420px;
  width: 90%;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  z-index: 2;
}

.modal-overlay.is-active .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px; /* Larger clickable touch target */
  height: 44px;
  background: transparent;
  border: none;
  cursor: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.modal-close-btn span {
  position: absolute;
  width: 16px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* Block spans from capturing mouse/touch events */
}

.modal-close-btn span:nth-child(1) {
  transform: rotate(45deg);
}

.modal-close-btn span:nth-child(2) {
  transform: rotate(-45deg);
}

.modal-close-btn:hover span {
  background-color: var(--white);
}

.modal-close-btn:hover span:nth-child(1) {
  transform: rotate(135deg);
}

.modal-close-btn:hover span:nth-child(2) {
  transform: rotate(45deg);
}

.modal-accent-label {
  color: var(--silver);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  display: block;
}

.modal-heading {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}

.modal-message {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 28px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.modal-highlight {
  color: var(--white);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.modal-acknowledge-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 12px 32px;
  font-size: 10px;
  letter-spacing: 0.15em;
  cursor: none !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
  border-radius: 4px;
}

.modal-acknowledge-btn:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}

body.is-locked-modal {
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   28. DYNASTY WORLD ISSUE (DWI) GRID STYLING
   ══════════════════════════════════════════════════════════════ */
.dwi-view.spa-page {
  padding-top: 110px !important; /* Brought logo closer to the navbar */
}

.dwi-container {
  display: grid;
  grid-template-columns: 1fr 3.2fr 1fr; /* Widen middle column to make cover art larger */
  gap: 0px 16px; /* 0px row gap and 16px column gap for tightest layout spacing */
  width: 100%;
  max-width: 1720px; /* Expanded maximum page width significantly */
  margin: 0 auto;
  padding: 0 3vw 40px; /* Reduced side padding to utilize maximum horizontal space */
  box-sizing: border-box;
}

.dwi-header-zone {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px; /* Added breathing room below logo picture */
  width: 100%;
}

.dwi-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: flex-start;
  min-height: 0; /* Enable grid items to shrink and overflow scroll */
}

/* Left Column - Newspaper / High-Class Magazine List Format */
.dwi-article-block {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  text-align: left;
}

.dwi-article-img-wrap {
  position: relative;
  flex: 0 0 135px; /* Enlarged editorial image to fit the wider column */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.dwi-article-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dwi-article-block:hover .dwi-article-img-wrap img {
  transform: scale(1.05);
}

.dwi-article-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dwi-article-label {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--silver-deep);
  text-transform: uppercase;
}

.dwi-article-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; /* Enlarged title font size for better layout presence */
  font-weight: 600;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
}

.dwi-article-author {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--silver-deep);
  text-transform: uppercase;
  margin-top: 2px;
}

.dwi-cover-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent; /* Seamless off-white — no white card */
  padding: 0;
  box-sizing: border-box;
  width: 100%;
}

.dwi-brand-title {
  font-family: 'Cinzel', serif;
  font-size: 52px; /* Prominent heading */
  font-weight: 700;
  letter-spacing: 0.25em;
  line-height: 1;
  color: var(--black);
  margin-left: 0.25em;
}

.dwi-brand-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.45em;
  color: var(--silver-deep);
  margin-top: 4px;
  margin-left: 0.45em;
}

.dwi-cover-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  border: 3px double rgba(0,0,0,0.12);
  box-sizing: border-box;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dwi-cover-wrapper:hover .dwi-cover-img-wrap {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.16);
}

.dwi-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dwi-cover-wrapper:hover .dwi-cover-img {
  transform: scale(1.04);
}

/* DWI brand logo image — replaces the DYNASTY / WORLD ISSUE text */
.dwi-brand-logo {
  max-width: 130px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 0px; /* Reduced bottom margin to 0px */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.10));
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dwi-brand-logo:hover {
  transform: scale(1.06) translateY(-4px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)) brightness(1.08);
}

.dwi-cover-footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.dwi-cover-stamp {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--black);
}

.dwi-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black);
  max-width: 95%;
  text-transform: uppercase;
}

.dwi-cover-meta {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--silver-deep);
}

/* Right Column - Instagram Feed Panel */
.dwi-instagram-feed {
  display: flex;
  flex-direction: column;
  height: 380px; /* Stacked layout size */
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.dwi-instagram-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
}

.dwi-profile-header-link {
  text-decoration: none;
  display: block;
  width: 100%;
  cursor: none !important;
  transition: opacity 0.25s ease;
}

.dwi-profile-header-link:hover {
  opacity: 0.75;
}

.dwi-instagram-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dwi-instagram-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
}

.dwi-instagram-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dwi-instagram-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.dwi-instagram-name-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dwi-instagram-display-name {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--black);
}

.dwi-instagram-badge {
  color: #E1306C;
  display: flex;
  align-items: center;
}

.dwi-instagram-username {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: var(--silver-deep);
}

.dwi-instagram-follow-btn {
  background-color: var(--black);
  color: var(--white);
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 600;
  cursor: none !important;
  transition: opacity 0.2s;
  text-decoration: none;
}

.dwi-instagram-follow-btn:hover {
  opacity: 0.8;
}

.dwi-instagram-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: rgba(248, 249, 250, 0.5);
}

.dwi-instagram-body::-webkit-scrollbar {
  width: 4px;
}
.dwi-instagram-body::-webkit-scrollbar-track {
  background: transparent;
}
.dwi-instagram-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

/* Instagram Post Card */
.instagram-post-card {
  background-color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.01);
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}

.ig-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.02);
}

.ig-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.05);
}

.ig-post-meta {
  display: flex;
  flex-direction: column;
}

.ig-username {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}

.ig-location {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  color: var(--silver-deep);
}

.ig-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.02);
}

.ig-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.ig-actions-left {
  display: flex;
  gap: 14px;
}

.ig-action-btn {
  background: transparent;
  border: none;
  color: var(--black);
  cursor: none !important;
  transition: transform 0.2s, color 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
}

.ig-action-btn svg {
  width: 20px;
  height: 20px;
}

.ig-action-btn:hover {
  transform: scale(1.1);
}

.ig-action-btn--like:hover,
.ig-action-btn--like.is-active {
  color: #ed4956;
}

.ig-action-btn--like.is-active svg {
  fill: #ed4956;
  stroke: #ed4956;
}

.ig-likes-count {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
  padding: 0 14px 4px;
}

.ig-caption {
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.85);
  padding: 0 14px 8px;
}

.ig-caption span.username {
  font-weight: 700;
  margin-right: 6px;
}

.ig-comments-list {
  padding: 0 14px 10px;
  border-top: 1px solid rgba(0,0,0,0.02);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ig-comment {
  font-family: 'Raleway', sans-serif;
  font-size: 10.5px;
  line-height: 1.3;
}

.ig-comment span.username {
  font-weight: 700;
  margin-right: 6px;
}

.ig-time {
  font-family: 'Raleway', sans-serif;
  font-size: 8px;
  color: var(--silver-deep);
  letter-spacing: 0.05em;
  padding: 0 14px 12px;
}

/* Live X Timeline Widget styling */
.dwi-twitter-feed {
  display: flex;
  flex-direction: column;
  height: 100%; /* Stretch to fill column height dynamically */
  min-height: 0; /* Allow feed to shrink and scroll */
  background: var(--off-white); /* Native off-white theme background */
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

.dwi-twitter-body {
  background-color: transparent;
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dwi-twitter-body::-webkit-scrollbar {
  width: 4px;
}
.dwi-twitter-body::-webkit-scrollbar-track {
  background: transparent;
}
.dwi-twitter-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* Force the generated widget iframe from platform.twitter.com to fill container */
#twitter-feed-container iframe {
  height: 100% !important;
  width: 100% !important;
  min-height: 100% !important;
}

/* DWI Video Section Placeholder styling */
.dwi-video-section {
  grid-column: 1 / -1;
  margin-top: 280px;
  width: 100%;
}

.dwi-video-placeholder {
  position: relative;
  width: 100%;
  height: 240px;
  background: rgba(248, 249, 250, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
}

.dwi-video-placeholder:hover {
  background: rgba(248, 249, 250, 0.8);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
}

.video-play-pulse {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.dwi-video-placeholder:hover .video-play-pulse {
  transform: scale(1.08);
  background: #1d9bf0;
}

.video-label {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--black);
}

.video-subtext {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--silver-deep);
  text-transform: uppercase;
}

/* RESPONSIVE LAYOUT BREAKPOINTS */
@media (max-width: 1024px) {
  .dwi-container {
    grid-template-columns: 1.2fr 3fr 1.2fr; /* Keep 3 columns side-by-side */
    gap: 0px 12px;
    padding: 0 2vw 30px;
  }
  .dwi-col--left {
    display: flex;
  }
  .dwi-article-block {
    flex-direction: row; /* Match desktop row layout */
    gap: 10px;
    align-items: center;
  }
  .dwi-article-img-wrap {
    flex: 0 0 60px;
    width: 60px;
    aspect-ratio: 3 / 4;
  }
  .dwi-article-title {
    font-size: 11px;
    line-height: 1.2;
  }
  .dwi-article-label {
    font-size: 8px;
  }
}

@media (max-width: 768px) {
  .dwi-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 4vw 40px;
  }
  
  .dwi-header-zone {
    order: 1;
    margin-bottom: 0;
  }
  
  .dwi-col--middle {
    order: 2;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  
  .dwi-cover-wrapper {
    padding: 0;
    width: 100%;
  }
  
  .dwi-cover-img-wrap.coming-soon-cover {
    width: 100%;
    aspect-ratio: 5 / 7;
    height: auto;
  }
  
  .dwi-col--left {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 in a row side-by-side */
    gap: 16px;
    width: 100%;
    min-width: 0;
  }
  
  .dwi-article-block {
    flex-direction: column; /* Vertical stack for side-by-side items */
    gap: 8px;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  
  .dwi-article-img-wrap {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 4;
  }
  
  .dwi-article-text {
    width: 100%;
    min-width: 0;
  }
  
  .dwi-article-title {
    font-size: 10px;
    line-height: 1.2;
    margin: 4px 0 0;
    text-align: center;
    white-space: normal;
  }
  
  .dwi-article-label {
    font-size: 8px;
    text-align: center;
    margin: 0;
  }
  
  .dwi-col--right {
    display: none !important; /* Remove Twitter/Blog section on mobile */
  }
  
  .dwi-video-section {
    order: 4;
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .dwi-video-placeholder,
  .coming-soon-video {
    height: 120px !important;
    padding: 10px;
  }
  
  .dwi-video-placeholder .dwi-coming-soon-text,
  .coming-soon-video .dwi-coming-soon-text {
    font-size: 14px !important;
    letter-spacing: 0.25em;
  }
  
  .dwi-page-footer {
    order: 5;
    flex-direction: row; /* Shirt and poster side-by-side */
    justify-content: space-around;
    gap: 16px;
    padding: 20px 0;
    width: 100%;
    margin-top: 24px !important;
  }
  
  .dwi-footer-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .dwi-footer-img-wrap {
    width: 85px !important; /* Force scale down on mobile viewports */
    height: 85px !important;
  }
  
  .dwi-footer-text {
    font-size: 8px;
    text-align: center;
    line-height: 1.3;
  }
  
  .dwi-product-price {
    font-size: 11px;
    margin-top: 4px;
  }
  
  .dwi-cultural-description {
    order: 6;
    margin-top: 20px;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   29. DYNASTY WORLD ISSUE (DWI) ADDITIONAL ELEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Breathing Glow Animation */
@keyframes breathing-glow {
  0% {
    opacity: 0.65;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 22px rgba(255, 255, 255, 0.95), 0 0 35px rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0.65;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  }
}

/* DWI COMING SOON OVERLAYS */
.coming-soon-cover {
  width: 100%;
  aspect-ratio: 5 / 7;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 3px double rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.coming-soon-video {
  width: 100%;
  height: 240px;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.dwi-coming-soon-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dwi-coming-soon-text {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  letter-spacing: 0.35em;
  color: #ffffff;
  animation: breathing-glow 3.5s ease-in-out infinite;
  user-select: none;
  transition: transform 0.4s ease, text-shadow 0.4s ease;
  margin-left: 0.35em; /* Balance letter-spacing */
}

/* Hover effects for coming soon panels (the breathing hover glow) */
.coming-soon-cover:hover,
.coming-soon-video:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
  transform: translateY(-4px);
}

.coming-soon-cover:hover .dwi-coming-soon-text,
.coming-soon-video:hover .dwi-coming-soon-text {
  transform: scale(1.05);
  animation-duration: 1.8s; /* Accelerate breathing animation on hover */
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.95), 0 0 45px rgba(255, 255, 255, 0.7);
}

/* DWI PAGE FOOTER BAR */
.dwi-page-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 12px;
  margin-top: 90px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--black);
  box-sizing: border-box;
}

.dwi-footer-left {
  text-align: left;
}

.dwi-footer-right {
  text-align: right;
}

/* Custom Live Twitter Feed styling */
.dwi-twitter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--off-white);
  box-sizing: border-box;
}

.dwi-twitter-profile {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.dwi-twitter-profile-name {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dwi-twitter-profile-handle {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: var(--silver-deep);
}

.dwi-twitter-view-btn {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--black);
  border: 1px solid var(--black);
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: none !important;
}

.dwi-twitter-view-btn:hover {
  background: var(--black);
  color: var(--white);
}

.dwi-twitter-loading {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--silver-deep);
  text-transform: uppercase;
  padding: 40px 0;
  text-align: center;
}

/* Custom Tweet Cards */
.tweet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
  transition: opacity 0.3s ease;
}

.tweet-card:last-child {
  border-bottom: none;
}

.tweet-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tweet-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tweet-user-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tweet-display-name {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}

.tweet-username {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  color: var(--silver-deep);
}

.tweet-content {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--black);
  word-break: break-word;
  white-space: pre-line;
}

.tweet-hashtag {
  color: var(--silver-deep);
  font-weight: 600;
}

.tweet-actions {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.tweet-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--silver-deep);
  font-size: 10px;
  font-family: 'Raleway', sans-serif;
}

.tweet-action svg {
  width: 14px;
  height: 14px;
}



/* ══════════════════════════════════════════════════════════════
   DYNASTY CHRONICLE FEED STYLES
   ══════════════════════════════════════════════════════════════ */

/* Chronicle Feed Container */
.dwi-chronicle-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: var(--off-white);
  box-sizing: border-box;
}

/* Chronicle Header */
.dwi-chronicle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--off-white);
  box-sizing: border-box;
}

.dwi-chronicle-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.dwi-chronicle-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--silver-deep);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dwi-chronicle-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c00;
  animation: chronicle-pulse 1.8s ease-in-out infinite;
}

@keyframes chronicle-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.dwi-chronicle-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black);
}

/* Chronicle Body Scroll Area */
.dwi-chronicle-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.dwi-chronicle-body::-webkit-scrollbar {
  width: 3px;
}

.dwi-chronicle-body::-webkit-scrollbar-track {
  background: transparent;
}

.dwi-chronicle-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.dwi-chronicle-loading {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--silver-deep);
  text-transform: uppercase;
  padding: 40px 0;
  text-align: center;
}

/* Chronicle Cards */
.chronicle-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
}

.chronicle-card:last-child {
  border-bottom: none;
}

.chronicle-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chronicle-tag {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--off-white);
  background: var(--black);
  padding: 2px 7px;
  border-radius: 2px;
}

.chronicle-date {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  color: var(--silver-deep);
  letter-spacing: 0.04em;
}

.chronicle-headline {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--black);
  line-height: 1.4;
  margin: 0;
}

.chronicle-body {
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--black);
  opacity: 0.75;
  margin: 0;
}

.chronicle-hashtag {
  color: var(--black);
  font-weight: 700;
}

.chronicle-mention {
  color: var(--silver-deep);
  font-weight: 600;
}

.chronicle-link {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
  align-self: flex-start;
}

.chronicle-link:hover {
  opacity: 0.55;
}


.dwi-culture-block {
  width: 100%;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dwi-culture-text {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--black);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  opacity: 0.8;
}

.dwi-culture-text em {
  font-style: italic;
  font-weight: 600;
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   DWI PRODUCT SHOWCASE (T-SHIRT & POSTER)
   ══════════════════════════════════════════════════════════════ */

.dwi-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
}

.dwi-product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.dwi-product-label {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
}

.dwi-product-img-wrap {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dwi-product-img-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.35);
}

.dwi-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.6s ease;
}

.dwi-product-img-wrap:hover .dwi-product-img {
  transform: scale(1.04);
}

.dwi-product-cta {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding-bottom: 2px;
  opacity: 0.6;
  cursor: none !important;
  transition: opacity 0.2s ease;
}

.dwi-product-item:hover .dwi-product-cta {
  opacity: 1;
}

@media (max-width: 768px) {
  .dwi-products-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ══════════════════════════════════════════════════════════════
   DWI TABLE OF CONTENTS — LEFT COLUMN
   ══════════════════════════════════════════════════════════════ */

.dwi-toc-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.dwi-toc-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--silver-deep);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.dwi-toc-issue-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black);
  margin: 0 0 4px;
}

.dwi-toc-issue-date {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--silver-deep);
  margin: 0;
}

/* TOC List */
.dwi-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dwi-toc-entry {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: opacity 0.25s ease;
  will-change: opacity;
}

.dwi-toc-entry:last-child {
  border-bottom: none;
}

.dwi-toc-entry:hover {
  opacity: 0.65;
}

.dwi-toc-num {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--silver-deep);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 22px;
}

.dwi-toc-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dwi-toc-cat {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--silver-deep);
  text-transform: uppercase;
}

.dwi-toc-title {
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--black);
  line-height: 1.45;
}

.dwi-toc-author {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--silver-deep);
  opacity: 0.7;
}

/* Archive Section */
.dwi-archive-block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dwi-archive-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.dwi-archive-entry:hover {
  opacity: 0.7;
  transform: translateX(3px);
}

.dwi-archive-cover-wrap {
  width: 56px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dwi-archive-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.dwi-archive-entry:hover .dwi-archive-cover {
  transform: scale(1.06);
}

.dwi-archive-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dwi-archive-num {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--silver-deep);
  opacity: 0.65;
}


/* ══════════════════════════════════════════════════════════════
   SON DYNASTY X FEED — RIGHT PANEL UPDATES
   ══════════════════════════════════════════════════════════════ */

/* Override: remove eyebrow pulsing dot, style handle */
.dwi-chronicle-handle {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--silver-deep);
  font-weight: 600;
}

/* X Logo link */
.dwi-x-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--black);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  flex-shrink: 0;
  text-decoration: none;
}

.dwi-x-logo-link:hover {
  background: var(--black);
  color: var(--off-white);
  transform: scale(1.08);
}

.dwi-x-icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* REPOST tag variant */
.chronicle-tag--repost {
  background: transparent;
  color: var(--silver-deep);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Full height feed panel */
.dwi-col--right {
  display: flex;
  flex-direction: column;
}

.dwi-chronicle-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dwi-chronicle-body {
  flex: 1;
  min-height: 0;
}


/* ══════════════════════════════════════════════════════════════
   DWI CULTURE TEXT — LARGER + BREATHING GLOW
   ══════════════════════════════════════════════════════════════ */

.dwi-culture-text {
  font-size: 16px !important;
  line-height: 2 !important;
}

@keyframes culture-glow {
  0%, 100% {
    text-shadow: none;
    opacity: 0.85;
  }
  50% {
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.18), 0 0 35px rgba(0, 0, 0, 0.08);
    opacity: 1;
  }
}

.dwi-culture-glow {
  animation: culture-glow 4s ease-in-out infinite;
  will-change: opacity;
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT IMAGES — CLEAN WHITE BACKGROUND
   ══════════════════════════════════════════════════════════════ */

/* Override the dark background from previous styles */
.dwi-product-img-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.dwi-product-img {
  padding: 12px !important;
  mix-blend-mode: multiply;
}


/* ══════════════════════════════════════════════════════════════
   120HZ GLOBAL PERFORMANCE OVERRIDES
   — All transitions use GPU-composited properties only
   — cubic-bezier tuned for high-refresh display feel
   ══════════════════════════════════════════════════════════════ */

/* Promote elements that animate to their own compositor layer */
.dwi-archive-entry,
.dwi-archive-cover,
.dwi-x-logo-link,
.dwi-toc-entry,
.dwi-product-img-wrap,
.chronicle-card,
.dwi-coming-soon-text {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Ensure all transitions use only transform/opacity (GPU) */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* High-refresh scroll containers */
.dwi-chronicle-body,
.dwi-toc-list {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════
   DWI CULTURAL DESCRIPTION — LARGER + BREATHING GLOW
   ══════════════════════════════════════════════════════════════ */

.dwi-description-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px !important;
  line-height: 1.6 !important;
  text-align: center;
  color: var(--black);
  max-width: 850px;
  margin: 40px auto 20px;
  animation: description-glow 4s ease-in-out infinite;
  will-change: opacity, text-shadow;
}

@keyframes description-glow {
  0%, 100% {
    opacity: 0.75;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 22px rgba(0, 0, 0, 0.15), 0 0 35px rgba(0, 0, 0, 0.08);
  }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT IMAGES — CLEAN MOCKUP DISPLAY
   ══════════════════════════════════════════════════════════════ */

.dwi-footer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  box-sizing: border-box;
}

.dwi-footer-img-wrap {
  width: 208px;
  height: 208px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.dwi-footer-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.06));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.dwi-footer-column:hover .dwi-footer-img-wrap {
  transform: translateY(-4px);
}

.dwi-footer-column:hover .dwi-footer-product-img {
  transform: scale(1.06);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
}

.dwi-footer-text {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--black);
  text-transform: uppercase;
}

.dwi-product-price {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  margin-top: 10px;
  letter-spacing: 0.1em;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   TWITTER REPOST HEADER
   ══════════════════════════════════════════════════════════════ */

.tweet-repost-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #00ba7c; /* X's green color */
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.tweet-repost-header svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* ══════════════════════════════════════════════════════════════
   DWI LAYOUT AND PERFORMANCE ALIGNMENTS
   ══════════════════════════════════════════════════════════════ */

.dwi-cultural-description {
  grid-column: 1 / -1; /* Spans across all 3 grid columns to center properly */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 40px;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   120HZ GLOBAL PERFORMANCE OVERRIDES — ADDITIONAL ELEMENTS
   ══════════════════════════════════════════════════════════════ */

.dwi-footer-img-wrap,
.dwi-footer-product-img,
.dwi-description-text,
.dwi-cultural-description {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ══════════════════════════════════════════════════════════════
   30. VISUAL ART GALLERY PAGE (#visual-art-gallery)
   ══════════════════════════════════════════════════════════════ */

.section--visual-art-gallery {
  padding: 140px 4vw 80px;
  background: var(--off-white); /* Consistent off-white background color */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.section--visual-art-gallery .section-stamp {
  text-align: center;
  align-self: center;
  margin-bottom: 30px;
  width: 100%;
}

.visual-art-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--silver-deep);
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

/* Gallery Grid using 3-Column Row for Parallax Tilt */
.gallery-grid-row {
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: 1320px;
  margin: 40px auto 60px;
  box-sizing: border-box;
  align-items: flex-start;
  padding: 0 20px;
}

.gallery-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  will-change: transform;
}

.gallery-cell {
  background: transparent;
  cursor: pointer;
  position: relative;
  display: block;
}

.gallery-media-wrap {
  position: relative;
  width: 100%;
  overflow: visible; /* Prevent shadow clipping */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform-style: preserve-3d;
}

.gallery-media-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* Apply rounded corners directly to the image */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08); /* Apply shadow directly to the image */
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
}

/* Hover overlay inside cards */
.gallery-hover-overlay {
  position: absolute;
  inset: 0;
  border-radius: 8px; /* Match image rounded corners */
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.gallery-hover-overlay .label {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 4px;
  letter-spacing: 0.2em;
  font-size: 9px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Hover States */
.gallery-cell:hover .gallery-media-wrap {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16), var(--glow-sm);
}

.gallery-cell:hover img {
  transform: scale(1.03);
}

.gallery-cell:hover .gallery-hover-overlay {
  opacity: 1;
}

.gallery-cell:hover .gallery-hover-overlay .label {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .gallery-grid-row {
    gap: 16px;
    padding: 0 12px;
  }
  .gallery-column {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .section--visual-art-gallery {
    padding: 100px 5vw 60px;
  }
  .gallery-grid-row {
    flex-direction: column;
    gap: 24px;
    max-width: 480px;
    margin: 30px auto;
    padding: 0 16px;
  }
  .gallery-column {
    width: 100%;
    transform: none !important; /* Disable parallax on mobile */
    gap: 24px;
  }
}

/* DWI Footer Price & Stock Indicators */
.dwi-price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 10px;
  width: auto;
}

.dwi-price-container .dwi-product-price {
  margin-top: 0 !important;
}

.dwi-product-stock-left {
  color: #ff3b30; /* Vibrant modern red */
  font-family: 'Raleway', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 3px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   29. SIMULATED STORE & SHOPPING CART DRAWER
   ══════════════════════════════════════════════════════════════ */

/* Restore clean grid layout to 3 columns with YouTube Vlog nested in middle column */
.dwi-container {
  grid-template-columns: 1.25fr 3.2fr 1.25fr !important;
}

.dwi-video-section {
  grid-column: auto !important;
  margin-top: 250px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.dwi-video-placeholder,
.coming-soon-video {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important; /* Cinematic widescreen ratio */
  height: auto !important;
  background: #000000 !important;
}

/* Previous issues blackout overlays */
.dwi-article-img-wrap {
  position: relative !important;
  overflow: hidden;
  border-radius: 4px;
}

.dwi-article-img-wrap .dwi-coming-soon-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: background 0.4s ease;
}

.dwi-article-img-wrap .dwi-coming-soon-text {
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  color: #ffffff !important;
  animation: breathing-glow 3.5s ease-in-out infinite !important;
  user-select: none;
  text-align: center;
}

.dwi-article-block:hover .dwi-coming-soon-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

.dwi-article-block:hover .dwi-coming-soon-text {
  animation-duration: 1.8s !important;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9) !important;
}

/* Shopping Cart Drawer Container */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  visibility: hidden;
  transition: visibility 0.4s;
}

.cart-drawer.is-active {
  visibility: visible;
}

.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cart-drawer.is-active .cart-drawer-backdrop {
  opacity: 1;
}

.cart-drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: rgba(12, 12, 12, 0.98); /* Premium high-performance solid dark background */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
}

.cart-drawer.is-active .cart-drawer-content {
  transform: translateX(0);
}

/* Drawer Header */
.cart-drawer-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--white);
}

.cart-drawer-close {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.cart-drawer-close:hover {
  opacity: 1;
}

.cart-drawer-close span {
  position: absolute;
  left: 4px;
  top: 15px;
  width: 24px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s;
}

.cart-drawer-close span:first-child { transform: rotate(45deg); }
.cart-drawer-close span:last-child { transform: rotate(-45deg); }

/* Drawer Body */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

/* Empty State */
.cart-empty-state {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cart-empty-message {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
}

.cart-continue-shopping-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 10px 20px;
  font-size: 10px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
}

.cart-continue-shopping-btn:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

/* Items List */
.cart-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: cartItemFadeIn 0.4s ease forwards;
}

@keyframes cartItemFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cart-item-img-wrap {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cart-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.cart-item-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--white);
  line-height: 1.3;
}

.cart-item-size {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.cart-item-price {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--white);
}

.cart-item-qty-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.cart-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.cart-qty-btn {
  background: transparent;
  border: none;
  color: var(--white);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.3s;
}

.cart-qty-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cart-qty-val {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  padding: 0 10px;
  color: var(--white);
}

.cart-item-remove-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.3s;
}

.cart-item-remove-btn:hover {
  color: #ff3b30;
}

/* Cart Footer */
.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-total-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}

.cart-total-price {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.cart-footer-note {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin: 0;
}

.cart-checkout-btn {
  background: var(--white);
  color: var(--black);
  border: none;
  padding: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cart-checkout-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), var(--glow-white-sm);
}

/* Simulated Store layouts */
.dwi-product-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center; /* Centered layout for clean alignment */
  width: 100%;
  margin-top: 10px;
}

.dwi-product-meta-wrap .dwi-price-container {
  margin-top: 0 !important;
  align-items: center;
}

.dwi-size-selector {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.dwi-size-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15); /* Visible black borders on light background */
  color: rgba(0, 0, 0, 0.6);
  width: 28px;
  height: 28px;
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 3px;
}

.dwi-size-btn:hover {
  border-color: rgba(0, 0, 0, 0.4);
  color: var(--black);
}

.dwi-size-btn.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.dwi-size-selector-placeholder {
  height: 28px;
}

.dwi-add-to-cart-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15); /* Visible black borders on light background */
  color: var(--black);
  padding: 8px 18px;
  font-size: 9px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
  width: 100%;
  max-width: 160px;
  text-align: center;
}

.dwi-add-to-cart-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Floating nav item indicator */
.nav-links .nav-cart-trigger,
.mobile-nav-links .mobile-cart-trigger {
  font-weight: 700 !important;
  color: var(--silver) !important;
}

.nav-links .nav-cart-trigger:hover,
.mobile-nav-links .mobile-cart-trigger:hover {
  color: var(--white) !important;
  text-shadow: var(--glow-white-sm);
}

.cart-count {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  vertical-align: top;
  margin-left: 2px;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .dwi-container {
    grid-template-columns: 1.2fr 3fr 1.2fr !important;
    gap: 0px 16px;
  }
}

@media (max-width: 768px) {
  .dwi-container {
    display: flex;
    flex-direction: column;
    gap: 56px !important; /* Enlarged gap between columns/cards */
    padding: 0 4vw 40px;
  }
  .dwi-col--middle {
    order: 1 !important;
    display: flex;
    flex-direction: column;
    gap: 32px !important;
  }
  .dwi-col--left {
    order: 2 !important;
  }
  .dwi-video-section {
    width: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .lightbox-modal {
    overflow: hidden !important; /* Block modal-level scrolling entirely on mobile */
    height: 100dvh !important;
  }
  .lightbox-backdrop {
    height: 100dvh !important;
  }
  .lightbox-content-wrapper {
    flex-direction: column !important; /* Stack vertically on mobile */
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    padding: 16px !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
  .lightbox-media-container {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-height: 45vh !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    gap: 12px !important;
  }
  .lightbox-media-container img,
  .lightbox-media-container video {
    max-height: 40vh !important; /* Centered, leaving room for text card */
    max-width: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .lightbox-sub-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 4px auto 0 !important;
    display: inline-flex !important;
  }
  .lightbox-caption {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 42vh !important; /* Height constraint on card to prevent screen overflow */
    overflow-y: auto !important; /* Scroll internally for long text */
    padding: 16px 20px !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow-x: hidden !important;
  }
}

/* Lightbox Sub-gallery text button switcher overlay */
.lightbox-sub-nav {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 16px;
  border-radius: 30px;
  z-index: 15;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  pointer-events: auto; /* Enable hover and clicks on overlay nav buttons */
}

.sub-nav-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  letter-spacing: 0.15em;
  cursor: none; /* Keep custom cursor active */
  padding: 4px 8px;
  transition: color 0.3s, text-shadow 0.3s;
}

.sub-nav-btn:hover {
  color: rgba(255, 255, 255, 0.85);
}

.sub-nav-btn.active {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .dwi-desktop-only {
    display: none !important;
  }
}

#player-scrub[disabled] {
  pointer-events: none !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}