/* ============================================================
   The Thirst of the Cloud — style.css
   Exhibition-grade public showcase page

   設計主軸:雲 × 瓶 × 水 — 三者作為背景與結構載體
   - 雲 (clouds): 天空、漂浮、體積感
   - 瓶 (bottle): 透明容器、邊框、隱喻
   - 水 (water): 流動、消耗、計量

   色階:從天光 → 水面 → 深水 → 沉底
   #e8f4f8  (sky pale)
   #c4dde2  (mist)
   #7ec0cd  (water surface — brand)
   #3a7d8a  (water mid)
   #1a3a44  (water deep)
   #0c2429  (abyss)
   ============================================================ */

/* ── tokens ───────────────────────────────────────── */
:root{
  /* atmosphere — sky to abyss */
  --sky-pale:    #eaf3f6;
  --sky:         #d4e5ea;
  --mist:        #c4dde2;
  --water:       #7ec0cd;     /* brand surface */
  --water-bright:#9bd3dd;
  --water-deep:  #3a7d8a;
  --water-dark:  #1a3a44;
  --abyss:       #0c2429;

  /* ink on light backgrounds */
  --ink:         #0f2228;
  --ink-soft:    #3d525a;
  --ink-mute:    #6b8088;
  --ink-faint:   #9aacb2;

  /* ink on dark backgrounds (for water/deep sections) */
  --ink-light:    #e9efee;
  --ink-light-soft:#a8c0c5;
  --ink-light-mute:#7a9097;

  /* rules / borders */
  --rule:        rgba(58, 125, 138, 0.18);
  --rule-strong: rgba(58, 125, 138, 0.32);
  --rule-glass:  rgba(255, 255, 255, 0.4);

  /* glows */
  --water-glow:  rgba(126, 192, 205, 0.35);
  --water-dim:   rgba(126, 192, 205, 0.12);

  /* state */
  --warn:        #d97a5b;
  --warn-bg:     rgba(217, 122, 91, 0.1);

  /* specimen — 來自 icon_bottle.pdf 的雙色印刷打樣卡
     右瓶外漸層起色 + 左瓶內裝水色 */
  --specimen-a:  #9ba7b7;
  --specimen-b:  #c7b2b8;
  --specimen-a-soft: rgba(155, 167, 183, 0.32);
  --specimen-b-soft: rgba(199, 178, 184, 0.32);

  /* type — Fira Code 接管 mono,離線字體自 site/assets/fonts/FiraCode-VF.woff2 */
  --serif:  'Cormorant Garamond', 'Gloock', Georgia, 'Times New Roman', serif;
  --sans:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono:   'Fira Code', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing */
  --gutter:  clamp(20px, 4vw, 56px);
  --maxw:    1280px;
  --sec-pad: clamp(80px, 13vh, 160px);
}

/* ── @font-face (Fira Code,離線變數字軸) ──────────── */
@font-face {
  font-family: 'Fira Code';
  font-style:  normal;
  font-weight: 300 700;            /* variable axis: 300..700 */
  font-display: swap;
  src: url('../assets/fonts/FiraCode-VF.woff2') format('woff2-variations'),
       url('../assets/fonts/FiraCode-VF.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

.fira{font-family:var(--mono); font-feature-settings:"calt" 1,"liga" 1;}

/* ── reset ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  /* Background.png 全站背景:真实摄影天空(上)→水面(下),固定不随滚动 */
  background-color: var(--sky-pale);  /* fallback 纯色 */
  background-image: url("../assets/Background.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-os-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none; transition:color .15s;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
em{font-style:italic; color:var(--water-deep); font-weight:400;}
strong{font-weight:500; color:var(--ink);}

::selection{background:var(--water-deep); color:var(--sky-pale);}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:var(--sky);}
::-webkit-scrollbar-thumb{background:var(--water-deep); border-radius:0;}

/* ── 全站雲海背景層(固定) ─────────────────────────── */
.atmos{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* 太陽/光源:右上角淡光 */
    radial-gradient(circle 900px at 88% 8%, rgba(255, 250, 230, 0.7) 0%, transparent 55%),
    /* 左下角反射光(暗示水面) */
    radial-gradient(circle 700px at 5% 92%, rgba(126, 192, 205, 0.4) 0%, transparent 60%),
    /* 上方:天空 pale */
    linear-gradient(180deg,
      var(--sky-pale) 0%,
      var(--sky) 25%,
      var(--mist) 55%,
      var(--water) 85%,
      var(--water-deep) 100%);
}
/* 雲層浮動(純 CSS) — 雲是主要視覺載體之一 */
/* 配合 Background.png 全站背景:雲的中央密度降低,讓底圖能透出 */
.clouds{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0.55;  /* 整體淡一些,讓 Background.png 透出 */
}
.cloud{
  position:absolute;
  /* 多層雲,中央高密度白,外緣柔化,下緣微染水藍 */
  background:
    radial-gradient(ellipse 70% 100% at 50% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 35%, rgba(232,242,245,0.5) 60%, rgba(196,221,226,0.2) 85%, transparent 100%);
  border-radius:50%;
  filter:blur(28px) drop-shadow(0 8px 40px rgba(255,255,255,0.3));
  animation: cloud-drift linear infinite;
  will-change:transform;
}
.cloud--a{ width:780px; height:240px; top:4%;  left:-20%; animation-duration:110s; opacity:0.95; }
.cloud--b{ width:920px; height:280px; top:16%; left:-35%; animation-duration:160s; opacity:0.75; }
.cloud--c{ width:580px; height:180px; top:34%; left:-25%; animation-duration:120s; opacity:0.85; }
.cloud--d{ width:720px; height:220px; top:52%; left:-30%; animation-duration:140s; opacity:0.65; }
.cloud--e{ width:480px; height:150px; top:70%; left:-26%; animation-duration:130s; opacity:0.8; }
.cloud--f{ width:420px; height:130px; top:86%; left:-22%; animation-duration:115s; opacity:0.7; }
@keyframes cloud-drift{
  from{ transform:translateX(0); }
  to  { transform:translateX(130vw); }
}
@media (prefers-reduced-motion: reduce){
  .cloud{ animation-duration:600s !important; }
}

/* 全站背景 canvas(水粒子) — 在雲層之上,內容之下 */
.bg-canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:1;
  pointer-events:none;
  opacity:0.5;  /* 降低密度,讓 Background.png 透出 */
}

/* 前景水珠層 — 疊在內容之上(nav 之下),不擋點擊,自身滿透明度 */
.drop-canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:50;
  pointer-events:none;
  opacity:1;
}

/* 內容層 — 必須在所有背景之上 */
.nav, .hero, .sec, .foot{position:relative; z-index:10;}

