/* =========================================================
   Taiwan Frogcast — styles.css
   改顏色、字體、間距，全部從下面這個 :root 區塊開始。
   改一次，全站一起變。
   ========================================================= */

:root {
  /* --- 品牌色 --- 2026-09-03 校正為設計師原檔值。
     正本 = twfrogcast-brand-docs/01-media-kit/assets/text/colours.txt
     ⚠️ 改這裡之前先改正本，不要只改這裡。 */
  --teal:        #4F8083;   /* Grey Cyan Dark · 文字、連結、按鈕 */
  --teal-soft:   #649B9F;   /* Grey Cyan Light · logo 本體的青色 */
  --lime:        #D6F18B;   /* 強調色 · 螢光筆、按鈕 */
  --sky:         #C2DDFF;   /* 品牌淺藍 */
  --cream:       #ECECE1;   /* Yellow Light · 主背景 */
  --cream-deep:  #D6D6C4;   /* Yellow Dark · 次背景 */
  --ink:         #33332F;   /* 內文黑（不在品牌色內，為了對比度保留） */
  --ink-soft:    #565454;   /* Ink grey · 次要文字、wordmark 用色 */

  /* --- 字體 --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- 版面 --- */
  --wide: 1120px;   /* 內容最寬 */
  --narrow: 660px;  /* 純文字段落最寬（好讀） */
  --radius: 18px;
}

/* ---------- 基本重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;

}

/* 紙紋：整站鋪一層極淡的紙纖維，讓畫面不像純數位輸出。
   透明度就是「紙感的強度」——調 opacity 這一個數字即可。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/paper.jpg") repeat;
  background-size: 380px;
  mix-blend-mode: multiply;
  opacity: .42;
  pointer-events: none;
  z-index: 9999;
}

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

a { color: var(--teal); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 40;  /* 讓襯線字帶一點手切的圓潤感 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--teal); }

p { margin: 0 0 1.1em; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- 螢光筆效果 ---------- */
/* 用一條萊姆綠的斜色帶壓在文字下半部，像真的用麥克筆畫過 */
.mark-hl {
  background: linear-gradient(
    100deg,
    rgba(203,232,107,0)   0.5%,
    rgba(203,232,107,.85) 2.5%,
    rgba(203,232,107,.85) 96%,
    rgba(203,232,107,0)   99%
  );
  background-repeat: no-repeat;
  background-size: 100% 55%;
  background-position: 0 88%;
  padding: 0 2px;
  font-weight: 600;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0 24px 90px;
  isolation: isolate;
}

/* 水彩底：真實水彩掃描（Colorful Pond），不是 AI 生成的那幾張 */
.hero-wash {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 135%;
  background: url("assets/wash.jpg") center/cover no-repeat;
  filter: saturate(1.25) brightness(1.04);
  opacity: .75;
  z-index: -2;
}
.hero::after {  /* 底部漸隱，讓水彩自然融進米白 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to bottom, rgba(244,241,228,0), var(--cream) 88%);
  z-index: -1;
}

.topbar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 22px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo { width: 232px; }

.nav-cta {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 999px;
  padding: 9px 18px;
  background: rgba(255,255,255,.6);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-cta:hover { background: var(--teal); color: #fff; }

.hero-inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 32px;
  padding-top: 30px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(46px, 7.2vw, 82px);
  margin-bottom: 22px;
}

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  max-width: 34em;
  color: var(--ink);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- 按鈕 --- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 0 #3C6365;
}
.btn-primary:hover { box-shadow: 0 6px 0 #3C6365; }

.btn-ghost {
  background: rgba(255,255,255,.75);
  color: var(--teal);
  border-color: var(--teal);
}
.btn-ghost:hover { background: #fff; }

.btn-lime {
  background: var(--lime);
  color: #33452B;
  box-shadow: 0 4px 0 #B6D268;
}
.btn-lime:hover { box-shadow: 0 6px 0 #B6D268; }

/* --- Hero 裡的 Kapa --- */
.hero-art { margin: 0; text-align: center; }
.hero-art img {
  width: min(100%, 380px);
  margin: 0 auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 14px 22px rgba(60,80,70,.16));
  animation: bob 5.5s ease-in-out infinite;
}
.hero-art figcaption {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--teal);
  margin-top: 6px;
  transform: rotate(-2deg);
}

