/* ==========================================================================
   濕盟 30 週年線上成果展 — main.css
   設計代幣置頂，全站顏色／字體／間距一律引用變數，不寫死數值。
   ========================================================================== */

:root{
  /* 色彩：濕地泥灘的垂直分層 */
  --ink:#1c2620;           /* 近黑墨綠｜主文字 */
  --wetland:#2e6b3e;       /* 濕地綠｜主色、按鈕 */
  --wetland-deep:#1d4a2b;  /* 深水綠｜標題、深色區塊 */
  --water:#3a8fb7;         /* 潮間藍｜時間軸節點、輔助 */
  --water-deep:#2c6a8c;    /* 深潮藍｜年份數字 */
  --reed:#c9b568;          /* 蘆葦金｜里程碑、強調（唯一暖色，用量克制） */
  --silt:#8b6f47;          /* 灘地褐｜次要文字 */
  --paper:#f5f1e6;         /* 蘆葦米｜底色 */
  --paper-warm:#efe9d6;    /* 暖紙色｜卡片底 */
  --line:rgba(28,38,32,.14);

  /* 字體（系統字體堆疊，不引入 Web Font） */
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif;
  --handwriting:"Huninn","Klee One","Kosugi Maru",var(--sans); /* 濕人絮語留言｜主要字體為開源圓體「粉圓體」（Huninn，justfont，SIL OFL），僅 guestbook.html 透過 Google Fonts CDN 載入，是全站唯一的 Web Font 例外；其餘退回系統圓體／黑體 */

  /* 版面 */
  --wrap:1160px;
  --gutter:clamp(20px,5vw,64px);

  /* 動態 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:200ms;
  --dur-med:420ms;

  /* 共用尺寸 */
  --header-h:72px;
  --radius:4px;
  --radius-lg:10px;
}

/* ==========================================================================
   全域重置
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, picture, svg{ display:block; max-width:100%; }

ul, ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
}

h1, h2, h3, h4, p, figure{ margin:0; }

/* 焦點樣式：不移除 outline，改為品牌色描邊 */
:focus-visible{
  outline:3px solid var(--water);
  outline-offset:3px;
}

/* 減少動態偏好：全域停用動畫與平滑捲動 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   版面工具
   ========================================================================== */

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   字體階層（3.2）
   ========================================================================== */

.h1, h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.08;
  color:var(--wetland-deep);
}

.h2, h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem, 4.5vw, 3rem);
  line-height:1.15;
  color:var(--wetland-deep);
}

.year-number{
  font-family:var(--serif);
  font-weight:700;
  font-size:2rem;
  color:var(--water-deep);
}

.lede{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  line-height:1.9;
  color:var(--ink);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.18em;
  color:var(--wetland);
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  display:inline-block;
  width:20px;
  height:2px;
  background:var(--reed);
}

/* ==========================================================================
   共用元件：按鈕
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.85em 1.6em;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover{ transform:translateY(-1px); }

.btn-primary{
  background:var(--wetland);
  color:var(--paper);
  border:1px solid var(--wetland);
}

.btn-primary:hover{ background:var(--wetland-deep); border-color:var(--wetland-deep); }

.btn-ghost{
  background:transparent;
  color:var(--wetland-deep);
  border:1px solid var(--line);
}

.btn-ghost:hover{ border-color:var(--wetland); color:var(--wetland); }

/* ==========================================================================
   共用元件：膠囊標籤
   ========================================================================== */

.tag{
  display:inline-flex;
  align-items:center;
  padding:.3em 1em;
  border-radius:999px;
  background:var(--paper-warm);
  color:var(--silt);
  font-size:13px;
  font-weight:600;
  border:1px solid var(--line);
}

/* ==========================================================================
   共用元件：卡片
   ========================================================================== */

.card{
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,32px);
}

/* ==========================================================================
   原型預覽提示帶（draft banner）——正式上線前整條移除
   ========================================================================== */

.draft-banner{
  background:var(--wetland-deep);
  color:var(--paper);
  text-align:center;
  font-size:13px;
  padding:.6em 1em;
  line-height:1.5;
}

/* ==========================================================================
   導覽列（header）
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.site-header.scrolled{
  box-shadow:0 2px 12px rgba(28,38,32,.08);
  border-bottom-color:var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:var(--header-h);
}

.brand{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.05rem;
  color:var(--wetland-deep);
  flex-shrink:0;
}

.brand-mark{
  width:auto;
  height:52px;
  flex-shrink:0;
}

.site-nav{ display:none; }

.site-nav ul{
  display:flex;
  align-items:center;
  gap:clamp(1.2rem, 2vw, 2.2rem);
}

.site-nav a{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  padding:.3em 0;
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.site-nav a:hover{ color:var(--wetland); }

.site-nav a[aria-current="page"]{
  color:var(--wetland-deep);
  border-bottom-color:var(--reed);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:1rem;
}

.header-actions .btn-cta{ display:none; }

/* 漢堡按鈕 */
.hamburger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
}

