/* =========================================================================
   NU Church — site shell
   ========================================================================= */

:root {
  --deep: #1b6a95;
  --ink: #13435f;
  --ink-soft: #3f6a85;
  --sky: #62b4d8;
  --pale: #e6f3f9;
  --pale-2: #f4fafd;
  --line: #06c755;
  --muted: #5d7380;
  --paper: #ffffff;
  --stage: #d9dde1;
  --radius: 20px;
  --shadow-sm: 0 2px 8px rgba(19, 67, 95, 0.06);
  --shadow-md: 0 14px 40px -18px rgba(19, 67, 95, 0.35);
  --font-sans: "Barlow", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The header is sticky (72px / 64px on small screens); without this every
   * in-page anchor lands with its title hidden underneath it. */
  scroll-padding-top: 88px;
}

@media (max-width: 860px) {
  html {
    scroll-padding-top: 76px;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.wrap {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deep);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--sky);
}

.section-title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 14px 0 0;
  color: var(--ink);
}

.section-lede {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--muted);
  font-size: 16px;
}

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(19, 67, 95, 0.08);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.brand img {
  height: 34px;
  width: auto;
  display: block;
}

/* CTF wordmark sits alongside the church logo — the mark is a wide
   wordmark (1859×348), so its height needs to be closer to cap-height
   than the square-ish church logo to keep the two visually balanced.
   Sized down to 16px: at 20px it read as a second co-equal brand next to
   the church logo, which it is not — it is a family affiliation mark. */
.brand .brand-ctf {
  height: 16px;
  opacity: 0.82;
}

.brand-sep {
  width: 1px;
  height: 18px;
  flex: none;
  background: rgba(19, 67, 95, 0.16);
}

@media (max-width: 520px) {
  .brand {
    gap: 8px;
  }
  .brand img {
    height: 26px;
  }
  .brand .brand-ctf {
    height: 13px;
  }
  .brand-sep {
    height: 15px;
  }
  /* The wider brand leaves little room beside it — keep the CTA on one
     line and shrink it so it never wraps into a two-line blob. */
  .nav .nav-cta {
    padding: 8px 11px;
    font-size: 13px;
  }
  .site-header .wrap {
    gap: 10px;
  }
}

/* Below ~460px the church logo + CTF wordmark + hamburger simply leave less
   room than the CTA's own text needs (it measured 59px tall at 390px, i.e.
   wrapped to two lines, and caused a 16px horizontal overflow at 320px).
   The CTA gives way rather than the brand: the drawer carries an identical
   「加入 LINE 好友」 button, and the hero + #line section already offer it. */
@media (max-width: 460px) {
  .nav .nav-cta {
    display: none;
  }
  .site-header .wrap {
    gap: 8px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 9px 14px;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}

.nav a:hover {
  background: var(--pale);
  color: var(--deep);
}

.nav .nav-cta {
  margin-left: 8px;
  background: var(--deep);
  color: #fff;
  font-weight: 600;
  /* Once the header is tight the CTA squeezes below its text width and wraps
     to two lines (it grew 37px → 59px tall at 390px). A nav button must never
     wrap; below 460px it is hidden entirely and the drawer carries the link. */
  white-space: nowrap;
}

.nav .nav-cta:hover {
  background: #155577;
  color: #fff;
}

/* Six nav items + the CTA stop fitting somewhere around 1080px: the pills
   shrink below their text width and every label wraps to two lines (header
   grew 41.9px → 65.8px on the way down). Tighten the pills and the brand in
   that band instead of letting them break. */
@media (min-width: 861px) and (max-width: 1080px) {
  .brand {
    gap: 9px;
  }
  .brand img {
    height: 28px;
  }
  /* Must stay below the 16px base — a breakpoint can only shrink the mark,
     never grow it, or the band looks heavier than full desktop. */
  .brand .brand-ctf {
    height: 14px;
  }
  .brand-sep {
    height: 16px;
  }
  .nav {
    gap: 2px;
  }
  .nav a {
    font-size: 13.5px;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .nav .nav-cta {
    margin-left: 5px;
    padding: 8px 12px;
  }
}

@media (max-width: 860px) {
  .nav a:not(.nav-cta) {
    display: none;
  }
  .site-header .wrap {
    height: 64px;
  }
}

/* ------------------------------------------------------------ nav drawer -- */
/* Hidden entirely above 860px, where the inline pills already do the job. */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(19, 67, 95, 0.16);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  flex: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--deep);
  transition: transform 0.2s ease, opacity 0.16s ease;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-drawer {
  display: none;
  border-top: 1px solid rgba(19, 67, 95, 0.08);
  background: #fff;
  padding: 8px 0 18px;
}

.nav-drawer nav {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  gap: 2px;
}

.nav-drawer a {
  text-decoration: none;
  padding: 12px 4px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid rgba(19, 67, 95, 0.07);
}

.nav-drawer a:active {
  color: var(--deep);
}

.nav-drawer .nav-drawer-cta {
  margin-top: 12px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }
  .nav-drawer:not([hidden]) {
    display: block;
  }
}

/* ---------------------------------------------------------- lang switch -- */
/* A pill, not a toggle: it is an <a href="/en">, so it works with JS off, it
   is crawlable, and it carries hreflang. Visually it sits beside the nav and
   is sized to the same rhythm as the nav pills so it reads as navigation
   rather than as a settings control.
 *
 * It must survive every breakpoint. Below 860px the nav pills collapse into
 * the drawer, but this one stays in the header bar: a visitor who landed on
 * the wrong language should not have to open a menu to escape it. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 13px;
  border: 1px solid rgba(19, 67, 95, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.lang-switch svg {
  flex: none;
  /* Optical alignment: the globe's stroke sits a hair high next to CJK
     ascenders, so nudge it down rather than relying on flex centring. */
  margin-top: -1px;
  opacity: 0.72;
}

