:root{--wine:#4b0610;--red:#a11628;--gold:#d7b65f;--gold2:#eed58f;--parchment:#f3e4c8;--parchment2:#f7ecd8;--ink:#16070a;--cream:#fff9ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Montserrat,Arial,sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}h2,h3{font-family:"Cormorant Garamond",Georgia,serif;margin:0;line-height:1.06}h2{font-size:clamp(2.7rem,5vw,5rem);font-weight:500;text-align:center}.page{position:relative;min-height:100vh;padding:8rem 7vw 6rem}.section-label{position:absolute;right:7vw;top:5.8rem;margin:0;color:var(--gold);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.3em;z-index:3}.site-header{position:fixed;inset:0 0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;z-index:50;background:linear-gradient(rgba(12,3,5,.9),transparent);transition:.3s}.site-header.scrolled{background:rgba(20,5,8,.95);backdrop-filter:blur(10px)}.brand{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.75rem;color:#bc2338;font-weight:600;letter-spacing:.04em}.brand span{color:#bc2338}.nav{display:flex;gap:2.5rem;font-size:.73rem;text-transform:uppercase;letter-spacing:.14em}.nav a:hover{color:var(--gold)}.menu-toggle{display:none;background:none;border:0;color:white;font-size:1.4rem}.hero{display:grid;place-items:center;text-align:center;background:linear-gradient(rgba(16,3,7,.22),rgba(20,3,8,.72)),url('assets/36q-poster.jpg') center 18%/cover no-repeat;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(255,202,121,.32),transparent 34%),linear-gradient(to bottom,rgba(22,2,8,.05),rgba(18,3,7,.78))}.hero-content{position:relative;z-index:4;max-width:980px;padding-top:3rem}.logo-lockup{display:flex;justify-content:center;align-items:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(8rem,19vw,15rem);font-weight:600;color:#b1182c;line-height:.7;text-shadow:0 4px 18px rgba(0,0,0,.38)}.qmark{position:relative}.qmark b{position:absolute;font-family:Georgia,serif;font-size:.18em;left:.36em;top:.32em;color:#b1182c;-webkit-text-stroke:1.5px var(--gold);text-shadow:none}.qmark i{position:absolute;font-family:Georgia,serif;font-size:.32em;right:-.07em;top:.18em;color:var(--gold);transform:rotate(-8deg)}.hero-kicker{text-transform:uppercase;letter-spacing:.45em;font-size:.78rem;font-weight:600}.tagline{max-width:850px;margin:1.2rem auto 2rem;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.35rem,2.2vw,2rem);font-style:italic}.actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.9rem 1.3rem;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:600;border:1px solid transparent}.primary{background:var(--gold);color:#2a160e}.ghost{border-color:rgba(255,255,255,.75)}.floating-card{position:absolute;z-index:3;width:104px;padding:10px 7px;background:#e8c98c;color:#24150e;border:2px solid rgba(84,38,13,.55);box-shadow:0 10px 20px rgba(0,0,0,.35);font-family:"Cormorant Garamond",Georgia,serif;font-size:.78rem;animation:float 5s ease-in-out infinite}.floating-card strong{display:block;font-size:2.3rem;line-height:1}.c1{left:7%;top:29%;transform:rotate(-12deg)}.c2{right:8%;top:27%;transform:rotate(11deg);animation-delay:-1s}.c3{left:10%;bottom:20%;transform:rotate(8deg);animation-delay:-2s}.c4{right:10%;bottom:22%;transform:rotate(-8deg);animation-delay:-3s}.skyline{position:absolute;left:0;right:0;bottom:0;height:85px;background:#050103;opacity:.65;clip-path:polygon(0 100%,0 55%,5% 55%,5% 32%,10% 32%,10% 65%,15% 65%,15% 42%,22% 42%,22% 18%,26% 18%,26% 70%,34% 70%,34% 35%,39% 35%,39% 10%,43% 10%,43% 65%,50% 65%,50% 30%,55% 30%,55% 17%,60% 17%,60% 70%,68% 70%,68% 38%,74% 38%,74% 22%,79% 22%,79% 66%,86% 66%,86% 28%,91% 28%,91% 52%,100% 52%,100% 100%)}
.world{background:#100407;color:white}.world h2{margin-bottom:3rem}.world-grid{display:grid;grid-template-columns:minmax(320px,.82fr) 1.18fr;gap:6vw;align-items:center;max-width:1280px;margin:auto}.poster-wrap img{display:block;width:100%;max-height:650px;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid rgba(215,182,95,.35)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}.stats div{border-top:1px solid var(--gold);padding:1.3rem .4rem}.stats strong,.stats span{display:block}.stats strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(2rem,4vw,3.4rem);font-weight:500;color:var(--gold)}.stats span{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}.save-love strong{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.2;margin:.55rem 0 .25rem}.save-love span{text-transform:none;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55rem;letter-spacing:0;color:var(--gold)}.inspiration{max-width:900px;margin:3rem auto 0;text-align:center;border-top:1px solid rgba(215,182,95,.38);padding-top:1.4rem}.inspiration h3{font-family:Montserrat,Arial,sans-serif;font-size:.82rem;color:var(--gold);text-transform:uppercase;letter-spacing:.25em}.inspiration p{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.3rem;margin:.75rem 0 0}
.story{background:linear-gradient(135deg,var(--parchment2),#ead3ad);color:#281416}.story h2{max-width:1050px;margin:0 auto 4rem}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:1250px;margin:auto;align-items:stretch}.story-card{min-height:330px;background:rgba(255,255,255,.72);padding:2.4rem;border-top:3px solid #b6943d;box-shadow:0 18px 40px rgba(83,48,24,.12);display:flex;flex-direction:column;justify-content:center}.story-card h3{font-size:2.3rem;color:#8f1524}.story-card p{color:#574044;margin-bottom:0}
.characters{background:radial-gradient(circle at 50% 0,#6a1120,#190507 68%)}.characters h2{margin-bottom:4rem}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1.3rem;max-width:1250px;margin:auto}.character-card{min-height:280px;padding:2rem;border:1px solid rgba(215,182,95,.55);background:linear-gradient(145deg,rgba(116,12,29,.88),rgba(55,5,13,.9));display:flex;flex-direction:column}.character-card h3{font-size:2.25rem;color:var(--gold);margin:.5rem 0}.character-card p{margin:0}.symbol{font-family:"Cormorant Garamond",Georgia,serif;font-size:3.4rem;color:rgba(215,182,95,.72);line-height:1}.fate-dots{display:flex;gap:.45rem;height:3.4rem;align-items:center}.fate-dots i{width:22px;height:22px;border-radius:50%;background:#bd2335}.fate-dots i:nth-child(2){background:#496ec2}.fate-dots i:nth-child(3){background:#e4c442}
.video-page{background:#0f0407;text-align:center}.video-page h2{font-size:clamp(2.4rem,4.6vw,4.4rem);margin-bottom:2.2rem}.video-frame{width:min(1100px,92vw);aspect-ratio:16/9;margin:auto;border:1px solid rgba(215,182,95,.5);box-shadow:0 28px 70px rgba(0,0,0,.55);background:linear-gradient(rgba(20,2,8,.55),rgba(20,2,8,.7)),url('assets/36q-poster.jpg') center/cover}.video-placeholder{height:100%;display:grid;place-items:center;align-content:center;gap:.65rem}.video-placeholder .play{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:rgba(215,182,95,.94);color:#3b0911;font-size:1.7rem;padding-left:.2rem}.video-placeholder strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:4rem;color:var(--gold)}.video-placeholder small{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em}.video-caption{font-size:.82rem;color:#cdbfc0;margin:1rem 0 0}
.about{background:linear-gradient(135deg,#f8ecd6,#ead3ad);color:#2a1618}.about h2{margin-bottom:3.5rem}.about-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:7vw;align-items:center;max-width:1200px;margin:auto}.portrait{position:relative}.portrait img{display:block;width:100%;box-shadow:20px 20px 0 #8a1421}.portrait:before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid #b9933b}.portrait span{position:absolute;left:-.8rem;bottom:1.3rem;background:var(--gold);color:#2d190f;padding:.55rem .8rem;font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}.about-copy p{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55rem}.about-copy blockquote{margin:2rem 0 0;padding-left:1.5rem;border-left:3px solid #b9933b;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;font-style:italic}.about-copy cite{display:block;margin-top:.8rem;font-family:Montserrat,Arial,sans-serif;font-size:.7rem;font-style:normal;text-transform:uppercase;letter-spacing:.12em}
.contact{display:grid;place-items:center;overflow:hidden;text-align:center;background:linear-gradient(rgba(64,3,15,.7),rgba(25,2,7,.93)),url('assets/36q-poster.jpg') center 18%/cover no-repeat}.contact-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 12%,rgba(255,224,153,.38),transparent 40%)}.contact-panel{position:relative;z-index:2;max-width:900px}.contact-panel>p{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem}.contact-info{margin-top:2rem;display:flex;flex-direction:column;align-items:center}.contact-info strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.4rem;color:var(--gold);margin-bottom:.5rem}.contact-info a{font-size:1rem;margin:.18rem}.contact-info .website{margin-top:.65rem}
footer{display:flex;justify-content:space-between;padding:1.3rem 7vw;background:#080203;color:#998b8d;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}.reveal{opacity:0;transform:translateY(25px);transition:.75s}.reveal.visible{opacity:1;transform:none}@keyframes float{50%{translate:0 -12px}}
@media(max-width:900px){.menu-toggle{display:block}.nav{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(20,5,8,.98);padding:1rem 7vw;flex-direction:column;gap:0}.nav.open{display:flex}.nav a{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.08)}.page{padding:7rem 6vw 5rem}.section-label{right:6vw;top:5rem}.world-grid,.about-grid{grid-template-columns:1fr}.poster-wrap{max-width:520px;margin:auto}.stats{grid-template-columns:repeat(2,1fr)}.story-grid,.card-grid{grid-template-columns:1fr 1fr}.floating-card{display:none}.portrait{max-width:500px;margin:auto}.about-copy{text-align:center}.about-copy blockquote{text-align:left}}
@media(max-width:620px){h2{font-size:2.65rem}.story-grid,.card-grid,.stats{grid-template-columns:1fr}.story-card,.character-card{min-height:auto}.section-label{font-size:.7rem;letter-spacing:.22em}.logo-lockup{font-size:7.5rem}.tagline{font-size:1.3rem}.video-placeholder strong{font-size:2.8rem}footer{flex-direction:column;text-align:center;gap:.5rem}}


/* Version 3.1 - approved refinements only */
:root{--wine:#520713;--red:#b7192d;--gold:#dfbd62;--gold2:#f2d98d;--ink:#120307;--cream:#fffaf1}
.section-label{right:7vw;top:5.55rem;color:var(--gold);font-size:.9rem;font-weight:700;letter-spacing:.25em;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.brand{display:block;width:102px;height:48px}
.brand img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.hero{place-items:center;background:linear-gradient(rgba(20,2,7,.10),rgba(25,2,8,.57)),url('assets/36q-poster.jpg') center center/cover no-repeat}
.hero-overlay{background:radial-gradient(circle at 50% 42%,rgba(255,195,92,.28),transparent 37%),linear-gradient(to bottom,rgba(28,1,8,.01),rgba(29,2,9,.66))}
.hero-content{padding-top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72vh}
.hero-logo{display:block;width:min(870px,84vw);max-height:320px;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 24px rgba(0,0,0,.42))}
.hero-subtitle{margin:.45rem 0 0;color:var(--gold);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.22rem,2.12vw,1.8rem);font-weight:600;text-transform:uppercase;letter-spacing:.38em;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.tagline{margin-top:1.4rem}
.world{background:radial-gradient(circle at 50% 0,#3d0711 0,#170407 46%,#0d0204 100%)}
.world h2{margin-bottom:2.5rem}
.world-grid{display:flex;flex-direction:column;gap:1.8rem;max-width:1100px}
.poster-wrap{width:min(560px,85vw);margin:auto}
.poster-wrap img{max-height:none;width:100%}
.stats{width:min(900px,92vw);grid-template-columns:repeat(4,1fr);gap:1.1rem;margin:0 auto;text-align:center}
.stats strong{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.save-love strong{font-size:clamp(1.05rem,1.8vw,1.35rem)}
.save-love span{font-size:1.35rem}
.inspiration{margin:1.5rem auto 0;padding-top:1rem}
.inspiration h3{font-size:.9rem;font-weight:700}
.inspiration p{font-size:1.5rem;line-height:1.35;margin:.45rem 0 0}
.story{background:linear-gradient(135deg,#f8ecd7,#ecd5ae);color:#281416}
.story h2{max-width:980px;margin:0 0 3.5rem;text-align:left;font-size:clamp(2.35rem,4.2vw,4.25rem)}
.story-grid{grid-template-columns:1fr auto 1fr auto 1fr;gap:1rem;align-items:center}
.story-card{background:#fff;min-height:330px}
.story-arrow{font-size:2.1rem;color:#a5192b;line-height:1;text-shadow:0 1px 0 #fff}
.characters{background:radial-gradient(circle at 50% 0,#7b1324,#210508 67%)}
.characters h2{text-align:center;margin-bottom:3.5rem}
.characters h2 span{display:inline-block;margin-top:.18em}
.card-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.character-card{min-height:275px;padding:1.9rem;background:linear-gradient(145deg,rgba(129,13,32,.93),rgba(54,4,13,.94));border-color:rgba(223,189,98,.58)}
.symbol{font-size:3rem}.fate-dots{height:3rem}.fate-dots i{width:20px;height:20px}
.video-page{background:radial-gradient(circle at 50% 0,#310911,#0e0305 65%)}
.video-page h2{font-size:clamp(2rem,3.75vw,3.6rem);margin-bottom:3rem}
.video-frame{width:min(1260px,94vw);margin-top:.4rem}
.video-caption{margin-top:1.05rem}
.about{background:linear-gradient(135deg,#fbefd9,#ead0a5)}
.about-copy p{font-size:1.48rem;line-height:1.55;font-weight:400}
.contact{background:linear-gradient(rgba(73,4,17,.55),rgba(22,2,7,.93)),url('assets/36q-poster.jpg') center 22%/cover no-repeat}
.contact-light{background:
linear-gradient(112deg,transparent 18%,rgba(255,235,181,.16) 34%,transparent 45%),
linear-gradient(72deg,transparent 35%,rgba(255,235,181,.14) 49%,transparent 59%),
radial-gradient(ellipse at 50% 6%,rgba(255,231,166,.48),transparent 43%)}
.contact-light:before,.contact-light:after{content:"";position:absolute;top:-10%;bottom:25%;width:22%;background:linear-gradient(to bottom,rgba(255,241,199,.24),transparent);filter:blur(16px);transform:skewX(-18deg)}
.contact-light:before{left:24%}.contact-light:after{right:24%;transform:skewX(18deg)}
@media(max-width:900px){.brand{width:94px;height:44px}.section-label{right:6vw;top:4.9rem}.story-grid{grid-template-columns:1fr}.story-arrow{transform:rotate(90deg);text-align:center}.stats{grid-template-columns:repeat(2,1fr)}.hero-logo{width:min(780px,90vw)}}
@media(max-width:620px){.brand{width:86px;height:40px}.section-label{font-size:.74rem}.stats{grid-template-columns:1fr}.hero-content{min-height:68vh}.hero-logo{width:94vw;max-height:210px}.story h2{font-size:2.55rem}.video-frame{width:96vw}}


/* Version 5.2 — refinements based directly on approved Version 5.1 */
.nav{gap:1.35rem;font-size:.66rem;letter-spacing:.11em}
.brand img{filter:brightness(1.28) saturate(1.08) drop-shadow(0 2px 8px rgba(0,0,0,.32))}
.hero-logo{filter:brightness(1.28) saturate(1.08) drop-shadow(0 18px 24px rgba(0,0,0,.34))}
.hero{background:linear-gradient(rgba(20,2,7,.045),rgba(25,2,8,.40)),url('assets/36q-poster.jpg') center center/cover no-repeat}
.hero-overlay{background:radial-gradient(circle at 50% 42%,rgba(255,205,110,.34),transparent 40%),linear-gradient(to bottom,rgba(28,1,8,0),rgba(29,2,9,.48))}
@media(max-width:1100px){.nav{gap:.9rem;font-size:.61rem;letter-spacing:.08em}}
@media(max-width:900px){.nav{font-size:.73rem;letter-spacing:.14em}}

/* Version 5.5 — Page 2 added from Version 1 and expanded to a full page */
.why-now{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(300px,.92fr) minmax(370px,1.08fr);
  gap:7vw;
  align-items:center;
  padding-top:8.5rem;
  padding-bottom:6.5rem;
  background:
    radial-gradient(circle at 24% 44%,rgba(191,24,48,.24),transparent 34%),
    linear-gradient(135deg,#20070c 0%,#4a0b15 48%,#190508 100%);
  overflow:hidden;
}
.why-visual{text-align:center;align-self:center}
.why-heart{
  position:relative;
  width:min(405px,70vw);
  aspect-ratio:1;
  margin:0 auto;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 24px 45px rgba(0,0,0,.35));
}
.why-heart:before{
  content:"";
  position:absolute;
  width:64%;
  height:64%;
  background:linear-gradient(145deg,#f05267,#b70d25 68%);
  transform:rotate(45deg);
  border-radius:22% 0 22% 0;
  box-shadow:0 0 32px rgba(247,71,95,.92),0 0 105px rgba(231,34,62,.72);
}
.why-heart:after{
  content:"";
  position:absolute;
  width:66%;
  height:66%;
  background:radial-gradient(circle at 38% 30%,rgba(255,126,144,.78),rgba(188,11,34,.72));
  clip-path:polygon(50% 88%,12% 51%,7% 38%,8% 25%,15% 14%,27% 8%,39% 11%,50% 24%,61% 11%,73% 8%,85% 14%,92% 25%,93% 38%,88% 51%);
  opacity:.68;
}
.why-heart span{
  position:relative;
  z-index:2;
  color:#fff;
  font-family:Georgia,serif;
  font-size:clamp(6.15rem,12.3vw,9.7rem);
  line-height:1;
  text-shadow:0 0 26px rgba(255,255,255,.9);
}
.why-arrow{
  position:absolute;
  z-index:3;
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:clamp(5.3rem,10.6vw,8.35rem);
  transform:rotate(-8deg);
  text-shadow:0 5px 18px rgba(0,0,0,.4);
}
.why-caption{
  margin:1.1rem auto 0;
  color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.36rem,1.94vw,1.76rem);
  font-style:italic;
}
.why-copy{position:relative;max-width:670px;padding-right:2vw;top:-2.75rem}
.why-copy h2{
  margin:0 0 2rem;
  text-align:left;
  font-size:clamp(2.45rem,4.15vw,4.15rem);
  line-height:1.02;
}
.why-copy>p:not(.section-label){
  max-width:635px;
  margin:0 0 1.3rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.19rem,1.76vw,1.54rem);
  line-height:1.55;
}
.why-copy strong{color:var(--gold);font-weight:600}
@media(max-width:900px){
  .why-now{grid-template-columns:1fr;gap:2.2rem;text-align:center;padding-top:7rem}
  .why-heart{width:min(343px,69vw)}
  .why-copy{max-width:760px;margin:auto;padding-right:0;top:0}
  .why-copy h2{text-align:center}
  .why-copy>p:not(.section-label){margin-left:auto;margin-right:auto}
}
@media(max-width:620px){
  .why-now{padding-top:6.5rem;padding-bottom:4.5rem}
  .why-heart{width:min(264px,70vw)}
  .why-caption{font-size:1.19rem}
  .why-copy h2{font-size:2.42rem}
  .why-copy>p:not(.section-label){font-size:1.1rem}
}

/* Version 5.8 — Page 2 alignment and branded show title */
.why-visual{transform:translateY(-10.5vh)}
.inline-wordmark{display:inline-block;width:4.4em;height:1.35em;object-fit:contain;vertical-align:-0.34em;margin:0 .08em;filter:brightness(1.15) saturate(1.05)}
@media(max-width:900px){.why-visual{transform:translateY(-1.5rem)}}

/* Version 5.12: raise only the Why Now artwork/caption group.
   Uses top instead of transform so the reveal animation cannot cancel it. */
@media (min-width:901px){
  .why-now .why-visual{
    position:relative;
    top:-5rem;
  }
}
@media (max-width:900px){
  .why-now .why-visual{
    position:relative;
    top:-1rem;
  }
}


/* Version 5.13 — Experience 36Q redesign */
.experience-page{
  background:
    radial-gradient(circle at 76% 28%,rgba(137,23,45,.22),transparent 38%),
    linear-gradient(135deg,#120408 0%,#17060b 46%,#0e0306 100%);
  overflow:hidden;
}
.experience-page::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:26%;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.34),transparent);
}
.experience-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(360px,1.08fr) minmax(360px,.92fr);
  gap:6vw;
  align-items:center;
  max-width:1380px;
  min-height:calc(100vh - 14rem);
  margin:0 auto;
  padding-top:1rem;
}
.experience-poster{
  width:min(690px,48vw);
  justify-self:start;
  margin:0;
}
.experience-poster img{
  width:100%;
  max-height:82vh;
  object-fit:contain;
  box-shadow:0 32px 90px rgba(0,0,0,.62);
  border:none;
}
.experience-copy{
  max-width:640px;
  justify-self:end;
  text-align:left;
  padding-top:0.6rem;
}
.experience-copy h2{
  margin:0;
  text-align:left;
  color:var(--gold);
  font-size:clamp(3.5rem,6vw,6.4rem);
  line-height:.9;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.015em;
}
.experience-tagline{
  margin:2rem 0 2.2rem;
  color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.55rem,2.3vw,2.15rem);
  line-height:1.42;
  font-style:italic;
}
.experience-inspiration{
  max-width:590px;
  padding-top:1.5rem;
  border-top:1px solid rgba(215,182,95,.42);
}
.experience-inspiration h3{
  margin:0 0 .7rem;
  color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.55rem,2.2vw,2.05rem);
  font-weight:500;
}
.experience-inspiration p{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.18rem,1.65vw,1.5rem);
  line-height:1.45;
}
@media(max-width:900px){
  .experience-grid{grid-template-columns:1fr;gap:2.5rem;padding-top:2rem;text-align:center}
  .experience-poster{width:min(560px,88vw);justify-self:center;order:1}
  .experience-copy{justify-self:center;text-align:center;padding-top:0;order:2}
  .experience-copy h2{text-align:center;font-size:clamp(3rem,10vw,5rem)}
  .experience-inspiration{margin:0 auto}
}

/* Version 5.16 — Page 4 (The Story) only */
.story .story-grid{
  max-width:1380px;
  gap:1.35rem;
  align-items:stretch;
}
.story .story-card{
  position:relative;
  z-index:1;
  min-height:370px;
  height:100%;
  padding:2.65rem;
  border:1px solid rgba(164,126,45,.46);
  border-top:3px solid #b6943d;
  box-shadow:0 20px 38px rgba(83,48,24,.16);
  isolation:isolate;
}
.story .story-card::after{
  content:"";
  position:absolute;
  inset:10px -10px -10px 10px;
  z-index:-1;
  background:rgba(173,134,56,.20);
  border:1px solid rgba(150,108,31,.28);
}
.story .story-arrow{
  align-self:center;
  font-family:Georgia,serif;
  font-size:2.35rem;
  color:#a5192b;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  transform:scaleX(1.14);
}
@media(max-width:900px){
  .story .story-card{min-height:320px;}
  .story .story-card::after{inset:8px -8px -8px 8px;}
  .story .story-arrow{transform:rotate(90deg) scaleX(1.14);}
}
@media(max-width:620px){
  .story .story-card{min-height:auto;}
}

/* Version 5.17 — Page 4 typography study
   Only The Story cards and The Story global title are affected. */
.story .section-label{
  color:var(--gold) !important;
  font-family:Montserrat,Arial,sans-serif !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  letter-spacing:.25em !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
}

.story .story-card{
  background:linear-gradient(145deg,rgba(83,8,22,.97),rgba(48,5,13,.97)) !important;
  border:1px solid rgba(183,128,70,.72) !important;
  border-top:3px solid var(--gold) !important;
  color:#fff !important;
}

.story .story-card::after{
  background:rgba(92,17,29,.32) !important;
  border:1px solid rgba(143,21,36,.58) !important;
}

.story .story-card h3{
  margin:0 0 1.15rem !important;
  color:var(--gold2) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(1.9rem,2.35vw,2.45rem) !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
  line-height:1.05 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35) !important;
}

.story .story-card p{
  margin:0 !important;
  color:#fffdf8 !important;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif !important;
  font-size:clamp(1.16rem,1.35vw,1.38rem) !important;
  font-weight:400 !important;
  line-height:1.58 !important;
  letter-spacing:.005em !important;
}


/* v5.18 - soften story palette */
.story .story-card{
  background:rgba(255,252,246,.95)!important;
  color:#2f3136!important;
}
.story .story-card h3{
  color:#b38a2e!important;
}
.story .story-card p{
  color:#2f3136!important;
}
.story h2,
.story .question,
.story .story-question{
  color:#2f3136!important;
}
.story .section-label{
  color:#c59a36!important;
}


/* Version 5.19 — final Story-page parchment treatment */
.story .section-label{
  color:#9b6717 !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  font-weight:800 !important;
}

.story h2{
  color:#3b342c !important;
}

.story .matchmaker-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.28em;
}

.story .cupid-mark{
  width:.9em;
  height:.9em;
  object-fit:contain;
  display:inline-block;
  flex:0 0 auto;
  transform:translateY(.04em);
}

.story .story-card{
  background:
    radial-gradient(circle at 18% 22%, rgba(150,108,35,.09) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 66%, rgba(130,90,25,.06) 0 1px, transparent 1.5px),
    linear-gradient(145deg,#fbf1d7 0%,#f2dfae 52%,#ead099 100%) !important;
  background-size:18px 18px,23px 23px,auto !important;
  color:#38332d !important;
  border:1px solid #8e6728 !important;
  border-top:1px solid #8e6728 !important;
  box-shadow:
    inset 0 0 0 4px rgba(251,241,215,.9),
    inset 0 0 0 6px rgba(169,124,49,.62),
    inset 0 0 0 9px rgba(251,241,215,.78),
    0 18px 34px rgba(77,56,27,.15) !important;
}

.story .story-card::before{
  content:"✦";
  position:absolute;
  top:11px;
  left:14px;
  color:rgba(142,103,40,.65);
  font-size:.8rem;
  line-height:1;
}

.story .story-card::after{
  content:"";
  position:absolute;
  inset:10px -10px -10px 10px;
  z-index:-1;
  background:#d8b875 !important;
  border:1px solid rgba(126,88,29,.5) !important;
}

.story .story-card h3{
  color:#9b6717 !important;
  text-shadow:none !important;
}

.story .story-card p{
  color:#38332d !important;
}


/* Version 5.20 — lighter fairytale-book Story cards and clearer title */
.story .section-label{
  color:#7f5410 !important;
  font-weight:800 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}

.story .story-card{
  background:
    linear-gradient(rgba(255,251,238,.94),rgba(255,248,228,.94)),
    repeating-linear-gradient(
      0deg,
      rgba(155,116,52,.035) 0,
      rgba(155,116,52,.035) 1px,
      transparent 1px,
      transparent 4px
    ) !important;
  color:#36312b !important;
  border:1px solid #9d7430 !important;
  border-top:1px solid #9d7430 !important;
  box-shadow:
    inset 0 0 0 3px #fff8e7,
    inset 0 0 0 5px rgba(157,116,48,.72),
    inset 0 0 0 8px #fff8e7,
    inset 0 0 0 10px rgba(157,116,48,.42),
    0 14px 28px rgba(80,56,23,.12) !important;
  overflow:hidden;
}

/* Antique-book corner flourishes */
.story .story-card::before{
  content:"❦";
  position:absolute;
  top:10px;
  left:14px;
  color:rgba(140,99,30,.7);
  font-size:1rem;
  line-height:1;
  transform:rotate(-15deg);
}

.story .story-card .corner-ornament{
  display:none;
}

.story .story-card h3{
  color:#9a6818 !important;
  text-shadow:none !important;
}

.story .story-card p{
  color:#36312b !important;
}

.story .cupid-mark{
  width:1.12em !important;
  height:1.12em !important;
  transform:translateY(.08em) !important;
}


/* v5.21 tweaks */
.story .story-card{
 background:
 linear-gradient(rgba(255,253,245,.98),rgba(255,250,238,.98)) !important;
}
.story .cupid-mark{
 content:url('assets/cupid-gold.png') !important;
 width:1em!important;
 height:1em!important;
}


/* Version 5.23 — Page 6 / The Songs */
#video .section-label{
  color:var(--gold) !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
}

#video .video-thumbnail,
#video .video-card,
#video .video-poster,
#video .song-video{
  position:relative;
}

#video .gold-play-button{
  position:absolute;
  left:50%;
  top:50%;
  width:84px;
  height:84px;
  transform:translate(-50%,-50%);
  border:3px solid var(--gold);
  border-radius:50%;
  background:rgba(20,12,10,.34);
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.25);
  pointer-events:none;
  z-index:4;
}

#video .gold-play-button::before{
  content:"";
  position:absolute;
  left:34px;
  top:25px;
  width:0;
  height:0;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  border-left:24px solid var(--gold);
}

#video .video-caption,
#video .song-caption,
#video .caption{
  margin-top:1rem;
}


/* Version 5.25 — brighten The Songs video image */
#video .video-frame{
  background:
    linear-gradient(rgba(20,2,8,.18),rgba(20,2,8,.28)),
    url('assets/36q-poster.jpg') center/cover !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.42),
    inset 0 0 55px rgba(229,191,91,.08) !important;
}

#video .video-placeholder .play{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 28px rgba(215,182,95,.24),
    0 8px 22px rgba(0,0,0,.24) !important;
}


/* v5.26 subtler cinematic grade */
#video .video-frame{
 background:
 linear-gradient(rgba(20,2,8,.32),rgba(20,2,8,.40)),
 url('assets/36q-poster.jpg') center/cover !important;
}

/* v5.27 restore cinematic texture */
#video .video-frame{
  background:
    linear-gradient(rgba(20,2,8,.38),rgba(20,2,8,.46)),
    url('assets/36q-poster.jpg') center/cover !important;
}


/* Version 5.29 — About Al visible refinements */
#about.about-page-v529 .section-label{
  color:#7a4b08 !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  font-weight:800 !important;
}

