/* ==========================================================================
   Pilgrim's Nest — Official Stylesheet
   Domain: pilgrimsnest.org
   Aesthetic: "The Lantern in the Night" — Deep Celestial, Warm Hearth Gold, Sage
   ========================================================================== */

:root {
  /* Color Palette */
  --bg-dark: #070A12;
  --bg-primary: #0A0F1D;
  --bg-secondary: #111827;
  --bg-card: rgba(17, 24, 39, 0.72);
  --bg-card-hover: rgba(26, 36, 56, 0.85);
  --bg-input: rgba(15, 23, 42, 0.8);

  /* Gold & Amber Hearth Accents */
  --gold-primary: #F59E0B;
  --gold-light: #FDE68A;
  --gold-dark: #D97706;
  --gold-amber: #B45309;
  --gold-glow: rgba(245, 158, 11, 0.28);
  --gold-glow-subtle: rgba(245, 158, 11, 0.12);

  /* Earth & Sage Secondary */
  --sage-accent: #6EE7B7;
  --sage-muted: #34D399;
  --sage-dark: #065F46;
  --sage-glow: rgba(110, 231, 183, 0.2);

  /* Typography Colors */
  --text-pure: #FFFFFF;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  /* Lightened from #64748B: the original measured 4.16:1 on --bg-dark and
     3.76:1 on --bg-card, both under the WCAG AA 4.5:1 gate for body text.
     #74839A gives 5.14:1 and 4.64:1 respectively, and still sits clearly
     below --text-muted so the hierarchy is preserved. */
  --text-dim: #74839A;

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-gold: rgba(245, 158, 11, 0.35);
  --border-gold-strong: rgba(245, 158, 11, 0.65);

  /* Fonts */
  --font-serif: 'Cinzel', serif;
  --font-serif-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Transitions & Shadows */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px var(--border-subtle);
  --shadow-glow: 0 0 25px var(--gold-glow);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(245, 158, 11, 0.12), transparent 70%),
    radial-gradient(circle at 10% 40%, rgba(16, 185, 129, 0.04), transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(245, 158, 11, 0.05), transparent 50%),
    linear-gradient(180deg, var(--bg-dark) 0%, #0B0F19 50%, var(--bg-dark) 100%);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: #1F2937;
  border-radius: 4px;
  border: 2px solid var(--bg-dark);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

/* Ambient Canvas Background */
#starCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* Layout Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  position: relative;
  z-index: 2;
}

/* Typography Helpers */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
  color: var(--text-pure);
  font-weight: 600;
}

.text-gold {
  color: var(--gold-primary);
}

.text-gold-light {
  color: var(--gold-light);
}

.text-sage {
  color: var(--sage-muted);
}

.gradient-text {
  background: linear-gradient(135deg, #FFFDF8 0%, var(--gold-light) 40%, var(--gold-primary) 80%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1rem 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7, 10, 18, 0.75);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-normal);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--text-pure);
}

.brand-icon-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  object-fit: cover;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-link:hover .brand-icon-img {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
}

.brand-title {
  font-family: var(--font-serif-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-tagline {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  display: block;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background-color: var(--gold-primary);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 8px var(--gold-primary);
}

.pulse-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--gold-primary);
  animation: pulseRing 2s infinite cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--gold-light);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

/* Ambient hearth loop behind the hero copy.
   Opacity is 0.80 deliberately. It was 0.38, which I chose to hide a loop
   artefact — but measured against the static background the video then
   contributed only 0.57 of 255 grey levels, i.e. it was effectively
   invisible. At 0.80 the hearth is genuinely present (3.75 grey levels)
   and the loop seam stays at 1.3, which reads as fire flicker. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.80;
  z-index: 0;
  pointer-events: none;
}

/* Darkens the footage and protects text contrast over the moving image */
.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(245, 158, 11, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, rgba(7, 10, 18, 0.52) 0%, rgba(7, 10, 18, 0.64) 50%, rgba(7, 10, 18, 0.52) 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}

/* Hero Centerpiece Emblem */
.hero-emblem-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.25rem;
  animation: heroLogoEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-emblem-halo {
  position: absolute;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.08) 50%, transparent 70%);
  filter: blur(25px);
  animation: haloPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-emblem-ring {
  position: absolute;
  width: 118%;
  height: 118%;
  border-radius: 50%;
  border: 1.5px dashed rgba(245, 158, 11, 0.45);
  animation: rotateRing 80s linear infinite;
  pointer-events: none;
}

