/* =========================================================
   吴亚兴码头 — 老笨珍的海边记忆
   Design tokens
   ========================================================= */
:root{
  --ocean-deep:   #1e3a4c;
  --ocean:        #2c5468;
  --ocean-light:  #5b8a9c;
  --wood:         #6b4a32;
  --wood-dark:    #40291a;
  --sand:         #e9dfc6;
  --sand-light:   #f3ecd9;
  --brown-deep:   #2a1d14;
  --mist:         #d7d2c6;
  --gold:         #b08d57;
  --ink:          #26221c;

  --font-cn-display: "Noto Serif SC", serif;
  --font-en-display: "Playfair Display", serif;
  --font-en-alt:      "Cormorant Garamond", serif;

  --radius: 12px;
  --shadow-soft: 0 10px 30px rgba(20,15,8,0.25);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--sand-light);
  color:var(--ink);
  font-family:var(--font-cn-display);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-cn-display);
  font-weight:900;
  color:var(--brown-deep);
  margin:0 0 .5em;
  letter-spacing:.02em;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--brown-deep); color:var(--sand-light);
  padding:.8em 1.2em; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

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

/* =========================================================
   Sound toggle
   ========================================================= */
.sound-toggle{
  position:fixed; left:20px; bottom:20px; z-index:60;
  background:rgba(42,29,20,.85); color:var(--sand-light);
  border:1px solid rgba(233,223,198,.3);
  border-radius:999px; padding:.6em 1.1em;
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-en-alt); font-size:.95rem; cursor:pointer;
  backdrop-filter:blur(6px);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.sound-toggle:hover{ transform:translateY(-2px); background:rgba(42,29,20,.95); }
.sound-toggle.on .sound-icon::before{ content:"🔊"; }

/* =========================================================
   Tide timeline (right side)
   ========================================================= */
.tide-nav{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; align-items:center; gap:14px;
}
.tide-track{
  position:relative; width:2px; height:340px;
  background:rgba(42,29,20,.18); border-radius:2px;
}
.tide-fill{
  position:absolute; bottom:0; left:0; width:100%; height:0%;
  background:linear-gradient(to top, var(--ocean), var(--ocean-light));
  border-radius:2px; transition:height .4s var(--ease);
}
.tide-nav ol{ list-style:none; margin:0; padding:0; display:none; }