#about.about-page-v529 p,
#about.about-page-v529 li,
#about.about-page-v529 .bio-copy,
#about.about-page-v529 .about-copy{
  color:#2f2924 !important;
}

#about.about-page-v529 blockquote,
#about.about-page-v529 .quote,
#about.about-page-v529 .endorsement{
  color:#2a2521 !important;
  margin-top:1.5rem !important;
  margin-bottom:1.5rem !important;
}


/* Version 5.30 — corrected About Al styles */
#about.about-page-v530 .section-label{
  color:#7c4b00 !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  font-weight:800 !important;
}

#about.about-page-v530 .about-copy p{
  color:#211d19 !important;
}

#about.about-page-v530 .about-copy blockquote{
  color:#29231e !important;
  margin-top:2.65rem !important;
  margin-bottom:2.1rem !important;
}

#about.about-page-v530 .about-copy cite{
  color:#4a3c2c !important;
}


/* Version 5.31 — final contact page background only */
#contact.contact-bg-v531{
  background:
    linear-gradient(rgba(54,0,12,.08), rgba(32,0,8,.16)),
    url('assets/contact-background-v531.jpeg') center center / cover no-repeat !important;
}


/* Version 5.32 — prevent contact background from repeating or doubling */
#contact.contact-bg-v531{
  background-image:
    linear-gradient(rgba(54,0,12,.08), rgba(32,0,8,.16)),
    url('assets/contact-background-v531.jpeg') !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}


