/* plan E: the channel's own illustrations, full-bleed. One bold moment: a giant なぜ？ that Nazeyama floats in front of. */
:root{--night:#0a1230;--deep:#111a45;--ink:#f4f2ff;--soft:#b9bfe0;--gold:#ffcf4a;--red:#e8141e;--line:rgba(185,191,224,.18)}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--ink);font:400 17px/1.85 "Noto Sans JP",system-ui,sans-serif}
a{color:var(--gold)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,.time b,.say{font-family:"Dela Gothic One",sans-serif;font-weight:400}

.bar{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,48px)}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:900;font-size:.95rem}
.logo img{border-radius:50%}
.sub{white-space:nowrap;background:var(--red);color:#fff;text-decoration:none;font-weight:900;font-size:.9rem;padding:9px 18px;border-radius:999px}

/* hero */
.hero{position:relative;height:min(100svh,920px);min-height:600px;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,18,48,.55) 0%,rgba(10,18,48,0) 30%,rgba(10,18,48,0) 55%,var(--night) 100%)}
.hello{position:absolute;left:clamp(16px,4vw,48px);top:96px;margin:0;font-weight:900;font-size:clamp(1rem,1.9vw,1.35rem);line-height:1.7;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.big{position:absolute;left:0;right:0;bottom:-.12em;margin:0;text-align:center;font-size:clamp(7rem,30vw,27rem);line-height:1;letter-spacing:-.04em;color:var(--ink);text-shadow:0 10px 60px rgba(0,0,0,.35)}
.naze{position:absolute;z-index:2;left:66%;bottom:34%;width:clamp(150px,20vw,300px);height:auto;transform:rotate(-10deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));animation:arrive 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{transform:translate(40%,-30%) rotate(14deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.naze{animation:none}}

main{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
main h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 24px;line-height:1.2}

/* shows: each one is a scene from the channel */
.shows{display:grid;gap:clamp(48px,7vw,96px);padding:clamp(56px,8vw,110px) 0}
.show{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:clamp(24px,4vw,56px)}
.show:nth-child(even){grid-template-columns:1fr 1.35fr}
.show:nth-child(even) img{order:2}
.show img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:22px}
.show.tech img{object-position:50% 25%}
.show .time{margin:0;color:var(--soft);font-weight:700}
.show .time b{display:block;font-size:clamp(2.8rem,6vw,4.6rem);line-height:1.05;color:var(--gold)}
.show.tech .time b{color:#6fe3f5}.show.long .time b{color:#ff9f4a}.show.news .time b{color:#ff5a62}
.show h2{margin:14px 0 8px;font-size:clamp(1.4rem,2.6vw,2rem)}
.show .txt p:last-child{margin:0;color:var(--soft);max-width:30em}

/* latest */
.latest{padding:24px 0 72px;border-top:1px solid var(--line)}
.latest h2{margin-top:56px}
.strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.strip+.strip{margin-top:28px}
.v{flex:0 0 auto;width:190px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:700;line-height:1.55}
.v img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:var(--deep)}
.v.long{width:min(440px,80vw)}
.v.long img{aspect-ratio:16/9;border-radius:12px}
.v:hover span{color:var(--gold)}

/* rules */
.rules{padding:56px 0 96px;border-top:1px solid var(--line)}
.rules dl{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0}
.rules dt{font-weight:900;font-size:1.15rem;margin-bottom:6px}
.rules dd{margin:0;color:var(--soft)}

/* closing scene */
.end{position:relative;min-height:560px;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center;padding:96px 16px}
.end .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.end::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night) 0%,rgba(10,18,48,.25) 35%,rgba(10,18,48,.6) 100%)}
.say{margin:0 0 28px;font-size:clamp(2rem,6vw,4.4rem);line-height:1.15;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:900;padding:15px 34px;border-radius:999px;box-shadow:0 6px 0 #7a0a10}
.end .en{max-width:640px;margin:32px auto 0;color:#dfe2f5;font-size:.9rem;text-shadow:0 2px 10px rgba(0,0,0,.7)}

footer{padding:28px 16px 44px;text-align:center;color:var(--soft);font-size:.85rem}
footer nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}

@media (max-width:760px){
  .bar .logo span{display:none}
  .hero{height:auto;min-height:0;aspect-ratio:3/4.4}
  .hello{top:76px;right:16px}
  .naze{left:62%;bottom:30%}
  .show,.show:nth-child(even){grid-template-columns:1fr}
  .show:nth-child(even) img{order:0}
  .rules dl{grid-template-columns:1fr;gap:20px}
  .v{width:150px}
}