@media (min-width:960px){
  .tide-nav ol{
    display:flex; flex-direction:column; justify-content:space-between;
    height:340px; gap:0;
  }
  .tide-nav li{
    display:flex; align-items:center; gap:8px; cursor:pointer;
    opacity:.55; transition:opacity .3s var(--ease);
  }
  .tide-nav li.active{ opacity:1; }
  .tide-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--wood); border:2px solid var(--sand-light);
    box-shadow:0 0 0 1px var(--wood);
  }
  .tide-nav li.active .tide-dot{ background:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 8px var(--gold); }
  .tide-label{
    font-family:var(--font-en-alt); font-size:.78rem; color:var(--brown-deep);
    white-space:nowrap;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100svh; min-height:560px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--sand-light);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#f4d9a8 0%,#e8b787 30%,#c98868 55%,var(--ocean-deep) 100%);
}
.hero-sun{
  position:absolute; left:50%; top:28%; width:120px; height:120px;
  background:radial-gradient(circle, #fff2cf 0%, #f4c473 55%, rgba(244,196,115,0) 75%);
  border-radius:50%; transform:translate(-50%,-50%);
  filter:blur(1px);
}
.hero-sea{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(180deg, #3d6a78 0%, var(--ocean-deep) 100%);
}
.hero-wave{
  position:absolute; left:-10%; width:120%; height:60px; bottom:38%;
  background:rgba(233,223,198,.18);
  border-radius:50%;
  animation:waveDrift 9s ease-in-out infinite;
}
.hero-wave.wave2{ bottom:34%; height:40px; animation-duration:12s; background:rgba(233,223,198,.1); }
@keyframes waveDrift{
  0%,100%{ transform:translateX(0) scaleY(1); }
  50%{ transform:translateX(3%) scaleY(1.2); }
}
.hero-boat{ position:absolute; font-size:1.4rem; opacity:.8; animation:bob 6s ease-in-out infinite; }
.boat1{ left:20%; bottom:30%; animation-delay:0s; }
.boat2{ left:68%; bottom:26%; font-size:1rem; animation-delay:2s; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.hero-bird{ position:absolute; top:16%; font-size:1.2rem; opacity:.7; animation:fly 18s linear infinite; }
.bird1{ left:-5%; animation-delay:0s; }
.bird2{ top:22%; left:-15%; animation-delay:6s; font-size:.9rem; }
@keyframes fly{ from{ transform:translateX(0);} to{ transform:translateX(130vw);} }
.hero-jetty{
  position:absolute; left:50%; bottom:0; width:14%; height:16%;
  transform:translateX(-50%);
  background:repeating-linear-gradient(90deg, var(--wood-dark) 0 6px, var(--wood) 6px 14px);
  clip-path:polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  opacity:.85;
}

.hero-content{ position:relative; z-index:1; padding:0 1.2rem; max-width:760px; }
.hero-eyebrow{
  font-family:var(--font-en-alt); font-style:italic; letter-spacing:.08em;
  font-size:.95rem; opacity:.9; margin-bottom:1.2rem;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero h1{
  color:var(--sand-light); font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.15;
  text-shadow:0 4px 24px rgba(0,0,0,.45);
}
.hero-sub-cn{ font-size:.5em; font-weight:600; letter-spacing:.06em; }
.hero-en{
  font-family:var(--font-en-display); font-size:clamp(1.1rem,2.2vw,1.5rem);
  margin:.4em 0 0; font-style:italic; opacity:.92;
}
.hero-tagline{
  margin-top:1rem; font-family:var(--font-en-alt); font-size:1.05rem; opacity:.85;
}
.scroll-cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:3rem; color:var(--sand-light); text-decoration:none;
  font-family:var(--font-en-alt); letter-spacing:.15em; font-size:.8rem;
  animation:cueFloat 2.4s ease-in-out infinite;
}
.scroll-arrow{ width:1px; height:34px; background:var(--sand-light); position:relative; }
.scroll-arrow::after{
  content:""; position:absolute; bottom:0; left:-3px; width:7px; height:7px;
  border-right:1px solid var(--sand-light); border-bottom:1px solid var(--sand-light);
  transform:rotate(45deg);
}
@keyframes cueFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* =========================================================
   CHAPTERS — shared
   ========================================================= */
.chapter{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:6rem 1.4rem; overflow:hidden;
}
.chapter-bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, var(--sand) 0%, var(--sand-light) 100%);
}
.chapter-inner{
  position:relative; z-index:1; max-width:760px; margin:0 auto; width:100%;
}
.chapter-num{
  display:inline-block; font-family:var(--font-en-alt); font-style:italic;
  letter-spacing:.12em; color:var(--wood); font-size:1rem; margin-bottom:1rem;
}
.chapter h2{
  font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.25;
}
.chapter-text p{ margin:0 0 1.1em; font-size:1.08rem; color:#3b3226; max-width:58ch; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal.delay-1{ transition-delay:.12s; }
.reveal.delay-2{ transition-delay:.24s; }

/* per-chapter accent tints */
.ch-village .chapter-bg{ background:linear-gradient(150deg,#e3d6b4,#f3ecd9); }
.ch-map .chapter-bg{ background:linear-gradient(150deg,#dccbaa,#eee3c6); }
.ch-migration .chapter-bg{ background:linear-gradient(150deg,#d8ccb2,#f0e7cf); }
.ch-riverlife .chapter-bg{ background:linear-gradient(150deg,#c9d6d2,#eee6cf); }
.ch-taukeh .chapter-bg{ background:linear-gradient(150deg,#e6d9b8,#f4ecd9); }
.ch-flow .chapter-bg{ background:linear-gradient(150deg,#dfd0ab,#f2e9d1); }
.ch-erosion .chapter-bg{ background:linear-gradient(150deg,#6f7f82,#b9beb2); }
.ch-erosion h2, .ch-erosion .chapter-num, .ch-erosion .chapter-text p{ color:#20211d; }
.ch-1968 .chapter-bg{ background:linear-gradient(150deg,var(--ocean-deep),#33566a); }
.ch-1968 h2, .ch-1968 .chapter-num{ color:var(--sand-light); }
.ch-1968 .chapter-text p{ color:#e4dcc6; }
.ch-project .chapter-bg{ background:linear-gradient(150deg,#2c4a5e,#4c7286); }
.ch-project h2, .ch-project .chapter-num{ color:var(--sand-light); }
.ch-project .chapter-text p{ color:#e4dcc6; }
.ch-jetty .chapter-bg{ background:linear-gradient(150deg,#39586a,#6f9aa8); }
.ch-jetty h2, .ch-jetty .chapter-num{ color:var(--sand-light); }
.ch-jetty .chapter-text p{ color:#e9e2cc; }
.ch-namesake .chapter-bg{ background:linear-gradient(150deg,#e9dfc0,#f6efd9); }
.ch-ending .chapter-bg{ background:linear-gradient(150deg,#3a3226,#6a4f3a); }
.ch-ending h2, .ch-ending .chapter-num{ color:var(--sand-light); }

/* =========================================================
   Chapter 2 — old map
   ========================================================= */
.old-map{
  position:relative; margin-top:2rem; height:340px; max-width:600px;
  background:
    radial-gradient(circle at 30% 40%, rgba(176,141,87,.18), transparent 60%),
    var(--sand-light);
  border:1px solid rgba(107,74,50,.35); border-radius:var(--radius);
  box-shadow:var(--shadow-soft), inset 0 0 60px rgba(107,74,50,.15);
}
.map-coastline{ position:absolute; inset:0; width:100%; height:100%; }
.map-coastline path{ stroke:var(--wood); stroke-width:.6; opacity:.5; }
.map-pin{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  background:none; border:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:4px; font-family:var(--font-cn-display); color:var(--brown-deep);
}
.pin-dot{
  width:12px; height:12px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(176,141,87,.25);
  transition:transform .25s var(--ease);
}
.map-pin:hover .pin-dot, .map-pin:focus-visible .pin-dot{ transform:scale(1.35); }
.pin-label{ font-size:.85rem; background:rgba(243,236,217,.9); padding:2px 8px; border-radius:6px; }

.place-card{
  margin-top:1.6rem; max-width:600px; background:var(--wood-dark); color:var(--sand-light);
  border-radius:var(--radius); padding:1.4rem 1.6rem; position:relative;
  box-shadow:var(--shadow-soft);
}
.place-card h3{ color:var(--sand-light); margin-bottom:.4em; }
.place-card-close{
  position:absolute; top:.7rem; right:.9rem; background:none; border:none;
  color:var(--sand-light); font-size:1.1rem; cursor:pointer; opacity:.75;
}
.place-card-close:hover{ opacity:1; }

/* =========================================================
   Chapter 3 — migration route + mini timeline
   ========================================================= */
.route{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:2.4rem 0;
}
.route-stop{ display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.9rem; text-align:center; }
.route-dot{ width:10px; height:10px; border-radius:50%; background:var(--ocean); }
.route-final .route-dot{ background:var(--gold); width:14px; height:14px; }
.route-line{ width:36px; height:1px; background:var(--wood); opacity:.5; }

.mini-timeline{ display:flex; align-items:center; gap:1.2rem; margin-top:1rem; }
.mini-year{
  font-family:var(--font-en-display); font-size:2.2rem; color:var(--gold); font-weight:700;
}
.mini-track{ display:flex; gap:1.5rem; }
.mini-point span{
  font-size:.85rem; border-bottom:2px solid var(--wood); padding-bottom:4px;
}

/* =========================================================
   Chapter 4 — river life floating boats
   ========================================================= */
.riverlife-bg{ overflow:hidden; }
.floating-boat{
  position:absolute; font-size:1.6rem; top:60%; left:10%;
  animation:driftBoat 14s ease-in-out infinite;
}
.boat-b{ left:70%; top:45%; font-size:1.1rem; animation-duration:18s; animation-delay:3s; }
@keyframes driftBoat{
  0%,100%{ transform:translate(0,0) rotate(0deg);} 50%{ transform:translate(4%,-3%) rotate(-2deg);}
}

/* =========================================================
   Chapter 5 — taukeh figures
   ========================================================= */
.taukeh-figures{
  display:flex; align-items:center; gap:1rem; margin-top:2rem; font-size:1.8rem;
}
.fig-connector{ width:60px; height:1px; background:var(--wood); position:relative; }
.fig-connector::after{ content:"⇄"; position:absolute; left:50%; top:50%; transform:translate(-50%,-60%); font-size:1rem; color:var(--wood); }

/* =========================================================
   Chapter 6 — flow chain
   ========================================================= */
.flow-chain{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.8rem;
}
.flow-chain li{
  background:var(--sand-light); border:1px solid rgba(107,74,50,.35);
  border-radius:999px; padding:.6em 1.1em .6em .8em; display:flex; align-items:center;
  gap:.5em; font-size:.95rem; box-shadow:0 4px 12px rgba(64,41,26,.08);
}
.flow-icon{ font-size:1.1rem; }
.flow-chain li:not(:last-child)::after{
  content:"→"; margin-left:.8rem; color:var(--wood); opacity:.6;
}

/* =========================================================
   Chapter 7 — erosion bar
   ========================================================= */
.erosion-bar{
  margin-top:2rem; width:100%; max-width:520px; height:14px;
  background:rgba(0,0,0,.15); border-radius:8px; overflow:hidden;
}
.erosion-land{
  height:100%; width:100%; background:linear-gradient(90deg,var(--wood),#8b6b4a);
  transform-origin:left; transition:transform 1.6s var(--ease);
}
.ch-erosion.in-view-section .erosion-land{ transform:scaleX(.35); }

/* =========================================================
   Chapter 8 — 1968 + stone wall
   ========================================================= */
.big-year{
  font-family:var(--font-en-display); font-size:clamp(3rem,10vw,6rem); font-weight:900;
  color:var(--gold); line-height:1; margin-bottom:.2em; letter-spacing:.02em;
}
.stone-wall{
  display:flex; gap:6px; margin-top:2rem; flex-wrap:wrap; max-width:520px;
}
.stone-wall span{
  width:44px; height:26px; background:linear-gradient(160deg,#9a9a90,#6f6f64);
  border-radius:4px; opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.ch-1968.in-view-section .stone-wall span{ opacity:1; transform:translateY(0); }
.stone-wall span:nth-child(1){ transition-delay:.05s; }
.stone-wall span:nth-child(2){ transition-delay:.15s; }
.stone-wall span:nth-child(3){ transition-delay:.25s; }
.stone-wall span:nth-child(4){ transition-delay:.35s; }
.stone-wall span:nth-child(5){ transition-delay:.45s; }
.stone-wall span:nth-child(6){ transition-delay:.55s; }
.stone-wall span:nth-child(7){ transition-delay:.65s; }
.stone-wall span:nth-child(8){ transition-delay:.75s; }

/* =========================================================
   Chapter 9 — parallax stats
   ========================================================= */
.parallax-bg{ position:absolute; inset:0; overflow:hidden; }
.parallax-layer{ position:absolute; inset:-10% -10%; }
.layer-1{ background:radial-gradient(circle at 30% 70%, rgba(233,223,198,.12), transparent 60%); }
.layer-2{ background:radial-gradient(circle at 75% 30%, rgba(176,141,87,.14), transparent 55%); }
.stat-row{ display:flex; flex-wrap:wrap; gap:2.6rem; margin-top:2.2rem; }
.stat{ display:flex; flex-direction:column; }
.stat-num{
  font-family:var(--font-en-display); font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
  color:var(--sand-light);
}
.stat-label{ font-size:.85rem; color:#dcd3ba; margin-top:.3em; }

/* =========================================================
   Chapter 10 — jetty boats
   ========================================================= */
.jetty-bg{ overflow:hidden; }
.jetty-boat{ position:absolute; font-size:1.5rem; top:55%; left:15%; animation:driftBoat 10s ease-in-out infinite; opacity:.9; }
.jetty-boat-b{ left:45%; top:65%; font-size:1.1rem; animation-duration:13s; animation-delay:1.5s; }
.jetty-boat-c{ left:72%; top:48%; font-size:1.3rem; animation-duration:16s; animation-delay:3s; }

/* =========================================================
   Chapter 12 — ending
   ========================================================= */
.ending-bg{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6%; gap:3rem; }
.lighthouse{
  width:22px; height:90px; background:linear-gradient(180deg,#fff,#e9dfc6 40%,var(--wood) 40%);
  border-radius:4px 4px 0 0; position:relative; opacity:.85;
}
.lighthouse::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
  border-bottom:14px solid var(--wood-dark);
}
.signboard{
  font-family:var(--font-en-alt); font-style:italic; color:var(--sand-light);
  border:1px solid rgba(233,223,198,.5); padding:.8em 1.4em; border-radius:8px;
  text-align:center; font-size:1.1rem; backdrop-filter:blur(3px);
}
.signboard span{ display:block; font-size:.75rem; opacity:.75; margin-top:.3em; }
.ending-line{
  font-family:var(--font-en-alt); font-style:italic; font-size:1.3rem;
  color:var(--sand-light); line-height:2; max-width:40ch;
}

/* =========================================================
   Gallery + lightbox
   ========================================================= */
.gallery-section{ padding:5rem 1.4rem 6rem; max-width:1100px; margin:0 auto; }
.gallery-title{ font-size:clamp(1.8rem,4vw,2.6rem); text-align:center; }
.gallery-note{ text-align:center; margin:0 auto 2.4rem; }
.gallery-note code{ background:var(--sand); padding:.1em .4em; border-radius:4px; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.2rem;
}
.gallery-item{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-soft); aspect-ratio:4/3; background:var(--mist);
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.gallery-item.in-view{ opacity:1; transform:translateY(0) scale(1); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:.7em .9em;
  background:linear-gradient(0deg, rgba(20,15,8,.85), transparent);
  color:var(--sand-light); font-size:.85rem;
}
.gallery-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en-alt); font-style:italic; color:var(--wood); text-align:center; padding:1rem;
  background:repeating-linear-gradient(135deg, var(--sand) 0 12px, var(--sand-light) 12px 24px);
}

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(20,15,8,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem;
}
.lightbox img{ max-width:90vw; max-height:80vh; border-radius:8px; }
.lightbox p{ color:var(--sand-light); font-family:var(--font-en-alt); }
.lightbox-close{
  position:absolute; top:1.4rem; right:1.6rem; background:none; border:none;
  color:var(--sand-light); font-size:1.4rem; cursor:pointer;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--brown-deep); color:var(--mist); padding:4rem 1.4rem 3rem; }
.footer-inner{ max-width:960px; margin:0 auto; text-align:center; }
.footer-memorial{
  font-family:var(--font-en-display); font-style:italic; font-size:1.5rem; color:var(--gold); margin-bottom:.3em;
}
.footer-thanks{ opacity:.85; margin-bottom:2.6rem; }
.footer-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; text-align:left;
  border-top:1px solid rgba(215,210,198,.2); padding-top:2.4rem;
}
.footer-cols h3{ color:var(--sand-light); font-size:1rem; margin-bottom:.5em; }
.footer-cols p{ font-size:.85rem; opacity:.75; line-height:1.7; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:600px){
  .chapter{ padding:5rem 1.1rem; }
  .sound-toggle{ padding:.5em .9em; font-size:.85rem; }
  .stat-row{ gap:1.6rem; }
  .old-map{ height:280px; }
}