/* ============================================
   佳音基督教會 Gospel Chinese Christian Church
   Preview redesign — solemn modern
   ============================================ */
:root {
  --navy: #1e2a3a;
  --navy-deep: #141d29;
  --navy-soft: #2c3c52;
  --gold: #a8842c;
  --gold-bright: #c9a961;
  --gold-pale: #e9dcc0;
  --cream: #f7f4ee;
  --paper: #fffdf9;
  --text: #33383f;
  --muted: #707781;
  --line: #e3ddd2;
  --serif: "Noto Serif TC", "Songti TC", "SimSun", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--cream);
  line-height: 1.85;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--navy); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.topbar {
  background: var(--navy-deep);
  color: #cfd6df;
  font-size: 13px;
  padding: 6px 0;
}
.topbar .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.topbar a { color: var(--gold-bright); }
.topbar span + span { margin-left: 18px; }

header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 253, 249, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand .mark {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
}
.brand .mark svg { width: 22px; height: 22px; }
.brand .name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: 4px; line-height: 1.3; }
.brand .en { font-size: 10.5px; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }

nav.main ul { display: flex; list-style: none; gap: 4px; align-items: center; }
nav.main a {
  display: block; padding: 8px 13px;
  color: var(--navy); font-size: 15.5px;
  border-bottom: 2px solid transparent;
}
nav.main a:hover { color: var(--gold); }
nav.main a.active { color: var(--gold); border-bottom-color: var(--gold); }
nav.main a.give {
  border: 1px solid var(--gold); border-radius: 3px;
  color: var(--gold); margin-left: 10px; padding: 6px 16px;
}
nav.main a.give:hover { background: var(--gold); color: #fff; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; color: var(--navy);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background-size: cover; background-position: center 30%;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,29,41,.55) 0%, rgba(20,29,41,.62) 60%, rgba(20,29,41,.78) 100%);
}
.hero .inner { position: relative; padding: 90px 24px; max-width: 800px; }
.hero .kicker {
  font-size: 14px; letter-spacing: 6px; color: var(--gold-bright);
  margin-bottom: 18px;
}
.hero .kicker::before, .hero .kicker::after {
  content: ""; display: inline-block; width: 36px; height: 1px;
  background: var(--gold-bright); vertical-align: middle; margin: 0 14px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(38px, 6vw, 60px); letter-spacing: 10px;
  margin-bottom: 8px;
}
.hero .hero-en { font-size: 14px; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 30px; }
.hero .verse { font-family: var(--serif); font-size: clamp(16px, 2.2vw, 20px); color: rgba(255,255,255,.92); margin-bottom: 8px; }
.hero .verse-ref { font-size: 13.5px; color: var(--gold-bright); letter-spacing: 2px; margin-bottom: 40px; }
.btn {
  display: inline-block; padding: 13px 34px; font-size: 15.5px;
  letter-spacing: 3px; border-radius: 3px; transition: all .25s;
}
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-bright); color: #fff; }
.btn-outline { border: 1px solid rgba(255,255,255,.7); color: #fff; margin-left: 14px; }
.btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-outline-dark { border: 1px solid var(--gold); color: var(--gold); }
.btn-outline-dark:hover { background: var(--gold); color: #fff; }

/* ---------- Info strip ---------- */
.info-strip { background: var(--navy); color: #e8e4da; }
.info-strip .container {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 0 24px;
}
.info-cell { padding: 34px 28px; display: flex; gap: 18px; align-items: flex-start; }
.info-cell + .info-cell { border-left: 1px solid rgba(255,255,255,.08); }
.info-cell .ico { color: var(--gold-bright); flex: none; margin-top: 5px; }
.info-cell .ico svg { width: 26px; height: 26px; }
.info-cell h3 { font-family: var(--serif); font-size: 17px; color: #fff; letter-spacing: 2px; margin-bottom: 6px; }
.info-cell p { font-size: 14.5px; line-height: 1.9; color: #c3cad4; }
.info-cell a { color: var(--gold-bright); }

/* ---------- Sections ---------- */
section.block { padding: 84px 0; }
section.block.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head .en { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.sec-head h2 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 34px); color: var(--navy); letter-spacing: 6px; font-weight: 700; }
.sec-head .rule { width: 56px; height: 2px; background: var(--gold); margin: 18px auto 0; position: relative; }
.sec-head .rule::before, .sec-head .rule::after {
  content: ""; position: absolute; top: 0; width: 6px; height: 2px; background: var(--gold-pale);
}
.sec-head .rule::before { left: -12px; } .sec-head .rule::after { right: -12px; }
.sec-head p.lead { max-width: 640px; margin: 20px auto 0; color: var(--muted); font-size: 15.5px; }

/* ---------- Welcome split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .photo { position: relative; }
.split .photo .frame {
  overflow: hidden; border-radius: 4px;
  box-shadow: 0 18px 44px rgba(20,29,41,.18);
  aspect-ratio: 4 / 3;
}
.split .photo .frame img { width: 100%; height: 100%; object-fit: cover; }
.split .photo::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-pale); border-radius: 4px; z-index: -1;
}
.split h2 { font-family: var(--serif); font-size: 30px; color: var(--navy); letter-spacing: 4px; margin-bottom: 6px; }
.split .en { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.split p { margin-bottom: 16px; color: #4a5058; }
.split .more { letter-spacing: 2px; font-size: 15px; }
.split .more::after { content: " →"; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
/* the news row shows three; as a class so the breakpoints below can override
   it — as an inline style it beat every media query and stayed 3-up on phones */
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(20,29,41,.12); }
.card .thumb { aspect-ratio: 3 / 2; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .thumb img { transform: scale(1.05); }
.card .body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-family: var(--serif); font-size: 19px; letter-spacing: 3px; color: var(--navy); margin-bottom: 10px; }
.card h3::after { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-top: 10px; }
.card p { font-size: 14.5px; color: #555b63; flex: 1; }
.card .meta { font-size: 13px; color: var(--gold); letter-spacing: 1px; margin-top: 14px; }

/* ---------- Quote band ---------- */
.quote-band {
  background: var(--navy) url() center/cover;
  position: relative; color: #fff; text-align: center; padding: 90px 24px;
}
.quote-band::before { content: ""; position: absolute; inset: 0; background: rgba(20,29,41,.82); }
.quote-band > div { position: relative; max-width: 760px; margin: 0 auto; }
.quote-band .q { font-family: var(--serif); font-size: clamp(19px, 2.8vw, 25px); line-height: 2.1; letter-spacing: 2px; }
.quote-band .ref { margin-top: 22px; color: var(--gold-bright); letter-spacing: 3px; font-size: 14px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--navy); color: #fff; text-align: center;
  padding: 74px 24px 66px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(168,132,44,.22), transparent 60%);
}
.page-hero .en { position: relative; font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 12px; }
.page-hero h1 { position: relative; font-family: var(--serif); font-size: clamp(28px, 4vw, 38px); letter-spacing: 8px; font-weight: 700; }
.page-hero p.sub { position: relative; margin-top: 14px; color: #b9c2ce; font-size: 15px; }

/* ---------- About page ---------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose p { margin-bottom: 20px; color: #454b53; font-size: 16px; }
.prose .first-letter { font-family: var(--serif); }
.milestone {
  display: flex; gap: 22px; margin-bottom: 8px;
}
.pullquote {
  border-left: 3px solid var(--gold); background: var(--paper);
  padding: 26px 30px; margin: 34px 0; font-family: var(--serif);
  color: var(--navy); font-size: 17.5px; letter-spacing: 1px;
}
.pullquote .ref { display: block; margin-top: 10px; font-size: 13.5px; color: var(--gold); font-family: var(--sans); letter-spacing: 2px; }

.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 880px; margin: 0 auto; }
.value-item {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start;
}
.value-item .num {
  font-family: var(--serif); font-size: 26px; color: var(--gold-pale);
  font-weight: 700; line-height: 1; flex: none; margin-top: 4px;
}
.value-item h4 { font-family: var(--serif); font-size: 17.5px; color: var(--navy); letter-spacing: 2px; margin-bottom: 6px; }
.value-item p { font-size: 14.5px; color: #565c64; }

.beliefs { max-width: 820px; margin: 0 auto; counter-reset: belief; list-style: none; }
.beliefs li {
  position: relative; padding: 26px 28px 26px 84px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  margin-bottom: 16px; counter-increment: belief;
}
.beliefs li::before {
  content: counter(belief, cjk-ideographic);
  position: absolute; left: 26px; top: 24px;
  font-family: var(--serif); font-size: 22px; color: var(--gold);
  border: 1px solid var(--gold-pale); border-radius: 50%;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.beliefs li p { color: #454b53; font-size: 15.5px; }

/* ---------- Sermons ---------- */
.latest-sermon {
  display: grid; grid-template-columns: 3fr 2fr; gap: 44px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 36px; margin-bottom: 60px;
}
.video-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.latest-sermon .tag { font-size: 12px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 12px; }
.latest-sermon h3 { font-family: var(--serif); font-size: 24px; color: var(--navy); letter-spacing: 2px; margin-bottom: 10px; }
.latest-sermon .who { color: var(--muted); font-size: 15px; margin-bottom: 22px; }

.acc { max-width: 880px; margin: 0 auto; }
.acc-item { background: #fff; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 14px; overflow: hidden; }
.acc-head {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 20px 26px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif); font-size: 18px; color: var(--navy); letter-spacing: 2px;
}
.acc-head .count { font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.acc-head .chev { transition: transform .3s; color: var(--gold); flex: none; margin-left: 16px; }
.acc-item.open .chev { transform: rotate(180deg); }
.acc-body { display: none; border-top: 1px solid var(--line); }
.acc-item.open .acc-body { display: block; }
.sermon-row {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 15px 26px; border-bottom: 1px solid #f0ece3;
}
.sermon-row:last-child { border-bottom: none; }
.sermon-row:hover { background: var(--paper); }
.sermon-row .t { font-size: 15.5px; color: var(--text); }
.sermon-row .d { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sermon-row .links { display: flex; gap: 8px; flex: none; }
.sermon-row .links a {
  font-size: 12.5px; letter-spacing: 1px; padding: 4px 12px;
  border: 1px solid var(--gold-pale); border-radius: 20px; color: var(--gold);
}
.sermon-row .links a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---------- Devotion ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; }
.tabs button {
  border: 1px solid var(--line); background: #fff; border-radius: 20px;
  padding: 7px 18px; font-size: 14.5px; cursor: pointer; color: var(--text);
  letter-spacing: 1px; transition: all .2s;
}
.tabs button:hover { border-color: var(--gold); color: var(--gold); }
.tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; max-width: 880px; margin: 0 auto; }
.day-grid a {
  display: block; text-align: center; padding: 10px 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  font-size: 14px; color: var(--text);
}
.day-grid a:hover { border-color: var(--gold); color: var(--gold); }
.day-grid a.playing { background: var(--gold); border-color: var(--gold); color: #fff; }
.player-bar {
  position: sticky; bottom: 0; z-index: 60;
  background: var(--navy); padding: 14px 24px; border-radius: 6px 6px 0 0;
  display: none; align-items: center; gap: 18px; margin-top: 40px;
}
.player-bar.on { display: flex; }
.player-bar .label { color: #fff; font-size: 14.5px; letter-spacing: 1px; white-space: nowrap; }
.player-bar audio { width: 100%; height: 38px; }
.reading-list { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.reading-list a {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); font-size: 14.5px;
}
.reading-list a:hover { border-color: var(--gold); color: var(--gold); }
.reading-list a .play { color: var(--gold); flex: none; display: flex; }
.reading-list a .play svg { width: 16px; height: 16px; }

/* ---------- Fellowship ---------- */
.fgroup { margin-bottom: 74px; }
.fgroup:last-child { margin-bottom: 0; }
.fgroup-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.fgroup-head h3 { font-family: var(--serif); font-size: 24px; letter-spacing: 4px; color: var(--navy); }
.fgroup-head .line { flex: 1; height: 1px; background: var(--line); }
.fgroup .desc { color: #565c64; font-size: 15px; margin-bottom: 22px; max-width: 720px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery a { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; }
.gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.gallery a:hover img { transform: scale(1.06); }
.leaders {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: 30px 34px; max-width: 880px; margin: 0 auto;
}
.leaders h3 { font-family: var(--serif); font-size: 19px; letter-spacing: 3px; color: var(--navy); margin-bottom: 16px; }
.leaders dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; font-size: 15px; }
.leaders dt { color: var(--gold); white-space: nowrap; letter-spacing: 1px; }
.leaders dd { color: #454b53; }

/* ---------- News timeline ---------- */
.timeline { position: relative; max-width: 920px; margin: 0 auto; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.event { position: relative; margin-bottom: 58px; }
.event::before {
  content: ""; position: absolute; left: -30px; top: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale);
}
.event .date { font-size: 13px; letter-spacing: 2px; color: var(--gold); margin-bottom: 6px; }
.event h3 { font-family: var(--serif); font-size: 21px; letter-spacing: 2px; color: var(--navy); margin-bottom: 10px; }
.event p { color: #4a5058; font-size: 15px; margin-bottom: 18px; max-width: 760px; }
.event .gallery { grid-template-columns: repeat(4, 1fr); }
.year-mark {
  position: relative; margin: 0 0 34px;
  font-family: var(--serif); font-size: 15px; letter-spacing: 4px; color: var(--muted);
}
.year-mark::before {
  content: ""; position: absolute; left: -34px; top: 50%; width: 18px; height: 1px; background: var(--gold);
}

/* ---------- Giving ---------- */
.give-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; max-width: 980px; margin: 0 auto;
}
.give-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 4px; padding: 38px 30px; text-align: center;
}
.give-card .ico { color: var(--gold); margin-bottom: 18px; display: flex; justify-content: center; }
.give-card .ico svg { width: 34px; height: 34px; }
.give-card h3 { font-family: var(--serif); font-size: 20px; letter-spacing: 3px; color: var(--navy); margin-bottom: 14px; }
.give-card p { font-size: 14.5px; color: #555b63; }
.give-card .hl { color: var(--navy); font-weight: 500; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; align-items: stretch; }
.contact-info { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 40px; }
.contact-info h3 { font-family: var(--serif); font-size: 20px; letter-spacing: 3px; color: var(--navy); margin-bottom: 24px; }
.contact-row { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.contact-row .ico { color: var(--gold); flex: none; margin-top: 4px; }
.contact-row .ico svg { width: 20px; height: 20px; }
.contact-row h4 { font-size: 14px; letter-spacing: 2px; color: var(--muted); margin-bottom: 2px; font-weight: 500; }
.contact-row p { font-size: 15.5px; color: var(--text); }
.map-wrap { border-radius: 4px; overflow: hidden; border: 1px solid var(--line); min-height: 380px; }
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
  background: rgba(14, 19, 27, .92); padding: 40px;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox .close {
  position: absolute; top: 22px; right: 28px; background: none; border: none;
  color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}
.lightbox .nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 26px; width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer;
}
.lightbox .prev { left: 24px; } .lightbox .next { right: 24px; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--navy-deep); color: #aeb7c2; margin-top: 0;
}
.foot-main {
  display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 50px;
  padding: 64px 0 50px;
}
.foot-main h4 { font-family: var(--serif); color: #fff; font-size: 17px; letter-spacing: 3px; margin-bottom: 20px; }
.foot-main h4::after { content: ""; display: block; width: 24px; height: 2px; background: var(--gold); margin-top: 10px; }
.foot-main p, .foot-main li { font-size: 14px; line-height: 2.1; }
.foot-main ul { list-style: none; }
.foot-main a { color: #aeb7c2; }
.foot-main a:hover { color: var(--gold-bright); }
.foot-brand { font-family: var(--serif); color: #fff; font-size: 21px; letter-spacing: 4px; margin-bottom: 4px; }
.foot-brand-en { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #7c8794; margin-bottom: 18px; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0; font-size: 12.5px; color: #76808d;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.preview-note { color: var(--gold-bright); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cards, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .info-strip .container { grid-template-columns: 1fr; }
  .info-cell + .info-cell { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .split, .latest-sermon, .contact-grid { grid-template-columns: 1fr; }
  .btn-outline { margin-left: 0; margin-top: 14px; }
  .gallery, .event .gallery { grid-template-columns: repeat(3, 1fr); }
  .foot-main { grid-template-columns: 1fr; gap: 36px; }
  .value-grid, .reading-list { grid-template-columns: 1fr; }

  /* Full-screen menu, but it has to scroll: nine items at 18px need ~790px,
     which overflows a 667px phone. It previously used overflow: visible, so
     奉獻 sat off-screen and could not be reached at all. The header now stays
     above the overlay, keeping the church name and the close button visible. */
  nav.main {
    position: fixed; inset: 0; background: var(--navy-deep);
    display: none; z-index: 200;
    padding: 84px 28px 40px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  nav.main.open { display: block; }
  nav.main ul { flex-direction: column; align-items: stretch; gap: 0; }
  nav.main a {
    color: #e8e4da; font-size: 18px; padding: 15px 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  nav.main a.active { color: var(--gold-bright); }
  /* Deliberately not a button here. On a phone a bordered gold block reads as
     a solicitation; findable is enough. */
  nav.main a.give {
    border: none; border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0; color: var(--gold-bright);
    margin: 0; padding: 15px 6px; text-align: left;
  }
  header.site { z-index: 300; }
  header.site.nav-open { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
  header.site.nav-open .brand .name,
  header.site.nav-open .brand .en { color: #f4f1ea; }
  header.site.nav-open .brand .mark { color: var(--gold-bright); }
  .nav-toggle { display: flex; align-items: center; justify-content: center; position: relative; }
  header.site.nav-open .nav-toggle { color: #fff; }
  .nav-toggle .ico-close { display: none; }
  header.site.nav-open .nav-toggle .ico-open { display: none; }
  header.site.nav-open .nav-toggle .ico-close { display: block; }
  body.nav-locked { overflow: hidden; }
}
@media (max-width: 560px) {
  .cards, .cards-3 { grid-template-columns: 1fr; }
  .gallery, .event .gallery { grid-template-columns: repeat(2, 1fr); }
  .topbar { display: none; }
  .hero { min-height: 64vh; }
  section.block { padding: 60px 0; }
}

/* Meeting time + leader on fellowship cards — the field the old site never had */
/* 聚會時間 and 負責同工 on their own lines — together they wrapped mid-phrase
   on a phone, and 螢火蟲小組's meeting time is long enough to wrap twice. */
.fgroup .meets {
  max-width: 880px; margin: 0 auto 18px; text-align: center;
  font-size: 14px; letter-spacing: 1px; color: var(--gold);
  display: grid; gap: 5px; justify-items: center;
}
.fgroup .meets p { margin: 0; max-width: 34rem; }
.fgroup .meets .k {
  color: var(--muted); letter-spacing: 2px; margin-right: 10px;
  font-size: 12.5px;
}

/* ---------- Feature band (anniversary musical) ----------
   Navy ground and gold rule, matching the poster artwork. Sits between the
   hero and the info strip: prominent without displacing the church identity. */
.feature-band { background: var(--navy-deep); color: #f4f1ea; }
.feature-band .container {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px); align-items: center;
  padding-top: clamp(34px, 5vw, 58px); padding-bottom: clamp(34px, 5vw, 58px);
}
.feature-band .art {
  display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
/* This eyebrow is Chinese, unlike the Latin ones elsewhere on the site. At
   12.5px it was smaller than every other element on the band including the
   footnote, and uppercase does nothing to Chinese glyphs. */
.feature-band .eyebrow {
  font-size: 17px; letter-spacing: 3px; color: var(--gold-bright);
  margin-bottom: 12px;
}
.feature-band h2 {
  font-family: var(--serif); font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 6px; color: #fffdf9; margin: 0 0 6px; line-height: 1.4;
}
.feature-band .when {
  font-size: 16px; letter-spacing: 2px; color: var(--gold-bright);
  margin: 0 0 20px; font-variant-numeric: tabular-nums;
}
.feature-band .rule { width: 54px; height: 1px; background: var(--gold); margin: 0 0 20px; }
.feature-band p { color: #cfd4dc; font-size: 15.5px; margin: 0 0 14px; }
.feature-band .note { color: #9aa3af; font-size: 14px; font-style: normal; }
.feature-band .more { color: var(--gold-bright); }
.feature-band .more:hover { color: #fff; }

@media (max-width: 820px) {
  .feature-band .container { grid-template-columns: 1fr; }
  .feature-band .art { order: -1; }
}

/* ---------- Scripture reading: 27 books, 441 recordings ----------
   Reuses the sermon accordion (already wired in main.js) so each book
   collapses; chapters inside, with one link per reader. */
.bible-group { max-width: 880px; margin: 0 auto 34px; }
.bible-group-head {
  font-family: var(--serif); font-size: 15px; letter-spacing: 4px;
  color: var(--gold); margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); font-weight: 600;
}
.bible-group .acc { max-width: none; }

.chapter-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 10px 16px; align-items: center;
  padding: 10px 26px; border-bottom: 1px solid #f0ece3;
}
.chapter-row:last-child { border-bottom: none; }
.chapter-row:hover { background: var(--paper); }
.chapter-row .ch {
  font-size: 14px; color: var(--muted); letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.chapter-row .takes { display: flex; flex-wrap: wrap; gap: 8px; }
.chapter-row .takes a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; background: #fff;
  border: 1px solid var(--line); border-radius: 20px;
  color: var(--text); font-size: 14px; text-decoration: none;
}
.chapter-row .takes a:hover { border-color: var(--gold); color: var(--gold); }
.chapter-row .takes a.playing { background: var(--gold); border-color: var(--gold); color: #fff; }
.chapter-row .takes .play { display: inline-flex; width: 13px; height: 13px; flex: none; }
.chapter-row .takes .play svg { width: 100%; height: 100%; }

@media (max-width: 620px) {
  .chapter-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 18px; }
}

/* ---------- Giving page on small screens ----------
   .give-grid had no breakpoint of its own: three 1fr tracks sized to their
   content, so the postal address pushed one column to 219px and the others
   down to 126px, and the page scrolled sideways. */
@media (max-width: 760px) {
  .give-grid { grid-template-columns: 1fr; gap: 14px; max-width: 34rem; }
  .give-card {
    padding: 22px 24px; text-align: left;
    display: grid; grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 16px; align-items: start;
  }
  .give-card .ico { margin: 2px 0 0; justify-content: flex-start; grid-row: span 2; }
  .give-card .ico svg { width: 26px; height: 26px; }
  .give-card h3 { margin-bottom: 6px; font-size: 18px; letter-spacing: 2px; }
  .give-card p { grid-column: 2; }
  /* the verse block is a lot of navy on a phone */
  .page-hero { padding: 46px 22px 40px; }
  .page-hero p.sub { font-size: 14px; line-height: 1.9; }
}

/* Footer links sat at 20px tall — tight for a thumb, and this congregation
   skews older. Roomier rows on phones only; desktop spacing is unchanged. */
@media (max-width: 560px) {
  .foot-main ul li { line-height: 1; }
  .foot-main ul li a { display: inline-block; padding: 9px 0; }
}