/* Layout: 一本有配樂的畫冊——夜色的「放映室」與冷壓紙的「圖版頁」交替；捲動就是唱針，捲到哪一頁就放那一張的曲子。單一世界，不做亮暗切換。 */
:root{
  --night:#0c0e13;
  --night-2:#161922;
  --paper:#f2ebdf;
  --paper-ink:#2a2620;
  --paper-mute:#6a6155;
  --candle:#e0a65e;
  --rose:#a8665e;
  --moon:#ece6da;
  --moon-mute:#a3a7b0;
  --hair:rgba(236,230,218,.16);
  --pulse:0;
  --f-display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Consolas,monospace;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --paper-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .27  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --paper-fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .47  0 0 0 0 .36  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);overflow-x:clip}
body{margin:0;background:var(--night);color:var(--moon);font-family:var(--f-body);font-size:16px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--night)}
.wrap{padding-left:var(--gl);padding-right:var(--gr);max-width:1280px;margin-inline:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:300;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--candle);outline-offset:4px;border-radius:2px}
.paper{background-color:var(--paper);background-image:var(--paper-fibre),var(--paper-grain);color:var(--paper-ink)}
.paper .mono{color:var(--paper-mute)}
.night .mono{color:var(--moon-mute)}

.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.07;mix-blend-mode:overlay;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.glow-cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:79;
  background:radial-gradient(circle,rgba(224,166,94,calc(.10 + var(--pulse)*.12)),transparent 62%);mix-blend-mode:screen;opacity:0;transition:opacity .6s}
@media (pointer:fine){.glow-cursor.on{opacity:1}}

.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:1.5px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--candle);z-index:95}
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:85;backdrop-filter:saturate(1.3) blur(18px);-webkit-backdrop-filter:saturate(1.3) blur(18px);background:rgba(12,14,19,.55);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:52px;gap:16px}
.brand{font-family:var(--f-display);font-style:italic;font-size:21px;font-weight:400;color:var(--moon);text-decoration:none}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--moon-mute);text-decoration:none;font-size:13px;letter-spacing:.04em;transition:color .3s}
.nav ul a:hover{color:var(--moon)}
.nav .listen{font-size:13px;text-decoration:none;color:var(--night);background:var(--moon);padding:7px 14px;border-radius:999px;font-weight:500}
@media (max-width:760px){.nav ul{display:none}}

/* 1 Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--night)}
.hero-paper{position:absolute;inset:0;opacity:0;background-color:var(--paper);background-image:var(--paper-fibre),var(--paper-grain)}
.mat{position:absolute;inset:0;opacity:0;background:#f8f3ea;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -20px rgba(60,40,20,.35),0 12px 24px -12px rgba(60,40,20,.25)}
.plate{position:absolute;inset:0;clip-path:inset(0% 0% 0% 0%);will-change:clip-path}
.plate img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.1);will-change:transform}
.plate .shade{position:absolute;inset:0;background:radial-gradient(60% 42% at 50% 50%,rgba(12,14,19,.62),rgba(12,14,19,.25) 60%,transparent 85%),linear-gradient(180deg,rgba(12,14,19,.5),rgba(12,14,19,.08) 35%,rgba(12,14,19,.2) 60%,rgba(12,14,19,.88))}
#motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-copy{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;text-align:center;gap:22px;padding-left:var(--gl);padding-right:var(--gr)}
.hero-copy .mono{color:var(--moon)}
.hero-title{font-size:clamp(56px,11.5vw,184px);line-height:.92;font-style:italic;font-weight:300;color:var(--moon);text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero-title .l{display:inline-block;will-change:transform,filter,opacity}
.hero-sub{font-family:var(--f-display);font-size:clamp(20px,2.4vw,30px);font-weight:400;color:var(--moon);max-width:24em}
.enter{margin-top:10px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.enter .btn{gap:12px}
.enter .quiet{font-size:13px;color:var(--moon);opacity:.75}
.hero-cap{position:absolute;left:var(--gl);bottom:calc(26px + env(safe-area-inset-bottom,0px));color:var(--moon);opacity:.85}
.plate-cap{position:absolute;left:0;right:0;bottom:calc(5.5% + env(safe-area-inset-bottom,0px));text-align:center;opacity:0;color:var(--paper-ink)}
.plate-cap em{font-family:var(--f-display);font-size:clamp(18px,1.8vw,22px);font-style:italic}
.plate-cap .mono{display:block;margin-top:4px;color:var(--paper-mute)}
.cue{position:absolute;right:var(--gr);bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:var(--moon)}
.cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--moon),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.hero-cap{display:none}.plate-cap{bottom:calc(10% + env(safe-area-inset-bottom,0px))}}

/* 2 宣言 */
.statement{padding-block:16vh 18vh}
.statement .wrap{display:grid;gap:36px}
.statement p.big{font-family:var(--f-display);font-weight:300;font-size:clamp(32px,4.6vw,66px);line-height:1.18;max-width:19em}
.statement .w{opacity:.18}
.statement em{font-style:italic;color:var(--rose)}
.rule{display:flex;align-items:center;gap:18px}
.rule::after{content:"";height:1px;flex:1;background:rgba(42,38,32,.2)}
.score{display:flex;gap:28px;flex-wrap:wrap;color:var(--paper-mute)}
.score span{display:flex;gap:10px;align-items:baseline}
.score b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:20px;color:var(--paper-ink);letter-spacing:0;text-transform:none}