/* ── nav ──────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:18px var(--gutter);
  background:rgba(234, 243, 246, 0.72);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--rule);
  font-size:13px;
}
.nav__mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
}
.nav__drop{
  display:inline-block;
  width:14px; height:14px;
  background:var(--water);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 0 12px var(--water-glow);
  animation: drop 4s ease-in-out infinite;
}
@keyframes drop{
  0%,100%{ transform:rotate(-45deg) translateY(0); opacity:.85; }
  50%    { transform:rotate(-45deg) translateY(-2px); opacity:1; }
}
.nav__title{color:var(--ink);}
.nav__links{
  list-style:none; margin:0 auto; padding:0;
  display:flex; gap:clamp(16px, 2vw, 28px);
}
.nav__links a{
  color:var(--ink-soft);
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.12em;
  position:relative;
  padding-bottom:2px;
}
.nav__links a::after{
  content:''; position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px; background:var(--water-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav__links a:hover{color:var(--water-deep);}
.nav__links a:hover::after{transform:scaleX(1);}
.nav__lang{display:flex; align-items:center; gap:8px;}
.lang-btn{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  padding:4px 8px;
  border-radius:2px;
  transition:all .2s;
}
.lang-btn:hover{color:var(--water-deep);}
.lang-btn.is-active{
  color:#fff;
  background:var(--water-deep);
}
.lang-sep{color:var(--ink-faint); font-size:10px;}

/* ── HERO ─────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  padding:calc(80px + var(--sec-pad)) var(--gutter) var(--sec-pad);
  overflow:hidden;
  background:
    /* 上方雲頂柔光(很淡) */
    radial-gradient(ellipse 95% 50% at 50% 5%, rgba(255,255,255,0.3) 0%, transparent 70%),
    /* 底部深水漸變(因為 Background.png 底部就是水面,只需要加深一點點) */
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(126,192,205,0.15) 75%, rgba(58,125,138,0.25) 100%);
}

/* 雲朵剪影(SVG 風格純背景) — 雲是核心視覺載體 */
.hero__clouds{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero__clouds svg{
  position:absolute;
  opacity:0.7;
  filter:drop-shadow(0 0 40px rgba(255,255,255,0.5)) drop-shadow(0 0 80px rgba(232,243,247,0.3));
  animation: cloud-drift linear infinite;
  will-change:transform;
}
.hero__cloud-1{ top:2%;  left:-10%; width:1100px; animation-duration:130s; opacity:0.98; }
.hero__cloud-2{ top:14%; left:-25%; width:1280px; animation-duration:170s; opacity:0.88; }
.hero__cloud-3{ top:38%; left:-22%; width:920px;  animation-duration:150s; opacity:0.92; }
.hero__cloud-4{ top:58%; left:25%;  width:760px;  animation-duration:140s; opacity:0.82; }
.hero__cloud-5{ top:72%; left:-18%; width:680px;  animation-duration:155s; opacity:0.7; }
.hero__cloud-6{ top:6%;  left:55%;  width:560px;  animation-duration:180s; opacity:0.6; }

/* 瓶身圖片 — 核心視覺載體之一:Hero 的大水瓶作為整頁「容器」隱喻 */
.hero__bottle-bg{
  position:absolute;
  right:5%;
  top:6%;
  z-index:1;
  pointer-events:none;
  opacity:0.95;
  filter:drop-shadow(0 16px 80px rgba(58, 125, 138, 0.3)) drop-shadow(0 0 120px rgba(155,211,221,0.22));
  animation:bottle-float 8s ease-in-out infinite alternate;
}
@keyframes bottle-float{
  from{ transform:translateY(0); }
  to  { transform:translateY(-2.5%); }
}

/* 虛擬瓶(hero 放大版,與 LIVE td-flask 同視覺語言) */
.vbottle{ display:flex; flex-direction:column; align-items:center; }
.vbottle__neck{
  width:64px; height:44px;
  border:4px solid var(--water-deep);
  border-bottom:none;
  border-radius:12px 12px 0 0;
  margin-bottom:-2px;
  background:rgba(255,255,255,0.55);
}
.vbottle__body{
  position:relative;
  width:300px; height:560px;
  border:4px solid var(--water-deep);
  border-radius:0 0 52px 52px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(196,221,226,0.22) 100%);
}
.vbottle__water{
  position:absolute; left:0; right:0; bottom:0;
  height:64%;
  background:linear-gradient(180deg,
    rgba(126,192,205,0.62) 0%,
    rgba(58,125,138,0.85) 100%);
  overflow:hidden;
  animation:vbottle-rise 9s ease-in-out infinite alternate;
}
@keyframes vbottle-rise{
  from{ height:58%; }
  to  { height:70%; }
}
.vbottle__current{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 30% at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 70% 70%, rgba(155,211,221,0.3) 0%, transparent 60%);
  animation:current-drift 14s ease-in-out infinite alternate;
}
.vbottle__surface{
  position:absolute; left:0; right:0; top:0; height:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(155,211,221,0.5) 100%);
  box-shadow:0 0 18px rgba(255,255,255,0.4);
}
.vbottle__wave{
  position:absolute; left:-50%; right:-50%;
  height:34px;
  background:rgba(255,255,255,0.4);
  border-radius:45%;
}
.vbottle__wave--a{ top:-8px; animation:wave-spin 6s linear infinite; }
.vbottle__wave--b{ top:-4px; animation:wave-spin 8s linear infinite reverse; opacity:0.6; }
.vbottle__wave--c{ top:-12px; animation:wave-spin 11s linear infinite; opacity:0.4; }
.vbottle__bubble{
  position:absolute; width:12px; height:12px;
  background:rgba(255,255,255,0.8);
  border-radius:50%;
  animation:vbottle-bubble 4.5s ease-in infinite;
}
.vbottle__bubble--1{ left:30%; bottom:0; animation-delay:0s; }
.vbottle__bubble--2{ left:55%; bottom:0; animation-delay:1.5s; width:8px; height:8px; }
.vbottle__bubble--3{ left:74%; bottom:0; animation-delay:3s; width:10px; height:10px; }
@keyframes vbottle-bubble{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(-360px) scale(0.6); opacity:0; }
}
.vbottle__shine{
  position:absolute; left:14%; top:6%;
  width:22px; height:78%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  pointer-events:none;
}

.hero__vignette{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(circle at 50% 30%, transparent 0%, rgba(234, 243, 246, 0.1) 60%, rgba(234, 243, 246, 0.3) 100%);
  pointer-events:none;
}

