/* ==========================================================================
   2026 校史特展《@成功湖畔—清華人的湖濱散記》
   ========================================================================== */

/* ---------- Local fonts (self-hosted, replacing Google Fonts CDN) ---------- */
@font-face{
  font-family:"Noto Serif TC";
  src:url("/fonts/NotoSerifTC/NotoSerifTC-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Serif TC";
  src:url("/fonts/NotoSerifTC/NotoSerifTC-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Serif TC";
  src:url("/fonts/NotoSerifTC/NotoSerifTC-Bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Serif TC";
  src:url("/fonts/NotoSerifTC-Black.otf") format("opentype");
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans TC";
  src:url("/fonts/NotoSansTC/NotoSansTC-Light.ttf") format("truetype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans TC";
  src:url("/fonts/NotoSansTC/NotoSansTC-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans TC";
  src:url("/fonts/NotoSansTC/NotoSansTC-Medium.ttf") format("truetype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans TC";
  src:url("/fonts/NotoSansTC/NotoSansTC-Bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --color-primary:#1d6c7d;
  --color-primary-dark:#123f4a;
  --color-primary-light:#4a94a3;
  --color-accent:#d4574a;
  --color-accent-dark:#a83f34;
  --color-sand:#f5f1e6;
  --color-sand-deep:#ece4d0;
  --color-ink:#233436;
  --color-ink-soft:#4c5f61;
  --color-mist:#eef3f2;
  --color-white:#ffffff;
  --font-serif:"Noto Serif TC","LiHei Pro","PMingLiU",serif;
  --font-sans:"Noto Sans TC","Microsoft JhengHei",sans-serif;
  --header-h:76px;
}

*{box-sizing:border-box;}

/* ---------- Page loader (boat + squiggle water) ---------- */
.page-loader{
  position:fixed;inset:0;z-index:3000;
  background:var(--color-sand);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-primary);
  transition:opacity .5s ease,visibility 0s linear 0s;
}
.page-loader.is-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,visibility 0s linear .5s;
}
.loader-boat-rock{animation:loaderRock 6s ease-in-out infinite;transform-origin:0 8px;}
.loader-boat-bob{animation:loaderBob 2s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes loaderRock{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
@keyframes loaderBob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
.loader-wave{opacity:.75;animation:loaderWave 1.6s linear infinite;}
.loader-wave-b{animation-name:loaderWaveReverse;}
@keyframes loaderWave{from{stroke-dashoffset:0;}to{stroke-dashoffset:-50;}}
@keyframes loaderWaveReverse{from{stroke-dashoffset:0;}to{stroke-dashoffset:50;}}
@media(prefers-reduced-motion:reduce){
  .loader-boat-rock,.loader-boat-bob,.loader-wave{animation:none;}
}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-sans);
  color:var(--color-ink);
  background:var(--color-sand);
  line-height:1.9;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-serif{
  font-family:var(--font-serif);
  font-weight:700;
  letter-spacing:.04em;
}

a{color:var(--color-primary);text-decoration:none;}
a:hover{color:var(--color-accent);}

::selection{background:var(--color-accent);color:#fff;}

/* ---------- Utility ---------- */

.bg-sand{background:var(--color-sand);}
.hero-bg-match{background:var(--color-mist);}
.section-pad{padding:5rem 0;}
@media(max-width:767.98px){.section-pad{padding:3rem 0;}}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-serif);
  font-size:.95rem;letter-spacing:.35em;
  color:var(--color-accent);text-transform:uppercase;
  margin-bottom:.75rem;
}
.kicker::before{content:"";width:28px;height:2px;background:var(--color-accent);display:inline-block;}

.section-title{
  font-size:clamp(1.7rem,3vw,2.6rem);
  color:var(--color-primary-dark);
  margin-bottom:1.25rem;
}

/* ---------- Navbar ---------- */
.site-navbar{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  height:var(--header-h);
  background:rgba(245,241,230,.0);
  transition:background .35s ease,box-shadow .35s ease,height .35s ease;
}
/* Guarantees legible white nav text over any hero image/light background before scroll */
.site-navbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,26,31,.55),rgba(8,26,31,0));
  opacity:1;transition:opacity .35s ease;
}
.site-navbar.is-scrolled::before,.site-navbar.page-solid::before{opacity:0;}
.site-navbar.is-scrolled{
  background:rgba(245,241,230,.96);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(18,63,74,.12);
  height:64px;
}
.site-navbar .navbar-brand{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:1.05rem;
  color:var(--color-white);
  line-height:1.3;
  transition:color .3s ease;
}
.site-navbar.is-scrolled .navbar-brand,
.site-navbar.page-solid .navbar-brand{color:var(--color-primary-dark);}
.site-navbar .navbar-brand small{display:block;font-family:var(--font-sans);font-weight:400;font-size:.7rem;letter-spacing:.15em;opacity:.85;}

.navbar-toggler{border:none;padding:.25rem;position:relative;z-index:1;}
.navbar-toggler:focus{box-shadow:none;}
.navbar-toggler-icon-custom{
  width:26px;height:20px;position:relative;display:inline-block;
}
.navbar-toggler-icon-custom span{
  display:block;position:absolute;height:2px;width:100%;left:0;
  background:currentColor;border-radius:2px;transition:.3s ease;
}
.navbar-toggler-icon-custom span:nth-child(1){top:0;}
.navbar-toggler-icon-custom span:nth-child(2){top:9px;}
.navbar-toggler-icon-custom span:nth-child(3){top:18px;}
.site-navbar .navbar-toggler{color:#fff;}
.site-navbar.is-scrolled .navbar-toggler,
.site-navbar.page-solid .navbar-toggler{color:var(--color-primary-dark);}
/* Toggler morphs into a close (X) icon while the full-screen menu is open;
   the navbar itself sits above .site-menu so it stays usable as the close control. */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(2){opacity:0;}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.site-navbar.menu-is-open{background:transparent;box-shadow:none;}
.site-navbar.menu-is-open::before{opacity:0;}
.site-navbar.menu-is-open .navbar-toggler{color:var(--color-primary-dark);}

/* ---------- Full-screen two-column menu ---------- */
body.menu-open{overflow:hidden;}
.site-menu{
  position:fixed;inset:0;z-index:1100;
  background:var(--color-sand);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility 0s linear .4s;
  overflow-y:auto;
}
.site-menu.is-open{
  opacity:1;visibility:visible;
  transition:opacity .4s ease,visibility 0s linear 0s;
}
.site-menu-inner{
  min-height:100%;
  display:flex;flex-direction:column;
  padding-top:var(--header-h);
}
.site-menu-visual{
  position:relative;
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:center;
  min-height:160px;
  overflow:hidden;
}
.site-menu-boat{
  position:relative;z-index:1;
  max-width:min(420px,86%);height:auto;opacity:.95;
  animation:boatFloat 4.6s ease-in-out infinite;
}
@keyframes boatFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.site-menu-visual,
.site-menu-links{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;
}
.site-menu.is-open .site-menu-visual{transition-delay:.05s;}
.site-menu.is-open .site-menu-links{transition-delay:.1s;}
.site-menu.is-open .site-menu-visual,
.site-menu.is-open .site-menu-links{opacity:1;transform:translateY(0);}

.menu-kicker{opacity:0;margin-bottom:1rem;}
.site-menu.is-open .menu-kicker{opacity:1;transition:opacity .5s ease .18s;}

.site-menu-links{padding:0 1.5rem 3rem;flex:1;}
.menu-list{list-style:none;margin:0;padding:0;}
.menu-list li{
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;
}
.site-menu.is-open .menu-list li{opacity:1;transform:translateY(0);}
.menu-list li:nth-child(1){transition-delay:.22s;}
.menu-list li:nth-child(2){transition-delay:.27s;}
.menu-list li:nth-child(3){transition-delay:.32s;}
.menu-list li:nth-child(4){transition-delay:.37s;}
.menu-list li:nth-child(5){transition-delay:.42s;}
.menu-list li:nth-child(6){transition-delay:.47s;}
.menu-list-sub li:nth-child(1){transition-delay:.52s;}
.menu-list-sub li:nth-child(2){transition-delay:.56s;}
.menu-list-sub li:nth-child(3){transition-delay:.6s;}

.menu-link{
  position:relative;
  display:flex;align-items:baseline;gap:.9rem;
  padding:.85rem .2rem;
  font-family:var(--font-serif);font-weight:700;
  font-size:1.15rem;color:var(--color-ink);
  transition:color .25s ease,padding-left .25s ease;
}
.menu-link::after{
  content:"";position:absolute;left:.2rem;right:.2rem;bottom:.4rem;height:2px;
  background:var(--color-accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.menu-link:hover,.menu-link.active{color:var(--color-accent) !important;padding-left:.5rem;}
.menu-link:hover::after,.menu-link.active::after{transform:scaleX(1);}
.menu-link-num{
  font-size:1.3rem;color:var(--color-accent);min-width:1.7rem;
  display:inline-block;transition:transform .3s ease;
}
.menu-link:hover .menu-link-num,.menu-link.active .menu-link-num{transform:scale(1.15);}
.menu-list-sub{margin-top:1.2rem;}
.menu-list-sub .menu-link{font-size:.95rem;font-family:var(--font-sans);font-weight:500;color:var(--color-ink-soft);}
.menu-link-en{
  display:inline-flex !important;border:1px solid var(--color-primary);color:var(--color-primary) !important;
  border-radius:20px;padding:.35rem .9rem !important;font-size:.8rem;margin-top:.4rem;
}
.menu-link-en::after{display:none;}

@media(min-width:768px){
  .site-menu-inner{flex-direction:row;padding-top:0;}
  .site-menu-visual{
    flex:0 0 42%;
    padding:0;min-height:100vh;
  }
  .site-menu-boat{max-width:82%;}
  .site-menu-links{
    flex:1;
    display:flex;flex-direction:column;justify-content:center;
    padding:2rem 4vw;max-width:640px;
  }
  .menu-link{font-size:1.55rem;padding:1rem .2rem;}
  .menu-link-num{font-size:1.9rem;min-width:2.5rem;}
}
@media(prefers-reduced-motion:reduce){
  .site-menu-boat{animation:none;}
  .site-menu-visual,.site-menu-links,.menu-list li,.menu-kicker{transition:opacity .3s ease;transform:none;}
}

/* ---------- Landing Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  background:var(--color-mist);
  overflow:hidden;
}
.hero-map-layer{
  position:absolute;inset:0;
  background-image:url("../images/board/hero-main.jpg");
  background-size:cover;background-position:center;
  opacity:.26;
  mix-blend-mode:multiply;
}

.hero-content{position:relative;z-index:2;text-align:center;width:100%;padding-top:var(--header-h);}
.hero-content > *{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
body.loaded .hero-content > *{opacity:1;transform:translateY(0);}
body.loaded .hero-content > *:nth-child(1){transition-delay:.05s;}
body.loaded .hero-content > *:nth-child(2){transition-delay:.15s;}
body.loaded .hero-content > *:nth-child(3){transition-delay:.25s;}
body.loaded .hero-content > *:nth-child(4){transition-delay:.35s;}
body.loaded .hero-content > *:nth-child(5){transition-delay:.45s;}
@media(prefers-reduced-motion:reduce){
  .hero-content > *{opacity:1;transform:none;transition:none;}
}
.hero-eyebrow{
  font-family:var(--font-serif);
  color:var(--color-primary);
  font-size:clamp(1.6rem,3.4vw,2.3rem);
  letter-spacing:.1em;
  margin-bottom:.5rem;
}
.hero-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  color:var(--color-primary-dark);
  line-height:1.25;
  margin-bottom:1rem;
}
.hero-en{
  font-size:clamp(.95rem,1.6vw,1.2rem);
  color:var(--color-ink-soft);
  letter-spacing:.06em;
  margin-bottom:2rem;
}
.hero-meta{
  display:flex;flex-direction:column;gap:.4rem;align-items:center;
  font-size:.95rem;color:var(--color-ink-soft);margin-bottom:2.2rem;
}
.hero-scroll{
  position:absolute;bottom:calc(100vw / 30 + 4px);left:50%;transform:translateX(-50%);
  color:var(--color-primary);font-size:.8rem;letter-spacing:.2em;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  animation:bob 2.2s ease-in-out infinite;
  z-index:3;
}
.hero-scroll .line{width:1px;height:34px;background:var(--color-primary);}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

.hero-wave-svg{position:absolute;left:0;right:0;bottom:-2px;width:100%;z-index:1;line-height:0;pointer-events:none;}
.hero-wave-svg svg{width:100%;height:auto;display:block;}

/* ---------- Curator / Info section ---------- */
.curator-card{
  background:var(--color-white);
  border-radius:18px;
  padding:2.6rem;
  box-shadow:0 18px 40px rgba(18,63,74,.08);
  border:1px solid rgba(29,108,125,.08);
}
.curator-card p{margin-bottom:1.1rem;color:var(--color-ink-soft);}
.info-pill-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem;}
.info-pill{
  flex:1 1 220px;
  background:var(--color-mist);
  border-radius:12px;padding:1rem 1.25rem;
}
.info-pill h3{font-size:.8rem;letter-spacing:.15em;color:var(--color-primary);margin-bottom:.35rem;font-family:var(--font-sans);font-weight:700;}
.info-pill p{margin:0;font-size:.92rem;color:var(--color-ink);}

/* ---------- Intro (開始之前) full-bleed section on homepage ---------- */

.intro-quote{
  font-family:var(--font-serif);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  border-left:3px solid var(--color-accent);
  padding-left:1.3rem;margin-bottom:1.75rem;
  color:rgba(255,255,255,.92);
  font-style:italic;
}
.intro-quote cite{display:block;font-style:normal;font-size:.8rem;letter-spacing:.05em;opacity:.75;margin-top:.5rem;}
.curator-card .intro-quote{color:var(--color-ink);}

/* ---------- Section nav cards (homepage) ---------- */
.unit-card{
  position:relative;display:block;border-radius:16px;
  height:100%;color:var(--color-ink);isolation:isolate;
  background:var(--color-mist);
  box-shadow:0 10px 24px rgba(18,63,74,.10);
  padding:2rem 1.8rem 1.8rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
.unit-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,63,74,.16);}
.unit-card .unit-num{
  font-family:var(--font-serif);font-size:2.2rem;font-weight:700;line-height:1;
  color:var(--color-accent);margin-bottom:.6rem;
}
.unit-card .unit-name{
  font-family:var(--font-serif);font-size:1.25rem;font-weight:700;margin:0 0 .6rem;
  color:var(--color-ink);
}
.unit-card .unit-desc{font-size:.9rem;color:var(--color-ink-soft);line-height:1.7;margin-bottom:1.3rem;}
.unit-card .unit-read{
  font-size:.88rem;font-weight:700;color:var(--color-primary);
  display:inline-flex;align-items:center;gap:.35rem;
  transition:color .2s ease,gap .2s ease;
}
.unit-card:hover .unit-read{color:var(--color-accent);gap:.55rem;}

/* ---------- Photo wall (homepage site photos) ---------- */

/* ==========================================================================
   Unit / section pages (01-05) — full-bleed board background
   ========================================================================== */
.unit-hero{
  position:relative;
  background-size:cover;background-position:center;
  isolation:isolate;
  color:#fff;
  padding-top:calc(var(--header-h) + 3.5rem);padding-bottom:3.5rem;
}
.unit-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,42,49,.15) 0%,rgba(13,34,40,.3) 55%,rgba(11,28,33,.58) 100%);
  backdrop-filter:blur(.5px);
}
.unit-hero-inner{position:relative;z-index:1;color:#fff;width:100%;}

.unit-hero-title{font-family:var(--font-serif);font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.2;margin-bottom:.5rem;}

@media(max-width:575.98px){
  .unit-hero-inner{padding-left:1.5rem;padding-right:1.5rem;}
}

.unit-body{background:var(--color-sand);padding:4.5rem 0;}
.unit-body .content-block{max-width:820px;margin:0 auto;}
.unit-body h2{
  color:var(--color-primary-dark);font-size:1.35rem;margin:2.4rem 0 1rem;
  padding-bottom:.6rem;border-bottom:2px solid rgba(29,108,125,.18);
}
.unit-body h2:first-child{margin-top:0;}
.unit-body p{color:var(--color-ink-soft);margin-bottom:1.2rem;font-size:1.02rem;}
.unit-body blockquote{
  font-family:var(--font-serif);font-style:italic;color:var(--color-primary-dark);
  border-left:3px solid var(--color-accent);padding:.3rem 0 .3rem 1.3rem;margin:2rem 0;
}
.unit-body blockquote small{
  display:block;font-style:normal;font-size:.78rem;color:var(--color-ink-soft);
  margin-top:.5rem;letter-spacing:.03em;
}

.unit-pager{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--color-mist);border-radius:16px;padding:1.6rem 1.8rem;margin-top:3rem;
  gap:1rem;flex-wrap:wrap;
}
.unit-pager a{display:flex;flex-direction:column;font-size:.85rem;color:var(--color-ink-soft);}
.unit-pager a strong{color:var(--color-primary-dark);font-family:var(--font-serif);font-size:1.05rem;}
.unit-pager a.next{text-align:right;align-items:flex-end;}