/* 3 三幕 */
.scenes{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.amb{position:absolute;inset:-8%}
.amb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(44px) saturate(1.2) brightness(calc(.36 + var(--pulse)*.16));transform:scale(1.15);opacity:0}
.amb img:first-child{opacity:1}
.scenes-grid{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6vw;padding-top:52px}
.window{position:relative;height:min(calc(100vh - 140px),820px);aspect-ratio:9/16;max-width:100%;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(224,166,94,.35),0 0 0 10px rgba(12,14,19,.55),0 0 0 11px rgba(236,230,218,.12),0 0 calc(40px + var(--pulse)*120px) rgba(224,166,94,calc(var(--pulse)*.35)),0 50px 120px -30px rgba(0,0,0,.9)}
.window video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.window video:first-of-type{opacity:1}
.acts{display:grid}
.act{grid-area:1/1;max-width:520px}
.act .time{display:flex;align-items:baseline;gap:14px;color:var(--candle)}
.act .time b{font-family:var(--f-display);font-weight:300;font-size:clamp(44px,5vw,72px);font-style:italic;line-height:1;letter-spacing:-.02em}
.act h3{margin-top:18px;font-size:clamp(40px,5.2vw,78px);line-height:1.02}
.act p{margin-top:18px;color:var(--moon);opacity:.85;font-size:17px;max-width:30em}
.act .meta{margin-top:26px;display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--hair)}
.act .meta span{display:flex;gap:12px;align-items:center}
.vu{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.vu i{width:2px;height:2px;background:var(--candle);transition:height .08s}
.ticks{position:absolute;right:var(--gr);top:50%;transform:translateY(-50%);display:grid;gap:18px;justify-items:end}
.ticks span{display:flex;align-items:center;gap:10px;opacity:.35;transition:opacity .5s}
.ticks span::after{content:"";width:18px;height:1px;background:var(--moon);transition:width .5s}
.ticks span.on{opacity:1}.ticks span.on::after{width:42px;background:var(--candle)}
@media (max-width:900px){
  .scenes-grid{grid-template-columns:1fr;align-items:end;padding-bottom:calc(9vh + env(safe-area-inset-bottom,0px))}
  .window{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .window::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,19,.2),rgba(12,14,19,.1) 35%,rgba(12,14,19,.92) 78%)}
  .scenes-grid .acts{position:relative;z-index:2}
  .ticks{display:none}
}

