/*
 * 朝朝慕穆｜前台元件樣式（首頁、活動頁）。規格：DESIGN.md；數值一律取自 tokens.css，本檔不寫色碼。
 * @media 與 tokens 同值：sm 40rem、md 48rem、lg 64rem、xl 80rem（@media 不能讀變數）。
 */

/* ── 基礎與瀏覽器表面 ───────────────────────────── */
:root {
  color-scheme: dark;
  accent-color: var(--color-primary);
  scrollbar-color: var(--color-hairline-strong) var(--color-canvas);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  font-synthesis: none;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--color-selection); color: var(--color-ink); }

:focus-visible {
  outline: var(--border-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-focus-offset);
}
#main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
#main:focus-visible { outline: none; }
/* 展開面板時焦點移到姓名標題（給讀屏定位），標題不可操作，不畫焦點環 */
.profile-name:focus { outline: none; }

.visually-hidden,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: var(--z-toast);
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.icon {
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { inline-size: var(--size-icon-sm); block-size: var(--size-icon-sm); }
.icon-lg { inline-size: var(--size-icon-lg); block-size: var(--size-icon-lg); }

/* ── 字級角色（DESIGN.md › Typography，封閉 15 個；只列本頁用到的） ── */
.hero-date {
  font-family: var(--type-display-xl-family);
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-leading);
  letter-spacing: var(--type-display-xl-tracking);
}
.placeholder h1,
.photo-frame .monogram {
  font-family: var(--type-display-lg-family);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
}
.section-title,
.profile-name,
.speakers-names {
  font-family: var(--type-headline-family);
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking);
}
.card-name,
.sub-title {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-leading);
  letter-spacing: var(--type-card-title-tracking);
}
.speakers-label,
.card-region,
.profile-meta {
  font-family: var(--type-subhead-family);
  font-size: var(--type-subhead-size);
  font-weight: var(--type-subhead-weight);
  line-height: var(--type-subhead-leading);
  letter-spacing: var(--type-subhead-tracking);
}
.message-body,
.profile-intro dd,
.verse blockquote,
.placeholder-text {
  font-family: var(--type-body-lg-family);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  letter-spacing: var(--type-body-lg-tracking);
}
.pick,
.field-hint,
.field-error,
.field-mark,
.status-body,
.empty-body,
.verse-note,
.site-footer {
  font-family: var(--type-body-sm-family);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  letter-spacing: var(--type-body-sm-tracking);
}
.carousel-counter,
.field-counter,
.badge,
.verse figcaption,
.photo-frame .caption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-caption-tracking);
}
.site-nav a,
.field-label,
.message-author,
.status-title,
.empty-title,
.profile-intro dt,
.avatar .monogram {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
  letter-spacing: var(--type-label-tracking);
}
.btn {
  font-family: var(--type-button-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: var(--type-button-leading);
  letter-spacing: var(--type-button-tracking);
}
.masthead-en,
.section-heading-en,
.sendme-en,
.footer-en {
  font-family: var(--type-masthead-en-family);
  font-size: var(--type-masthead-en-size);
  font-weight: var(--type-masthead-en-weight);
  line-height: var(--type-masthead-en-leading);
  letter-spacing: var(--type-masthead-en-tracking);
  text-transform: var(--type-masthead-en-transform);
}
.masthead-zh {
  font-family: var(--type-masthead-zh-family);
  font-size: var(--type-masthead-zh-size);
  font-weight: var(--type-masthead-zh-weight);
  line-height: var(--type-masthead-zh-leading);
  letter-spacing: var(--type-masthead-zh-tracking);
}
.tagline {
  font-family: var(--type-tagline-family);
  font-size: var(--type-tagline-size);
  font-weight: var(--type-tagline-weight);
  line-height: var(--type-tagline-leading);
  letter-spacing: var(--type-tagline-tracking);
}

/* ── 連結與按鈕 ─────────────────────────────── */
a {
  color: var(--color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--border-underline-offset);
}
a:active { color: var(--color-primary-pressed); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: var(--size-control-height);
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-none);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out),
              border-color var(--motion-duration-fast) var(--motion-easing-out);
}
.btn:active { transform: var(--motion-press-feedback); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:active { background: var(--color-primary-pressed); color: var(--color-on-primary); }
.btn-primary[aria-busy="true"] { background: var(--color-primary-pressed); cursor: progress; }
.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: var(--border-hairline) solid var(--color-hairline-strong);
}
.btn-secondary:active { background: var(--color-surface-3); }

