/* ==========================================================================
   溫暖公益風格（starter）：牛皮紙質感、陶土橘＋琥珀、襯線大標、手繪線條、票根式活動卡
   variant-1 陶土橘、variant-2 森林綠、variant-3 海港藍
   ========================================================================== */
:root {
  --bg: #f5ede0;
  --surface: #fffaf2;
  --surface-2: #efe3cf;
  --text: #2a221d;
  --muted: #6e6156;
  --border: #e2d3bc;
  --accent: #b1543a;
  --accent-dark: #8a3f2a;
  --accent-2: #d98c3d;
  --sage: #7d9879;
  --accent-ink: #fffaf2;
  --font-body: "Noto Sans TC", system-ui, sans-serif;
  --font-display: "Noto Serif TC", serif;
  --font-latin: "Fraunces", "Noto Serif TC", serif;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 14px 30px -16px rgba(74, 44, 24, .35), 0 2px 4px rgba(74, 44, 24, .06);
  --shadow-lg: 0 34px 60px -28px rgba(74, 44, 24, .45);
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.variant-2 { --accent: #3f7d5f; --accent-dark: #2c5c45; --accent-2: #e0a43a; --sage: #b5734f; }
body.variant-3 { --accent: #2f6690; --accent-dark: #224d6e; --accent-2: #e07a5f; --sage: #81a684; }

body { background-color: var(--bg); background-image: var(--paper); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; letter-spacing: .01em; }
h3 { font-weight: 700; }
.eyebrow { font-family: var(--font-body); text-transform: none; letter-spacing: .2em; color: var(--accent); font-size: 14px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.btn { --btn-bg: var(--accent); border-radius: 12px; box-shadow: 0 3px 0 var(--accent-dark); }
.btn:hover { box-shadow: 0 6px 0 var(--accent-dark); }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: none; border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.btn-secondary:hover { box-shadow: none; }
.hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent-2) 45%, transparent) 62%, color-mix(in srgb, var(--accent-2) 45%, transparent) 90%, transparent 90%); padding: 0 .08em; }

/* ---------- 頁首 ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.brand-mark { border-radius: 50%; background: var(--accent); font-family: var(--font-display); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 2px var(--accent); }
.brand-name { font-family: var(--font-display); font-weight: 900; }
.site-nav a::after { height: 3px; border-radius: 3px; bottom: 2px; background: var(--accent-2); }
.header-cta { box-shadow: 0 3px 0 var(--accent-dark); }

/* ---------- 主視覺 ---------- */
.hero { padding: clamp(33px, 4.9vw, 79px) 0 clamp(39px, 4.9vw, 72px); position: relative; }
.hero::before { content: ""; position: absolute; right: -8%; top: -12%; width: 58vw; max-width: 780px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 62%); z-index: -1; pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-kicker { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: .3em; color: var(--muted); margin-bottom: 18px; }
.kicker-line { width: 44px; height: 2px; background: var(--accent); }
.hero-title { font-size: clamp(38px, 5.8vw, 83px); line-height: 1.12; letter-spacing: .01em; margin: 0 0 22px; }
.hero-tagline { font: 700 clamp(20px, 2.2vw, 28px)/1.5 var(--font-display); color: var(--accent); margin-bottom: 22px; }
.scribble { position: relative; display: inline-block; padding-bottom: 10px; }
.scribble svg { position: absolute; left: 0; bottom: -2px; width: 100%; height: 16px; overflow: visible; }
.scribble path { fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.4s var(--ease) .5s; }
.is-in .scribble path, .no-js .scribble path { stroke-dashoffset: 0; }
.hero-lead { font-size: var(--fs-lead); color: var(--muted); max-width: 30em; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.polaroid { position: relative; margin: 0 auto; width: min(100%, 480px); background: #fff; padding: 16px 16px 58px; border-radius: 4px; box-shadow: var(--shadow-lg); transform: rotate(-3deg); transition: transform .8s var(--ease); }
.polaroid:hover { transform: rotate(-1deg) scale(1.01); }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: italic 500 20px/1.2 var(--font-latin), var(--font-display); color: var(--muted); }
.tape { position: absolute; top: -18px; left: 50%; width: 130px; height: 36px; transform: translateX(-50%) rotate(-4deg); background: color-mix(in srgb, var(--accent-2) 45%, rgba(255, 255, 255, .5)); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); z-index: 2; }