/* Version 5.33 — clean single contact background */
#contact.contact-bg-v531{
  background:
    linear-gradient(rgba(44,0,10,.03), rgba(28,0,7,.08)),
    url('assets/contact-background-v531.jpeg') center center / cover no-repeat !important;
}

#contact.contact-bg-v531 .contact-light,
#contact.contact-bg-v531 .contact-light::before,
#contact.contact-bg-v531 .contact-light::after{
  background:none !important;
  content:none !important;
  display:none !important;
}


/* Version 5.37 — proportional contact typography increase from Version 5.33 */
#contact .contact-panel h2{
  font-size:clamp(3.15rem,6.3vw,6.3rem) !important;
}

#contact .contact-panel > p{
  font-size:1.60rem !important;
  line-height:1.55 !important;
}

#contact .contact-info strong{
  font-size:2.64rem !important;
}

#contact .contact-info a{
  font-size:1.10rem !important;
}

#contact .contact-info .website{
  font-size:1.10rem !important;
}


/* Version 5.38 — approved poster artwork */
#home.hero{
  background-position:center 36% !important;
}

#world .experience-poster img{
  object-fit:contain !important;
  object-position:center center !important;
}

#video .video-frame{
  background-position:center 42% !important;
}


/* Version 5.42 — keep "A New Musical"; crop only the poster graphics above it */
#home.hero{
  background-position:center calc(50% - 48px) !important;
}


