@font-face{font-family:'Noto Serif SC';src:url(../fonts/NotoSerifSC-sub.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/Cormorant.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/Cormorant-Italic.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/PlexMono-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/PlexMono-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
:root{
  --ink:#0a0908; --bone:#ebe5d8; --bone2:#a39c8f; --dim:#5b564e; --line:rgba(235,229,216,.14);
  --red:#d6452e; --acc:#d6452e;
  --serif:'Noto Serif SC','Songti SC',serif; --latin:'Cormorant Garamond',serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.7,0,.2,1);
  --gx:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink)}
body{color:var(--bone);font-family:var(--serif);font-weight:300;-webkit-font-smoothing:antialiased;cursor:none;overflow-x:hidden}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:none}
i,em{font-style:normal}
.mono{font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
#smooth{position:fixed;top:0;left:0;width:100%;z-index:2;will-change:transform;transition:opacity 1s var(--ease)}
section{position:relative}
body.is-detail #smooth{opacity:0;pointer-events:none}
body.is-detail .hud,body.is-detail .nav{opacity:0 !important;pointer-events:none}
q{quotes:none}

/* split text */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em}
.ch{display:inline-block;transform:translateY(110%) rotate(6deg);transition:transform 1.4s var(--ease);transition-delay:calc(var(--i)*38ms)}
.in .ch,.ch.in{transform:none}
.fade{opacity:0;transform:translateY(30px);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
.in.fade,.in .fade{opacity:1;transform:none}

/* ===== intro ===== */
#intro{position:fixed;inset:0;z-index:90;background:#0a0908;transition:opacity 1.2s var(--ease),visibility 1.2s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#leader{position:absolute;inset:0;width:100%;height:100%}
.intro-top{position:absolute;left:var(--gx);right:var(--gx);top:34px;display:flex;justify-content:space-between;color:var(--bone2)}
.intro-bottom{position:absolute;left:var(--gx);right:var(--gx);bottom:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.intro-load{display:flex;align-items:center;gap:16px;color:var(--bone2)}
.intro-load i{width:160px;height:1px;background:var(--line);position:relative}
.intro-load b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red)}
.intro-enter{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease),transform 1s var(--ease);padding:18px 34px;border:1px solid rgba(235,229,216,.3);border-radius:100px}
.intro-enter .zh{font-size:15px;letter-spacing:.4em}
.intro-enter .en{font-family:var(--latin);font-style:italic;font-size:15px;color:var(--bone2)}
.intro-enter:hover{background:var(--bone);color:var(--ink)}
.intro-enter:hover .en{color:var(--ink)}
.ready .intro-enter,.ready .intro-mute{opacity:1;transform:none}
.intro-mute{justify-self:end;color:var(--bone2);opacity:0;transition:opacity 1s}

/* ===== cursor ===== */
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .4s}
.cursor .c-ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(235,229,216,.5);border-radius:50%;display:grid;place-items:center;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background .4s,border-color .4s}
.cursor .c-dot{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--bone)}
.cursor .c-lbl{font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--ink);opacity:0;transition:opacity .3s;white-space:nowrap}
.cursor.big .c-ring{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--bone);border-color:var(--bone)}
.cursor.big .c-lbl{opacity:1}
.cursor.big .c-dot{opacity:0}
.cursor.hov .c-ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--bone)}