/* 4 繪製過程 */
.process{position:relative;height:100vh;height:100svh;overflow:hidden}
.process .wrap{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6vw;align-items:center}
.process h2{font-size:clamp(44px,6vw,92px);line-height:1;font-style:italic}
.process .lead{margin-top:22px;color:var(--paper-mute);font-size:17px;max-width:28em}
.steps{margin-top:40px;display:grid;gap:4px;max-width:420px}
.step{display:grid;grid-template-columns:3.2em 1fr;gap:10px;padding:12px 0;border-top:1px solid rgba(42,38,32,.14);opacity:.35;transition:opacity .4s}
.step.on{opacity:1}
.step b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:22px;line-height:1.2}
.step span{font-size:15px;line-height:1.45}
.step span strong{display:block;font-weight:600}
.framed{position:relative;padding:clamp(14px,1.6vw,22px);background:#fbf7f0;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 70px -30px rgba(60,40,20,.45),0 10px 20px -10px rgba(60,40,20,.25)}
.framed .inner{position:relative;height:min(72vh,740px);aspect-ratio:9/16;max-width:100%;overflow:hidden;background:#e9e1d3}
.framed video,.framed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.framecount{margin-top:12px;display:flex;justify-content:space-between;gap:12px;color:var(--paper-mute)}
@media (max-width:900px){
  .process{height:auto;overflow:visible}
  .process .wrap{grid-template-columns:1fr;padding-block:14vh;gap:40px}
  .framed .inner{height:auto;width:100%}
}

/* 5 只讓一小塊動 */
.still{padding-block:20vh;overflow:hidden}
.still .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7vw;align-items:center}
.still .win{position:relative;height:min(76vh,760px);aspect-ratio:9/16;max-width:100%;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--hair),0 50px 100px -30px rgba(0,0,0,.9)}
.still .win video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.still .box{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 42% 34% at 47% 42%,rgba(12,14,19,0) 40%,rgba(12,14,19,.55) 100%)}
.still h2{font-size:clamp(44px,5.6vw,86px);line-height:1}
.still h2 em{font-style:italic;color:var(--candle)}
.still .lead{margin-top:24px;font-size:17px;max-width:30em;opacity:.82}
.figs{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair)}
.fig{padding:22px 18px 0 0;display:grid;gap:6px;min-width:0}
.fig b{font-family:var(--f-display);font-weight:300;font-size:clamp(44px,5vw,76px);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.fig b small{font-family:var(--f-body);font-size:.26em;margin-left:.3em;color:var(--moon-mute);letter-spacing:.04em}
.fig span{color:var(--moon-mute);font-size:14px}
@media (max-width:900px){.still .wrap{grid-template-columns:1fr}.still .win{height:auto;width:min(100%,calc(74vh*9/16));margin-inline:auto}}
@media (max-width:520px){.figs{grid-template-columns:1fr}.fig{padding-bottom:14px;border-bottom:1px solid var(--hair)}}

/* 6 作品牆 */
.wall{padding-block:18vh 14vh;overflow:hidden}
.wall-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:9vh}
.wall-head h2{font-size:clamp(44px,6vw,96px);line-height:.98}
.wall-head h2 em{font-style:italic}
.wall-head p{max-width:24em;color:var(--paper-mute)}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px);align-items:start}
.col{display:grid;gap:clamp(22px,3vw,44px);min-width:0}
.col:nth-child(2){margin-top:14vh}.col:nth-child(3){margin-top:5vh}.col:nth-child(4){margin-top:20vh}
.pin{display:grid;gap:12px;min-width:0}
.pin .card{position:relative;padding:10px;background:#fbf7f0;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 44px -24px rgba(60,40,20,.5),0 6px 12px -8px rgba(60,40,20,.3);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s;cursor:pointer}
.pin:hover .card,.pin.live .card{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 40px 60px -26px rgba(60,40,20,.6),0 10px 18px -10px rgba(60,40,20,.3)}
.pin .media{position:relative;aspect-ratio:9/16;max-width:100%;overflow:hidden;background:#e5dccc}
.pin video,.pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin .code{position:absolute;left:10px;top:10px;padding:4px 7px;background:rgba(12,14,19,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--moon);border-radius:2px}
.pin .hear{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(12,14,19,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--moon);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.pin:hover .hear,.pin.live .hear{opacity:1;transform:none}
.pin h3{font-size:clamp(20px,1.7vw,25px);line-height:1.12;font-style:italic;font-weight:400}
.pin .line{font-size:13.5px;color:var(--paper-mute);line-height:1.45}
.pin .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;padding-top:8px;border-top:1px solid rgba(42,38,32,.14)}
.pin .foot a{font-size:13px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(42,38,32,.35);padding-bottom:1px}
.pin .foot a:hover{border-color:var(--paper-ink)}
@media (max-width:900px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.col:nth-child(n){margin-top:0}.col:nth-child(2n){margin-top:10vh}}

/* 7 收尾＋聽的地方 */
.finale{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;padding-block:18vh 12vh;overflow:hidden}
.finale::before{content:"";position:absolute;width:90vmax;aspect-ratio:1;border-radius:50%;left:50%;top:45%;transform:translate(-50%,-50%) scale(calc(var(--glow,.5) + var(--pulse)*.25));
  background:radial-gradient(circle,rgba(224,166,94,.20),rgba(224,166,94,.05) 35%,transparent 62%);pointer-events:none}
.finale h2{font-size:clamp(64px,12vw,200px);line-height:.9;font-style:italic}
.finale p{margin:28px auto 0;max-width:27em;font-size:18px;opacity:.85}
.ctas{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:15px;letter-spacing:.02em;padding:15px 28px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:transform .3s,background .3s,box-shadow .3s}
.btn.solid{background:var(--moon);color:var(--night);font-weight:500}
.btn.solid:hover{transform:scale(1.04);background:#fff}
.btn.line{color:var(--moon);box-shadow:inset 0 0 0 1px rgba(236,230,218,.35)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--moon)}
.everywhere{position:relative;margin-top:12vh;width:100%;max-width:980px;margin-inline:auto}
.everywhere .mono{display:block;margin-bottom:22px}
.platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.platforms a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:30px clamp(16px,2vw,26px);text-decoration:none;text-align:left;border-left:1px solid var(--hair);overflow:hidden;min-width:0}
.platforms a:first-child{border-left:0}
.platforms a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(224,166,94,.14),transparent);transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.platforms a:hover::before{transform:none}
.platforms em{position:relative;font-family:var(--f-display);font-size:clamp(22px,2.2vw,30px);font-style:italic;line-height:1.05;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.platforms a:hover em{transform:translateX(4px)}
.platforms .go{position:relative;flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(236,230,218,.3);display:grid;place-items:center;overflow:hidden;transition:background .45s,box-shadow .45s}
.platforms .go svg{width:13px;height:13px;fill:none;stroke:var(--moon);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.2,.7,.2,1),stroke .45s}
.platforms .go svg+svg{position:absolute;transform:translate(-160%,160%)}
.platforms a:hover .go{background:var(--candle);box-shadow:inset 0 0 0 1px var(--candle)}
.platforms a:hover .go svg{transform:translate(160%,-160%);stroke:var(--night)}
.platforms a:hover .go svg+svg{transform:none}
@media (max-width:700px){.platforms{grid-template-columns:repeat(2,minmax(0,1fr))}.platforms a:nth-child(3){border-left:0}.platforms a:nth-child(-n+2){border-bottom:1px solid var(--hair)}}
.more{margin-top:26px;display:grid;gap:12px;justify-items:center}
.more p{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 12px;font-family:var(--f-display);font-size:clamp(18px,1.7vw,21px);font-style:italic}
.more .mono{font-style:normal;margin-right:6px}
.more a{text-decoration:none;background:linear-gradient(var(--candle),var(--candle)) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .3s}
.more a:hover{background-size:100% 1px;color:#fff}
.more i{font-style:normal;color:var(--moon-mute);opacity:.6}
/* 地圖：輕量地球。每盞燈是一張專輯的真實地點，捲動時轉到下一站 */
.atlas{position:relative;padding-block:16vh 14vh;overflow:hidden}
.atlas-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.atlas-grid{position:relative}
#stars{position:absolute;left:calc(50% - 50vw);width:100vw;top:-18vh;height:calc(100% + 36vh);z-index:0;pointer-events:none}
.atlas-grid > div{position:relative;z-index:1}
.globe{position:relative;width:100%;max-width:640px;aspect-ratio:1;justify-self:center}
.globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.atlas h2{font-size:clamp(44px,5.4vw,88px);line-height:.98}
.atlas h2 em{font-style:italic;color:var(--candle)}
.atlas .figs{margin-top:36px;border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:clamp(20px,3vw,48px)}
.atlas .fig{padding:0}
.stop{margin-top:44px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;min-height:120px}
.stop .mono{display:block;margin-bottom:6px}
.stop em{display:block;font-family:var(--f-display);font-style:italic;font-size:clamp(26px,2.6vw,38px);line-height:1.1;color:var(--moon)}
.stop small{display:block;margin-top:6px;color:var(--moon-mute);font-size:13.5px}
@media (max-width:900px){.atlas-grid{grid-template-columns:1fr}.globe{max-width:520px}}
@media (max-width:520px){.atlas .figs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.voices{margin-top:12vh;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:end}
.voice{margin:0;display:grid;gap:18px;padding-top:22px;border-top:1px solid var(--hair);cursor:default;transition:border-color .5s}
.voice:hover{border-color:var(--candle)}
.voice blockquote{margin:0;font-family:var(--f-display);font-style:italic;font-weight:300;font-size:clamp(26px,3vw,44px);line-height:1.2;text-wrap:balance}
.voice:last-child blockquote{font-size:clamp(30px,3.6vw,56px)}
@media (max-width:760px){.voices{grid-template-columns:1fr}}
.atlas-aura{position:absolute;inset:-12%;pointer-events:none;z-index:0}
.atlas-aura img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(80px) saturate(1.5);opacity:0;transition:opacity 1.8s ease}
.atlas-aura img.on{opacity:.34}
.atlas-veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--night) 0%,rgba(12,14,19,.35) 22%,rgba(12,14,19,.25) 60%,var(--night) 100%)}
.atlas .wrap{position:relative;z-index:1}
.postcard{position:relative;width:clamp(130px,13vw,190px);margin:0;padding:7px 7px 0;background:#fbf7f0;box-shadow:0 22px 40px -18px rgba(0,0,0,.8),0 4px 10px rgba(0,0,0,.35);
  transform:rotate(-2.5deg);pointer-events:none;opacity:0;transition:opacity .5s ease}