.hero__inner{
  position:relative; z-index:5;
  width:100%; max-width:var(--maxw);
  margin:0 auto;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 32px;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-soft);
  padding:6px 14px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(8px);
}
.hero__eyebrow .dot{
  width:6px; height:6px;
  background:var(--water-deep);
  border-radius:50%;
  box-shadow:0 0 8px var(--water);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.6; transform:scale(1);}
  50%{opacity:1; transform:scale(1.3);}
}
.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px, 7.4vw, 112px);
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:0 0 40px;
  color:var(--ink);
  max-width:22ch;
  text-shadow:0 2px 30px rgba(255,255,255,0.5);
}
.hero__title .line{
  display:block;
  overflow:hidden;
}
.hero__title .line > span{
  display:inline-block;
}
.hero__title em{
  font-style:italic;
  color:var(--water-deep);
  font-weight:400;
}
.hero__title--droplet{
  font-family:'Baloo 2', var(--sans);
  font-weight:700;
  letter-spacing:-0.01em;
  color:#2f7f96;
}
.hero__title--droplet em{
  font-style:normal;
  font-weight:800;
  color:#1f6b82;
}
.hero__title--droplet .line > span{
  filter:url(#droplet-glass) url(#title-wave);
}
@media (prefers-reduced-motion: reduce){
  .hero__title--droplet .line > span{ filter:url(#droplet-glass); }
}
.hero__lede{
  font-family:var(--serif);
  font-size:clamp(18px, 1.4vw, 22px);
  line-height:1.55;
  max-width:62ch;
  color:var(--ink-soft);
  margin:0 0 48px;
  font-weight:400;
}
.hero__lede strong{color:var(--ink); font-weight:500;}

/* ── 水量計(meter) ─────────────────────────────── */
.meter{
  max-width:520px;
  margin:0 0 56px;
  padding:18px 22px;
  background:rgba(255, 255, 255, 0.55);
  border:1px solid var(--rule);
  border-radius:6px;
  font-family:var(--mono);
  font-size:12px;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 24px rgba(58, 125, 138, 0.08);
}
.meter__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.meter__label{
  color:var(--ink-mute);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}
.meter__count{
  color:var(--water-deep);
  font-weight:500;
  font-size:14px;
}
.meter__total{color:var(--ink-mute); font-weight:400;}
.meter__bar{
  position:relative;
  height:8px;
  background:rgba(126, 192, 205, 0.18);
  border-radius:4px;
  overflow:hidden;
}
.meter__fill{
  position:absolute; top:0; left:0;
  height:100%;
  width:85%;
  background:linear-gradient(to right, var(--water-deep), var(--water));
  border-radius:4px;
  transition:width .3s cubic-bezier(0.16, 1, 0.3, 1),
             background .3s ease;
}
.meter__ticks{
  position:absolute; inset:0;
  display:flex; padding:0 2px;
  pointer-events:none;
}
.meter__ticks span{
  flex:1;
  border-right:1px solid rgba(58, 125, 138, 0.18);
}
.meter__ticks span:last-child{border-right:none;}
.meter__ticks span.red{
  background:var(--warn);
  opacity:0.15;
}
.meter__foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px;
  font-size:11px;
  color:var(--ink-mute);
}
.meter__foot b{color:var(--water-deep); font-weight:500;}
.meter__hint{font-style:italic;}

/* ── 瓶中對話展示(thirst-demo) ───────────────────── */
.thirst-demo{
  margin:0 0 56px;
  padding:24px;
  background:rgba(255, 255, 255, 0.5);
  border:1px solid var(--rule);
  border-radius:8px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 40px rgba(58, 125, 138, 0.12);
}
.thirst-demo__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.thirst-demo__live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--warn);
}
.live-dot{
  width:6px; height:6px;
  background:var(--warn);
  border-radius:50%;
  box-shadow:0 0 8px var(--warn);
  animation:pulse 2s ease-in-out infinite;
}
.thirst-demo__title{
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
  color:var(--water-deep);
}
.thirst-demo__grid{
  display:grid;
  grid-template-columns:1.5fr 260px;
  gap:24px;
  align-items:start;
}

/* chat panel */
.td-chat{
  background:rgba(255,255,255,0.6);
  border:1px solid var(--rule);
  border-radius:6px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.td-chat__head{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:rgba(196, 221, 226, 0.4);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
}
.td-chat__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ink-faint);
}
.td-chat__dot--r{background:#e5816a;}
.td-chat__dot--y{background:#d9b15b;}
.td-chat__dot--g{background:#7ec0cd;}
.td-chat__name{margin-left:8px; letter-spacing:.05em;}
.td-chat__body{
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  font-size:13px;
  min-height:120px;
}
.td-msg{
  display:flex; gap:8px; align-items:flex-start;
}
.td-msg__who{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-mute);
  flex-shrink:0;
  padding-top:2px;
}
.td-msg__text{
  color:var(--ink);
  line-height:1.5;
}
.td-msg--ai .td-msg__text{
  color:var(--water-dark);
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
}
.td-cursor{
  display:inline-block;
  color:var(--water-deep);
  animation:blink 1s steps(2) infinite;
  font-weight:600;
}
@keyframes blink{
  0%,50%{opacity:1;}
  51%,100%{opacity:0;}
}
.td-chat__status{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:rgba(126, 192, 205, 0.12);
  border-radius:4px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--water-deep);
  margin-top:auto;
}
.td-pulse{
  width:5px; height:5px;
  background:var(--water-deep);
  border-radius:50%;
  animation:td-pulse-anim 1.4s ease-in-out infinite;
}
.td-pulse:nth-child(2){animation-delay:.2s;}
.td-pulse:nth-child(3){animation-delay:.4s;}
@keyframes td-pulse-anim{
  0%,100%{opacity:.3; transform:scale(1);}
  50%{opacity:1; transform:scale(1.4);}
}
.td-chat__foot{
  padding:10px 14px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  color:var(--ink-mute);
  display:flex; flex-wrap:wrap; gap:8px;
}
.td-round{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--water-deep);
}
.td-round__n{font-weight:500; color:var(--water-deep);}
.td-round__of{color:var(--ink-faint);}
.td-sep{color:var(--ink-faint);}
.td-tokens{color:var(--ink); font-weight:500;}
.td-ml{color:var(--warn); font-weight:500;}

/* flask */
.td-flask{
  display:flex; flex-direction:column; align-items:center;
  padding:16px;
  background:rgba(255,255,255,0.4);
  border:1px solid var(--rule);
  border-radius:6px;
}
.td-flask__neck{
  width:30px; height:20px;
  border:2px solid var(--water-deep);
  border-bottom:none;
  border-radius:6px 6px 0 0;
  margin-bottom:-1px;
  background:rgba(255,255,255,0.6);
}
.td-flask__body{
  position:relative;
  width:140px;
  height:200px;
  border:2px solid var(--water-deep);
  border-radius:0 0 24px 24px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(196,221,226,0.2) 100%);
}
/* bottle.png 寫實插畫版 — 用圖片取代 CSS 繪製的瓶身輪廓 */
.td-flask--photo .td-flask__body{
  /* 寬高比 = bottle.png 原圖 1024:1536 (0.667),contain 剛好填滿無留白;尺寸走 demo1 那種精緻小瓶 */
  width:220px;
  height:330px;
  border:none;
  border-radius:0;
  background:none;
}
.td-flask__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:contain;
  z-index:1;
  pointer-events:none;
}
/* 水位容器:只在瓶身「內裝液體」的緊實範圍內顯示(依 bottle.png 實測 bbox 換算百分比)。
   #td-water 由 JS 直接設定 inline height%,故用外層 liquidbox 定義裁切範圍,
   #td-water 仍保留原本 bottom:0 錨定 + height:100% 的預設寫法。 */
