/* 碳矽之間（第二輪視覺）：冷霧藍、藍紫、粉白光；碳基創作與矽基生成在霧與光之間共生。
   版面：海報式不對稱 12 欄 grid（桌機）／4 欄（手機）。cyan、magenta、amber 只用在資料碎片、hover、進度與音訊波形的小亮點。 */
:root{
  /* 色票 */
  --ink-indigo:#263e83; --carbon-violet:#5a5c9e; --silicon-mist:#aebfe1; --cloud-white:#f2f0ef; --skin-blush:#e7c8d0;
  --digital-cyan:#48b8d8; --signal-magenta:#b53869; --warm-amber:#e6a56b; --text-deep:#182243;
  --surface-glass:rgb(242 240 239 / .10); --surface-mist:rgb(174 191 225 / .28); --line-soft:rgb(242 240 239 / .42); --shadow-blue:rgb(24 34 67 / .20);
  --gradient-exhibition:
    radial-gradient(circle at 10% 88%, rgb(38 62 131 / .96) 0%, transparent 36%),
    radial-gradient(circle at 78% 78%, rgb(231 200 208 / .56) 0%, transparent 28%),
    radial-gradient(circle at 74% 14%, rgb(203 231 239 / .72) 0%, transparent 40%),
    linear-gradient(132deg, #5962a4 0%, #aebfe1 48%, #f2f0ef 100%);
  /* 由色票派生（不新增色相） */
  --ink-deep:color-mix(in srgb, var(--ink-indigo) 86%, var(--text-deep));
  --mist-tint:color-mix(in srgb, var(--silicon-mist) 30%, var(--cloud-white));
  --line-ink:rgb(38 62 131 / .22);
  /* 字體 */
  --zh:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --en:"Cormorant Garamond","DM Serif Display",Georgia,serif;
  --ui:"Manrope","Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --body:"Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --type-display-zh:clamp(4.5rem,11vw,12rem);
  --type-display-en:clamp(2rem,4.4vw,5.5rem);
  --type-exhibition-meta:clamp(.75rem,1vw,1rem);
  --type-editorial-lead:clamp(1.25rem,2vw,2rem);
  --type-body:clamp(1rem,1.15vw,1.15rem);
  --gutter:max(24px,8vw);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cloud-white);color-scheme:light}
body{margin:0;background:var(--cloud-white);color:var(--text-deep);font-family:var(--body);font-size:var(--type-body);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--digital-cyan);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gutter)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}
.skip{position:fixed;left:12px;top:-60px;background:var(--cloud-white);color:var(--text-deep);padding:8px 14px;z-index:100}
.skip:focus{top:12px}
.label{font-family:var(--ui);font-size:var(--type-exhibition-meta);letter-spacing:.22em;text-transform:uppercase;margin:0 0 18px;opacity:.78}
.label span{margin-left:12px;letter-spacing:.12em;opacity:.8}
h1,h2,h3{font-family:var(--zh);font-weight:400;line-height:1.28;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3.7rem);letter-spacing:.04em}
.lead{font-family:var(--zh);font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:2;font-weight:400;margin:0;max-width:34em}
.lead.small{font-family:var(--body);font-size:var(--type-body);line-height:1.95;opacity:.85}