.lang-switch:hover {
  border-color: rgba(19, 67, 95, 0.34);
  background: var(--pale);
  color: var(--deep);
}

.lang-switch:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 2px;
}

.lang-switch:active {
  transform: translateY(1px);
}

/* Inside the drawer it becomes a full-width row so the tap target matches the
   links above it, and the globe does not drift to the far edge. */
.nav-drawer .lang-switch {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--pale-2);
  justify-content: center;
  font-size: 14.5px;
}

@media (max-width: 520px) {
  /* The header is 64px tall here and carries brand + CTA + this pill +
     hamburger. Shave the padding and the label stays on one line at 320px. */
  .lang-switch {
    padding: 7px 10px;
    font-size: 12.5px;
    gap: 5px;
  }
  .nav-drawer .lang-switch {
    padding: 12px 16px;
    font-size: 14.5px;
  }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 92px) 0 clamp(60px, 7vw, 104px);
  /* Fallback for the frame before the poster paints, and the surface behind
     everything on browsers that refuse to decode the video at all. */
  background: radial-gradient(120% 90% at 78% 0%, #eaf6fc 0%, #ffffff 58%);
}

/* ---------------------------------------------------------- hero media -- */
/* Full-bleed water loop behind the hero copy.
 *
 * Contrast, measured rather than eyeballed. The footage is SKY-heavy and the
 * sky is bright — sampled from the clip itself:
 *     sky    rgb(113,181,238)  relative luminance 0.43
 *     water  rgb( 51,132,193)  relative luminance 0.21
 * (of a 1.0 maximum, so this is a bright image, not a moody one.)
 *
 * Against the old --ink-soft text (#3f6a85) that is 2.6:1 over sky and 1.4:1
 * over water — unreadable, which is why an early version piled on a 93–97%
 * white veil. That "fixed" the text by erasing the video: the veil was brighter
 * than the footage it covered, so the hero rendered as fog. The mistake was
 * reaching for the veil instead of darkening the type.
 *
 * So: hero body copy now uses --ink (#13435f) — 4.8:1 on raw sky, no veil
 * needed at all — and the veil only has to lift the darker water into range.
 * Measured, #13435f over water reaches 4.5:1 at ~36% white; the values below
 * run 58% → 0% so the left column clears it with margin while the right third
 * (where the opaque navy panel sits, so nothing needs covering) stays raw. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #cfe6f2;
}

/* The first frame, as real markup rather than a CSS background, so it can carry
 * the build stamp and stay in sync when the clip is replaced. It is also the
 * whole hero under `prefers-reduced-motion`, where the <video> is never
 * attached (see public/static/site.js). */
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video {
  z-index: 1;
  /* Pushed very slightly richer than source: the veil desaturates it anyway, and
     at 50% white the water needs the help to still read as water and not mist. */
  filter: saturate(1.08) contrast(1.03);
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* bottom fade, so the video does not end on a hard cut against the white
       #about section that follows. Kept to 12%: the water — the only part of
       the frame that actually moves — sits low, and a deeper ramp eats it. */
    linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 12%),
    /* the contrast wash, left (text) → right (open water). Reaches 0% by 88%,
       leaving the right edge — under the opaque navy panel — as raw footage. */
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 255, 255, 0.58) 44%,
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 88%
    );
}

/* Hero body copy runs one step darker than the rest of the page. The video is
   why: --ink-soft is 2.6:1 on the bright sky, --ink is 4.8:1 with no veil at
   all. Hierarchy is kept with size and weight instead of colour. */
.hero .hero-lead,
.hero .hero-orgs li,
.hero .hero-orgs .org-id,
.hero .hero-orgs .org-reg {
  color: var(--ink);
}

.hero .hero-orgs .org-id,
.hero .hero-orgs .org-reg {
  opacity: 0.82;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(19, 67, 95, 0.12), transparent);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero-copy h1 {
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: 0.015em;
  margin-top: 18px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero-copy h1 em {
  font-size: 0.82em;
  line-height: 1.24;
  display: inline-block;
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--deep);
}

.hero-verse {
  margin-top: 22px;
  padding-left: 18px;
  border-left: 3px solid var(--sky);
  color: var(--ink-soft);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.hero-verse cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  color: var(--sky);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-lead {
  margin-top: 24px;
  font-size: clamp(15px, 1.55vw, 17.5px);
  line-height: 2;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  max-width: 34em;
}

/* Legal entities listed directly under the church title. */
.hero-orgs {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 34em;
}

.hero-orgs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero-orgs .org-n {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  transform: translateY(-1px);
}

.hero-orgs .org-name {
  font-weight: 600;
  color: var(--ink);
}

.hero-orgs .org-id {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Registration number sits on its own line under 統一編號 — a leading dot
   separator wrapped badly on mobile and read like stray punctuation. */
.hero-orgs .org-reg {
  flex-basis: 100%;
  padding-left: 27px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ------------------------------------------------ hero vision panel -- */
.vision-panel {
  position: relative;
  width: min(400px, 100%);
  padding: 34px 32px 30px;
  border-radius: 22px;
  background: linear-gradient(165deg, #1b6a95 0%, #155577 100%);
  color: #fff;
  box-shadow: 0 26px 60px -30px rgba(19, 67, 95, 0.7);
  overflow: hidden;
}

.vision-panel::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 180, 216, 0.34) 0%, rgba(98, 180, 216, 0) 70%);
}

.vp-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: #a9daf0;
  border: 1px solid rgba(169, 218, 240, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
}

.vp-text {
  margin-top: 20px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: #fff;
}

.vp-cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #a9daf0;
}