.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px){
  .site-nav{ display:block; }
  .header-actions .btn-cta{ display:inline-flex; }
  .hamburger{ display:none; }
}

/* ==========================================================================
   抽屜選單（drawer menu）
   ========================================================================== */

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(28,38,32,.45);
  z-index:150;
}

.drawer-overlay[hidden]{ display:none; }

.drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(320px, 84vw);
  background:var(--paper);
  z-index:160;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
  transform:translateX(100%);
  transition:transform var(--dur-med) var(--ease);
  overflow-y:auto;
}

.drawer.is-open{ transform:translateX(0); }

.drawer-close{
  align-self:flex-end;
  width:40px;
  height:40px;
  font-size:1.6rem;
  color:var(--ink);
}

.drawer nav ul{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}

.drawer nav a{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:700;
  color:var(--wetland-deep);
}

.drawer nav a[aria-current="page"]{ color:var(--wetland); }

body.drawer-open{ overflow:hidden; }

@media (min-width: 1024px){
  .drawer, .drawer-overlay{ display:none; }
}

/* ==========================================================================
   頁尾（footer）
   ========================================================================== */

.site-footer{
  background:var(--wetland-deep);
  color:var(--paper-warm);
  padding-block:clamp(2.5rem, 5vw, 4rem);
  margin-top:clamp(3rem, 8vw, 6rem);
}

.footer-inner{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.footer-brand{
  font-family:var(--serif);
  font-size:1.1rem;
  line-height:1.6;
}

.footer-contact{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2rem;
  font-size:14px;
  color:var(--paper-warm);
  opacity:.9;
}

.footer-contact a:hover{ color:var(--reed); }

@media (min-width: 768px){
  .footer-inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
  }
}

/* ==========================================================================
   主要內容容器
   ========================================================================== */

main{ display:block; }

.section{
  padding-block:clamp(3rem, 8vw, 6rem);
}

/* ==========================================================================
   捲動進場（scroll-reveal）
   ========================================================================== */

/* JS 加上 .reveal-pending 後才隱藏，JS 未執行（或停用）時內容維持可見 */
.reveal-pending{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

.reveal-pending.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   主視覺（hero）
   ========================================================================== */

.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  overflow:hidden;
  color:var(--paper);
}

.hero-strata{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(29,38,32,.45) 0%, rgba(29,38,32,.62) 55%, rgba(20,28,24,.8) 100%),
    url('/assets/img/hero-erren-estuary.jpg') center/cover no-repeat;
  background-color:var(--wetland-deep);
}

.hero-birds{
  position:absolute;
  top:12%;
  left:0;
  width:100%;
  height:auto;
  color:var(--ink);
  opacity:.55;
}

.bird{
  transform-origin:center;
  animation:bird-float 9s var(--ease) infinite;
}

.bird-2{ animation-delay:-3s; }
.bird-3{ animation-delay:-6s; }

@keyframes bird-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

@media (prefers-reduced-motion: reduce){
  .bird{ animation:none; }
}

.hero-inner{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:flex-start;
  padding-block:clamp(4rem, 10vw, 7rem);
}

.eyebrow-on-dark{ color:var(--paper); }
.eyebrow-on-dark::before{ background:var(--reed); }

.hero-title{ color:var(--paper); }

.hero-lede{
  color:var(--paper);
  max-width:42ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:.5rem;
}

.btn-on-dark{
  border-color:rgba(245,241,230,.5);
  color:var(--paper);
}

.btn-on-dark:hover{ border-color:var(--paper); color:var(--paper); }

.scroll-hint{
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--paper);
  opacity:.85;
}

.scroll-hint svg{ animation:hint-bounce 1.6s ease-in-out infinite; }

@keyframes hint-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

@media (prefers-reduced-motion: reduce){
  .scroll-hint svg{ animation:none; }
}

/* ==========================================================================
   數據帶（stats band）
   ========================================================================== */

.stats-band{
  background:var(--wetland-deep);
  color:var(--paper);
  padding-block:clamp(2.5rem, 6vw, 4rem);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem 1rem;
  text-align:center;
}

.stat-number{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  color:var(--paper);
}