.btn-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
  padding: 0;
  border: var(--border-hairline) solid var(--color-hairline-strong);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-ink-muted);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out),
              color var(--motion-duration-fast) var(--motion-easing-out);
}
.btn-icon:active { background: var(--color-surface-3); transform: var(--motion-press-feedback); }

.loader { animation: spin var(--motion-duration-pulse) linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

@media (hover: hover) {
  a:hover { color: var(--color-primary-hover); text-decoration-thickness: var(--border-focus); }
  .btn-primary:not([aria-busy="true"]):hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
  .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-ink-muted); }
  .btn-icon:hover { background: var(--color-surface-2); color: var(--color-ink); }
}

/* ── 頁首（首頁疊在 hero 上；其他頁在畫布上） ────────── */
.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--layout-gutter);
}
.brand { display: block; flex: none; }
.brand img { inline-size: var(--size-wordmark-nav); }
.site-nav ul { display: flex; flex-wrap: wrap; column-gap: var(--space-sm); } /* 手機：四個連結在 390 寬放得下一行；更窄時整列換到標準字下方 */
.site-nav a {
  display: flex;
  align-items: center;
  min-block-size: var(--size-target-min);
  white-space: nowrap;
  color: var(--color-ink-muted);
  text-decoration: none;
  border-block-end: var(--border-indicator) solid transparent;
}
.hero .site-bar { justify-content: flex-end; } /* 首頁不放小標準字：巨大標準字就在下方（DESIGN.md › nav-top） */
.hero .site-nav a { color: var(--color-ink); }
.site-nav a:active { color: var(--color-ink); transform: var(--motion-press-feedback); }
.site-nav a[aria-current="page"] { color: var(--color-ink); border-block-end-color: var(--color-ink); }
@media (hover: hover) {
  .site-nav a:hover { color: var(--color-ink); }
}
@media (min-width: 40rem) {
  .site-nav ul { column-gap: var(--space-lg); }
}

/* ── Hero（簽名元件）：底圖＋遮罩＋窗光亮起 ──────────── */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  row-gap: var(--space-md);
  min-block-size: var(--layout-hero-min-height);
  padding-block-end: var(--space-lg);
  background: var(--color-canvas);
  color: var(--color-ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before { background: var(--overlay-scrim-hero-mobile); }
/* 作者時刻：遮罩從均勻 0.95 退到靜止值；文字與按鈕從第一幀就在、不參與動畫 */
.hero::after {
  background: var(--color-canvas);
  opacity: 0;
  animation: window-light var(--motion-duration-hero) var(--motion-easing-out);
}
@keyframes window-light { from { opacity: 0.95; } }

.hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--layout-gutter) 0;
}
/* 手機／直式：文字群組壓在窗光上，後方加護字漸層（向下多 xxl 淡出；DESIGN.md › Accessibility 實測） */
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--space-xxl));
  z-index: -1;
  background: var(--overlay-scrim-hero-text);
  pointer-events: none;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  inline-size: 100%;
}
.masthead-en > span,
.masthead-zh { white-space: nowrap; }
.masthead-rule {
  flex: 1 1 var(--space-xl);
  min-inline-size: var(--space-md);
  block-size: var(--border-hairline);
  background: var(--color-decorative-wordmark);
}
.masthead-zh {
  flex-basis: 100%;
  margin-inline-end: calc(-1 * var(--type-masthead-zh-tracking));
}

.hero-wordmark { inline-size: 100%; }
.hero-wordmark img { inline-size: 100%; }

.hero-date time,
.hero-date .date-end { white-space: nowrap; } /* 「～」跟著結束日期換行，不孤懸在行尾 */
.hero-date .weekday {
  font-size: var(--type-subhead-size);
  letter-spacing: var(--type-subhead-tracking);
}
.hero-speakers { display: flex; flex-direction: column; }
.hero-cta { margin-block-start: var(--space-xs); }