.vp-rule {
  height: 1px;
  margin: 22px 0 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.vp-facts {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.vp-facts dt {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
}

.vp-facts dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: #bfe0ef;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------- about -- */
.about {
  padding: clamp(60px, 7vw, 100px) 0;
  background: #fff;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.about-copy p {
  margin-top: 18px;
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 2.05;
  color: var(--ink-soft);
  letter-spacing: 0.015em;
}

.about-copy .about-lead {
  margin-top: 24px;
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.95;
  font-weight: 500;
  color: var(--ink);
}

.about-aside {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 96px;
}

.about-fact {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--pale-2);
  border: 1px solid rgba(19, 67, 95, 0.08);
}

.af-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 10px;
}

.af-value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink);
}

.af-value a,
.af-meta a {
  color: inherit;
  text-decoration: none;
}

.af-value a:hover,
.af-meta a:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.af-meta {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.about-fact--quote {
  background: linear-gradient(160deg, var(--pale) 0%, #d9edf6 100%);
  border-color: rgba(27, 106, 149, 0.14);
}

.about-fact--quote p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.about-fact--quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--deep);
}

/* ------------------------------------------------------- CTF (點火事工) -- */
.ctf-block {
  margin-top: clamp(44px, 5vw, 64px);
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 22px;
  border: 1px solid rgba(19, 67, 95, 0.12);
  background: linear-gradient(158deg, #fbfaf7 0%, #f4f8fb 100%);
  box-shadow: var(--shadow-sm);
}

.ctf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  padding-bottom: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid rgba(19, 67, 95, 0.1);
}

/* The official wordmark is a wide horizontal lockup — cap it so the flame mark
 * never dominates the section on narrow screens. */
.ctf-mark {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.08);
}

.ctf-mark img {
  display: block;
  width: min(260px, 52vw);
  height: auto;
}

.ctf-title {
  flex: 1 1 240px;
  min-width: 0;
}

.ctf-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(233, 30, 99, 0.1);
  color: #c2185b;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* Once the join date has passed the wording becomes a statement of fact
   rather than an announcement, so the badge goes solid. */
.ctf-badge.is-joined {
  background: #c2185b;
  color: #fff;
}

.ctf-title h3 {
  margin: 10px 0 0;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 900;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.ctf-title h3 em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deep);
}

.ctf-body {
  padding-top: clamp(20px, 2.6vw, 28px);
  max-width: 68ch;
}

.ctf-body p {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.ctf-body p + p {
  margin-top: 14px;
}

.ctf-body .ctf-lead {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.85;
  color: var(--ink);
}

.ctf-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ctf-points li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.ctf-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
}

.ctf-link {
  margin-top: 26px;
}

@media (max-width: 620px) {
  .ctf-head {
    gap: 16px;
  }
  .ctf-mark {
    padding: 10px 12px;
  }
  .ctf-mark img {
    width: min(230px, 62vw);
  }
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-aside {
    position: static;
  }
}

/* --------------------------------------------------------- vision -- */
.vision {
  padding: clamp(60px, 7vw, 100px) 0;
  background: linear-gradient(180deg, var(--pale-2) 0%, #fff 100%);
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.mission-card {
  position: relative;
  padding: 34px 32px 36px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mission-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(98, 180, 216, 0.55);
}

.mc-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--pale);
  color: var(--deep);
}

.mc-ico svg {
  width: 25px;
  height: 25px;
}

.mc-index {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(27, 106, 149, 0.32);
}

.mission-card h3 {
  margin-top: 22px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.mission-card p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 2;
  color: var(--ink-soft);
}

.vision-quote {
  margin: 54px auto 0;
  max-width: 720px;
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(160deg, #1b6a95 0%, #155577 100%);
  color: #fff;
  box-shadow: 0 26px 60px -32px rgba(19, 67, 95, 0.72);
}

.vision-quote p {
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.1em;
}

.vision-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #a9daf0;
}

@media (max-width: 1020px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .vision-panel {
    width: 100%;
    max-width: 520px;
  }
  /* Stacked layout — and the video stops being a full-bleed background here.
   *
   * Why: a phone hero is ~735px tall on a 390px width (aspect 0.53). Cover-
   * fitting a 16:9 clip into that crop keeps only a narrow centre strip, and the
   * lower half of it — the water, the only part that moves — ends up underneath
   * the org list, the buttons and the navy panel. Add any white wash and the
   * whole thing reads as pale sky, i.e. no video at all. That is exactly what
   * shipped in the previous revision.
   *
   * So on stacked layouts the media becomes a top band sized to the footage's
   * own shape, fading out into the white the text sits on. The clip is then
   * actually visible, the copy is on near-white, and nothing has to be erased
   * to keep contrast. */
  .hero-media {
    inset: 0 0 auto 0;
    height: min(52vw, 300px);
    /* The band's lower edge dissolves instead of ending on a hard line. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  }
  .hero {
    /* Guarantees the copy clears the band even when the h1 wraps to three
       lines on a narrow phone. */
    padding-top: min(52vw, 300px);
  }
  .hero-veil {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.46) 100%
    );
  }
}