.stat-label{
  font-size:14px;
  color:var(--paper-warm);
  opacity:.9;
}

@media (min-width: 768px){
  .stats-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* ==========================================================================
   精選時間軸（首頁）
   ========================================================================== */

.featured-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-block:2.5rem;
}

.featured-card{
  border-top:3px solid var(--water);
}

.featured-card.is-milestone{
  border-top-color:var(--reed);
}

.featured-card-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.2rem;
  color:var(--wetland-deep);
  margin-block:.4rem .6rem;
}

.featured-card-body{
  font-size:15px;
  color:var(--ink);
  opacity:.85;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:1rem;
}

.tag-verify{
  font-style:italic;
  color:var(--silt);
}

.data-error{
  text-align:center;
  padding:2rem 1rem;
}

.data-error p{ margin-bottom:1rem; }

@media (min-width: 768px){
  .featured-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 1024px){
  .featured-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* ==========================================================================
   議題入口
   ========================================================================== */

.issue-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
  margin-top:2rem;
}

.issue-card{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--paper-warm);
  border:1px solid var(--line);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.issue-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(28,38,32,.1);
}

.issue-block{
  display:block;
  height:80px;
}

.issue-title{
  font-weight:600;
  font-size:14px;
  padding:0 1rem 1rem;
}

@media (min-width: 768px){
  .issue-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (min-width: 1024px){
  .issue-grid{ grid-template-columns:repeat(4, 1fr); }
  .issue-title{ font-size:13px; }
}

/* ==========================================================================
   結尾 CTA
   ========================================================================== */

.closing-cta{
  background:var(--paper-warm);
  text-align:center;
}

.closing-cta-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

.closing-cta .hero-actions{ justify-content:center; }

/* ==========================================================================
   大事紀頁：年代快捷列（era quick-nav）
   ========================================================================== */

.era-nav{
  position:sticky;
  top:var(--header-h);
  z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.era-nav-inner{
  display:flex;
  gap:.75rem;
  overflow-x:auto;
  padding-block:.75rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.era-pill{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  padding:.5em 1.1em;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-warm);
  color:var(--silt);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.era-pill:hover{ color:var(--wetland); border-color:var(--wetland); }

.era-pill.is-active{
  background:var(--wetland-deep);
  border-color:var(--wetland-deep);
  color:var(--paper);
}

/* ==========================================================================
   大事紀頁：水位線時間軸（waterline timeline）
   ========================================================================== */

.timeline-loading{ text-align:center; padding:3rem 0; color:var(--silt); }

.era-group{ margin-bottom:clamp(2rem, 5vw, 3.5rem); }

.era-label{
  display:table;
  margin:0 auto clamp(2rem, 5vw, 3rem);
  padding:.5em 1.4em;
  border-radius:999px;
  background:var(--wetland-deep);
  color:var(--paper);
  font-size:1.1rem;
  text-align:center;
}

.waterline{ position:relative; }

.era-events{
  position:relative;
}

.era-events::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:20px;
  width:3px;
  background:linear-gradient(to bottom, var(--water), var(--wetland), var(--silt));
  border-radius:2px;
}

.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:40px 1fr;
  column-gap:1.25rem;
  padding-bottom:clamp(1.5rem, 4vw, 2.5rem);
}

.timeline-node{
  grid-column:1;
  justify-self:start;
  margin-left:12px;
  margin-top:.4rem;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--paper);
  border:3px solid var(--water);
  z-index:1;
}

.timeline-item.is-milestone .timeline-node{
  background:var(--reed);
  border-color:var(--reed);
}

.timeline-card-wrap{ grid-column:2; min-width:0; }

.timeline-card-img{
  border-radius:var(--radius);
  margin-bottom:1rem;
  aspect-ratio:16/9;
  object-fit:cover;
  width:100%;
}

.timeline-card-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.3rem;
  color:var(--wetland-deep);
  margin-block:.4rem .6rem;
}

.timeline-card-body{
  font-size:15px;
  color:var(--ink);
  opacity:.85;
}

@media (min-width: 768px){
  .era-events::before{ left:50%; transform:translateX(-50%); }

  .timeline-item{
    grid-template-columns:1fr 60px 1fr;
    column-gap:0;
  }

  .timeline-node{
    grid-column:2;
    justify-self:center;
    margin-left:0;
  }

  .timeline-item:nth-child(odd) .timeline-card-wrap{
    grid-column:1;
    grid-row:1;
    padding-right:2.5rem;
  }

  .timeline-item:nth-child(odd) .timeline-node{ grid-row:1; }

  .timeline-item:nth-child(even) .timeline-card-wrap{
    grid-column:3;
    grid-row:1;
    padding-left:2.5rem;
  }

  .timeline-item:nth-child(even) .timeline-node{ grid-row:1; }
}