/* Version 5.44 - DEFINITELY larger hero subtitle */
#home .hero-subtitle{
    font-size: 2.15rem !important;
    line-height:1.15 !important;
}
@media (max-width:768px){
  #home .hero-subtitle{
      font-size:1.7rem !important;
  }
}


/* Version 5.47 — Page 3 final positioning */
#world{
  scroll-margin-top:0 !important;
}

#world .experience-grid{
  transform:translateY(-3vh);
}


/* v5.49 Page 5 heading refinement */
#characters h2,
#characters .section-title{
  font-size:0.88em;
  margin-bottom:0.4em;
}
#characters{
  scroll-margin-top:70px;
}


/* v5.50 Page 5 rebalance */
#characters h2,
#characters .section-title{
  font-size:0.96em !important;
  margin-bottom:0.2em !important;
}

#characters .character-card,
#characters .cast-card,
#characters .card{
  transform:scale(0.95);
  transform-origin:top center;
  margin-top:-6px;
  margin-bottom:-6px;
}


/* Version 5.51 — Page 5 structural rebalance */
#characters{
  padding-top:4.5rem !important;
  padding-bottom:3.25rem !important;
  scroll-margin-top:0 !important;
}

#characters > h2{
  font-size:clamp(2.75rem,5vw,4.8rem) !important;
  line-height:1.02 !important;
  margin:0 0 1.6rem !important;
}