/* ===== chrome ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:26px var(--gx);mix-blend-mode:difference;opacity:0;transition:opacity 1.2s .3s}
.is-ready .nav,.is-ready .hud{opacity:1}
.mark{display:flex;align-items:baseline;gap:12px}
.mark b{font-weight:500;font-size:16px;letter-spacing:.34em}
.mark i{font-family:var(--latin);font-style:italic;font-size:19px;color:var(--bone2)}
.nav nav{display:flex;gap:38px;transition:opacity .6s}
.nav nav a{display:flex;align-items:baseline;gap:7px;font-size:13px;letter-spacing:.24em;position:relative}
.nav nav a em{font-family:var(--latin);font-style:italic;font-size:13px;color:var(--bone2);letter-spacing:0}
.nav nav a i{font-family:var(--latin);font-style:italic;font-size:15px;color:var(--bone2);letter-spacing:.01em}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--bone);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease2)}
.nav nav a:hover::after,.nav nav a.on::after{transform:scaleX(1);transform-origin:left}
.snd{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em}
#sndViz{width:64px;height:20px}
.hud{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity 1.2s .5s;mix-blend-mode:difference}
.hud-l{position:absolute;left:var(--gx);bottom:26px;display:flex;gap:10px;align-items:center;color:var(--bone2)}
.hud-l .rec{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.hud-r{position:absolute;right:var(--gx);bottom:26px;color:var(--bone2)}
.rail{position:absolute;right:22px;top:50%;height:36vh;width:1px;transform:translateY(-50%);background:var(--line)}
.rail i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--bone)}
#railTicks span{position:absolute;left:-3px;width:7px;height:1px;background:var(--bone2)}

.sec-tag{display:flex;align-items:center;gap:14px;color:var(--bone2)}
.sec-tag b{font-family:var(--latin);font-style:italic;font-weight:400;font-size:20px;color:var(--acc);letter-spacing:0;text-transform:none}
.sec-tag span{color:var(--dim)}
.sec-tag::before{content:"";width:34px;height:1px;background:var(--acc)}
.ai{color:var(--dim);border:1px solid rgba(235,229,216,.18);padding:3px 7px;border-radius:20px;font-size:9px}
.ph{font-family:var(--mono);font-size:9px;color:var(--red);border:1px solid rgba(214,69,46,.5);padding:1px 5px;border-radius:10px;vertical-align:super;letter-spacing:.1em}

/* ===== marquee ===== */
.marquee{overflow:hidden;white-space:nowrap;width:100%}
.mq-track{display:inline-flex;align-items:center;gap:42px;animation:mq 40s linear infinite;padding-right:42px}
.mq-slow{animation-duration:70s}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== hero ===== */
.hero{height:100vh;min-height:760px}
.hero-side{position:absolute;left:var(--gx);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;gap:26px;color:var(--bone2)}
.hero-notation{position:absolute;right:var(--gx);top:112px;width:260px;opacity:.9}
.hero-notation svg{width:100%;display:block}
.hero-notation .dyn{position:absolute;left:-6px;top:58px;font-family:var(--latin);font-style:italic;font-weight:500;font-size:22px;color:var(--bone2)}
.hero-notation .dyn.r{left:auto;right:0;color:var(--red)}
.hero-kicker{position:absolute;left:var(--gx);top:122px;display:flex;flex-direction:column;gap:6px}
.hero-kicker span{font-size:13px;letter-spacing:.5em}
.hero-kicker .en{font-family:var(--latin);font-style:italic;font-size:17px;letter-spacing:.02em;color:var(--bone2)}
.hero-title{position:absolute;left:var(--gx);right:var(--gx);bottom:196px;display:flex;align-items:baseline;justify-content:space-between;font-family:var(--latin);font-style:italic;font-weight:300;font-size:clamp(90px,11.5vw,210px);line-height:.8;letter-spacing:-.02em;pointer-events:none}
.ht-amp{font-size:.62em;color:var(--red);font-weight:400;transform:translateY(-.08em)}
.hero-foot{position:absolute;left:var(--gx);right:var(--gx);bottom:124px;display:grid;grid-template-columns:1.2fr 1fr auto;align-items:end;gap:40px}
.hero-lede{font-size:14px;letter-spacing:.14em;line-height:1.9;color:var(--bone)}
.hero-lede i{font-family:var(--latin);font-style:italic;color:var(--bone2);margin-left:8px;letter-spacing:.02em}
.hero-hint{color:var(--bone2);line-height:2}
.hero-scroll{display:flex;align-items:center;gap:14px;color:var(--bone2)}
.hero-scroll i{width:54px;height:1px;background:var(--bone2);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--bone);animation:sweep 2.2s var(--ease2) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.hero-marquee{position:absolute;left:0;right:0;bottom:62px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.5em;color:var(--dim);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.hero-marquee b{color:var(--red);font-size:9px}

/* ===== prelude ===== */
.prelude{padding:22vh var(--gx) 20vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.prelude .sec-tag{grid-column:1/-1;margin-bottom:9vh}
.pre-fig{grid-column:1/6;grid-row:2;position:relative}
.glimg{width:100%;height:100%;min-height:200px}
.pre-fig .glimg{aspect-ratio:3/4;height:auto}
figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--bone2)}
.pre-text{grid-column:7/13;grid-row:2;align-self:center}
.pre-q{font-size:clamp(40px,4.4vw,78px);font-weight:200;line-height:1.36;letter-spacing:.04em}
.pre-q em{color:var(--red);font-weight:500}
.pre-qen{font-family:var(--latin);font-style:italic;font-size:22px;line-height:1.5;color:var(--bone2);margin:30px 0 56px;max-width:30em}
.pre-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;font-size:14px;line-height:2.15;color:var(--bone2);padding-top:28px;border-top:1px solid var(--line)}
.pre-cols em{color:var(--bone)}
.pre-sig{display:flex;gap:28px;margin-top:40px;color:var(--dim)}

