:root{--bg:#0a0a0a;--chalk:#eee8dc;--dim:#9b968c;--hop:#8fbf3a;--blood:#b3122a;--jp:"Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;--hand:"Marker Felt","Bradley Hand","Segoe Print","Comic Neue",fantasy;--body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg) url(img/chalk.png);color:var(--chalk);font:17px/1.6 var(--body)}
a{color:var(--chalk)}img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:auto;padding:0 22px}
h1,h2,h3{font-family:Impact,"Arial Narrow Bold",sans-serif;letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:400}
h2{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;text-shadow:2px 2px 0 #000,-1px 0 0 rgba(238,232,220,.3)}
.kicker{font-family:var(--jp);color:var(--hop);letter-spacing:.3em;font-size:.95rem;display:block;margin-bottom:.4rem}
.divider{height:34px;background:url(img/divider.svg) center/100% 100% no-repeat;margin:56px 0;opacity:.85}
nav{position:sticky;top:0;z-index:9;background:rgba(10,10,10,.92);border-bottom:2px dashed rgba(238,232,220,.25)}
nav .wrap{display:flex;align-items:center;gap:18px;height:60px}
nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Impact,sans-serif;letter-spacing:.12em;margin-right:auto}
nav .brand img{width:38px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none;font-size:.85rem;letter-spacing:.18em;color:var(--dim)}nav ul a:hover{color:var(--hop)}
.hero{position:relative;min-height:0;display:grid;place-items:start center;text-align:center;overflow:hidden;padding:24px 0 56px}
.hero .logo{width:min(620px,86vw);height:auto;margin:auto;filter:drop-shadow(0 0 30px rgba(143,191,58,.12))}
.hero .tate{position:absolute;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;font-size:clamp(1.2rem,min(3vw,5vh),2.4rem);letter-spacing:.2em;white-space:nowrap;color:rgba(238,232,220,.16)}
.hero .tate.l{left:4vw}.hero .tate.r{right:4vw;color:rgba(179,18,42,.4);font-size:clamp(1rem,2vw,1.6rem)}
.tag{font-family:var(--hand);font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--dim);margin:14px 0 26px}
.btn{display:inline-block;min-width:170px;padding:16px 30px;margin:6px;background:url(img/plank.svg) center/100% 100% no-repeat;color:var(--chalk);text-decoration:none;font-family:Impact,sans-serif;letter-spacing:.15em;text-transform:uppercase;transition:transform .15s}
.btn:hover{transform:rotate(-2deg) scale(1.04);color:var(--hop)}
.btn.blood{filter:drop-shadow(0 0 6px rgba(179,18,42,.6))}
section{padding:10px 0;scroll-margin-top:70px}
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.about p{font-size:1.1rem}.about em{color:var(--hop);font-style:normal}
.genres{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding:0;list-style:none}
.genres li{border:2px solid var(--chalk);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:4px 14px;font-size:.9rem;letter-spacing:.08em}
.eyebox{position:relative;justify-self:center}.eyebox img{width:min(300px,70vw);animation:blink 7s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){.eyebox img{animation:none}}
.rough{border:2px solid var(--chalk);border-radius:2px 14px 3px 18px/16px 3px 14px 2px;box-shadow:3px 4px 0 rgba(238,232,220,.15)}
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:28px}
.member{padding:26px 18px;text-align:center;position:relative}
.member .ph{aspect-ratio:1;display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(238,232,220,.06) 9px 11px);margin-bottom:14px}
.member .ph img{width:45%;opacity:.5}
.tbd{display:inline-block;background:var(--blood);color:#fff;font-family:Impact,sans-serif;letter-spacing:.2em;padding:2px 10px;transform:rotate(-3deg)}
.member p{color:var(--dim);margin:.4rem 0 0;font-size:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:28px}
.video{aspect-ratio:16/9;width:100%;border:0;background:#111}
.facade{position:relative;aspect-ratio:16/9;cursor:pointer;background:#111 center/cover;display:grid;place-items:center;color:var(--chalk)}
.facade span{font-size:3rem;text-shadow:0 0 12px #000}
.cap{font-family:Impact,sans-serif;letter-spacing:.1em;margin:12px 0 0;font-size:1.3rem}
.stream{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.show{display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:center;padding:18px 22px;margin-top:16px}
.show .d{font-family:Impact,sans-serif;text-align:center;line-height:1}.show .d b{display:block;font-size:2.4rem;font-weight:400}
.show img{width:100%;max-width:220px;filter:grayscale(1) contrast(1.2)}
.past{color:var(--dim);font-size:.8rem;letter-spacing:.2em}
.note{color:var(--dim);font-size:.9rem;border-left:3px solid var(--blood);padding-left:12px;margin-top:20px}
.socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
footer{padding:40px 0 60px;text-align:center;color:var(--dim);font-size:.85rem}
footer .jp{font-family:var(--jp);letter-spacing:.4em;display:block;margin-bottom:6px;color:var(--chalk)}
@media(max-width:860px){nav ul{display:none}.split,.grid2{grid-template-columns:1fr}.members{grid-template-columns:1fr 1fr}.hero .tate.r{display:none}.hero{min-height:0}.show{grid-template-columns:80px 1fr}.show img{display:none}}
@media(max-width:480px){.members{grid-template-columns:1fr 1fr;gap:12px}.member{padding:14px 10px}.hero .tate.l{font-size:1.2rem;left:2vw}}
.member{padding:12px 12px 20px}.mimg{width:100%;height:auto;margin-bottom:12px;border-radius:2px}
.inst{display:inline-block;color:#0a0a0a!important;background:var(--hop);font-family:Impact,sans-serif;letter-spacing:.2em;padding:2px 12px;transform:rotate(-2deg);margin:0 0 6px!important;font-size:1rem!important}
.wanted{border-style:dashed}.wanted .inst{background:var(--blood);color:#fff!important}
@media(max-width:860px){.members{grid-template-columns:1fr 1fr}}