:root{--black:#0b0e0d;--cream:#f4f1e8;--gold:#e3bf68;--line:#9c7938}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:1rem}body{margin:0;background:var(--black);color:var(--cream);font-family:"Noto Serif JP",serif;letter-spacing:.065em}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}.skip{position:fixed;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:white;color:black;padding:1rem}header{height:clamp(72px,9.15vw,104px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);position:relative;z-index:20;background:linear-gradient(115deg,#080b0a,#111513)}.logo{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(23px,4.08vw,45px);font-weight:600;line-height:1.1;letter-spacing:-.065em;text-decoration:none}.logo em{color:var(--gold);font-style:normal}.menu-button{width:44px;height:44px;padding:5px 2px;display:flex;flex-direction:column;justify-content:center;gap:9px;background:none;border:0;color:var(--cream);cursor:pointer}.menu-button i{display:block;height:2px;background:currentColor;width:100%}nav{position:absolute;z-index:30;top:clamp(72px,9.15vw,104px);right:0;width:min(420px,100%);padding:32px 40px;background:#0b0e0df5;border:1px solid var(--line);border-right:0}nav:not([hidden]){display:flex;flex-direction:column;gap:22px}nav a{font-family:"Bodoni Moda",serif;font-size:26px;text-decoration:none}nav a:hover{color:var(--gold)}.hero{height:60.25vw;max-height:780px;min-height:475px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero-photo{position:absolute;inset:0;background:url("assets/ssb-stage-hero.avif") center 54%/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#090d0cfb 0%,#090d0cec 24%,#090d0c7a 43%,transparent 66%),linear-gradient(0deg,#080b0c 0%,transparent 27%)}.hero-copy{position:absolute;left:5.2%;top:10.4%;width:59%}h1,h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:600;letter-spacing:-.06em;line-height:.91;margin:0}h1{font-size:clamp(60px,8.6vw,108px)}h1 em,h2 em{color:var(--gold);font-style:normal}.rule{display:block;width:57px;height:2px;background:var(--gold);margin:20px 0}.genre{letter-spacing:.42em;font-size:clamp(14px,2vw,24px);margin:15px 0 18px}.lead{font-size:clamp(23px,3.25vw,38px);line-height:1.55;margin:22px 0}.gold-button{border:1px solid #dfb453;background:linear-gradient(110deg,#d5ac58,#f3d58b 46%,#b98c3d);color:#100d06;font-size:clamp(17px,2.45vw,27px);font-weight:600;letter-spacing:.1em;width:max-content;min-width:265px;min-height:55px;padding:10px 26px;display:flex;align-items:center;justify-content:center;gap:22px;text-decoration:none;cursor:pointer;box-shadow:0 7px 20px #0002}.gold-button span{font-size:1.5em;font-weight:400;line-height:1}.gold-button:hover{filter:brightness(1.12)}.gold-button:focus-visible,.menu-button:focus-visible,a:focus-visible,.social-icon:focus-visible{outline:2px solid var(--cream);outline-offset:5px}.about,.next,.contact{position:relative;overflow:hidden}.about{height:37.1vw;max-height:470px;min-height:290px;border-bottom:1px solid var(--line)}.section-copy{position:relative;z-index:2;padding:5.1% 5.2%;pointer-events:none}.section-copy a,.section-copy button{pointer-events:auto}h2{font-size:clamp(49px,7.75vw,90px)}.section-copy p{font-size:clamp(20px,3.3vw,35px);line-height:1.55;margin:23px 0 0}.crop{overflow:hidden;position:relative}.crop img{position:absolute;display:block;max-width:none;width:calc(787 / var(--w) * 100%);height:auto;left:calc(-1 * var(--x) / var(--w) * 100%);top:calc(-1 * var(--y) / var(--h) * 100%)}.about-photo{position:absolute;right:0;top:0;width:55.53%;height:100%}.section-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0e0d 0%,#0b0e0df0 29%,#0b0e0d80 46%,transparent 64%)}.about .section-copy p{max-width:55%}.next{height:35.45vw;max-height:420px;min-height:275px;background:#f1ece2;color:#0d0d0a}.next-photo{position:absolute;right:0;top:0;width:46.63%;height:100%}.next-shade{position:absolute;inset:0;background:linear-gradient(90deg,#f2eee5 0%,#f2eee5f2 37%,#f2eee59c 65%,#f2eee51a 100%)}.next .section-copy{padding-top:4.7%}.next h2 em{color:#a98232}.next .rule{background:#ae8732;margin-top:22px;margin-bottom:18px}.next .coming{font-size:clamp(18px,2.6vw,28px);letter-spacing:.36em;margin:0 0 25px 6.5%}.next .gold-button{min-width:310px}.moments{padding:0 0 3.1%;border-bottom:1px solid var(--line)}.moments h2{font-size:clamp(40px,6.9vw,80px);height:11.35vw;max-height:134px;min-height:85px;display:flex;align-items:center;gap:.23em;padding:0 5.2%;white-space:nowrap;letter-spacing:-.045em}.heading-line{display:block;background:var(--gold);height:2px;width:7%;margin-left:1.5%;flex-shrink:0}.stage-photo{aspect-ratio:787/222}.gallery{display:grid;grid-template-columns:217fr 194fr 373fr;gap:2px;margin-top:2.5%;border-top:1px solid #79602c;border-bottom:1px solid #79602c}.gallery>.crop{aspect-ratio:217/188}.gallery>.crop:nth-child(2){aspect-ratio:194/188}.gallery>.crop:nth-child(3){aspect-ratio:373/188}.contact{height:28.2vw;max-height:365px;min-height:225px;border-bottom:1px solid var(--line)}.contact-photo{position:absolute;top:0;right:0;width:46.63%;height:100%}.contact .section-copy{padding-top:3.3%}.contact h2{font-size:clamp(48px,7.3vw,86px)}.contact .rule{margin:16px 0}.contact .section-copy p{font-size:clamp(17px,2.65vw,29px);margin:17px 0}.contact .gold-button{min-width:255px}.contact .section-shade{background:linear-gradient(90deg,#0b0e0d 0%,#0b0e0df5 33%,#0b0e0da0 50%,transparent 75%)}footer{height:14vw;max-height:180px;min-height:108px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#090c0b,#111513)}footer .logo{font-size:clamp(20px,3.5vw,38px)}.footer-actions{display:flex;gap:24px;align-items:center}.social-icon{border:0;background:none;color:var(--cream);padding:0;width:30px;height:36px;cursor:pointer}.social-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}.footer-divider{width:1px;height:45px;background:var(--gold)}.footer-menu{width:35px}dialog{background:#101613;color:var(--cream);border:1px solid var(--gold);max-width:min(90vw,520px);padding:42px 30px;line-height:1.9}dialog::backdrop{background:#000b}dialog a{color:var(--gold)}.close-notice{position:absolute;right:10px;top:4px;border:0;background:none;color:var(--cream);font-size:30px;cursor:pointer}
@media(min-width:1200px){.hero-copy{top:9%}.hero .gold-button{margin-top:28px}.about .section-copy{padding-top:4.2%}.next .section-copy{padding-top:3.7%}.contact .section-copy{padding-top:2.8%}}
@media(max-width:600px){header{height:68px;padding:0 5%}.logo{font-size:24px;max-width:290px}header .logo{font-size:25px;line-height:.95;max-width:265px}header .logo em{white-space:nowrap}.menu-button{width:37px;flex-shrink:0}nav{top:68px}.hero{height:610px;min-height:0}.hero-photo{background-position:61% center}.hero-shade{background:linear-gradient(90deg,#090d0cf0 0%,#090d0ccc 28%,#090d0c30 76%),linear-gradient(0deg,#080b0c 0%,transparent 40%)}.hero-copy{top:9%;width:90%}h1{font-size:clamp(54px,12.2vw,73px)}.genre{font-size:15px;margin-top:18px}.lead{font-size:26px;margin:26px 0}.gold-button{min-width:245px;min-height:54px;font-size:18px}.about{height:320px;min-height:0}.about-photo{width:65%;height:100%}.crop.about-photo img{width:calc(787 / 437 * 100%)}.about .section-copy{padding-top:36px}.about h2{font-size:47px}.about .section-copy p{font-size:20px;max-width:85%;line-height:1.75;margin-top:24px}.section-shade{background:linear-gradient(90deg,#0b0e0d 0%,#0b0e0de0 27%,#0b0e0d50 65%,transparent)}.next{height:300px;min-height:0}.next-photo{width:60%;height:100%;opacity:.7}.next .section-copy{padding-top:34px}.next h2{font-size:48px}.next .coming{font-size:18px;margin:0 0 24px 4%;letter-spacing:.28em}.next .gold-button{min-width:270px}.next-shade{background:linear-gradient(90deg,#f2eee5 0%,#f2eee5ed 35%,#f2eee59c 75%,#f2eee51a)}.moments h2{height:84px;min-height:0;font-size:clamp(29px,7vw,43px);padding:0 5%;gap:.2em}.stage-photo{aspect-ratio:787/280}.stage-photo img{top:calc(-1207 / 222 * 100%);height:calc(1998 / 222 * 100%);object-fit:fill}.gallery{margin-top:12px}.gallery>.crop,.gallery>.crop:nth-child(2),.gallery>.crop:nth-child(3){aspect-ratio:auto;height:130px}.gallery .crop img{top:calc(-1449 / 188 * 100%);height:calc(1998 / 188 * 100%)}.moments{padding-bottom:14px}.contact{height:265px;min-height:0}.contact-photo{width:60%;opacity:.75}.contact .section-copy{padding-top:30px}.contact h2{font-size:48px}.contact .section-copy p{font-size:17px;max-width:335px;line-height:1.7}.contact .gold-button{min-width:240px}.contact .section-shade{background:linear-gradient(90deg,#0b0e0d 0%,#0b0e0de6 35%,#0b0e0d77 75%,transparent)}footer{min-height:120px;height:auto;padding:28px 5%;gap:16px}footer .logo{font-size:23px;max-width:240px}.footer-actions{gap:12px}.social-icon{width:23px}.footer-divider{display:none}.footer-menu{width:30px}.footer-actions .social-icon{display:none}}
.hero-photo{position:absolute;left:auto;right:0;top:0;bottom:0;width:64%;background:none;transform:none;filter:none}
.hero .rule{margin:13px 0}.hero .genre{margin:10px 0 14px}.hero .lead{margin:18px 0 22px}
.about-photo{width:49.17%}.contact-photo{width:39.01%}
.crop{container-type:size}
.crop img{top:0!important;left:0!important;width:max(calc(787 / var(--w) * 100cqw),calc(787 / var(--h) * 100cqh))!important;transform:translate(calc(-1 * var(--x) / 787 * 100%),calc(-1 * var(--y) / 1998 * 100%));height:auto!important;object-fit:initial!important;clip-path:inset(calc(var(--y) / 1998 * 100%) calc((787 - var(--x) - var(--w)) / 787 * 100%) calc((1998 - var(--y) - var(--h)) / 1998 * 100%) calc(var(--x) / 787 * 100%))}
@media(max-width:600px){.about-photo{width:60%}.contact-photo{width:50%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero-photo{inset:0;width:100%;background:url("assets/ssb-live-original.png") center bottom/cover no-repeat}
.hero-copy{top:50%;transform:translateY(-50%)}
.hero h1{font-size:clamp(52px,7.8vw,100px);line-height:1.12;letter-spacing:-.045em}
.hero h1>span,.hero h1>em{display:block}
.rule,.heading-line{visibility:hidden}
.outline-button{display:inline-block;text-decoration:none}.moments-history{margin:25px 5.2% 0;border:1px solid var(--gold);color:var(--gold);padding:12px 25px;letter-spacing:.1em;text-decoration:none}
.logo{display:flex;align-items:center;gap:clamp(14px,1.7vw,25px)}
.logo-symbol{position:relative;display:block;flex:0 0 auto;width:clamp(68px,8vw,102px);aspect-ratio:2088/1025;overflow:hidden}
.logo-symbol img{display:block;position:absolute;width:128.12%;height:auto;max-width:none;left:-14.94%;top:-31.71%}
.logo-symbol img{content:url("assets/ssb-logo-cutout.png")}
.band-name{display:block;min-width:0}
footer .logo-symbol{width:clamp(64px,7vw,92px)}
@media(max-width:600px){header .logo,footer .logo{gap:12px;max-width:calc(100% - 50px);font-size:clamp(17px,4.8vw,25px);line-height:1.12}header .logo-symbol,footer .logo-symbol{width:62px}header .band-name,footer .band-name{max-width:230px}footer .logo{max-width:calc(100% - 40px)}}
@media(max-width:360px){header .logo-symbol,footer .logo-symbol{width:52px}.logo{gap:9px}}
.hero-shade{background:linear-gradient(90deg,#090d0c 0%,#090d0cf2 23%,#090d0c99 43%,#090d0c10 70%),linear-gradient(0deg,#080b0c88,transparent 30%)}
@media(max-width:600px){.hero h1{font-size:clamp(48px,12.2vw,66px)}.hero-photo{background-size:auto 132%;background-position:57% bottom}.hero-copy{width:90%}.hero-shade{background:linear-gradient(90deg,#090d0ce8 0%,#090d0cb8 30%,#090d0c35 90%),linear-gradient(0deg,#080b0ca0,transparent 40%)}}