/* ===== works intro ===== */
.works-intro{padding:16vh 0 8vh}
.wi-row{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--gx)}
.wi-note{text-align:right;font-size:14px;letter-spacing:.2em;line-height:2;color:var(--bone2)}
.wi-note i{font-family:var(--latin);font-style:italic;letter-spacing:.02em;font-size:17px}
.wi-title{display:flex;align-items:baseline;gap:3vw;padding:4vh var(--gx) 2vh;font-weight:200;font-size:clamp(120px,15vw,280px);line-height:1;letter-spacing:.06em}
.wi-title i{font-family:var(--latin);font-style:italic;font-weight:300;font-size:.5em;letter-spacing:-.01em;color:var(--bone2)}
.marquee.outline{font-family:var(--latin);font-style:italic;font-size:clamp(60px,7vw,120px);font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(235,229,216,.22);padding:2vh 0}
.marquee.outline b{-webkit-text-stroke:0;color:var(--red);font-size:.5em}

/* ===== chapters ===== */
.chapter{position:relative;padding:14vh var(--gx);min-height:100vh;--acc:#d6452e}
.ch-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center}
.ch-img{position:relative;height:74vh}
.ch-img .glimg{height:100%}
.ch-img .frame-tc{position:absolute;left:16px;top:14px;color:rgba(235,229,216,.75);z-index:2;display:flex;gap:16px}
.ch-img .frame-tc i{color:var(--acc)}
.ch-img .corner{position:absolute;width:18px;height:18px;border-color:var(--acc);border-style:solid;border-width:0}
.ch-img .corner.a{left:-10px;top:-10px;border-left-width:1px;border-top-width:1px}
.ch-img .corner.b{right:-10px;bottom:-10px;border-right-width:1px;border-bottom-width:1px}
.ch-meta{position:relative;z-index:3}
.ch-num{font-family:var(--latin);font-style:italic;font-weight:300;font-size:120px;line-height:.8;color:var(--acc)}
.ch-num small{font-size:.24em;color:var(--bone2);margin-left:8px;font-style:normal;font-family:var(--mono);letter-spacing:.2em}
.ch-title{font-weight:700;font-size:clamp(84px,9vw,170px);line-height:1;letter-spacing:.08em;margin:24px 0 10px;white-space:nowrap}
.ch-title.long{font-size:clamp(64px,6.6vw,124px)}
.ch-en{font-family:var(--latin);font-style:italic;font-size:30px;color:var(--bone2)}
.ch-facts{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:34px 0 36px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--bone2);letter-spacing:.1em;max-width:420px}
.ch-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);padding-top:3px}
.ch-facts dd{color:var(--bone)}
.ch-enter{display:inline-flex;align-items:center;gap:18px;padding:16px 26px 16px 30px;border:1px solid rgba(235,229,216,.28);border-radius:100px;font-size:13px;letter-spacing:.3em;transition:background .5s var(--ease),border-color .5s,color .5s}
.ch-enter i{font-family:var(--latin);font-style:italic;letter-spacing:.02em;font-size:16px;color:var(--bone2)}
.ch-enter b{width:28px;height:28px;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-weight:400;font-size:13px;color:var(--ink);transition:transform .5s var(--ease)}
.ch-enter:hover{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.ch-enter:hover i{color:var(--ink)} .ch-enter:hover b{background:var(--ink);color:var(--acc);transform:rotate(-45deg)}
/* layout A: image right */
.chapter.A .ch-img{grid-column:5/13;grid-row:1}
.chapter.A .ch-meta{grid-column:1/6;grid-row:1}
.chapter.A .ch-title{mix-blend-mode:difference}
/* layout B: image left */
.chapter.B .ch-img{grid-column:1/8;grid-row:1;height:66vh}
.chapter.B .ch-meta{grid-column:8/13;grid-row:1;padding-left:2vw}
/* layout C: full bleed */
.chapter.C{padding:10vh 0}
.chapter.C .ch-grid{display:block;position:relative}
.chapter.C .ch-img{height:92vh;margin:0 var(--gx)}
.chapter.C .ch-meta{position:absolute;left:calc(var(--gx) + 5vw);bottom:9vh}
.chapter.C .ch-facts{display:none}
.chapter.C .ch-title{font-size:clamp(100px,12vw,230px)}
.ch-vert{position:absolute;right:calc(var(--gx) - 30px);top:14vh;writing-mode:vertical-rl;color:var(--bone2);display:flex;gap:18px;z-index:3}
.ch-vert b{color:var(--acc);font-weight:400}

/* ===== index ===== */
.index{padding:14vh var(--gx) 18vh}
.idx-list{list-style:none;margin-top:7vh;border-top:1px solid var(--line)}
.idx-list li{display:grid;grid-template-columns:80px 1fr 1fr 160px 120px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .6s var(--ease)}
.idx-list li::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:0;background:linear-gradient(90deg,rgba(214,69,46,.18),transparent);transition:width .8s var(--ease)}
.idx-list li:hover{padding-left:24px}
.idx-list li:hover::before{width:100%}
.idx-list .n{font-family:var(--latin);font-style:italic;font-size:18px;color:var(--dim)}
.idx-list .t{font-size:40px;font-weight:300;letter-spacing:.14em}
.idx-list .e{font-family:var(--latin);font-style:italic;font-size:22px;color:var(--bone2)}
.idx-list .k,.idx-list .y{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--bone2);text-align:right}
.idx-list .new{color:var(--red)}