.td-flask--photo .td-flask__liquidbox{
  position:absolute;
  left:38.5%; right:38.5%;
  top:25.5%; bottom:35.5%;
  overflow:hidden;
  border-radius:0 0 10px 10px;
  z-index:2;
}
.td-flask--photo .td-water{
  position:absolute;
  left:0; right:0; bottom:0;
}
.td-flask--photo .td-flask__bubble{
  bottom:35.5%;
  animation-name:bubble-rise-tall;
}
@keyframes bubble-rise-tall{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{opacity:1;}
  90%{opacity:1;}
  100%{ transform:translateY(-125px) scale(0.6); opacity:0; }
}
.td-flask--photo .td-ticks-l{
  left:8%;
  top:25.5%; bottom:35.5%;
}
.td-ticks-l{
  position:absolute;
  left:6px; top:0; bottom:0;
  display:flex; flex-direction:column-reverse;
  font-family:var(--mono);
  font-size:8px;
  color:var(--ink-mute);
  z-index:5;
  pointer-events:none;
}
.td-ticks-l span{
  flex:1;
  display:flex; align-items:center;
  padding-left:2px;
}
.td-ticks-l span:nth-child(1){color:var(--warn);}
.td-water{
  position:absolute;
  left:0; right:0; bottom:0;
  height:100%;
  background:linear-gradient(180deg,
    rgba(126, 192, 205, 0.6) 0%,
    rgba(58, 125, 138, 0.85) 100%);
  transition:height 1.6s cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
}
/* photo 版:走 demo1 那種淡天藍、半透明「瓶裝水」感 */
.td-flask--photo .td-water{
  background:linear-gradient(180deg,
    rgba(150, 205, 235, 0.55) 0%,
    rgba(110, 178, 224, 0.72) 100%);
}
.td-water__current{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 30% at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 70% 70%, rgba(155, 211, 221, 0.3) 0%, transparent 60%);
  animation:current-drift 14s ease-in-out infinite alternate;
}
@keyframes current-drift{
  from{ transform:translateX(-3%); }
  to  { transform:translateX(3%); }
}
.td-water__surface{
  position:absolute;
  left:0; right:0; top:0;
  height:8px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.7) 0%,
    rgba(155, 211, 221, 0.5) 100%);
  box-shadow:0 0 12px rgba(255,255,255,0.4);
}
.td-water__wave{
  position:absolute; left:-50%; right:-50%;
  height:18px;
  background:rgba(255,255,255,0.4);
  border-radius:45%;
}
.td-water__wave--a{ top:-4px; animation:wave-spin 6s linear infinite; }
.td-water__wave--b{ top:-2px; animation:wave-spin 8s linear infinite reverse; opacity:0.6; }
.td-water__wave--c{ top:-6px; animation:wave-spin 11s linear infinite; opacity:0.4; }
@keyframes wave-spin{
  from{ transform:rotate(0); }
  to  { transform:rotate(360deg); }
}
.td-flask__bubble{
  position:absolute;
  width:6px; height:6px;
  background:rgba(255,255,255,0.8);
  border-radius:50%;
  animation:bubble-rise 4s ease-in infinite;
}
.td-flask__bubble--1{ left:30%; bottom:0; animation-delay:0s; }
.td-flask__bubble--2{ left:55%; bottom:0; animation-delay:1.3s; width:4px; height:4px; }
.td-flask__bubble--3{ left:75%; bottom:0; animation-delay:2.6s; width:5px; height:5px; }
@keyframes bubble-rise{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{opacity:1;}
  90%{opacity:1;}
  100%{ transform:translateY(-180px) scale(0.6); opacity:0; }
}
.td-empty{
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--warn);
  background:rgba(217, 122, 91, 0.1);
  opacity:0;
  transition:opacity .3s;
  z-index:6;
}
.td-empty.is-on{opacity:1;}
.td-flask__readout{
  margin-top:14px;
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--mono);
}
.td-flask__now{
  font-size:22px;
  font-weight:500;
  color:var(--water-deep);
}
.td-flask__now small{
  font-size:12px;
  font-weight:400;
  color:var(--ink-mute);
  margin-left:2px;
}
.td-flask__of{
  font-size:11px;
  color:var(--ink-mute);
}

.hero__cta{
  display:flex; gap:16px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  border-radius:3px;
  transition:all .2s;
  cursor:pointer;
}
.btn--primary{
  background:var(--water-deep);
  color:var(--sky-pale);
  border:1px solid var(--water-deep);
}
.btn--primary:hover{
  background:var(--water-dark);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(26, 58, 68, 0.25);
}
.btn--ghost{
  background:rgba(255,255,255,0.5);
  color:var(--water-deep);
  border:1px solid var(--rule-strong);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,0.8);
  border-color:var(--water-deep);
}
.btn--block{display:flex; width:100%; justify-content:center;}

.hero__scroll{
  position:absolute;
  bottom:30px;
  left:50%; transform:translateX(-50%);
  width:24px; height:38px;
  border:1px solid var(--ink-soft);
  border-radius:12px;
  z-index:5;
}
.hero__scroll span{
  display:block;
  width:2px; height:8px;
  margin:6px auto;
  background:var(--water-deep);
  border-radius:1px;
  animation:scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(14px); opacity:0; }
}

/* ── 通用 section 結構 ─────────────────────────────── */
.sec{
  position:relative;
  padding:var(--sec-pad) var(--gutter);
  overflow:hidden;
}

/* section inner — 內容容器,確保 z-stack 正確 */
.sec__inner{
  position:relative;
  z-index:5;
  width:100%; max-width:var(--maxw);
  margin:0 auto;
}