@keyframes bob {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50%     { transform: rotate(-3deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 手繪波浪分隔 ---------- */
.wave { display: block; width: 100%; height: 60px; }
.wave path { fill: var(--cream); }
.wave-top { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; }

/* =========================================================
   WHY A FROG
   ========================================================= */
.why {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 10px 24px 30px;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
}
.why h2 { font-size: clamp(32px, 4vw, 46px); }
.why p { font-size: 18px; max-width: 36em; }

.kicker { color: var(--ink-soft); }
.wink { font-family: var(--font-display); font-style: italic; color: var(--teal); }

.why-art img {
  width: 100%;
  transform: rotate(4deg);
  filter: drop-shadow(0 12px 20px rgba(60,80,70,.14));
}
.why-art { margin: 0; }

/* =========================================================
   WHAT WE MAKE
   ========================================================= */
.what {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 20px 24px 90px;
}
.centred { text-align: center; font-size: clamp(32px, 4vw, 46px); }
.section-lede {
  text-align: center;
  color: var(--ink-soft);
  max-width: var(--narrow);
  margin: 0 auto 92px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.card {
  background: #fff;
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius);
  padding: 116px 26px 30px;
  position: relative;
  box-shadow: 0 6px 0 var(--cream-deep);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--cream-deep); }

/* 讓卡片上方的青蛙像貼紙一樣壓在邊框上 */
.card-art {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 148px;
  transform: translateX(-50%) rotate(-5deg);
  filter: drop-shadow(0 8px 12px rgba(60,80,70,.16));
}
.card:nth-child(2) .card-art { transform: translateX(-50%) rotate(3deg); }
.card:nth-child(3) .card-art { transform: translateX(-50%) rotate(-2deg); }

.card h3 { font-size: 23px; text-align: center; }
.card p { color: var(--ink-soft); margin: 0; font-size: 16.5px; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.signup { position: relative; background: var(--teal); color: #fff; }
.signup .wave path { fill: var(--cream); }
.wave-in  { position: absolute; top: -1px;    left: 0; right: 0; }
.wave-out { position: absolute; bottom: -1px; left: 0; right: 0; }

.signup-inner {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 110px 24px 120px;
  text-align: center;
}
.signup h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); }
.signup h2 em { color: var(--lime); }
.signup p { color: rgba(255,255,255,.92); font-size: 18px; }
.signup .small { font-size: 15.5px; color: rgba(255,255,255,.75); }
.signup .btn-lime { margin-top: 12px; }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 64px 24px 70px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}
.foot-mark { width: 68px; margin: 0 auto 22px; opacity: .85; }
.org { max-width: 46em; margin: 0 auto 22px; }

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 18px;
}
.social a, .contact a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.social a:hover, .contact a:hover { border-bottom-color: var(--lime); }

.credit { font-size: 13.5px; color: #8B8B80; margin-top: 26px; }

/* =========================================================
   手機版
   ========================================================= */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 16px; }
  .hero-text .lede { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art img { width: min(62%, 260px); }

  .why-grid { grid-template-columns: 1fr; text-align: center; }
  .why p { margin-left: auto; margin-right: auto; }
  .why-art img { width: min(55%, 220px); margin: 0 auto; }
}

@media (max-width: 760px) {
  /* 單欄時卡片上緣的青蛙會壓到上一張卡，所以把卡片間距拉開 */
  .cards { gap: 78px; }
  .card-art { width: 124px; top: -60px; }
  .card { padding: 100px 24px 28px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding-bottom: 60px; }
  .logo { width: 176px; }
  .nav-cta { font-size: 13.5px; padding: 8px 14px; }
  .signup-inner { padding: 90px 20px 96px; }
  .wave { height: 40px; }
}

/* =========================================================
   SITE NAV  ——  2026-08-30 加。骨架參考非營利媒體站，皮維持手繪。
   ========================================================= */
.topbar { flex-wrap: wrap; }

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-left: auto;
}
/* ⚠️ 這條只能套在「文字連結」上。
   .nav-cta 和 .nav-donate 是有完整外框的膠囊按鈕，
   `.site-nav a`（0,1,1）的特異度比 `.nav-cta`（0,1,0）高，
   會把它們的 border-bottom 蓋成 transparent —— 按鈕的圈就缺了一段。
   （2026-08-31 查出：computed border-bottom 是 rgba(0,0,0,0)。） */
.site-nav a:not(.nav-cta):not(.nav-donate):not(.lang-switch a) {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
}
.site-nav a:not(.nav-cta):not(.nav-donate):hover,
.site-nav a[aria-current="page"]:not(.nav-cta):not(.nav-donate) { border-bottom-color: var(--lime); }
/* 保險：兩顆按鈕的外框一律完整 */
.site-nav .nav-cta    { border: 2px solid var(--teal) !important; }
.site-nav .nav-donate { border: 2px solid var(--lime) !important; }

.nav-donate {
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--lime);
  border: 2px solid var(--lime);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
  transition: filter .15s ease;
}
.nav-donate:hover { filter: brightness(.94); border-bottom-color: transparent; }
.site-nav .nav-donate:hover { border-bottom-color: var(--lime); }

/* =========================================================
   內頁：頁首橫幅 ＋ 內文排版
   ========================================================= */
.page-head {
  position: relative;
  padding: 0 24px 10px;
  background: url("assets/wash.jpg") center/cover;
}
.page-head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(244,241,228,.72), rgba(244,241,228,.94) 78%, var(--cream));
  z-index: 0;
}
.page-head > * { position: relative; z-index: 1; }
.page-title {
  max-width: var(--narrow);
  margin: 34px auto 0;
  text-align: center;
}
.page-title h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.08;
  margin: 0 0 10px;
  text-wrap: balance;
}
.page-title p {
  font-size: 18.5px;
  color: var(--ink-soft);
  margin: 0 auto 30px;
  max-width: 34em;
}