/* ==========================================================================
   照片牆頁（gallery.html）：分頁籤、磚牆網格、佔位漸層
   ========================================================================== */

.gallery-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:2rem;
}

.gallery-tab{
  display:inline-flex;
  align-items:center;
  padding:.5em 1.2em;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-warm);
  color:var(--silt);
  font-size:14px;
  font-weight:600;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.gallery-tab:hover{ color:var(--wetland); border-color:var(--wetland); }

.gallery-tab[aria-pressed="true"]{
  background:var(--wetland-deep);
  border-color:var(--wetland-deep);
  color:var(--paper);
}

.gallery-grid{
  columns:2;
  column-gap:1rem;
}

.gallery-item{
  display:block;
  width:100%;
  break-inside:avoid;
  margin-bottom:1rem;
  text-align:left;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-warm);
  border:1px solid var(--line);
}

.gallery-item[hidden]{ display:none; }

.gallery-thumb{
  position:relative;
  width:100%;
  min-height:140px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.placeholder-tag{
  display:block;
  width:100%;
  padding:.6em .75em;
  font-size:11px;
  line-height:1.5;
  color:var(--paper);
  background:rgba(28,38,32,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

.gallery-caption{
  display:block;
  padding:.6rem .8rem .8rem;
  font-size:13px;
  color:var(--ink);
}

.gallery-year{ color:var(--silt); font-weight:600; margin-right:.5em; }

.ph-variant-0{ background:linear-gradient(135deg, var(--water), var(--wetland)); }
.ph-variant-1{ background:linear-gradient(135deg, var(--wetland), var(--wetland-deep)); }
.ph-variant-2{ background:linear-gradient(135deg, var(--silt), var(--water-deep)); }
.ph-variant-3{ background:linear-gradient(135deg, var(--water-deep), var(--wetland-deep)); }
.ph-variant-4{ background:linear-gradient(135deg, var(--wetland), var(--silt)); }

/* 高度錯落，營造磚牆式版面 */
.gallery-item:nth-child(6n+1) .gallery-thumb{ aspect-ratio:4/5; }
.gallery-item:nth-child(6n+2) .gallery-thumb{ aspect-ratio:1/1; }
.gallery-item:nth-child(6n+3) .gallery-thumb{ aspect-ratio:16/9; }
.gallery-item:nth-child(6n+4) .gallery-thumb{ aspect-ratio:3/4; }
.gallery-item:nth-child(6n+5) .gallery-thumb{ aspect-ratio:16/10; }
.gallery-item:nth-child(6n+6) .gallery-thumb{ aspect-ratio:1/1; }

@media (min-width: 768px){
  .gallery-grid{ columns:3; }
}

@media (min-width: 1024px){
  .gallery-grid{ columns:4; }
}

/* ==========================================================================
   影片點擊式載入元件（video-embed，見 5.4／main.js videoEmbeds）
   ========================================================================== */

.video-section{ margin-top:clamp(3rem, 6vw, 5rem); }

.video-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:1.5rem;
}

.video-embed{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--wetland-deep);
}

.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video-embed-trigger{
  display:block;
  width:100%;
  height:100%;
}

.video-embed-thumb{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  padding:1.25rem;
  color:var(--paper);
}

.video-embed-title{
  font-size:14px;
  font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  max-width:80%;
}

.video-embed-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(245,241,230,.92);
  color:var(--wetland-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  padding-left:4px;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.video-embed-trigger:hover .video-embed-play{
  transform:translate(-50%, -50%) scale(1.08);
  background:var(--paper);
}

@media (min-width: 768px){
  .video-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ==========================================================================
   議題頁（issues.html）：圖文交錯區塊
   ========================================================================== */

.issue-section{
  padding-block:clamp(2.5rem, 6vw, 4rem);
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 16px);
}

.issue-section:last-of-type{ border-bottom:none; }

.issue-section-inner{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.issue-media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  color:var(--paper);
  flex-shrink:0;
}

.issue-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.issue-media .placeholder-tag{
  position:relative;
  z-index:1;
}

.issue-body{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.issue-body p{ font-size:15px; opacity:.9; }

.issue-link{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-weight:600;
  color:var(--wetland);
  align-self:flex-start;
}

.issue-link:hover{ color:var(--wetland-deep); }

@media (min-width: 1024px){
  .issue-section-inner{
    flex-direction:row;
    align-items:center;
    gap:clamp(2rem, 5vw, 4rem);
  }

  .issue-media{ width:42%; aspect-ratio:1/1; }
  .issue-body{ flex:1; }

  .issue-section:nth-of-type(even) .issue-section-inner{ flex-direction:row-reverse; }
}

/* ==========================================================================
   首頁「我們是誰」區塊（原 about.html 內容，2026-07-13 併入首頁）
   ========================================================================== */

.about-intro-body{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:68ch;
  margin-top:1.5rem;
}

.about-intro-body p{ font-size:15px; opacity:.9; }

.core-work-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-block:2.5rem;
}

.core-work-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.15rem;
  color:var(--wetland-deep);
  margin-block:.5rem .6rem;
}

.core-work-card p:last-child{ font-size:14px; opacity:.85; }

.about-brand-video{ margin-top:2.5rem; max-width:720px; }

@media (min-width: 768px){
  .core-work-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* ==========================================================================
   燈箱（lightbox）
   ========================================================================== */

.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(28,38,32,.85);
  z-index:200;
}

.lightbox-overlay[hidden]{ display:none; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:210;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
}

.lightbox[hidden]{ display:none; }

.lightbox-stage{
  position:relative;
  width:min(100%, 900px);
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--paper);
  text-align:center;
  padding:2rem;
}