/* ---------- Inline figure group (圖文並置，多圖共用一則圖說) ---------- */
.inline-figs{margin:.4rem 0 1.9rem;}
.inline-figs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;}
.inline-figs-row a{
  flex:1 1 150px;max-width:210px;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 18px rgba(18,63,74,.1);display:block;cursor:zoom-in;
}
.inline-figs-row img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;}
.inline-figs-row a:hover img{transform:scale(1.06);}
.inline-figs figcaption{
  margin:.75rem auto 0;max-width:600px;font-size:.85rem;color:var(--color-ink-soft);
  line-height:1.75;text-align:center;
}

/* ---------- Inline figure grid，每張圖各自有圖說 ---------- */
.figs-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:.4rem 0 1.9rem;}
.figs-item{
  flex:1 1 220px;max-width:320px;background:var(--color-white);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 18px rgba(18,63,74,.08);margin:0;
}
.figs-item a{display:block;cursor:zoom-in;}
.figs-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;}
.figs-item a:hover img{transform:scale(1.06);}
.figs-item figcaption{padding:.85rem 1rem;font-size:.83rem;color:var(--color-ink-soft);line-height:1.65;}

/* 單張圖獨立呈現，不受 flex 上限侷限，置中且比並排時更大一點 */
.figs-item-single{max-width:420px;margin:0 auto 1.9rem;}