/* 寬度＝max(標準字, 英文一行)：英文不折行，桌機時剛好撐滿標準字寬 */
.hero-sendme {
  grid-row: 4;
  justify-self: end;
  display: grid;
  justify-items: end;
  margin-inline-end: var(--layout-gutter);
}
.hero-sendme img { inline-size: var(--size-wordmark-sendme); }
.sendme-en,
.footer-en {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
  white-space: nowrap;
}
.sendme-en { justify-self: stretch; }
.bar { color: var(--color-decorative-wordmark); }

/* 橫向平板與桌機：換桌機底圖與遮罩（與 <picture> 的 media 同條件） */
@media (min-width: 64rem), (min-width: 48rem) and (orientation: landscape) {
  .hero::before { background: var(--overlay-scrim-hero-desktop); }
  .hero-bg img { object-position: 60% 50%; }
  .hero-main::before { content: none; }
}

/* 桌機構圖：左欄 masthead→標準字→日期→講員→按鈕；右下請差遣我 */
@media (min-width: 64rem) {
  .hero {
    min-block-size: var(--layout-hero-height);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
  }
  .site-bar { grid-column: 1 / -1; }
  /* 欄寬＝標準字與日期兩者較寬者：日期在桌機一行排完（照海報），1024 寬時略寬於標準字 */
  .hero-main {
    grid-column: 1;
    grid-row: 2 / 4;
    inline-size: max-content;
    max-inline-size: 100%;
  }
  .masthead,
  .hero-wordmark { inline-size: var(--size-wordmark-hero); max-inline-size: 100%; }
  .hero-date { white-space: nowrap; }
  .masthead { flex-wrap: nowrap; }
  .masthead-en > span { display: block; }
  .masthead-zh { flex-basis: auto; flex-shrink: 0; }
  .masthead-rule { flex-basis: 0; }
  .hero-sendme { grid-column: 2; grid-row: 3; align-self: end; }
}

/* 直排短句：<xl 在 hero 下方的帶狀區；≥xl 回到 hero 右緣 */
.hero-band {
  display: grid;
  justify-items: center;
  gap: var(--space-xxl);
  padding: var(--space-section) var(--layout-gutter) 0;
}
.tagline { writing-mode: vertical-rl; }
.tagline p + p {
  margin-block-start: var(--space-lg);
  margin-inline-start: var(--space-xxl);
}
.tagline-dash {
  display: inline-block;
  inline-size: 2em;
  block-size: var(--border-hairline);
  vertical-align: middle;
  background: var(--color-decorative-wordmark);
}
@media (min-width: 80rem) {
  .tagline {
    position: absolute;
    top: var(--space-section);
    right: var(--layout-gutter);
  }
}

.verse {
  display: grid;
  gap: var(--space-xs);
  max-inline-size: var(--layout-container-reading);
  text-align: center;
}
.verse figcaption { color: var(--color-ink-subtle); }
.verse-note {
  max-inline-size: var(--layout-container-reading);
  color: var(--color-ink-muted);
  text-align: center;
}

/* ── 區段與容器 ─────────────────────────────── */
.section { padding: var(--space-section) var(--layout-gutter) 0; }
.container { max-inline-size: var(--layout-container-board); margin-inline: auto; }
.section-lead { margin-block-start: var(--space-sm); color: var(--color-ink-muted); }

/* 區段標題＝海報 masthead 的語彙：中文標題——米色髮線——Garamond 英文小標，同一行（DESIGN.md › section-heading） */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}
/* 髮線＋英文是一組：放不下時整組換到下一行（髮線再填滿），不會把髮線留在第一行 */
.section-heading-tail {
  display: inline-flex;
  flex: 1 1 auto;
  min-inline-size: max-content;
  align-items: center;
  gap: var(--space-md);
}
.section-heading-rule {
  flex: 1 1 var(--space-xxxl);
  min-inline-size: var(--space-xxxl); /* 髮線至少 4rem 才像海報的連接線；更短就整組換行（320 寬兩個標題都換行，一致） */
  block-size: var(--border-hairline);
  background: var(--color-decorative-wordmark);
}
.section-heading-en {
  color: var(--color-ink-subtle);
  white-space: nowrap;
}