.postcard.on{opacity:1}
.postcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.postcard figcaption{font-family:var(--f-display);font-style:italic;font-size:13px;line-height:1.25;color:var(--paper-ink);padding:6px 2px 8px}
.voice .vt{width:clamp(110px,10vw,150px);padding:5px;background:#fbf7f0;box-shadow:0 18px 30px -16px rgba(0,0,0,.8);transform:rotate(-1.8deg)}
.voice .vt img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.voice:last-child .vt{transform:rotate(2deg)}
.finale-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.finale-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(1.1)}
.finale-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0%,rgba(12,14,19,.5) 22%,rgba(12,14,19,.55) 55%,rgba(12,14,19,.9) 85%,var(--night) 100%)}
.finale .wrap{position:relative;z-index:1}
.finale h2,.finale p{text-shadow:0 2px 30px rgba(0,0,0,.55)}
.platforms{background:rgba(12,14,19,.42);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:2px}
.colophon{border-top:1px solid var(--hair);padding-block:30px calc(30px + env(safe-area-inset-bottom,0px))}
.colophon .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:baseline}
.colophon p{color:var(--moon-mute);font-size:13px;max-width:60em}
.colophon p a{color:var(--moon);text-decoration:none;border-bottom:1px solid var(--hair)}
@media (max-width:700px){.colophon .wrap{grid-template-columns:1fr}}