.hero-emblem-ring::after {
  content: '✦';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-light);
  font-size: 14px;
  text-shadow: 0 0 8px var(--gold-primary);
}

.hero-logo-img {
  width: clamp(200px, 28vw, 290px);
  height: clamp(200px, 28vw, 290px);
  border-radius: 50%;
  border: 3.5px solid var(--gold-primary);
  box-shadow: 
    0 0 35px rgba(245, 158, 11, 0.35),
    0 15px 45px rgba(0, 0, 0, 0.85),
    inset 0 0 25px rgba(0, 0, 0, 0.9);
  object-fit: cover;
  background-color: #070A12;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  z-index: 2;
  position: relative;
}

.hero-emblem-wrap:hover .hero-logo-img {
  transform: scale(1.05);
  box-shadow: 
    0 0 55px rgba(245, 158, 11, 0.6),
    0 20px 50px rgba(0, 0, 0, 0.95);
}

@keyframes heroLogoEntrance {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes haloPulse {
  0% { transform: scale(0.95); opacity: 0.65; }
  100% { transform: scale(1.1); opacity: 1; }
}

@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.1);
  animation: fadeInDown 0.8s ease-out;
}

.hero-headline {
  font-size: clamp(2.25rem, 5vw + 1rem, 4.25rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
  font-weight: 700;
  animation: fadeInUp 0.8s ease-out 0.15s both;
}

.hero-description {
  font-size: clamp(1.05rem, 1.2vw + 0.5rem, 1.25rem);
  color: var(--text-secondary);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.75;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
  animation: fadeInUp 0.8s ease-out 0.45s both;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: none;
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  color: #0F172A;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.75s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.5);
  color: #000;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--border-gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

/* Countdown Clock */
.countdown-box {
  width: 100%;
  max-width: 640px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  margin-inline: auto;
  animation: fadeInUp 0.8s ease-out 0.6s both;
  position: relative;
  overflow: hidden;
}

.countdown-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.countdown-title {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.time-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.time-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.time-value {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.time-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}

/* Sections Global */
.section {
  padding: 6rem 0;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 4rem;
}

.section-tag {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Progress / Construction Roadmap */
.timeline-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
}

.progress-overall-wrap {
  margin-bottom: 3.5rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.progress-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.progress-pct {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-primary);
}

.progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 78%;
  background: linear-gradient(90deg, var(--sage-muted) 0%, var(--gold-primary) 70%, var(--gold-light) 100%);
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
  transition: width 1.5s ease-in-out;
}

.milestones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  position: relative;
}

.milestone-item {
  background: rgba(10, 15, 29, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: all var(--transition-normal);
}

.milestone-item:hover {
  transform: translateY(-4px);
  border-color: var(--border-card);
}

.milestone-item.active {
  border-color: var(--border-gold);
  background: rgba(245, 158, 11, 0.04);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}

.milestone-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.milestone-item.completed .milestone-step {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.milestone-item.active .milestone-step {
  background: rgba(245, 158, 11, 0.2);
  color: var(--gold-light);
  border: 1px solid var(--gold-primary);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.milestone-item.upcoming .milestone-step {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.milestone-title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.milestone-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

.milestone-status {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.milestone-item.completed .milestone-status {
  color: #34D399;
}

.milestone-item.active .milestone-status {
  color: var(--gold-light);
}

.milestone-item.upcoming .milestone-status {
  color: var(--text-dim);
}

/* Sanctuary Pillars */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.pillar-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.pillar-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-gold);
  background: var(--bg-card-hover);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.12);
}

.pillar-card:hover::before {
  opacity: 1;
}

.pillar-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  transition: all var(--transition-fast);
}

.pillar-card:hover .pillar-icon-wrap {
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
  transform: scale(1.05);
}

.pillar-number {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
  letter-spacing: 0.1em;
}

.pillar-title {
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

.pillar-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Wisdom & Contemplation Widget */
.reflection-section {
  background: linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.03) 50%, transparent 100%);
}

.reflection-card {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 3.5rem 3rem;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.1);
}

