@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root{--ink:#07080f;--blue:#111d44;--violet:#7f71ca;--ice:#d9e5ff;--line:rgba(190,204,255,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#e8ecfa;font-family:"Noto Sans JP",sans-serif;font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.header{position:fixed;z-index:50;top:0;left:0;width:100%;height:94px;padding:0 5.4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:.4s}
.header.is-scrolled{height:72px;background:rgba(7,8,15,.86);backdrop-filter:blur(18px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:13px;font:500 18px/1 "Cormorant Garamond",serif;letter-spacing:.14em;z-index:2}
.brand small{display:block;font:400 7px/1.8 "Noto Sans JP",sans-serif;letter-spacing:.2em;color:#9299b3}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #777aa3;border-radius:50%;font-size:24px;font-style:italic}
.brand-mark{overflow:hidden;background:#0b0c18}
.brand-mark img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transform:scale(1.2)}
nav{display:flex;gap:34px;font:400 10px/1 "Noto Sans JP";letter-spacing:.2em}
nav a{position:relative}
nav a:after{content:"";position:absolute;left:0;bottom:-9px;width:0;height:1px;background:#b9a9ff;transition:.3s}
nav a:hover:after{width:100%}
.menu{display:none}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#091026}
.hero-image{position:absolute;inset:0;background:linear-gradient(0deg,#07080f 0%,transparent 24%),url("assets/images/nocturne-veil-hero.jpg") center/cover no-repeat;transform:scale(1.01);animation:breath 12s ease-in-out infinite alternate}
@keyframes breath{to{transform:scale(1.08)}}
.hero-noise{position:absolute;inset:0;opacity:.17;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.eyebrow{font-size:9px;letter-spacing:.38em;color:#aeb7db;text-transform:uppercase;margin:0 0 28px}
.hero h1{font:400 clamp(58px,9.5vw,148px)/.65 "Cormorant Garamond",serif;letter-spacing:.07em;margin:0;color:#f2f2fb}
.hero h1 span{display:block;font-style:italic;font-weight:400;font-size:.77em;letter-spacing:.25em;margin-top:.28em;color:#b8b1df}
.hero-since{position:absolute;z-index:3;bottom:calc(5vh + 68px);left:50%;transform:translateX(-50%);margin:0;font:400 9px/1.4 "Cormorant Garamond",serif;letter-spacing:.22em;color:rgba(232,236,250,.72);white-space:nowrap}
.title-rule{width:280px;height:20px;display:flex;align-items:center;margin:24px auto}
.title-rule:before,.title-rule:after{content:"";height:1px;background:linear-gradient(90deg,transparent,#9c9cbd);flex:1}.title-rule:after{transform:rotate(180deg)}
.title-rule i{width:7px;height:7px;border:1px solid #aea8d5;transform:rotate(45deg);margin:0 12px}
.hero-jp{font:400 clamp(16px,1.5vw,22px)/1.6 "Noto Sans JP";letter-spacing:.22em;margin:0 0 15px}
.hero-lead{font-size:11px;line-height:2.2;letter-spacing:.08em;color:#bbc0d0}
.discover{display:flex;align-items:center;justify-content:center;gap:28px;margin:40px auto 0;width:214px;height:52px;border:1px solid rgba(197,200,238,.45);font-size:9px;letter-spacing:.24em;transition:.3s;background:rgba(7,8,17,.22)}
.discover:hover{background:rgba(133,119,197,.24);border-color:#a69fd2}
.discover b{font-size:14px}
.hero-enter{position:absolute;z-index:3;left:50%;bottom:5vh;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:28px;width:214px;height:52px;border:1px solid rgba(197,200,238,.5);font-size:9px;letter-spacing:.24em;background:rgba(7,8,17,.42);backdrop-filter:blur(8px);transition:.3s}
.hero-enter:hover{background:rgba(133,119,197,.32);border-color:#c4b9ff}
.hero-enter b{font-size:14px}
.hero-side{position:absolute;z-index:2;left:5.4vw;bottom:5vh;writing-mode:vertical-rl;font-size:8px;letter-spacing:.28em;color:#7f87a5}
.section{position:relative;padding:140px 8vw}
.section-number{position:absolute;left:3vw;top:145px;font:italic 30px "Cormorant Garamond";color:#474d72}
.about{display:grid;grid-template-columns:.9fr 1.1fr .9fr;gap:6vw;align-items:center;background:radial-gradient(circle at 75% 50%,#151b38,transparent 34%)}
h2{font:400 clamp(43px,5vw,78px)/1.16 "Cormorant Garamond","Noto Sans JP",serif;letter-spacing:-.03em;margin:0}
.about-heading h2{font-family:"Noto Sans JP";font-weight:300;font-size:clamp(32px,3.7vw,58px);line-height:1.5;letter-spacing:.03em}
.about-content{font-size:12px;line-height:2.25;color:#aeb4c6}
.about-lead{font-size:15px;color:#d6daea}
.about-content em{font-style:normal;color:#bcb1ff}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tags span{border:1px solid var(--line);padding:8px 11px;font-size:7px;letter-spacing:.15em;color:#a8aec3}
.about-portrait{position:relative;aspect-ratio:3/4;border:1px solid var(--line);overflow:hidden}
.about-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a0b15 0%,transparent 45%)}
.about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.08)}
.about-portrait span{position:absolute;z-index:2;bottom:20px;left:22px;font:italic 18px "Cormorant Garamond";letter-spacing:.15em}
.featured-project{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:6vw;align-items:center;background:radial-gradient(circle at 18% 55%,rgba(31,58,96,.7),transparent 43%),#080b13;overflow:hidden}
.featured-project:before{content:"FEATURED / 2026";position:absolute;right:-15px;top:50%;transform:rotate(90deg) translateX(50%);transform-origin:right top;font:400 8px "Noto Sans JP";letter-spacing:.35em;color:#4f5973}
.featured-project-image{position:relative;display:block;aspect-ratio:1.9/1;overflow:hidden;border:1px solid rgba(181,197,231,.22);box-shadow:0 35px 90px rgba(0,0,0,.45)}
.featured-project-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(7,8,15,.32)),linear-gradient(0deg,rgba(7,8,15,.65),transparent 32%);transition:.5s}
.featured-project-image img{width:100%;height:100%;object-fit:cover;transition:1s ease}
.featured-project-image:hover img{transform:scale(1.025)}
.featured-project-image:hover:after{opacity:.75}
.featured-project-image>span{position:absolute;z-index:2;left:22px;bottom:19px;font-size:7px;letter-spacing:.28em;color:#d9e5ff}
.featured-project-copy h2{font-size:clamp(48px,5.8vw,86px);line-height:.9;letter-spacing:.01em}
.featured-project-copy h2 em{display:block;margin-top:.24em;font-weight:400;color:#bfc9e3}
.featured-project-years{display:flex;align-items:center;gap:13px;margin:0 0 22px;font:italic 13px "Cormorant Garamond";letter-spacing:.16em;color:#9aa8c7}
.featured-project-years i{display:block;width:38px;height:1px;background:linear-gradient(90deg,#607398,#bb4b4b)}
.featured-project-lead{margin:32px 0 16px!important;font-size:14px!important;line-height:2!important;color:#d5dbea!important}
.featured-project-copy>p:not(.eyebrow):not(.featured-project-years){font-size:10px;line-height:2.2;color:#919aae}
.featured-project-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.featured-project-copy dl div{border-top:1px solid var(--line);padding-top:12px}
.featured-project-copy dt{font-size:6px;letter-spacing:.18em;color:#65708d}
.featured-project-copy dd{margin:7px 0 0;font-size:10px;color:#c7ccda}
.featured-project-link{display:flex;align-items:center;justify-content:space-between;width:min(100%,330px);padding:18px 4px;border-top:1px solid #8b93aa;border-bottom:1px solid #8b93aa;font-size:9px;letter-spacing:.2em;transition:.3s}
.featured-project-link:hover{padding-left:10px;color:#c9c0ff;border-color:#c9c0ff}
.featured-project-link b{font-size:17px;font-weight:300}
.members{display:grid;grid-template-columns:.7fr .8fr 1.3fr;gap:5vw;align-items:start;background:linear-gradient(135deg,#090a13 0%,#10152c 55%,#090a13 100%)}
.members-head>p:last-child{margin-top:28px;font-size:11px;line-height:2;color:#8f96ab}
.members-visual{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line)}
.members-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,8,15,.65),transparent 45%)}
.members-visual img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.75) contrast(1.06)}
.member-list{border-top:1px solid var(--line)}
.member-card{position:relative;padding:34px 0;border-bottom:1px solid var(--line)}
.member-index{position:absolute;right:0;top:35px;font:italic 18px "Cormorant Garamond";color:#596181}
.member-role{margin:0 0 12px;font-size:7px;letter-spacing:.2em;color:#898fb1}
.member-card h3{margin:0 0 18px;font:400 28px "Noto Sans JP";letter-spacing:.05em}
.member-card h3 span{display:block;margin-top:7px;font:italic 17px "Cormorant Garamond";letter-spacing:.12em;color:#9c95c8}
.member-card>p:not(.member-role){max-width:680px;margin:0;color:#a7adbf;font-size:11px;line-height:2.1}
.member-card dl{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0 0}
.member-card dl div{display:grid;grid-template-columns:58px 1fr;gap:10px}
.member-card dt{font-size:7px;letter-spacing:.18em;color:#737b9a}
.member-card dd{margin:0;font-size:9px;color:#c1c6d8}
.member-profile-link{display:flex;align-items:center;justify-content:space-between;width:min(100%,280px);margin-top:26px;padding:13px 0;border-bottom:1px solid #747a9b;font-size:8px;letter-spacing:.18em;color:#d5d8e8;transition:.3s}.member-profile-link:hover{color:#c4b9ff;border-color:#c4b9ff}.member-profile-link b{font-size:14px;font-weight:300}
.works{background:#090a13}
.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:70px}
.text-link{font-size:9px;letter-spacing:.2em;padding-bottom:10px;border-bottom:1px solid #555d7e}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw}
.work-card:nth-child(2){margin-top:70px}.work-card:nth-child(3){margin-top:140px}
.work-image{position:relative;aspect-ratio:1;overflow:hidden;margin-bottom:25px}
.work-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.8s}
.work-card:hover .work-image img{transform:scale(1.05);filter:brightness(.75)}
.work-image span{position:absolute;top:12px;right:15px;font:italic 14px "Cormorant Garamond";z-index:1}
.work-card>p{font-size:8px;letter-spacing:.18em;color:#77809f}.work-card h3{font:400 34px "Cormorant Garamond";margin:8px 0}
.work-card small{display:block;min-height:58px;font-size:10px;line-height:1.8;color:#8f96ab}
.work-card>a{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;font-size:8px;letter-spacing:.18em}
.soundtrack-feature{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:8vw;align-items:center;background:radial-gradient(circle at 15% 50%,#182040,transparent 38%),#0b0d18}
.soundtrack-feature .soundtrack-card{width:100%;max-width:420px;margin:0}
.soundtrack-feature .story-copy{padding:0;max-width:620px}
.story{min-height:760px;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;background:#0b0d18;position:relative}
.story-image{height:100%;background:linear-gradient(90deg,transparent 70%,#0b0d18),linear-gradient(0deg,#0b0d18 0%,transparent 30%),url("assets/images/nocturne-hero.png") left 100%/100% auto no-repeat;filter:saturate(.75)}
.story-copy{padding:80px 9vw 80px 3vw}
.story-copy h2{font-family:"Noto Sans JP";font-weight:300;font-size:clamp(40px,5vw,68px);line-height:1.45}
.story-copy>p:not(.eyebrow){font-size:12px;line-height:2.2;color:#9ea5b8;margin:30px 0}
.button{display:flex;width:245px;height:58px;align-items:center;justify-content:space-between;border:1px solid #686c8d;padding:0 22px;font-size:8px;letter-spacing:.18em;background:rgba(117,105,174,.08);transition:.3s}
.button:hover{background:rgba(117,105,174,.25)}
.news{display:grid;grid-template-columns:.75fr 1.5fr;gap:8vw;background:#0a0b12}
.news-list a{display:grid;grid-template-columns:100px 90px 1fr 25px;gap:18px;align-items:center;border-top:1px solid var(--line);padding:25px 0;font-style:normal}
.news-list a:last-child{border-bottom:1px solid var(--line)}
.news-list time,.news-list span{font-size:8px;letter-spacing:.1em;color:#7d859f}.news-list b{font-weight:300;font-size:12px}.news-list i{font-style:normal}
.contact{text-align:center;padding:150px 20px;background:radial-gradient(circle at center,#202250 0,#0b0c18 45%,#07080f 72%);position:relative;overflow:hidden}
.contact:before{content:"";position:absolute;left:50%;top:40px;width:1px;height:65px;background:linear-gradient(transparent,#777da5)}
.contact h2{font-family:"Noto Sans JP";font-size:clamp(42px,6vw,82px);font-weight:300;line-height:1.45}.contact h2 i{font-family:"Cormorant Garamond","Noto Sans JP";color:#bbb2e3}
.contact>p:not(.eyebrow){font-size:11px;color:#9299ad;margin:25px 0 40px}
.contact-link{display:flex;justify-content:space-between;align-items:center;margin:auto;width:min(90vw,420px);padding:22px 4px;border-bottom:1px solid #9296b2;font-size:10px;letter-spacing:.25em}
.contact-link b{font-size:20px;font-weight:300}
footer{padding:65px 6vw 35px;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;align-items:end;gap:20px;border-top:1px solid var(--line);color:#7d849c}
.footer-brand{font:400 26px "Cormorant Garamond";letter-spacing:.12em;color:#d6daea}footer p,footer small,footer a{font-size:8px;letter-spacing:.12em}footer div{display:flex;gap:20px}
@media(max-width:800px){
  .header{height:74px;padding:0 22px}.brand{font-size:15px}.brand-mark{width:32px;height:32px}.menu{display:block;width:38px;height:38px;background:none;border:0;z-index:3;padding:10px}.menu i{display:block;height:1px;background:#e1e5f3;margin:7px 0}
  nav{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;background:rgba(7,8,15,.97);opacity:0;visibility:hidden;transition:.3s;font-size:12px}.header nav.open{opacity:1;visibility:visible}
  .hero{min-height:72svh}.hero-image{background-size:contain;background-position:center;background-color:#05060d}.hero-since{bottom:calc(3vh + 68px);font-size:8px}.hero-side{display:none}.hero-enter{bottom:3vh}
  .section{padding:100px 24px}.section-number{display:none}.about{display:block}.about-heading{margin-bottom:35px}.about-content{margin-bottom:50px}.about-portrait{width:88%;margin-left:auto}
  .featured-project{display:block}.featured-project:before{display:none}.featured-project-image{aspect-ratio:1731/909;margin-bottom:48px}.featured-project-image img{object-fit:contain}.featured-project-copy h2{font-size:clamp(48px,14vw,72px)}.featured-project-copy dl{grid-template-columns:1fr}.featured-project-link{width:100%}
  .members{display:block}.members-head{margin-bottom:42px}.members-visual{width:82%;max-height:560px;margin:0 auto 45px}.member-card dl{grid-template-columns:1fr}.member-card h3{font-size:24px}
  .section-top{align-items:start;gap:35px;flex-direction:column}.work-grid{display:block}.work-card,.work-card:nth-child(2),.work-card:nth-child(3){margin:0 0 65px}.work-card small{min-height:0;margin-bottom:22px}
  .soundtrack-feature{display:block}.soundtrack-feature .soundtrack-card{max-width:100%;margin-bottom:55px}.soundtrack-feature .story-copy{padding:0}
  .story{min-height:850px;display:block;padding-top:330px}.story-image{position:absolute;inset:0 0 auto;height:420px;background-size:auto 100%;background-position:center bottom}.story-copy{position:relative;padding:80px 24px}
  .news{display:block}.news>div:first-child{margin-bottom:40px}.news-list a{grid-template-columns:82px 1fr 20px;gap:10px}.news-list a span{display:none}.news-list b{font-size:10px}
  footer{grid-template-columns:1fr;align-items:start;gap:18px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}