.prose {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 12px 24px 40px;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.25;
  margin: 46px 0 12px;
}
.prose h2:first-child { margin-top: 8px; }
.prose h3 { font-size: 18px; margin: 30px 0 6px; }
.prose p { margin: 0 0 16px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }

.pull {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.45;
  color: var(--teal);
  border-left: 4px solid var(--lime);
  padding: 4px 0 4px 20px;
  margin: 26px 0;
}

/* 條列式的紀錄（媒體報導、作品） */
.record { list-style: none; padding: 0; margin: 0 0 10px; }
.record li {
  padding: 16px 0;
  border-top: 1px solid var(--cream-deep);
}
.record li:last-child { border-bottom: 1px solid var(--cream-deep); }
.record a { font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.record a:hover { border-bottom-color: var(--lime); }
.record .meta {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* 首頁：一句授權宣告 */
.free-strip {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 26px 24px 4px;
  text-align: center;
}
.free-strip p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--teal);
  margin: 0 auto;
  max-width: 30em;
  line-height: 1.4;
}

/* =========================================================
   FOOTER v2 —— 頁尾是第二個導覽列，不是版權宣告區
   ========================================================= */
footer { max-width: var(--wide); text-align: left; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  text-align: left;
  margin-bottom: 40px;
}
.foot-col h2 {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B8B80;
  margin: 0 0 12px;
  font-weight: 700;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 7px; }
.foot-col a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.foot-col a:hover { border-bottom-color: var(--lime); }
.foot-bottom {
  border-top: 1px solid var(--cream-deep);
  padding-top: 26px;
  text-align: center;
}
.foot-bottom .foot-mark { width: 54px; margin: 0 auto 16px; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .topbar { justify-content: center; gap: 12px; }
  .site-nav { margin-left: 0; justify-content: center; gap: 6px 16px; }
  .site-nav a { font-size: 14px; }
  .nav-donate { font-size: 14px; padding: 7px 15px; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   內頁 v2 —— 把首頁的裝置搬進來：青蛙、波浪、色塊、卡片
   ========================================================= */

/* 頁首：標題 ＋ 一隻 Kapa */
.head-grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: 24px;
  padding: 26px 0 6px;
}
.head-grid .page-title { margin: 0; text-align: left; }
.head-grid .page-title p { margin-left: 0; }
.head-art img {
  width: min(230px, 74%);
  margin: 0 auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 10px 16px rgba(60,80,70,.14));
}

/* 深青綠色塊（首頁電子報區的通用版） */
.band {
  position: relative;
  background: var(--teal);
  color: #fff;
  margin-top: 46px;
}
.band .wave path { fill: var(--cream); }
.band-inner {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 96px 24px 104px;
  text-align: center;
}
.band h2 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  margin: 0 0 14px;
  text-wrap: balance;
}
.band h2 em { color: var(--lime); font-style: italic; }
.band p { color: rgba(255,255,255,.92); font-size: 18px; margin: 0 auto 6px; max-width: 30em; }
.band .small { font-size: 15.5px; color: rgba(255,255,255,.72); }
.band .btn-lime { margin-top: 20px; }
.band .band-quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.35;
  color: #fff;
  margin: 0 auto;
  max-width: 20em;
}
.band .attrib { font-size: 15px; color: rgba(255,255,255,.7); margin-top: 16px; }

/* 平台磁磚 */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 6px 0 10px;
}
.tile {
  display: block;
  background: #fff;
  border: 2px solid var(--cream-deep);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--cream-deep);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--cream-deep); }
.tile strong { display: block; color: var(--teal); font-size: 17px; }
.tile span { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }

/* 小卡（沒有青蛙的版本，用在條列較多的地方） */
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 12px; }
.mini {
  background: #fff;
  border: 2px solid var(--cream-deep);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 4px 0 var(--cream-deep);
}
.mini h3 { margin: 0 0 6px; font-size: 17.5px; }
.mini p  { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* 內頁裡用的卡片區（要留青蛙冒出來的空間） */
.prose-wide { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.card-row { margin-top: 90px; }

@media (max-width: 860px) {
  .head-grid { grid-template-columns: 1fr; text-align: center; }
  .head-grid .page-title { text-align: center; }
  .head-grid .page-title p { margin-left: auto; margin-right: auto; }
  .head-art { order: -1; }
  .head-art img { width: min(48%, 190px); }
  .band-inner { padding: 80px 20px 86px; }
}

/* 錨點捲過去時不要被 sticky header 蓋住 */
[id] { scroll-margin-top: 92px; }

/* =========================================================
   漣漪系統 —— 品牌手冊裡的簽名裝置（Frog_LogoSystem / YoutubeCover）
   斷開的同心圓弧＝青蛙跳進水裡的水波紋。網站上原本一條都沒有。
   ========================================================= */
.ripples {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ripples svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ripples circle {
  fill: none;
  stroke-linecap: round;
  transform-origin: center;
}
.r-lime { stroke: var(--lime); }
.r-sky  { stroke: var(--sky); }

/* 極慢的呼吸：向外擴散一點點再回來。不是特效，是讓水看起來還活著。 */
@keyframes ripple-breathe {
  0%   { transform: scale(1);     opacity: .85; }
  50%  { transform: scale(1.045); opacity: .55; }
  100% { transform: scale(1);     opacity: .85; }
}
.ripples circle { animation: ripple-breathe 9s ease-in-out infinite; }
.ripples circle:nth-child(2) { animation-delay: -1.4s; }
.ripples circle:nth-child(3) { animation-delay: -2.9s; }
.ripples circle:nth-child(4) { animation-delay: -4.3s; }
.ripples circle:nth-child(5) { animation-delay: -5.8s; }

/* =========================================================
   HEADER v2 —— 坐在色塊上、有漣漪、會跟著捲動收起來
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.site-header .ripples { opacity: .55; }
.site-header .topbar { position: relative; z-index: 1; padding: 20px 24px 22px; }
.site-header.is-stuck {
  background: rgba(244,241,228,.94);
  backdrop-filter: saturate(1.2) blur(6px);
  box-shadow: 0 6px 22px rgba(60,80,70,.10);
  border-bottom-color: var(--cream-deep);
}
.site-header.is-stuck .topbar { padding: 10px 24px 12px; }
.site-header.is-stuck .logo   { width: 186px; }
.site-header .logo { transition: width .2s ease; }

/* 導覽字改成大寫＋字距，跟 wordmark 同一個處理 */
.site-nav a:not(.nav-cta):not(.nav-donate) {
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.site-nav a:not(.nav-cta):not(.nav-donate):hover,
.site-nav a[aria-current="page"] { color: var(--ink); }

/* header 下緣用漣漪弧線切開，不用直線 */
.header-edge { display: block; width: 100%; height: 26px; }
.header-edge path { fill: var(--cream); }

/* =========================================================
   Hero v2 —— 置中標題 ＋ 全家福橫幅
   ========================================================= */
.hero-centre {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: 44px 24px 8px;
  text-align: center;
  z-index: 1;
}
.hero-centre h1 { font-size: clamp(40px, 7vw, 76px); margin-bottom: 14px; }
.hero-centre .lede { margin: 0 auto 26px; max-width: 30em; }
.hero-centre .cta-row { justify-content: center; }

.family {
  position: relative;
  max-width: 1320px;
  margin: 6px auto 0;
  padding: 0 12px;
  z-index: 1;
}
.family img { width: 100%; }
.family figcaption {
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--teal);
  margin-top: 2px;
}

/* =========================================================
   卡片 hover 的漣漪
   ========================================================= */
/* ⚠️ 卡片不能設 overflow:hidden —— 青蛙是刻意從上緣冒出來的，會被切掉。
   所以 hover 不用擴散的圓環，改成邊框變萊姆綠 ＋ 青蛙輕輕轉一下。 */
.card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover { border-color: var(--lime); }
.card .card-art { transition: transform .25s cubic-bezier(.34,1.4,.5,1); }
.card:hover .card-art { transform: translateX(-50%) rotate(-9deg) scale(1.04); }
.card:nth-child(2):hover .card-art { transform: translateX(-50%) rotate(7deg) scale(1.04); }
.card:nth-child(3):hover .card-art { transform: translateX(-50%) rotate(-6deg) scale(1.04); }
@keyframes card-ripple {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(11);  opacity: 0; }
}

.tile { position: relative; overflow: hidden; }
.tile::after {
  content: "";
  position: absolute; left: 24px; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2px solid var(--sky);
  opacity: 0; pointer-events: none;
}
.tile:hover::after { animation: card-ripple .8s ease-out; }

/* =========================================================
   進場：淡入上移，只做一次
   ========================================================= */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1);
}

/* 波浪極慢地水平漂移 */
@keyframes wave-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-14px); }
  100% { transform: translateX(0); }
}
.wave-in, .wave-out, .wave-top { animation: wave-drift 16s ease-in-out infinite; }
.wave-out { animation-delay: -5s; }

/* 怕暈的人全部關掉 */
@media (prefers-reduced-motion: reduce) {
  .ripples circle,
  .wave-in, .wave-out, .wave-top { animation: none; }
  .card:hover::after, .tile:hover::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 560px) {
  .site-header .topbar { padding: 12px 16px; }
  .hero-centre { padding-top: 30px; }
}

/* =========================================================
   平台磁磚：把平台符號淡淡地墊在背景（Yen 2026-08-30 要求）
   用簡化的幾何符號，不是官方 logo 檔 —— 只作辨識用的暗示。
   ========================================================= */
.tile { padding-right: 62px; }
.tile .glyph {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: 76px;
  height: 76px;
  opacity: .18;
  color: var(--teal);
  transition: opacity .18s ease, transform .25s cubic-bezier(.34,1.3,.5,1);
  pointer-events: none;
}
.tile:hover .glyph { opacity: .34; transform: rotate(-6deg) scale(1.06); }
.tile .glyph svg { width: 100%; height: 100%; display: block; }

/* =========================================================
   HEADER v3 —— 真正的修法（2026-08-30）
   ⚠️ 前一版的病因：header 被拉到 hero「上面」的常規流裡，
   所以它自己佔掉約 82px 的高度，那塊露出的是 body 的純米白，
   而下面才開始水彩 —— 那條分界就是「切割感」。
   改成 fixed 浮在 hero 之上，米白帶消失，按鈕也不會被那條邊界切到。
   ========================================================= */