@media (max-width: 620px) {
  .hero-actions {
    gap: 10px;
  }
  .hero-actions .btn {
    padding: 12px 18px;
    font-size: 14px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .vision-panel {
    padding: 26px 22px 24px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn-primary {
  background: var(--deep);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(27, 106, 149, 0.85);
}

.btn-primary:hover {
  background: #155577;
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: rgba(19, 67, 95, 0.18);
  color: var(--ink);
  background: #fff;
}

.btn-ghost:hover {
  border-color: var(--sky);
  color: var(--deep);
  transform: translateY(-1px);
}

.btn-line {
  background: var(--line);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(6, 199, 85, 0.9);
}

.btn-line:hover {
  background: #05b34c;
  transform: translateY(-1px);
}

.hero-art {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  transform-origin: top center;
  max-width: 100%;
}

@media (max-width: 1020px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hero-art {
    gap: 12px;
    flex-wrap: wrap;
  }
  /* one card is enough on phones — the pair lives in the showcase section */
  .hero-art .card-slot + .card-slot {
    display: none;
  }
  .hero-actions {
    gap: 10px;
  }
  .hero-actions .btn {
    padding: 12px 18px;
    font-size: 14px;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* -------------------------------------------------------------- showcase -- */
.showcase {
  padding: clamp(56px, 6vw, 88px) 0 clamp(60px, 6vw, 92px);
  background: var(--stage);
}

.showcase .section-lede {
  color: #546a76;
}

.showcase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.showcase-head .eyebrow {
  color: #4a6b7c;
}

.showcase-head .eyebrow::before {
  background: #8fa4b0;
}

.showcase-head .section-title {
  color: #12384f;
}

.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #3d5a6a;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(19, 67, 95, 0.12);
  padding: 7px 13px;
  border-radius: 999px;
}

.card-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 6vw, 60px);
  margin-top: clamp(36px, 4vw, 56px);
}

.card-pair .card-tag {
  color: #5b6d78;
}

/* ------------------------------------------------------------- schedule -- */
.schedule {
  padding: clamp(60px, 7vw, 100px) 0;
  background: #fff;
}

.sched-table-wrap {
  margin-top: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(19, 67, 95, 0.12);
  box-shadow: var(--shadow-sm);
  background: #fff;
}

.sched-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.sched-table thead th {
  background: linear-gradient(180deg, #e8f4fa 0%, #dceff8 100%);
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: left;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(19, 67, 95, 0.14);
  white-space: nowrap;
}

.sched-table tbody td,
.sched-table tbody th {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(19, 67, 95, 0.08);
  vertical-align: middle;
  text-align: left;
}

.sched-table tbody tr:last-child td,
.sched-table tbody tr:last-child th {
  border-bottom: 0;
}

.sched-table tbody tr:hover {
  background: var(--pale-2);
}

.sched-day {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  background: rgba(230, 243, 249, 0.45);
  border-right: 1px solid rgba(19, 67, 95, 0.08);
  width: 1%;
}

.sched-time {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.sched-name {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
}

/* Channel tag — 線上 / 現場 / 活動中心. */
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
  white-space: nowrap;
  vertical-align: middle;
}

.tag-online {
  background: rgba(98, 180, 216, 0.16);
  color: #1b6a95;
}

.tag-onsite {
  background: rgba(19, 67, 95, 0.09);
  color: var(--ink);
}

.tag-venue {
  background: rgba(217, 119, 6, 0.12);
  color: #a15c00;
}

.sched-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

.sched-legend .tag {
  margin-left: 0;
}

.sched-legend .tag + span {
  margin-right: 10px;
}

/* Mobile card list — hidden until the 4-column table stops fitting. */
.sched-cards {
  display: none;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  gap: 12px;
}

.sched-card {
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: 16px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sc-day {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sky);
}

.sc-head .tag {
  margin-left: 0;
}

.sc-name {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

.sc-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .sched-table-wrap {
    display: none;
  }
  .sched-cards {
    display: grid;
  }
  .sched-legend {
    margin-top: 24px;
  }
}
/* ---------------------------------------------------------------- gather -- */
/* One unit for 「空間實況 → 聚會時間 → 聯絡資訊」. They used to be three
 * separate full-width sections; the two inner blocks keep #schedule / #contact
 * as ids so every existing deep link and the mobile quickbar still land. */
.gather {
  padding: clamp(60px, 7vw, 100px) 0;
  background: #fff;
}

/* Real photos of the venue and the gatherings. Files are 1000px wide; the
 * `is-16x9` / `is-4x3` classes carry the source ratio so nothing is cropped,
 * and mixed ratios are fine because each tile sizes itself. */
.photo-grid {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

.photo-item {
  min-width: 0;
}

.photo-item.is-wide {
  grid-column: 1 / -1;
}

.photo-item figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.photo-item picture {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pale-2);
}

/* Source ratios differ (16:9 group shot, 4:3 candid frames). Cropping a 4:3
   photo to 16:9 would cut heads on the top row, so each tile keeps its own
   shape instead of being forced into one grid rhythm. */
.photo-item.is-16x9 picture {
  aspect-ratio: 16 / 9;
}

.photo-item.is-4x3 picture {
  aspect-ratio: 4 / 3;
}

/* The pull shot is a panorama of the sugar-warehouse window, so it gets a
   letterbox crop — the middle band (grass, trees, the elevated railway) is
   the whole point, and 21:9 keeps it from eating half the viewport. */
.photo-item.is-panorama picture {
  aspect-ratio: 21 / 9;
}

.photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.photo-item figure:hover img {
  transform: scale(1.025);
}

.photo-item figcaption {
  padding: 14px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.photo-item figcaption strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.photo-item figcaption span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.life-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.life-note a {
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 106, 149, 0.35);
  padding-bottom: 1px;
}

.life-note a:hover {
  border-color: var(--deep);
}

/* The grid is built from runs of three supporting shots between the two
 * full-width leads (3 / 3), which is perfect at three columns. At two columns
 * each run becomes a pair plus one left-over tile sitting in a half-width
 * hole — so the tile flagged `is-full2` takes the whole row instead. The
 * dataset supplies that flag; `:last-child` covers the final run. */
@media (max-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-item.is-full2,
  .photo-item:last-child {
    grid-column: 1 / -1;
  }
  .photo-item.is-wide picture {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 620px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
  .photo-item.is-full2,
  .photo-item:last-child {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------------- assoc -- */
/* Two legal entities, one card each. The registration label differs per entity
 * (立案證書字號 = 6 chars vs 高市立案編號 = 6 chars) so the label column is
 * `auto` — grid sizes it to the widest label and every row still lines up. */
.assoc-sec {
  padding: clamp(60px, 7vw, 100px) 0;
  background: var(--pale-2);
}

.assoc-grid {
  display: grid;
  /* `minmax(320px, ...)` forces a 320px min track, which overflows the 288px
     wrap on a 320px-wide phone. Clamp the min against the container. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 44px;
}

.assoc-card {
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
}

.assoc-card header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(19, 67, 95, 0.1);
}

.assoc-n {
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sky);
  flex: none;
}

.assoc-card h3 {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.assoc-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 18px;
  margin: 20px 0 0;
  align-items: baseline;
}

/* Each row is its own wrapper div so the dt/dd pair can be re-flowed to a
   stacked layout on narrow screens without touching the grid definition. */
.assoc-card .ar {
  display: contents;
}

.assoc-card dt {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

.assoc-card dd {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* The registration number is the number people copy onto forms — give it the
   weight and tracking of a reference figure, not body text. */
.assoc-card dd.reg {
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--deep);
}

.assoc-card dd.addr {
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.assoc-note {
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

@media (max-width: 460px) {
  /* `display: contents` collapses the row wrappers, so a 2-column grid would
   * still squeeze the 6-char label next to a long address. Stack instead. */
  .assoc-card dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .assoc-card dt {
    margin-top: 10px;
  }
  /* The row wrappers use `display: contents`, so the first *visible* child is
     the dt inside the first .ar — not a direct child of dl. */
  .assoc-card .ar:first-child dt {
    margin-top: 0;
  }
}

/* Numbered sub-blocks inside the merged 空間／聚會／聯絡 unit. Each one is a
 * full section in its own right, so it keeps a hairline separator and its own
 * heading instead of running the photo grid straight into the table. */
.gather-block {
  margin-top: clamp(48px, 6vw, 78px);
  padding-top: clamp(38px, 5vw, 58px);
  border-top: 1px solid rgba(19, 67, 95, 0.1);
  scroll-margin-top: 88px;
}

@media (max-width: 860px) {
  .gather-block {
    scroll-margin-top: 76px;
  }
}

.gb-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.gb-index {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sky);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}

.gb-title {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink);
}

.gb-lede {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.info-card {
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(98, 180, 216, 0.5);
}

.info-card h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 14px;
}

.info-card .value {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  word-break: break-word;
}

.info-card .value.small {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.info-card .meta {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.info-card a.value {
  text-decoration: none;
  display: inline-block;
}

.info-card a.value:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.map-frame {
  margin-top: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(19, 67, 95, 0.12);
  box-shadow: var(--shadow-sm);
  background: var(--pale-2);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

.map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.map-foot p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.map-foot .btn {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- social -- */
/* 線上聚會與社群 — sits directly under the merged unit, so it inherits the
 * pale band background instead of opening a third white section. */
.social-sec {
  padding: clamp(52px, 6vw, 84px) 0 clamp(60px, 7vw, 100px);
  background: var(--pale-2);
}

.social-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.social-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--pale-2);
  border: 1px solid rgba(19, 67, 95, 0.08);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.social-card:hover {
  background: var(--pale);
  transform: translateY(-2px);
}

.social-card .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--shadow-sm);
}

.social-card .ico svg {
  width: 22px;
  height: 22px;
}

.social-card .txt strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}

.social-card .txt span {
  font-size: 13px;
  color: var(--muted);
}

/* --------------------------------------------------------------- giving -- */
.giving {
  padding: clamp(60px, 7vw, 96px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--pale-2) 55%, var(--pale) 100%);
}

.giving-panel {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  box-shadow: var(--shadow-md);
}

.giving-rows {
  padding: clamp(26px, 3.4vw, 40px);
}

.giving-rows dl {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px 16px;
  align-items: baseline;
}

.giving-rows dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.14em;
}

.giving-rows dd {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.6;
}

.giving-rows dd.account {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--deep);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.copy-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--deep);
  background: var(--pale);
  border: 1px solid rgba(27, 106, 149, 0.2);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.copy-btn:hover {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}

.copy-btn.done {
  background: var(--line);
  border-color: var(--line);
  color: #fff;
}

.giving-side {
  padding: clamp(26px, 3.4vw, 40px);
  background: linear-gradient(165deg, var(--deep) 0%, #155577 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.giving-side h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.giving-side p {
  font-size: 14px;
  color: #bfe0ef;
  line-height: 1.8;
}

.tax-list {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.tax-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: 14px;
}

.tax-item .nm {
  font-size: 15.5px;
  font-weight: 500;
}

/* Two stacked figures: 統一編號 (the big one, used for receipts) and the
   registration number beneath it. */
.tax-item .ids {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

.tax-item .id,
.tax-item .reg {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
  display: block;
}

.tax-item .reg {
  letter-spacing: 0.02em;
  padding-top: 7px;
  border-top: 1px solid rgba(19, 67, 95, 0.1);
}

.tax-item .id b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--deep);
  margin-top: 2px;
}

.tax-item .reg b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 840px) {
  .giving-panel {
    grid-template-columns: 1fr;
  }
  .tax-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .tax-item .ids {
    text-align: left;
    width: 100%;
  }
}

/* ----------------------------------------------------------------- line -- */
.line-cta {
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--stage);
}

.line-cta .panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: #fff;
  border-radius: 26px;
  padding: clamp(26px, 4vw, 52px);
  box-shadow: var(--shadow-md);
}

.line-qr-box {
  width: 190px;
  height: 190px;
  flex: none;
  border-radius: 20px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  box-shadow: 0 0.3mm 1.6mm rgba(19, 67, 95, 0.14);
}

.line-qr-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.line-cta h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  color: var(--line);
  letter-spacing: 0.04em;
}

.line-cta .sub {
  margin-top: 8px;
  font-size: 14.5px;
  letter-spacing: 0.28em;
  color: var(--muted);
  font-weight: 500;
}

.line-cta p.body {
  margin: 20px 0 26px;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 46ch;
}

@media (max-width: 720px) {
  .line-cta .panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------- footer -- */
.site-footer {
  background: #12384f;
  color: #c9e3ef;
  padding: clamp(48px, 5vw, 68px) 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}

.footer-grid h4 {
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0 0 14px;
  font-weight: 700;
}

.footer-grid p,
.footer-grid a {
  font-size: 14px;
  line-height: 1.9;
  color: #c9e3ef;
  text-decoration: none;
}

.footer-grid a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-brand img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  margin-bottom: 16px;
}

.footer-brand p {
  max-width: 34ch;
  color: #9dc4d6;
}

.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: #8fb6c8;
  letter-spacing: 0.06em;
}