/* ---------- Trivia button + modal (展板QR小知識) ---------- */
.trivia-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--color-mist);border:1px solid rgba(29,108,125,.18);
  color:var(--color-primary-dark);font-family:var(--font-sans);font-size:.85rem;font-weight:700;
  border-radius:30px;padding:.4rem .95rem .4rem .7rem;margin:0 0 1.4rem;
  cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.trivia-btn-icon{font-size:.95rem;line-height:1;}
.trivia-btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff;transform:translateY(-1px);}
/* keep modals above the fixed navbar (z-index 1200) */
.modal-backdrop{z-index:1290;}
.modal{z-index:1300;}
.trivia-modal .modal-content{border:none;border-radius:16px;overflow:hidden;}
.trivia-modal .modal-header{
  background:var(--color-mist);border-bottom:none;align-items:center;padding:1.1rem 1.4rem .6rem;
}
.trivia-tag{
  display:inline-block;font-size:.75rem;letter-spacing:.1em;color:var(--color-accent);
  font-weight:700;font-family:var(--font-sans);
}
.trivia-modal .modal-body{padding:.4rem 1.4rem 1.6rem;}
.trivia-modal .trivia-modal-title{
  font-family:var(--font-serif);color:var(--color-primary-dark);
  font-size:1.25rem;font-weight:700;
  margin:0 0 .7rem;padding-bottom:0;border-bottom:none;
}
.trivia-modal .trivia-modal-text{font-size:.96rem;color:var(--color-ink-soft);margin:0 0 1rem;line-height:1.85;}
.trivia-modal .trivia-modal-text:last-child{margin-bottom:0;}
.trivia-modal .trivia-modal-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-top:1.1rem;cursor:zoom-in;}
.trivia-modal .trivia-modal-caption{margin:.4rem 0 0;font-size:.78rem;color:var(--color-ink-soft);line-height:1.6;text-align:center;}
.trivia-modal h3.trivia-modal-subtitle{
  font-family:var(--font-sans);font-size:.9rem;font-weight:700;
  letter-spacing:.08em;color:var(--color-primary-dark);
  margin:1.3rem 0 .55rem;
}
.trivia-modal .trivia-modal-links{list-style:none;margin:0;padding:0;}
.trivia-modal .trivia-modal-links li{position:relative;padding-left:1.15rem;margin:0 0 .5rem;font-size:.86rem;line-height:1.6;}
.trivia-modal .trivia-modal-links li:last-child{margin-bottom:0;}
.trivia-modal .trivia-modal-links li::before{content:"↗";position:absolute;left:0;top:0;color:var(--color-accent);font-size:.78rem;}
.trivia-modal .trivia-modal-links a{color:var(--color-primary);text-decoration:none;border-bottom:1px dashed rgba(29,108,125,.4);}
.trivia-modal .trivia-modal-links a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent);}