/* 雲裝飾(SVG 漂浮在每個 section 上方) — 雲是視覺載體 */
.sec__clouds{
  position:absolute;
  top:0; left:0; right:0;
  height:240px;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.sec__clouds svg{
  position:absolute;
  opacity:0.78;
  filter:drop-shadow(0 0 24px rgba(255,255,255,0.55));
  animation: cloud-drift linear infinite;
  will-change:transform;
}
.sec__clouds svg:nth-child(1){ top:6%;  left:-12%; width:460px; animation-duration:95s;  }
.sec__clouds svg:nth-child(2){ top:38%; left:-24%; width:340px; animation-duration:115s; opacity:0.7; }
.sec__clouds svg:nth-child(3){ top:18%; left:-35%; width:280px; animation-duration:135s; opacity:0.6; }

/* 深海雲氣(暗色調,給 mech 等深水 section 用) */
.sec__clouds--deep svg{
  filter:drop-shadow(0 0 28px rgba(155,211,221,0.45));
}

/* 波浪分隔器(SVG) — section 之間的水面,水是視覺載體 */
.sec__wave{
  position:absolute;
  left:-5%; right:-5%;
  height:120px;
  z-index:3;
  pointer-events:none;
  overflow:visible;
}
.sec__wave--top{ top:-1px; transform:scaleY(-1); }
.sec__wave--bot{ bottom:-1px; }
.sec__wave svg{ width:100%; height:100%; display:block; overflow:visible; }
.sec__wave path{
  animation: wave-undulate 14s ease-in-out infinite alternate;
  transform-origin:center;
  filter:drop-shadow(0 0 16px rgba(126,192,205,0.4));
}
@keyframes wave-undulate{
  from{ transform:translateX(-2%); }
  to  { transform:translateX(2%); }
}

/* 瓶身剪影(SVG) — 某些 section 的背景隱喻,作為主要視覺載體 */
.sec__bottle{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:0.72;
  filter:drop-shadow(0 12px 48px rgba(58, 125, 138, 0.32)) drop-shadow(0 0 80px rgba(155,211,221,0.18));
}
.sec__bottle svg{width:100%;height:100%;}

/* section header(編號 + 標題 + 副標) */
.sec__head{
  position:relative;
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.sec__num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ink-mute);
  font-weight:500;
}
.sec__title{
  font-family:var(--serif);
  font-size:clamp(36px, 5vw, 64px);
  font-weight:400;
  line-height:1;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--ink);
}
.sec__sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(14px, 1.2vw, 18px);
  color:var(--ink-soft);
  margin:0;
  margin-left:auto;
}

/* ── SECTION: 作品 ─────────────────────────────── */
.sec--work{
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(126, 192, 205, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(212, 229, 234, 0.55) 0%, rgba(196, 221, 226, 0.55) 100%);
  color:var(--ink);
}
.sec--work .sec__wave{ color:var(--mist); }
.sec--work .sec__wave--top svg path{ fill:var(--sky-pale); }

.work{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:start;
}
.work__statement{
  padding-right:20px;
}
.work__quote{
  font-family:var(--serif);
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.4;
  font-weight:400;
  margin:0 0 16px;
  color:var(--ink);
}
.work__quote strong{
  color:var(--water-deep);
  font-weight:500;
}
.work__attr{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-mute);
  margin:0 0 32px;
}
.work__lede{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0;
  max-width:48ch;
}
.work__lede strong{color:var(--water-deep); font-weight:500;}

.work__cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.wcard{
  position:relative;
  padding:24px;
  background:rgba(255, 255, 255, 0.55);
  border:1px solid var(--rule);
  border-radius:6px;
  backdrop-filter:blur(10px);
  transition:all .25s;
}
.wcard:hover{
  background:rgba(255,255,255,0.75);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(58, 125, 138, 0.12);
}
.wcard__icon{
  width:48px; height:48px;
  color:var(--water-deep);
  margin-bottom:14px;
  opacity:0.85;
}
.wcard h3{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  margin:0 0 8px;
  color:var(--ink);
}
.wcard p{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

.work__stats{
  margin-top:80px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
  padding:32px 0;
}
.stat{
  text-align:center;
  padding:0 20px;
  border-right:1px solid var(--rule);
}
.stat:last-child{border-right:none;}
.stat__num{
  display:block;
  font-family:var(--serif);
  font-size:clamp(32px, 4vw, 48px);
  font-weight:400;
  color:var(--water-deep);
  line-height:1;
  margin-bottom:8px;
}
.stat__num small{
  font-size:14px;
  font-weight:400;
  color:var(--ink-mute);
  margin-left:2px;
}
.stat__lbl{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-mute);
}

/* ── SECTION: 概念 ─────────────────────────────── */
.sec--concept{
  background:
    /* 越往下越深 — 像沉入水中 */
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(255,255,255,0.25) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(196, 221, 226, 0.55) 0%,
      rgba(126, 192, 205, 0.65) 50%,
      rgba(58, 125, 138, 0.75) 100%);
  color:var(--ink-light);
}
.sec--concept .sec__title{color:var(--ink-light);}
.sec--concept .sec__num,
.sec--concept .sec__sub{color:var(--ink-light-mute);}
.sec--concept em{color:var(--water-bright);}
.sec--concept strong{color:var(--ink-light);}

.concept{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:start;
}
.concept__text{color:var(--ink-light);}
.concept__text .lede{
  font-family:var(--serif);
  font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.5;
  margin:0 0 32px;
  color:var(--ink-light);
  font-weight:400;
}
.concept__text .lede strong{color:var(--water-bright); font-weight:500;}
.concept__text .lede em{color:var(--water-bright);}

.concept__h{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--water-bright);
  margin:32px 0 12px;
}
.concept__text p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-light-soft);
  margin:0 0 16px;
}
.concept__text p strong{color:var(--ink-light); font-weight:500;}
.concept__text p em{color:var(--water-bright);}
.concept__text p a{
  color:var(--water-bright);
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .2s;
}
.concept__text p a:hover{border-color:var(--water-bright);}

.concept__side{
  display:flex; flex-direction:column; gap:24px;
  padding:32px;
  background:rgba(12, 36, 41, 0.4);
  border:1px solid rgba(155, 211, 221, 0.18);
  border-radius:6px;
  backdrop-filter:blur(12px);
}
.quote{
  margin:0;
  padding:0;
}
.quote blockquote{
  margin:0 0 12px;
}
.quote blockquote p{
  font-family:var(--serif);
  font-size:20px;
  font-style:italic;
  line-height:1.5;
  color:var(--ink-light);
  margin:0;
}
.quote figcaption{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink-light-mute);
}

.pull{
  display:flex; align-items:baseline; gap:16px;
  padding-top:20px;
  border-top:1px solid rgba(155, 211, 221, 0.18);
}
.pull__num{
  font-family:var(--serif);
  font-size:clamp(40px, 5vw, 56px);
  font-weight:400;
  color:var(--water-bright);
  line-height:1;
}
.pull__num small{
  font-size:18px;
  color:var(--ink-light-mute);
  margin-left:4px;
}
.pull__lbl{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-light-soft);
  line-height:1.5;
}

/* ── SECTION: 機制 ─────────────────────────────── */
.sec--mech{
  background:
    /* 流動的水紋(向上流動的曲線) */
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(155,211,221,0.18) 0%, transparent 70%),
    /* 主色:清亮水 → 中度水(不再是深海) */
    linear-gradient(180deg, rgba(155, 211, 221, 0.55) 0%, rgba(126, 192, 205, 0.65) 45%, rgba(94, 169, 184, 0.75) 100%);
  color:var(--ink);
}
.sec--mech::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(115deg, transparent 0, transparent 80px, rgba(126,192,205,0.05) 80px, rgba(126,192,205,0.05) 82px),
    repeating-linear-gradient(65deg, transparent 0, transparent 120px, rgba(155,211,221,0.04) 120px, rgba(155,211,221,0.04) 122px);
  animation: current-shift 30s linear infinite;
}
@keyframes current-shift{
  from{ transform:translateX(0); }
  to  { transform:translateX(-80px); }
}
.sec--mech .sec__title{color:var(--ink);}
.sec--mech .sec__num,
.sec--mech .sec__sub{color:var(--ink-mute);}