/* The privacy link sits between the copyright and the credit. On narrow
   phones the three items wrap; without this the link loses its underline
   affordance against the muted footer text and reads as plain copy. */
.footer-legal a {
  color: #c9e3ef;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201, 227, 239, 0.4);
}

.footer-legal a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* The drawer carries a legal link too — it is the only place a phone visitor
   can reach /privacy from the navigation, since the footer sits below an
   ~11000px page. */
.nav-drawer-legal {
  color: var(--muted) !important;
  font-size: 13.5px !important;
  border-top: 1px solid rgba(19, 67, 95, 0.08);
  margin-top: 6px;
  padding-top: 14px !important;
}

.footer-credit a {
  color: #a9daf0;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 218, 240, 0.4);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.footer-credit a:hover {
  color: #fff;
  border-color: #fff;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .wrap {
    width: min(1180px, 100% - 32px);
  }
}

/* ------------------------------------------------------------- quickbar -- */
/* Mobile-only shortcut bar. The header hides its anchors below 860px, so the
   four things a phone visitor actually wants (when / where / give / LINE) get
   a persistent thumb-reachable row instead of two taps through a drawer. */
.quickbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid rgba(19, 67, 95, 0.1);
  box-shadow: 0 -6px 22px -14px rgba(19, 67, 95, 0.5);
  /* iOS home-indicator area — without this the labels sit under the bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.quickbar a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 2px 8px;
  text-decoration: none;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}

.quickbar a svg {
  width: 21px;
  height: 21px;
  flex: none;
}

.quickbar a:active {
  color: var(--deep);
  background: var(--pale);
}

/* The LINE entry is the one real conversion — give it the brand colour so it
   reads as the primary action rather than a fourth equal tab. */
