*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#252421;background:#e8e4dc;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}.paint{position:fixed;inset:0;z-index:-2;background:linear-gradient(115deg,rgba(246,243,236,.83),rgba(213,209,200,.67)),url('assets/jacket-placeholder.jpg') center/cover;filter:contrast(1.06) saturate(.45)}.paint:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(8deg,rgba(255,255,255,.08) 0 2px,rgba(50,45,38,.018) 3px 5px);mix-blend-mode:multiply;opacity:.7}header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;padding:22px 4vw;border-bottom:1px solid #36332d;background:rgba(239,236,229,.78);backdrop-filter:blur(12px);font:11px Arial,sans-serif;letter-spacing:.12em}.brand{font-weight:700}a{color:inherit;text-decoration:none}nav{display:flex;gap:24px}.hero{min-height:86vh;padding:8vw 7vw 6vw;display:grid;grid-template-columns:1.15fr .85fr;gap:7vw;align-items:center}.eyebrow,.num,.edition{font:11px Arial,sans-serif;letter-spacing:.22em}.hero h1{font-size:clamp(52px,8vw,128px);font-weight:400;line-height:.95;margin:25px 0 40px;letter-spacing:-.07em}.lead{font-size:clamp(18px,2vw,30px);line-height:2}.jacket{margin:0;transform:rotate(1.5deg)}.jacket img{width:100%;display:block;filter:contrast(1.05);box-shadow:12px 18px 0 rgba(45,42,36,.12)}figcaption{font:9px Arial,sans-serif;letter-spacing:.15em;margin-top:12px}.countdown{display:flex;gap:2px;margin:42px 0 16px}.countdown span{width:88px;border-top:1px solid;border-bottom:1px solid;padding:10px 0;font:8px Arial,sans-serif;letter-spacing:.12em}.countdown b{font:28px Georgia,serif;font-weight:400;display:block}.release{font:12px Arial,sans-serif;letter-spacing:.18em}.primary{display:inline-block;margin-top:20px;border:1px solid;padding:15px 22px;font:11px Arial,sans-serif;letter-spacing:.12em}.news{margin:0 4vw;border-top:1px solid;border-bottom:1px solid;padding:18px;display:grid;grid-template-columns:120px 130px 1fr;gap:20px;font-size:13px}.news span,.news time{font:10px Arial,sans-serif;letter-spacing:.14em}.news p{margin:0}.section{padding:10vw 8vw;border-bottom:1px solid rgba(40,38,34,.45)}.section h2{font-size:clamp(38px,6vw,88px);font-weight:400;line-height:1.1;margin:24px 0 55px}.statement{display:grid;grid-template-columns:.45fr 1.2fr 1fr;gap:5vw}.statement h2{margin-top:0}.copy{font-size:15px;line-height:2.25}.tracklist{border-top:1px solid}.track{display:grid;grid-template-columns:60px 1fr 1fr 110px;align-items:center;gap:15px;padding:21px 5px;border-bottom:1px solid;cursor:pointer;transition:.2s}.track:hover{padding-left:15px;background:rgba(255,255,255,.2)}.track .title{font-size:22px}.track .credits{font:10px Arial,sans-serif;line-height:1.7}.track button{border:0;background:none;font:10px Arial,sans-serif;letter-spacing:.1em}.arrange{font:10px Arial,sans-serif;letter-spacing:.14em;margin-top:22px}.xfd{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.video{max-width:620px;aspect-ratio:16/9}.video iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.9)}.cassette-grid{display:grid;grid-template-columns:1fr 1fr;gap:3vw}.cassette-grid article{border-top:1px solid;padding-top:18px}.cassette-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.35)}.cassette-grid h3{font-size:28px;font-weight:400}.cassette-grid strong{font:18px Arial,sans-serif}.tape{display:grid;grid-template-columns:1fr 1fr;margin-top:60px;border-top:1px solid}.tape>div{padding:30px}.tape>div+div{border-left:1px solid}.tape b{font:10px Arial,sans-serif;letter-spacing:.16em}.tape ol{line-height:2}.events a{display:grid;grid-template-columns:180px 1fr 260px;gap:30px;padding:30px 0;border-top:1px solid;align-items:center}.events a:last-child{border-bottom:1px solid}.events time,.events span{font:10px Arial,sans-serif;letter-spacing:.12em}.comments{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#4a4740;border:1px solid #4a4740}.comment{background:rgba(239,236,229,.88);padding:25px;min-height:280px}.avatar{width:52px;height:52px;border-radius:50%;border:1px solid;display:grid;place-items:center;font:16px Arial,sans-serif}.comment h3{margin:24px 0 5px;font-weight:400}.role{font:9px Arial,sans-serif;letter-spacing:.1em}.comment blockquote{margin:25px 0;font-size:13px;line-height:2}.comment a{font:9px Arial,sans-serif;border-bottom:1px solid}.lyric-modal{position:fixed;inset:0;z-index:30;background:rgba(27,26,23,.82);display:none;place-items:center;padding:4vw;backdrop-filter:blur(6px)}.lyric-modal.open{display:grid}.lyric-paper{position:relative;width:min(960px,94vw);height:min(680px,88vh);padding:55px 70px;background:#eeeae0;box-shadow:0 25px 80px #111;overflow:auto;background-image:repeating-linear-gradient(0deg,rgba(85,76,61,.025) 0 1px,transparent 1px 4px)}#closeLyric{position:absolute;right:25px;top:20px;border:0;background:none;font-size:28px}.lyric-paper h2{font-size:34px;font-weight:400}.credit,.lyric-no{font:9px Arial,sans-serif;letter-spacing:.12em}.lyrics{writing-mode:vertical-rl;text-orientation:mixed;height:440px;max-width:100%;overflow-x:auto;white-space:pre-wrap;font-size:15px;line-height:2.2;letter-spacing:.04em;text-shadow:.25px .25px rgba(20,20,20,.35)}footer{padding:40px 5vw;display:flex;gap:30px;font:9px Arial,sans-serif;letter-spacing:.12em}
@media(max-width:760px){header nav{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.jacket{max-width:82vw}.statement,.xfd{grid-template-columns:1fr}.track{grid-template-columns:35px 1fr 70px}.track .credits{grid-column:2/4}.cassette-grid,.tape{grid-template-columns:1fr}.tape>div+div{border-left:0;border-top:1px solid}.events a{grid-template-columns:1fr;gap:8px}.comments{grid-template-columns:1fr 1fr}.lyric-paper{padding:45px 28px}.lyrics{height:55vh}.news{grid-template-columns:1fr 1fr}.news p{grid-column:1/3}footer{flex-direction:column}.section{padding:90px 7vw}}
@media(max-width:430px){.comments{grid-template-columns:1fr}.hero h1{font-size:56px}.countdown span{width:25%}}
/* v4: V1 visual language preserved; only story intro + subtle canvas aging added */
body.intro-lock{overflow:hidden}.site{position:relative}.story-intro{position:fixed;inset:0;z-index:100;background:#08090b;color:#eee;overflow:hidden;transition:opacity 1.15s ease,visibility 1.15s ease}.story-intro.is-leaving{opacity:0;visibility:hidden}.intro-city{position:absolute;inset:0;background:url('assets/intro-city.png') center/cover no-repeat;filter:brightness(.25) grayscale(.5) contrast(1.05);opacity:.05;animation:cityFade 5.2s ease forwards;transform:scale(1.015)}.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.92) 0%,rgba(5,6,8,.54) 45%,rgba(5,6,8,.34) 100%),linear-gradient(0deg,rgba(4,5,6,.65),transparent 55%)}@keyframes cityFade{0%{opacity:.03;filter:brightness(.08) grayscale(.8)}100%{opacity:.82;filter:brightness(.31) grayscale(.55)}}.intro-copy{position:absolute;left:8vw;bottom:10vh;z-index:2;max-width:570px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(14px,1.35vw,20px);line-height:2.25;letter-spacing:.06em;text-shadow:0 2px 16px #000}.intro-copy p{opacity:0;transform:translateY(7px);animation:introText 1.2s ease forwards}.intro-copy p:nth-child(1){animation-delay:1.1s}.intro-copy p:nth-child(2){animation-delay:2.5s}.intro-copy p:nth-child(3){animation-delay:3.5s}.intro-copy button{margin-top:18px;padding:12px 0;border:0;border-bottom:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:10px Arial,sans-serif;letter-spacing:.18em;cursor:pointer;opacity:0;animation:introText 1.2s 4.6s ease forwards}@keyframes introText{to{opacity:1;transform:none}}
/* canvas stays V1, with only faint age/stain */
.paint:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 28%,rgba(93,74,48,.055),transparent 20%),radial-gradient(circle at 82% 72%,rgba(77,68,52,.045),transparent 24%),radial-gradient(circle at 52% 10%,rgba(60,54,45,.03),transparent 18%);mix-blend-mode:multiply;pointer-events:none}.cassette-grid small{font:8px Arial,sans-serif;font-weight:400;letter-spacing:.12em}.comments-intro{max-width:780px;font-size:13px;line-height:2;margin:-30px 0 45px}
@media(max-width:760px){.intro-copy{left:7vw;right:7vw;bottom:9vh;font-size:14px}.intro-city{background-position:52% center}}