.site-header {
  position: fixed;
  left: 0; right: 0; top: 0;
}
.hero      { padding-top: 92px; }
.page-head { padding-top: 92px; }
.site-header .topbar { padding: 16px 24px; }
.site-header.is-stuck .topbar { padding: 9px 24px; }

@media (max-width: 860px) {
  .hero, .page-head { padding-top: 132px; }   /* 導覽換行後比較高 */
}
@media (max-width: 560px) {
  .hero, .page-head { padding-top: 150px; }
  .site-header .topbar { padding: 12px 16px; }
}

/* =========================================================
   v4（2026-08-30）—— 三個真正的病因
   ① header 高度是「會變的」：導覽換行時從 108px 變 168px，
      而 padding-top 是寫死的 92/132 → 內容被壓在 header 下面，
      按鈕看起來就像被切掉。改由 JS 量測，寫進 --header-h。
   ② 全家福是一塊方形貼在米白上 → 邊緣用 mask 羽化掉。
   ③ 漣漪只是「呼吸」，Yen 要的是青蛙跳水那種向外擴散。
   ========================================================= */
.hero, .page-head { padding-top: calc(var(--header-h, 110px) + 26px); }
@media (max-width: 860px) { .hero, .page-head { padding-top: calc(var(--header-h, 150px) + 18px); } }

/* ---- 全家福：邊緣化開，不再是一塊方形 ---- */
.family { max-width: 1400px; padding: 0; }
.family img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 72%, transparent 99%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 72%, transparent 99%);
          mask-composite: intersect;
}
.family figcaption { margin-top: -14px; position: relative; }