.mech__lede{
  font-family:var(--serif);
  font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.5;
  color:var(--ink-light);
  margin:0 0 40px;
  max-width:32ch;
  font-weight:400;
}

.mech__steps{
  list-style:none; margin:0 0 56px; padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  position:relative;
}
.step{
  position:relative;
  padding:24px 20px;
  background:rgba(155, 211, 221, 0.08);
  border:1px solid rgba(155, 211, 221, 0.18);
  border-radius:6px;
  backdrop-filter:blur(8px);
}
.step__no{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--water-bright);
  margin-bottom:12px;
}
.step__t{
  display:block;
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink-light);
  margin-bottom:8px;
  font-weight:500;
}
.step__p{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-light-soft);
  margin:0;
}
.step__arrow{
  position:absolute;
  top:50%; right:-12px;
  width:12px; height:1px;
  background:var(--water-bright);
  transform:translateY(-50%);
  z-index:5;
}
.step__arrow::after{
  content:'';
  position:absolute;
  right:-1px; top:-3px;
  width:6px; height:6px;
  border-top:1px solid var(--water-bright);
  border-right:1px solid var(--water-bright);
  transform:rotate(45deg);
}

.mech__diagram{
  position:relative;
  margin:0 0 48px;
  padding:clamp(40px, 5vw, 64px) clamp(32px, 4vw, 64px);
  background:rgba(8, 24, 30, 0.4);
  border:1px solid rgba(155, 211, 221, 0.2);
  border-radius:8px;
  backdrop-filter:blur(8px);
}
.mech__diagram::before{
  content:attr(data-cap);
  position:absolute;
  top:12px; left:20px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--water-bright);
  opacity:0.5;
}
.mech__diagram svg{
  width:100%; height:auto;
  display:block;
}

.mech__notes{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.note{
  position:relative;
  padding:24px 20px 24px 24px;
  background:rgba(155, 211, 221, 0.06);
  border-left:2px solid var(--water-bright);
}
.note__no{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--water-bright);
  margin-bottom:8px;
}
.note__text{
  font-size:14px;
  line-height:1.65;
  color:var(--ink-light-soft);
}

/* ── SECTION: 詩流 ─────────────────────────────── */
.sec--voices{
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,0.2) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(196, 221, 226, 0.55) 0%,
      rgba(212, 229, 234, 0.55) 50%,
      rgba(234, 243, 246, 0.55) 100%);
  color:var(--ink);
}
.sec--voices .sec__title{color:var(--ink);}

.voices__lede{
  font-family:var(--serif);
  font-size:clamp(18px, 1.6vw, 22px);
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 48px;
  max-width:60ch;
  font-weight:400;
}
.voices__lede em{color:var(--water-deep); font-style:italic;}
.voices__lede strong{color:var(--ink); font-weight:500;}

#poems-container{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* ── 河詩區段(資料驅動) ─────────────────────────────── */
.river-poems{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
  margin-top:8px;
}
.river-poems__loading{
  grid-column:1 / -1;
  text-align:center;
  color:var(--water-deep);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:48px 0;
  opacity:.7;
}

.voices__legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:18px 0 30px;
  padding:14px 18px;
  background:rgba(255,255,255,.45);
  border:1px solid var(--rule);
  border-radius:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  backdrop-filter:blur(8px);
}
.legend-item b{
  color:var(--water-deep);
  font-weight:500;
  margin-right:6px;
  font-size:12px;
}
.legend-sep{
  color:var(--rule);
  margin:0 4px;
}

.voices__note{
  margin:36px 0 0;
  padding:20px 24px;
  border-left:2px solid var(--water-deep);
  background:rgba(255,255,255,.35);
  font-size:14px;
  line-height:1.8;
  color:var(--ink-soft);
  font-family:var(--serif);
  font-style:italic;
}
.voices__note em{
  color:var(--water-deep);
  font-style:italic;
}
.voices__note strong{
  color:var(--ink);
  font-weight:500;
  font-style:normal;
}

/* ── 河詩卡片 ─────────────────────────────────────── */
#river-poems .poem--river{
  display:grid;
  grid-template-columns:158px 1fr;
  gap:24px;
  padding:28px 28px 24px;
  background-color:rgba(255, 255, 255, 0.55);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(234,243,246,0.5) 100%),
    url("../assets/pbk.jpg");
  background-position:center center, center center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
  border:1px solid var(--rule);
  border-radius:8px;
  backdrop-filter:blur(12px);
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
  align-items:start;
}
.poem--river::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:4px; height:100%;
  background:linear-gradient(180deg, var(--water-deep) 0%, var(--water) 100%);
  opacity:.5;
  transition:opacity .3s;
}
#river-poems .poem--river:hover{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(234,243,246,0.72) 100%),
    url("../assets/pbk.jpg");
  transform:translateY(-3px);
  box-shadow:0 18px 48px rgba(58, 125, 138, 0.15);
}
.poem--river:hover::before{opacity:.9;}