.quote-ornament {
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--gold-primary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: -1rem;
}

.reflection-text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.6;
  color: var(--text-pure);
  font-style: italic;
  margin-bottom: 1.5rem;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reflection-author {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  transition: opacity 0.4s ease;
}

.btn-reflect {
  background: rgba(245, 158, 11, 0.1);
  color: var(--gold-light);
  border: 1px solid var(--border-gold);
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-reflect:hover {
  background: var(--gold-primary);
  color: #0F172A;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Founding Circle / Newsletter */
.signup-card {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(20, 30, 50, 0.8) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 4rem 2.5rem;
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  box-shadow: var(--shadow-card), 0 0 30px rgba(245, 158, 11, 0.1);
  position: relative;
  overflow: hidden;
}

.signup-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.signup-title {
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  margin-bottom: 1rem;
}

.signup-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-lede {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.about-lede p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin-inline: auto;
}

.about-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.about-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.about-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-primary);
  margin-bottom: 0.85rem;
}

.about-card p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .about-card {
    padding: 1.5rem 1.25rem;
  }
  .about-lede p {
    font-size: 1.05rem;
  }
}

/* Honest "not connected yet" notices */
.signup-notice,
.modal-notice {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gold-light);
  background: var(--gold-glow-subtle);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm, 10px);
  padding: 0.85rem 1.1rem;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal-notice {
  margin-inline: 0;
  text-align: left;
}

.signup-notice strong,
.modal-notice strong {
  color: var(--gold-primary);
}

/* Opening-date note shown while the date is unconfirmed */
.countdown-note {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

.input-field {
  flex: 1 1 280px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 0.9rem 1.5rem;
  color: var(--text-pure);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  outline: none;
  transition: all var(--transition-fast);
}

.input-field:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
}

.input-field::placeholder {
  color: var(--text-dim);
}

.signup-privacy {
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* FAQ Accordion */
.faq-wrap {
  max-width: 800px;
  margin-inline: auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--border-card);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 1.4rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}

.faq-toggle-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 1.1rem;
  transition: transform var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--gold-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 1.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
}

.faq-item.open .faq-answer {
  padding-bottom: 1.5rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: rgba(5, 7, 13, 0.95);
  padding: 4rem 0 2.5rem;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-brand {
  max-width: 380px;
}

.footer-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-top: 0.75rem;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.footer-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--gold-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* Contact Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

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

.modal-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  padding: 2.5rem 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 25px rgba(245, 158, 11, 0.15);
  position: relative;
  transform: scale(0.94);
  transition: transform var(--transition-normal);
}

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

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--gold-light);
}

.modal-title {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.modal-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}

.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-input, .modal-textarea, .modal-select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  color: var(--text-pure);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.modal-input:focus, .modal-textarea:focus, .modal-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.modal-textarea {
  min-height: 110px;
  resize: vertical;
}

/* Toast Notification */
.toast-msg {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #111827;
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-pure);
  font-size: 0.9rem;
  z-index: 10000;
  transform: translateY(120%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-msg.show {
  transform: translateY(0);
  opacity: 1;
}

/* Keyframes */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .section {
    padding: 4.5rem 0;
  }
}

/* Mobile header: brand (171px) + status badge + Contact button (205px
   together) exceeded a 390px viewport, pushing "Contact Us" 34px past the
   right edge and clipping it. Hide the status badge on small screens — the
   "In The Making" state is already stated in the hero copy — and let the
   brand title truncate rather than wrap to three lines. */