/* ---------- 按鈕：細框、箭頭水平位移；次要為無框文字，底線 hover 才展開 ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:1em;padding:.95em 1.7em;border:1px solid var(--cloud-white);border-radius:0;background:transparent;color:inherit;text-decoration:none;font-family:var(--ui);font-size:.92rem;letter-spacing:.16em;overflow:hidden;transition:border-color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--cloud-white);opacity:0;transition:opacity .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{opacity:.1}
.btn>*{position:relative}
.btn .arr{font-style:normal;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-text{position:relative;background:none;border:0;padding:.55em 0;color:inherit;font-family:var(--ui);font-size:.92rem;letter-spacing:.16em;text-decoration:none}
.btn-text::after{content:"";position:absolute;left:0;right:0;bottom:.2em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn-text:hover::after,.btn-text:focus-visible::after{transform:scaleX(1)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.dark-ui .btn,.statement .btn,.guide .btn,.zones .btn{border-color:var(--text-deep)}

/* ---------- 導航 ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px max(24px,4vw);color:var(--cloud-white);transition:color .5s var(--ease)}
.bar[data-tone="dark"]{color:var(--text-deep)}
.bar::after{content:"";position:absolute;left:max(24px,4vw);right:max(24px,4vw);bottom:0;height:1px;background:currentColor;opacity:.22}
.bar-brand{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.bar-brand .zh{font-family:var(--zh);font-weight:500;font-size:1.05rem;letter-spacing:.12em}
.bar-brand .en{font-family:var(--ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.menu-btn{display:inline-flex;align-items:baseline;gap:8px;border:1px solid rgb(24 34 67 / .32);background:rgb(242 240 239 / .55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-deep);padding:.45em 1.1em;letter-spacing:.22em;font-size:.82rem}
.menu-btn i{font-family:var(--ui);font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.menu-btn:hover{background:rgb(242 240 239 / .8)}
@media (max-width:640px){.bar-brand .en{display:none}}
.menu{position:fixed;inset:0;z-index:50;background:rgb(174 191 225 / .8);-webkit-backdrop-filter:blur(28px) saturate(1.1);backdrop-filter:blur(28px) saturate(1.1);display:grid;place-items:center;opacity:0;transition:opacity .5s var(--ease)}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu-inner{width:100%;max-width:980px;padding:90px var(--gutter) 40px}
.menu ol{list-style:none;margin:0;padding:0}
.menu li{border-top:1px solid var(--line-ink)}
.menu li:last-child{border-bottom:1px solid var(--line-ink)}
.menu a{display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);padding:clamp(10px,2.2vh,20px) 4px;text-decoration:none;color:var(--text-deep);transition:padding-left .5s var(--ease)}
.menu a:hover,.menu a:focus-visible{padding-left:16px}
.menu a i{font-family:var(--ui);font-style:normal;font-size:.75rem;letter-spacing:.2em;width:2.4em}
.menu a span{font-family:var(--zh);font-size:clamp(1.6rem,4vw,3rem);letter-spacing:.06em}
.menu a em{font-family:var(--en);font-size:clamp(1rem,1.8vw,1.4rem);margin-left:auto;opacity:.75}
.menu-foot{display:flex;flex-wrap:wrap;gap:8px 28px;margin:26px 0 0;font-family:var(--ui);font-size:.8rem;letter-spacing:.14em}

/* ---------- Hero：霧、碎片、人像、霧罩、正常 HTML 文字 ---------- */
.hero{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;color:var(--cloud-white);background:var(--carbon-violet)}
.mist-bg{position:absolute;inset:-4%;z-index:-6;background:var(--gradient-exhibition);background-size:125% 125%;animation:mist 80s ease-in-out infinite alternate}
@keyframes mist{from{background-position:0 0}to{background-position:7% 5%}}
.hero.is-static .mist-bg{background-image:url("assets/mist.jpg"),var(--gradient-exhibition);background-size:cover;animation:none}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95  0 0 0 0 .94  0 0 0 0 .94  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.layer{position:absolute;inset:0;pointer-events:none}
.fragments{z-index:-5}
.frag{position:absolute;object-fit:cover;opacity:0;animation:develop 2.4s .15s var(--ease) forwards;will-change:transform}
.frag-left{left:-1%;top:0;height:100%;width:min(25vw,380px);filter:saturate(1.15) blur(1.5px);-webkit-mask-image:linear-gradient(90deg,black 30%,transparent 100%);mask-image:linear-gradient(90deg,black 30%,transparent 100%);transform:translate3d(calc(var(--mx,0) * 6px),calc(var(--my,0) * 6px),0) scale(1.05);--o:.92}
.frag-top{left:0;top:0;width:72vw;height:28vh;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(180deg,black 25%,transparent 100%),linear-gradient(90deg,black 40%,transparent 100%);mask-image:linear-gradient(180deg,black 25%,transparent 100%),linear-gradient(90deg,black 40%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;transform:translate3d(calc(var(--mx,0) * 4px),calc(var(--my,0) * 4px),0) scale(1.04);--o:.5}
@keyframes develop{to{opacity:var(--o,1)}}
.portrait{z-index:-4}
.portrait img{position:absolute;right:-2vw;top:51%;width:min(46vw,760px);height:auto;aspect-ratio:351/144;object-fit:cover;mix-blend-mode:multiply;filter:blur(2.4px) saturate(.88);
  -webkit-mask-image:radial-gradient(ellipse 68% 74% at 56% 50%,black 26%,transparent 74%);mask-image:radial-gradient(ellipse 68% 74% at 56% 50%,black 26%,transparent 74%);
  opacity:0;animation:develop 2.8s .35s var(--ease) forwards;--o:.9;transform:translate3d(calc(var(--mx,0) * 1.5px),calc(var(--my,0) * 1.5px),0)}
.fog{position:absolute;inset:-3%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(62% 58% at 20% 60%,rgb(38 62 131 / .40),transparent 72%),
    radial-gradient(38% 36% at 90% 94%,rgb(231 200 208 / .5),transparent 70%),
    radial-gradient(56% 38% at 62% 6%,rgb(242 240 239 / .34),transparent 72%);
  animation:breathe 16s ease-in-out infinite alternate;transform:translate3d(calc(var(--mx,0) * -4px),calc(var(--my,0) * -4px),0)}
@keyframes breathe{from{opacity:.82}to{opacity:1}}

.hero-grid{position:relative;min-height:100vh;min-height:100dvh;max-width:1760px;margin-inline:auto;padding:clamp(96px,15vh,150px) var(--gutter) clamp(30px,6vh,60px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:clamp(12px,2vw,28px)}
.h-title{grid-column:1 / span 8;grid-row:1}
.h-kicker{font-family:var(--ui);font-size:var(--type-exhibition-meta);letter-spacing:.3em;text-transform:uppercase;margin:0 0 clamp(14px,3vh,30px);opacity:0;animation:fade 1.2s .8s var(--ease) forwards}
.hero h1{display:flex;flex-direction:column}
.h-title .zh{display:flex;font-family:var(--zh);font-weight:300;font-size:var(--type-display-zh);line-height:1.04;letter-spacing:.05em;text-shadow:0 2px 44px var(--shadow-blue)}
.h-title .m{display:inline-block;overflow:hidden;padding:.04em .02em .06em}
.h-title .m>span{display:inline-block;transform:translateY(.16em);clip-path:inset(100% 0 0 0);animation:rise 1.2s .8s var(--ease) forwards}
.h-title .m:nth-child(2)>span{animation-delay:.95s}
@keyframes rise{to{transform:none;clip-path:inset(0 0 0 0)}}
.h-title .en{display:block;font-family:var(--en);font-weight:500;font-size:var(--type-display-en);line-height:1.1;letter-spacing:.005em;margin-top:.08em;text-shadow:0 2px 30px var(--shadow-blue)}
.h-title .en>span{display:inline-block;opacity:0;transform:translateY(10px);animation:fade-up 1.2s 1.4s var(--ease) forwards}
.h-subzh{font-family:var(--zh);font-weight:400;font-size:clamp(1rem,1.7vw,1.6rem);letter-spacing:.2em;margin:clamp(14px,3vh,28px) 0 8px;opacity:0;animation:fade 1.2s 1.6s var(--ease) forwards}
.h-suben{font-family:var(--en);font-size:clamp(1rem,1.5vw,1.4rem);line-height:1.5;margin:0;opacity:0;animation:fade 1.2s 1.7s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
@keyframes fade-up{to{opacity:1;transform:none}}

.h-date{grid-column:9 / -1;grid-row:1;margin:0;color:var(--text-deep);justify-self:end;width:min(100%,360px);opacity:0;animation:fade 1.2s 1.9s var(--ease) forwards}
.h-date>div{margin:0}
.h-date dd{margin:0}
.d-row dd{display:flex;align-items:flex-start;gap:.7rem}
.d-row b{font-family:var(--en);font-weight:400;font-size:clamp(2.6rem,6vw,6rem);letter-spacing:.1em;line-height:1}
.d-row small{font-family:var(--en);font-size:clamp(.9rem,1.1vw,1.1rem);letter-spacing:.1em;line-height:1.35;margin-top:.55em}
.d-arrow{font-family:var(--en);font-size:2.2rem;line-height:1;margin:.1em 0 .1em .05em;font-weight:300}
.d-place dd{font-family:var(--zh);font-size:clamp(1rem,1.5vw,1.4rem);letter-spacing:.14em;margin-top:1.1rem}
.d-arch{margin-top:.9rem!important;padding-top:.7rem;border-top:1px solid rgb(24 34 67 / .28)}
.d-arch dd{font-family:var(--ui);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75}

.h-cta{grid-column:1 / span 7;grid-row:3;align-self:end;display:flex;flex-direction:column;gap:clamp(18px,3.4vh,34px)}
.h-quote{margin:0;font-family:var(--zh);font-weight:400;font-size:var(--type-editorial-lead);line-height:1.6;letter-spacing:.08em;max-width:22em;opacity:0;animation:fade 1.2s 1.8s var(--ease) forwards;text-shadow:0 1px 28px var(--shadow-blue)}
.h-cta .cta{opacity:0;animation:fade 1.2s 2s var(--ease) forwards}
.h-side{grid-column:9 / -1;grid-row:3;align-self:end;justify-self:end;margin:0;display:flex;gap:2.2rem;font-family:var(--en);font-style:italic;font-size:clamp(1rem,1.3vw,1.3rem);color:var(--text-deep);opacity:0;animation:fade-low 1.4s 2.2s var(--ease) forwards}
@keyframes fade-low{to{opacity:.55}}
.scroll-cue{position:absolute;left:50%;bottom:0;width:1px;height:54px;background:rgb(242 240 239 / .35);overflow:hidden}
.scroll-cue span{position:absolute;inset:0 0 auto 0;height:20px;background:var(--cloud-white);animation:cue 3s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-24px)}100%{transform:translateY(60px)}}

@media (max-width:900px){
  .hero-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:12px;padding-inline:max(24px,6vw)}
  .h-title{grid-column:1 / -1}
  .h-title .zh{flex-direction:column;font-size:clamp(5.5rem,27vw,9rem);line-height:1}
  .h-title .en{font-size:clamp(1.7rem,7.4vw,2.6rem);max-width:7.5em}
  .h-date{grid-column:1 / -1;grid-row:4;justify-self:start;width:100%;margin-bottom:22px}
  .h-date{display:grid;grid-template-columns:auto auto 1fr;align-items:center;column-gap:1rem}
  .d-row b{font-size:clamp(2.2rem,10vw,3.2rem)}
  .d-row small{display:none}
  .d-place,.d-arch{grid-column:1 / -1}
  .d-arrow{font-size:1.6rem;margin:0}
  .h-cta{grid-column:1 / -1;grid-row:3;align-self:end;margin-bottom:26px}
  .h-side{display:none}
  .portrait img{width:120vw;right:-30vw;top:30%;opacity:.7;--o:.7}
  .frag-left{width:36vw}
  .frag-top{height:20vh}
  /* 窄螢幕的霧底偏淺，白字需要更深的靛藍霧罩才讀得清楚 */
  .fog{background:linear-gradient(180deg,rgb(38 62 131 / .66) 0%,rgb(38 62 131 / .54) 58%,rgb(38 62 131 / .22) 100%),radial-gradient(38% 36% at 90% 94%,rgb(231 200 208 / .5),transparent 70%)}
  .h-date{color:var(--cloud-white)}
  .d-arch{border-top-color:var(--line-soft)}
}
@media (max-height:640px) and (min-width:901px){.h-title .zh{font-size:clamp(4rem,9vw,8rem)}}