#characters .card-grid{
  gap:1rem !important;
  max-width:1180px !important;
  margin:0 auto !important;
}

#characters .character-card{
  min-height:235px !important;
  padding:1.45rem 1.55rem !important;
  transform:none !important;
  margin:0 !important;
}

#characters .character-card h3{
  font-size:2rem !important;
  margin:.35rem 0 !important;
}

#characters .character-card p{
  font-size:.95rem !important;
  line-height:1.42 !important;
}


/* Version 5.52 — Page 5 refined balance */
#characters{
  padding-top:4.1rem !important;
  padding-bottom:3.5rem !important;
}

#characters > h2{
  margin:0 0 2.35rem !important;
}

#characters .card-grid{
  gap:1.15rem !important;
}

#characters .character-card{
  min-height:247px !important;
  padding:1.6rem 1.7rem !important;
}

#characters .character-card h3{
  font-size:2.06rem !important;
}

#characters .character-card p{
  font-size:.98rem !important;
  line-height:1.45 !important;
}


/* v5.53 Page 5 final balance */
#characters{
  padding-top:5.0rem !important;
}

#characters .card-grid{
  gap:1.45rem !important;
  margin-top:.4rem !important;
}

#characters .character-card{
  padding:1.85rem 1.9rem !important;
  min-height:255px !important;
}

