*{box-sizing:border-box}
:root{
  --pink:#e65d80;--pink-soft:#ffd9e4;
  --blue:#6f7fd6;--blue-soft:#dde2fb;
  --amber:#eda23c;--amber-soft:#ffe4b3;
  --lilac:#b98fd1;--lilac-soft:#f2e2f8;
  --moss:#8aab5c;--moss-soft:#e6efd4;
}
html{scroll-behavior:smooth}
body{margin:0;background:#fff3ee;color:#25252b;font-family:"DM Sans",sans-serif;overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.progress{height:3px;position:fixed;top:0;left:0;right:0;z-index:30}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--amber),var(--moss),var(--blue),var(--lilac))}
.nav{height:76px;padding:0 6vw;position:fixed;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;justify-content:space-between;background:rgba(255,244,238,.8);backdrop-filter:blur(16px);border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--pink),var(--amber),var(--moss),var(--blue),var(--lilac)) 1}
.brand{font-family:Manrope;text-decoration:none;color:#25252b;font-weight:800;font-size:20px;letter-spacing:-1px}
.brand span{font-size:13px;letter-spacing:3px;background:linear-gradient(100deg,var(--pink),var(--amber),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand i{font-style:normal;color:#e65d80;margin-left:4px}
nav{display:flex;gap:32px}
nav a{color:#555;text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;transition:.25s}
nav a:hover{color:#e65d80}
.nav-menu{display:none;border:0;background:none}
.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:52% 48%;align-items:center;padding:110px 8vw 60px;overflow:hidden;background:radial-gradient(circle at 80% 40%,#f7c9d6 0%,transparent 55%),radial-gradient(circle at 5% 90%,var(--blue-soft) 0%,transparent 45%),radial-gradient(circle at 20% 0%,var(--amber-soft) 0%,transparent 42%),linear-gradient(165deg,#fff3ee 0%,#ffe9ce 100%)}
.hero-copy{position:relative;z-index:3;max-width:670px}
.eyebrow,.kicker,.section-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:#8a878c}
.eyebrow span{display:inline-block;width:30px;height:1px;background:#e65d80;vertical-align:middle;margin-right:12px}
.hero h1{font:800 clamp(72px,9.5vw,148px)/.82 Manrope;letter-spacing:-8px;margin:25px 0 34px}
.hero h1 em,.story-title span,.members-head h2 span{font-style:normal;background:linear-gradient(100deg,var(--pink),var(--amber) 60%,var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;line-height:1.65;color:#6e6a70;max-width:500px}
.hero-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.pill-button{display:inline-flex;align-items:center;gap:24px;margin-top:0;padding:15px 20px;border:2px solid var(--pink);border-radius:100px;text-decoration:none;color:#25252b;font-weight:700;font-size:12px;transition:.3s;background:linear-gradient(180deg,#fff,#fff) padding-box,linear-gradient(120deg,var(--pink),var(--amber)) border-box}
.pill-button:hover{background:linear-gradient(120deg,var(--pink),var(--amber));border-color:transparent;color:white;transform:translateY(-3px);box-shadow:0 12px 30px #e65d8040}
.pill-button b{font-size:17px;font-weight:400}
.watch-button{background:linear-gradient(120deg,var(--blue),var(--lilac));border-color:transparent;color:#fff}
.watch-button:hover{background:linear-gradient(120deg,var(--lilac),var(--blue));box-shadow:0 12px 30px #6f7fd645}
.watch-button b{font-size:13px}
.hero-stage{height:100%;position:relative;min-height:500px}
.sun{width:390px;height:390px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-35%,-50%);background:linear-gradient(145deg,#f7c48a,#ef7fa0 45%,#e0648f);box-shadow:0 35px 90px #e65d8045,0 0 0 18px #ffffff30}
.stage-line{position:absolute;left:10%;right:-15%;bottom:17%;height:1px;background:#ffffff90;transform:rotate(-8deg)}
.hero-band{position:absolute;bottom:10%;left:20%;width:60%;max-width:520px;animation:float 5s ease-in-out infinite}
.band-img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 45px #55223635)}
.music-note{position:absolute;font-size:42px;color:#fff;z-index:2;animation:drift 5s ease-in-out infinite}
.n1{top:28%;left:18%;color:#fff}
.n2{top:18%;right:18%;animation-delay:1s;color:var(--amber-soft)}
.n3{bottom:33%;right:6%;animation-delay:2s;color:var(--lilac-soft)}
.scroll-cue{position:absolute;bottom:30px;left:8vw;font-size:9px;letter-spacing:2px;color:#999;display:flex;align-items:center;gap:12px}
.scroll-cue span{height:30px;width:1px;background:#e65d80}
.hero-orbit{position:absolute;border:1px solid #e65d8030;border-radius:50%;pointer-events:none}
.orbit-a{width:650px;height:650px;right:-260px;top:13%;animation:spin 30s linear infinite}
.orbit-b{width:800px;height:800px;right:-335px;top:3%;border-style:dashed;border-color:#6f7fd640;animation:spin 45s linear infinite reverse}
.section{padding:150px 8vw;position:relative}
.section-label{margin-bottom:85px}
.story{background:#25252b;color:#f9f7f2}
.story .section-label{color:#aaa}
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw}
.story-title h2,.members-head h2{font:800 clamp(45px,6vw,84px)/.95 Manrope;letter-spacing:-4px;margin:14px 0}
.kicker{color:#e65d80}
.story-text{max-width:550px;color:#c5c2c4;font-size:16px;line-height:1.8;padding-top:10px}
.story-text strong{color:#fff}
.quote{margin-top:45px;border-left:2px solid #e65d80;padding:10px 0 10px 22px;color:#fff;font:700 19px Manrope}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:130px;border-top:1px solid #ffffff20;padding-top:28px}
.timeline span{display:block;color:#e65d80;font-size:10px;margin-bottom:38px}
.timeline div:nth-child(1) span{color:var(--pink)}
.timeline div:nth-child(2) span{color:var(--amber)}
.timeline div:nth-child(3) span{color:var(--blue)}
.timeline div:nth-child(4) span{color:var(--moss)}
.timeline b{display:block;font:700 16px Manrope;margin-bottom:8px}
.timeline small{color:#8e8b8d;line-height:1.5}
.members{background:linear-gradient(160deg,#dfe3fa 0%,#f2e5f4 45%,#ffe9ce 100%)}
.members-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:65px}
.members-head>p{max-width:340px;color:#777;line-height:1.7;font-size:14px}
.member-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.member-card{min-height:360px;background:#fffdfb;border-radius:24px;padding:20px;display:grid;grid-template-columns:42% 58%;overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;border:2px solid transparent}
.member-card[data-color=yui]{background:linear-gradient(155deg,#fff,var(--pink-soft) 130%);border-color:#f6c3d2}
.member-card[data-color=mio]{background:linear-gradient(155deg,#fff,var(--blue-soft) 130%);border-color:#c7cdf2}
.member-card[data-color=ritsu]{background:linear-gradient(155deg,#fff,var(--amber-soft) 130%);border-color:#f6d19b}
.member-card[data-color=mugi]{background:linear-gradient(155deg,#fff,var(--lilac-soft) 130%);border-color:#e2c3ee}
.member-card[data-color=azusa]{background:linear-gradient(155deg,#fff,var(--moss-soft) 130%);border-color:#c9d9ac}
.member-card:hover{transform:translateY(-9px);box-shadow:0 25px 50px #4c394018}
.member-card[data-color=yui]:hover{box-shadow:0 25px 50px #e65d8030}
.member-card[data-color=mio]:hover{box-shadow:0 25px 50px #6f7fd630}
.member-card[data-color=ritsu]:hover{box-shadow:0 25px 50px #eda23c30}
.member-card[data-color=mugi]:hover{box-shadow:0 25px 50px #b98fd130}
.member-card[data-color=azusa]:hover{box-shadow:0 25px 50px #8aab5c30}
.member-card:last-child{grid-column:1/-1;grid-template-columns:28% 72%}
.portrait{border-radius:18px;position:relative;overflow:hidden;aspect-ratio:1/1;min-height:0;background:linear-gradient(145deg,#f0d6de,#f8eee9)}
.portrait-img{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover}

.face{width:150px;height:180px;border-radius:48% 48% 43% 43%;background:#f0c3a9;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center;font:800 35px Manrope;color:#fff;box-shadow:0 10px 30px #47312a20}
.hair{position:absolute;width:205px;height:220px;border-radius:50%;left:50%;top:28px;transform:translateX(-50%);z-index:1}
.face{z-index:2}
.instrument{position:absolute;z-index:3;bottom:14px;right:17px;font-size:36px;color:#fff}
.member-card[data-color=yui] .hair{background:#d26d8d}
.member-card[data-color=mio] .hair{background:#626b9c}
.member-card[data-color=ritsu] .hair{background:#d18b4d}
.member-card[data-color=mugi] .hair{background:#ad91b1}
.member-card[data-color=azusa] .hair{background:#7e8e62}
.member-card[data-color=mio] .portrait{background:linear-gradient(145deg,#d7d9e9,#f2eaf0)}
.member-card[data-color=ritsu] .portrait{background:linear-gradient(145deg,#f0dcc8,#f7efe8)}
.member-card[data-color=mugi] .portrait{background:linear-gradient(145deg,#e8dbe8,#f8edf1)}
.member-card[data-color=azusa] .portrait{background:linear-gradient(145deg,#dce2d0,#f2eee6)}
.member-info{padding:30px 30px 20px;position:relative}
.number{font-size:10px;color:#aaa;letter-spacing:2px}
.member-info h3{font:800 clamp(27px,3vw,42px)/1 Manrope;letter-spacing:-2px;margin:30px 0 7px}
.member-info p{color:#e65d80;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.member-card[data-color=yui] .member-info p{color:var(--pink)}
.member-card[data-color=mio] .member-info p{color:var(--blue)}
.member-card[data-color=ritsu] .member-info p{color:var(--amber)}
.member-card[data-color=mugi] .member-info p{color:var(--lilac)}
.member-card[data-color=azusa] .member-info p{color:var(--moss)}
.member-info small{display:block;color:#777;line-height:1.7;font-size:13px;max-width:430px;margin-top:35px}
.philosophy{min-height:700px;display:grid;place-items:center;text-align:center;overflow:hidden;background:linear-gradient(125deg,#e0648f 0%,#e65d80 45%,#d97fae 75%,#b98fd1 100%);color:#fff}
.big-note{font-size:320px;line-height:1;position:absolute;opacity:.1;right:2%;top:0;transform:rotate(12deg);font-family:serif}
.philosophy .kicker{color:#ffdbe4}
.philosophy-copy{position:relative;z-index:2;max-width:800px}
.philosophy h2{font:800 clamp(48px,7vw,100px)/.9 Manrope;letter-spacing:-5px;margin:20px 0}
.philosophy h2 span{color:#25252b}
.philosophy-copy>p:last-child{max-width:570px;margin:35px auto 0;line-height:1.8;color:#ffe7ed}
.music{background:linear-gradient(160deg,#dcecdc 0%,#dde6f7 55%,#f2e5f4 100%)}
.music-panel{display:grid;grid-template-columns:40% 60%;background:#25252b;color:#fff;border-radius:30px;overflow:hidden;min-height:430px}
.vinyl{display:grid;place-items:center;background:radial-gradient(circle,#e65d80 0 13%,#25252b 13.5% 16%,#35353b 16.5% 100%);box-shadow:inset 0 0 0 3px var(--pink),inset 0 0 0 6px var(--amber),inset 0 0 0 9px var(--moss);position:relative}
.vinyl:before{content:"";width:280px;height:280px;border-radius:50%;background:repeating-radial-gradient(circle,#222 0 2px,#2d2d32 3px 5px);box-shadow:0 25px 55px #0007}
.vinyl-center{position:absolute;width:75px;height:75px;border-radius:50%;background:#e65d80;display:grid;place-items:center;font:800 14px Manrope;letter-spacing:2px}
.track-meta{padding:70px;display:flex;flex-direction:column;justify-content:center}
.track-meta h2{font:800 clamp(35px,4vw,58px) Manrope;letter-spacing:-3px;margin:12px 0}
.track-meta p{color:#aaa;line-height:1.7;font-size:13px;max-width:500px}
.track-meta code{color:#f4a5b8}
.controls{display:flex;align-items:center;gap:18px;margin-top:30px}
.play{width:52px;height:52px;border-radius:50%;border:0;background:#e65d80;color:white;cursor:pointer;font-size:16px;transition:.25s}
.play:hover{transform:scale(1.08)}
.wave{display:flex;align-items:center;gap:3px;flex:1;height:40px}
.wave i{display:block;width:3px;height:12px;background:#e65d80;border-radius:4px;opacity:.75}
.wave i:nth-child(5n+1){background:var(--pink)}
.wave i:nth-child(5n+2){background:var(--amber)}
.wave i:nth-child(5n+3){background:var(--moss)}
.wave i:nth-child(5n+4){background:var(--blue)}
.wave i:nth-child(5n+5){background:var(--lilac)}
.wave i:nth-child(2){height:25px}
.wave i:nth-child(3){height:18px}
.wave i:nth-child(4){height:31px}
.wave i:nth-child(5){height:15px}
.wave i:nth-child(6){height:28px}
.wave i:nth-child(7){height:20px}
.wave i:nth-child(8){height:34px}
.wave i:nth-child(9){height:17px}
.wave i:nth-child(10){height:26px}
.wave i:nth-child(11){height:12px}
.playing .wave i{animation:bars .8s ease-in-out infinite alternate}
.playing .wave i:nth-child(2n){animation-delay:.2s}
.playing .wave i:nth-child(3n){animation-delay:.4s}
.controls #time{font-size:10px;color:#aaa;letter-spacing:1px}
.cta{padding:170px 8vw;background:linear-gradient(160deg,#ffe9ce 0%,#ffe0e8 100%);text-align:center}
.small-flag{display:inline-grid;place-items:center;width:54px;height:54px;border:1px solid #e65d80;border-radius:50%;font:800 11px Manrope;color:#e65d80;letter-spacing:2px}
.cta h2{font:800 clamp(60px,9vw,130px)/.85 Manrope;letter-spacing:-7px;margin:30px 0}
.cta h2 em{font-style:normal;background:linear-gradient(100deg,var(--pink),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta p{color:#888}
footer{background:#25252b;color:#fff;padding:55px 8vw 150px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:30px;position:relative}
footer:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pink),var(--amber),var(--moss),var(--blue),var(--lilac))}
.footer-brand{font:800 18px Manrope}
.footer-brand span{color:#e65d80}
.footer-contact{display:flex;flex-direction:column;gap:9px}
.footer-contact span{font-size:9px;color:#777;letter-spacing:2px}
.footer-contact a{color:#fff;text-decoration:none;font-size:13px}
.footer-end{text-align:right;color:#666;font-size:10px}
.reveal{opacity:0;transform:translateY(45px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-8deg)}
50%{transform:translateY(-25px) rotate(8deg)}
}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes bars{to{transform:scaleY(.45)}
}
@media(max-width:850px){.nav{height:65px}
.nav nav{display:none}
.nav-menu{display:flex;flex-direction:column;gap:5px}
.nav-menu span{width:23px;height:1px;background:#25252b}
.hero{display:block;padding-top:145px}
.hero-stage{height:420px;margin-top:20px}
.sun{width:330px;height:330px}
.hero-band{left:22%;bottom:12%;width:56%}
.hero h1{letter-spacing:-5px}
.section{padding:105px 7vw}
.story-grid,.music-panel{grid-template-columns:1fr}
.story-text{padding-top:0}
.timeline{grid-template-columns:1fr 1fr;margin-top:75px}
.members-head{display:block}
.members-head>p{margin-top:25px}
.member-list{grid-template-columns:1fr}
.member-card:last-child{grid-column:auto;grid-template-columns:42% 58%}
.music-panel{min-height:700px}
.vinyl{min-height:310px}
.track-meta{padding:45px 35px}
footer{grid-template-columns:1fr}
.footer-end{text-align:left}
.cta h2{letter-spacing:-4px}
.scroll-cue{display:none}
}
@media(max-width:560px){.hero{padding-left:6vw;padding-right:6vw}
.hero h1{font-size:68px}
.hero-stage{min-height:350px}
.sun{width:260px;height:260px}
.hero-band{left:16%;bottom:10%;width:66%}
.member-card,.member-card:last-child{grid-template-columns:1fr;padding:12px}
.member-info{padding:24px 15px}
.member-info h3{margin-top:20px}
.timeline{grid-template-columns:1fr}
.music-panel{border-radius:20px}
.track-meta{padding:35px 25px}
.wave{display:none}
}



/* MAXIMALIST K-ON! ARCHIVE */
body{background:#fff9f5}

body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 8% 15%,var(--pink-soft) 0 8%,transparent 26%),radial-gradient(circle at 92% 12%,var(--amber-soft) 0 9%,transparent 27%),radial-gradient(circle at 90% 75%,var(--blue-soft) 0 10%,transparent 28%),radial-gradient(circle at 6% 82%,var(--moss-soft) 0 9%,transparent 26%),radial-gradient(circle at 50% 45%,var(--lilac-soft) 0 7%,transparent 22%)}

.photo-wall{padding:135px 4vw 160px;background:#f7e9ec;position:relative;overflow:hidden}

.photo-wall:before,.photo-wall:after{content:"♪ ♫ ♬";position:absolute;color:#e65d8022;font:800 130px Manrope;letter-spacing:40px;white-space:nowrap;transform:rotate(-8deg)}
.photo-wall:after{color:#6f7fd622}

.photo-wall:before{top:30px;left:-40px}
.photo-wall:after{bottom:30px;right:-80px;transform:rotate(8deg)}

.wall-heading{display:flex;justify-content:space-between;align-items:end;max-width:1400px;margin:0 auto 65px;padding:0 2vw;position:relative;z-index:2}

.wall-heading>span{font-size:10px;letter-spacing:3px;font-weight:800;color:#a86c7c}

.wall-heading h2{font:800 clamp(48px,7vw,100px)/.86 Manrope;letter-spacing:-6px;margin:0;text-align:right}

.wall-heading h2 em{font-style:normal;background:linear-gradient(100deg,var(--pink),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Masonry: columns size themselves to whatever each photo's real
   aspect ratio is, so mixed portrait/landscape/square images (and
   mixed jpg/png/gif) never fight a fixed grid again. */
.photo-grid{
    max-width:1450px;
    margin:0 auto;
    column-count:4;
    column-gap:14px;
}

.photo-tile{
    display:inline-block;
    width:100%;
    margin:0 0 14px;
    break-inside:avoid;
    position:relative;
    overflow:hidden;
    border-radius:9px;
    background:#ded3d5;
    box-shadow:0 18px 35px #62313c18;
    transform:rotate(var(--r,0deg));
    transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,border-color .3s;
    border:3px solid var(--pink);
}
.photo-tile:nth-child(5n+1){border-color:var(--pink)}
.photo-tile:nth-child(5n+2){border-color:var(--amber)}
.photo-tile:nth-child(5n+3){border-color:var(--moss)}
.photo-tile:nth-child(5n+4){border-color:var(--blue)}
.photo-tile:nth-child(5n+5){border-color:var(--lilac)}

.photo-tile:nth-child(3n){--r:1.2deg}
.photo-tile:nth-child(4n){--r:-1.3deg}
.photo-tile:nth-child(7n){--r:.5deg}

.photo-tile:hover{z-index:5;transform:rotate(0) scale(1.045) translateY(-7px);box-shadow:0 30px 60px #62313c35}

.photo-tile img{width:100%;height:auto;display:block;filter:saturate(1.08) contrast(1.02);transition:transform .7s,filter .4s}

.photo-tile:hover img{transform:scale(1.07);filter:saturate(1.25)}

.photo-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,20,25,.6),transparent 50%);pointer-events:none}

.photo-tile figcaption{position:absolute;z-index:2;left:15px;bottom:13px;color:#fff;font:700 10px Manrope;letter-spacing:1.5px;text-transform:uppercase}

.photo-tile figcaption span{color:#ffb7c9;margin-left:5px}

.photo-tile img:not([src$=".jpg"]){background:#eadcdf}

.sticky-player{position:fixed;z-index:40;left:50%;bottom:18px;transform:translateX(-50%);width:min(820px,calc(100vw - 28px));min-height:68px;background:rgba(35,33,38,.94);backdrop-filter:blur(18px);border:1px solid #ffffff1a;border-radius:18px;box-shadow:0 18px 60px #21131d40;color:white;display:flex;align-items:center;gap:10px;padding:10px 13px}

.sticky-disc{width:45px;height:45px;border-radius:50%;flex:none;background:repeating-radial-gradient(circle,#202025 0 2px,#36363c 3px 4px);display:grid;place-items:center;box-shadow:0 5px 18px #0005}

.sticky-disc span{width:17px;height:17px;border-radius:50%;background:#e65d80;display:grid;place-items:center;font-size:8px}

.sticky-now{min-width:0;flex:1;padding:0 7px}
.sticky-now small{display:block;color:#e98ca4;font-size:7px;letter-spacing:2px;font-weight:800;margin-bottom:4px}
.sticky-now strong{display:block;font:700 12px Manrope;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sticky-player button{width:34px;height:34px;border:0;border-radius:50%;background:#ffffff12;color:white;cursor:pointer;font-size:14px;transition:.2s}
.sticky-player button:hover{background:#e65d80;transform:scale(1.06)}

.sticky-player #stickyPlay{background:#e65d80}

.volume-wrap{display:flex;align-items:center;gap:7px;margin-left:5px}
.volume-wrap span{font-size:7px;letter-spacing:1px;color:#888}
.volume-wrap input{accent-color:#e65d80;width:75px}

.skip{font-size:22px!important}
.sticky-player.playing .sticky-disc{animation:spin 7s linear infinite}


/* Side characters — fixed cutouts that drift/bob as the page scrolls.
   Hidden until a real image is dropped into assets/characters/, so the
   layout never shows a broken-image icon. */
.side-characters{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}

.side-slot{position:absolute;top:50%;height:80vh;transition:transform .55s cubic-bezier(.3,.9,.25,1);will-change:transform}

.side-slot.left{left:clamp(-40px,-3vw,0px);transform-origin:left center}

.side-slot.right{right:clamp(-40px,-3vw,0px);transform-origin:right center}

.side-char{display:block;height:100%;width:auto;max-width:46vw;object-fit:contain;filter:drop-shadow(0 30px 40px #62313c35)}

.side-char.img-missing{display:none}

@media(max-width:1200px){.side-characters{display:none}
}

@media(max-width:1050px){.photo-grid{column-count:3}
}

@media(max-width:850px){.photo-grid{column-count:2}
.wall-heading{display:block}
.wall-heading h2{text-align:left;margin-top:25px}
.sticky-player{bottom:10px}
.volume-wrap{display:none}
}

@media(max-width:560px){.photo-wall{padding-left:4vw;padding-right:4vw}
.photo-grid{column-count:2;column-gap:9px}
.photo-tile{margin-bottom:9px}
.sticky-player{gap:6px;padding:8px}
.sticky-disc{width:39px;height:39px}
.sticky-player button{width:31px;height:31px}
.sticky-now{padding:0 3px}
.photo-tile figcaption{font-size:8px;left:9px;bottom:8px}
}