/* ---------- Highlight box (互動區/文物精選) ---------- */

/* ==========================================================================
   Videos page
   ========================================================================== */
.video-hero{
  position:relative;background-size:cover;background-position:center;isolation:isolate;
  color:#fff;padding-top:calc(var(--header-h) + 3.5rem);padding-bottom:3.5rem;
}
.video-hero::before,.gallery-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(18,63,74,.93),rgba(29,108,125,.82));
  z-index:-1;
}
.video-card{
  background:var(--color-white);border-radius:16px;overflow:hidden;
  box-shadow:0 14px 30px rgba(18,63,74,.1);margin-bottom:2.5rem;
}
.video-card .ratio{background:#000;}
.video-card-body{padding:1.6rem 1.8rem;}
.video-card-body h2{font-family:var(--font-serif);color:var(--color-primary-dark);margin-bottom:.6rem;}
.video-card-body p{color:var(--color-ink-soft);font-size:.95rem;margin-bottom:0;}

/* ==========================================================================
   Gallery / 徵集感謝 page
   ========================================================================== */
.gallery-hero{
  position:relative;background-size:cover;background-position:center;isolation:isolate;
  color:#fff;padding-top:calc(var(--header-h) + 3.5rem);padding-bottom:3rem;
}
.gallery-grid{
  columns:4 220px;column-gap:.9rem;
}
.gallery-grid .g-item{break-inside:avoid;margin-bottom:.9rem;position:relative;display:block;border-radius:10px;overflow:hidden;}
.gallery-grid .g-item img{width:100%;display:block;transition:transform .5s ease;}
.gallery-grid .g-item:hover img{transform:scale(1.06);}
.gallery-grid .g-caption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem .6rem;
  background:linear-gradient(180deg,transparent,rgba(11,28,33,.88));
  color:#fff;font-size:.76rem;opacity:0;transition:opacity .3s ease;
}
.gallery-grid .g-item:hover .g-caption{opacity:1;}
@media(max-width:575.98px){.gallery-grid{columns:2 160px;}}

