@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

/* Readability floor used throughout: no text under 12px (.75rem), body text at
   least 14px, and every control at least 44px in its smaller dimension. */

:root {
  --ink: #082e3c;
  --deep: #042936;
  --navy: #062530;
  --gold: #f3c546;
  --gold-soft: #fff2c4;
  --paper: #f9f7f0;
  --white: #fffefa;
  --muted: #5a6b70;
  --line: #dce2dc;
  --green: #2b7a64;
  --teal: #155e62;
  --radius: 22px;
  --tap: 44px;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; background: none; }
button:disabled { cursor: not-allowed; opacity: .6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
main:focus { outline: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.03em; }
h1 { font: 700 clamp(2.1rem, 7vw, 3.6rem)/1.02 "Playfair Display", Georgia, serif; }
h2 { font: 700 1.45rem/1.15 "Playfair Display", Georgia, serif; }
h3 { font: 700 1.05rem/1.2 "DM Sans", sans-serif; }
p { color: var(--muted); line-height: 1.55; }
.ui-icon { flex: 0 0 auto; }

.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; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--deep); color: var(--white); font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- estrutura -- */

main { max-width: 760px; margin: auto; padding-bottom: 112px; }
.page-content { padding: 22px 20px 112px; }

.topbar { position: sticky; top: 0; z-index: 10; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px max(16px, calc((100vw - 720px) / 2)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--deep); font: 700 1.15rem/1 "DM Sans", sans-serif; letter-spacing: -.03em; }
.brand small { display: block; margin-top: 3px; font: 500 .75rem/1 "DM Mono", monospace; letter-spacing: .04em; color: #7a6320; }
.brand-name { display: grid; }
.brand-name .brand-mark { font-size: 1.15rem; line-height: 1; letter-spacing: .05em; color: var(--deep); }
.brand-logo { width: 36px; height: auto; display: block; }
.page-title { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; white-space: nowrap; font: 700 1.05rem "DM Sans", sans-serif; }
.page-title .icon-button { position: absolute; right: calc(100% + 2px); }
.topbar-action { min-width: var(--tap); display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.topbar-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--deep); color: var(--gold); font: 700 .85rem "DM Sans", sans-serif; }
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.icon-button { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; color: var(--deep); }
.icon-button:hover { background: #e9efe9; }
.icon-button.small { width: 40px; height: 40px; }
/* On inner pages the back button sits left of the centred title; on narrow
   phones it would cover the brand's name, so only the sun remains. */
@media (max-width: 420px) { .topbar.has-title .brand-name { display: none; } }
@media (max-width: 340px) { .brand-name { display: none; } }

.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 20; width: min(100%, 760px); display: flex; justify-content: space-around; padding: 6px 8px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fffefaf2; backdrop-filter: blur(16px); }
.nav-item { flex: 1 1 0; max-width: 92px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px; color: #5f7176; font: 600 .75rem/1 "DM Sans", sans-serif; }
.nav-item[aria-current="page"] { color: var(--deep); background: #e6efe9; }
.nav-item[aria-current="page"] .ui-icon { stroke-width: 2.2; }

/* --------------------------------------------------------------- botões --- */

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border-radius: 100px; font-weight: 700; font-size: .95rem; line-height: 1.2; text-align: center; transition: transform .18s, background .18s; }
.button:hover { transform: translateY(-1px); }
.button-gold { background: var(--gold); color: var(--deep); }
.button-dark { background: var(--deep); color: var(--white); }
.button-light { background: var(--white); color: var(--deep); }
.button-outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.button-whatsapp { background: #1f7a59; color: var(--white); }
.full-width { width: 100%; }
.link-button, .text-button { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 2px; font-weight: 700; font-size: .9rem; color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.filter { min-height: 40px; padding: 8px 14px; border: 1px solid #c5d0ca; border-radius: 30px; white-space: nowrap; font-size: .875rem; }
.filter.selected { background: var(--deep); color: var(--white); border-color: var(--deep); }

.eyebrow, .kind { display: inline-flex; align-items: center; gap: 6px; font: 500 .75rem/1.3 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #17625f; }
.hint { font-size: .875rem; color: var(--muted); margin: 8px 0 0; }
.hint a { color: var(--teal); font-weight: 700; text-decoration: underline; }
.muted { color: var(--muted); }
.round-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--gold); color: var(--deep); }

.note { display: flex; gap: 10px; margin-top: 28px; padding: 14px 16px; border-radius: 15px; background: #edf1ed; color: #33504e; }
.note p { margin: 0; font-size: .875rem; color: inherit; }
.note.warning { background: #fff4d8; color: #5a4300; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 12px 0; border-radius: 14px; background: #eef3ef; color: #33504e; font-size: .9rem; line-height: 1.45; }

.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font: 600 .75rem/1.2 "DM Sans", sans-serif; white-space: nowrap; }
.status-badge.needs_review, .status-badge.unverified { color: #6d4a00; background: #ffefc2; }
.status-badge.verified { color: #0f5a50; background: #d6ede3; }

/* -------------------------------------------------------------- estados --- */

.state-box, .empty-state { min-height: 200px; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--muted); }
.state-box p, .empty-state p { margin: 0; max-width: 360px; font-size: .95rem; }
.state-box.is-error { color: #7a3a2a; }
.empty-state h2 { margin: 0; color: var(--ink); font-size: 1.3rem; }
.loader { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #c8d6d1; border-top-color: var(--deep); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--deep); color: var(--white); box-shadow: 0 8px 24px #00161d47; font-size: .9rem; animation: toast-up .2s ease-out; }
.toast-action { min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--gold); color: var(--deep); font-weight: 700; }
@keyframes toast-up { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------------------------------------------------------------- início -- */

/* The welcome: the Profeta Elias with open arms, cut out of his photograph,
   in front of the sun of the church's logo. The buttons sit over the bottom
   of the picture, so the whole welcome fits the first screen of a phone. */
.hero { position: relative; overflow: hidden; isolation: isolate; display: grid; padding: 28px 20px 0; color: var(--white); background: radial-gradient(110% 60% at 50% 72%, #135163 0%, transparent 70%), linear-gradient(180deg, var(--deep) 0%, #05303e 100%); }
.hero .eyebrow { color: var(--gold); }
.hero h1 { margin: 12px 0 12px; font-size: clamp(2.5rem, 11.5vw, 4rem); }
/* The church's name is set in Roman capitals, like an inscription: an acronym
   in a flowing italic reads as a word it is not. */
.brand-mark { font-family: "Cinzel", "Playfair Display", Georgia, serif; font-style: normal; font-weight: 700; letter-spacing: .04em; }
.hero h1 .brand-mark { display: inline-block; color: var(--gold); font-size: 1.04em; line-height: 1.05; }
.hero p { max-width: 440px; margin: 0 0 16px; color: #d3e1e2; font-size: 1rem; }
.hero-art { position: relative; margin: 2px -20px 0; display: grid; justify-items: center; }
.hero-art img { position: relative; z-index: 1; display: block; width: min(100%, 480px); height: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, #000 70%, transparent 98%); }
.hero-sun { position: absolute; left: 50%; top: -4%; width: min(100vw, 470px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #ffe08a 0 12%, #f3c546b3 22%, #f3c54633 44%, transparent 64%), repeating-conic-gradient(#f3c54638 0 4deg, transparent 4deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%); mask-image: radial-gradient(circle, #000 28%, transparent 68%); }
.hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; margin: -70px -20px 0; padding: 26px 20px 26px; background: linear-gradient(180deg, transparent, #042936e0 40%, var(--deep)); }
.hero-actions .button { flex: 1 1 150px; }
.button-glass { border: 1px solid #ffffff4d; background: #ffffff1a; color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero .link-button { color: var(--white); }
.live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: var(--tap); padding: 8px 14px; border: 1px solid #ffffff33; border-radius: 99px; background: #ffffff14; color: var(--white); font-size: .875rem; }
.live-chip strong { flex: 0 0 auto; color: var(--gold); white-space: nowrap; }
.live-chip > span:not(.live-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d3e1e2; }
.live-chip.is-live { border-color: #ff9d86; background: #c8321a; }
.live-chip.is-live strong, .live-chip.is-live > span:not(.live-dot) { color: var(--white); }
.live-chip.is-live .live-dot { background: var(--white); box-shadow: none; animation: live-pulse 1.4s ease-out infinite; }

.content-section { padding: 36px 20px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.section-heading h2 { margin: 6px 0 0; }
.section-heading .link-button { white-space: nowrap; }

.live-card { padding: 24px; border-radius: var(--radius); background: var(--gold); color: var(--deep); }
.live-card.is-live { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold); }
.live-kicker { display: flex; align-items: center; gap: 8px; font: 600 .75rem/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #d83d22; box-shadow: 0 0 0 3px #fff0c2; }
.live-card h2 { margin: 12px 0 14px; font-size: 1.6rem; }
.live-time { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--deep); }
.live-time strong { font: 700 2.3rem/.9 "Playfair Display", Georgia, serif; }
.live-time span { font-size: .875rem; line-height: 1.3; }
.live-countdown { margin: 0 0 14px; font: 600 .9rem/1.3 "DM Mono", monospace; color: var(--deep); }
.live-note { margin: 12px 0 16px; color: #34515a; font-size: .95rem; }
.live-also { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: #fff7dc; color: #4a3a05; font-size: .875rem; line-height: 1.4; }
.live-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.live-card .text-button { color: var(--deep); }

.my-church { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.my-church span:nth-child(2) { display: grid; gap: 3px; }
.my-church small { font-size: .8rem; color: var(--muted); }
.my-church strong { font-size: .95rem; }
.my-church span span { font-size: .875rem; color: var(--muted); }

.saved-link { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 14px; padding: 0 16px; border-radius: 14px; background: #e6f0ea; color: var(--deep); font-weight: 600; }
.saved-link span { flex: 1; }

.source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.source-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); transition: transform .18s, box-shadow .18s; }
.source-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px #0a303514; }
.source-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 20%; background: #d5e3dc; }
.source-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.source-body strong { font-size: 1.05rem; }
.source-body small { font-size: .875rem; color: var(--muted); line-height: 1.4; }
.platform { justify-self: start; padding: 4px 8px; border-radius: 6px; background: #e8efe9; color: var(--deep); font: 500 .75rem "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }

.join-invite, .find-istn { margin: 36px 20px 0; padding: 24px; border-radius: var(--radius); display: grid; gap: 14px; }
.join-invite { grid-template-columns: auto 1fr; background: var(--deep); color: var(--white); }
.join-invite h2 { margin: 6px 0 8px; }
.join-invite p { margin: 0; color: #c4d8dd; font-size: .95rem; }
.join-invite .eyebrow { color: var(--gold); }
.join-invite .button { grid-column: 1 / -1; justify-self: start; }
.find-istn { background: #d9eee5; }
.find-istn h2 { margin: 6px 0 6px; }
.find-istn p { margin: 0; font-size: .95rem; }
.find-istn .button { justify-self: start; }
.find-istn-photo { width: 100%; height: 170px; object-fit: cover; object-position: center 32%; border-radius: 16px; background: #c7e0d5; }

/* ----------------------------------------------------------------- vídeos -- */

.video-group { margin-bottom: 20px; }
.video-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.video-group-title h3 { margin: 0; font-size: .95rem; }
/* contain: paint keeps the cards scrolled out of view from widening the page:
   without it Chrome on Android laid the whole page out 828px wide on a 375px
   phone and shrank everything to fit. */
.video-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; contain: paint; }
.video-card { flex: 0 0 220px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.video-thumb, .teaching-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #d9e1db; }
.video-thumb img, .teaching-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; display: grid; place-items: center; padding-left: 2px; border-radius: 50%; background: var(--gold); color: var(--deep); }
.video-copy { display: grid; gap: 5px; padding: 11px 12px 12px; }
.video-copy small { font: 500 .75rem "DM Mono", monospace; color: var(--muted); }
.video-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: .9rem; line-height: 1.25; }
.video-copy em { font-style: normal; font-weight: 700; font-size: .8rem; color: var(--teal); }
.video-empty { min-height: 110px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-radius: 15px; background: #edf1ed; text-align: center; }
.video-empty p { margin: 0; font-size: .9rem; }
.video-empty .loader { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- ensinos -- */

.page-intro { max-width: 600px; }
.page-intro h1 { margin: 10px 0 12px; font-size: clamp(2rem, 7vw, 3rem); }
.page-intro p { margin-bottom: 22px; font-size: 1rem; }

.search-box { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border: 1.5px solid #bfccc7; border-radius: 16px; background: var(--white); color: var(--muted); }
.search-box:focus-within { border-color: var(--deep); box-shadow: 0 0 0 3px #f3c54659; }
.search-box input { width: 100%; min-height: 50px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.search-box input::placeholder { color: #6e7c7d; }
.search-box input::-webkit-search-cancel-button { cursor: pointer; }

.chip-row { display: flex; gap: 8px; overflow-x: auto; margin: 16px -20px 4px; padding: 2px 20px 10px; scrollbar-width: none; contain: paint; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--deep); }
.chip strong { font: 600 .9rem/1 "DM Sans", sans-serif; white-space: nowrap; }
.chip small { font: 500 .75rem/1 "DM Mono", monospace; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--white); }
.chip[aria-pressed="true"] small { color: var(--gold); }
.chip-saved .ui-icon { color: #b8412b; }
.chip-saved[aria-pressed="true"] .ui-icon { color: var(--gold); fill: currentColor; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.select-field { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; border: 1px solid #c5d0ca; border-radius: 12px; background: var(--white); }
.select-field span { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.select-field select { width: 100%; min-width: 0; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .95rem; }
.select-field select:disabled { color: #8a9899; }
.segmented { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #e9eee9; }
.segmented button { min-height: 40px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.segmented button[aria-pressed="true"] { background: var(--white); color: var(--deep); box-shadow: 0 1px 3px #0a30351f; }

.results-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.results-summary p { margin: 0; font-size: .9rem; }
.results-summary strong { color: var(--ink); }

.teaching-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.year-heading { grid-column: 1 / -1; margin: 12px 0 0; font-size: 1.15rem; color: var(--deep); }
.year-heading:first-child { margin-top: 0; }
.teaching-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.teaching-link { display: block; flex: 1; }
.teaching-body { display: grid; gap: 5px; padding: 10px 12px 4px; }
.teaching-meta { font: 500 .75rem/1.3 "DM Mono", monospace; color: #4f6662; }
.teaching-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; line-height: 1.25; }
.teaching-ref { font-size: .85rem; font-weight: 600; color: #1d6a5f; }
.teaching-range { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); }
.teaching-cta { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--teal); }
.teaching-actions { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 6px; }
.icon-toggle { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; color: #4f6662; }
.icon-toggle:hover { background: #eef3ef; }
.icon-toggle.is-on, .icon-toggle[aria-pressed="true"] { color: #b8412b; }
.icon-toggle[aria-pressed="true"] .ui-icon { fill: currentColor; }
.show-more { margin-top: 16px; }

.detail-page { padding-bottom: 112px; }
.detail-image { width: 100%; max-height: 420px; display: block; object-fit: cover; object-position: center 20%; }
.detail-copy { padding: 24px 20px 4px; }
.detail-copy h1 { margin: 12px 0 10px; font-size: clamp(2rem, 8vw, 3rem); }
.detail-copy p { font-size: 1rem; margin-bottom: 20px; }

/* ---------------------------------------------------------------- ao vivo -- */

.live-hero { margin-bottom: 16px; padding: 26px; border-radius: var(--radius); background: var(--deep); color: var(--white); }
.live-hero .eyebrow { color: var(--gold); }
.live-hero h1 { margin: 12px 0; font-size: clamp(2rem, 8vw, 3.2rem); }
.live-hero p { margin: 0; color: #cadbdb; }

.next-meeting { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.next-meeting.is-live { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.next-date { display: flex; flex-direction: column; gap: 4px; padding-right: 12px; border-right: 1px solid var(--line); }
.next-date span, .next-date small { font: 500 .75rem "DM Mono", monospace; color: var(--muted); }
.next-date strong { font: 700 2rem/.95 "Playfair Display", Georgia, serif; }
.next-meeting h2 { margin: 6px 0 8px; font-size: 1.3rem; }
.next-meeting .live-countdown { margin: 0; }

.join-panel { margin-top: 16px; padding: 22px; border-radius: var(--radius); background: #d9eee5; }
.join-panel h2 { margin: 0 0 6px; }
.join-panel > p { margin-bottom: 16px; font-size: .95rem; }
.join-panel .notice { background: #eef8f3; }
.join-panel > .text-button { margin-top: 10px; }
.credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.credential { min-width: 0; padding: 8px 6px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.credential dt { font: 500 .75rem "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.credential dd { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 2px 0 0; font-weight: 700; font-size: 1rem; color: var(--deep); }
.credential dd span { overflow-wrap: anywhere; user-select: all; }
.calendar-actions { margin-top: 14px; }

.weekly-schedule, .recordings { margin-top: 28px; }
.zone-tag { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; font: 500 .75rem/1 "DM Mono", monospace; color: var(--muted); }
.schedule-list, .schedule-items, .event-list { list-style: none; margin: 0; padding: 0; }
.schedule-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.schedule-list > li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.schedule-list > li:last-child { border-bottom: 0; }
.schedule-list > li.is-today { background: var(--gold-soft); }
.schedule-day { display: grid; align-content: start; gap: 4px; font-weight: 700; color: var(--deep); }
.schedule-day b { justify-self: start; padding: 2px 6px; border-radius: 6px; background: var(--deep); color: var(--gold); font: 500 .75rem "DM Mono", monospace; }
.schedule-items { display: grid; gap: 10px; }
.schedule-items li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.schedule-time { font: 700 1.05rem/1.2 "Playfair Display", Georgia, serif; color: var(--deep); }
.schedule-title { font-size: .9rem; line-height: 1.35; color: var(--ink); }
.schedule-title small { display: block; font-size: .85rem; color: var(--muted); }
.event-list { display: grid; gap: 10px; }
.event-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.event-list strong { display: block; font-size: .95rem; }
.event-list small { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); }
.event-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--gold-soft); color: #7a5800; }
.event-when { font: 600 .8rem "DM Mono", monospace; color: var(--deep); text-align: right; }

/* ---------------------------------------------------------------- igrejas -- */

.church-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.church-card { position: relative; display: grid; gap: 6px; padding: 16px 44px 16px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); transition: box-shadow .18s; }
.church-card:hover { box-shadow: 0 8px 20px #0a303512; }
.church-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.church-card-top .status-badge { margin-left: auto; }
.church-card h3 { margin: 0 0 4px; font: 700 1.1rem/1.2 "DM Sans", sans-serif; letter-spacing: -.02em; }
.country-group + .country-group { margin-top: 22px; }
.country-heading { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; font: 700 1.2rem/1.2 "Playfair Display", Georgia, serif; color: var(--deep); }
.country-heading small { font: 500 .75rem "DM Mono", monospace; color: var(--muted); }
.card-line { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: #3b5358; line-height: 1.35; }
.card-line .ui-icon { margin-top: 1px; color: #2a6d62; }
.card-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #8a9a97; }
.mine-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: #fbe3dd; color: #8e2f1d; font-size: .75rem; font-weight: 600; }

.church-page .church-photo { width: 100%; max-height: 260px; object-fit: cover; margin-bottom: 18px; border-radius: 18px; }
.church-head { display: flex; gap: 14px; align-items: flex-start; }
.church-head h1 { margin: 6px 0; font-size: clamp(1.9rem, 7vw, 2.8rem); }
.church-head p { margin: 0; font-size: .95rem; }
.church-badges { margin: 14px 0 6px; }
.info-list { margin: 16px 0 20px; border-top: 1px solid var(--line); }
.info-row { display: flex; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.info-row > .ui-icon { margin-top: 2px; color: #2a6d62; }
.info-row > div { flex: 1; min-width: 0; display: grid; gap: 4px; margin: 0; color: var(--ink); }
.info-row small { font: 500 .75rem "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.info-row strong { font-size: 1rem; }
.info-row .muted { font-size: .85rem; }
.strong-link { font-weight: 700; font-size: 1rem; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.servant-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.servant-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.servant-list span { font-size: .85rem; color: var(--muted); }
.action-stack { display: grid; gap: 10px; }

/* ----------------------------------------------------------------- perfil -- */

.profile-hero { padding: 26px 8px 8px; text-align: center; }
.profile-hero .round-icon { width: 60px; height: 60px; margin: auto; }
.profile-hero h1 { margin: 16px 0 10px; font-size: clamp(2rem, 8vw, 3rem); }
.profile-hero p { max-width: 460px; margin: auto; font-size: 1rem; }
a.menu-row { text-decoration: none; }
a.menu-row:hover { background: #f5f8f6; }
.menu-footnote { margin: 8px 6px 0; font-size: .85rem; }

/* --------------------------------------------------------------- ecrãs largos */

@media (min-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto 1fr; column-gap: 12px; padding: 44px 40px 0; border-radius: 0 0 32px 32px; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-actions { grid-column: 1; grid-row: 2; align-self: start; margin: 0; padding: 8px 0 44px; background: none; }
  .hero-actions .button { flex: 0 1 auto; }
  .hero-art { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 -20px 0 0; }
  .content-section, .page-content { padding-left: 34px; padding-right: 34px; }
  .join-invite, .find-istn { margin-left: 34px; margin-right: 34px; }
  .find-istn { grid-template-columns: 1fr auto; align-items: center; }
  .find-istn-photo { grid-column: 1 / -1; height: 220px; }
  .teaching-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip-row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
  .segmented { flex: 0 1 280px; }
  .detail-copy { padding-left: 34px; padding-right: 34px; }
  .detail-image { border-radius: 0 0 30px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------- conta, selo e fotografias */

.account-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.account-card h2 { margin-bottom:8px; }
.account-card p { font-size:.84rem; }
.account-card label { display:grid; gap:5px; margin-bottom:14px; font:600 .75rem "DM Sans",sans-serif; color:var(--deep); }
.account-card input[type=text],.account-card input[type=email],.account-card input[type=password] { border:1px solid #c5d0ca; border-radius:11px; padding:10px 12px; font:400 .86rem "DM Sans",sans-serif; width:100%; }
.account-check { display:flex !important; align-items:center; gap:9px; font-size:.8rem !important; }
.account-check input { width:18px; height:18px; }
.account-note { color:var(--muted); font-size:.76rem; margin:-4px 0 14px; }
.account-switch { display:block; margin:4px auto 0; }
.verified-name { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.verified-seal { flex:0 0 auto; vertical-align:middle; }
.verified-seal .seal-check { stroke:var(--white); }
.verified-seal.tier-dourado .seal-disc { fill:#e0a800; }
.verified-seal.tier-azul .seal-disc { fill:#1d7ec4; }
.verified-seal.tier-neutro .seal-disc { fill:#7b918a; }
.verified-line { margin:8px 0 0; font-size:.8rem; color:var(--muted); }
.verified-role { margin:6px 0 0; font:600 .75rem "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.account-providers { display:grid; gap:9px; margin:4px 0 14px; }
.account-providers .button { justify-content:center; }
.photo-field { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.photo-preview { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#e3ebe6; flex:0 0 auto; }
.photo-preview.empty { display:grid; place-items:center; font-size:26px; color:var(--muted); }
.photo-pick { display:inline-block !important; margin:0 0 4px !important; padding:8px 14px; border:1px solid #c5d0ca; border-radius:999px; font-size:.76rem !important; cursor:pointer; background:var(--white); }
.photo-pick input { display:none; }
.photo-field small { display:block; color:var(--muted); font-size:.75rem; }

/* ---------------------------------------------------------------- perfil -- */

.profile-page { padding-top:8px; }

.profile-card { position:relative; overflow:hidden; display:grid; justify-items:center; text-align:center; gap:4px; padding:30px 22px 24px; border-radius:26px; color:var(--white);
  background:radial-gradient(120% 90% at 50% -10%, #134656 0%, var(--deep) 58%); box-shadow:0 18px 40px #042a3524; }
.profile-card:after { content:""; position:absolute; width:190px; height:190px; right:-80px; top:-90px; border-radius:50%; border:1px solid #2f5c6a; box-shadow:0 0 0 22px #0a3645, 0 0 0 23px #2f5c6a; pointer-events:none; }
.profile-card > * { position:relative; z-index:1; }

.profile-avatar { position:relative; width:104px; height:104px; margin-bottom:12px; border-radius:50%; cursor:pointer; padding:3px; background:conic-gradient(from 210deg, var(--gold), #f7dd8c, var(--gold)); }
.profile-avatar img, .profile-initials { width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#0f3d4c; border:3px solid var(--deep); }
.profile-initials { font:700 2.1rem/1 "Playfair Display",Georgia,serif; color:var(--gold); letter-spacing:.02em; }
.profile-avatar-action { position:absolute; right:2px; bottom:4px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--deep); border:3px solid var(--deep); transition:transform .15s; }
.profile-avatar:hover .profile-avatar-action { transform:scale(1.08); }
.profile-avatar:focus-within { outline:3px solid var(--gold); outline-offset:4px; }
.profile-avatar input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.profile-avatar.is-busy { cursor:progress; }
.profile-avatar .loader { width:16px; height:16px; }

.profile-card h1.verified-name { margin:0; font:700 clamp(1.5rem,6vw,1.95rem)/1.1 "Playfair Display",Georgia,serif; color:var(--white); gap:9px; }
.profile-card .verified-seal { width:20px; height:20px; }
.profile-card-role { margin:2px 0 0; font:500 .75rem/1.4 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:#9fc3cc; }
.profile-card-role.strong { color:var(--gold); }
.profile-card-meta { margin:6px 0 0; font-size:.8rem; color:#c9dde2; }
.profile-card-missing { margin:8px 0 0; padding:6px 12px; border-radius:99px; background:#7a4b00; color:#ffe9b0; font-size:.8rem; }

.profile-progress { width:min(260px,100%); margin-top:16px; display:grid; gap:7px; }
.profile-progress span { font:500 .75rem "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:#9fc3cc; }
.profile-progress i { display:block; height:5px; border-radius:99px; background:linear-gradient(90deg, var(--gold) var(--done), #ffffff1f var(--done)); }

/* ------------------------------------------------------------------ menu -- */

.menu-group { margin-top:26px; }
.menu-heading { margin:0 6px 9px; font:500 .75rem "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.menu-list { list-style:none; margin:0; padding:0; background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 1px 0 #0a30350a; }
.menu-list li + li { border-top:1px solid #e8ece8; }
.menu-row { width:100%; min-height:60px; display:grid; grid-template-columns:36px minmax(0,auto) minmax(0,1fr) 16px; align-items:center; gap:13px; padding:11px 16px; background:none; text-align:left; color:var(--deep); transition:background .15s; }
.menu-row.is-static { grid-template-columns:36px minmax(0,auto) minmax(0,1fr); }
button.menu-row:hover { background:#f5f8f6; }
button.menu-row:active { background:#edf2ef; }
button.menu-row:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.menu-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; }
.tone-green { background:#e3f0ea; color:#1f6b55; }
.tone-gold { background:#fbf0cf; color:#8a6400; }
.tone-blue { background:#e1edf7; color:#1d5f95; }
.tone-sand { background:#f2ece1; color:#7d6440; }
.tone-grey { background:#edf0ef; color:#55656a; }
.tone-red { background:#f8e7e5; color:#9b3434; }
.menu-label { font:600 .9rem/1.2 "DM Sans",sans-serif; white-space:nowrap; }
.menu-value { justify-self:end; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; color:var(--muted); text-align:right; }
.menu-value.empty { color:#a8741c; font-style:italic; }
.menu-value.verified { display:inline-flex; align-items:center; gap:6px; color:var(--deep); font-weight:600; }
.menu-chevron { color:#b3bfba; display:grid; place-items:center; }
.menu-row.danger .menu-label { color:#9b3434; }
.menu-row.is-static .menu-value, .menu-row.is-static .switch { justify-self:end; }

.status-pill { justify-self:end; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 10px; border-radius:999px; font:600 .75rem "DM Sans",sans-serif; }
.status-pill.pending { background:#fbf0cf; color:#7d5b00; }
.status-pill.refused { background:#f8e7e5; color:#9b3434; }

.switch { position:relative; width:48px; height:28px; border-radius:999px; background:#cdd7d3; transition:background .2s; flex:0 0 auto; }
.switch i { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--white); box-shadow:0 1px 3px #0003; transition:transform .2s; }
.switch[aria-checked="true"] { background:var(--deep); }
.switch[aria-checked="true"] i { transform:translateX(20px); }
.switch:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

/* ----------------------------------------------------------------- folhas -- */

.sheet-backdrop { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:#031c25a6; animation:sheet-fade .18s ease-out; }
.sheet { width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:10px 22px calc(22px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:var(--paper); box-shadow:0 -12px 40px #0000002e; animation:sheet-up .24s cubic-bezier(.2,.8,.2,1); }
.sheet-grip { display:block; width:42px; height:5px; margin:0 auto 16px; border-radius:99px; background:#cfd8d4; }
.sheet h2 { margin:0 0 8px; font:700 1.5rem/1.15 "Playfair Display",Georgia,serif; color:var(--deep); }
.sheet-hint { margin:0 0 16px; font-size:.84rem; line-height:1.5; color:var(--muted); }
.sheet-notice { margin:0 0 14px; padding:11px 13px; border-radius:12px; background:#f8e7e5; color:#8a2f2f; font-size:.82rem; }
.sheet-label { margin:18px 0 8px; font:600 .75rem "DM Sans",sans-serif; color:var(--deep); }
.sheet-field { display:grid; gap:7px; margin:4px 0 6px; font:600 .75rem "DM Sans",sans-serif; color:var(--deep); }
.sheet-field input, .sheet-field select { width:100%; min-height:50px; padding:12px 14px; border:1.5px solid #c9d4cf; border-radius:14px; background:var(--white); font:400 1rem "DM Sans",sans-serif; color:var(--ink); }
.sheet-field input:focus, .sheet-field select:focus { outline:none; border-color:var(--deep); box-shadow:0 0 0 3px #f3c54659; }
.sheet .choice-grid + .sheet-field { margin-top:18px; }
.sheet-actions { display:grid; gap:8px; justify-items:center; margin-top:22px; }

.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.choice-grid.roles { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.choice { position:relative; display:block; cursor:pointer; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span { display:grid; gap:2px; min-height:52px; align-content:center; padding:11px 14px; border:1.5px solid #d3dcd8; border-radius:14px; background:var(--white); transition:border-color .15s, background .15s; }
.choice strong { font:600 .88rem/1.2 "DM Sans",sans-serif; color:var(--deep); }
.choice small { font:500 .75rem "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:#1d5f95; }
.choice input:checked + span { border-color:var(--deep); background:#eaf2ef; box-shadow:inset 0 0 0 1px var(--deep); }
.choice input:focus-visible + span { outline:3px solid var(--gold); outline-offset:2px; }

.service-summary { padding:14px 16px; margin-bottom:12px; border-radius:16px; background:var(--white); border:1px solid var(--line); }
.service-summary p { margin:0; font-size:.88rem; color:var(--ink); }
.service-summary p + p { margin-top:6px; color:var(--muted); font-size:.82rem; }
.service-summary .verified-name { justify-content:flex-start; font:700 1.1rem "Playfair Display",Georgia,serif; color:var(--deep); }

@keyframes sheet-up { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes sheet-fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .sheet, .sheet-backdrop { animation:none; } }
@media (min-width:700px) {
  .sheet-backdrop { align-items:center; padding:24px; }
  .sheet { border-radius:26px; padding-bottom:24px; }
  .sheet-grip { display:none; }
}


/* ------------------------------------------------------------- anúncios -- */

.post-new { margin: 6px 0 18px; }
.post-list { display: grid; gap: 14px; }
.post-card, .post-full { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.post-card.is-highlighted, .post-full.is-highlighted { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.post-author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--deep); color: var(--gold); font: 700 .85rem "DM Sans", sans-serif; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-byline { display: grid; gap: 2px; min-width: 0; }
.post-byline strong { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.post-byline small { font-size: .8rem; color: var(--muted); }
.post-pin { margin-left: auto; padding: 4px 9px; border-radius: 99px; background: var(--gold-soft); color: #6d4a00; font: 600 .75rem "DM Sans", sans-serif; white-space: nowrap; }
.post-open { display: block; color: inherit; }
.post-card h3, .post-full h1 { margin: 0 0 6px; }
.post-full h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin: 8px 0 12px; }
.post-body p { margin: 0 0 10px; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.post-body p:last-child { margin-bottom: 0; }
.post-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.post-more { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--teal); }
.post-images { display: grid; gap: 6px; margin: 12px 0 4px; }
.post-images.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-images figure { margin: 0; }
.post-images img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; background: #d9e1db; display: block; }
.post-images figcaption { margin-top: 4px; font-size: .8rem; color: var(--muted); }
.post-stats { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.post-stats span { display: inline-flex; align-items: center; gap: 5px; }
.post-owner-actions { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.post-owner-actions .danger { color: #9b3434; }

.comments { margin-top: 26px; }
.comments h2 { display: flex; align-items: baseline; gap: 8px; }
.comments h2 small { font: 500 .8rem "DM Mono", monospace; color: var(--muted); }
.comment-form { display: grid; gap: 10px; justify-items: start; margin: 12px 0 18px; }
.comment-form .sheet-field { width: 100%; margin: 0; }
.comment-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.comment-list li { padding: 12px 14px; border-radius: 14px; background: #eff3ef; }
.comment-list strong { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.comment-list small { margin-left: 8px; font-size: .78rem; color: var(--muted); }
.comment-list .post-body p, .comment-list div p { margin: 6px 0 0; font-size: .9rem; }

.sheet-field textarea { width: 100%; min-height: 120px; padding: 12px 14px; border: 1.5px solid #c9d4cf; border-radius: 14px; background: var(--white); font: 400 1rem/1.5 "DM Sans", sans-serif; color: var(--ink); resize: vertical; }
.sheet-field textarea:focus { outline: none; border-color: var(--deep); box-shadow: 0 0 0 3px #f3c54659; }
.sheet-check { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font: 600 .85rem "DM Sans", sans-serif; color: var(--deep); }
.sheet-check input { width: 20px; height: 20px; }
.draft-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.draft-images figure { position: relative; margin: 0; }
.draft-images img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.draft-images .icon-button { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; background: var(--deep); color: var(--white); }

/* Six tabs fit a 360px phone; the labels stay legible by narrowing the gaps. */
.bottom-nav { padding-left: 2px; padding-right: 2px; }
.nav-item { max-width: none; font-size: .72rem; letter-spacing: -.01em; }

/* Community feed: generous touch targets, calm surfaces and instant feedback. */
.post-list { gap: 20px; }
.post-card, .post-full { padding: 22px; border-radius: 24px; box-shadow: 0 6px 24px #123c2c06; }
.post-card.is-highlighted, .post-full.is-highlighted { box-shadow: 0 4px 22px #bd94200c; }
.post-author { margin-bottom: 18px; align-items: flex-start; }
.post-byline { padding-top: 2px; }
.post-byline strong { flex-wrap: wrap; }
.post-byline small { line-height: 1.5; }
.post-body, .comment-content { overflow-wrap: anywhere; }
.post-body p { line-height: 1.7; }
.post-new { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; text-align: left; color: var(--deep); cursor: pointer; }
.post-new-prompt { flex: 1; font-size: 1rem; font-weight: 600; }
.post-new-prompt small { display: block; margin-top: 5px; font-size: .8rem; font-weight: 400; color: var(--muted); }
.post-new-photo { display: grid; justify-items: center; gap: 4px; padding-left: 12px; border-left: 1px solid var(--line); font-size: .76rem; color: var(--teal); }
.post-images { gap: 4px; margin: 18px -8px 4px; border-radius: 18px; overflow: hidden; }
.post-images img { border-radius: 0; }
.post-images.is-grid img { aspect-ratio: 1; height: 100%; }
.post-stats { justify-content: space-between; align-items: center; gap: 8px; border-top: 0; margin-top: 14px; padding: 8px 0 12px; font-size: .78rem; }
.post-stats > span { flex-wrap: wrap; }
.reaction-stack { gap: 0 !important; }
.reaction-stack > span { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid white; border-radius: 50%; background: #f1f5f1; margin-right: -5px; }
.reaction-stack > span:last-child { margin-right: 3px; }
.post-interactions { border-top: 1px solid var(--line); padding-top: 8px; }
.post-comment-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 6px; border-radius: 12px; background: #f5f7f4; color: var(--muted); font-size: .85rem; font-weight: 600; }
.comments { scroll-margin-top: 80px; }
.comments h2 { font: 700 1.2rem 'DM Sans', sans-serif; }
.comments h2 small { padding: 4px 8px; border-radius: 20px; background: #e7eee8; }
.comment-form { display: block; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.comment-form .sheet-field textarea { min-height: 76px; border: none; background: #f4f7f3; font-size: .95rem; }
.comment-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.comment-toolbar .button { min-height: 44px; padding: 8px 16px; gap: 8px; }
.comment-list { gap: 18px; }
.comment-list li { display: flex; gap: 10px; padding: 0; background: transparent; }
.comment-avatar { width: 34px; height: 34px; background: #e2ece4; color: var(--deep); }
.comment-content { min-width: 0; flex: 1; }
.comment-bubble { padding: 12px 16px; border-radius: 4px 18px 18px; background: #eaf0e9; }
.comment-list .comment-content > small { display: block; margin: 5px 0 0 12px; font-size: .73rem; }
.comment-list div p { line-height: 1.6; }
.comments-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.comments-empty > span { display: block; font-size: 2rem; margin-bottom: 10px; }
.comments-empty strong { display: block; color: var(--deep); font-size: .9rem; }
.comments-empty p { font-size: .85rem; }
.post-composer { background: white; max-width: 580px; }
.composer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.composer-heading h2 { margin: 5px 0 0; font: 700 1.45rem 'DM Sans', sans-serif; }
.composer-heading .eyebrow { font-size: .62rem; }
.composer-heading .icon-button { flex-shrink: 0; background: #f0f4ee; }
.post-composer .sheet-field textarea { border-color: var(--line); background: #fafbf9; }
.emoji-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.emoji-tools > span { width: 100%; font-size: .73rem; color: var(--muted); padding: 0 4px 4px; }
.emoji-tools button { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; font-size: 1.3rem; cursor: pointer; }
.comment-toolbar .emoji-tools > span { display: none; }
.post-options { margin: 16px 0; padding: 12px; border-radius: 14px; background: #f4f7f2; }
.post-options summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--deep); min-height: 28px; }
.post-options summary svg { vertical-align: middle; }
.post-options .sheet-check { margin-top: 14px; }
.post-photo-pick { position: relative; display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 24px 12px; border: 1.5px dashed #a8c7b5; border-radius: 18px; background: #f5f9f3; color: var(--teal); text-align: center; cursor: pointer; }
.post-photo-pick > span { font-size: .78rem; color: var(--muted); }
.post-photo-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.post-photo-pick:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.post-photo-pick:has(input:disabled) { opacity: .6; }
.post-photo-pick input:disabled { cursor: wait; }
.draft-images { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.draft-images img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.post-composer .sheet-actions { margin-top: 20px; }
.post-composer .sheet-actions .button { min-height: 50px; }
.post-interactions button:focus-visible, .emoji-tools button:focus-visible, .post-new:focus-visible, .post-comment-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) {
  .emoji-tools button:hover, .post-comment-link:hover { background: #eaf2e9; }
  .post-new:hover, .post-photo-pick:hover { border-color: var(--teal); }
}
@media (max-width: 400px) {
  .post-card, .post-full { padding: 15px; border-radius: 20px; }
  .post-pin { padding: 4px 6px; font-size: .65rem; }
  .post-new { padding: 14px; gap: 10px; }
  .post-new-prompt small { font-size: .73rem; }
  .comment-toolbar .emoji-tools button { width: 40px; }
}

/* Compact social reaction picker: small glyphs, comfortable touch targets. */
.compact-interactions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.reaction-picker { position: relative; flex: 1; min-width: 0; }
.reaction-trigger { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 6px; list-style: none; border-radius: 10px; color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
.reaction-trigger::-webkit-details-marker { display: none; }
.reaction-trigger > span { font-size: 16px; line-height: 1; }
.reaction-trigger.is-icon-only { max-width: 48px; margin: 0 auto; }
.reaction-trigger.is-icon-only > span { font-size: 19px; }
.reaction-trigger.is-on { color: var(--teal); background: #edf4ee; }
.reaction-trigger.is-special { color: #755009; background: #fff5d7; }
.compact-interactions .post-comment-link { flex: 1; min-width: 0; min-height: 40px; margin: 0; padding: 4px 6px; border: 0; background: transparent; font-size: .8rem; cursor: pointer; }
.reaction-popover { position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 20; width: min(264px, calc(100vw - 72px)); padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 8px 30px #123c2c26; animation: reaction-picker-in .14s ease-out; }
.reaction-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.reaction-option { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 40px; padding: 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; transition: background .12s, transform .12s; }
.reaction-option > span:first-child { font-size: 21px; line-height: 1; }
.reaction-option.is-on { border-color: #a7c6b1; background: #eaf3ed; }
.reaction-option.is-special { grid-column: 1 / -1; gap: 7px; min-height: 34px; margin-top: 3px; background: #fff6dc; color: #755009; font-size: .76rem; font-weight: 700; }
.reaction-option.is-special > span:first-child { font-size: 16px; }
.reaction-option.is-special.is-on { border-color: #b88a27; background: #ffedb7; }
.reaction-stack > span { width: 20px; height: 20px; font-size: 12px; }
.reaction-stack > span.is-special { background: #fff0bd; color: #755009; }
.legacy-reaction { width: 100%; margin-top: 5px; font-size: .75rem; }
.reaction-trigger:focus-visible, .reaction-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) {
  .reaction-trigger:hover, .compact-interactions .post-comment-link:hover { background: #edf3ee; }
  .reaction-option:hover { background: #edf3ee; transform: translateY(-2px); }
  .reaction-option.is-special:hover { background: #ffedb7; }
}
@keyframes reaction-picker-in { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reaction-popover { animation: none; }
  .reaction-option { transition: none; }
  .reaction-option:hover { transform: none; }
}

/* ------------------------------------------------------- ao vivo agora ---- */

.on-air { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: #c8321a; color: var(--white); letter-spacing: .1em; }
.live-card.is-live { background: linear-gradient(140deg, #ffdb70, var(--gold) 55%); box-shadow: 0 0 0 4px var(--white), 0 0 0 7px #c8321a; }
.live-card.is-live .live-dot, .next-meeting.is-live .live-dot { animation: live-pulse 1.4s ease-out infinite; }
.next-meeting.is-live { border-color: #c8321a; box-shadow: 0 0 0 3px #f7c8bd; }
.live-hero .live-hero-lead { margin: 0 0 10px; color: var(--gold); font: italic 600 1.15rem/1.4 "Playfair Display", Georgia, serif; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 #c8321a99; } 70% { box-shadow: 0 0 0 9px #c8321a00; } 100% { box-shadow: 0 0 0 0 #c8321a00; } }

/* ------------------------------------------------------ igrejas: topo ---- */

/* The Profeta Elias and his word about the nations. On a phone the quote sits
   over the lower half of the picture — the dark of his shirt — so his face
   and raised hand stay clear above it. */
.churches-page { padding-top: 0; }
.prophecy { position: relative; overflow: hidden; isolation: isolate; min-height: 450px; display: flex; flex-direction: column; justify-content: flex-end; margin: 0 -20px 26px; padding: 0 20px 26px; border-radius: 0 0 28px 28px; color: var(--white); background: radial-gradient(90% 55% at 70% 24%, #17586a 0%, transparent 72%), linear-gradient(180deg, #05313f, var(--deep)); }
.prophecy::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 64%; background: linear-gradient(180deg, transparent, #042936d9 42%, var(--deep) 86%); }
.prophecy-art { position: absolute; top: 0; right: -9%; z-index: -2; width: 88%; max-width: 390px; }
.prophecy-art img { position: relative; display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(180deg, #000 62%, transparent 96%); }
.prophecy-sun { position: absolute; top: -12%; left: 4%; width: 96%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f3c54666 0%, #f3c5461f 38%, transparent 66%), repeating-conic-gradient(#f3c54630 0 4deg, transparent 4deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 66%); mask-image: radial-gradient(circle, #000 22%, transparent 66%); }
.prophecy-copy { position: relative; max-width: 560px; margin: 0; }
.prophecy blockquote { margin: 0; }
.prophecy blockquote p { position: relative; margin: 0; color: #fffaf0; font: italic 600 clamp(1.1rem, 4.7vw, 1.45rem)/1.45 "Playfair Display", Georgia, serif; letter-spacing: -.005em; text-shadow: 0 1px 16px #021a22; }
.prophecy blockquote p::before { content: "“"; display: block; height: .55em; margin-bottom: 4px; color: var(--gold); font: 700 3.4rem/1 "Playfair Display", Georgia, serif; }
.prophecy figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 500 .8rem/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.prophecy figcaption::before { content: ""; width: 28px; height: 1.5px; background: var(--gold); }
.churches-page .page-intro .eyebrow .ui-icon { color: #17625f; }

/* --------------------------------------------------- igrejas: o mundo ---- */

.world-card { margin: 4px 0 20px; padding: 20px 18px 14px; border-radius: var(--radius); background: linear-gradient(170deg, #06343f, var(--deep)); color: var(--white); }
.world-card .eyebrow { color: var(--gold); }
.world-heading h2 { margin: 6px 0 14px; }
.world-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.world-stats div { padding: 10px 10px 9px; border-radius: 14px; background: #ffffff0f; }
.world-stats dt { font: 500 .75rem/1.25 "DM Mono", monospace; letter-spacing: .03em; color: #a9c3c7; }
.world-stats dd { margin: 5px 0 0; font: 700 1.7rem/1 "Playfair Display", Georgia, serif; color: var(--gold); }
.world-map { display: block; width: 100%; height: auto; margin: 6px 0 8px; overflow: visible; }
.map-land { fill: none; stroke: #6f9aa1; stroke-width: .6; stroke-linecap: round; opacity: .55; }
.map-light { cursor: pointer; }
.map-glow { fill: var(--gold); opacity: .22; transform-box: fill-box; transform-origin: center; animation: map-glow 3.6s ease-in-out infinite; }
.map-dot { fill: var(--gold); stroke: var(--deep); stroke-width: .22; }
.map-light.is-online .map-dot { fill: var(--deep); stroke: var(--gold); stroke-width: .34; }
.map-hit { fill: transparent; }
.map-light:hover .map-dot { fill: var(--gold-soft); }
@keyframes map-glow { 50% { opacity: .06; transform: scale(1.4); } }
.world-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: .8rem; color: #a9c3c7; }
.legend-dot, .legend-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legend-dot { background: var(--gold); }
.legend-ring { margin-left: 6px; border: 1.5px solid var(--gold); }
.world-hint { flex-basis: 100%; }
.country-chips { list-style: none; display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 8px; scrollbar-width: none; contain: paint; }
.country-chips::-webkit-scrollbar { display: none; }
.country-chips button { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 6px 13px; border: 1px solid #ffffff2e; border-radius: 99px; background: #ffffff12; color: var(--white); font-size: .875rem; white-space: nowrap; }
.country-chips button:hover { background: #ffffff24; }
.country-chips small { font: 500 .75rem "DM Mono", monospace; color: var(--gold); }

/* --------------------------------------------------- igrejas: sedes ------ */

.world-seat { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 22px; padding: 22px 20px 20px; border: 1px solid #ebcd6f; border-radius: var(--radius); background: linear-gradient(150deg, #fffaea, #fbe9ad); color: var(--deep); box-shadow: 0 10px 28px #bd942024; }
.world-seat-rays { position: absolute; top: -90px; right: -90px; z-index: -1; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, #f3c5468c 0 14%, transparent 15%), repeating-conic-gradient(#e0a80047 0 5deg, transparent 5deg 16deg); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); mask-image: radial-gradient(circle, #000 25%, transparent 70%); }
.world-seat h2 { margin: 12px 0 4px; font-size: clamp(1.7rem, 7vw, 2.2rem); }
.world-seat-where { margin: 0 0 10px; color: #5c4a10; font-weight: 600; }
.world-seat-address { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; color: #4b411f; font-size: .9rem; line-height: 1.45; }
.world-seat-address .ui-icon { margin-top: 2px; color: #a57800; }
.world-seat .service-chip { background: #ffffffb3; }
.world-seat .service-chip.is-today { background: var(--deep); }
.world-seat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.world-seat .text-button { color: #6b4b00; }

.seat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; border-radius: 99px; font: 700 .75rem/1.2 "DM Sans", sans-serif; letter-spacing: .02em; white-space: nowrap; }
.seat-pill.seat-mundial { background: linear-gradient(90deg, #f0bd2e, #ffdf7e); color: #3d2c00; box-shadow: 0 2px 8px #bd942038; }
.seat-pill.seat-nacional { background: var(--deep); color: var(--gold); }
.seat-seal { flex: 0 0 auto; display: block; }
.seat-seal.seat-mundial .seal-disc { fill: #c98a00; }
.seat-seal.seat-mundial circle, .seat-seal.seat-mundial path:not(.seal-disc) { stroke: var(--white); }
.seat-seal.seat-nacional .seal-disc { fill: var(--gold); }
.seat-seal.seat-nacional path:not(.seal-disc) { fill: var(--deep); }

.church-card.is-seat { border-color: #ead38a; background: linear-gradient(180deg, #fffaf0, var(--white) 70%); box-shadow: inset 4px 0 0 var(--gold); }
.church-card.seat-mundial { border-color: #e0b73c; box-shadow: inset 4px 0 0 #d99a00, 0 6px 18px #bd942017; }
.church-head.is-seat .round-icon { background: #fff2c4; }
.church-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ------------------------------------------------ igrejas: dias de culto -- */

.service-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.service-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 10px; background: #eef3ef; color: var(--deep); font-size: .875rem; line-height: 1.25; }
.service-chip b { font: 700 .75rem "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: #22695f; }
.service-chip span { font-weight: 700; font-variant-numeric: tabular-nums; }
.service-chip i { font-style: normal; font-size: .8rem; color: var(--muted); }
.service-chip.is-today { background: var(--deep); color: var(--white); }
.service-chip.is-today b { color: var(--gold); }
.service-chip.is-today i { color: #c4d8dd; }
.day-chips { margin-top: 0; }
.card-line > span { min-width: 0; }
.card-address { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: .85rem; color: var(--muted); }
.country-flag { font-size: 1.3rem; line-height: 1; }
.country-group.is-online .country-heading .ui-icon { color: #22695f; }
.group-hint { margin: -4px 2px 12px; font-size: .875rem; }
#church-results { scroll-margin-top: 80px; }

.next-service { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--deep); color: var(--gold); }
.next-service span { display: grid; gap: 3px; font: 500 .75rem "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #a9c3c7; }
.next-service strong { font: 700 1.3rem/1.2 "Playfair Display", Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--gold); }
.service-table { width: 100%; border-collapse: collapse; }
.service-table th, .service-table td { padding: 9px 0; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: baseline; }
.service-table tr:last-child th, .service-table tr:last-child td { border-bottom: 0; }
.service-table th { font-weight: 600; color: var(--ink); }
.service-table th b { margin-left: 8px; padding: 2px 6px; border-radius: 6px; background: var(--deep); color: var(--gold); font: 500 .75rem "DM Mono", monospace; }
.service-table td { text-align: right; }
.service-table td strong { font: 700 1.15rem "Playfair Display", Georgia, serif; color: var(--deep); font-variant-numeric: tabular-nums; }
.service-table td small { display: block; font-size: .8rem; letter-spacing: 0; text-transform: none; font-family: "DM Sans", sans-serif; color: var(--muted); }
.service-table tr.is-today th, .service-table tr.is-today td strong { color: #0c4c5c; }
.leader-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.leader-list li { display: grid; gap: 2px; }
.leader-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.leader-contacts .strong-link { gap: 6px; }

/* --------------------------------------------------------------- ensinos -- */

.coming-soon { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 11px 14px; border-radius: 14px; background: var(--gold-soft); color: #5a4300; font-size: .9rem; line-height: 1.4; }
.coming-soon .ui-icon { color: #c48e00; }

/* ---------------------------------------------------- anúncios: vídeos ---- */

.post-videos { display: grid; gap: 10px; margin: 14px 0 4px; }
.post-video { display: block; overflow: hidden; border-radius: 16px; background: var(--deep); color: var(--white); }
.post-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b1f26; }
.post-video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-video-play { position: absolute; inset: 0; width: 60px; height: 60px; margin: auto; display: grid; place-items: center; padding-left: 3px; border-radius: 50%; background: #d6281cf0; color: var(--white); box-shadow: 0 6px 20px #00000066; }
.post-video-label { display: flex; align-items: center; gap: 6px; padding: 11px 14px; font-size: .875rem; font-weight: 600; }
.post-link { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sheet-hint .ui-icon { vertical-align: -2px; margin-right: 6px; color: var(--teal); }

@media (min-width: 700px) {
  .prophecy { min-height: 430px; justify-content: center; margin: 0 -34px 30px; padding: 40px 34px; }
  .prophecy::after { inset: 0 auto 0 0; width: 72%; height: auto; background: linear-gradient(90deg, var(--deep) 42%, transparent); }
  .prophecy-art { top: auto; bottom: 0; right: 3%; width: 46%; max-width: 360px; }
  .prophecy-copy { max-width: 56%; }
  .world-card { padding: 24px 26px 18px; }
  .world-hint { flex-basis: auto; margin-left: auto; }
  .country-chips { flex-wrap: wrap; margin: 0; padding: 2px 0 6px; }
  .post-videos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .map-glow, .live-chip.is-live .live-dot, .live-card.is-live .live-dot, .next-meeting.is-live .live-dot { animation: none; }
}

/* Portraits supplied by the ISTN team, with the face kept clear of the text. */
.hero { background: radial-gradient(ellipse at 78% 62%, #296573 0, transparent 55%), #062d3a; }
.hero-art img { width: min(74%, 350px); max-height: 430px; object-fit: contain; object-position: bottom; }
.hero-signature { position: absolute; z-index: 2; left: 6%; bottom: 88px; display: grid; color: #fff5dc; font-size: .8rem; letter-spacing: .06em; text-shadow: 0 2px 14px #062d3a; }
.hero-signature strong { font: 600 3.2rem/1.1 "Playfair Display", Georgia, serif; }
.teaching-intro { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fffaf0; }
.teaching-intro > img { width: 96px; height: 150px; object-fit: cover; object-position: 50% 43%; border-radius: 12px; }
.teaching-intro h1 { font-size: clamp(1.4rem, 4vw, 2.4rem); margin: 8px 0; }
.teaching-intro p { font-size: .85rem; margin: 0; }
.prophecy { min-height: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 22px; padding: 16px; border-radius: 18px; }
.prophecy::after, .prophecy-sun { display: none; }
.prophecy-art { position: static; width: 76px; max-width: none; z-index: auto; }
.prophecy-art img { height: 108px; width: 76px; object-fit: cover; object-position: 50% 40%; border-radius: 10px; mask-image: none; -webkit-mask-image: none; }
.prophecy-copy { max-width: none; }
.prophecy blockquote p { font-size: .92rem; line-height: 1.5; font-weight: 400; }
.prophecy blockquote p::before { display: none; }
.prophecy figcaption { font-size: .65rem; margin-top: 10px; }
@media (min-width: 700px) {
  .hero { min-height: 480px; }
  .hero-art img { width: min(100%, 350px); max-height: 450px; }
  .hero-signature { left: 20px; bottom: 28px; }
  .teaching-intro { grid-template-columns: 128px minmax(0, 1fr); gap: 24px; }
  .teaching-intro > img { width: 128px; height: 172px; }
}
@media (max-width: 360px) {
  .teaching-intro { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .teaching-intro > img { width: 68px; height: 136px; }
  .hero-signature { left: 3%; }
}

@media (min-width: 700px) { .hero h1 { font-size: 3rem; } }

/* Mobile portrait: reserve its own space; controls never cover the image. */
@media (max-width: 699px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 0; }
  .hero-copy, .hero-art { min-width: 0; }
  .home .post-list { grid-template-columns: minmax(0, 1fr); }
  .home .post-card { min-width: 0; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .hero p { font-size: .9rem; margin-bottom: 12px; }
  .hero-art { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: end; margin: 12px 0 0; }
  .hero-art img { grid-column: 2; grid-row: 1; width: 100%; height: clamp(220px, 34svh, 300px); max-height: none; object-fit: contain; object-position: bottom center; }
  .hero-signature { position: relative; grid-column: 1; grid-row: 1; align-self: center; justify-self: end; left: 24px; bottom: auto; font-size: .75rem; }
  .hero-signature strong { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-sun { left: 66%; top: 0; width: min(85vw, 330px); }
  .hero-actions { margin: 0 -20px; padding: 12px 20px 20px; background: none; }
  .hero-actions .button { flex: 1 1 0; min-width: 0; padding: 12px; font-size: .85rem; }
}