.quickbar .qb-cta {
  color: var(--line);
}

.quickbar .qb-cta:active {
  color: var(--line);
  background: rgba(6, 199, 85, 0.08);
}

/* `screen` is not decoration here: the print page is 55mm wide (≈208px), which
   also satisfies `max-width: 860px`. Without the media-type guard a real print
   would inherit 58px of bottom padding and could spill a blank third page onto
   the 2-page business card sheet. */
@media screen and (max-width: 860px) {
  .quickbar {
    display: flex;
  }
  /* Reserve the bar's height so it never covers the footer's last lines.
     The bar measures 56.4px (9+8 padding + 21 icon + 3 gap + ~15 text), so
     56px left the footer's last 0.4px tucked under it — 58px clears it. */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------- utilities -- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
  /* Drop the moving layer entirely rather than freezing it: a paused <video>
     still decodes frames and still downloads the file. Hiding it returns the
     hero to the <img class="hero-poster"> underneath, which is the clip's own
     first frame — so the visitor gets the identical image for 1 MB less. */
  .hero-video {
    display: none;
  }
}

/* ------------------------------------------------------------------ faq -- */
/* The AEO block. Written as <details>/<summary> so the answer text is always
   in the DOM — a crawler and an LLM read it without executing JavaScript and
   without clicking. The markup is native disclosure, so it also works with
   script disabled and needs no JS of its own.
   The same sentences are emitted as FAQPage JSON-LD from src/seo.ts (one
   data source, src/seo.ts `faqs`), which is why the copy here must never be
   paraphrased in the template. */
.faq {
  padding: clamp(60px, 7vw, 100px) 0;
  background: #fff;
}

.faq-list {
  margin-top: 40px;
  border-top: 1px solid rgba(19, 67, 95, 0.12);
}