/* ---------- 延伸閱讀 banner (standalone reading block) ---------- */
.reading-banner{
  display:flex;align-items:center;gap:1.6rem;
  background:linear-gradient(120deg,var(--color-mist),var(--color-white));
  border:1px solid rgba(29,108,125,.15);
  border-radius:18px;padding:1.8rem 2.2rem;
  margin-top:3rem;
  box-shadow:0 12px 26px rgba(18,63,74,.08);
}
.reading-banner-icon{
  flex:0 0 auto;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(150deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.reading-banner-body{flex:1 1 auto;}

.reading-banner-body h2{font-family:var(--font-serif);color:var(--color-primary-dark);font-size:1.15rem;margin-bottom:.35rem;}
.reading-banner-body p{color:var(--color-ink-soft);font-size:.92rem;margin:0;}
.reading-banner .btn-read{
  flex:0 0 auto;white-space:nowrap;
  background:var(--color-primary);color:#fff;
  padding:.65rem 1.4rem;border-radius:24px;font-size:.9rem;
  transition:background .25s ease;
}
.reading-banner .btn-read:hover{background:var(--color-accent);color:#fff;}
@media(max-width:575.98px){
  .reading-banner{flex-direction:column;text-align:center;padding:1.8rem 1.4rem;}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-primary-dark);color:rgba(255,255,255,.75);
  padding:3rem 0 2rem;font-size:.9rem;
}
.site-footer h5{font-family:var(--font-serif);color:#fff;margin-bottom:1rem;}
.site-footer a{color:rgba(255,255,255,.75);}
.site-footer a:hover{color:var(--color-accent);}
.site-footer hr{border-color:rgba(255,255,255,.15);margin:1.75rem 0 1.25rem;}

/* Owl Carousel arrow/dot theme tweak */
.owl-theme .owl-dots{margin-top:1.1rem;text-align:center;line-height:1;}
.owl-theme .owl-dots .owl-dot span{background:rgba(29,108,125,.3);margin:5px;}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:var(--color-accent);}

.owl-site-photos{position:relative;}
.owl-site-photos .item a{display:block;cursor:zoom-in;}
.owl-site-photos .owl-nav{
  position:absolute;top:50%;left:0;right:0;
  transform:translateY(-50%);
  display:flex;justify-content:space-between;
  margin:0;padding:0 -8px;pointer-events:none;
}
.owl-theme .owl-nav [class*=owl-]{
  background:rgba(255,255,255,.9) !important;color:var(--color-primary-dark) !important;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin:0 -4px;box-shadow:0 6px 16px rgba(18,63,74,.18);
  pointer-events:auto;transition:background .2s ease,color .2s ease;
}
.owl-theme .owl-nav [class*=owl-]:hover{background:var(--color-primary) !important;color:#fff !important;}
@media(max-width:575.98px){
  .owl-theme .owl-nav [class*=owl-]{width:34px;height:34px;font-size:1.1rem;}
}

/* ---------- 圖文穿插：單張輪播卡（箭頭疊於照片左右，樣式與首頁實體展場輪播一致；圖說疊於照片下緣） ---------- */
.figs-carousel{position:relative;margin:.4rem 0 1.9rem;}
.figs-carousel .item{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(18,63,74,.14);}
.figs-carousel .item a{display:block;cursor:zoom-in;}
.figs-carousel .item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.figs-carousel .item .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem 1.1rem .9rem;
  background:linear-gradient(to top, rgba(18,63,74,.8), rgba(18,63,74,0));
  color:#fff;font-size:.85rem;line-height:1.6;text-align:center;
  pointer-events:none;
}
.figs-carousel .owl-nav{
  position:absolute;top:50%;left:0;right:0;
  transform:translateY(-50%);
  display:flex;justify-content:space-between;
  margin:0;padding:0;pointer-events:none;
}
/* Hide the carousel until JS has resized it inside the modal (see
   show.bs.modal handler in main.js), to avoid a flash of unstyled/
   full-stacked slides before Owl Carousel applies its real sizing. */
.map-modal .figs-carousel .owl-carousel{visibility:hidden;}
.map-modal .figs-carousel .owl-carousel.map-carousel-ready{visibility:visible;}

/* ---------- Before/After compare slider (湖景對比抽拉牌) ---------- */
.compare-wrap{margin:2rem 0 1rem;}
.compare-slider{
  position:relative;width:100%;aspect-ratio:16/10;
  border-radius:18px;overflow:hidden;
  box-shadow:0 16px 34px rgba(18,63,74,.18);
  background:#000;touch-action:pan-y;
}
.compare-slider .compare-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;user-select:none;pointer-events:none;
}
.compare-clip{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 50% 0 0);z-index:2;}
.compare-caption{
  position:absolute;bottom:14px;z-index:1;
  background:rgba(18,63,74,.8);color:#fff;
  padding:.35rem 1rem;border-radius:20px;
  font-family:var(--font-serif);font-size:.85rem;letter-spacing:.05em;
  pointer-events:none;
}
.compare-caption-before{left:14px;z-index:1;}
.compare-caption-after{right:14px;}
.compare-handle{
  position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);pointer-events:none;z-index:3;
}
.compare-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;
  background:#fff;transform:translateX(-50%);box-shadow:0 0 8px rgba(0,0,0,.4);
}
.compare-handle-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--color-accent);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:.62rem;letter-spacing:.1em;line-height:1.1;
  box-shadow:0 8px 18px rgba(0,0,0,.35);text-align:center;
}
.compare-handle-btn span{display:block;}
.compare-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;z-index:4;
}
.compare-range::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%;height:100%;background:transparent;}
.compare-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:44px;height:44px;border-radius:50%;
  background:transparent;cursor:ew-resize;
}
.compare-range::-moz-range-track{width:100%;height:100%;background:transparent;border:none;}
.compare-range::-moz-range-thumb{
  width:44px;height:44px;border-radius:50%;
  background:transparent;border:none;cursor:ew-resize;
}
.compare-note{
  margin-top:1rem;font-size:.92rem;color:var(--color-ink-soft);
  background:var(--color-mist);border-radius:12px;padding:1rem 1.3rem;
}