/* ===== listen ===== */
.listen{padding:18vh var(--gx) 16vh;min-height:100vh}
.ls-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:6vw;margin-top:8vh;align-items:start}
.ls-cue{color:var(--red)}
.ls-title{font-weight:900;font-size:clamp(200px,22vw,400px);line-height:.95;letter-spacing:.02em;margin:10px 0 0 -.04em;background:linear-gradient(180deg,var(--bone) 0%,var(--bone) 58%,rgba(235,229,216,.15) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ls-en{font-family:var(--latin);font-style:italic;font-size:34px;color:var(--bone2);margin-top:-6px}
.ls-desc{margin:26px 0 36px;font-size:14px;line-height:2.1;color:var(--bone2);max-width:30em;min-height:4.2em}
.transport{display:grid;grid-template-columns:auto auto 1fr;gap:26px;align-items:center;padding-top:26px;border-top:1px solid var(--line)}
.play{width:78px;height:78px;border-radius:50%;background:var(--bone);display:grid;place-items:center;transition:background .4s,transform .4s var(--ease)}
.play:hover{background:var(--red)}
.play span{width:0;height:0;border-left:16px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.play.on span{width:14px;height:18px;border:0;border-left:5px solid var(--ink);border-right:5px solid var(--ink);margin:0}
.tp-tc{font-size:13px;color:var(--bone)} .tp-tc i{color:var(--dim);margin:0 8px}
#tpWave{width:100%;height:56px}
.sheet-head{display:grid;grid-template-columns:70px 1fr 1fr 70px;padding:0 0 14px;color:var(--dim);border-bottom:1px solid var(--line)}
#tracks{list-style:none}
#tracks li{display:grid;grid-template-columns:70px 1fr 1fr 70px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease)}
#tracks li:hover{padding-left:12px}
#tracks .c{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.12em}
#tracks .t{font-size:28px;font-weight:500;letter-spacing:.24em;display:flex;align-items:baseline;gap:14px}
#tracks .t i{font-family:var(--latin);font-style:italic;font-weight:300;font-size:17px;letter-spacing:.02em;color:var(--bone2)}
#tracks .v{font-size:12px;letter-spacing:.14em;color:var(--bone2)}
#tracks .d{font-family:var(--mono);font-size:11px;color:var(--bone2);text-align:right}
#tracks li canvas{position:absolute;left:70px;right:0;bottom:-1px;height:2px;width:calc(100% - 70px)}
#tracks li.on .t,#tracks li.on .c{color:var(--red)}
.ls-note{margin-top:26px;color:var(--dim);line-height:2;font-size:9.5px}

/* ===== journey ===== */
.journey{padding:18vh var(--gx) 16vh}
.jr-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2vw;font-weight:200;font-size:clamp(64px,7vw,128px);line-height:1.15;letter-spacing:.06em;margin:6vh 0 12vh}
.jr-title i{font-family:var(--latin);font-style:italic;font-weight:300;font-size:.32em;color:var(--bone2);letter-spacing:0;width:100%;margin-top:14px}
.jr-body{display:grid;grid-template-columns:5fr 7fr;gap:4vw;position:relative}
.jr-pin{height:76vh;position:relative;will-change:transform}
.jr-side{display:flex;gap:22px;color:var(--dim)}
.jr-side .a{color:var(--bone)} .jr-side.screen .a{color:var(--dim)} .jr-side.screen .b{color:var(--red)}
.jr-year{font-family:var(--latin);font-weight:300;font-style:italic;font-size:clamp(150px,17vw,300px);line-height:1;margin-top:3vh;letter-spacing:-.03em;transition:color .8s}
.jr-pin.screen .jr-year{color:var(--red)}
.jr-bar{height:1px;background:var(--line);margin-top:3vh;position:relative;width:80%}
.jr-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--bone);width:0}
.jr-list{list-style:none;border-top:1px solid var(--line)}
.jr-list li{padding:44px 0 44px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:20px;opacity:.35;transition:opacity .8s var(--ease)}
.jr-list li.cur{opacity:1}
.jr-list .yy{font-family:var(--latin);font-style:italic;font-size:30px;color:var(--bone2)}
.jr-list li.scr .yy{color:var(--red)}
.jr-list h3{font-weight:500;font-size:28px;letter-spacing:.14em;line-height:1.5}
.jr-list p{margin-top:12px;font-size:14px;line-height:2.1;color:var(--bone2)}
.jr-list p i{display:block;font-family:var(--latin);font-style:italic;font-size:17px;line-height:1.5;margin-top:6px}
.jr-list li.turn{padding:64px 0}
.jr-list li.turn h3{font-size:34px;color:var(--bone)}
.jr-list li.turn .bridge{grid-column:1/-1;margin-top:26px;padding:22px 0 0;border-top:1px dashed rgba(214,69,46,.5);font-size:22px;letter-spacing:.24em;color:var(--red)}