/* ── 窗框照片與首字 ─────────────────────────── */
.photo-frame {
  max-inline-size: min(100%, var(--size-photo-max-width));
  padding: var(--space-xxs);
  background: var(--color-canvas);
  border: var(--border-hairline) solid var(--color-hairline-strong);
}
/* 寬度來自 width/height 屬性（270×225，不放大），容器較窄時由 max-width 縮小；載入前就有尺寸，不會跳版 */
.photo-frame img {
  aspect-ratio: var(--size-photo-ratio);
  object-fit: cover;
}
.photo-frame .monogram {
  inline-size: var(--size-photo-max-width);
  max-inline-size: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: var(--size-photo-ratio);
  background: var(--color-surface-2);
  color: var(--color-decorative-wordmark);
}
.photo-frame .caption {
  display: block;
  padding-block-start: var(--space-xxs);
  color: var(--color-ink-subtle);
  text-align: center;
}

/* ── 輪播（共用控制列） ─────────────────────── */
.carousel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
}
.carousel.is-single .carousel-controls { display: none; }
.carousel .i-play,
.carousel.is-paused .i-pause { display: none; }
.carousel.is-paused .i-play { display: block; }
.carousel-dots { display: flex; }
.dot {
  display: grid;
  place-items: center;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  background: transparent;
}
.dot::before {
  content: "";
  inline-size: var(--size-indicator-width);
  block-size: var(--border-indicator);
  background: var(--color-hairline-strong);
  transition: transform var(--motion-duration-fast) var(--motion-easing-out),
              background-color var(--motion-duration-fast) var(--motion-easing-out);
}
.dot:active::before { background: var(--color-ink); }
.dot[aria-current="true"]::before { background: var(--color-ink); transform: scaleX(2); }
@media (hover: hover) {
  .dot:hover::before { background: var(--color-ink-muted); }
  .dot[aria-current="true"]:hover::before { background: var(--color-ink); }
}
.carousel-counter {
  margin-inline-start: auto;
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
}

/* 首頁宣教師輪播：scroll-snap 軌道，手機一次一張露出下一張的邊；10 個指示點在 <md 放不下，改看計數 */
.carousel-track { margin-block-start: var(--space-lg); }
.carousel-track .carousel-dots { display: none; }
@media (min-width: 48rem) {
  .carousel-track .carousel-dots { display: flex; }
}
.track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(var(--size-card-width), calc(100% - var(--space-xxl)));
  gap: var(--space-md);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
/* 所有寬度：軌道左右對稱延伸到視窗兩緣，超出容器的卡片在頁面邊距淡出，不在容器邊被切斷
   （捲到底時 mandatory snap 落在捲動範圍末端，前一張會越過容器左緣，所以左側也要延伸＋淡出）。
   --bleed＝容器邊到視窗邊的距離（容器未到上限時＝gutter）；只用視窗寬算，不用 %——
   mask 漸層裡的 % 是相對漸層線（軌道寬），會讓淡出只剩一半。padding 同值：起點第一張對齊容器左緣、
   捲到底最後一張對齊容器右緣；scroll-padding 讓 snap 起點也是容器左緣（JS 的 offsetLeft 差值不受影響）。
   mask 只看不透明度，用 --color-canvas（不透明）當「完全顯示」，transparent 當「完全淡出」 */