/* v5 requested refinements */
/* Prologue: retain v3's restrained sans-serif typography, with a brighter city and more breathing room. */
.story-intro{background:#101216;color:#e9ebec}
.intro-city{filter:brightness(.38) grayscale(.34) contrast(1.02);animation:cityFadeV5 5.2s cubic-bezier(.22,.61,.36,1) forwards}
.intro-shade{background:linear-gradient(90deg,rgba(8,10,13,.70) 0%,rgba(8,10,13,.34) 48%,rgba(8,10,13,.18) 100%),linear-gradient(0deg,rgba(7,9,11,.38),transparent 58%)}
@keyframes cityFadeV5{0%{opacity:.04;filter:brightness(.14) grayscale(.55)}45%{opacity:.55;filter:brightness(.34) grayscale(.4)}100%{opacity:.9;filter:brightness(.46) grayscale(.28)}}
.intro-copy{left:7vw;top:12vh;bottom:auto;max-width:620px;font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif;font-size:clamp(13px,1.2vw,18px);line-height:2.15;letter-spacing:.16em;font-weight:400;text-shadow:0 1px 18px rgba(0,0,0,.78)}
.intro-copy p{margin:0 0 2.25em;opacity:0;transform:translateY(5px);animation:introText 1.2s ease forwards}
.intro-copy p:nth-child(1){animation-delay:1.1s}.intro-copy p:nth-child(2){animation-delay:2.25s}.intro-copy p:nth-child(3){animation-delay:3.45s}.intro-copy p:nth-child(4){animation-delay:4.65s}
.intro-copy button{margin-top:.3em;animation-delay:5.75s}
/* Hero lead: smaller and quieter than v4. */
.lead{font-size:clamp(14px,1.35vw,19px);line-height:2.05;letter-spacing:.035em}
/* Keep V1 typography, only add slight weight to arrangement credit. */
.arrange{font-weight:600}
/* Comments: use the restrained two-column v3 presentation while keeping placeholders. */
.comments{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:transparent;border:0;border-top:1px solid rgba(40,38,34,.45)}
.comment{display:grid;grid-template-columns:60px 1fr;column-gap:17px;align-content:start;background:transparent;padding:26px 24px;min-height:240px;border-bottom:1px solid rgba(40,38,34,.45)}
.comment:nth-child(odd){border-right:1px solid rgba(40,38,34,.45)}
.comment .avatar{grid-column:1;grid-row:1/5;width:54px;height:54px;overflow:hidden}
.comment h3,.comment .role,.comment blockquote,.comment a{grid-column:2}
.comment h3{margin:0 0 5px;font:500 14px "Helvetica Neue","Yu Gothic",Arial,sans-serif;letter-spacing:.08em}
.comment .role{font:8px "Helvetica Neue","Yu Gothic",Arial,sans-serif;letter-spacing:.15em;color:#666a6d}
.comment blockquote{margin:18px 0 16px;font-size:13px;line-height:2.05;letter-spacing:.03em;word-break:break-all}
.comment a{justify-self:start}
@media(max-width:760px){.intro-copy{left:7vw;right:7vw;top:12vh;bottom:auto;font-size:13px;line-height:2.05}.intro-copy p{margin-bottom:2.05em}.comments{grid-template-columns:1fr}.comment:nth-child(odd){border-right:0}.comment{padding:22px 2px;min-height:0}.lead{font-size:14px}}

/* v6 — colder white, Japanese credits, cassette-play entry */
body{background:#e5e8e9;color:#20252a}
.paint{background:linear-gradient(115deg,rgba(239,244,247,.86),rgba(199,208,214,.70)),url('assets/jacket-placeholder.jpg') center/cover;filter:contrast(1.04) saturate(.28) hue-rotate(174deg)}
.paint:after{opacity:.55}
.paint:before{background:radial-gradient(circle at 16% 28%,rgba(54,75,90,.045),transparent 20%),radial-gradient(circle at 82% 72%,rgba(44,62,78,.04),transparent 24%),radial-gradient(circle at 52% 10%,rgba(38,52,65,.03),transparent 18%)}
header{background:rgba(230,235,238,.80);border-bottom-color:#303941}
.section{border-bottom-color:rgba(31,42,51,.42)}
.news{border-color:#303941}.tracklist,.track,.cassette-grid article,.tape,.events a,.comments{border-color:rgba(31,42,51,.52)}
.comment{background:rgba(231,236,239,.76)}
.lyric-paper{background-color:#e8ecec;background-image:repeating-linear-gradient(0deg,rgba(45,62,72,.024) 0 1px,transparent 1px 4px)}
.arrange{font-weight:400}.arrange strong{font-weight:600}
.event-special{margin-top:18px;background:rgba(239,244,247,.32);padding-left:18px!important;padding-right:18px!important}
.intro-play{display:inline-flex!important;align-items:center;gap:12px!important;padding:12px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.55)!important;background:transparent!important;color:#fff!important;font:10px Arial,sans-serif!important;letter-spacing:.18em!important;cursor:pointer}.intro-play-mark{font-size:9px;transform:translateY(-1px)}

/* v7 — cassette-load transition */
.story-intro{transition:opacity 1.8s ease,visibility 1.8s ease}
.intro-copy{transition:opacity .7s ease,transform .7s ease}
.story-intro.is-loading .intro-copy{opacity:0;transform:translateY(-6px);pointer-events:none}
.story-intro.is-loading .intro-city,.story-intro.is-loading .intro-shade{transition:opacity 1.0s ease;opacity:.12}
.cassette-load{position:absolute;inset:0;z-index:5;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease;background:rgba(7,9,12,.35)}
.story-intro.is-loading .cassette-load{opacity:1;visibility:visible}
.cassette-player-frame{position:relative;width:min(76vw,980px);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.cassette-player-frame img{width:100%;height:100%;object-fit:contain;filter:brightness(.58) saturate(.72) contrast(1.02);transform:scale(.985)}
.cassette-player-frame:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 53%,transparent 0 24%,rgba(8,10,14,.16) 55%,rgba(8,10,14,.62) 100%);pointer-events:none}
.cassette-insert{position:absolute;left:50%;top:58%;width:min(29vw,360px);height:auto;object-fit:contain;opacity:0;transform:translate(-50%,34vh) scale(1.06) rotateX(8deg);filter:brightness(.78) saturate(.65) drop-shadow(0 20px 35px rgba(0,0,0,.52));will-change:transform,opacity}
.story-intro.is-loading .cassette-insert{animation:cassetteInsert 2.75s cubic-bezier(.2,.7,.2,1) .55s forwards}
.cassette-status{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);font:10px/1.2 "DM Mono",monospace;letter-spacing:.16em;color:rgba(239,243,247,.72);opacity:0;white-space:nowrap}
.story-intro.is-loading .cassette-status{animation:cassetteStatus .8s ease 1.1s forwards}
@keyframes cassetteInsert{0%{opacity:0;transform:translate(-50%,34vh) scale(1.06) rotateX(8deg)}18%{opacity:.98}62%{opacity:.98;transform:translate(-50%,3vh) scale(.68) rotateX(3deg)}82%{opacity:.96;transform:translate(-50%,-1.5vh) scale(.52) rotateX(1deg)}100%{opacity:.14;transform:translate(-50%,-4vh) scale(.43) rotateX(0deg)}}
@keyframes cassetteStatus{to{opacity:1}}
.story-intro.is-leaving{opacity:0;visibility:hidden}
@media(max-width:760px){.cassette-player-frame{width:min(96vw,720px)}.cassette-insert{width:min(50vw,310px);top:59%}.cassette-status{bottom:6vh;font-size:9px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.cassette-insert,.cassette-status{animation:none!important}.story-intro.is-loading .cassette-insert{opacity:.7;transform:translate(-50%,-2vh) scale(.48)}.story-intro.is-loading .cassette-status{opacity:1}}