/* ---- 漣漪：青蛙跳水。一圈一圈往外擴散然後淡掉 ---- */
@keyframes ripple-out {
  0%   { transform: scale(.28); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ripples circle {
  animation: ripple-out 7s cubic-bezier(.2,.6,.35,1) infinite;
  transform-origin: 700px 700px;
}
.ripples circle:nth-child(1) { animation-delay: 0s; }
.ripples circle:nth-child(2) { animation-delay: 1.4s; }
.ripples circle:nth-child(3) { animation-delay: 2.8s; }
.ripples circle:nth-child(4) { animation-delay: 4.2s; }
.ripples circle:nth-child(5) { animation-delay: 5.6s; }

/* ---- 把社群磁磚那個 hover 波紋，用到更多地方 ---- */
.mini, .record li { position: relative; overflow: hidden; }
.mini::after, .record li::after {
  content: "";
  position: absolute; left: 30px; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid var(--lime);
  opacity: 0; pointer-events: none;
}
.mini:hover::after  { animation: card-ripple .85s ease-out; }
.record li:hover::after { animation: card-ripple .85s ease-out; border-color: var(--sky); }
.mini { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.mini:hover { transform: translateY(-3px); border-color: var(--lime); box-shadow: 0 7px 0 var(--cream-deep); }
.record li { transition: background .18s ease; border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.record li:hover { background: rgba(255,255,255,.55); }

/* 按鈕也給一點水感 */
.btn { transition: transform .14s ease, box-shadow .14s ease, background .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ---- 進場：依序錯開，像水波一個一個到 ---- */
.reveal { transition-delay: 0ms; }
.stagger > * { opacity: 0; transform: translateY(16px); }
.stagger.is-in > * { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1); }
.stagger.is-in > *:nth-child(1) { transition-delay: .00s; }
.stagger.is-in > *:nth-child(2) { transition-delay: .09s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .18s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .27s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .36s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .45s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .54s; }
.stagger.is-in > *:nth-child(8) { transition-delay: .63s; }

@media (prefers-reduced-motion: reduce) {
  .ripples circle { animation: none; opacity: .5; }
  .mini:hover::after, .record li:hover::after { animation: none; }
  .btn:hover { transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}

/* =========================================================
   v5（2026-08-31）
   ① header 的漣漪從「按鈕後面」穿過去，把按鈕邊框視覺切斷 →
      把它挪到 logo 那一側、縮小、壓淡，不再經過導覽區。
   ② 漣漪要大、要跟全家福一起 → hero 自己有一整層會擴散的漣漪。
   ③ 全家福底部不要再淡出（會切到青蛙的腳）。
   ========================================================= */

/* ---- ① header 漣漪讓開導覽 ---- */
.site-header .ripples { opacity: .38; }
.site-header .ripples svg {
  left: 210px;                 /* 對齊 logo，不再跑到按鈕底下 */
  transform: translate(-50%, -50%) scale(.42);
}
@media (max-width: 860px) {
  .site-header .ripples svg { left: 130px; transform: translate(-50%,-50%) scale(.34); }
}

/* ---- ② hero 的大漣漪：青蛙跳進池塘，水波推到整個畫面 ---- */
.hero-ripples {
  position: absolute;
  left: 50%; bottom: -6%;
  width: min(1500px, 130vw);
  height: min(1500px, 130vw);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: .75;
}
.hero-ripples svg { width: 100%; height: 100%; display: block; }
.hero-ripples circle {
  fill: none; stroke-linecap: round;
  transform-origin: 700px 700px;
  animation: ripple-out 7s cubic-bezier(.2,.6,.35,1) infinite;
}
.hero-ripples circle:nth-child(1){ animation-delay: 0s; }
.hero-ripples circle:nth-child(2){ animation-delay: 1.16s; }
.hero-ripples circle:nth-child(3){ animation-delay: 2.33s; }
.hero-ripples circle:nth-child(4){ animation-delay: 3.5s; }
.hero-ripples circle:nth-child(5){ animation-delay: 4.66s; }
.hero-ripples circle:nth-child(6){ animation-delay: 5.83s; }

/* ---- ③ 全家福：只淡左右，不淡下緣（腳要留著） ---- */
.family img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
.family figcaption { margin-top: 4px; }

/* ---- What we make 的三隻青蛙也要有波紋（Yen 指定） ---- */
.card { position: relative; }
.card::before {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2.5px solid var(--lime);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
@keyframes frog-splash {
  0%   { transform: scale(.28); opacity: 0; }
  15%  { opacity: .8; }
  100% { transform: scale(2.4); opacity: 0; }
}
.card:hover::before { animation: frog-splash 1s ease-out; }
.card .card-art { position: absolute; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-ripples circle { animation: none; opacity: .45; }
  .card:hover::before { animation: none; }
}

/* =========================================================
   v6（2026-08-31）
   🔴 波紋的 bug：animation-delay 期間，元素顯示的是「自己原本的樣子」
      —— 也就是完整大小、完全不透明。所以延遲 1.16s～5.83s 的那幾圈
      一開啟頁面就直直待在那裡，等輪到它才突然跳掉。
      解法是 animation-fill-mode: backwards：延遲期間先套用 0% 的狀態。
   ========================================================= */
.ripples circle,
.hero-ripples circle {
  animation-fill-mode: backwards;
  opacity: 0;                    /* 動畫沒跑時（含 reduced-motion 之外）預設就是看不見 */
}

/* ---- Donate：CTA 要第一眼看到 ---- */
@keyframes donate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(203,232,107,.65); }
  50%      { box-shadow: 0 0 0 12px rgba(203,232,107,0); }
}
.nav-donate { animation: donate-pulse 3.4s ease-out infinite; }
.nav-donate:hover { animation-play-state: paused; }

/* 色塊裡的萊姆綠鈕：滑過去有水花，而且會浮起來 */
.band .btn-lime { position: relative; font-size: 17px; padding: 16px 34px; }
.band .btn-lime::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 999px; border: 2.5px solid var(--lime);
  opacity: 0; pointer-events: none;
}
@keyframes btn-splash {
  0%   { transform: scale(.5); opacity: .85; }
  100% { transform: scale(3.4); opacity: 0; }
}
.band .btn-lime:hover::after { animation: btn-splash .9s ease-out; }
.band .btn-lime:hover { transform: translateY(-3px) scale(1.03); }

/* ---- 卡片上的青蛙：改用固定高度，三隻才會一樣大 ---- */
.card-art {
  width: auto;
  height: 132px;
  object-fit: contain;
}
@media (max-width: 760px) { .card-art { height: 112px; top: -56px; } }

/* ---- 內頁頁首放 CTA ---- */
.head-cta { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.head-grid .page-title .head-cta { justify-content: flex-start; }
@media (max-width: 860px) { .head-grid .page-title .head-cta { justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .nav-donate { animation: none; }
  .band .btn-lime:hover { transform: none; }
  .ripples circle, .hero-ripples circle { opacity: .4; }
}

/* =========================================================
   v7（2026-08-31）
   🔴 一直沒抓到的「割裂感」來源之一：紙紋自己的拼接縫。
      paper.jpg 左右邊緣亮度差 11.4，以 380px 平鋪 → 每 380px 一條直線。
      已把貼圖改成四向鏡射版（邊緣落差 0.0），並放大鋪陳降低重複感。
   ========================================================= */
body::before { background-size: 460px; opacity: .34; }

/* 內頁頁首：讓水彩底自己化開，不要是一塊有邊的矩形。
   ⚠️ 遮罩只能套在「背景層」，套在 .page-head 本身會把標題和按鈕一起淡掉（2026-08-31 修）。 */
.page-head { background: none; }
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/wash.jpg") center/cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 99%);
  z-index: 0;
}
.page-head::after { background: linear-gradient(to bottom, rgba(244,241,228,.55), rgba(244,241,228,.86) 80%, var(--cream)); }

/* ---- 三張卡也要 icon ＋ 波紋（跟社群磁磚同一套語言）---- */
.card .glyph {
  position: absolute;
  right: 14px; bottom: 12px;
  width: 62px; height: 62px;
  opacity: .14;
  color: var(--teal);
  pointer-events: none;
  transition: opacity .18s ease, transform .3s cubic-bezier(.34,1.3,.5,1);
}
.card:hover .glyph { opacity: .3; transform: rotate(-8deg) scale(1.08); }
.card .glyph svg { width: 100%; height: 100%; display: block; }

/* =========================================================
   v8（2026-08-31）
   全家福改成透明 PNG —— 青蛙直接站在 hero 自己的水彩上，
   不再是一塊「有自己底色的矩形」貼上去，割裂感從根源消失。
   ========================================================= */
.family { max-width: 1240px; margin-top: -6px; }
.family img {
  -webkit-mask-image: none;
          mask-image: none;      /* 透明底了，不需要再羽化邊緣 */
  filter: drop-shadow(0 10px 18px rgba(60,80,70,.10));
}

/* ---- 卡片上的青蛙再大一點，構圖收緊（Yen 2026-08-31）---- */
.card-art { height: 158px; top: -84px; }
.card { padding: 116px 26px 30px; }
.cards { gap: 30px; }
@media (max-width: 760px) {
  .card-art { height: 128px; top: -66px; }
  .card { padding: 96px 24px 26px; }
}

/* icon 不要撞到內文 */
.card .glyph { right: 12px; bottom: 10px; width: 54px; height: 54px; opacity: .12; }
.card:hover .glyph { opacity: .26; }
.mini { padding-right: 62px; }
.mini .glyph {
  position: absolute; right: 12px; bottom: 10px;
  width: 52px; height: 52px; opacity: .13; color: var(--teal);
  pointer-events: none;
  transition: opacity .18s ease, transform .28s cubic-bezier(.34,1.3,.5,1);
}
.mini:hover .glyph { opacity: .28; transform: rotate(-7deg) scale(1.07); }
.mini .glyph svg { width: 100%; height: 100%; display: block; }

/* =========================================================
   電子報：Substack 嵌入式表單，橫跨每一頁（Yen 2026-08-31）
   訪客留在 twfrogcast.org 上完成訂閱 —— 這是 Ad Grants 的硬需求。
   ========================================================= */
.sub-embed {
  width: min(480px, 100%);
  height: 150px;
  margin: 18px auto 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.10);
  display: block;
}
.band .sub-note { font-size: 14.5px; color: rgba(255,255,255,.72); margin-top: 14px; }
.band .sub-note a { color: var(--lime); }

/* =========================================================
   語言切換 ＋ 手機漢堡（2026-08-31）
   導覽只會越來越長，所以窄螢幕收進選單，而不是一直換行。
   ========================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--teal);
  border-radius: 999px;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(255,255,255,.6);
}
.lang-switch a {
  padding: 6px 11px;
  text-decoration: none;
  color: var(--teal);
  border-bottom: none !important;
  line-height: 1;
}
.lang-switch a[aria-current="true"] { background: var(--teal); color: #fff; }
.site-nav .lang-switch a { font-size: 12.5px; letter-spacing: .06em; text-transform: none; }

.nav-toggle {
  display: none;
  align-items: center; gap: 8px;
  margin-left: auto;
  background: rgba(255,255,255,.65);
  border: 2px solid var(--teal);
  border-radius: 999px;
  padding: 8px 14px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
}
.nav-toggle svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    width: 100%;
    margin: 12px 0 4px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--cream);
    border: 2px solid var(--cream-deep);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(60,80,70,.12);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 12px; border-radius: 10px; border-bottom: none; }
  .site-nav a:hover { background: rgba(255,255,255,.7); }
  .site-nav .nav-cta, .site-nav .nav-donate { text-align: center; margin-top: 6px; }
  .site-nav .lang-switch { align-self: flex-start; margin-top: 8px; }
}

/* =========================================================
   v9（2026-08-31）—— header 一行到底
   病因：.topbar 綁在 --wide(1120px)，視窗再寬也只能用 1120，
   導覽塞不下就換行。放寬 bar 的寬度、縮小 logo、收緊字距，
   並把漢堡的門檻從 900 提高到 1080 —— 中間寬度直接收進選單，
   永遠不會出現「擠成兩行」的中間狀態。
   ========================================================= */
.site-header .topbar {
  max-width: 1360px;
  flex-wrap: nowrap;
  gap: 14px;
}
.site-header .logo { width: 190px; }
.site-header.is-stuck .logo { width: 158px; }
.site-nav { gap: 4px 18px; flex-wrap: nowrap; }
.site-nav a:not(.nav-cta):not(.nav-donate):not(.lang-switch a) { font-size: 12px; letter-spacing: .1em; }
.nav-cta { font-size: 14px; padding: 8px 15px; }
.nav-donate { font-size: 14px; padding: 8px 16px; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-header .topbar { flex-wrap: wrap; }
  .site-nav {
    display: none;
    width: 100%;
    margin: 12px 0 4px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--cream);
    border: 2px solid var(--cream-deep);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(60,80,70,.12);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 12px; border-radius: 10px; }
  .site-nav a:not(.nav-cta):not(.nav-donate):not(.lang-switch a) { font-size: 13px; }
  .site-nav .nav-cta, .site-nav .nav-donate { text-align: center; margin-top: 6px; }
  .site-nav .lang-switch { align-self: flex-start; margin-top: 8px; }
}

/* =========================================================
   內頁頁首：把留白收掉，讓標題和內文對得起來
   （原本 head-grid 靠左 1120，prose 置中 660 → 看起來像兩塊沒關係的東西）
   ========================================================= */
.page-head { padding-bottom: 0; }
.head-grid { padding: 20px 0 0; gap: 12px; }
.head-art img { width: min(190px, 62%); }
.page-title p { margin-bottom: 16px; }
.head-cta { margin-top: 2px; }

/* 內文的第一段當作導言，字大一點，跟頁首接得順 */
main > .prose:first-of-type { padding-top: 4px; }
main > .prose:first-of-type > p:first-child {
  font-size: 19px;
  line-height: 1.68;
  color: var(--ink);
}

/* 編號步驟（中文首頁「一起來吧！」） */
.steps { counter-reset: step; list-style: none; padding-left: 0; margin: 6px 0 18px; }
.steps li {
  position: relative;
  padding-left: 46px;
  margin-bottom: 14px;
  line-height: 1.7;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

/* =========================================================
   v10（2026-08-31）
   ① 全家福離按鈕太近、下方又太空 → 上移空間加大、下方收掉
   ② 全站統一鋪水彩：原本只有 hero 有水彩，往下就變成單色，
      中間那條分界就是「兩個區塊」的感覺。改成 body 整片鋪一層
      很淡的水彩（fixed，所以不會有平鋪接縫），hero 上面再疊
      一層濃一點的 —— 深淺不同，但同一張紙。
   ========================================================= */
body {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(244,241,228,.88), rgba(244,241,228,.88)),
    url("assets/wash.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ⚠️ 波浪的做法是「用米白色塊蓋在青綠上，切出波浪邊」。
   所以底色不能真的變成水彩圖片，否則波浪會變成一條實心米白帶。
   正解是：底層水彩鋪得夠淡（88% 米白蓋過去），
   同時把 hero 的水彩調淡一點 —— 兩邊靠攏，分界就消失了，
   而波浪仍然可以用米白去切。 */
.hero-wash { opacity: .52; }
.hero::after { background: linear-gradient(to bottom, rgba(244,241,228,0), rgba(244,241,228,.45) 92%); }

/* 全家福的位置 */
.family { margin-top: 42px; }
.hero { padding-bottom: 44px; }
.family figcaption { margin-top: 10px; }
@media (max-width: 760px) { .family { margin-top: 26px; } }


/* ---- v11 · WebP ----
   <picture> 只是格式選擇器，不該參與版面。display:contents 讓它從
   排版樹上消失，.family img / .head-art img 這些後代選擇器行為完全不變。 */
picture { display: contents; }


/* ---- v12 · 電子報區塊的追蹤按鈕（2026-09-01）----
   刻意不做成進站彈窗：Google 對「從搜尋進站時遮住內容」有行動版排名懲罰，
   而這個站的整套策略就是靠被搜尋到。用已經存在的版位，不新增打斷。 */
.band .sub-or { font-size: 14.5px; color: rgba(255,255,255,.72); margin: 22px 0 0; }
.follow-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.follow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.42);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.follow svg { width: 18px; height: 18px; flex: 0 0 auto; }
.follow:hover, .follow:focus-visible { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .follow:hover, .follow:focus-visible { transform: none; } }
@media (max-width: 420px) { .follow { padding: 9px 14px; font-size: 14px; } }


/* ---- v13 · Media kit 下載（2026-09-01）----
   刻意不設 email 門檻：這是給趕稿的記者用的工具，卡一個表單他們會直接走人。
   繪本那類行銷素材才適合換 email。 */
.kit-download {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: 30px; padding: 26px 30px;
  background: rgba(79,136,136,.07);
  border: 2px solid rgba(79,136,136,.22);
  border-radius: 18px;
}
.kit-copy { flex: 1 1 320px; }
.kit-copy h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; }
.kit-copy p { margin: 0 0 8px; font-size: 16px; }
.kit-note { font-size: 14.5px; color: var(--ink-soft); }
.kit-btn { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kit-btn svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .kit-download { padding: 22px; gap: 18px; } .kit-btn { width: 100%; justify-content: center; } }


/* ---- v14 · 頁尾社群膠囊（2026-09-01）----
   社群曝光放頁尾，不放首屏：那裡是「已經看完了，要走也沒關係」的位置。
   放在英雄區等於在人剛被打動的瞬間給他一個離開的出口。 */
.follow-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.follow-sm {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid rgba(31,42,41,.18);
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.follow-sm svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.follow-sm:hover, .follow-sm:focus-visible {
  border-color: var(--teal); color: var(--teal); background: rgba(79,136,136,.07);
}
.follow-sm:hover svg { opacity: 1; }

/* /about/ 的〈Look again at the frog〉—— 文字＋標誌並排，窄螢幕改成上下 */
.mark-grid{
  display:grid; grid-template-columns:1fr 200px;
  gap:28px; align-items:center;
}
.mark-grid img{ width:200px; height:auto; margin:0 auto; }

@media (max-width: 700px){
  .mark-grid{ grid-template-columns:1fr; gap:18px; }
  .mark-grid img{ width:150px; order:-1; }
}