.neighborhood { width: 100%; max-width: 560px; margin: 0 auto; display: block; overflow: visible; }
.neighborhood .sun { fill: var(--accent-2); opacity: .9; transform-origin: 390px 110px; animation: sun 6s var(--ease-in-out) infinite alternate; }
@keyframes sun { to { transform: scale(1.06); opacity: 1; } }
.neighborhood .hill-back { fill: color-mix(in srgb, var(--accent-2) 30%, var(--surface-2)); }
.neighborhood .hill-front { fill: color-mix(in srgb, var(--sage) 55%, var(--surface-2)); }
.neighborhood .house rect, .neighborhood .house path { stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.neighborhood .house rect { fill: var(--surface); }
.neighborhood .house path { fill: var(--accent); }
.neighborhood .house.h2 path { fill: var(--accent-2); }
.neighborhood .house .door { fill: var(--accent-dark); }
.neighborhood .house .win { fill: color-mix(in srgb, var(--accent-2) 50%, #fff); }
.neighborhood .tree rect { fill: var(--text); }
.neighborhood .tree circle { fill: var(--sage); stroke: var(--text); stroke-width: 3; }
.neighborhood .path { fill: none; stroke: var(--surface); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 22; }
.neighborhood .hearts path { fill: var(--accent); animation: bob 3.6s var(--ease-in-out) infinite alternate; }
.neighborhood .hearts .small { fill: var(--accent-2); animation-delay: -1.2s; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.hero .stats { margin-top: clamp(40px, 5vw, 72px); background: var(--surface); border: 2px solid var(--text); border-radius: 18px; box-shadow: 6px 6px 0 var(--text); }
.hero .stat + .stat { border-left: 2px dashed var(--border); }
.stat-num { font-family: var(--font-latin); font-weight: 600; color: var(--accent); }
.stat-label { color: var(--muted); }
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 460px; }
  .hero .stat:nth-child(odd) { border-left: 0; }
  .hero .stat:nth-child(n+3) { border-top: 2px dashed var(--border); }
}
@media (max-width: 560px) { .hero .stats { grid-template-columns: 1fr 1fr; box-shadow: 4px 4px 0 var(--text); } .hero-actions { display: grid; grid-template-columns: 1fr 1fr; } .hero-actions .btn { padding-inline: 10px; font-size: 15px; } .hero-actions .btn::after { display: none; } }

/* ---------- 服務：釘在佈告欄上的便條 ---------- */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.notes.f-1 { grid-template-columns: minmax(0, 520px); }
.notes.f-2, .notes.f-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.note { position: relative; padding: 34px clamp(22px, 2.4vw, 32px) 30px; background: var(--surface); border-radius: 4px; box-shadow: var(--shadow); transform: rotate(-1.2deg); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.note:nth-child(2n) { transform: rotate(1deg); background: #fff7e3; }
.note:nth-child(3n) { transform: rotate(-.4deg); background: #fbf1ea; }
.note:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow-lg); }
.pin { position: absolute; top: 12px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--accent) 14%); box-shadow: 0 3px 4px rgba(0, 0, 0, .25); }
.note-icon { font-size: 30px; display: block; margin: 10px 0 14px; }
.note h3 { font-size: clamp(18px, 1.7vw, 22px); margin-bottom: 8px; }
.note p { margin: 0; color: var(--muted); }
.mission-letter { margin: clamp(48px, 6vw, 88px) auto 0; max-width: 860px; padding: clamp(32px, 4vw, 56px); background: var(--surface) repeating-linear-gradient(transparent 0 38px, color-mix(in srgb, var(--accent) 14%, transparent) 38px 39px); border-left: 4px solid var(--accent); border-radius: 4px; box-shadow: var(--shadow); }
.mission-text { font: 600 clamp(21px, 2.4vw, 30px)/1.75 var(--font-display); margin-bottom: 22px; }
@media (max-width: 860px) { .notes, .notes.f-2, .notes.f-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .notes, .notes[class*="f-"] { grid-template-columns: 1fr; } }

/* ---------- 活動：票根 ---------- */
.event-link { border-radius: 16px; border: 2px solid var(--text); box-shadow: 5px 5px 0 var(--text); background: var(--surface); overflow: visible; }
.event-link:hover { box-shadow: 9px 9px 0 var(--text); transform: translate(-3px, -3px); border-color: var(--text); }
.event-date { position: relative; background: transparent; border-radius: 0; padding: 4px clamp(14px, 1.6vw, 22px) 4px 0; margin-right: 4px; border-right: 2px dashed var(--border); align-self: stretch; justify-content: center; }
.event-date::before, .event-date::after { content: ""; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); }
.event-date::before { top: calc(-1 * clamp(20px, 2.4vw, 32px) - 14px); clip-path: inset(50% 0 0 0); }
.event-date::after { bottom: calc(-1 * clamp(20px, 2.4vw, 32px) - 14px); clip-path: inset(0 0 50% 0); }
.event-month { color: var(--accent); }
.event-day { font-family: var(--font-latin); font-weight: 600; color: var(--text); }
.event-badge { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-dark); }
.event-title { font-family: var(--font-display); }
.event-cta { color: var(--accent); }
.event-card.is-feature.has-image .event-date { border-right: 0; }
.event-card.is-feature.has-image .event-date::before, .event-card.is-feature.has-image .event-date::after { display: none; }
.events-empty { border: 2px dashed var(--border); background: var(--surface); }