/* ===== studio ===== */
.studio{padding:18vh var(--gx) 16vh}
.st-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-top:8vh;align-items:start}
.st-fig{grid-column:1/8}
.st-fig .glimg{aspect-ratio:4/3;height:auto}
.st-text{grid-column:8/13;padding-left:2vw;padding-top:4vh}
.st-big{font-size:clamp(56px,5.4vw,100px);font-weight:200;line-height:1.3;letter-spacing:.06em;display:flex;flex-direction:column}
.st-big .red{color:var(--red);font-weight:300}
.st-q{margin:42px 0 0;font-size:16px;line-height:2.1;letter-spacing:.06em;border-left:1px solid var(--red);padding-left:22px}
.st-q cite{display:block;margin-top:12px;color:var(--dim);font-style:normal}
.st-en{font-family:var(--latin);font-style:italic;font-size:19px;line-height:1.6;color:var(--bone2);margin-top:28px}
.st-nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
.st-nums div{padding-top:20px;display:flex;flex-direction:column;gap:8px}
.st-nums b{font-family:var(--latin);font-weight:300;font-size:54px;line-height:1}
.st-nums span{color:var(--bone2)}

/* ===== contact ===== */
.contact{padding:20vh var(--gx) 80px;min-height:100vh}
.ct-big{font-size:clamp(76px,9vw,170px);font-weight:200;line-height:1.16;letter-spacing:.04em;margin-top:6vh;display:flex;flex-direction:column}
.ct-big em{color:var(--red);font-weight:900}
.ct-en{font-family:var(--latin);font-style:italic;font-size:34px;color:var(--bone2);margin-top:18px}
.ct-row{display:grid;grid-template-columns:auto 1fr;gap:8vw;align-items:center;margin-top:12vh}
.ct-btn{position:relative;width:220px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:50%;transition:background .6s var(--ease),color .5s}
.ct-btn svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(235,229,216,.35);stroke-width:1}
.ct-btn .zh{font-size:16px;letter-spacing:.32em}
.ct-btn .en{font-family:var(--latin);font-style:italic;font-size:17px;color:var(--bone2)}
.ct-btn:hover{background:var(--red)} .ct-btn:hover .en{color:var(--ink)}
.ct-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.ct-list div{padding-top:22px;display:flex;flex-direction:column;gap:14px}
.ct-list span{color:var(--bone2)}
.ct-list a,.ct-list p{font-family:var(--latin);font-size:28px;font-weight:300}
.ct-list p{font-family:var(--serif);font-size:17px;letter-spacing:.1em;line-height:1.7}
footer{margin-top:16vh}
.foot-mq{font-family:var(--latin);font-style:italic;font-size:clamp(70px,9vw,160px);font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(235,229,216,.18);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2vh 0}
.foot-mq span:nth-child(4n+1){font-family:var(--serif);font-style:normal;font-weight:200}
.foot-mq b{-webkit-text-stroke:0;color:var(--red);font-size:.35em}
.foot-row{display:flex;justify-content:space-between;padding-top:22px;color:var(--dim)}