/* 左側資料徽章 */
.poem__meta-river{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:20px;
  border-right:1px solid var(--rule);
  font-family:var(--mono);
}
.rstat{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  font-size:11px;
  letter-spacing:.05em;
}
.rstat__k{
  display:inline-block;
  min-width:22px;
  padding:2px 6px;
  border-radius:3px;
  background:rgba(58, 125, 138, 0.12);
  color:var(--water-deep);
  font-weight:500;
  text-align:center;
  font-size:10px;
}
.rstat--w .rstat__v{
  color:var(--ink);
  font-size:18px;
  font-weight:400;
  letter-spacing:-.02em;
}
.rstat--wt .rstat__v{
  color:var(--ink);
  font-size:18px;
  font-weight:400;
  letter-spacing:-.02em;
}
.rstat--wt .rstat__v{
  /* 水溫高 → 偏暖色 */
  color:var(--ink);
}
.rstat--shape .rstat__v{
  color:var(--water-deep);
  font-size:12px;
}
.rstat__u{
  color:var(--ink-mute);
  font-size:10px;
  margin-left:2px;
}
/* 資料條形圖:線性指示 W/WT 在歷史範圍中的位置 */
.rstat__bar{
  display:block;
  width:100%;
  height:3px;
  margin-top:4px;
  background:rgba(58, 125, 138, 0.12);
  border-radius:1px;
  overflow:hidden;
}
.rstat__bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--water-deep), var(--water));
  border-radius:1px;
  transition:width .6s ease;
}
.rstat__bar--wt span{
  /* 水溫高 → 偏暖色 */
  background:linear-gradient(90deg, #4a8a9c, #d97757);
}
.rstat__src{
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--rule);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.rstat__src a{
  color:var(--water-deep);
  text-decoration:none;
  border-bottom:1px dotted var(--water-deep);
}
.rstat__src a:hover{color:var(--ink);}

/* 右側詩的本體 */
.poem__main{
  min-width:0;
}
.poem__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.poem--river .poem__no{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  color:var(--water-deep);
  margin:0;
  font-weight:500;
}
.poem__date{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:.05em;
}
.poem__body{
  font-family:var(--serif);
  color:var(--ink);
}
.poem__stanza{
  margin:0 0 16px;
  line-height:1.7;
}
/* 水波包裹:讓 SVG filter 可套用到整段詩文 */
.poem__body--waved{position:relative; isolation:isolate;}
/* 詩行獨立塊級化,讓 filter 對每行獨立生效;italic 內斂保留文學感 */
.poem__line{
  font-style:italic;
  display:inline-block;
  will-change:transform, filter;
  transition:filter .3s ease;
}
/* 動態字級:由 charsPerLine 決定 */
.poem__line--xs{font-size:13px; letter-spacing:.02em; line-height:1.85;}
.poem__line--sm{font-size:15px; line-height:1.75;}
.poem__line--md{font-size:17px; line-height:1.7;}
.poem__line--lg{font-size:18px; line-height:1.65;}

/* ── 水波 SVG filter (feTurbulence + feDisplacementMap) ──────────
   將 #water-distort 套用在任何元素上,該元素就會被 turbulence 雜訊位移。
   baseFrequency: 越小顆粒越粗;numOctaves: 細節層;scale: 位移幅度。
   變化由 JS 依 WT/W 動態調整 → 詩歌如水中倒影。
*/
.poem__line--waved{filter:url(#water-distort);}
@media (prefers-reduced-motion: reduce){
  .poem__line--waved{filter:none;}
}

/* 段尾分隔:中段跟末段之間更明顯 */
.poem__stanza + .poem__stanza{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(58, 125, 138, 0.18);
}

/* 響應式 */
@media (max-width: 860px){
  .river-poems{grid-template-columns:1fr;}
  .poem--river{grid-template-columns:1fr;}
  .poem__meta-river{
    flex-direction:row;
    flex-wrap:wrap;
    padding-right:0;
    padding-bottom:14px;
    border-right:none;
    border-bottom:1px solid var(--rule);
  }
  .rstat{flex:1 1 auto; min-width:80px;}
  .rstat__src{flex:1 0 100%;}
}

/* (以下是原 .poem 樣式保留) */
.poem{
  padding:32px 28px;
  background:rgba(255, 255, 255, 0.55);
  border:1px solid var(--rule);
  border-radius:6px;
  backdrop-filter:blur(10px);
  transition:all .3s;
}
.poem:hover{
  background:rgba(255,255,255,0.8);
  transform:translateY(-2px);
  box-shadow:0 16px 48px rgba(58, 125, 138, 0.12);
}
.poem__no{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--water-deep);
  margin-bottom:12px;
}
.poem__q{
  font-family:var(--serif);
  font-size:clamp(15px, 1.3vw, 17px);
  line-height:1.65;
  color:var(--ink);
  margin:0 0 16px;
  font-style:italic;
  white-space:pre-line;
}
.poem__src{
  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-mute);
  padding-top:12px;
  border-top:1px solid var(--rule);
}

/* ── SECTION: 展出 ─────────────────────────────── */
.sec--exhibition{
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 60%),
    linear-gradient(180deg, rgba(234, 243, 246, 0.55) 0%, rgba(196, 221, 226, 0.55) 100%);
  color:var(--ink);
}
.sec--exhibition .sec__title{color:var(--ink);}

.exhibition{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:start;
}
.exhibition__main h3{
  font-family:var(--serif);
  font-size:clamp(22px, 2vw, 28px);
  font-weight:500;
  margin:0 0 20px;
  color:var(--ink);
}
.exhibition__main p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 24px;
}
.exhibition__main p strong{color:var(--water-deep); font-weight:500;}

.exhibition__list{
  list-style:none; margin:0 0 40px; padding:0;
}
.exhibition__list li{
  position:relative;
  padding:16px 0 16px 32px;
  border-top:1px solid var(--rule);
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
}
.exhibition__list li:last-child{border-bottom:1px solid var(--rule);}
.exhibition__list li b{
  display:block;
  font-family:var(--serif);
  font-size:16px;
  color:var(--water-deep);
  font-weight:500;
  margin-bottom:4px;
}
.exhibition__list li::before{
  content:'';
  position:absolute;
  left:0; top:22px;
  width:18px; height:1px;
  background:var(--water-deep);
}

.exhibition__spec{
  padding:24px;
  background:rgba(255, 255, 255, 0.55);
  border:1px solid var(--rule);
  border-radius:6px;
  backdrop-filter:blur(10px);
}
.exhibition__spec h4{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-mute);
  margin:0 0 16px;
  font-weight:500;
}
.exhibition__spec-dl{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 16px;
  font-size:13px;
}
.exhibition__spec-dl dt{
  font-family:var(--mono);
  color:var(--ink-mute);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}
.exhibition__spec-dl dd{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:14px;
}

.exhibition__side{
  padding:32px;
  background:rgba(255, 255, 255, 0.65);
  border:1px solid var(--rule-strong);
  border-radius:8px;
  backdrop-filter:blur(12px);
  display:flex; flex-direction:column; gap:16px;
}
.exhibition__side h3{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  margin:0;
}
.exhibition__side p{
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}
.exhibition__side p strong{color:var(--water-deep); font-weight:500;}

.exhibition__meta{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px;
}
.meta-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px;
}
.meta-key{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-mute);
}
.meta-val{
  color:var(--ink);
  font-family:var(--serif);
}