/* ---------- 策展命題 ---------- */
.statement{padding:clamp(90px,15vw,190px) 0;background:var(--cloud-white);color:var(--text-deep)}
.st-head{grid-column:1 / span 5}
.st-body{grid-column:7 / -1}
.reveal{filter:blur(var(--blur,0px));opacity:var(--op,1);transition:filter .25s linear}
.en-note{font-family:var(--en);font-style:italic;font-size:1.25rem;line-height:1.55;opacity:.7;max-width:30em;margin:26px 0 0}
.path{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:0;margin:clamp(36px,6vw,64px) 0 0}
.path li{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line-ink);padding-top:12px;min-width:96px}
.path li.arrow{border:0;padding:0;min-width:0;font-size:1.3rem;align-self:center;opacity:.5}
.path b{font-family:var(--zh);font-weight:400;font-size:2.4rem;line-height:1}
.path span{font-size:.85rem}
.path i{font-family:var(--ui);font-size:.66rem;letter-spacing:.2em;font-style:normal;text-transform:uppercase;opacity:.65}
.path li:nth-child(1) b{color:var(--ink-indigo)}.path li:nth-child(3) b{color:var(--carbon-violet)}.path li:nth-child(5) b{color:var(--signal-magenta)}
@media (max-width:900px){.st-head,.st-body{grid-column:1 / -1}.st-body{margin-top:30px}}

