@charset "UTF-8";
:root{--teal:#23b3b6;--ink:#0c151a;--night:#0d0c0f;--paper:#e5e8e0;--red:#df644e;--serif:"Bodoni MT","Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;--jp:"Yu Mincho","Hiragino Mincho ProN",serif;--sans:"Arial","Yu Gothic",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--night);color:var(--paper);font-family:var(--serif);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--red);outline-offset:6px}::selection{background:var(--red);color:var(--night)}img{display:block;width:100%}p,h1,h2,h3,figure,dl,dd{margin:0}.skip-link{position:fixed;top:-70px;left:20px;z-index:100;background:var(--ink);color:var(--teal);padding:15px}.skip-link:focus{top:10px}.site-header{height:80px;background:var(--teal);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 3.2%;border-bottom:1px solid rgba(12,21,26,.3);gap:28px}.wordmark{font-size:25px;letter-spacing:-1px;display:flex;align-items:center;gap:10px}.symbol{font-family:var(--sans);font-size:42px;font-weight:900;line-height:1;transform:rotate(3deg)}.wordmark-note{font-family:var(--sans);font-size:8px;letter-spacing:1.1px;max-width:50px;line-height:1.5;border-left:1px solid;padding-left:10px;margin-left:6px}.site-header nav{display:flex;gap:26px;font-size:13px;letter-spacing:.6px}.site-header nav a{position:relative}.site-header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .25s}.site-header nav a:hover:after{right:0}.header-release{font-size:17px;white-space:nowrap}.header-release span{display:block;font-family:var(--sans);font-size:8px;letter-spacing:2px;margin-top:5px;text-align:right}.hero{height:min(760px,calc(100svh - 80px));min-height:570px;border-left:28px solid var(--teal);border-right:28px solid var(--teal);position:relative;isolation:isolate;overflow:hidden;background:#123142;--mx:0px;--my:0px}.hero-picture{position:absolute;inset:-18px;z-index:-4;transform:translate(var(--mx),var(--my)) scale(1.035);transition:transform 1.1s ease-out}.hero-picture img{height:100%;object-fit:cover;object-position:55% 41%;filter:saturate(.8)}.hero-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(2,13,23,.8),rgba(2,13,23,.29) 42%,transparent 72%),linear-gradient(0deg,rgba(2,12,23,.93),transparent 57%,rgba(2,13,23,.35))}.hero:after{content:"";position:absolute;inset:15px;border:1px solid rgba(194,232,235,.23);z-index:-1;pointer-events:none}.hero-top{display:flex;justify-content:space-between;position:absolute;top:36px;left:42px;right:42px;font-size:11px;letter-spacing:1.6px}.hero-top span:last-child{font-family:var(--sans);font-size:9px}.hero-side{position:absolute;right:34px;top:120px;writing-mode:vertical-rl;font-family:var(--sans);font-size:8px;letter-spacing:3px}.hero-heading{position:absolute;left:5.5%;top:30%;width:86%}.eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:3px;font-weight:400}.hero h1{font-size:clamp(110px,16.5vw,252px);font-weight:400;line-height:.98;letter-spacing:-.065em;margin:32px 0 22px;font-style:italic;text-shadow:0 2px 28px #07151e55}.title-period{color:var(--teal)}.hero-kana{font-family:var(--jp);font-size:11px;letter-spacing:7px;margin-left:8px}.hero-bottom{position:absolute;bottom:42px;left:6%;right:5%;display:flex;justify-content:space-between;align-items:end}.hero-date{font-size:31px;letter-spacing:1px;text-align:right}.hero-date span{display:block;font-family:var(--sans);font-size:8px;letter-spacing:2px;margin-top:9px}.scroll-link{font-family:var(--sans);font-size:8px;letter-spacing:1.8px;display:flex;gap:25px;align-items:center;position:absolute;left:48%;bottom:5px}.scroll-link span:last-child{font-size:28px;animation:down 2s ease-in-out infinite}.hero-rain{position:absolute;inset:-100%;z-index:-2;opacity:.11;background:repeating-linear-gradient(108deg,transparent 0px,transparent 100px,#d8f5fa 101px,transparent 102px,transparent 167px);transform:translateY(-50px);animation:rain 8s linear infinite;pointer-events:none}.ticker{background:var(--teal);color:var(--ink);height:56px;display:flex;align-items:center;justify-content:space-around;gap:28px;padding:0 35px;overflow:hidden;white-space:nowrap;font-family:var(--sans);font-size:9px;letter-spacing:1.8px;border-top:1px solid rgba(12,21,26,.25);border-bottom:1px solid}.ticker-cross{font-size:23px}.section-pad{padding:50px max(6%,24px) 90px}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:65px}.section-index{font-family:var(--sans);font-size:10px;letter-spacing:2.2px}.cross{font-family:var(--sans);font-size:21px;line-height:1}.micro-label{font-family:var(--sans);font-size:8px;letter-spacing:1.8px;line-height:1.6}.story{background:var(--teal);color:var(--ink);position:relative}.story-layout{display:grid;grid-template-columns:30% 1fr;gap:9%;max-width:1250px;margin:auto}.story-aside{padding-top:10px;display:flex;flex-direction:column;justify-content:center;gap:18px}.story-fragment{height:300px;max-width:320px;background:url("assets/artwork-cover.jpg") 54% 44%/195% auto;clip-path:polygon(0 3%,18% 1%,28% 3%,39% 0,58% 3%,68% 1%,84% 3%,100% 0,98% 21%,100% 41%,97% 65%,100% 84%,97% 99%,80% 97%,64% 100%,50% 97%,32% 99%,18% 96%,0 99%,2% 76%,0 51%,2% 31%);transform:rotate(-4deg)}.story-aside>.micro-label:last-child{letter-spacing:3px;font-family:var(--jp)}.story-copy h2{font-family:var(--jp);font-size:clamp(25px,2.7vw,40px);line-height:1.95;letter-spacing:4px;font-weight:400;margin-bottom:35px}.story-copy h2 span{white-space:nowrap}.prose{font-family:var(--jp);font-size:13px;line-height:2.45;letter-spacing:.7px}.prose p+p{margin-top:25px}.story-last{font-size:12px}.story-end{border-top:1px solid #10343d55;display:flex;justify-content:space-between;padding-top:18px;margin-top:75px;font-size:10px;letter-spacing:1px}.story-end span:last-child{font-family:var(--sans);font-size:8px}.movie{background:var(--night);padding-top:45px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px;gap:25px}.section-heading h2{font-weight:400;line-height:1.05;font-size:clamp(46px,5vw,76px);letter-spacing:-2px}.section-heading h2 em{color:var(--teal);font-weight:400}.section-heading>p{font-family:var(--jp);font-size:12px;letter-spacing:2px;line-height:2;padding-bottom:6px}.video-frame{position:relative;aspect-ratio:16/9;background:#07181e;overflow:hidden;border:1px solid #4d797e70;isolation:isolate}.video-poster{position:absolute;inset:0;z-index:-1;background:linear-gradient(#07151ed9,#07151eb0),url("assets/visual-city.jpg") 60% 35%/cover;filter:saturate(.5)}.video-frame:before,.video-frame:after{position:absolute;content:"＋";font:17px var(--sans);color:var(--teal);top:15px;left:15px;z-index:1;pointer-events:none}.video-frame:after{top:auto;left:auto;bottom:15px;right:15px}.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.video-mark{display:flex;width:62px;height:62px;border:1px solid #68c6c980;border-radius:50%;align-items:center;justify-content:center;color:var(--teal);font-size:28px;padding-left:5px}.video-placeholder p{font-size:clamp(27px,4vw,52px);font-style:italic}.video-placeholder .micro-label{color:var(--teal);letter-spacing:4px}.video-corner{position:absolute;left:35px;bottom:22px;font-family:var(--sans);font-size:8px;letter-spacing:1.5px;color:#a4b9bd}.video-frame iframe{width:100%;height:100%;border:0;position:absolute;inset:0;z-index:2}.movie-caption{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin-top:17px;color:#9babad}.tracks{background:var(--night);padding-top:15px;padding-bottom:100px}.tracks .section-top{border-top:1px solid #6381874d;padding-top:35px}.tracks .section-heading{margin-bottom:55px}.track{border-top:1px solid #55777b70}.track:last-child{border-bottom:1px solid #55777b70}.track-heading{display:grid;grid-template-columns:65px minmax(0,1fr) 125px;align-items:center;gap:15px;min-height:128px;padding:24px 10px;list-style:none;transition:background .2s}.track-number{font:12px var(--sans);color:var(--teal);align-self:start;margin-top:13px}.track-name{display:flex;flex-direction:column;gap:12px}.track-title{font-size:clamp(27px,3.2vw,45px);letter-spacing:-.7px;line-height:1.15}.track-artist{font-size:12px;letter-spacing:1px;color:#a4bdc0}.track-type{font:8px var(--sans);letter-spacing:1.5px;color:#90aaad}.track-foot{display:flex;justify-content:space-between;font:8px var(--sans);letter-spacing:1.7px;margin-top:22px;color:#93acaf}.information{background:var(--teal);color:var(--ink);padding-bottom:110px}.info-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10%;align-items:center;max-width:1250px;margin:auto}.artwork{position:relative;min-width:0;width:100%}.artwork:before{content:"";position:absolute;inset:10px 7px 36px -6px;border:1px solid #173c4580;transform:rotate(-4deg)}.artwork-wrap{box-shadow:8px 14px 35px #0c333f26;transform:rotate(-2deg);position:relative}.artwork img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1;object-fit:contain}.artwork figcaption{font:8px var(--sans);letter-spacing:1.6px;display:flex;justify-content:space-between;margin-top:27px}.info-copy h2{font-size:clamp(45px,5.2vw,79px);font-weight:400;letter-spacing:-2px;line-height:1.15;margin-top:15px}.info-subtitle{font-size:12px;letter-spacing:.5px;margin-top:13px}.info-table{margin-top:35px}.info-table>div{display:grid;grid-template-columns:120px 1fr;padding:15px 0;border-bottom:1px solid #10343d55;gap:10px;align-items:baseline}.info-table dt{font:8px var(--sans);letter-spacing:1.4px}.info-table dd{font-family:var(--jp);font-size:14px;line-height:1.6}.info-table time{font-family:var(--serif);font-size:23px;letter-spacing:1px}.purchase{margin-top:35px}.purchase h3{font-weight:400;font-style:italic;font-size:26px;margin-bottom:14px}.purchase h3 span{font-family:var(--jp);font-style:normal;font-size:10px;margin-left:15px;letter-spacing:1.5px}.store-pending,.store-link{border:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:16px 21px;font-family:var(--jp);font-size:12px;letter-spacing:1px}.store-pending{color:#17414b;border-color:#17414b66}.store-pending span,.store-link span:last-child{font-family:var(--sans);font-size:22px}.store-link{margin-top:10px;transition:background .2s,color .2s}.store-link:hover{background:var(--ink);color:var(--teal)}.credits{padding-bottom:75px}.credits-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;max-width:1250px;margin:auto}.credits h2{font-weight:400;font-size:clamp(40px,4.5vw,65px);line-height:1.1;letter-spacing:-1px}.credits h2 em{color:var(--teal)}.credit-list>div{display:grid;grid-template-columns:125px 1fr;align-items:baseline;gap:20px;padding:17px 0;border-bottom:1px solid #4f6e754d}.credit-list>div:first-child{padding-top:0}.credit-list dt{font:10px var(--sans);color:#9ab2b6;letter-spacing:.8px;line-height:1.9}.credit-list dd{font-size:18px;line-height:1.8;letter-spacing:.5px}.site-footer{padding:25px 6% 35px;overflow:hidden;background:var(--night);color:var(--teal)}.back-top{display:flex;justify-content:space-between;border-top:1px solid #4f6e7566;padding-top:24px;font:9px var(--sans);letter-spacing:2px}.back-top span{font-size:25px}.footer-title{font-size:17.2vw;line-height:1.1;letter-spacing:-.06em;font-weight:400;margin:40px 0 18px;-webkit-text-stroke:1px #23b3b65c;color:transparent;text-align:center}.footer-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;border-top:1px solid #4f6e754d;padding-top:22px}.legal{display:grid;grid-template-columns:1fr 1.6fr;gap:8%;font-family:var(--sans);font-size:9px;line-height:1.9;letter-spacing:.4px;color:#92a6aa;margin-top:25px}.legal p:last-child{max-width:650px;justify-self:end}
@keyframes rain{to{transform:translate(50px,120px)}}@keyframes down{50%{transform:translateY(5px)}}
@media(min-width:1700px){.hero{max-height:900px;height:800px}.section-pad{padding-left:max(6%,calc((100% - 1440px)/2));padding-right:max(6%,calc((100% - 1440px)/2))}.hero-heading{left:8%}}
@media(max-width:1000px){.site-header{gap:15px}.site-header nav{gap:17px;font-size:12px}.wordmark-note{display:none}.hero{border-width:18px}.hero h1{font-size:17vw}.hero-heading{top:33%}.story-layout{grid-template-columns:24% 1fr;gap:7%}.story-fragment{height:270px}.story-copy h2{font-size:29px;letter-spacing:2px}.prose{font-size:12px}.info-layout{gap:6%}.info-table>div{grid-template-columns:100px 1fr}.credits-layout{gap:6%}.credit-list>div{grid-template-columns:105px 1fr}}
@media(max-width:700px){html{scroll-padding-top:20px}.site-header{height:auto;min-height:94px;flex-wrap:wrap;padding:15px 22px 13px;gap:13px 20px}.wordmark{font-size:23px}.symbol{font-size:30px}.header-release{font-size:14px;margin-left:auto;order:1}.header-release span{font-size:7px;letter-spacing:1.3px}.site-header nav{order:2;width:100%;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.4px}.hero{height:calc(90svh - 94px);min-height:550px;max-height:780px;border-width:12px}.hero-picture{inset:-10px}.hero-picture img{object-position:67% 37%;filter:saturate(.8)}.hero-shade{background:linear-gradient(0deg,#04121fed 0%,#04121f66 45%,#04121f22 75%,#04121f77),linear-gradient(90deg,#04121f88,transparent 80%)}.hero:after{inset:9px}.hero-top{top:25px;left:24px;right:24px;font-size:8px;letter-spacing:.8px}.hero-top span:last-child{font-size:7px}.hero-side{top:80px;right:20px;font-size:6px;letter-spacing:2px}.hero-heading{top:auto;bottom:32%;left:6%;width:90%}.hero .eyebrow{font-size:8px;letter-spacing:2px}.hero h1{font-size:21vw;letter-spacing:-.075em;line-height:1.1;margin:24px 0 18px}.hero-kana{font-size:9px;letter-spacing:5px;margin-left:3px}.hero-bottom{bottom:36px;left:7%;right:7%;align-items:end}.hero-date{font-size:22px;letter-spacing:0}.hero-date span{font-size:6px;letter-spacing:.7px}.scroll-link{left:0;bottom:-23px;font-size:6px;letter-spacing:1px;gap:12px}.scroll-link span:last-child{font-size:17px}.ticker{height:44px;padding:0 20px;justify-content:start;gap:25px;font-size:7px;letter-spacing:1px}.ticker-cross{font-size:18px}.section-pad{padding:35px 25px 60px}.section-top{margin-bottom:40px}.section-index{font-size:8px;letter-spacing:1.6px}.cross{font-size:18px}.story-layout{display:flex;flex-direction:column;gap:32px}.story-aside{order:2;align-items:start;position:relative;padding:0;gap:12px;margin:20px 12% 0}.story-fragment{height:180px;width:100%;max-width:none;background-size:150%;background-position:50% 44%;transform:rotate(-3deg)}.story-aside>.micro-label:first-child{font-size:7px}.story-aside>.micro-label:last-child{font-size:8px}.story-copy h2{font-size:clamp(22px,5.6vw,33px);letter-spacing:1px;line-height:1.9;margin-bottom:25px}.prose{font-size:12px;line-height:2.3;letter-spacing:.3px}.prose br{display:none}.prose p+p{margin-top:22px}.story-last{font-size:11px}.story-end{margin-top:45px;gap:12px;flex-direction:column;font-size:9px}.story-end span:last-child{font-size:6px;letter-spacing:.7px}.section-heading{align-items:start;flex-direction:column;gap:22px;margin-bottom:28px}.section-heading h2{font-size:45px;letter-spacing:-1.5px}.section-heading>p{font-size:10px;letter-spacing:1px}.movie .section-heading>p{align-self:end}.video-mark{width:40px;height:40px;font-size:22px}.video-placeholder{gap:10px}.video-placeholder p{font-size:25px}.video-placeholder .micro-label{font-size:6px;letter-spacing:3px}.video-corner{font-size:6px;left:15px;bottom:13px;letter-spacing:.7px}.video-frame:before,.video-frame:after{font-size:12px;left:7px;top:6px}.video-frame:after{left:auto;top:auto;right:7px;bottom:6px}.movie-caption{font-size:7px;letter-spacing:.4px;margin-top:12px}.tracks{padding-top:5px}.tracks .section-top{padding-top:25px}.tracks .section-heading{margin-bottom:30px}.tracks .section-heading>p{line-height:1.8}.track-heading{grid-template-columns:26px minmax(0,1fr);gap:12px;padding:22px 0;min-height:100px}.track-number{font-size:9px;margin-top:8px}.track-title{font-size:clamp(25px,6.5vw,36px);letter-spacing:-.5px}.track-artist{font-size:10px;letter-spacing:.4px}.track-name{gap:9px}.track-type{display:none}.track-foot{font-size:6px;letter-spacing:.7px;gap:10px;margin-top:18px}.info-layout{grid-template-columns:1fr;gap:48px}.artwork{margin:5px 8px 0}.artwork figcaption{font-size:7px;letter-spacing:1px;margin-top:22px}.info-copy h2{font-size:54px}.info-subtitle{font-size:11px}.info-table{margin-top:25px}.info-table>div{grid-template-columns:110px 1fr;padding:14px 0}.purchase{margin-top:28px}.credits-layout{grid-template-columns:1fr;gap:38px}.credits h2{font-size:45px}.credit-list>div{grid-template-columns:120px 1fr;padding:15px 0}.credit-list dt{font-size:9px}.credit-list dd{font-size:16px}.site-footer{padding:5px 25px 30px}.footer-title{font-size:17vw;letter-spacing:-.065em;margin:35px 0 25px}.footer-meta{font-size:8px;letter-spacing:.3px;gap:10px;padding-top:18px}.legal{grid-template-columns:1fr;gap:15px;margin-top:20px;font-size:8px}.legal p:last-child{justify-self:start}.back-top{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-picture{transform:none}}

/* Official VIOLAINE wordmark: dark ink on turquoise, luminous turquoise in the hero. */
.wordmark{gap:12px}.brand-logo{display:block;width:138px;height:auto;flex:0 0 auto}.brand-caption{font:7px/1.7 var(--sans);letter-spacing:1px;border-left:1px solid;padding-left:11px;white-space:nowrap}.hero h1{font-size:0;line-height:0;letter-spacing:0;font-style:normal}.hero-logo{width:100%;max-width:1020px;height:auto;filter:drop-shadow(0 2px 18px #07151e77)}.story-fragment{background-image:url("assets/artwork-cover.jpg")}.store-note{display:block;margin-top:5px;font:7px/1.3 var(--sans);letter-spacing:1.2px;color:#365a60}
@media(max-width:1000px){.brand-logo{width:122px}.brand-caption{font-size:6px;padding-left:9px}}
@media(max-width:700px){.brand-logo{width:112px}.brand-caption{font-size:6px;letter-spacing:.6px;padding-left:8px;line-height:1.55}.hero h1{margin:24px 0 18px}.hero-logo{max-width:400px}}

/* The artwork's HTML dimensions reserve its ratio; its displayed height follows its width. */
.info-copy{min-width:0}
.track-notes{margin:0 10px 28px 90px;max-width:880px;color:#a4bdc0;font:11px/1.85 var(--sans);overflow-wrap:anywhere}
.track-notes p+p{margin-top:5px}
@media(max-width:700px){.track-notes{margin:0 0 24px 38px;font-size:10px;line-height:1.9}}

/* Simple section titles for PV and Tracklist. */
.movie .section-heading-simple,.tracks .section-heading-simple{margin-bottom:30px;align-items:baseline}
.section-heading-simple h2{font-size:36px;line-height:1.2;letter-spacing:.3px;font-weight:400}
@media(max-width:700px){.section-heading-simple{flex-direction:row;gap:18px}.section-heading-simple h2{font-size:28px}.section-heading-simple>p{font-size:10px;letter-spacing:.5px;padding-bottom:0}.movie .section-heading-simple,.tracks .section-heading-simple{margin-bottom:25px}}


/* Simplified hero, track metadata and credits following the annotated review. */
.hero-heading{top:50%;bottom:auto;transform:translateY(-50%)}
.hero h1{margin:0}
.hero-bottom{justify-content:flex-end}
.track-heading{grid-template-columns:65px minmax(0,1fr)}
.credits-layout{display:block;max-width:760px}
.section-top h2.section-index{font:400 10px var(--sans);letter-spacing:2.2px}
.credit-list a{text-decoration:underline;text-decoration-color:#5c8b9055;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.credit-list a:hover{color:var(--teal);text-decoration-color:currentColor}
@media(max-width:700px){.track-heading{grid-template-columns:26px minmax(0,1fr)}.section-top h2.section-index{font-size:8px;letter-spacing:1.6px}}