/* ---------- 湖畔建設今昔對照地圖（互動熱點） ---------- */
.lake-map-wrap{position:relative;margin:1.5rem 0;border-radius:16px;overflow:hidden;box-shadow:0 14px 30px rgba(18,63,74,.14);}
.lake-map-img{width:100%;display:block;}
.lake-map-pin{
  position:absolute;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.3);color:#fff;border:2.5px solid var(--color-accent);
  font-family:var(--font-serif);font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer;padding:0;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.lake-map-pin span{text-shadow:0 1px 3px rgba(0,0,0,.7);}
@media(max-width:575.98px){
  .lake-map-pin{width:22px;height:22px;font-size:.72rem;border-width:2px;}
}
.lake-map-pin-label{
  position:absolute;left:50%;bottom:100%;
  transform:translateX(-50%) translateY(6px);
  white-space:nowrap;
  background:var(--color-primary-dark);color:#fff;
  font-size:.78rem;padding:.3rem .7rem;border-radius:20px;
  margin-bottom:9px;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.lake-map-pin-label::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--color-primary-dark);
}
@media(hover:hover) and (pointer:fine){
  .lake-map-pin:hover,.lake-map-pin:focus{background:rgba(212,87,74,.4);border-color:var(--color-primary-dark);transform:translate(-50%,-50%) scale(1.12);}
  .lake-map-pin:hover .lake-map-pin-label,.lake-map-pin:focus .lake-map-pin-label{opacity:1;transform:translateX(-50%) translateY(0);}
}
.map-modal .modal-dialog{max-width:640px;}

/* ---------- Historic image galleries (歷史圖像選輯) ---------- */

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* Back to top */
.back-to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:1040;
  width:44px;height:44px;border-radius:50%;
  background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(18,63,74,.3);
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{color:#fff;transform:translateY(-3px);}