.track {
  --bleed: max(var(--layout-gutter), (100vw - var(--layout-container-board)) / 2);
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scroll-padding-inline-start: var(--bleed);
  mask-image: linear-gradient(to right, transparent, var(--color-canvas) var(--bleed),
                              var(--color-canvas) calc(100% - var(--bleed)), transparent);
}
#missionaries { overflow-x: clip; } /* 傳統捲軸會讓 100vw 多出捲軸寬，裁掉以免整頁橫捲 */
@media (prefers-reduced-motion: no-preference) {
  .track { scroll-behavior: smooth; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-hairline);
  scroll-snap-align: start;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out),
              border-color var(--motion-duration-fast) var(--motion-easing-out);
}
.card .photo-frame { margin-block-end: var(--space-xs); }
.card-region,
.profile-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-ink-muted);
}
.card-summary { flex: 1; }
/* 整張卡可點（連結延伸到整卡）；焦點環畫在卡片上 */
.card-link { align-self: flex-start; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) {
  outline: var(--border-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-focus-offset);
}
.card:has(.card-link:active) { transform: var(--motion-press-feedback); }
@media (hover: hover) {
  .card:has(.card-link:hover) {
    background: var(--color-surface-2);
    border-color: var(--color-hairline-strong);
  }
}

/* 載入中骨架 */
.skeleton {
  display: block;
  background: var(--color-surface-2);
  animation: pulse var(--motion-duration-pulse) ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }
.skeleton.line { block-size: 1em; margin-block: var(--space-xs); }
.skeleton.short { inline-size: 60%; }
.photo-skeleton { aspect-ratio: var(--size-photo-ratio); }

/* ── 留言板：選擇宣教師（名字＋icon） ───────────── */
.picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}
@media (min-width: 48rem) {
  .picker { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  inline-size: 100%;
  block-size: 100%;
  min-block-size: var(--size-target-min);
  padding: var(--space-xs) 0 var(--space-sm); /* 左右不留白：手機一行放得下 4 個字，名字最多兩行 */
  border: 0;
  border-block-end: var(--border-indicator) solid transparent;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-ink-muted);
  text-align: center;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out),
              color var(--motion-duration-fast) var(--motion-easing-out);
}
.pick:focus-visible { outline-offset: calc(-1 * var(--border-focus)); }
.pick:active { background: var(--color-surface-2); transform: var(--motion-press-feedback); }
.pick[aria-expanded="true"] {
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-weight: var(--type-label-weight);
  border-block-end-color: var(--color-ink);
}
.pick-name { white-space: pre-line; word-break: keep-all; } /* 夫婦名字由 JS 以「、」拆成上下兩行；單一名字不斷字 */
.avatar {
  display: block;
  flex: none;
  inline-size: var(--size-avatar-tab);
  block-size: var(--size-avatar-tab);
  overflow: hidden;
  border: var(--border-hairline) solid var(--color-hairline-strong);
  border-radius: var(--radius-round);
}
.pick[aria-expanded="true"] .avatar {
  outline: var(--border-focus) solid var(--color-ink);
  outline-offset: calc(-1 * var(--border-hairline));
}
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.avatar .monogram {
  display: grid;
  place-items: center;
  block-size: 100%;
  background: var(--color-surface-3);
  color: var(--color-decorative-wordmark);
}
@media (hover: hover) {
  .pick:hover { background: var(--color-surface-1); color: var(--color-ink); }
  .pick[aria-expanded="true"]:hover { background: var(--color-surface-2); }
}
@media (min-width: 64rem) {
  .avatar { inline-size: var(--size-avatar-tab-lg); block-size: var(--size-avatar-tab-lg); }
}

/* ── 展開區：代表照＋介紹，下方留言與表單 ───────────── */
.board-panel { margin-block-start: var(--space-lg); }
.board-panel.is-entering { animation: panel-enter var(--motion-duration-base) var(--motion-easing-out); }
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(var(--motion-distance-enter)); }
}

.profile {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas: "photo head" "intro intro";
  gap: var(--space-lg) var(--space-md);
  align-items: start;
  padding: var(--space-lg);
  background: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-hairline);
}
.profile-photo { grid-area: photo; }
.profile-head { grid-area: head; display: grid; gap: var(--space-xs); }
.profile-meta { align-items: baseline; }
.profile-meta .icon { align-self: center; }
.profile-intro {
  grid-area: intro;
  display: grid;
  gap: 0 var(--space-md);
  max-inline-size: var(--layout-container-reading);
}
.profile-intro dt { color: var(--color-ink-muted); }
.profile-intro dt:not(:first-child) { margin-block-start: var(--space-sm); }
@media (min-width: 40rem) {
  .profile-intro { grid-template-columns: auto minmax(0, 1fr); }
  .profile-intro dt { grid-column: 1; margin-block-start: var(--space-sm); padding-block-start: var(--space-xxs); }
  .profile-intro dd { grid-column: 2; }
  .profile-intro dt + dd { margin-block-start: var(--space-sm); }
  .profile-intro dt:first-child,
  .profile-intro dt:first-child + dd { margin-block-start: 0; }
}
@media (min-width: 48rem) {
  .profile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "photo head" "photo intro";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-xl);
  }
}
@media (min-width: 64rem) {
  .profile { padding: var(--space-xl); }
}