.lightbox-stage img{ width:100%; height:100%; object-fit:contain; }

.lightbox-stage-label{
  font-size:14px;
  line-height:1.8;
  opacity:.9;
}

.lightbox-meta{
  width:min(100%, 900px);
  color:var(--paper);
  margin-top:1rem;
  text-align:center;
}

.lightbox-caption{ font-size:15px; margin-bottom:.3rem; }

.lightbox-sub{
  display:flex;
  justify-content:center;
  gap:1rem;
  font-size:13px;
  opacity:.75;
}

.lightbox-close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:44px;
  height:44px;
  font-size:1.8rem;
  color:var(--paper);
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  font-size:2rem;
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-prev{ left:clamp(.5rem, 3vw, 2rem); }
.lightbox-next{ right:clamp(.5rem, 3vw, 2rem); }

.lightbox-nav:hover, .lightbox-close:hover{ color:var(--water); }

body.lightbox-open{ overflow:hidden; }

/* ==========================================================================
   濕人絮語頁（guestbook.html）：筆記本留言牆（唯讀展示）
   ========================================================================== */

.guestbook-section{ padding-top:0; text-align:center; }

.guestbook-icon{
  width:96px;
  height:auto;
  margin:0 auto clamp(1.5rem, 4vw, 2.5rem);
  color:var(--wetland-deep);
}

/* 筆記本留言牆：格線紙背景＋左側裝訂線孔＋紅色邊界線 */
.notebook{
  position:relative;
  max-width:760px;
  margin-inline:auto;
  background:var(--paper-warm);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 32px rgba(28,38,32,.12);
  padding:1.5rem;
  text-align:left;
}

.notebook-pages{
  position:relative;
  min-height:200px;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 38px, var(--line) 38px 39px),
    linear-gradient(to right, transparent 0 3.2rem, rgba(164,69,58,.3) 3.2rem calc(3.2rem + 1px), transparent calc(3.2rem + 1px));
  background-color:var(--paper);
  border-radius:var(--radius);
  padding:1.75rem 1.75rem 1.75rem 4rem;
}

.notebook::before{
  content:"";
  position:absolute;
  top:1.25rem;
  left:-8px;
  bottom:1.25rem;
  width:16px;
  background-image:radial-gradient(circle, var(--paper) 3.5px, transparent 3.6px);
  background-size:16px 26px;
  background-repeat:repeat-y;
}

.guestbook-entry{
  margin-bottom:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px dashed var(--line);
}

.guestbook-entry:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}

.guestbook-entry:nth-child(odd){ transform:rotate(-.4deg); }
.guestbook-entry:nth-child(even){ transform:rotate(.35deg); }

.guestbook-entry-message{
  font-family:var(--handwriting);
  font-size:1.3rem;
  line-height:1.9;
  color:var(--ink);
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

.guestbook-entry-meta{
  margin-top:.4rem;
  font-family:var(--sans);
  font-size:12px;
  color:var(--silt);
}

.guestbook-empty{
  text-align:center;
  padding:2rem 0;
  color:var(--silt);
}

@media (min-width: 768px){
  .notebook-pages{ padding:2.25rem 2.25rem 2.25rem 4.5rem; }
  .guestbook-entry-message{ font-size:1.4rem; }
}