/* ===== detail ===== */
#detail{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
#detail.open{visibility:visible;pointer-events:auto}
.dt-scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.dt-scroll::-webkit-scrollbar{display:none}
.dt-inner{min-height:100vh;--acc:#d6452e}
.dt-close{position:fixed;right:var(--gx);top:22px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(235,229,216,.4);z-index:3;opacity:0;transition:opacity .6s .6s,background .4s}
.dt-close span{position:absolute;left:50%;top:50%;width:20px;height:1px;background:var(--bone);margin-left:-10px}
.dt-close span:first-child{transform:rotate(45deg)} .dt-close span:last-child{transform:rotate(-45deg)}
.dt-close:hover{background:var(--acc)}
#detail.open .dt-close{opacity:1}
.dt-hero{height:100vh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gx) 9vh;background:linear-gradient(90deg,rgba(10,9,8,.82) 0%,rgba(10,9,8,.35) 45%,rgba(10,9,8,0) 70%),linear-gradient(0deg,rgba(10,9,8,.9),rgba(10,9,8,0) 45%)}
.dt-top{position:absolute;left:var(--gx);right:140px;top:32px;display:flex;justify-content:space-between;color:rgba(235,229,216,.75)}
.dt-top i{color:var(--acc)}
.dt-kicker{color:var(--acc)}
.dt-title{font-weight:900;font-size:clamp(150px,17vw,320px);line-height:1;letter-spacing:.06em;margin:18px 0 10px}
.dt-title.long{font-size:clamp(100px,11vw,210px)}
.dt-en{font-family:var(--latin);font-style:italic;font-size:40px;color:var(--bone)}
.dt-credits{display:flex;gap:46px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(235,229,216,.25);max-width:1100px}
.dt-credits div{display:flex;flex-direction:column;gap:8px}
.dt-credits span{color:rgba(235,229,216,.6)}
.dt-credits b{font-weight:500;font-size:15px;letter-spacing:.14em}
.dt-play{position:absolute;right:var(--gx);bottom:9vh;display:flex;align-items:center;gap:20px}
.dt-play .play{width:96px;height:96px;background:var(--acc)}
.dt-play .lbl{text-align:right}
.dt-play .lbl b{display:block;font-size:30px;font-weight:500;letter-spacing:.24em}
.dt-play .lbl span{color:rgba(235,229,216,.7)}
.dt-body{background:rgba(10,9,8,.94);padding:16vh var(--gx) 14vh;position:relative}
.dt-intro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.dt-intro .big{grid-column:1/9;font-size:clamp(40px,3.8vw,68px);font-weight:200;line-height:1.45;letter-spacing:.04em}
.dt-intro .big em{color:var(--acc);font-weight:500}
.dt-intro .side{grid-column:10/13;align-self:end;font-family:var(--latin);font-style:italic;font-size:19px;line-height:1.6;color:var(--bone2)}
.dt-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:0 6vw;margin-top:14vh}
.dt-note{padding:40px 0 46px;border-top:1px solid var(--line);display:grid;grid-template-columns:90px 1fr;gap:20px}
.dt-note .k{font-family:var(--latin);font-style:italic;font-size:46px;line-height:1;color:var(--acc)}
.dt-note h4{font-size:26px;font-weight:500;letter-spacing:.22em}
.dt-note h4 i{font-family:var(--latin);font-style:italic;font-weight:300;font-size:18px;letter-spacing:.02em;color:var(--bone2);margin-left:12px}
.dt-note p{margin-top:14px;font-size:14.5px;line-height:2.15;color:var(--bone2)}
.dt-note p q{color:var(--bone)}
.dt-note .rhythm{display:flex;gap:10px;margin-top:18px;align-items:flex-end;height:34px}
.dt-note .rhythm i{width:6px;background:var(--acc);display:block}
.dt-cues{margin-top:12vh}
.dt-cues h5{font-weight:300;font-size:15px;letter-spacing:.3em;color:var(--bone2);margin-bottom:22px}
.cue-row{display:grid;grid-template-columns:110px 120px 1fr 1.4fr 90px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:14px;color:var(--bone2)}
.cue-row.h{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.16em;border-top:1px solid var(--line)}
.cue-row b{font-size:22px;font-weight:500;letter-spacing:.2em;color:var(--bone)}
.cue-row .m{font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.dt-src{margin-top:8vh;color:var(--dim);line-height:2}
.dt-next{display:flex;justify-content:space-between;align-items:center;margin-top:12vh;padding-top:30px;border-top:1px solid var(--line)}
.dt-next a{font-size:56px;font-weight:200;letter-spacing:.1em}
.dt-next a i{font-family:var(--latin);font-style:italic;font-size:24px;color:var(--bone2);margin-left:18px}