.board-columns {
  display: grid;
  gap: var(--space-xxl);
  margin-block-start: var(--space-xxl);
}
@media (min-width: 64rem) {
  .board-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
}
.sub-title { margin-block-end: var(--space-md); }

/* 其他人的留言：疊在同一格、只淡入淡出，高度＝最高一則；控制列在上方，換則時不會移動 */
.slides { display: grid; align-items: start; touch-action: pan-y; }
.slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-out),
              visibility 0s linear var(--motion-duration-slow);
}
.slide.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-out), visibility 0s;
}
.message-card {
  padding: var(--space-lg);
  background: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-hairline);
}
.message-body { white-space: pre-line; overflow-wrap: anywhere; }
.message-author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
  color: var(--color-ink-muted);
}
.message-author::before {
  content: "";
  flex: none;
  inline-size: var(--space-lg);
  block-size: var(--border-hairline);
  background: var(--color-decorative-wordmark);
}

.empty-state,
.error-state {
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg);
  border: var(--border-hairline) solid var(--color-hairline);
}
.empty-state .icon { color: var(--color-ink-subtle); }
.error-state {
  padding: var(--space-lg);
  background: var(--color-surface-1);
  border-color: var(--color-semantic-error);
}
.error-state .icon { color: var(--color-semantic-error); }
.error-state .btn { margin-block-start: var(--space-xs); }
.empty-title { color: var(--color-ink); }
.empty-body a,
.placeholder-body > a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-target-min);
}
.empty-body { color: var(--color-ink-muted); }

/* ── 留言表單 ──────────────────────────────── */
.form {
  display: grid;
  gap: var(--space-lg);
  max-inline-size: var(--layout-container-reading);
}
.field { display: grid; gap: var(--space-xs); }
.field-label { color: var(--color-ink); }
.field-mark { color: var(--color-ink-muted); }
.field-hint { color: var(--color-ink-muted); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--color-semantic-error);
}
.field-error .icon { margin-block-start: var(--space-xxs); }
.field-counter { color: var(--color-ink-subtle); text-align: end; }
.field-counter.is-near { color: var(--color-semantic-warning); }
.field-counter.is-over { color: var(--color-semantic-error); }

.input {
  appearance: none;
  inline-size: 100%;
  block-size: var(--size-control-height);
  padding: 0 var(--space-md);
  border: var(--border-hairline) solid var(--color-hairline-strong);
  border-radius: var(--radius-none);
  background: var(--color-surface-1);
  color: var(--color-ink);
  caret-color: var(--color-primary);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-out),
              background-color var(--motion-duration-fast) var(--motion-easing-out);
}
.textarea {
  block-size: auto;
  min-block-size: var(--size-textarea-min-height);
  padding: var(--space-sm) var(--space-md);
  resize: vertical;
}
.input::placeholder { color: var(--color-ink-subtle); }
.input:focus {
  outline: none;
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--color-primary);
}
.input[aria-invalid="true"] {
  border-color: var(--color-semantic-error);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--color-semantic-error);
}
/* 錯誤＋聚焦：紅框表示錯誤，外圈焦點環表示焦點，兩個訊號並存 */
.input[aria-invalid="true"]:focus {
  outline: var(--border-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-focus-offset);
}