@media (max-width: 640px) {
  .nav-wrap {
    gap: 0.75rem;
    min-width: 0;
  }

  .brand-link {
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.55rem;
  }

  .brand-title,
  .brand-tagline {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .brand-tagline {
    font-size: 0.6rem;
  }

  .nav-actions {
    flex: 0 0 auto;
    gap: 0.5rem;
  }

  .status-badge {
    display: none;
  }

  .nav-actions .btn {
    white-space: nowrap;
  }

  /* Touch targets: WCAG 2.5.8 asks for 24x24 minimum, but 44px is the
     comfortable size for a thumb. The header button, the modal close X
     and the FAQ toggle were all under 40px on a phone. */
  .nav-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .modal-close-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .faq-question {
    min-height: 44px;
  }

  .faq-toggle-icon {
    min-width: 32px;
    min-height: 32px;
  }
}

@media (max-width: 640px) {
  .countdown-grid {
    gap: 0.5rem;
  }
  .time-card {
    padding: 0.75rem 0.25rem;
  }
  .timeline-card {
    padding: 2rem 1.25rem;
  }
  .reflection-card {
    padding: 2.5rem 1.5rem;
  }
  .signup-card {
    padding: 2.5rem 1.5rem;
  }
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .toast-msg {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* ==========================================================================
   Reduced Motion
   Previously this preference was honoured only in JavaScript, so every CSS
   animation below ran regardless. This block disables them for visitors who
   ask for reduced motion, and stops the hero video from autoplaying.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Hero ambient loop: hide entirely rather than pause, so no motion at all */
  .hero-video {
    display: none;
  }

  /* Entrance + looping animations */
  .hero-emblem-wrap,
  .hero-emblem-halo,
  .hero-emblem-ring,
  .status-badge,
  .pulse-dot,
  .quote-ornament,
  .section-header,
  .milestone-item,
  .pillar-card,
  .timeline-card,
  .signup-card,
  .reflection-card,
  .faq-item {
    animation: none !important;
  }

  /* Infinite spinners/sweeps */
  .btn-primary::after,
  .progress-fill::after,
  .milestone-item.completed .milestone-step::before {
    animation: none !important;
  }

  /* Smooth scrolling is motion too */
  html {
    scroll-behavior: auto !important;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Keyboard Focus
   Interactive elements previously set `outline: none` with nothing in its
   place, so keyboard users had no visible focus at all. Restore a clear
   gold ring that matches the brand, and keep it above the ambient layer.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Inputs already style their own border on focus; avoid a doubled ring */
.input-field:focus,
.input-field:focus-visible,
.modal-input:focus,
.modal-input:focus-visible,
.modal-textarea:focus,
.modal-textarea:focus-visible,
.modal-select:focus,
.modal-select:focus-visible {
  outline: none;
  border-color: var(--border-gold-strong);
}

/* ==========================================================================
   Music Page
   ========================================================================== */
.music-hero {
  min-height: 62vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.music-title {
  font-family: var(--font-serif-display);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.15;
  margin: 0.6rem 0 1.2rem;
  font-weight: 700;
}

.music-lede {
  max-width: 620px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.platform-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.platform-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  color: var(--gold-light);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.platform-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: var(--border-gold-strong);
  transform: translateY(-1px);
}

.platform-btn[data-unconfirmed="true"] {
  opacity: 0.55;
  border-style: dashed;
  cursor: not-allowed;
}

.platform-note {
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Release list */
.release-list {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.release-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.release-item:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.release-cover {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--bg-secondary);
}

.release-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.release-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-pure);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.release-date {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.release-links {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.release-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.release-link:hover {
  border-color: var(--border-gold);
  color: var(--gold-light);
  background: var(--gold-glow-subtle);
}

.release-loading,
.release-error {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 2rem 0;
}

@media (max-width: 640px) {
  .music-hero {
    padding-top: 7rem;
  }
  .release-item {
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 1rem;
  }
  .release-cover {
    width: 64px;
    height: 64px;
  }
  .release-links {
    width: 100%;
    justify-content: flex-start;
  }
  .release-link {
    min-height: 44px;
  }
}

/* ==========================================================================
   Touch Target Gate (WCAG 2.5.5 / iOS 44px)
   Measured at 390px these were 41-43px tall. Lifted to a true 44px minimum
   so every interactive control clears the thumb-target threshold.
   ========================================================================== */
@media (max-width: 640px) {
  .btn-reflect,
  .modal-input,
  .modal-select,
  .modal-textarea,
  .modal-card .btn {
    min-height: 44px;
  }

  .input-field {
    min-height: 44px;
  }

  /* The close button is `position: absolute` and sits inside a modal card
     that carries a 0.94 scale transform, so 44px renders as 41px. Size the
     element up to clear 44px *after* the transform is applied. */
  .modal-close-btn {
    min-height: 47px;
    min-width: 47px;
  }

  .modal-input,
  .modal-select,
  .modal-card .btn {
    min-height: 47px;
  }
}

/* ==========================================================================
   Header: centred brand with a spinning emblem
   The brand sits in the middle column; the nav and the Listen button take
   the equal-width columns either side, so the brand stays truly centred.
   ========================================================================== */
.nav-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.nav-links {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.brand-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  gap: 1rem;
  max-width: 100%;
}

.nav-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.brand-title {
  display: block;
  font-size: 2rem;
  line-height: 1.2;
}

.brand-tagline {
  font-size: 0.72rem;
}

.brand-emblem {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
}

.brand-emblem .brand-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.brand-emblem .brand-face.is-active {
  opacity: 1;
}

.brand-emblem.is-spinning {
  animation: emblemSpin 1s linear;
}

@keyframes emblemSpin {
  from { transform: perspective(400px) rotateY(0deg); }
  to { transform: perspective(400px) rotateY(360deg); }
}

/* The taller header needs more room before the first heading */
.home-hero,
.music-hero {
  padding-top: 9rem;
}

@media (max-width: 640px) {
  .home-hero,
  .music-hero {
    padding-top: 8rem;
  }
}

/* Sections land below the taller fixed header when reached from the nav */
section[id] {
  scroll-margin-top: 6rem;
}

@media (max-width: 1100px) {
  .nav-links {
    display: none;
  }
}

/* On a phone the centred brand needs the full width, and the hero's own
   Listen buttons are already on screen, so the header button steps aside. */
@media (max-width: 640px) {
  .nav-actions {
    display: none;
  }

  .nav-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-link {
    grid-column: 1;
    gap: 0.75rem;
  }

  .brand-title {
    font-size: 1.5rem;
  }

  .brand-emblem {
    width: 56px;
    height: 56px;
  }
}

/* ==========================================================================
   Artist Home (index.html)
   The landing page is Pilgrim's music: the artist name, the latest single,
   one lyric in the song's own words, then the rest of the singles.
   ========================================================================== */
.btn-compact {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.home-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 4rem;
}

.artist-name {
  font-family: var(--font-serif-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  animation: fadeInUp 0.8s ease-out both;
}

.artist-tagline {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s ease-out 0.1s both;
}

.artist-lede {
  max-width: 34rem;
  text-wrap: pretty;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.home-hero-media {
  animation: fadeInUp 0.8s ease-out 0.25s both;
}

/* Latest single */
.feature {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}

.feature-cover-link {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.feature-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-secondary);
  transition: transform var(--transition-slow);
}

.feature-cover-link:hover .feature-cover {
  transform: scale(1.03);
}

.feature-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.5rem 0;
}

.feature-meta {
  min-width: 0;
}

.feature-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 0.25rem;
}

.feature-title {
  font-size: 1.5rem;
  line-height: 1.25;
}

.feature-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lyric band: the one place the page speaks in the song's voice, so it is
   set in a literary italic rather than the monumental caps used elsewhere. */
.lyric-band {
  position: relative;
  z-index: 2;
  padding: 6rem 0;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.04) 50%, transparent 100%);
}

.lyric-quote {
  max-width: 56rem;
  margin-inline: auto;
}

.lyric-quote::before {
  content: '';
  display: block;
  width: 4rem;
  height: 1px;
  margin: 0 auto 2rem;
  background: var(--gold-primary);
}

.lyric-lines {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.625rem, 5vw, 3.75rem);
  line-height: 1.25;
  text-wrap: balance;
  color: var(--text-pure);
  margin-bottom: 1.5rem;
}

.lyric-lines span {
  display: block;
}

.lyric-source {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lyric-source cite {
  font-style: normal;
  color: var(--gold-light);
}

/* Album: cover and facts on one side, the full running order on the other.
   The list is numbered because track order is real information here. */
.album {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 3rem;
  padding: 2rem;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.album + .album {
  margin-top: 2rem;
}

.album-title {
  font-family: var(--font-serif-display);
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 1.5rem 0 0.5rem;
}

.album-facts {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.album-tracks {
  list-style: none;
  counter-reset: track;
  columns: 2;
  column-gap: 3rem;
}

.album-track {
  counter-increment: track;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-subtle);
  break-inside: avoid;
  font-size: 0.95rem;
}

.album-track::before {
  content: counter(track, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold-primary);
}

.album-track-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
}

.album-track-time {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.album-track-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--gold-primary);
  text-underline-offset: 4px;
}

.album-track-link:hover {
  color: var(--gold-primary);
}

.album-track-link:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.album-track-cue {
  color: var(--gold-primary);
  margin-left: 0.35em;
}

@media (max-width: 1000px) {
  .album {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .album-side {
    max-width: 360px;
    margin-inline: auto;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .album {
    padding: 1rem;
  }

  .album-tracks {
    columns: 1;
  }
}

/* Earlier singles */
.singles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.singles-grid .release-loading,
.singles-grid .release-error {
  grid-column: 1 / -1;
}

.single-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.single-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
}

.single-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.single-meta {
  padding: 0 0.5rem 0.5rem;
}

.single-title {
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.single-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Per-release platform links (Apple Music / Spotify / YouTube) */
.release-link {
  min-height: 44px;
}

.feature-body {
  flex-direction: column;
  align-items: stretch;
}

.feature .release-links,
.single-card .release-links {
  justify-content: flex-start;
  width: 100%;
}

.single-card .release-links {
  margin-top: auto;
  padding: 0 0.5rem 0.5rem;
}

.single-card .release-link {
  flex: 1 1 auto;
}

.single-cover-link {
  display: block;
  border-radius: var(--radius-md);
}

.album .platform-links {
  justify-content: flex-start;
  margin-bottom: 0;
}

@media (max-width: 1000px) {
  .album .platform-links {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .single-card .release-links {
    padding: 0;
  }
}

/* Lyrics button + dialog. The button sits with the platform links but opens
   something on this page, so it carries the gold accent to set it apart. */
.lyrics-btn {
  font-family: var(--font-sans);
  background: var(--gold-glow-subtle);
  border-color: var(--border-gold);
  color: var(--gold-light);
  cursor: pointer;
}

.lyrics-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--border-gold-strong);
}

.lyrics-dialog {
  width: calc(100% - 2rem);
  max-width: 560px;
  max-height: 85vh;
  margin: auto;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.9), 0 0 24px rgba(245, 158, 11, 0.15);
  overflow: hidden;
}

.lyrics-dialog[open] {
  display: flex;
  flex-direction: column;
}

.lyrics-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lyrics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.lyrics-title {
  font-size: 1.25rem;
  line-height: 1.3;
}

.lyrics-close {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.lyrics-close:hover {
  color: var(--gold-light);
  border-color: var(--border-gold);
}

.lyrics-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem;
  white-space: pre-line;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.singles-more {
  margin-top: 3rem;
  text-align: center;
}

.release-error a {
  color: var(--gold-light);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 900px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .home-hero-copy {
    text-align: center;
  }

  .artist-lede {
    margin-inline: auto;
  }

  .home-hero-actions {
    justify-content: center;
  }

  .home-hero-media {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .nav-cta-long {
    display: none;
  }

  .lyric-band {
    padding: 4rem 0;
  }

  /* One single per row on a phone: cover beside the title, then the three
     platform links in a single row underneath. Two columns left each link
     on its own line and made every card three buttons tall. */
  .singles-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .single-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }

  .single-meta {
    padding: 0;
  }

  .single-card .release-links {
    grid-column: 1 / -1;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
}