/* ---------- 展覽路徑 ---------- */
.chapters{position:relative;height:300vh;background:linear-gradient(180deg,var(--ink-deep),var(--ink-indigo));color:var(--cloud-white)}
.chapters-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3.2vh,34px);padding-block:96px 26px}
.ch-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.ch-head h2{font-size:clamp(1.8rem,3.4vw,3rem)}
.ch-meter{font-family:var(--en);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:140px}
.ch-meter span{font-size:2.8rem;line-height:1}
.ch-meter i{font-style:normal;opacity:.65;font-family:var(--ui);font-size:.8rem;letter-spacing:.1em}
.bar-track{flex-basis:100%;height:1px;background:var(--line-soft);margin-top:10px;position:relative}
#ch-bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--cloud-white)}
.track{list-style:none;margin:0;padding:0 var(--gutter);display:flex;gap:clamp(14px,2vw,30px);will-change:transform;width:max-content}
.card{width:clamp(240px,min(30vw,36vh),430px);flex:none;display:flex;flex-direction:column;gap:12px}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--carbon-violet);border:1px solid var(--line-soft);padding:0;width:100%;display:block}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(38 62 131 / .62),transparent 58%),var(--surface-mist);transition:opacity .8s var(--ease);pointer-events:none}
.card:hover .card-media img,.card:focus-within .card-media img{transform:scale(1.03)}
.card:hover .card-media::after,.card:focus-within .card-media::after{opacity:.25}
.card-no{position:absolute;z-index:1;left:14px;bottom:8px;font-family:var(--en);font-weight:400;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;letter-spacing:.04em}
.card-no i{font-style:normal;font-size:.35em;opacity:.7;margin-left:.4em;letter-spacing:.1em}
.card-go{position:absolute;z-index:1;right:12px;bottom:14px;font-family:var(--ui);font-size:.68rem;letter-spacing:.2em;border:1px solid var(--line-soft);padding:4px 10px;opacity:0;transition:opacity .5s var(--ease)}
.card:hover .card-go,.card:focus-within .card-go{opacity:1}
.card h3{font-size:clamp(1.15rem,1.8vw,1.55rem);letter-spacing:.06em}
.card h3 small{display:block;font-family:var(--en);font-weight:400;font-size:.85em;letter-spacing:.01em;opacity:.8}
.card-quote{font-family:var(--zh);font-size:.95rem;line-height:1.8;margin:0;opacity:.92}
.card-kw{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;padding:0;list-style:none;font-family:var(--ui);font-size:.7rem;letter-spacing:.1em;opacity:0;transform:translateY(4px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.card:hover .card-kw,.card:focus-within .card-kw{opacity:.85;transform:none}
.card-kw li::before{content:"#"}
.card-time{font-family:var(--ui);font-size:.7rem;letter-spacing:.1em;margin:0;opacity:.65}
.card-open{align-self:flex-start;position:relative;background:none;border:0;padding:.3em 0;font-family:var(--ui);font-size:.82rem;letter-spacing:.16em}
.card-open::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card-open:hover::after,.card-open:focus-visible::after{transform:scaleX(1)}
.ch-tip{font-family:var(--ui);font-size:.7rem;letter-spacing:.2em;margin:0;padding-inline:var(--gutter);max-width:1480px;margin-inline:auto;width:100%;opacity:.7}
.chapters.is-native{height:auto}
.chapters.is-native .chapters-pin{position:static;height:auto;padding-block:clamp(80px,12vw,130px)}
.chapters.is-native .track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;padding-bottom:20px;transform:none!important;scrollbar-width:thin}
.chapters.is-native .card{scroll-snap-align:start;width:min(78vw,380px)}
@media (hover:none){.card-kw{opacity:.85;transform:none}.card-go{opacity:1}}

/* ---------- 線上導覽 ---------- */
.guide{padding:clamp(80px,12vw,160px) 0;background:var(--mist-tint);color:var(--text-deep)}
.guide-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,90px)}
.tracks{list-style:none;margin:0;padding:0}
.tracks li{border-top:1px solid var(--line-ink)}
.tracks li:last-child{border-bottom:1px solid var(--line-ink)}
.tr{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;width:100%;background:none;border:0;text-align:left;padding:18px 6px;transition:background .5s var(--ease)}
.tr:hover{background:var(--surface-mist)}
.tr-i{font-family:var(--ui);font-size:.75rem;letter-spacing:.14em}
.tr-t{display:flex;flex-direction:column}
.tr-t b{font-family:var(--zh);font-weight:400;font-size:1.2rem;letter-spacing:.04em}
.tr-t span{font-size:.85rem;opacity:.7}
.tr-d{font-family:var(--ui);font-size:.78rem;letter-spacing:.08em}
.tr.is-on .tr-i{color:var(--signal-magenta)}
@media (max-width:860px){.guide-grid{grid-template-columns:1fr}}