/* ---------- 引言 ---------- */
.quote-section { text-align: center; }
.quote-section .big-quote { margin: 0 auto; }
.big-quote p { font-family: var(--font-display); font-weight: 700; }
.big-quote p::before { content: "\201C"; font-family: var(--font-latin); margin: 0 auto 10px; color: var(--accent-2); }

/* ---------- 公告欄 ---------- */
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.board a { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; background: var(--surface); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.board a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.board time { flex: 0 0 64px; text-align: center; border-radius: 8px; overflow: hidden; border: 2px solid var(--text); background: #fff; }
.board time span { display: block; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; padding: 3px 0; letter-spacing: .08em; }
.board time b { display: block; font: 600 28px/1.5 var(--font-latin); }
.board-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.board-title { font: 700 19px/1.5 var(--font-display); }
.board a:hover .board-title { color: var(--accent); }
.board-sum { color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }

/* ---------- 合作夥伴：貼紙 ---------- */
.partners-section { text-align: center; }
.partners-title { font: 700 clamp(20px, 2vw, 26px)/1.5 var(--font-display); margin-bottom: 26px; }
.partner-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.partner-tags li { padding: 10px 22px; border-radius: var(--radius-pill); background: var(--surface); border: 2px solid var(--text); font-weight: 700; transform: rotate(-1.5deg); }
.partner-tags li:nth-child(2n) { transform: rotate(1.5deg); background: #fff3dc; }
.partner-tags li:nth-child(3n) { transform: rotate(-.5deg); background: #f8e7df; }

/* ---------- 頁尾 ---------- */
.site-footer { border-top: 0; }
.footer-cta { background: var(--accent) var(--paper); color: var(--accent-ink); }
.footer-cta-eyebrow { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.footer-cta .btn { --btn-bg: var(--accent-ink); --btn-fg: var(--accent); box-shadow: 0 3px 0 color-mix(in srgb, #000 30%, var(--accent)); }
.footer-main, .footer-bottom { position: relative; }
.footer-org { font-family: var(--font-display); font-weight: 900; }

/* ---------- 內頁 ---------- */
.page-hero h1 { font-size: clamp(33px, 4.8vw, 65px); }
.mission-card { background: var(--surface) repeating-linear-gradient(transparent 0 38px, color-mix(in srgb, var(--accent) 12%, transparent) 38px 39px); color: var(--text); border-left: 4px solid var(--accent); border-radius: 4px; box-shadow: var(--shadow); }
.mission-card .eyebrow { color: var(--accent); }
.mission-card p { opacity: 1; color: var(--muted); }
.timeline::before { background: repeating-linear-gradient(var(--accent) 0 8px, transparent 8px 14px); opacity: .6; }
.timeline-item::before { border-color: var(--accent); background: var(--accent-2); }
.card, .register-card { border-radius: var(--radius); }
.register-card { border: 2px solid var(--text); box-shadow: 6px 6px 0 var(--text); }
.event-poster { background: var(--accent) var(--paper); }
.news-card-media.is-placeholder { background: var(--accent) var(--paper); }
.contact-map { border: 2px solid var(--text); box-shadow: 6px 6px 0 var(--text); }

/* 插畫放在拱形窗框裡 */
.scene-frame { position: relative; width: min(100%, 520px); margin: 0 auto; aspect-ratio: 520 / 440; border-radius: 260px 260px 24px 24px; overflow: hidden; border: 3px solid var(--text); box-shadow: 8px 8px 0 var(--text); background: linear-gradient(#fbeedd, color-mix(in srgb, var(--accent-2) 22%, #fbeedd)); }
.scene-frame .neighborhood { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
@media (max-width: 560px) { .scene-frame { box-shadow: 5px 5px 0 var(--text); } }

/* ---------- 溫暖公益的招牌：數據改成手蓋的圓形印章（跟其他風格的數據列區隔）---------- */
.hero .stats { background: none; border: 0; box-shadow: none; gap: clamp(14px, 3vw, 40px); justify-content: start; grid-template-columns: repeat(auto-fit, minmax(140px, 168px)); }
.hero .stat, .hero .stat + .stat { border: 0; }
.hero .stat {
  aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; text-align: center; padding: 14px;
  border: 2px solid var(--accent) !important; color: var(--accent); position: relative; transform: rotate(var(--r, -6deg));
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.hero .stat::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
.hero .stat:nth-child(2) { --r: 4deg; }
.hero .stat:nth-child(3) { --r: -2deg; }
.hero .stat:nth-child(4) { --r: 7deg; }
.hero .stat .stat-num { font-size: clamp(24px, 2.6vw, 33px); line-height: 1; margin: 0 0 6px; }
.hero .stat .stat-label { font-size: 13px; font-weight: 700; color: var(--accent); max-width: 9em; line-height: 1.35; }
@media (max-width: 760px) { .hero .stat:nth-child(n+3) { border-top: 2px solid var(--accent) !important; } }
@media (max-width: 560px) { .hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: none; justify-items: center; } .hero .stat { width: min(100%, 150px); } }

/* 旅遊行程＝手撕票根、影片＝貼膠帶的拍立得（溫暖公益） */
.tour { border: 2px solid var(--text); border-radius: 16px; box-shadow: 5px 5px 0 var(--text); }
.tour:hover { transform: translate(-2px, -3px); box-shadow: 8px 8px 0 var(--text); }
.tour-media { border-bottom: 2px dashed var(--text); }
.tour-ph { background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--accent) 7%, transparent) 14px 15px), color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.tour-ph-days { font-family: var(--font-display); }
.tour-days { background: var(--accent); color: var(--accent-ink); transform: rotate(-2deg); }
.tour-price { border: 1.5px dashed var(--accent); color: var(--accent); }
.video-frame { border-radius: 4px; box-shadow: 0 0 0 10px var(--surface), 0 0 0 12px var(--text), 8px 10px 0 12px color-mix(in srgb, var(--text) 18%, transparent); margin: 12px; overflow: visible; }
.video-play, .video-frame iframe { border-radius: 4px; overflow: hidden; }
.video-frame::before { content: ""; position: absolute; z-index: 2; top: -22px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--accent-2, #e3c7a0) 70%, transparent); opacity: .85; }
.video:nth-child(even) .video-frame { transform: rotate(.8deg); }
.video:nth-child(odd):not(.is-feature) .video-frame { transform: rotate(-.8deg); }
.video figcaption { padding: 6px 12px 0; font-family: var(--font-display); }