/* ── SPECIMEN STRIP (印刷打樣卡) ──────────────── */
.specimen{
  position:relative;
  padding:64px var(--gutter) 56px;
  background:
    radial-gradient(ellipse at 30% 20%, var(--specimen-a-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, var(--specimen-b-soft) 0%, transparent 55%),
    linear-gradient(180deg, rgba(234, 243, 246, 0.55) 0%, rgba(196, 221, 226, 0.55) 100%);
  border-top:1px solid var(--rule);
}
.specimen__inner{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.specimen__title{
  font-family:var(--serif);
  font-size:clamp(22px, 3vw, 32px);
  color:var(--ink);
  margin:0 0 12px;
  letter-spacing:0.04em;
}
.specimen__lede{
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.7;
  margin:0 0 36px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.specimen__pair{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:32px;
  flex-wrap:wrap;
}
.specimen__card{
  appearance:none;
  background:transparent;
  border:1px solid var(--rule-strong);
  padding:18px 22px 14px;
  border-radius:14px;
  cursor:pointer;
  transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:inherit;
}
.specimen__card:hover,
.specimen__card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--specimen-a);
  box-shadow:0 10px 24px -10px rgba(58, 125, 138, 0.35);
  outline:none;
}
.specimen__card--b:hover,
.specimen__card--b:focus-visible{
  border-color:var(--specimen-b);
  box-shadow:0 10px 24px -10px rgba(199, 178, 184, 0.4);
}
.specimen__svg{
  width:140px;
  height:196px;
  display:block;
}
.specimen__card.is-swapped .sp-inner{ fill:#c7b2b8; }
.specimen__card--b.is-swapped .sp-inner{ fill:#9ba7b7; }
.specimen__meta{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.specimen__hint{
  margin:36px 0 0;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:0.06em;
}

/* hero 角落 specimen 章 — 小型浮動標,連結 hero 液面色票來源 */
.hero__specimen{
  position:absolute;
  right:18px;
  bottom:18px;
  width:88px;
  height:124px;
  z-index:6;
  pointer-events:auto;
  opacity:0.85;
  filter:drop-shadow(0 4px 12px rgba(58, 125, 138, 0.25));
  transition:opacity 240ms ease, transform 240ms ease;
}
.hero__specimen:hover{ opacity:1; transform:translateY(-2px) scale(1.04); }
.hero__specimen .sp-code{ font-size:8px; fill:#3a3a3a; }
@media (max-width: 640px){
  .hero__specimen{ width:64px; height:90px; right:8px; bottom:8px; }
  .specimen__pair{ gap:18px; }
  .specimen__svg{ width:120px; height:168px; }
}

/* ── FOOTER ────────────────────────────────────── */
.foot{
  position:relative;
  padding:48px var(--gutter) 32px;
  background:linear-gradient(180deg,
    rgba(196, 221, 226, 0.55) 0%,
    rgba(126, 192, 205, 0.65) 50%,
    rgba(58, 125, 138, 0.8) 100%);
  color:var(--ink-light);
  border-top:1px solid rgba(255,255,255,0.1);
}
.foot__top{
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,0.15);
}
.foot__mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:14px;
  color:var(--ink-light);
}
.foot__drop{
  display:inline-block;
  width:12px; height:12px;
  background:var(--water-bright);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 0 12px var(--water-bright);
}
.foot__note{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:var(--ink-light-soft);
  margin:0;
  max-width:50ch;
  text-align:right;
}
.foot__bot{
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px;
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-light-mute);
}
.foot__links{display:flex; gap:20px;}
.foot__links a{color:var(--ink-light-soft); transition:color .15s;}
.foot__links a:hover{color:var(--water-bright);}

/* ── 頁頂瀑布(CSS-only) ─────────────────────────── */
.top-drips{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;
  pointer-events:none;
  z-index:2;
}
.td{
  position:absolute;
  top:0;
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(230,245,250,1);
  box-shadow:
    0 0 4px rgba(255,255,255,0.9),
    0 0 10px rgba(126,192,205,1),
    0 0 22px rgba(126,192,205,0.8),
    0 0 40px rgba(126,192,205,0.4);
  animation: td-fall 3.6s cubic-bezier(.55,.06,.68,.19) infinite;
}
.td::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  width:2px;
  height:0;
  margin-left:-1px;
  background:linear-gradient(180deg,
    rgba(126,192,205,0) 0%,
    rgba(220,240,245,0.85) 70%,
    rgba(255,255,255,0.95) 100%);
  box-shadow: 0 0 4px rgba(126,192,205,0.7);
  animation: td-stream 3.6s cubic-bezier(.55,.06,.68,.19) infinite;
}
.td::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:24px; height:24px;
  margin:-12px 0 0 -12px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(220,240,245,0.45) 0%,
    rgba(126,192,205,0.18) 40%,
    rgba(126,192,205,0) 70%);
  pointer-events:none;
}
.td1 { left:8%;  animation-delay:0.0s; }
.td2 { left:22%; animation-delay:0.7s; }
.td3 { left:38%; animation-delay:1.4s; }
.td4 { left:50%; animation-delay:2.1s; }
.td5 { left:64%; animation-delay:2.8s; }
.td6 { left:78%; animation-delay:1.0s; }
.td7 { left:92%; animation-delay:1.7s; }
@keyframes td-fall {
  0%   { top:-10px; opacity:0; }
  6%   { top:0;    opacity:1; }
  85%  { top:calc(100vh - 14px); opacity:1; }
  92%  { opacity:0; transform:scale(1.4); }
  100% { top:calc(100vh - 6px); opacity:0; }
}
@keyframes td-stream {
  0%   { height:0; opacity:0; }
  6%   { height:0; opacity:1; }
  85%  { height:calc(100vh - 8px); opacity:1; }
  92%  { height:calc(100vh - 8px); opacity:0; }
  100% { height:0; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .td { display:none; }
  .cloud, .hero__clouds svg { animation: none; }
}

/* ── faucet hint ─────────────────────────────────── */
.faucet-hint{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:50;
  display:flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:rgba(255, 255, 255, 0.7);
  border:1px solid var(--rule);
  border-radius:999px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  pointer-events:none;
  backdrop-filter:blur(8px);
  opacity:.65;
  transition:opacity .3s;
}
.faucet-hint:hover{opacity:1;}
.faucet-hint__drop{
  display:inline-block;
  width:7px; height:7px;
  background:var(--water-deep);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 0 8px var(--water-glow);
  animation:drop 4s ease-in-out infinite;
}

/* ── scroll reveal ──────────────────────────────── */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal--delay-1{transition-delay:.1s;}
.reveal--delay-2{transition-delay:.2s;}
.reveal--delay-3{transition-delay:.3s;}

/* ── responsive ─────────────────────────────────── */
@media (max-width: 1024px){
  .work, .concept, .exhibition{grid-template-columns:1fr; gap:40px;}
  .work__statement{padding-right:0;}
  .mech__steps{grid-template-columns:repeat(2, 1fr);}
  .mech__notes{grid-template-columns:1fr;}
  #poems-container{grid-template-columns:1fr;}
  .work__stats{grid-template-columns:repeat(2, 1fr); gap:24px 0;}
  .stat:nth-child(2){border-right:none;}
}
@media (max-width: 640px){
  .nav{padding:14px 20px; gap:12px; font-size:12px;}
  .nav__title{display:none;}
  .nav__links{display:none;}
  .hero{padding-top:calc(60px + 80px);}
  .thirst-demo__grid{grid-template-columns:1fr;}
  .mech__steps{grid-template-columns:1fr;}
  .step__arrow{display:none;}
  .work__stats{grid-template-columns:1fr;}
  .stat{border-right:none; border-bottom:1px solid var(--rule); padding-bottom:16px;}
  .stat:last-child{border-bottom:none;}
  .foot__top{flex-direction:column; align-items:flex-start;}
  .foot__note{text-align:left;}
  .foot__bot{flex-direction:column; gap:12px;}
}