#characters .character-card h3{
  margin:.5rem 0 .6rem !important;
}

#characters .character-card p{
  line-height:1.52 !important;
}


/* v5.54 lower overall page composition */
#characters{
  padding-top:6.2rem !important;
  padding-bottom:4.2rem !important;
}

#characters > h2{
  margin-bottom:2.6rem !important;
}

#characters .card-grid{
  margin-top:.8rem !important;
}


/* v5.55 shift entire Page 5 composition downward */
#characters .section-label,
#characters > h2,
#characters .card-grid{
    position: relative;
    top: 20px;
}


/* Version 5.56 — restore Page 5 global title position */
#characters .section-label{
  position:absolute !important;
  top:5.55rem !important;
  right:7vw !important;
  left:auto !important;
  transform:none !important;
  margin:0 !important;
}

/* Keep only the main title and card grid lowered */
#characters > h2,
#characters .card-grid{
  position:relative;
  top:20px;
}

/* v5.57 final nudge downward */
#characters > h2,
#characters .card-grid{
  top:32px !important;
}


/* Version 5.64 — final-page pitch package placement */
#contact .pitch-package-note{
  max-width:720px;
  margin:1.6rem auto .9rem;
  text-align:center;
}

#contact .pitch-package-btn{
  display:inline-block;
  margin-top:.25rem;
}


/* Version 5.65 — final pitch package button */
#contact .pitch-package-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto;
  margin-top:1rem;
  padding:.9rem 1.8rem;
  border-radius:999px;
  text-decoration:none;
}

#contact .pitch-package-btn{
  font-size:.92rem !important;
  padding:.72rem 1.45rem !important;
}


/* Version 5.67 — final Contact page refinements */
#contact .pitch-package-btn{
  font-size:.72rem !important;
  padding:.56rem 1rem !important;
  letter-spacing:.1em !important;
  margin-top:.8rem !important;
  border-radius:999px !important;
}


/* Version 5.75 - contact-page website labels only */
.contact-info .website-label{margin-top:.7rem;color:var(--gold);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1.25}
.contact-info .website-label.personal-site-label{margin-top:.85rem}
.contact-info .website{margin-top:.12rem}


/* =========================================================
   VERSION 5.76 — FINAL MOBILE PRESENTATION POLISH
   Built directly from approved Version 5.75.
   Desktop layout and content remain unchanged.
   ========================================================= */