/* 浮動唱機 */
.deck{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:86;display:flex;align-items:center;gap:12px;
  padding:8px 16px 8px 8px;border-radius:999px;border:1px solid var(--hair);background:rgba(12,14,19,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--moon);font:inherit;font-size:13px;cursor:pointer;text-align:left;max-width:calc(100vw - 36px)}
.disc{width:36px;height:36px;border-radius:50%;background:center/cover no-repeat var(--night-2);box-shadow:0 0 0 1px var(--hair),0 0 calc(var(--pulse)*22px) rgba(224,166,94,.6);position:relative;flex:none;transition:background-image .6s}
.disc::after{content:"";position:absolute;inset:42%;border-radius:50%;background:var(--night)}
.deck.on .disc{animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.deck .txt{min-width:0}
.deck .txt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.deck .txt small{display:block;color:var(--moon-mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

@media (prefers-reduced-motion:reduce){
  .grain,.cue i,.deck.on .disc{animation:none}
  .statement .w{opacity:1}
}

/* ===== 2026-10-30 細節與導流 ===== */
:root{
  --f-sig:"Maru Signature","Cormorant Garamond",Georgia,serif;
  --deckle-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='22' viewBox='0 0 520 22'%3E%3Cpath d='M0 22 L0.0 6.5 L2.3 7.1 L4.1 7.0 L6.5 7.5 L8.9 7.4 L10.6 8.7 L12.9 8.6 L15.9 8.7 L17.5 9.8 L20.2 10.1 L22.9 11.2 L25.2 11.0 L27.4 10.6 L30.2 9.7 L31.9 9.7 L34.8 9.3 L37.2 9.1 L39.1 8.2 L41.2 9.6 L43.1 8.7 L44.8 8.9 L46.9 10.2 L50.0 10.1 L52.2 10.0 L54.4 10.7 L56.9 9.5 L58.7 10.3 L61.6 10.4 L63.6 10.0 L66.9 10.4 L70.3 9.7 L73.7 8.9 L76.1 8.2 L79.2 8.5 L82.6 8.1 L86.0 7.6 L89.5 8.6 L91.7 9.5 L94.0 8.5 L95.6 9.1 L97.5 10.1 L100.9 8.8 L102.6 9.4 L104.4 9.6 L107.6 9.6 L109.9 11.2 L112.3 10.8 L115.6 12.0 L118.9 11.6 L121.2 11.1 L124.4 10.2 L126.3 9.1 L128.7 9.7 L131.3 9.2 L134.4 8.7 L137.2 9.4 L139.8 10.3 L141.8 10.4 L143.5 9.5 L146.0 8.6 L148.7 8.7 L151.1 9.0 L152.6 8.4 L155.6 8.2 L158.9 8.5 L161.7 8.2 L164.1 8.0 L165.8 8.0 L168.3 7.0 L170.8 5.8 L173.4 4.6 L176.7 3.8 L179.9 5.2 L182.4 5.2 L185.3 4.9 L187.4 4.3 L189.6 4.0 L193.0 3.9 L195.3 4.2 L198.4 4.8 L201.0 5.1 L203.1 5.4 L205.0 6.1 L208.2 6.8 L209.9 6.7 L211.7 6.6 L214.0 6.7 L216.1 6.4 L218.1 6.4 L220.8 4.8 L223.9 5.6 L226.2 5.7 L229.3 6.0 L232.3 6.7 L235.2 6.4 L236.8 7.5 L239.6 6.2 L243.1 8.1 L245.0 6.9 L247.7 7.9 L250.6 9.0 L253.6 9.2 L256.6 9.2 L259.3 8.1 L261.5 6.7 L263.2 7.6 L265.1 6.6 L267.2 6.8 L269.8 7.3 L272.1 6.5 L274.9 7.2 L278.3 6.1 L281.6 6.9 L285.0 5.3 L287.3 6.8 L290.5 6.3 L292.7 8.3 L295.8 8.8 L297.7 8.9 L299.3 8.9 L301.6 9.7 L304.3 8.7 L306.3 8.3 L309.2 8.5 L311.0 9.2 L313.7 9.8 L316.2 9.6 L318.6 10.0 L321.9 10.8 L324.7 9.7 L326.4 10.4 L328.7 9.6 L330.3 9.0 L332.6 11.1 L335.5 11.4 L338.4 11.6 L340.2 12.7 L341.8 13.0 L344.4 13.0 L346.1 12.1 L348.6 11.8 L351.3 11.5 L354.1 11.7 L356.8 11.0 L358.7 10.6 L362.1 10.2 L364.2 10.4 L366.8 10.5 L368.9 10.2 L370.4 9.4 L373.1 8.9 L374.9 8.2 L378.3 8.0 L380.0 8.6 L383.4 7.7 L386.6 8.1 L388.3 9.5 L391.2 9.6 L394.0 8.3 L396.0 8.0 L399.5 7.6 L402.7 6.7 L405.7 7.7 L407.4 7.9 L409.2 6.8 L410.8 7.5 L412.6 7.9 L414.1 7.3 L417.1 6.4 L419.8 6.5 L422.5 5.4 L425.6 6.4 L428.3 7.5 L431.6 8.2 L434.8 8.0 L437.0 9.1 L439.7 9.1 L441.6 8.8 L444.7 7.3 L446.5 8.1 L449.9 8.2 L452.3 8.0 L455.4 7.8 L458.0 7.3 L461.3 6.7 L464.5 4.8 L467.2 5.4 L470.2 5.7 L473.5 4.7 L476.0 5.6 L477.9 6.0 L481.4 6.5 L483.1 5.4 L485.3 6.2 L487.7 4.6 L490.3 4.6 L491.9 5.3 L495.4 5.8 L498.4 4.9 L501.0 5.7 L504.0 5.0 L505.6 5.6 L507.7 4.9 L510.1 4.7 L512.3 3.4 L514.6 4.5 L517.7 5.3 L520.0 6.3 L520 22Z'/%3E%3C/svg%3E");
  --deckle-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='22' viewBox='0 0 520 22'%3E%3Cpath d='M0 0 L0.0 15.9 L3.0 15.3 L6.2 13.2 L7.8 13.2 L10.8 13.3 L12.5 13.1 L15.6 12.9 L19.0 11.6 L21.8 11.1 L23.6 11.9 L26.1 11.4 L29.5 11.6 L32.3 12.2 L35.7 13.2 L38.6 13.0 L40.9 13.3 L42.8 13.6 L44.9 12.6 L46.6 12.0 L48.8 10.9 L51.9 11.3 L55.0 12.3 L56.8 11.9 L58.7 11.3 L61.1 11.5 L63.1 12.8 L65.8 11.5 L67.8 10.9 L71.3 11.5 L74.8 11.7 L76.5 12.7 L79.5 13.5 L81.7 14.3 L84.4 13.9 L86.0 14.7 L88.1 13.6 L89.9 14.6 L91.6 14.1 L94.0 12.3 L96.2 13.5 L99.0 13.0 L101.7 12.2 L104.1 12.1 L106.8 11.5 L109.8 10.8 L112.8 11.2 L115.3 10.1 L118.4 10.3 L121.6 10.8 L124.2 11.8 L125.8 12.4 L128.7 12.1 L131.9 12.9 L133.9 12.0 L136.7 12.9 L138.3 11.6 L140.9 13.0 L144.4 12.6 L147.4 12.6 L149.4 13.3 L151.3 13.2 L153.6 12.8 L155.4 13.7 L157.6 13.9 L160.0 12.2 L163.2 14.1 L166.3 15.1 L168.3 15.1 L170.4 16.7 L172.1 17.3 L174.0 16.4 L175.6 17.3 L177.5 17.1 L179.0 17.7 L182.0 18.2 L184.3 17.6 L186.8 17.1 L188.4 16.8 L190.5 17.2 L192.2 18.5 L194.1 18.5 L196.1 18.2 L197.8 16.6 L200.3 16.6 L202.8 15.4 L204.4 16.4 L207.3 16.1 L209.8 15.0 L213.0 16.6 L215.3 16.4 L217.9 17.3 L221.0 15.6 L223.6 15.8 L226.7 14.9 L229.9 15.2 L231.5 14.6 L234.7 14.8 L236.9 14.4 L239.6 15.5 L242.7 15.2 L244.7 13.6 L246.3 13.2 L248.6 13.2 L251.4 12.2 L253.4 13.6 L255.9 13.7 L258.2 14.5 L259.9 14.2 L261.5 15.1 L263.8 15.9 L266.9 14.7 L268.5 14.8 L270.3 14.9 L272.0 14.8 L275.3 15.7 L277.2 15.7 L280.4 15.3 L282.2 15.3 L285.2 15.2 L288.6 16.0 L291.6 15.4 L293.4 13.8 L295.4 13.9 L297.6 13.0 L301.0 12.7 L303.6 12.6 L305.5 12.7 L308.5 12.9 L310.9 13.3 L312.5 13.3 L315.3 11.9 L318.6 12.5 L321.6 11.4 L325.0 11.8 L327.2 11.6 L328.7 12.1 L331.2 11.3 L333.9 12.0 L335.7 11.7 L338.7 9.4 L341.0 9.8 L343.6 9.6 L346.1 9.5 L348.3 9.2 L350.3 10.3 L352.9 9.7 L354.7 11.2 L356.8 11.4 L359.2 10.6 L361.1 10.9 L363.5 11.3 L366.0 11.7 L367.8 12.1 L370.1 12.5 L372.8 13.9 L376.3 14.9 L377.8 15.0 L380.7 14.8 L383.7 14.3 L385.8 13.0 L387.3 13.2 L390.8 12.8 L393.1 12.8 L395.7 13.5 L397.9 14.7 L400.8 14.3 L403.7 15.4 L406.0 15.0 L408.0 15.3 L411.0 15.4 L413.2 15.9 L416.1 15.4 L417.8 15.0 L421.3 15.6 L424.4 15.3 L425.9 15.7 L427.9 15.5 L430.7 13.7 L432.9 13.0 L434.9 13.6 L436.6 13.7 L439.8 13.5 L442.8 13.2 L445.6 14.3 L449.0 14.8 L451.4 13.3 L454.2 14.4 L457.4 14.2 L460.3 15.9 L463.2 16.1 L466.4 17.0 L469.7 16.7 L471.6 16.8 L473.5 16.4 L475.7 15.3 L477.9 15.5 L481.0 16.2 L483.7 16.7 L486.0 16.7 L488.9 16.9 L490.7 16.7 L493.2 16.8 L495.6 16.0 L498.4 16.2 L500.9 16.7 L503.3 16.5 L505.7 18.0 L507.6 18.4 L509.2 18.0 L511.5 18.0 L513.4 18.2 L515.8 17.6 L517.8 16.5 L520.0 15.7 L520 0Z'/%3E%3C/svg%3E");
}
::selection{background:rgba(224,166,94,.32);color:inherit}
html{scrollbar-color:rgba(224,166,94,.4) var(--night);scrollbar-width:thin}

/* 品牌字＝封面上的簽名 */
.brand{font-family:var(--f-sig);font-style:normal;font-size:27px;line-height:1;letter-spacing:0;padding-top:4px}
.colophon .brand{font-size:34px;color:var(--candle)}

/* 紙張毛邊：紙接夜色的地方像手撕的水彩紙，不是一刀切 */
.deckle-b,.deckle-tb{-webkit-mask:var(--deckle-bottom) left bottom/520px 22px repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 21px) no-repeat;
  mask:var(--deckle-bottom) left bottom/520px 22px repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 21px) no-repeat}
.deckle-tb{-webkit-mask:var(--deckle-top) left top/520px 22px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 42px) no-repeat,var(--deckle-bottom) left bottom/520px 22px repeat-x;
  mask:var(--deckle-top) left top/520px 22px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 42px) no-repeat,var(--deckle-bottom) left bottom/520px 22px repeat-x}