.faq-item {
  border-bottom: 1px solid rgba(19, 67, 95, 0.12);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

/* Hide the UA triangle in every engine; we draw our own +/- marker. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  width: 24px;
  text-align: center;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--deep);
  transition: transform 0.18s ease;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 2px;
  border-radius: 8px;
}

.faq-a {
  padding: 0 4px 24px;
  max-width: 78ch;
  color: var(--muted);
  line-height: 1.95;
  font-size: 15.5px;
}

.faq-a a {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The answer must stay legible when a reader jumps straight to it from a
   search result snippet; keep the first line visible instead of a wall. */
.faq-foot {
  margin-top: 34px;
  font-size: 14.5px;
  color: var(--muted);
}

@media (max-width: 620px) {
  .faq-item summary {
    padding: 18px 2px;
  }
  .faq-a {
    padding: 0 2px 20px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------- legal -- */
/* /privacy. A 13-section legal document is the one page on this site that is
   read rather than scanned, so it gets a narrower measure (68ch), a sticky-ish
   table of contents, and generous line-height. Everything here is scoped to
   `.legal` so it cannot leak into the marketing sections. */
.legal {
  padding: clamp(40px, 5vw, 64px) 0 clamp(60px, 7vw, 96px);
  background: #fff;
}

.legal-crumb {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.legal-crumb a {
  color: var(--deep);
  text-decoration: none;
}

.legal-crumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-crumb span[aria-hidden] {
  margin: 0 6px;
  opacity: 0.5;
}

.legal-head {
  margin-top: 22px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(19, 67, 95, 0.12);
}

.legal-head h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 14px 0 0;
}

.legal-lede {
  margin-top: 16px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.95;
}

.legal-meta {
  margin-top: 18px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #8199a5;
}

/* -- table of contents -- */
.legal-toc {
  margin-top: 36px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--pale-2);
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: var(--radius);
}

.legal-toc h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 16px;
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2px 26px;
  counter-reset: toc;
}

.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(19, 67, 95, 0.13);
}

.legal-toc a:hover {
  color: var(--deep);
}

.legal-toc a:hover .toc-no {
  background: var(--deep);
  color: #fff;
}

.toc-no {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--pale);
  color: var(--deep);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.16s ease, color 0.16s ease;
}

/* -- body -- */
.legal-body {
  margin-top: 46px;
  max-width: 72ch;
}

.legal-body section {
  padding: 30px 0;
  border-bottom: 1px solid rgba(19, 67, 95, 0.09);
  /* The header nav is sticky; without this an in-page jump from the TOC lands
     with the heading hidden underneath it. */
  scroll-margin-top: 92px;
}

.legal-body section:last-child {
  border-bottom: 0;
}

.legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}

.sec-no {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--pale);
  color: var(--deep);
  font-size: 14px;
  font-weight: 700;
}

.legal-body p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 2;
  color: #3d5764;
}

.legal-body p:last-child {
  margin-bottom: 0;
}

.legal-body b {
  color: var(--ink);
  font-weight: 700;
}

.legal-body a {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal-body ul {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.legal-body ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 2;
  color: #3d5764;
}

.legal-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.92em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
}

/* -- definition lists (個資法 §8 告知事項、聯絡資訊) -- */
.legal-dl {
  margin: 20px 0;
  border: 1px solid rgba(19, 67, 95, 0.12);
  border-radius: 14px;
  overflow: hidden;
}

.legal-dl > div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(19, 67, 95, 0.08);
}

.legal-dl > div:last-child {
  border-bottom: 0;
}

.legal-dl > div:nth-child(odd) {
  background: var(--pale-2);
}

.legal-dl dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--deep);
  line-height: 1.9;
}

.legal-dl dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: #3d5764;
}

.legal-dl dd a {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-note {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed rgba(19, 67, 95, 0.18);
  font-size: 13.5px;
  color: #8199a5;
  letter-spacing: 0.03em;
}

/* The mobile quick bar is hidden on this page (it links to home anchors that
   do not exist here), so drop the 58px body reservation it implies. */
@media (max-width: 860px) {
  .legal-dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .legal-body section {
    scroll-margin-top: 80px;
  }
}

/* ----------------------------------------------------------------- gbp -- */
/* /gbp is an internal workbench: a colleague sits in business.google.com with
   this page open on a phone, copying one field at a time. So the page is built
   around legibility of long Chinese strings and a copy button that is physically
   big enough for a thumb. Everything is scoped to `.gbp` — none of it may leak
   into the marketing sections, and `.legal-crumb` is reused read-only. */
.gbp {
  padding: clamp(28px, 4vw, 52px) 0 clamp(48px, 6vw, 80px);
  background: var(--pale-2);
}

.gbp-head {
  margin: clamp(18px, 3vw, 30px) 0 clamp(26px, 3.5vw, 40px);
  padding-bottom: clamp(20px, 3vw, 30px);
  border-bottom: 2px solid rgba(27, 106, 149, 0.16);
}

.gbp-head h1 {
  margin-top: 10px;
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink);
}

/* Second line of the h1 — the "工作台" part reads as a subtitle so the page
   still says what it is in the tab title and in the h1's accessible name. */
.gbp-head h1 span {
  display: block;
  margin-top: 6px;
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--deep);
}

.gbp-lede {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.9;
  color: #3d5764;
}

.gbp-lede + .gbp-lede {
  margin-top: 10px;
}

