:root{
  --aqua:#2aa8b7; --aqua-bright:#67d7e4; --aqua-mid:#1487a0; --aqua-deep:#0d6f88;
  --ocean:#071b21; --ocean-deep:#031015; --cream:#f8f3d8; --cream-warm:#f4dfb0; --gold:#d4a75d; --gold-deep:#9a6b31;
  --nav-disc:#7fd7e6; --nav-disc-deep:#4ca9ba; --nav-stroke:#08566d; --shell:#79d8e7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,var(--ocean-deep),var(--ocean));color:var(--cream-warm);font-family:Georgia,serif}
a{color:var(--aqua-bright)} a:hover{color:#a8f3ff}
main{overflow:hidden}
.shell{width:min(1400px,92vw);margin:auto}
.eyebrow{font:700 12px/1.2 system-ui;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-warm);opacity:.85;margin:0 0 .8rem}
.section-head{margin-bottom:1.4rem}
.section-head h2,.overview h1{margin:.1rem 0 .7rem;color:var(--cream);font-size:clamp(2rem,2.8vw,3.6rem);line-height:1.02}
.section-head p,.lede,.note p,.character-copy p,.song-grid p,.story-grid li,.timeline p,.support-box p,.support-box li,.audio-copy p{font-size:1.05rem;line-height:1.55}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.stage{position:relative;aspect-ratio:16/9;overflow:hidden;min-height:min(100vh,56.25vw);background:var(--ocean-deep)}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--ocean-deep)}
.light{position:absolute;inset:-20%;opacity:.25;background:repeating-radial-gradient(ellipse at 50% 0,rgba(90,225,255,.16) 0 2%,transparent 3% 7%);mix-blend-mode:screen;animation:drift 9s linear infinite}
.charlotte-wrap{position:absolute;width:34%;right:-38%;top:-9%;opacity:0;filter:drop-shadow(0 18px 14px #0008);pointer-events:none}
.charlotte{display:block;width:100%;height:auto}
.logo{position:absolute;width:47%;left:50%;top:48%;transform:translate(-50%,-50%) scale(.35);opacity:0;border-radius:12px;mix-blend-mode:screen;filter:drop-shadow(0 16px 14px #000b)}
.finished .logo{animation:logo 1s cubic-bezier(.2,1.4,.3,1) forwards}

.start{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#00101870;z-index:18}
.start.hide{display:none}
.start p{font:600 clamp(12px,1.2vw,18px) system-ui;text-transform:uppercase;letter-spacing:.22em}
.start small{display:block;margin-top:1rem}
.start button{position:relative;font-family:Georgia,serif;font-weight:800;font-size:clamp(38px,5.2vw,74px);line-height:.92;letter-spacing:.04em;text-transform:uppercase;padding:.28em 1.05em .24em;background:linear-gradient(180deg,var(--aqua) 0%,var(--aqua-deep) 52%,#084e64 100%);color:var(--cream);border:2px solid #a8e7ef;border-radius:16px;box-shadow:0 10px 0 #083948,0 0 0 2px #0a5e74 inset,0 10px 22px rgba(0,0,0,.35);cursor:pointer;text-shadow:0 1px 0 #fff7,0 2px 0 #6cc9d4,0 3px 0 #0d6174,0 4px 8px rgba(0,0,0,.35);transform:translateY(0) scale(1.04)}
.start button:hover{background:linear-gradient(180deg,var(--aqua-bright) 0%,var(--aqua-mid) 52%,#0a5d74 100%);transform:translateY(1px) scale(1.06)}
.start button:active{transform:translateY(6px) scale(1.03);box-shadow:0 4px 0 #083948,0 0 0 2px #0a5e74 inset,0 8px 16px rgba(0,0,0,.3)}
.start button::before,.start button::after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(188,241,248,.8);width:14px;height:14px;top:18%;opacity:.75}
.start button::before{left:10%;box-shadow:24px 18px 0 -4px rgba(188,241,248,.75)}
.start button::after{right:10%;box-shadow:-26px 20px 0 -5px rgba(188,241,248,.7)}

.controls{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.55rem;z-index:16}
.util-btn{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid rgba(206,241,247,.95);background:radial-gradient(circle at 35% 28%,#d5f7fb 0%,#9fe2ea 24%,var(--shell) 40%,var(--aqua) 62%,var(--aqua-deep) 100%);box-shadow:0 8px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(8,72,89,.35);cursor:pointer;color:#083f52;padding:0}
.util-btn svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(255,255,255,.45))}
.util-btn .tooltip,.sand-nav .tooltip,.hot span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(4,27,34,.92);border:1px solid var(--gold);padding:.22rem .52rem;border-radius:999px;color:var(--cream);font:700 12px system-ui;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
.util-btn .tooltip{bottom:calc(100% + .55rem)}
.util-btn:hover,.util-btn:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.38),0 0 0 3px rgba(167,235,244,.2), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 0 rgba(8,72,89,.35)}
.util-btn:hover .tooltip,.util-btn:focus-visible .tooltip,.util-btn.showtip .tooltip{opacity:1;transform:translateX(-50%) translateY(-2px)}

.stage-nav{position:absolute;left:50%;bottom:4.35rem;transform:translate(-50%,130%);opacity:0;display:grid;grid-template-columns:repeat(3,minmax(78px,96px));gap:1rem 1.25rem;z-index:15;transition:opacity .75s ease, transform .75s ease}
.finished .stage-nav{opacity:1;transform:translate(-50%,0)}
.sand-nav{position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;text-decoration:none;transform:translateZ(0)}
.sd-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 22px rgba(0,0,0,.42))}
.sd-shell{fill:#84d5df;stroke:rgba(233,248,251,.92);stroke-width:1.2;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.sd-petals path{fill:none;stroke:rgba(23,92,108,.24);stroke-width:2.05;stroke-linecap:round}
.sd-dots circle{fill:rgba(245,252,255,.5)}
.icon-hole{fill:#051117;opacity:.95}
.icon-cutout{fill:#84d5df}
.icon-detail{fill:none;stroke:rgba(236,249,251,.62);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.icon-dot{fill:rgba(236,249,251,.68)}
.sand-nav .tooltip{bottom:calc(100% + .55rem)}
.sand-nav:hover,.sand-nav:focus-visible{outline:none;transform:translateY(-4px) scale(1.04)}
.sand-nav:hover .sd-bg,.sand-nav:focus-visible .sd-bg{filter:drop-shadow(0 12px 28px rgba(0,0,0,.46))}
.sand-nav:hover .sd-shell,.sand-nav:focus-visible .sd-shell{fill:#93dfe8}
.sand-nav:hover .tooltip,.sand-nav:focus-visible .tooltip{opacity:1;transform:translateX(-50%) translateY(-2px)}

.hot{position:absolute;width:8.5%;aspect-ratio:1;display:block;border-radius:50%;border:4px solid var(--gold);overflow:visible;opacity:0;transform:scale(.2);box-shadow:0 0 16px color-mix(in srgb,var(--gold) 85%,white);cursor:pointer;text-decoration:none}
.hot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.15)}
.hot::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.35),transparent 42%), radial-gradient(circle at 50% 60%,rgba(50,175,200,.18),transparent 70%);pointer-events:none}
.hot span{bottom:-1.75rem}
.finished .hot{animation:pop .55s cubic-bezier(.3,1.6,.4,1) var(--delay) forwards}
.h1{left:23.8%;top:30.2%;--delay:.1s}.h2{left:32.6%;top:42.1%;--delay:.2s}.h3{left:45.4%;top:37.3%;--delay:.3s}.h4{left:58.4%;top:43.2%;--delay:.4s}.h5{left:66.9%;top:29.3%;--delay:.5s}
.hot:hover,.hot:focus-visible{outline:none;box-shadow:0 0 24px #8ee6ef,0 0 0 3px rgba(255,255,255,.2)}
.hot:hover span,.hot:focus-visible span,.finished .hot span{opacity:1;transform:translateX(-50%) translateY(-2px)}
.stage:not(.finished) .hot span{display:none}
#bubbles span{position:absolute;bottom:-30px;left:var(--x);width:12px;height:12px;border:2px solid #b9efffcc;border-radius:50%;animation:bubble var(--d) linear infinite;animation-delay:var(--delay)}

.overview{display:grid;grid-template-columns:1.35fr 1fr;gap:1.4rem;padding:2.4rem 0 1rem}
.lede{max-width:65ch}
.overview-notes{display:grid;gap:1rem}
.note{background:linear-gradient(180deg,rgba(248,243,216,.10),rgba(248,243,216,.04));border:1px solid rgba(212,167,93,.35);padding:1.1rem;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.note h3{margin:.1rem 0 .45rem;color:var(--cream)}
.content-block{padding:2rem 0}
.audio-feature{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:1rem;margin-bottom:1.2rem;background:linear-gradient(180deg,#fff6de 0%,#ecd6b2 100%);color:#17343c;border:2px solid var(--gold-deep);border-radius:18px;padding:1.15rem 1.2rem;box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55)}
.audio-feature h3{margin:.15rem 0 .4rem;color:var(--aqua-deep)} .audio-player-wrap{display:grid;align-items:center} .audio-player-wrap audio{width:100%}
.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.song-grid article,.story-grid article,.support-box,.character-copy article{background:linear-gradient(180deg,#f7efd9 0%,#e8d7b4 100%);color:#17343c;border:2px solid var(--gold-deep);border-radius:16px;padding:1.2rem 1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55)}
.song-grid h3,.story-grid h3,.character-copy h3,.timeline h3,.support-box h3{margin:.2rem 0 .55rem;color:var(--aqua-deep)}
.song-grid .featured{grid-column:span 3;background:linear-gradient(180deg,#fff6de 0%,#ecd6b2 100%);position:relative}
.song-grid .featured::after{content:"11 o'clock number";position:absolute;right:1rem;top:1rem;background:linear-gradient(180deg,var(--aqua-bright),var(--aqua-deep));color:var(--cream);padding:.25rem .6rem;border-radius:999px;font:700 11px system-ui;text-transform:uppercase;letter-spacing:.08em}
.character-layout{display:grid;grid-template-columns:1.1fr .95fr;gap:1.25rem;align-items:start}
.character-art{margin:0;background:linear-gradient(180deg,rgba(248,243,216,.1),rgba(248,243,216,.04));border:1px solid rgba(212,167,93,.35);border-radius:18px;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.character-art img{display:block;width:100%;border-radius:12px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.profile-grid .wide{grid-column:span 2}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.story-grid ul{margin:.2rem 0 0 1.2rem;padding:0}.story-grid li+li{margin-top:.45rem}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.gallery-grid figure{margin:0;background:linear-gradient(180deg,rgba(248,243,216,.10),rgba(248,243,216,.05));border:1px solid rgba(212,167,93,.35);border-radius:18px;padding:.8rem;box-shadow:0 10px 30px rgba(0,0,0,.18)}.gallery-grid figure:first-child{grid-column:span 3}.gallery-grid img{display:block;width:100%;border-radius:12px}.gallery-grid figcaption{font:600 13px/1.35 system-ui;letter-spacing:.03em;color:var(--cream);padding:.65rem .15rem .1rem}
.timeline{display:grid;gap:1rem}.timeline article{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:start;background:linear-gradient(180deg,rgba(248,243,216,.10),rgba(248,243,216,.04));border:1px solid rgba(212,167,93,.35);padding:1rem 1.1rem;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.18)}.timeline span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,var(--aqua-bright),var(--aqua-deep));color:var(--cream);font:800 24px/1 Georgia,serif;box-shadow:0 0 0 3px rgba(255,255,255,.1)}.support-box ul{margin:.6rem 0 1.2rem 1.2rem;padding:0}.support-box li+li{margin-top:.45rem}.back-top{display:inline-block;background:#06242dcc;color:var(--cream-warm);border:1px solid var(--gold);padding:.55rem .8rem;border-radius:8px;text-decoration:none;font:600 13px system-ui}.back-top:hover{background:linear-gradient(180deg,var(--aqua-mid),var(--aqua-deep));border-color:#8ee6ef;color:var(--cream)}

@keyframes swim{0%{right:-38%;top:-12%;opacity:0;transform:rotate(-10deg) scale(.78)}6%{opacity:1}20%{right:46%;top:-1%;transform:rotate(-5deg) scale(.84)}42%{right:29%;top:7%;transform:rotate(3deg) scale(.88)}64%{right:18%;top:2%;transform:rotate(-2deg) scale(.9)}82%{right:10%;top:8%;transform:rotate(4deg) scale(.9)}100%{right:5%;top:2%;opacity:1;transform:rotate(-1deg) scale(.9)}}
@keyframes logo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes drift{to{transform:translate(8%,5%) rotate(4deg)}}
@keyframes bubble{to{transform:translateY(-110vh) translateX(45px);opacity:0}}

body.intro-active{overflow:hidden}
.stage:not(.finished) .hotspots,.stage:not(.finished) .stage-nav{pointer-events:none}
.stage:not(.finished) .stage-nav{visibility:hidden}
.stage.finished .stage-nav{visibility:visible}

@media(max-width:1100px){.stage-nav{grid-template-columns:repeat(3,minmax(70px,88px));gap:.85rem 1rem}.sand-nav{width:84px;height:84px}}
@media(max-width:1024px){.overview,.character-layout,.story-grid,.audio-feature{grid-template-columns:1fr}.profile-grid,.song-grid,.gallery-grid{grid-template-columns:1fr 1fr}.song-grid .featured,.gallery-grid figure:first-child,.profile-grid .wide{grid-column:span 2}}
@media(max-width:800px){
  .stage{aspect-ratio:9/14;min-height:100vh}
  .bg{object-position:center}
  .charlotte-wrap{width:60%}
  .logo{width:83%;top:52%}
  .shell{width:min(92vw,700px)}
  .stage-nav{bottom:5.6rem;grid-template-columns:repeat(3,70px);gap:.75rem .85rem}
  .sand-nav{width:72px;height:72px}
  .hot{width:14%}.hot span{font-size:11px}
  .overview,.profile-grid,.song-grid,.gallery-grid,.story-grid{grid-template-columns:1fr}
  .song-grid .featured,.gallery-grid figure:first-child,.profile-grid .wide{grid-column:span 1}
  .controls{left:50%;right:auto;transform:translateX(-50%);bottom:1rem;flex-wrap:wrap;justify-content:center}
  .timeline article{grid-template-columns:54px 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0s!important;scroll-behavior:auto!important}.charlotte-wrap{left:61%;right:auto;top:2%;opacity:1;transform:rotate(-1deg) scale(.9)}.logo{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Version 20: dedicated-page structure */
.landing-brief{padding:3rem 0 4rem;text-align:center;max-width:780px}
.landing-brief h1{margin:.15rem 0 .9rem;color:var(--cream);font-size:clamp(2rem,4vw,4rem)}
.landing-brief p{font-size:1.1rem;line-height:1.6}
.small-note{opacity:.7;font-size:.92rem!important}

/* Organic stage placement rather than a button grid */
.stage-nav{display:block;left:0;bottom:0;width:100%;height:100%;transform:none;pointer-events:none}
.finished .stage-nav{transform:none;opacity:1}
.stage-nav .sand-nav{position:absolute;pointer-events:auto}
.stage-nav .sand-nav:nth-child(1){left:12%;top:67%;transform:rotate(-8deg)}
.stage-nav .sand-nav:nth-child(2){left:25%;top:72%;transform:rotate(5deg)}
.stage-nav .sand-nav:nth-child(3){left:39%;top:68%;transform:rotate(-3deg)}
.stage-nav .sand-nav:nth-child(4){right:39%;top:69%;transform:rotate(4deg)}
.stage-nav .sand-nav:nth-child(5){right:24%;top:72%;transform:rotate(-6deg)}
.stage-nav .sand-nav:nth-child(6){right:11%;top:67%;transform:rotate(7deg)}
.stage-nav .sand-nav:hover,.stage-nav .sand-nav:focus-visible{transform:translateY(-5px) scale(1.04) rotate(0)}

.inner-page{min-height:100vh;background:radial-gradient(circle at 50% 0,#0d3a45 0%,var(--ocean) 38%,var(--ocean-deep) 100%)}
.inner-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.75rem 3vw;background:rgba(3,16,21,.94);border-bottom:1px solid rgba(212,167,93,.35);backdrop-filter:blur(12px)}
.mini-logo{display:block;width:170px;flex:0 0 auto}.mini-logo img{display:block;width:100%}
.inner-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}.inner-nav a,.return-stage{background:#06242dcc;color:var(--cream-warm);border:1px solid var(--gold);padding:.55rem .8rem;border-radius:8px;text-decoration:none;font:600 13px system-ui}.inner-nav a:hover,.return-stage:hover{background:linear-gradient(180deg,var(--aqua-mid),var(--aqua-deep));color:var(--cream)}
.inner-main{padding:3rem 0 5rem}.inner-main>h1{margin:.1rem 0 1.8rem;color:var(--cream);font-size:clamp(2.4rem,5vw,5rem);line-height:.95}.return-stage{display:inline-block;margin-top:2rem}

@media(max-width:900px){
  .stage-nav .sand-nav:nth-child(1){left:9%;top:70%}.stage-nav .sand-nav:nth-child(2){left:35%;top:68%}.stage-nav .sand-nav:nth-child(3){right:9%;left:auto;top:70%}.stage-nav .sand-nav:nth-child(4){left:9%;right:auto;top:82%}.stage-nav .sand-nav:nth-child(5){left:35%;right:auto;top:80%}.stage-nav .sand-nav:nth-child(6){right:9%;top:82%}
  .inner-header{align-items:flex-start;flex-direction:column}.inner-nav{margin-left:0}.mini-logo{width:145px}
}



/* Version 26: user-designed sand dollars and smoother underwater Charlotte flight */
.sand-nav{background:none;border:none;border-radius:0;box-shadow:none;width:112px;height:112px}
.sand-nav .sd-img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.sand-nav:hover .sd-img,.sand-nav:focus-visible .sd-img{filter:drop-shadow(0 14px 24px rgba(0,0,0,.42));transform:translateY(-1px) scale(1.01)}
.sand-nav .tooltip{z-index:4}
.util-btn.util-sand{width:66px;height:66px;border:none;border-radius:0;background:none;box-shadow:none;padding:0;overflow:visible;color:inherit}
.util-btn.util-sand .util-img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.36))}
.util-btn.util-sand:hover,.util-btn.util-sand:focus-visible{transform:translateY(-2px);box-shadow:none;background:none}
.util-btn.util-sand:hover .util-img,.util-btn.util-sand:focus-visible .util-img{filter:drop-shadow(0 12px 18px rgba(0,0,0,.42))}
.util-btn.util-sand .tooltip{bottom:calc(100% + .35rem)}

/* Charlotte uses a single CSS animation so the path remains fluid and frame-stable. */
.charlotte-wrap{position:absolute;width:34%;left:108%;right:auto;top:-8%;opacity:0;filter:drop-shadow(0 18px 14px #0008);pointer-events:none;transform-origin:52% 50%;will-change:left,top,transform,opacity}
.charlotte{display:block;width:100%;height:auto}
.playing .charlotte-wrap{animation:charlotteSwim 21.8s cubic-bezier(.38,.02,.24,1) 2.2s forwards}
.finished .charlotte-wrap{left:61%;top:2%;opacity:1;transform:rotate(-1deg) scale(.9)}

@keyframes charlotteSwim{
  0%{left:108%;top:-8%;opacity:0;transform:rotate(-8deg) scale(.78)}
  5%{opacity:1}
  18%{left:58%;top:0%;transform:rotate(-6deg) scale(.84)}
  36%{left:9%;top:13%;transform:rotate(3deg) scale(.88)}
  52%{left:19%;top:28%;transform:rotate(7deg) scale(.9)}
  68%{left:43%;top:17%;transform:rotate(-2deg) scale(.9)}
  84%{left:58%;top:6%;transform:rotate(-4deg) scale(.9)}
  100%{left:61%;top:2%;opacity:1;transform:rotate(-1deg) scale(.9)}
}

/* Sparse bubbles peel away from several points on her body, not one fixed rear emitter. */
.char-bubble{position:absolute;border-radius:50%;border:1.25px solid rgba(201,243,251,.82);background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.58),rgba(150,230,243,.10) 42%,transparent 74%);box-shadow:0 0 4px rgba(111,219,238,.16);opacity:0;transform:translate(0,0) scale(.45);pointer-events:none}
.playing .char-bubble{animation:charBubble 3.7s ease-out infinite}
.finished .char-bubble{display:none}
.char-bubble.b1{width:6px;height:6px;left:28%;top:13%;animation-delay:.25s}
.char-bubble.b2{width:8px;height:8px;left:76%;top:24%;animation-delay:1.35s}
.char-bubble.b3{width:6px;height:6px;left:35%;top:54%;animation-delay:2.15s}
.char-bubble.b4{width:7px;height:7px;left:69%;top:67%;animation-delay:.9s}
.char-bubble.b5{display:none}
@keyframes charBubble{
  0%{opacity:0;transform:translate(0,0) scale(.42)}
  14%{opacity:.5}
  48%{opacity:.34}
  100%{opacity:0;transform:translate(-8px,-22px) scale(.95)}
}

@media(max-width:800px){
  .sand-nav{width:94px;height:94px}
  .util-btn.util-sand{width:58px;height:58px}
  .charlotte-wrap{width:60%}
  .finished .charlotte-wrap{left:37%;top:6%}
  @keyframes charlotteSwim{
    0%{left:108%;top:-5%;opacity:0;transform:rotate(-8deg) scale(.78)}
    5%{opacity:1}
    20%{left:47%;top:5%;transform:rotate(-5deg) scale(.84)}
    39%{left:-14%;top:18%;transform:rotate(4deg) scale(.88)}
    57%{left:3%;top:32%;transform:rotate(6deg) scale(.9)}
    74%{left:25%;top:18%;transform:rotate(-2deg) scale(.9)}
    88%{left:35%;top:8%;transform:rotate(-3deg) scale(.9)}
    100%{left:37%;top:6%;opacity:1;transform:rotate(-1deg) scale(.9)}
  }
}


/* Version 28: theatrical interior-page system */
.inner-page{background:radial-gradient(circle at 15% 0%,rgba(30,112,130,.28),transparent 34%),radial-gradient(circle at 85% 12%,rgba(10,83,102,.24),transparent 30%),linear-gradient(180deg,#061b22 0%,#031116 100%);min-height:100vh}
.theatrical-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.5rem;padding:.55rem 2vw;background:rgba(3,16,21,.94);border-bottom:1px solid rgba(212,167,93,.32);backdrop-filter:blur(14px)}
.theatrical-header .mini-logo{width:150px}
.inner-icon-nav{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;margin-left:auto;overflow-x:auto;padding:.15rem .15rem .35rem}
.inner-icon{position:relative;display:block;flex:0 0 58px;width:58px;height:58px;text-decoration:none;opacity:.72;transition:transform .2s ease,opacity .2s ease}
.inner-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.35))}
.inner-icon span{position:absolute;left:50%;top:calc(100% + .2rem);transform:translateX(-50%);background:rgba(3,16,21,.95);border:1px solid rgba(212,167,93,.6);border-radius:999px;color:var(--cream);padding:.18rem .42rem;font:700 10px/1.2 system-ui;white-space:nowrap;opacity:0;pointer-events:none}
.inner-icon:hover,.inner-icon:focus-visible,.inner-icon.active{opacity:1;transform:translateY(-2px);outline:none}.inner-icon:hover span,.inner-icon:focus-visible span{opacity:1}.inner-icon.active::after{content:"";position:absolute;left:20%;right:20%;bottom:-.35rem;height:2px;background:var(--gold);border-radius:999px;box-shadow:0 0 8px rgba(212,167,93,.55)}
.inner-main{padding:2rem 0 4.5rem}.page-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,300px);align-items:center;gap:2rem;margin:0 0 2rem;padding:1.5rem 1.7rem;border:1px solid rgba(212,167,93,.34);border-radius:22px;background:linear-gradient(135deg,rgba(248,243,216,.09),rgba(42,168,183,.055));box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.page-hero h1{margin:.1rem 0 .65rem;color:var(--cream);font-size:clamp(2.7rem,5.5vw,5.8rem);line-height:.9;letter-spacing:-.025em}.page-hero p:not(.eyebrow){max-width:62ch;margin:.4rem 0 0;font-size:1.12rem;line-height:1.58}.page-hero>img{display:block;width:min(100%,280px);justify-self:end;filter:drop-shadow(0 14px 24px rgba(0,0,0,.32))}.feature-panel{margin-bottom:1rem}
.song-grid article,.story-grid article,.support-box,.character-copy article{transition:transform .18s ease,box-shadow .18s ease}.song-grid article:hover,.story-grid article:hover,.character-copy article:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.55)}
.act-number{font:800 12px/1 system-ui;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .6rem}.scenic-gallery figure{overflow:hidden}.scenic-gallery img{transition:transform .45s ease}.scenic-gallery figure:hover img{transform:scale(1.025)}.development-timeline article{border-left:4px solid var(--aqua-mid)}
.support-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.contact-placeholder{font-style:italic;opacity:.72}.inner-footer{border-top:1px solid rgba(212,167,93,.25);background:rgba(2,12,16,.8)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0 1.2rem}.footer-inner p{margin:0;opacity:.78}.footer-inner .return-stage{margin:0}
@media(max-width:900px){.theatrical-header{align-items:center;flex-direction:row}.theatrical-header .mini-logo{width:120px}.inner-icon-nav{justify-content:flex-start}.inner-icon{flex-basis:50px;width:50px;height:50px}.page-hero{grid-template-columns:1fr}.page-hero>img{justify-self:center;width:min(56vw,240px)}.support-layout{grid-template-columns:1fr}}
@media(max-width:620px){.theatrical-header{display:block;padding:.5rem 3vw}.theatrical-header .mini-logo{width:115px;margin:0 auto .25rem}.inner-icon-nav{justify-content:flex-start;gap:.4rem}.inner-icon{flex-basis:46px;width:46px;height:46px}.page-hero{padding:1.15rem}.page-hero h1{font-size:clamp(2.5rem,13vw,4rem)}.footer-inner{align-items:flex-start;flex-direction:column}}


/* Version 29: corrected icon mapping and resized splash controls */
.sand-nav{width:58px;height:58px}
.util-btn.util-sand{width:44px;height:44px}
.controls{right:1rem;bottom:.7rem;gap:.4rem}
.stage-nav .sand-nav:nth-child(1){left:12%;top:80.6%;transform:rotate(-8deg)}
.stage-nav .sand-nav:nth-child(2){left:25%;top:83.2%;transform:rotate(5deg)}
.stage-nav .sand-nav:nth-child(3){left:38%;top:80.9%;transform:rotate(-3deg)}
.stage-nav .sand-nav:nth-child(4){left:52%;top:80.9%;transform:rotate(4deg)}
.stage-nav .sand-nav:nth-child(5){left:65%;top:83.2%;transform:rotate(-6deg)}
.stage-nav .sand-nav:nth-child(6){left:78%;top:80.6%;transform:rotate(7deg)}
@media(max-width:900px){
  .stage-nav .sand-nav:nth-child(1){left:8%;top:82%}
  .stage-nav .sand-nav:nth-child(2){left:24%;top:86%}
  .stage-nav .sand-nav:nth-child(3){left:40%;top:82%}
  .stage-nav .sand-nav:nth-child(4){left:56%;top:82%}
  .stage-nav .sand-nav:nth-child(5){left:72%;top:86%}
  .stage-nav .sand-nav:nth-child(6){left:86%;top:82%}
}
@media(max-width:800px){
  .sand-nav{width:52px;height:52px}
  .util-btn.util-sand{width:38px;height:38px}
  .stage-nav .sand-nav:nth-child(1){left:6%;top:83%}
  .stage-nav .sand-nav:nth-child(2){left:24%;top:88%}
  .stage-nav .sand-nav:nth-child(3){left:42%;top:83%}
  .stage-nav .sand-nav:nth-child(4){left:60%;top:83%}
  .stage-nav .sand-nav:nth-child(5){left:78%;top:88%}
  .stage-nav .sand-nav:nth-child(6){left:84%;top:83%}
  .controls{bottom:.55rem;right:.7rem;gap:.3rem}
}


/* Version 30: lower navigation row, align with utility controls, lift landing text */
.landing-brief{padding:1.15rem 0 3rem!important;margin-top:-.35rem!important}
.stage-nav .sand-nav{top:auto!important;bottom:.62rem!important}
.stage-nav .sand-nav:nth-child(1){left:10%!important;right:auto!important;transform:rotate(-8deg)!important}
.stage-nav .sand-nav:nth-child(2){left:21.5%!important;right:auto!important;transform:rotate(5deg)!important}
.stage-nav .sand-nav:nth-child(3){left:33%!important;right:auto!important;transform:rotate(-3deg)!important}
.stage-nav .sand-nav:nth-child(4){left:44.5%!important;right:auto!important;transform:rotate(4deg)!important}
.stage-nav .sand-nav:nth-child(5){left:56%!important;right:auto!important;transform:rotate(-6deg)!important}
.stage-nav .sand-nav:nth-child(6){left:67.5%!important;right:auto!important;transform:rotate(7deg)!important}
.controls{bottom:.62rem!important;right:.9rem!important}
@media (max-width: 900px){.stage-nav .sand-nav{bottom:.58rem!important}.stage-nav .sand-nav:nth-child(1){left:6%!important}.stage-nav .sand-nav:nth-child(2){left:19%!important}.stage-nav .sand-nav:nth-child(3){left:32%!important}.stage-nav .sand-nav:nth-child(4){left:45%!important}.stage-nav .sand-nav:nth-child(5){left:58%!important}.stage-nav .sand-nav:nth-child(6){left:71%!important}.controls{right:.6rem!important;bottom:.58rem!important}}
@media (max-width: 640px){.landing-brief{padding:.9rem 0 2.4rem!important}.stage-nav .sand-nav{bottom:.5rem!important}.stage-nav .sand-nav:nth-child(1){left:4%!important}.stage-nav .sand-nav:nth-child(2){left:17%!important}.stage-nav .sand-nav:nth-child(3){left:30%!important}.stage-nav .sand-nav:nth-child(4){left:43%!important}.stage-nav .sand-nav:nth-child(5){left:56%!important}.stage-nav .sand-nav:nth-child(6){left:69%!important}.controls{bottom:.5rem!important;right:.45rem!important}}


/* Version 31: revised homepage invitation */
.landing-brief h1{font-size:clamp(1.9rem,3.35vw,3.5rem);white-space:nowrap}
.landing-brief p{max-width:720px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.landing-brief h1{white-space:normal;font-size:clamp(2rem,9vw,3.25rem)}}


/* Version 34: clean portholes, delayed navigation reveal, centered row layout */
.logo{z-index:17}
.hotspots{z-index:14}
.stage-nav{position:absolute!important;left:50%!important;bottom:1.25rem!important;width:min(460px,62vw)!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:.8rem!important;transform:translate(-50%,18px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.stage.nav-ready .stage-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important;transition:opacity .75s ease,transform .75s ease}
.stage-nav .sand-nav{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;pointer-events:auto!important}
.stage-nav .sand-nav:hover,.stage-nav .sand-nav:focus-visible{transform:translateY(-4px) scale(1.04)!important}
.sand-nav{width:64px!important;height:64px!important}
.util-btn.util-sand{width:42px!important;height:42px!important}
.controls{right:1rem!important;bottom:1rem!important;left:auto!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:.38rem!important;z-index:18}
.hot{opacity:0;transform:scale(.2);pointer-events:none}
.stage.hotspots-ready .hot{animation:pop .55s cubic-bezier(.3,1.6,.4,1) var(--delay) forwards;pointer-events:auto}
.hot:hover span,.hot:focus-visible span{opacity:1;transform:translateX(-50%) translateY(-2px)}
.stage:not(.hotspots-ready) .hot span{display:none}
.stage.finished:not(.nav-ready) .stage-nav,.stage:not(.nav-ready) .stage-nav{pointer-events:none}
.landing-brief{width:min(980px,92vw)!important;max-width:none!important;margin:0 auto!important;padding:1.25rem 0 3rem!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}
.landing-brief .eyebrow,.landing-brief h1,.landing-brief p{width:100%;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
@media (max-width: 900px){
  .stage-nav{width:min(430px,72vw)!important;gap:.65rem!important;bottom:1.05rem!important}
  .sand-nav{width:58px!important;height:58px!important}
  .util-btn.util-sand{width:40px!important;height:40px!important}
}
@media (max-width: 760px){
  .stage-nav{width:min(92vw,420px)!important;flex-wrap:wrap!important;bottom:.8rem!important;row-gap:.45rem!important}
  .sand-nav{width:52px!important;height:52px!important}
  .controls{right:.55rem!important;bottom:.7rem!important;gap:.28rem!important}
  .util-btn.util-sand{width:36px!important;height:36px!important}
  .landing-brief{padding:1rem 0 2.2rem!important}
}

/* Version 34a: prevent early hotspot reveal */
.stage.finished .hot{animation:none!important}
.stage.hotspots-ready .hot{animation:pop .55s cubic-bezier(.3,1.6,.4,1) var(--delay) forwards!important}
.hot span{opacity:0!important;transform:translateX(-50%)!important}
.hot:hover span,.hot:focus-visible span{opacity:1!important;transform:translateX(-50%) translateY(-2px)!important}


/* Version 35: revised opening sequence and corrected final composition */
.logo{z-index:16;mix-blend-mode:normal!important;width:46%;top:48%;opacity:0!important;transform:translate(-50%,-50%) scale(.35)!important}
.stage.logo-ready .logo{animation:logo 1s cubic-bezier(.2,1.4,.3,1) forwards!important}
.stage.finished .logo:not(.logo-ready){opacity:0!important}

.charlotte-wrap{z-index:15}
.stage.finished .charlotte-wrap{left:69%;top:1%;width:29%;opacity:1;transform:rotate(-1deg) scale(.9)}

.portrait-flashes{position:absolute;inset:0;z-index:13;pointer-events:none}
.portrait-flash{position:absolute;display:block;width:8.2%;aspect-ratio:1;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.72);box-shadow:0 0 18px rgba(113,227,243,.55),0 0 0 3px rgba(212,167,93,.8)}
.portrait-flash img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.pf1{left:23.9%;top:30.4%;--flash-delay:5.0s}
.pf2{left:32.8%;top:42.3%;--flash-delay:8.0s}
.pf3{left:45.5%;top:37.5%;--flash-delay:11.2s}
.pf4{left:58.6%;top:43.2%;--flash-delay:14.5s}
.pf5{left:67.1%;top:29.4%;--flash-delay:18.1s}
.stage.playing .portrait-flash{animation:portraitFlash 1.45s ease-in-out var(--flash-delay) both}
.stage.finished .portrait-flash,.stage.logo-ready .portrait-flash{opacity:0!important;animation:none!important}
@keyframes portraitFlash{
  0%{opacity:0;transform:scale(.72)}
  18%{opacity:1;transform:scale(1.02)}
  68%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.82)}
}

.stage-nav{position:absolute!important;left:50%!important;right:auto!important;bottom:1.05rem!important;width:max-content!important;max-width:calc(100% - 190px)!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:.82rem!important;transform:translate(-50%,18px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:18}
.stage.nav-ready .stage-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important;transition:opacity .75s ease,transform .75s ease}
.stage-nav .sand-nav{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
.stage-nav .sand-nav:hover,.stage-nav .sand-nav:focus-visible{transform:translateY(-4px) scale(1.04)!important}
.sand-nav{width:66px!important;height:66px!important}
.controls{right:1rem!important;left:auto!important;bottom:.82rem!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:.36rem!important;z-index:19}
.util-btn.util-sand{width:41px!important;height:41px!important}

.landing-brief{width:min(980px,92vw)!important;max-width:none!important;margin:0 auto!important;padding:1.15rem 0 3rem!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}
.landing-brief .eyebrow,.landing-brief h1,.landing-brief p{width:100%;text-align:center!important;margin-left:auto!important;margin-right:auto!important}

@media(max-width:900px){
  .sand-nav{width:58px!important;height:58px!important}
  .stage-nav{gap:.62rem!important;max-width:calc(100% - 145px)!important}
  .stage.finished .charlotte-wrap{left:62%;top:2%;width:36%}
  .portrait-flash{width:12%}
}
@media(max-width:680px){
  .stage-nav{max-width:82vw!important;flex-wrap:wrap!important;row-gap:.42rem!important;bottom:.68rem!important}
  .sand-nav{width:50px!important;height:50px!important}
  .controls{right:.45rem!important;bottom:.62rem!important;gap:.28rem!important}
  .util-btn.util-sand{width:35px!important;height:35px!important}
  .stage.finished .charlotte-wrap{left:53%;top:4%;width:45%}
  .logo{width:78%!important;top:52%!important}
}


/* Version 37: reveal aligned porthole interiors from a filled duplicate curtain */
.face-reveals{position:absolute;inset:0;z-index:14;pointer-events:none}
.face-reveal{position:absolute;inset:0;background-image:url("assets/faces-open.png");background-size:100% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .18s ease}
.face-reveal.show{opacity:1}
/* ordered roughly along Charlotte's swim path, using the user-supplied filled-curtain layer */
.fr1{clip-path:circle(3.95% at 85.78% 43.72%)}
.fr2{clip-path:circle(3.95% at 76.41% 53.78%)}
.fr3{clip-path:circle(4.35% at 59.85% 48.96%)}
.fr4{clip-path:circle(3.85% at 34.29% 43.36%)}
.fr5{clip-path:circle(4.25% at 40.81% 55.47%)}
.fr6{clip-path:circle(3.85% at 32.31% 70.31%)}
.fr7{clip-path:circle(4.00% at 46.67% 78.65%)}
.fr8{clip-path:circle(4.30% at 68.35% 69.66%)}
.fr9{clip-path:circle(4.00% at 85.13% 67.84%)}
.charlotte-wrap{z-index:15!important}
.logo{z-index:16!important;mix-blend-mode:normal!important}
.portrait-flashes{display:none!important}
.stage-nav{position:absolute!important;left:50%!important;right:auto!important;bottom:1.05rem!important;margin:0!important;width:max-content!important;max-width:none!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:.82rem!important;transform:translate(-50%,18px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.stage.nav-ready .stage-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important;transition:opacity .75s ease,transform .75s ease}
.stage-nav .sand-nav{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
.stage-nav .sand-nav:hover,.stage-nav .sand-nav:focus-visible{transform:translateY(-4px) scale(1.04)!important}
@media(max-width:760px){
  .stage-nav{left:50%!important;width:min(92vw,420px)!important;flex-wrap:wrap!important;row-gap:.42rem!important;bottom:.68rem!important;transform:translate(-50%,18px)!important}
  .stage.nav-ready .stage-nav{transform:translate(-50%,0)!important}
}


/* Version 39: exact porthole reveal alignment, smoother Charlotte finish, centered sand-dollar row */
.stage{position:relative}
.face-reveals{position:absolute;inset:0;z-index:14;pointer-events:none}
.face-reveal{position:absolute;inset:0;background-image:url("assets/faces-open.png");background-size:100% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .16s ease}
.face-reveal.show{opacity:1}
/* Coordinates are taken from the full empty-curtain file so the reveals line up with the built-in portholes. */
.fr1{clip-path:circle(2.8% at 28.75% 35.03%)}
.fr2{clip-path:circle(3.0% at 37.32% 46.14%)}
.fr3{clip-path:circle(3.8% at 49.70% 41.69%)}
.fr4{clip-path:circle(3.1% at 63.04% 45.40%)}
.fr5{clip-path:circle(3.5% at 72.32% 35.66%)}
.fr6{clip-path:circle(2.6% at 26.96% 57.88%)}
.fr7{clip-path:circle(3.1% at 41.73% 66.77%)}
.fr8{clip-path:circle(3.7% at 57.74% 60.42%)}
.fr9{clip-path:circle(2.6% at 71.67% 55.56%)}

.charlotte-wrap{z-index:15!important;width:34%!important;left:108%!important;top:-7%!important;right:auto!important;transform-origin:52% 50%!important;will-change:left,top,transform,opacity}
.playing .charlotte-wrap{animation:charlotteSwimV39 18.8s cubic-bezier(.38,.02,.24,1) 1.2s forwards!important}
.stage.finished .charlotte-wrap{left:67.8%!important;top:1.8%!important;width:34%!important;opacity:1!important;transform:rotate(-1deg) scale(.74)!important}
@keyframes charlotteSwimV39{
  0%{left:108%;top:-7%;opacity:0;transform:rotate(-8deg) scale(.78)}
  5%{opacity:1}
  16%{left:71%;top:2%;transform:rotate(-6deg) scale(.82)}
  32%{left:44%;top:7%;transform:rotate(-3deg) scale(.86)}
  48%{left:17%;top:14%;transform:rotate(2deg) scale(.89)}
  60%{left:10%;top:24%;transform:rotate(5deg) scale(.9)}
  73%{left:31%;top:17%;transform:rotate(1deg) scale(.88)}
  86%{left:56%;top:8%;transform:rotate(-2deg) scale(.82)}
  100%{left:67.8%;top:1.8%;opacity:1;transform:rotate(-1deg) scale(.74)}
}

.stage-nav{left:0!important;right:0!important;bottom:1.05rem!important;width:100%!important;max-width:none!important;justify-content:center!important;transform:translateY(18px)!important;gap:.82rem!important;padding:0 5.5rem!important}
.stage.nav-ready .stage-nav{transform:translateY(0)!important}
.stage-nav .sand-nav{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
.controls{right:1rem!important;bottom:.82rem!important;z-index:19!important}
.landing-brief,.landing-brief .eyebrow,.landing-brief h1,.landing-brief p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}

@media(max-width:900px){
  .stage-nav{padding:0 5rem!important;gap:.65rem!important}
  .stage.finished .charlotte-wrap{left:62.5%!important;top:3%!important;width:38%!important;transform:rotate(-1deg) scale(.78)!important}
}
@media(max-width:760px){
  .stage-nav{padding:0 .5rem!important;bottom:.68rem!important;row-gap:.42rem!important}
  .stage.finished .charlotte-wrap{left:54%!important;top:4%!important;width:46%!important;transform:rotate(-1deg) scale(.82)!important}
}


/* Version 43: preserve v39 portholes; hard JS Charlotte animation; shift nav left */
.charlotte-wrap,.playing .charlotte-wrap,.stage.finished .charlotte-wrap{
  animation:none!important;
  transition:none!important;
}
.stage-nav{
  left:-2.4%!important;
  right:0!important;
  width:100%!important;
  padding-left:5.5rem!important;
  padding-right:5.5rem!important;
}
.stage.nav-ready .stage-nav{transform:translateY(0)!important}
@media(max-width:900px){.stage-nav{left:-2%!important;padding-left:5rem!important;padding-right:5rem!important}}
@media(max-width:760px){.stage-nav{left:-1%!important;padding-left:.5rem!important;padding-right:.5rem!important}}


/* Version 45: center nav row on the curtain midpoint and refine Charlotte path timing */
.charlotte-wrap{width:32% !important}
@media(max-width:800px){.charlotte-wrap{width:56% !important}}

/* Keep the sand-dollar row centered so the gap between buttons 3 and 4 lines up with the center porthole. */
.stage-nav{
  left:50% !important;
  right:auto !important;
  width:max-content !important;
  max-width:none !important;
  padding:0 !important;
  justify-content:center !important;
  transform:translate(-50%,18px) !important;
}
.stage.nav-ready .stage-nav{transform:translate(-50%,0) !important}
@media(max-width:900px){
  .stage-nav{left:50% !important;padding:0 !important;gap:.68rem !important}
}
@media(max-width:760px){
  .stage-nav{left:50% !important;width:min(92vw,420px) !important;max-width:92vw !important;flex-wrap:wrap !important;row-gap:.42rem !important;padding:0 !important}
}

/* Keep logo visible after it pops in. */
.stage.logo-ready .logo,
.stage.nav-ready .logo,
.stage.finished .logo{opacity:1 !important;animation-fill-mode:forwards !important}

/* Fine-tune the one lower-center reveal from v44. */
.fr8{clip-path:circle(3.75% at 57.35% 60.95%) !important}


/* Version 46 refinements */
/* Move the entire sand-dollar row left so the gap between buttons 3 and 4 sits on the stage centerline. */
.stage-nav{
  left: calc(50% - 136px) !important;
  transform: translate(0,18px) !important;
}
.stage.nav-ready .stage-nav{
  transform: translate(0,0) !important;
}
@media (max-width: 1100px){
  .stage-nav{ left: calc(50% - 112px) !important; }
}
@media (max-width: 900px){
  .stage-nav{ left: calc(50% - 88px) !important; }
}
@media (max-width: 760px){
  .stage-nav{
    left: 50% !important;
    transform: translate(-50%,18px) !important;
  }
  .stage.nav-ready .stage-nav{ transform: translate(-50%,0) !important; }
}


/* Version 47: true centered main button row + per-porthole hand-target nudges */
.stage-nav{
  display:grid !important;
  grid-template-columns:repeat(6, max-content) !important;
  column-gap:.82rem !important;
  row-gap:0 !important;
  width:max-content !important;
  max-width:none !important;
  left:50% !important;
  right:auto !important;
  padding:0 !important;
  justify-content:center !important;
  align-items:center !important;
  transform:translate(-50%,18px) !important;
}
.stage.nav-ready .stage-nav{transform:translate(-50%,0) !important}
.stage-nav .sand-nav{margin:0 !important}
@media (max-width:900px){
  .stage-nav{column-gap:.68rem !important}
}
@media (max-width:760px){
  .stage-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    width:min(92vw,420px) !important;
    max-width:92vw !important;
    row-gap:.42rem !important;
    column-gap:0 !important;
    left:50% !important;
    transform:translate(-50%,18px) !important;
  }
  .stage.nav-ready .stage-nav{transform:translate(-50%,0) !important}
}


/* Version 49 micro-adjustments */
.stage-nav{left:calc(50% - 30px) !important; transform:translate(-50%,18px) !important;}
.stage.nav-ready .stage-nav{transform:translate(-50%,0) !important;}
@media (max-width: 900px){ .stage-nav{left:calc(50% - 21px) !important;} }
@media (max-width: 760px){ .stage-nav{left:50% !important; transform:translate(-50%,18px) !important;} .stage.nav-ready .stage-nav{transform:translate(-50%,0) !important;} }


/* Version 54: set lightbox, concept disclaimer, community room, and contact details */
.concept-note,.comment-status{margin:0 0 1.2rem;padding:1rem 1.15rem;border:1px solid rgba(212,167,93,.46);border-radius:14px;background:rgba(248,243,216,.09);font-size:1rem;line-height:1.55}
.gallery-instruction{margin:.2rem 0 1rem;text-align:center;font-style:italic;opacity:.85}
.gallery-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:inherit;overflow:hidden}
.gallery-open:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:4px}
.gallery-open img{display:block;width:100%;height:auto}
.image-lightbox{width:min(94vw,1320px);max-height:94vh;padding:3.2rem 1rem 1rem;border:1px solid rgba(212,167,93,.7);border-radius:18px;background:#031116;color:var(--cream);box-shadow:0 24px 80px rgba(0,0,0,.7)}
.image-lightbox::backdrop{background:rgba(0,8,12,.88);backdrop-filter:blur(5px)}
.image-lightbox img{display:block;max-width:100%;max-height:78vh;margin:auto;object-fit:contain;border-radius:10px}
.image-lightbox p{text-align:center;margin:.8rem 0 0;font-size:1.05rem}
.lightbox-close{position:absolute;right:.75rem;top:.55rem;width:42px;height:42px;border:1px solid rgba(212,167,93,.7);border-radius:50%;background:#082832;color:var(--cream);font-size:2rem;line-height:1;cursor:pointer}

.community-room{margin:2.2rem 0 0;padding:1.4rem;border:1px solid rgba(212,167,93,.38);border-radius:20px;background:linear-gradient(180deg,rgba(248,243,216,.08),rgba(42,168,183,.035));box-shadow:0 18px 42px rgba(0,0,0,.24)}
.community-room-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,520px);gap:1.5rem;align-items:end;margin-bottom:1rem}
.community-room-head h2{margin:.1rem 0;color:var(--cream);font-size:clamp(2rem,4vw,3.4rem)}
.community-room-head>p{margin:0;line-height:1.55}
.comment-form{display:grid;grid-template-columns:1fr;gap:.55rem;margin:1.1rem 0 1.5rem;padding:1.1rem;border-radius:16px;background:linear-gradient(180deg,#f7efd9 0%,#e8d7b4 100%);color:#17343c;border:2px solid var(--gold-deep)}
.comment-form label{font-weight:700}
.comment-form input,.comment-form textarea{width:100%;border:1px solid #a78655;border-radius:9px;padding:.8rem;font:inherit;color:#17343c;background:#fffdf6}
.comment-form textarea{resize:vertical}
.comment-form-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.comment-form-actions span{font:600 12px system-ui;opacity:.72}
.comment-form button{border:0;border-radius:999px;padding:.7rem 1.15rem;background:var(--aqua-deep);color:white;font-weight:800;cursor:pointer}
.comment-form button:hover{background:var(--aqua-mid)}
.comment-stream{display:grid;gap:.85rem}
.empty-comments{margin:.3rem 0;text-align:center;font-style:italic;opacity:.72}
.comment-card{padding:1rem 1.1rem;border:1px solid rgba(212,167,93,.34);border-radius:14px;background:rgba(3,16,21,.72)}
.comment-card p{margin:.65rem 0 0;white-space:pre-wrap;line-height:1.55}
.comment-meta{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.comment-meta time{font:600 11px system-ui;opacity:.65}
.project-email a{display:inline-block;font-size:clamp(1rem,2vw,1.25rem);font-weight:700;word-break:break-word}

@media(max-width:760px){
  .community-room{padding:1rem}
  .community-room-head{grid-template-columns:1fr;gap:.45rem}
  .comment-meta{align-items:flex-start;flex-direction:column;gap:.25rem}
  .image-lightbox{padding:3.1rem .55rem .75rem}
}


/* Version 56: minimal opening copy; instruction appears with the sand dollars */
.landing-brief .sand-dollar-instruction{
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
  margin-bottom:.55rem!important;
  font-size:clamp(10px,1vw,12px)!important;
  letter-spacing:.16em!important;
}
body.site-ready .landing-brief .sand-dollar-instruction{
  opacity:.88;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .7s ease, transform .7s ease;
}


/* Version 57: score divided by act */
.score-act{margin:2.25rem 0 3rem}
.act-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid rgba(212,167,93,.45)}
.act-heading h2{margin:0;color:var(--cream);font-size:clamp(1.8rem,3.4vw,3rem)}
.act-heading .eyebrow{margin:0 0 .2rem}
.act-two-grid{grid-template-columns:1fr}
.act-two-grid .featured{grid-column:1!important}
.creative-credits{margin:2rem 0 0;padding:1rem 1.2rem;border-left:4px solid var(--gold-deep);background:rgba(248,243,216,.08);border-radius:0 12px 12px 0}
.creative-credits p{margin:0;line-height:1.6}
@media(max-width:620px){.act-heading{display:block}.act-heading h2{margin-top:.25rem}}

/* Version 58: expanded character gallery */
.character-intro{margin-bottom:1.2rem;padding:1rem 1.2rem;border:1px solid rgba(212,167,93,.38);border-radius:16px;background:rgba(248,243,216,.07)}
.character-intro p{margin:.25rem 0;line-height:1.55}
.character-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.character-card{display:grid;grid-template-columns:clamp(150px,31%,215px) minmax(0,1fr);gap:1rem;align-items:start;padding:1rem;border:2px solid var(--gold-deep);border-radius:18px;background:linear-gradient(180deg,#f7efd9 0%,#e8d7b4 100%);color:#17343c;box-shadow:0 10px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.58)}
.character-card h2{margin:.05rem 0 .15rem;color:var(--aqua-deep);font-size:clamp(1.45rem,2.2vw,2rem)}
.character-card p{margin:.55rem 0 0;line-height:1.48}
.character-meta{margin:.1rem 0 .65rem!important;color:#76501f;font:800 .76rem/1.35 system-ui;letter-spacing:.06em;text-transform:uppercase}
.character-portrait{aspect-ratio:4/5;background:#dec79d}
.character-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:12px;transition:transform .35s ease}
.character-portrait:hover img{transform:scale(1.025)}
.temporary-art-note{font-style:italic;font-size:.92rem;color:#654b35}
@media(max-width:1050px){.character-gallery{grid-template-columns:1fr}}
@media(max-width:620px){.character-card{grid-template-columns:1fr}.character-portrait{width:min(78%,260px);margin:0 auto}.character-card h2{text-align:center}.character-meta{text-align:center}}

/* Version 62 score presentation */
.album-note{max-width:900px;margin:0 auto 2.2rem;padding:1rem 1.25rem;border:1px solid rgba(224,191,116,.42);background:rgba(10,42,53,.62);border-radius:14px;color:#e8dfc7}.song-list{display:grid;gap:1.35rem}.song-card{display:grid;grid-template-columns:72px 1fr;gap:1.2rem;padding:1.4rem;border:1px solid rgba(219,185,107,.38);border-radius:18px;background:linear-gradient(145deg,rgba(7,40,51,.94),rgba(14,66,75,.82));box-shadow:0 14px 34px rgba(0,0,0,.24)}.song-number{font-family:Georgia,serif;font-size:2rem;color:#d9b96c;opacity:.8;border-right:1px solid rgba(217,185,108,.3)}.song-content h3{margin:.1rem 0 .45rem;font-size:clamp(1.45rem,2.4vw,2rem);color:#fff4d5}.song-performers{margin:0;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#9fd4d3}.song-synopsis{max-width:880px;color:#e6e4dc;line-height:1.65}.song-card audio{width:100%;margin:.7rem 0 .9rem}.lyrics{border-top:1px solid rgba(255,255,255,.14);padding-top:.8rem}.lyrics summary{cursor:pointer;color:#f1d68e;font-weight:700;letter-spacing:.03em}.lyrics pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.65;color:#f5f0e4;background:rgba(0,0,0,.18);padding:1.1rem;border-radius:12px;margin-top:.9rem}.curtain-call .song-card{background:linear-gradient(145deg,rgba(57,20,31,.94),rgba(13,57,66,.9))}@media(max-width:650px){.song-card{grid-template-columns:1fr}.song-number{border-right:0;border-bottom:1px solid rgba(217,185,108,.3);padding-bottom:.35rem}}


/* Bandcamp concept-album player */
.bandcamp-album{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(350px,1.2fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  margin:2rem 0 3.5rem;
  padding:clamp(1.25rem,3vw,2.25rem);
  border:1px solid rgba(220,180,91,.45);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(5,30,40,.96),rgba(8,51,62,.88));
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.bandcamp-copy{position:sticky;top:1.5rem}
.bandcamp-copy h2{margin:.2rem 0 1rem}
.bandcamp-copy p:not(.eyebrow){line-height:1.65}
.bandcamp-purchase{
  display:inline-block;
  margin-top:.75rem;
  padding:.8rem 1.15rem;
  border:1px solid #dcb45b;
  border-radius:999px;
  color:#fff6d5;
  text-decoration:none;
  font-weight:700;
  background:rgba(220,180,91,.12);
}
.bandcamp-purchase:hover,.bandcamp-purchase:focus-visible{background:rgba(220,180,91,.24)}
.bandcamp-frame{display:flex;justify-content:center;min-width:0}
.bandcamp-frame iframe{display:block;margin:0 auto;background:#fff;border-radius:8px}
.song-card .lyrics{margin-top:.8rem}
@media (max-width:820px){
  .bandcamp-album{grid-template-columns:1fr}
  .bandcamp-copy{position:static}
}
@media (max-width:420px){
  .bandcamp-album{padding:1rem}
  .bandcamp-frame{margin-inline:-.35rem}
}