/* 作品牌：一張卡只給一個去處 */
.pin .foot a.go-listen{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--paper-ink);text-decoration:none;border:0;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(42,38,32,.28);transition:background .3s,color .3s,box-shadow .3s}
.pin .foot a.go-listen:hover,.pin.live .foot a.go-listen{background:var(--paper-ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-ink)}

/* 唱機：聽到喜歡的那一刻，旁邊就有整張專輯 */
.deckbar{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:86;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 36px)}
.deckbar .deck{position:static;max-width:100%}
.deck-album{flex:none;display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border-radius:999px;background:var(--candle);color:var(--night);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px -10px rgba(224,166,94,.7);opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1),background .3s}
.deck-album.on{opacity:1;transform:none;pointer-events:auto}
.deck-album:hover{background:#f0bd7c}
@media (max-width:520px){.deckbar{gap:6px}.deck{padding-right:12px}.deck .txt b,.deck .txt small{max-width:118px}.deck-album{padding:11px 13px}}

/* 收尾：先問今晚要哪一種安靜，再給一張專輯 */
.moods{margin:48px auto 0;max-width:860px}
.moods > .mono{display:block;margin-bottom:18px}
.mood-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mood{appearance:none;font:inherit;cursor:pointer;text-align:left;color:var(--moon);padding:18px 20px;border-radius:3px;border:0;background:rgba(12,14,19,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--hair);display:grid;gap:4px;transition:box-shadow .4s,background .4s,transform .4s cubic-bezier(.2,.7,.2,1)}
.mood em{font-family:var(--f-display);font-size:clamp(24px,2.4vw,32px);line-height:1.05}
.mood small{color:var(--moon-mute);font-size:13px}
.mood:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(224,166,94,.6)}
.mood[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--candle);background:rgba(224,166,94,.12)}
.mood[aria-pressed="true"] em{color:var(--candle)}
.pick{margin-top:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;text-align:left;padding:14px;border-radius:3px;background:rgba(12,14,19,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--hair)}
.pick[hidden]{display:none}
.pick img{width:96px;aspect-ratio:9/16;object-fit:cover;border:4px solid #fbf7f0;box-shadow:0 14px 26px -12px rgba(0,0,0,.8);transform:rotate(-2deg)}
.pick b{display:block;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.1;margin-top:4px}
.pick small{display:block;color:var(--moon-mute);font-size:13px;margin-top:4px}
.pick .btn{white-space:nowrap}
.newest{margin-top:22px;font-size:14px;color:var(--moon-mute)}
.newest a{color:var(--moon);text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .3s}
.newest a:hover{border-color:var(--candle)}
@media (max-width:700px){.mood-row{grid-template-columns:1fr}.pick{grid-template-columns:auto minmax(0,1fr)}.pick .btn{grid-column:1/-1;justify-content:center}}

/* 地圖：路還沒走完 */
.next{display:inline-flex;flex-wrap:wrap;gap:4px 8px;margin-top:22px;font-size:14px;color:var(--moon-mute);text-decoration:none}
.next u{text-decoration:none;color:var(--moon);border-bottom:1px solid rgba(224,166,94,.5);transition:border-color .3s,color .3s}
.next:hover u{color:var(--candle);border-color:var(--candle)}
.deckbar.quiet .deck-album{opacity:0;transform:translateX(10px);pointer-events:none}