.gbp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.gbp-meta a {
  color: var(--deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gbp-sec {
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(20px, 3vw, 30px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.gbp-sec > h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.gbp-sub {
  margin-top: 10px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: #4a6572;
}

.gbp-h3 {
  margin-top: 30px;
  font-size: 17px;
  font-weight: 700;
  color: var(--deep);
}

/* --------------------------------------------------------------- audit -- */
.gbp-audit {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: rgba(19, 67, 95, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.gbp-audit li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
  padding: 13px 16px;
  background: #fff;
  font-size: 14px;
}

.gbp-audit li b {
  color: var(--ink);
  font-weight: 700;
}

.gbp-audit .gbp-note {
  grid-column: 2;
  color: #5c7684;
  font-size: 13.5px;
  line-height: 1.7;
}

.gbp-flag {
  justify-self: start;
  padding: 2px 9px;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  white-space: nowrap;
  color: #0f6b4f;
  background: #e3f6ed;
}

.is-check .gbp-flag {
  color: #8a5a00;
  background: #fdf1d8;
}

.gbp-flag.bad {
  color: #96322a;
  background: #fdeaea;
}

/* ---------------------------------------------------------------- table -- */
/* Only used for the NAP comparison, which is a 3-column fact table — a real
   <table> so it stays a table for screen readers. Phones get a horizontal
   scroll rather than a re-flowed layout: the columns are short and stacking
   them makes the comparison (the whole point) impossible to read. */
.gbp-table {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid rgba(19, 67, 95, 0.12);
  border-radius: 12px;
}

.gbp-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 560px;
}

.gbp-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--deep);
  white-space: nowrap;
}

.gbp-table td {
  padding: 12px 14px;
  vertical-align: top;
  line-height: 1.7;
  color: #3d5764;
  border-top: 1px solid rgba(19, 67, 95, 0.1);
}

.gbp-table tbody tr:nth-child(even) td {
  background: #fafcfe;
}

.gbp-table code {
  font-family: "Barlow", ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink);
  background: var(--pale);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.gbp-table .gbp-note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #6b8593;
}

/* -------------------------------------------------------------- groups -- */
.gbp-group {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(19, 67, 95, 0.12);
}

.gbp-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.gbp-ghead {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.gbp-no {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.gbp-ghead h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--deep);
  letter-spacing: 0.02em;
}

.gbp-ghead p {
  margin-top: 6px;
  max-width: 64ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: #5c7684;
}

/* --------------------------------------------------------------- field -- */
.gbp-field {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--pale-2);
  border: 1px solid rgba(19, 106, 149, 0.14);
  border-left: 3px solid var(--sky);
  border-radius: 10px;
}

.gbp-flabel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gbp-flabel h4 {
  margin: 0;
  margin-right: auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.gbp-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.gbp-count.over {
  color: #b3261e;
}

.gbp-copy {
  flex: none;
}

/* The value itself. `pre` because the schedule and the field lists carry
   intentional newlines that must survive the copy — a <p> would collapse them
   into one run-on line and the paste would be unreadable in the GBP form. */
.gbp-val {
  margin: 12px 0 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.1);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gbp-val--line {
  font-weight: 600;
}

.gbp-hint {
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.8;
  color: #5c7684;
}

.gbp-hint code {
  font-family: "Barlow", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--deep);
  background: var(--pale);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.gbp-hint .gbp-copy,
.gbp-hint .copy-btn {
  margin-left: 6px;
  vertical-align: middle;
}

/* The violation box. Red is used nowhere else on this site, so it reads as a
   hard stop rather than decoration — these are the entries that get a business
   suspended, not stylistic advice. */
.gbp-warn {
  margin-top: 11px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.8;
  color: #7d2b25;
  background: #fdeeec;
  border-radius: 8px;
}

.gbp-warn b {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: #b3261e;
  border-radius: 4px;
}

/* --------------------------------------------------------------- posts -- */
.gbp-post {
  margin-top: 22px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.14);
  border-radius: 12px;
}

.gbp-post > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gbp-post h3 {
  margin-right: auto;
  font-size: 16px;
  font-weight: 800;
  color: var(--deep);
}

/* ------------------------------------------------------------ callouts -- */
.gbp-callout {
  margin-top: 22px;
  padding: 15px 18px;
  background: var(--pale);
  border-radius: 10px;
  border-left: 3px solid var(--deep);
}

.gbp-callout > b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--deep);
}

.gbp-callout p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #3d5764;
}

.gbp-callout--warn {
  background: #fdeeec;
  border-left-color: #b3261e;
}

.gbp-callout--warn > b {
  color: #96322a;
}

.gbp-callout ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.gbp-callout ul li {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #7d2b25;
}

/* --------------------------------------------------------------- steps -- */
.gbp-steps {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: gbpstep;
  display: grid;
  gap: 10px;
}

.gbp-steps li {
  counter-increment: gbpstep;
}

.gbp-steps label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 15px;
  background: #fff;
  border: 1px solid rgba(19, 67, 95, 0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.gbp-steps label:hover {
  background: var(--pale-2);
}

/* A real checkbox, sized up: this is ticked on a phone, one-handed, while
   holding the other hand at a doorway recording a verification video. */
.gbp-steps input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--deep);
  cursor: pointer;
}

.gbp-steps span {
  font-size: 14px;
  line-height: 1.8;
  color: #3d5764;
}

.gbp-steps span::before {
  content: counter(gbpstep) ".";
  margin-right: 7px;
  font-weight: 700;
  color: var(--deep);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- check -- */
.gbp-check {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.gbp-check li {
  padding: 12px 16px;
  background: #fff;
  border-left: 3px solid var(--sky);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: #3d5764;
}

/* ---------------------------------------------------------------- foot -- */
.gbp-foot {
  margin-top: clamp(26px, 3.5vw, 40px);
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5c7684;
}

.gbp-foot a {
  color: var(--deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .gbp-sec {
    padding: 18px 15px;
  }
  .gbp-field {
    padding: 14px 13px;
  }
  /* The audit grid's 96px flag column squeezes the note on a 390px screen. */
  .gbp-audit li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .gbp-audit .gbp-note {
    grid-column: 1;
  }
  .gbp-flabel h4 {
    width: 100%;
    margin-right: 0;
  }
}