/* ---------- 展區 ---------- */
.zones{padding:clamp(80px,12vw,160px) 0;background:var(--cloud-white);color:var(--text-deep)}
.zones h2{margin-bottom:clamp(28px,4vw,48px)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 clamp(36px,5vw,64px);border-top:1px solid var(--line-ink)}
.facts div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line-ink)}
.facts dt{font-family:var(--ui);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.facts dd{margin:4px 0 0;font-family:var(--zh);font-size:clamp(1.1rem,1.8vw,1.45rem);letter-spacing:.04em}
.facts small{display:block;font-family:var(--ui);font-size:.66rem;letter-spacing:.08em;opacity:.65}
.zone-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line-ink);border:1px solid var(--line-ink)}
.zone-list a{display:flex;flex-direction:column;gap:8px;height:100%;padding:28px 24px;background:var(--cloud-white);text-decoration:none;transition:background .6s var(--ease)}
.zone-list a:hover{background:var(--mist-tint)}
.zone-list i{font-family:var(--en);font-style:normal;font-size:2rem;line-height:1;color:var(--carbon-violet)}
.zone-list h3{font-size:1.4rem;letter-spacing:.06em}
.zone-list h3 small{font-family:var(--en);font-weight:400;font-size:.85em;margin-left:6px;opacity:.75}
.zone-list p{margin:0;font-size:.92rem;line-height:1.85;opacity:.85}
.zone-list span{margin-top:auto;font-family:var(--ui);font-size:.7rem;letter-spacing:.16em;opacity:.7}