@media (max-width:620px){

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  /* Thinner phone navigation bar. */
  .site-header{
    height:60px !important;
    padding-left:4.5vw !important;
    padding-right:4.5vw !important;
  }
  .brand{
    width:80px !important;
    height:36px !important;
  }
  .menu-toggle{
    font-size:1.25rem !important;
    line-height:1 !important;
  }
  .nav{
    top:60px !important;
  }

  /* Page 1: dedicated phone artwork, avoiding the source poster's
     duplicated title and printed footer copy. */
  #home.hero{
    min-height:100svh !important;
    background-image:
      linear-gradient(rgba(16,3,7,.10),rgba(20,3,8,.52)),
      url('assets/36q-hero-mobile-v576.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    overflow:hidden !important;
  }
  #home .hero-overlay{
    background:
      radial-gradient(circle at 50% 34%,rgba(255,202,121,.24),transparent 34%),
      linear-gradient(to bottom,rgba(18,2,7,.02),rgba(18,3,7,.58)) !important;
  }
  #home .hero-content{
    min-height:100svh !important;
    width:100% !important;
    max-width:none !important;
    padding:11svh 4vw 7svh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    transform:none !important;
  }
  #home .hero-logo{
    width:min(92vw,430px) !important;
    max-height:none !important;
    margin:0 auto !important;
  }
  #home .hero-subtitle{
    margin:.35rem 0 0 !important;
    font-size:1.5rem !important;
    letter-spacing:.30em !important;
  }
  #home .tagline{
    width:min(91vw,410px) !important;
    margin:1.1rem auto 0 !important;
    font-size:clamp(1.24rem,5.05vw,1.56rem) !important;
    line-height:1.34 !important;
  }

  /* Characters: one readable column with no sideways scrolling. */
  #characters{
    width:100% !important;
    overflow-x:hidden !important;
    padding-left:5vw !important;
    padding-right:5vw !important;
  }
  #characters > h2,
  #characters .card-grid{
    top:18px !important;
  }
  #characters .card-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    gap:1rem !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #characters .character-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:auto !important;
    padding:1.45rem 1.35rem !important;
    box-sizing:border-box !important;
  }
  #characters .character-card p{
    overflow-wrap:anywhere;
  }

  /* Songs: center the video and end the page naturally after its caption. */
  #video.video-page{
    min-height:auto !important;
    padding-top:5.4rem !important;
    padding-bottom:2.6rem !important;
  }
  #video .video-frame{
    display:block !important;
    width:90vw !important;
    max-width:90vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #video .video-caption{
    margin:1rem auto 0 !important;
  }
}


/* =========================================================
   VERSION 5.77 — FINAL MOBILE TOUCH
   Built directly from approved Version 5.76.
   Desktop presentation remains unchanged.
   ========================================================= */
@media (max-width:620px){

  /* Songs page: keep the section label clear of the headline. */
  #video.video-page{
    padding-top:7.2rem !important;
    padding-bottom:2.6rem !important;
  }
  #video .section-label{
    top:4.35rem !important;
    right:5vw !important;
  }
  #video h2{
    width:92vw !important;
    max-width:92vw !important;
    margin:0 auto 2rem !important;
    font-size:clamp(2.15rem,10vw,2.85rem) !important;
    line-height:1.02 !important;
  }

  /* Subtle continuation cue on phone-sized screens.
     Omitted on The Songs page because the next section already appears naturally. */
  #home,
  #why-now,
  #world,
  #story,
  #characters,
  #about,
  #contact{
    position:relative !important;
  }

  #home::after,
  #why-now::after,
  #world::after,
  #story::after,
  #characters::after,
  #about::after,
  #contact::after{
    content:"";
    position:absolute;
    z-index:30;
    left:50%;
    top:calc(100svh - 46px);
    width:13px;
    height:13px;
    transform:translateX(-50%) rotate(45deg);
    border-right:2px solid rgba(223,189,98,.82);
    border-bottom:2px solid rgba(223,189,98,.82);
    pointer-events:none;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.58));
    animation:v577-scroll-cue 2.5s ease-in-out infinite;
  }
}

@keyframes v577-scroll-cue{
  0%,100%{opacity:.36;transform:translate(-50%,0) rotate(45deg)}
  50%{opacity:.82;transform:translate(-50%,5px) rotate(45deg)}
}

@media (prefers-reduced-motion:reduce){
  #home::after,
  #why-now::after,
  #world::after,
  #story::after,
  #characters::after,
  #about::after,
  #contact::after{
    animation:none !important;
  }
}


/* =========================================================
   VERSION 5.78 — SONGS PAGE MOBILE FIX
   Built directly from Version 5.77.
   ========================================================= */
@media (max-width:620px){

  /* Keep the Songs page as a complete phone-height page so the
     About Al section does not appear at its bottom. */
  #video.video-page{
    min-height:100svh !important;
    box-sizing:border-box !important;
    padding-top:7.2rem !important;
    padding-bottom:3.2rem !important;
  }

  /* Include the same subtle continuation cue on the Songs page. */
  #video{
    position:relative !important;
  }

  #video::after{
    content:"";
    position:absolute;
    z-index:30;
    left:50%;
    top:calc(100svh - 46px);
    width:13px;
    height:13px;
    transform:translateX(-50%) rotate(45deg);
    border-right:2px solid rgba(223,189,98,.82);
    border-bottom:2px solid rgba(223,189,98,.82);
    pointer-events:none;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.58));
    animation:v577-scroll-cue 2.5s ease-in-out infinite;
  }
}

@media (max-width:620px) and (prefers-reduced-motion:reduce){
  #video::after{
    animation:none !important;
  }
}


/* =========================================================
   VERSION 5.79 — FINAL MOBILE POLISH
   Built directly from Version 5.78.
   Desktop presentation remains unchanged.
   ========================================================= */
@media (max-width:620px){

  /* Restore the slimmer mobile navigation bar. */
  .site-header{
    height:60px !important;
    padding-left:4.5vw !important;
    padding-right:4.5vw !important;
  }
  .brand{
    width:80px !important;
    height:36px !important;
  }
  .menu-toggle{
    font-size:1.23rem !important;
    line-height:1 !important;
  }
  .nav{
    top:60px !important;
  }

  /* Nudge Page 1 slightly right on phones. */
  #home .hero-content{
    transform:translateX(10px) !important;
  }

  /* Slightly enlarge the Songs video while keeping it centered. */
  #video .video-frame{
    width:94vw !important;
    max-width:94vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Remove continuation cues from all sections first. */
  #home::after,
  #why-now::after,
  #world::after,
  #story::after,
  #characters::after,
  #video::after,
  #about::after,
  #contact::after{
    content:none !important;
    animation:none !important;
  }

  /* Keep subtle down arrows only on Pages 1, 3, 5, 7, and 8. */
  #home,
  #world,
  #characters,
  #about,
  #contact{
    position:relative !important;
  }

  #home::after,
  #world::after,
  #characters::after,
  #about::after,
  #contact::after{
    content:"" !important;
    position:absolute;
    z-index:30;
    left:50%;
    top:calc(100svh - 46px);
    width:13px;
    height:13px;
    transform:translateX(-50%) rotate(45deg);
    border-right:2px solid rgba(223,189,98,.82);
    border-bottom:2px solid rgba(223,189,98,.82);
    pointer-events:none;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.58));
    animation:v579-scroll-cue 2.5s ease-in-out infinite !important;
  }
}