/* 團契（<input list>）：原生 ▼ 透明但仍可點，上面疊 Lucide chevron-down（mask＋ink-muted），與後台 select 一致 */
.input-list { position: relative; }
.input-list .input { padding-inline-end: calc(var(--space-md) + var(--size-icon-md) + var(--space-xs)); }
.input-list .input::-webkit-calendar-picker-indicator,
.input-list .input::-webkit-list-button {
  opacity: 0;
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  margin: 0;
  margin-inline-end: calc(-1 * (var(--size-icon-md) + var(--space-xs))); /* 從 content box 末端推進 padding，正好疊在 chevron 下方 */
  cursor: pointer;
}
.input-list::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-md);
  inline-size: var(--size-icon-md);
  background: var(--color-ink-muted);
  mask: url("/assets/icons/chevron-down.svg") center / var(--size-icon-md) no-repeat;
  pointer-events: none;
}
@media (hover: hover) {
  .input:hover:not(:focus):not([aria-invalid="true"]) { border-color: var(--color-ink-muted); }
}

/* 同意勾選：方框＋文字整列可點 */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-block-size: var(--size-target-min);
  padding-block: var(--space-xs);
  color: var(--color-ink);
  cursor: pointer;
}
.check-box { display: grid; flex: none; margin-block-start: var(--space-xxs); }
.check-box > * { grid-area: 1 / 1; }
.check input {
  appearance: none;
  inline-size: var(--size-checkbox);
  block-size: var(--size-checkbox);
  margin: 0;
  border: var(--border-hairline) solid var(--color-hairline-strong);
  border-radius: var(--radius-none);
  background: var(--color-surface-1);
  cursor: pointer;
}
.check input:active { background: var(--color-surface-2); }
.check input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.check input[aria-invalid="true"] { border-color: var(--color-semantic-error); }
.check-mark { place-self: center; color: var(--color-on-primary); opacity: 0; pointer-events: none; }
.check input:checked + .check-mark { opacity: 1; }
@media (hover: hover) {
  .check:hover input:not(:checked) { border-color: var(--color-ink-muted); }
  .check:hover input:checked { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
}

.form-actions { display: grid; margin-block-start: var(--space-xs); }
.form-actions .status-error { margin-block-end: var(--space-md); }
.btn-submit { inline-size: 100%; }
@media (min-width: 48rem) {
  .btn-submit { inline-size: auto; justify-self: start; }
}

/* 行內狀態（表單結果） */
.status-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-hairline);
}
.status-inline > .icon { margin-block-start: var(--space-xxs); }
.status-success { border-color: var(--color-semantic-success); }
.status-success > .icon { color: var(--color-semantic-success); }
.status-error { border-color: var(--color-semantic-error); }
.status-error > .icon { color: var(--color-semantic-error); }
.status-title { color: var(--color-ink); }
.status-body { color: var(--color-ink-muted); }
.status-success .btn { margin-block-start: var(--space-md); }

/* ── 頁尾 ──────────────────────────────────── */
.site-footer {
  margin-block-start: var(--space-section);
  padding: var(--space-xxl) var(--layout-gutter);
  border-block-start: var(--border-hairline) solid var(--color-hairline);
  color: var(--color-ink-muted);
}
.footer-inner { display: grid; gap: var(--space-xs); }
.footer-url { font-family: var(--font-en); }
.footer-en {
  justify-content: flex-start;
  margin-block-start: var(--space-md);
  color: var(--color-ink-subtle);
}

/* ── 活動佔位頁：hero 同款底圖＋均勻遮罩 ─────────── */
.placeholder {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: var(--layout-hero-min-height);
  padding: var(--space-xxl) var(--layout-gutter);
  text-align: center;
}
.placeholder .hero-bg img { object-position: 62% 40%; }
.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-scrim-placeholder);
}
.placeholder-body {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  max-inline-size: var(--layout-container-reading);
}
.placeholder + .site-footer { margin-block-start: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-block-size: var(--size-icon-lg);
  padding: 0 var(--space-xs);
  border: var(--border-hairline) solid var(--color-hairline-strong);
  border-radius: var(--radius-none);
  color: var(--color-ink);
}
.badge-coming { border-color: var(--color-semantic-info); }
.badge-coming .icon { color: var(--color-semantic-info); }
.badge-closed { color: var(--color-ink-muted); }