/* ---------- 離場 ---------- */
.exit{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,12vw,160px) 0;color:var(--cloud-white)}
.exit .mist-bg{z-index:-3;animation:none}
.exit::before{content:"";position:absolute;inset:0;z-index:-2;background:rgb(38 62 131 / .6)}
.exit .grain{z-index:-1}
.exit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,6vw,90px);align-items:start}
.ex-copy>*+*{margin-top:22px}
.trace-form{display:flex;flex-direction:column;gap:10px}
.trace-form label{font-family:var(--ui);font-size:.75rem;letter-spacing:.14em}
textarea{font:inherit;font-family:var(--zh);font-size:1.1rem;line-height:1.7;color:var(--cloud-white);background:var(--surface-glass);border:1px solid var(--line-soft);border-radius:0;padding:12px 14px;resize:vertical;width:100%}
textarea::placeholder{color:rgb(242 240 239 / .55)}
.trace-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--ui);font-size:.72rem;letter-spacing:.08em;opacity:.8}
.exit-links{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--ui);font-size:.82rem;letter-spacing:.1em}
.exit-links a{text-underline-offset:5px}
.trace-fig{margin:0;position:sticky;top:90px}
.trace-fig canvas{width:100%;height:auto;aspect-ratio:4/5;background:var(--carbon-violet);display:block;border:1px solid var(--line-soft)}
.trace-fig figcaption{font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;margin-top:8px;opacity:.75}
@media (max-width:860px){.exit-grid{grid-template-columns:1fr}.trace-fig{position:static;max-width:420px}}