@keyframes v579-scroll-cue{
  0%,100%{opacity:.36;transform:translate(-50%,0) rotate(45deg)}
  50%{opacity:.82;transform:translate(-50%,5px) rotate(45deg)}
}

@media (max-width:620px) and (prefers-reduced-motion:reduce){
  #home::after,
  #world::after,
  #characters::after,
  #about::after,
  #contact::after{
    animation:none !important;
  }
}


/* =========================================================
   VERSION 5.80 — PRECISION MOBILE FIX
   Corrects the three remaining phone issues seen in 5.79.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:620px){

  /* Clearly slimmer phone navigation bar. */
  .site-header{
    height:48px !important;
    min-height:48px !important;
    padding:0 4.25vw !important;
  }
  .brand{
    width:72px !important;
    height:32px !important;
  }
  .menu-toggle{
    font-size:1.08rem !important;
    line-height:1 !important;
    padding:.25rem !important;
  }
  .nav{
    top:48px !important;
  }

  /* Page 1: undo the incorrect content nudge and center the actual
     mobile artwork slightly more accurately within the viewport. */
  #home .hero-content{
    transform:none !important;
  }
  #home.hero{
    background-position:52.5% center !important;
  }

  /* Songs: center relative to the phone viewport, not the padded
     content column, so neither side is clipped. */
  #video .video-frame{
    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:92vw !important;
    max-width:92vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* =========================================================
   VERSION 5.81 — VERIFIED MOBILE ALIGNMENT
   Final overrides based on the actual Version 5.80 HTML/CSS.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:620px){

  /* Make the visible phone header unmistakably slimmer. */
  header.site-header{
    height:40px !important;
    min-height:40px !important;
    padding:0 4vw !important;
  }
  header.site-header .brand{
    width:66px !important;
    height:27px !important;
    display:flex !important;
    align-items:center !important;
  }
  header.site-header .brand img{
    width:100% !important;
    height:auto !important;
    display:block !important;
  }
  header.site-header .menu-toggle{
    font-size:1rem !important;
    line-height:1 !important;
    padding:0 !important;
  }
  header.site-header .nav{
    top:40px !important;
  }

  /* Center the actual Page 1 artwork; remove every prior horizontal nudge. */
  section#home.hero{
    background-position:49% center !important;
  }
  section#home .hero-content{
    transform:none !important;
    left:auto !important;
    right:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Center the Songs video against the physical viewport rather than
     the padded section content box. */
  section#video .video-frame{
    position:relative !important;
    left:auto !important;
    transform:none !important;
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    margin-left:calc(50% - 50vw + 12px) !important;
    margin-right:0 !important;
  }
}


/* =========================================================
   VERSION 5.82 — FINAL VIDEO + MOBILE HERO CONTENT CENTERING
   Built directly from Version 5.81.
   Desktop presentation remains unchanged except for the final video embed.
   ========================================================= */

/* Responsive final YouTube embed. */
.video-frame{
  aspect-ratio:16 / 9;
  overflow:hidden;
}
.video-frame iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* On phones, move only the Page 1 foreground content
   (logo, subtitle, and tagline) slightly to the right.
   The background artwork stays exactly where it is. */
@media (max-width:620px){
  section#home .hero-content{
    transform:translateX(11px) !important;
  }
}


/* =========================================================
   VERSION 5.85 — FINAL MOBILE PAGE 1 CENTERING
   Built directly from Version 5.84.
   Keeps the working YouTube embed unchanged.
   ========================================================= */
@media (max-width:620px){

  /* Remove the prior horizontal offset and center the entire
     foreground block cleanly inside the phone viewport. */
  section#home .hero-content{
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    align-items:center !important;
  }

  section#home .hero-logo,
  section#home .hero-subtitle,
  section#home .tagline{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  section#home .hero-logo{
    width:min(88vw,420px) !important;
  }

  section#home .tagline{
    width:min(88vw,405px) !important;
    max-width:88vw !important;
  }
}


/* =========================================================
   VERSION 5.86 — RAISED MOBILE HERO FOREGROUND
   Uses the approved current Page 1 artwork unchanged.
   Moves only the logo, subtitle, and tagline upward as one unit.
   ========================================================= */
@media (max-width:620px){
  section#home .hero-content{
    transform:translateY(-88px) !important;
  }
}


/* =========================================================
   VERSION 5.90 — MOBILE HERO WITH MORE QUESTION CARDS
   Built directly from the stable Version 5.86.
   Desktop and all other pages remain unchanged.
   ========================================================= */
@media (max-width:620px){
  section#home.hero{
    background-image:
      linear-gradient(rgba(16,3,7,.06),rgba(20,3,8,.38)),
      url('assets/36q-hero-mobile-v590.jpg') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  /* Keep the approved Version 5.86 foreground position exactly. */
  section#home .hero-content{
    transform:translateY(-88px) !important;
  }
}


/* =========================================================
   VERSION 5.91 — FINAL MOBILE FOREGROUND LIFT
   Built directly from Version 5.90.
   Only the Page 1 mobile foreground position changes.
   ========================================================= */
@media (max-width:620px){
  section#home .hero-content{
    transform:translateY(-100px) !important;
  }
}


/* =========================================================
   VERSION 5.93 — PAGE 2 DOWN ARROW FIX
   Built directly from Version 5.91.
   Only adds the existing mobile arrow style to Page 2 (#why-now).
   ========================================================= */
@media (max-width:620px){
  #why-now{
    position:relative !important;
  }

  #why-now::after{
    content:"" !important;
    position:absolute;
    z-index:30;
    left:50%;
    top:calc(100svh - 46px);
    width:13px;
    height:13px;
    transform:translateX(-50%) rotate(45deg);
    border-right:2px solid rgba(223,189,98,.82);
    border-bottom:2px solid rgba(223,189,98,.82);
    pointer-events:none;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.58));
    animation:v579-scroll-cue 2.5s ease-in-out infinite !important;
  }
}

@media (max-width:620px) and (prefers-reduced-motion:reduce){
  #why-now::after{
    animation:none !important;
  }
}