:root { color-scheme: dark; --gold: #ffe266; --cream: #fffbed; }
* { box-sizing: border-box; }
body { margin: 0; background: #180e27; color: var(--cream); font-family: Inter, sans-serif; min-height: 100svh; height: 100svh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
a { color: inherit; text-decoration: none; }
.masthead { padding: clamp(12px,2.5vh,24px) 4vw; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font: 800 clamp(15px,1.5vw,22px) Poppins, sans-serif; letter-spacing: .02em; }
.brand span { color: var(--gold); }
.brand small { display: block; font: 500 7px Inter, sans-serif; letter-spacing: .25em; margin-top: 5px; }
.masthead p { font-size: 12px; color: #bfb9ca; margin:0; }
.masthead p span { color: white; }
.contact { font-size: 12px; border-bottom: 1px solid #847d8b; padding: 8px 0; }
.contact span { margin-left: 12px; }
.portal { position: relative; min-height: 0; overflow: hidden; isolation:isolate; }
.world { position: absolute; inset: 0; overflow: hidden; }
.world--song { clip-path: polygon(0 0,57% 0,43% 100%,0 100%); z-index:2; }
.world--christmas { clip-path: polygon(57% 0,100% 0,100% 100%,43% 100%); }
.world__image,.world__shade { position:absolute; inset:0; pointer-events:none; }
.world--song .world__image { left:0; width:57%; height:100%; object-fit:cover; object-position:center 24%; }
.world--christmas .world__image { left:43%; width:57%; height:100%; object-fit:cover; object-position:66% 38%; }
.world--song .world__shade { background: linear-gradient(0deg,#2c0752f5 0%,#32094c99 43%,#30096300 88%); }
.world--christmas .world__shade { background: linear-gradient(0deg,#8b0628f5 0%,#790b2199 42%,#26130900 80%); }
.world__copy { position:absolute; bottom:8%; width:40%; left:4vw; z-index:3; }
.world--christmas .world__copy { left:58%; width:38%; }
.eyebrow { font-size:clamp(8px,.75vw,11px); letter-spacing:.13em; text-transform:uppercase; font-weight:700; margin:0 0 12px; }
.tiny-star { font-size:17px; margin-right:5px; color:#ffe369; display:inline-block; }
h1,h2 { margin:0; font:800 clamp(30px,4.3vw,76px)/1.02 Poppins,sans-serif; letter-spacing:-.055em; text-shadow:0 3px 22px #22021855; }
h1 span,h2 span { display:block; font-size:.4em; color:#ffe259; letter-spacing:.01em; margin-bottom:8px; }
h1 small,h2 small { display:block; font-size:.54em; letter-spacing:-.025em; margin-top:7px; }
h2 { color:#fffbed; }
h2 small { color:#ffe48b; }
.description { font-size:clamp(12px,1.05vw,17px); line-height:1.6; margin:clamp(12px,2.2vh,24px) 0; }
.show-button { display:inline-flex; gap:24px; align-items:center; justify-content:space-between; padding:clamp(14px,2.2vh,21px) clamp(18px,2vw,32px); border-radius:100px; font-size:clamp(12px,1.15vw,17px); font-weight:800; background:#ffe150; color:#321244; border:2px solid #fff1a3; box-shadow:0 6px 0 #b98a13,0 10px 34px #ffcf4e55; transition:transform .2s,box-shadow .2s; position:relative; overflow:hidden; }
.show-button span { font-size:24px; line-height:1; }
.world--christmas .show-button { color:#950d2c; background:#fff2bf; border-color:#fff; box-shadow:0 6px 0 #d89737,0 10px 42px #ffd55277; }
.show-button:hover { transform:translateY(-4px) scale(1.035); box-shadow:0 9px 0 #b98a13,0 16px 50px #ffdd5477; }
.show-button:active { transform:translateY(3px); }
.detail { font-size:8px; letter-spacing:.11em; margin:22px 0 0; display:flex; gap:8px; align-items:center; }
.detail i { width:3px; height:3px; border-radius:50%; background:var(--gold); }
.world__number { display:none; }
.seam { position:absolute; inset:0; background:white; clip-path:polygon(calc(57% - 2px) 0,calc(57% + 2px) 0,calc(43% + 2px) 100%,calc(43% - 2px) 100%); pointer-events:none; z-index:5; }
.world::after { content:''; position:absolute; inset:-12%; pointer-events:none; z-index:2; background-image:radial-gradient(ellipse, #ffe67e 0 2px, transparent 3px),radial-gradient(ellipse, #fff9d5 0 1px, transparent 3px),radial-gradient(ellipse, #ffcb54 0 2px, transparent 3px); background-size:139px 181px,223px 257px,317px 227px; opacity:.5; }
.motion-toggle { position:absolute; right:14px; bottom:10px; z-index:6; color:white; background:#200d20a6; border:1px solid #ffffff66; border-radius:20px; padding:5px 10px; font:10px Inter,sans-serif; cursor:pointer; }
footer { padding:12px 4vw; display:flex; justify-content:space-between; gap:16px; color:#c2b7ce; font-size:10px; }
footer strong { font-weight:500; color:#fff; }
.skip { position:absolute; top:-100px; z-index:9; background:white; color:black; padding:15px; }
.skip:focus { top:0; }
:focus-visible { outline:3px solid white; outline-offset:5px; }
@keyframes party-drift { from { transform:translate3d(0,-3%,0) rotate(-2deg); } to { transform:translate3d(2%,8%,0) rotate(2deg); } }
@keyframes party-zoom { from { transform:scale(1); } to { transform:scale(1.065); } }
@keyframes star-dance { 50% { transform:rotate(35deg) scale(1.25); } }
@keyframes button-shine { 0%,65% { transform:translateX(-180%) skew(-25deg); } 100% { transform:translateX(450%) skew(-25deg); } }
@media(prefers-reduced-motion:no-preference) {
  .world::after { animation:party-drift 7s ease-in-out infinite alternate; }
  .world__image { animation:party-zoom 14s ease-in-out infinite alternate; }
  .tiny-star { animation:star-dance 4s ease-in-out infinite; }
  .show-button::after { content:''; position:absolute; top:-20%; bottom:-20%; width:30%; left:0; background:linear-gradient(90deg,transparent,#ffffff99,transparent); animation:button-shine 5s ease-in-out infinite; }
  .motion-paused *, .motion-paused *::after { animation-play-state:paused!important; }
}
@media(max-height:680px) and (min-width:761px) {
  .world__copy { bottom:8%; }
  h1,h2 { font-size:clamp(30px,6vh,55px); }
  .detail { display:none; }
  .description { margin:12px 0; }
  .eyebrow { margin-bottom:8px; }
}
@media(max-width:760px) {
  .masthead { padding:12px 5vw; }
  .masthead p { display:none; }
  .brand { font-size:15px; }
  .brand small { font-size:5px; }
  .contact { font-size:10px; }
  .world--song { clip-path:polygon(0 0,100% 0,100% 46%,0 54%); }
  .world--christmas { clip-path:polygon(0 54%,100% 46%,100% 100%,0 100%); }
  .world--song .world__image { top:0; bottom:auto; width:100%; height:54%; object-position:center 34%; }
  .world--christmas .world__image { left:0; top:46%; width:100%; height:54%; object-position:65% 38%; }
  .world--song .world__shade { bottom:46%; background:linear-gradient(90deg,#3b0c61d9,#3b0c6155 70%,transparent); }
  .world--christmas .world__shade { top:46%; background:linear-gradient(90deg,#8b0628e6,#8b062866 75%,transparent); }
  .world__copy { left:6vw; width:88%; bottom:auto; top:5%; }
  .world--christmas .world__copy { left:6vw; width:88%; top:auto; bottom:5%; }
  h1,h2 { font-size:clamp(26px,4.3svh,46px); }
  h1 span,h2 span { font-size:.4em; margin-bottom:4px; }
  h1 small,h2 small { margin-top:3px; }
  .eyebrow { font-size:8px; margin-bottom:7px; }
  .tiny-star { font-size:12px; }
  .description { font-size:11px; line-height:1.4; margin:10px 0; }
  .description br { display:none; }
  .show-button { padding:11px 18px; font-size:11px; gap:20px; box-shadow:0 4px 0 #b98a13,0 10px 34px #ffcf4e55; }
  .show-button span { font-size:18px; }
  .detail { display:none; }
  .seam { clip-path:polygon(0 calc(54% - 2px),100% calc(46% - 2px),100% calc(46% + 2px),0 calc(54% + 2px)); }
  footer { padding:8px 5vw; font-size:8px; }
  footer>span { display:none; }
  .motion-toggle { font-size:8px; bottom:5px; right:6px; }
}
@media(max-width:760px) and (max-height:650px) {
  .eyebrow,.description { display:none; }
  .show-button { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .show-button:hover { transform:none; }
  .motion-toggle { display:none; }
}

/* The page heading is part of the visible brand; each show has an h2. */
.brand .site-heading { margin:0; font:inherit; letter-spacing:inherit; line-height:1.1; text-shadow:none; }
.brand .site-heading small { font:500 7px Inter,sans-serif; letter-spacing:.2em; color:var(--cream); margin-top:5px; }
.world--song h2 small { color:var(--cream); }
@media(max-width:760px) { .brand .site-heading small { font-size:5px; } }