.foot{padding:36px 0 120px;background:var(--text-deep);color:var(--silicon-mist);font-size:.82rem}
.foot p{margin:0 0 6px}.foot .muted{opacity:.7}
.foot a{color:var(--cloud-white)}

/* ---------- 作品面板 ---------- */
dialog.work{width:min(1120px,100vw);max-width:100vw;height:100vh;height:100svh;max-height:100svh;margin:auto;padding:0;border:0;background:var(--ink-deep);color:var(--cloud-white)}
dialog.work::backdrop{background:rgb(24 34 67 / .78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.work-inner{height:100%;display:flex;flex-direction:column}
.work-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(60px,8vw,90px) var(--gutter) 40px}
.work-close{position:absolute;right:max(12px,env(safe-area-inset-right));top:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-soft);background:var(--surface-glass);font-size:1.5rem;line-height:1}
.work-close:hover{background:var(--surface-mist)}
.work-nav{display:flex;justify-content:space-between;gap:12px;padding:12px var(--gutter);border-top:1px solid var(--line-soft)}
.work-nav button{background:none;border:0;padding:8px 4px;font-family:var(--ui);font-size:.8rem;letter-spacing:.16em}
.work-nav button:hover{text-decoration:underline;text-underline-offset:6px}
.w-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start}
.w-fig{margin:0;position:sticky;top:0}
.w-fig img{width:100%;height:auto;max-height:78svh;object-fit:contain;background:var(--carbon-violet)}
.w-no{font-family:var(--ui);font-size:.75rem;letter-spacing:.22em;margin:0 0 10px;opacity:.75}
.w-title{font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:.05em}
.w-title small{display:block;font-family:var(--en);font-weight:400;font-size:.45em;letter-spacing:.01em;margin-top:6px;opacity:.85}
.w-by{font-family:var(--ui);font-size:.8rem;letter-spacing:.1em;margin:14px 0 22px;opacity:.75}
.w-text p{margin:0 0 1.1em;max-width:36em;font-size:1rem;line-height:2}
.w-text p:first-child{font-family:var(--zh);font-size:1.2rem}
.w-link{display:inline-block;margin-top:14px;font-family:var(--ui);font-size:.78rem;letter-spacing:.14em;color:var(--silicon-mist)}
.w-series{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line-soft)}
.w-series a{display:block;padding:11px 2px;border-bottom:1px solid var(--line-soft);text-decoration:none}
.w-series a:hover{color:var(--silicon-mist)}
@media (max-width:860px){.w-grid{grid-template-columns:1fr}.w-fig{position:static}}

/* 〈她走過的地方〉互動：線條以 magenta 為主，偶爾一條 amber／cyan */
.sketch{margin:0 0 clamp(26px,4vw,44px)}
.sketch-stage{position:relative;background:linear-gradient(160deg,var(--ink-indigo),var(--text-deep));border:1px solid var(--line-soft);overflow:hidden}
.sketch canvas{display:block;width:100%;height:clamp(300px,52vh,480px);touch-action:none;cursor:crosshair}
.sketch-hud{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;color:var(--silicon-mist)}
.sketch-line{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center;font-family:var(--zh);font-size:clamp(1rem,2.2vw,1.5rem);padding-inline:16px;opacity:0;transform:translateY(8px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);pointer-events:none;text-shadow:0 2px 14px var(--shadow-blue)}
.sketch.is-done .sketch-line{opacity:1;transform:none}
.sketch-actions{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:14px}
.sketch-actions .btn,.sketch-actions .btn-text{padding-block:.7em;font-size:.82rem}

/* ---------- 展覽導覽器 ---------- */
.player{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:6px;background:rgb(242 240 239 / .86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgb(38 62 131 / .25);color:var(--text-deep);padding:9px 8px 9px 10px;width:min(440px,calc(100vw - 28px))}
.player[hidden]{display:none}
.pl-toggle{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--text-deep);background:transparent;font-size:.8rem;transition:background .4s var(--ease)}
.pl-toggle:hover{background:var(--surface-mist)}
.pl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pl-no{font-family:var(--ui);font-size:.64rem;letter-spacing:.2em}
.pl-title{font-family:var(--zh);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{font-size:.75rem;line-height:1.5;opacity:.8}
.pl-bar{height:1px;background:rgb(38 62 131 / .25);margin-top:5px}
#pl-prog{height:100%;width:0;background:var(--ink-indigo)}
.pl-wave{flex:none;display:flex;align-items:flex-end;gap:2px;height:16px;opacity:.75}
.pl-wave i{display:block;width:2px;height:5px;border-radius:1px}
.pl-wave i:nth-child(1){background:var(--digital-cyan)}.pl-wave i:nth-child(2){background:var(--signal-magenta)}.pl-wave i:nth-child(3){background:var(--warm-amber)}.pl-wave i:nth-child(4){background:var(--digital-cyan)}
.player.is-playing .pl-wave i{animation:wave 1.8s ease-in-out infinite alternate}
.player.is-playing .pl-wave i:nth-child(2){animation-delay:.3s}.player.is-playing .pl-wave i:nth-child(3){animation-delay:.6s}.player.is-playing .pl-wave i:nth-child(4){animation-delay:.9s}
@keyframes wave{from{height:4px}to{height:15px}}
.pl-skip{flex:none;background:none;border:0;min-width:30px;height:34px;font-size:.8rem;font-family:var(--ui);letter-spacing:.06em}
.pl-skip:hover{color:var(--ink-indigo)}
.pl-skip[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}

/* ---------- 降級：沒有動態、低效能 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .frag,.portrait img,.fog,.h-title .m>span,.h-title .en>span,.h-kicker,.h-subzh,.h-suben,.h-date,.h-quote,.h-cta .cta{opacity:var(--o,1)}
  .h-side{opacity:.55}
  .h-title .m>span,.h-title .en>span{transform:none;clip-path:none}
  .frag-left,.frag-top,.portrait img,.fog{transform:none}
  .reveal{filter:none!important;opacity:1!important}
}

/* ---------- 導覽列工具、目錄索引（首頁與內容頁共用） ---------- */
.bar-tools{display:flex;align-items:center;gap:10px}
.icon-btn{display:grid;place-items:center;width:38px;height:36px;border:1px solid rgb(24 34 67 / .32);background:rgb(242 240 239 / .55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-deep);padding:0}
.icon-btn:hover{background:rgb(242 240 239 / .8)}
.menu-sub{font-family:var(--ui);font-size:.72rem;letter-spacing:.22em;margin:30px 0 8px;opacity:.75}
.menu-index{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.menu-index li,.menu-index li:last-child{border:0}
.menu-index a{display:inline-block;padding:4px 0;font-family:var(--zh);font-size:1rem;letter-spacing:.08em;border-bottom:1px solid transparent}
.menu-index a:hover,.menu-index a:focus-visible{padding-left:0;border-color:var(--text-deep)}
.page .skip{z-index:100}