/* ===== Debre Hail Kidus Raguel Church — shared site styles
   (dark theme carried over from the Lucy Tech site; church additions at the end) ===== */

/* fonts: loaded from each page's <head> without blocking the page */

:root {
  --bg: #06090a;
  --bg-2: #0a0f0e;
  --surface: #101615;
  --surface-2: #1b2422;
  --white: #FFFFFF;
  --violet: #6366f1;
  --violet-light: #a5b4fc;
  --violet-pale: #c7d2fe;
  --violet-deep: #3730a3;
  --violet-darkest: #1e1b4b;
  --green: #10b981;
  --green-light: #6ee7b7;
  --green-deep: #065f46;
  --green-dark: #012e21;
  --gold: #ffb703;
  --gold-light: #ffd166;
  --gold-dark: #4a2e05;
  --teal: #06b6d4;
  --teal-light: #67e8f9;
  --teal-deep: #0e5e6d;
  --teal-dark: #062a30;
  --pink: #fb7185;
  --pink-deep: #881337;
  --blue: #60a5fa;
  --blue-deep: #1e3a8a;
  --orange: #f59e0b;
  --orange-deep: #78350f;
  --ink: #F4F4F5;
  --ink-soft: #A1A1AA;
  --ink-faint: #8A8A93;
  --line: #1e2624;
  --line-light: #384542;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', 'Noto Sans Ethiopic', -apple-system, BlinkMacSystemFont, sans-serif;
  --ethiopic: 'Noto Sans Ethiopic', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(ellipse 900px 500px at 12% 0%, rgba(15,191,133,0.11), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,183,3,0.07), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(99,102,241,0.05), transparent 65%),
    var(--bg);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

/* Faint engineering blueprint grid — the technical texture behind every section */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 { font-family: var(--serif); margin: 0; color: var(--white); font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* Ambient glow accents — the site's one recurring signature motif */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: auroraDrift 14s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -4%) scale(1.08); }
  100% { transform: translate(-3%, 3%) scale(0.96); }
}
.glow-violet { background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%); }
.glow-green { background: radial-gradient(circle, rgba(16,185,129,0.22), transparent 70%); }
.glow-teal { background: radial-gradient(circle, rgba(6,182,212,0.3), transparent 70%); }
.glow-pink { background: radial-gradient(circle, rgba(251,113,133,0.26), transparent 70%); animation-delay: -6s; }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9,9,11,0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-nav .inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--white); }
.brand .mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 20px rgba(99,102,241,0.5);
  position: relative;
}
.brand .mark-wrap {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand .mark-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.85), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine {
  0% { left: -150%; }
  35% { left: 150%; }
  100% { left: 150%; }
}
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.nav-links a:hover, .nav-links a.current { color: var(--white); }
.nav-cta {
  background: linear-gradient(135deg, var(--green) -10%, var(--green-deep) 100%);
  color: var(--white) !important;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 10.5px;
  box-shadow: 0 0 14px rgba(16,185,129,0.3);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-cta:hover { filter: brightness(1.1); }
@media (max-width: 640px) {
  .nav-cta { padding: 3px 8px; font-size: 9px; border-radius: 5px; }
}
@media (max-width: 400px) {
  .nav-cta { padding: 2px 6px; font-size: 8px; border-radius: 5px; }
}
.nav-contact { position: relative; display: inline-flex; }
.nav-contact-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--surface, #17140f);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 200;
}
.nav-contact-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-contact-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white, #fff) !important;
  white-space: nowrap;
}
.nav-contact-option:hover { background: rgba(255,255,255,0.08); }
.nav-contact-option svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
.nav-toggle { display: none; }
.lang-toggle { display: flex; gap: 4px; background: var(--surface); border-radius: 7px; padding: 3px; }
.lang-btn {
  background: transparent; border: none; color: var(--ink-faint);
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 5px;
  cursor: pointer; font-family: var(--sans);
}
.lang-btn.active { background: var(--green); color: var(--white); }
@media (max-width: 480px) {
  .lang-toggle { gap: 2px; }
  .lang-btn { padding: 6px 8px; font-size: 11px; }
}

.nav-signin { font-weight: 600; color: var(--white) !important; }
.nav-links-mobile-cta { display: none; }
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; background: none; border: none; font-size: 22px; color: var(--white); cursor: pointer; padding: 4px 2px; line-height: 1; flex-shrink: 0; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--bg-2); padding: 20px; gap: 18px;
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-links-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
  .nav-links-mobile-cta .btn { width: 100%; justify-content: center; }
  .site-nav .inner { height: 64px; gap: 10px; }
  .nav-cta { display: none !important; }
  .brand { font-size: 16px; gap: 8px; white-space: nowrap; }
  .brand .mark-wrap { flex-shrink: 0; }
  .lang-toggle { flex-shrink: 0; }
}
@media (max-width: 380px) {
  .lang-toggle { gap: 1px; padding: 2px; }
  .lang-btn { padding: 5px 6px; font-size: 10px; }
  .brand { font-size: 14px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 9px;
  font-weight: 600; font-size: 15px; cursor: pointer; border: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: linear-gradient(135deg, var(--gold-light) -10%, var(--green) 55%, var(--green-deep) 130%); color: var(--white); box-shadow: 0 0 30px rgba(16,185,129,0.4); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 0 40px rgba(16,185,129,0.55); }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid var(--line-light); }
.btn-outline:hover { border-color: var(--green); background: rgba(16,185,129,0.08); }
.btn-ghost-light { background: rgba(255,255,255,0.06); color: var(--white); border: 1.5px solid rgba(255,255,255,0.16); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-2); color: var(--ink-soft); padding: 64px 0 32px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.footer-grid h4 { color: var(--white); font-size: 13px; margin-bottom: 16px; font-family: var(--sans); font-weight: 600; }
.footer-grid a, .footer-grid p { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.footer-grid a:hover { color: var(--green-light); }
.footer-telegram { display: flex !important; align-items: center; gap: 8px; }
.footer-telegram svg { flex-shrink: 0; color: var(--green-light); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Section helpers ---------- */
.section { padding: 96px 0; position: relative; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--bg-2); }
.section-surface { background: var(--surface); }

.kicker {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--green-light);
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 9px;
}
.kicker::before {
  content: ''; width: 7px; height: 7px; background: var(--green); border-radius: 2px;
  box-shadow: 0 0 10px rgba(16,185,129,0.8); flex-shrink: 0;
}
.kicker.gold { color: var(--gold-light); }
.kicker.gold::before { background: var(--gold); box-shadow: 0 0 10px rgba(255,183,3,0.8); }
.kicker.violet { color: var(--violet-pale); }
.kicker.violet::before { background: var(--violet-light); box-shadow: 0 0 10px rgba(165,180,252,0.8); }

/* ---------- 3D glossy icon badges — used to give each portal a distinct "picture" identity ---------- */
.icon3d {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
}
.icon3d::before {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.icon3d svg { width: 24px; height: 24px; color: #fff; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.icon3d:hover { transform: perspective(300px) rotateX(10deg) rotateY(-10deg) translateY(-3px); }

.icon3d.violet { background: linear-gradient(155deg, var(--violet-light), var(--violet-deep)); box-shadow: 0 12px 26px -12px rgba(99,102,241,0.6), inset 0 1px 0 rgba(255,255,255,0.2); }
.icon3d.green  { background: linear-gradient(155deg, #3be6a8, var(--green-dark)); box-shadow: 0 12px 26px -12px rgba(16,185,129,0.55), inset 0 1px 0 rgba(255,255,255,0.2); }
.icon3d.blue   { background: linear-gradient(155deg, var(--blue), var(--blue-deep)); box-shadow: 0 12px 26px -12px rgba(96,165,250,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.icon3d.pink   { background: linear-gradient(155deg, var(--pink), var(--pink-deep)); box-shadow: 0 12px 26px -12px rgba(251,113,133,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.icon3d.gold   { background: linear-gradient(155deg, var(--gold-light), var(--gold-dark)); box-shadow: 0 12px 26px -12px rgba(255,183,3,0.55), inset 0 1px 0 rgba(255,255,255,0.2); }
.icon3d.teal   { background: linear-gradient(155deg, var(--teal), var(--teal-deep)); box-shadow: 0 12px 26px -12px rgba(6,182,212,0.55), inset 0 1px 0 rgba(255,255,255,0.2); }
.icon3d.orange { background: linear-gradient(155deg, var(--orange), var(--orange-deep)); box-shadow: 0 12px 26px -12px rgba(245,158,11,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }

/* ---------- Portal icon strip (picture-style summary of the 7 portals) ---------- */
/* ---------- Portal icon strip (picture-style summary of the 7 portals) ---------- */
.portal-icon-row { display: flex; gap: 46px; }
.portal-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  flex-shrink: 0; width: 96px;
  animation: iconFloat3d 4.5s ease-in-out infinite;
}
.portal-icon-item:nth-child(2n) { animation-delay: -1.1s; }
.portal-icon-item:nth-child(3n) { animation-delay: -2.3s; }
.portal-icon-item:nth-child(4n) { animation-delay: -3.4s; }
@keyframes iconFloat3d {
  0%, 100% { transform: perspective(500px) translateY(0) rotateY(0deg) rotateX(0deg); }
  50% { transform: perspective(500px) translateY(-7px) rotateY(10deg) rotateX(4deg); }
}
.portal-icon-item span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.portal-icon-item .icon3d { width: 58px; height: 58px; }
.portal-icon-item .icon3d svg { width: 26px; height: 26px; }

/* ---------- Infinite marquee — portals and capability pills flow in opposite directions ---------- */
.marquee-viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track.marquee-left { animation: marqueeLeft 34s linear infinite; }
.marquee-track.marquee-right { animation: marqueeRight 30s linear infinite; }
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .portal-icon-item { animation: none !important; }
}
@media (max-width: 700px) {
  .portal-icon-row { gap: 30px; }
  .portal-icon-item { width: 78px; }
}

/* ---------- Floating phone/app mockup (hero) — superseded by .phone-standalone in index.html ---------- */
.hero-visual { position: relative; }

/* ---------- Technical card: corner-bracket motif borrowed from engineering-platform UI ---------- */
.tech-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  border-radius: 4px;
}
.tech-card::before, .tech-card::after,
.tech-card .tc-corner-tl, .tech-card .tc-corner-br { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.tech-card::before { top: -1px; left: -1px; border-top: 2px solid var(--green-light); border-left: 2px solid var(--green-light); }
.tech-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--green-light); border-right: 2px solid var(--green-light); }
.tech-card.gold::before { border-color: var(--gold); }
.tech-card.gold::after { border-color: var(--gold); }

/* Extend the corner-bracket treatment to the site's existing card components */
.compare-card, .quick-stat, .book-card {
  position: relative;
}
.compare-card::before, .quick-stat::before, .book-card::before,
.compare-card::after, .quick-stat::after, .book-card::after {
  content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.compare-card::before, .quick-stat::before, .book-card::before { top: -1px; left: -1px; border-top: 2px solid var(--green-light); border-left: 2px solid var(--green-light); }
.compare-card::after, .quick-stat::after, .book-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--green-light); border-right: 2px solid var(--green-light); }
.compare-card:hover::before, .compare-card:hover::after,
.quick-stat:hover::before, .quick-stat:hover::after,
.book-card:hover::before, .book-card:hover::after { opacity: 1; }
.book-card::before, .book-card::after { border-color: var(--gold); }

h1.display { font-size: 56px; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); }
h2.display { font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; color: var(--white); }
h3.display { font-size: 26px; line-height: 1.25; color: var(--white); }

.lede { font-size: 19px; color: var(--ink-soft); line-height: 1.6; max-width: 640px; }

@media (max-width: 720px) {
  h1.display { font-size: 38px; }
  h2.display { font-size: 30px; }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > * { animation: fadeUp 0.6s ease both; }
.reveal-stagger.in > *:nth-child(1) { animation-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { animation-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger.in > *:nth-child(4) { animation-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.fade-swap { animation: fadeSwap 0.35s ease; }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(99,102,241,0.35); }
  50% { box-shadow: 0 0 50px rgba(99,102,241,0.6); }
}
.pulse { animation: pulseGlow 2.6s ease-in-out infinite; }


/* ── Accessibility fix ────────────────────────────────────────────────────
   The active language pill was #fff on #10b981, which measures 2.54:1 —
   well below the 4.5:1 WCAG AA floor for text this size. Dark ink on the
   same green measures 6.57:1 and keeps the pill visually identical.        */
.lang-btn.active { color: #04231a; }


/* =====================================================================
   Church edition additions
   ===================================================================== */
.site-nav .nav-links { gap: 22px; font-size: 14.5px; }
@media (max-width: 1080px) { .site-nav .nav-links { gap: 16px; font-size: 14px; } }
.brand .mark { box-shadow: 0 0 20px rgba(255,183,3,0.35); }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand .brand-text small { font-family: var(--ethiopic); font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
@media (max-width: 420px) { .brand .brand-text small { display: none; } }

.page-hero { padding: 76px 0 60px; position: relative; overflow: hidden; }
.page-hero .glow { width: 520px; height: 520px; top: -220px; right: -160px; }
.page-hero .lede { margin-top: 16px; }
.am-name { font-family: var(--ethiopic); font-size: 20px; color: var(--gold-light); margin-top: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, #d98e04); color: #1a1203; box-shadow: 0 0 26px rgba(255,183,3,0.28); }
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-2px); }

.today-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 34px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px; color: var(--ink-soft); width: fit-content; max-width: 100%; }
.today-strip .today-eth { color: var(--white); font-weight: 600; }
.today-strip .today-fast { color: var(--teal-light); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .card-grid, .card-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid, .card-grid.two, .card-grid.four { grid-template-columns: 1fr; } }
.info-card { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.info-card h3 { font-size: 19px; }
.info-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
.info-card .more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--gold-light); }
.info-card .more:hover { color: var(--white); }

.placeholder { font-family: var(--mono); font-size: .92em; color: var(--gold-light);
  background: rgba(255,183,3,0.08); border: 1px dashed rgba(255,183,3,0.4); border-radius: 5px; padding: 1px 6px; }

.times { width: 100%; border-collapse: collapse; margin-top: 34px; font-size: 15px; }
.times th, .times td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.times th { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.times td:first-child { color: var(--white); font-weight: 600; width: 34%; }
.times td small { display: block; color: var(--ink-faint); font-weight: 400; margin-top: 3px; font-size: 13px; }
@media (max-width: 640px) {
  .times, .times tbody, .times tr, .times td { display: block; width: 100%; }
  .times thead { display: none; }
  .times tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .times td { border: none; padding: 3px 0; }
  .times td:first-child { width: 100%; }
}

.cal-list { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.cal-row { display: grid; grid-template-columns: 250px 1fr auto; gap: 16px; align-items: center;
  padding: 15px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cal-row.feast { border-left: 3px solid var(--gold); }
.cal-row.fast { border-left: 3px solid var(--teal); }
.cal-when { display: flex; flex-direction: column; gap: 2px; }
.cal-eth { color: var(--white); font-weight: 600; font-size: 14px; }
.cal-greg { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.cal-title { color: var(--ink); font-size: 15px; }
.cal-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; }
.cal-tag.feast { background: var(--gold-dark); color: var(--gold-light); }
.cal-tag.fast { background: var(--teal-dark); color: var(--teal-light); }
.cal-empty { color: var(--ink-faint); }
@media (max-width: 720px) { .cal-row { grid-template-columns: 1fr auto; } .cal-when { grid-column: 1 / -1; } }

.note-box { margin-top: 30px; padding: 18px 20px; border-radius: 12px; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.note-box strong { color: var(--white); }

.contact-list { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.contact-item { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.contact-item .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
@media (max-width: 520px) { .contact-item { grid-template-columns: 1fr; gap: 4px; } }
.map-ph { margin-top: 30px; height: 260px; border-radius: 14px; border: 1px dashed var(--line-light);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px), var(--surface);
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 14px; text-align: center; padding: 20px; }

.cta-band { text-align: center; background: linear-gradient(135deg, var(--gold-dark), var(--bg-2) 70%); }
.cta-band .lede { margin: 14px auto 28px; text-align: center; }

[lang="am"] body, .ethiopic { font-family: var(--ethiopic); }
@media (max-width: 640px) { .container { padding: 0 16px; } .section { padding: 64px 0; } }
/* Compact calendar rows inside cards (home page "Coming up") */
.info-card .cal-row { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 14px; }
.info-card .cal-when { grid-column: 1 / -1; }
.info-card .cal-title { font-size: 14px; }

/* =====================================================================
   Map embed + virtual tour
   ===================================================================== */
.map-embed { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: block; }
.footer-grid a { overflow-wrap: anywhere; }
.brand .mark { background: #fff; object-fit: contain; }
@media (max-width: 1180px) { .site-nav .nav-links { gap: 13px; font-size: 13.5px; } }

.tour-player { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .tour-player { grid-template-columns: minmax(0, 1fr); } }
.tour-stage-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: #050707; aspect-ratio: 16 / 10; width: 100%; }
.tour-stage-wrap:fullscreen { border-radius: 0; aspect-ratio: auto; }
.tour-stage, .tour-pano, .tour-video, .tour-photo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-photo { object-fit: cover; }
.tour-media-badge { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(6,9,10,.72); color: var(--gold-light); border: 1px solid rgba(255,183,3,.35); pointer-events: none; }
.tour-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.08); z-index: 3; }
.tour-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transition: width .4s ease; }
.tour-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 24px; color: var(--gold-light);
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(255,183,3,.16), transparent 70%),
    repeating-radial-gradient(circle at 50% 42%, rgba(255,209,102,.06) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #121a18, #06090a); }
.tour-ph-icon { filter: drop-shadow(0 0 22px rgba(255,183,3,.35)); animation: tourFloat 6s ease-in-out infinite; }
.tour-ph-title { font-family: var(--serif); font-size: 26px; color: var(--white); }
.tour-ph-note { font-size: 13.5px; color: var(--ink-soft); max-width: 360px; }
@keyframes tourFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .tour-ph-icon { animation: none; } .tour-progress span { transition: none; } }

.tour-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.tour-count-row { display: flex; align-items: center; justify-content: space-between; }
.tour-count { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.tour-title { font-size: 26px; line-height: 1.2; }
.tour-narration { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; flex: 1; }
.tour-voice-note { font-size: 13px; color: var(--teal-light); }
.tour-controls { display: flex; gap: 10px; align-items: center; }
.tour-controls.secondary { gap: 8px; flex-wrap: wrap; }
.tour-btn { padding: 11px 16px; font-size: 20px; line-height: 1; }
.tour-play { flex: 1; justify-content: center; }
.tour-play .ico { font-size: 12px; }
.tour-small { padding: 8px 14px; font-size: 13px; }
#tourListen.on { border-color: var(--gold); color: var(--gold-light); background: rgba(255,183,3,.08); }

.tour-stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.tour-stop { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s ease, transform .15s ease; }
.tour-stop:hover { border-color: var(--line-light); transform: translateY(-2px); }
.tour-stop.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,183,3,.35); }
.tour-stop:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.tour-stop-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--gold-light); background: radial-gradient(ellipse at 50% 40%, rgba(255,183,3,.14), transparent 70%), #0b1110; }
.tour-stop-n { position: absolute; top: 6px; left: 7px; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.tour-stop-tag { position: absolute; top: 6px; right: 7px; font-family: var(--mono); font-size: 10px; color: var(--teal-light); }
.tour-stop-name { font-size: 13.5px; line-height: 1.35; }

/* =====================================================================
   Photos: home hero, home strip, gallery + lightbox
   ===================================================================== */
.home-hero { background:
    linear-gradient(90deg, rgba(6,9,10,.96) 0%, rgba(6,9,10,.86) 45%, rgba(6,9,10,.45) 100%),
    url("/assets/gallery/bg/cathedral-dome.webp") right 30% / cover no-repeat; }
@media (max-width: 720px) { .home-hero { background:
    linear-gradient(180deg, rgba(6,9,10,.80), rgba(6,9,10,.95)),
    url("/assets/gallery/bg/cathedral-dome-m.webp") center / cover no-repeat; } }

.home-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px 0 26px; }
.home-strip a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; }
.home-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.home-strip a:hover img { transform: scale(1.04); }
@media (max-width: 720px) { .home-strip { grid-template-columns: repeat(2, 1fr); } }

.gal-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-filter { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font: 600 13.5px/1 var(--sans);
  padding: 9px 15px; border-radius: 999px; cursor: pointer; }
.gal-filter:hover { color: var(--white); border-color: var(--line-light); }
.gal-filter.active { background: var(--gold); border-color: var(--gold); color: #1a1203; }
.gal-count { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.gal-grid { columns: 3 300px; column-gap: 16px; }
.gal-item { position: relative; display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--surface); cursor: zoom-in; break-inside: avoid; }
.gal-item img { width: 100%; height: auto; display: block; transition: transform .45s ease, filter .3s ease; }
.gal-item:hover img { transform: scale(1.03); }
.gal-item:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; text-align: left; font-size: 13px; line-height: 1.4;
  color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease; }
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; transform: none; }
@media (hover: none) { .gal-cap { opacity: 1; transform: none; } }

.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(3,5,5,.94); display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-figure img { max-width: min(1200px, 100%); max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); transition: opacity .2s ease; }
.lb-figure img.loading { opacity: .35; }
.lb-figure figcaption { display: flex; gap: 16px; align-items: baseline; color: var(--ink); font-size: 14.5px; text-align: center; max-width: 760px; }
.lb-count { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.lb-btn { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer;
  border-radius: 999px; width: 46px; height: 46px; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lb-btn:hover { background: rgba(255,255,255,.16); }
.lb-close { top: 14px; right: 14px; font-size: 18px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lightbox { padding: 60px 8px 20px; } .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; }
  .lb-figure img { max-height: calc(100vh - 190px); } }
/* tour photos: whole picture visible, blurred copy fills the frame */
.tour-photo { object-fit: contain; z-index: 1; }
.tour-photo-bg { position: absolute; inset: -30px; background-size: cover; background-position: center;
  filter: blur(26px) brightness(.45) saturate(1.1); }
.site-nav .nav-links a { white-space: nowrap; }
@media (min-width: 1101px) { .site-nav .nav-links { gap: 16px; font-size: 14px; } }
.tour-stop-thumb.has-photo { background-size: cover; background-position: center; }
.tour-stop-thumb.has-photo svg { display: none; }
.tour-stop-thumb.has-photo .tour-stop-n { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* =====================================================================
   LIGHT THEME (default)
   The site was built on dark tokens; these override them. Note that
   --white is used as "strongest text colour" throughout, so in the light
   theme it is a deep ink, not white.
   ===================================================================== */
:root {
  --bg: #fbf8f2;          /* warm ivory */
  --bg-2: #f4eee3;
  --surface: #ffffff;
  --surface-2: #f6f1e7;
  --white: #1d1710;       /* headings / strongest text */
  --ink: #2b241b;
  --ink-soft: #5a5044;
  --ink-faint: #74695a;
  --line: #e7dece;
  --line-light: #cfc2aa;
  --gold-light: #8a5a00;  /* gold used as TEXT → darkened for contrast */
  --gold-dark: #fbefd2;   /* gold used as TINT background */
  --teal-light: #0b6b78;
  --teal-dark: #dcf2f5;
  --green-light: #0b7a55;
  --green-dark: #dff5ec;
  color-scheme: light;
}
body {
  background:
    radial-gradient(ellipse 900px 500px at 10% 0%, rgba(255,183,3,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 8%, rgba(16,185,129,0.06), transparent 60%),
    var(--bg);
}
body::before {
  background-image:
    linear-gradient(rgba(60,40,10,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,40,10,0.045) 1px, transparent 1px);
}
.site-nav { background: rgba(251,248,242,0.88); }
.nav-links.open { background: var(--surface); box-shadow: 0 14px 30px rgba(60,40,10,.12); }
.nav-toggle { color: var(--white) !important; }
.brand .mark { box-shadow: 0 2px 10px rgba(60,40,10,0.18); }
.tech-card { background: var(--surface); box-shadow: 0 1px 2px rgba(60,40,10,.05); }
.tech-card::before, .tech-card::after { border-color: var(--gold) !important; }
.btn-primary, .btn-gold { background: linear-gradient(135deg, #f8cd5c, #e9a91e 60%, #d88f05); color: #231503; box-shadow: 0 6px 18px rgba(217,143,5,0.28); }
.btn-outline { border-color: var(--line-light); }
.btn-outline:hover { border-color: var(--gold); background: rgba(255,183,3,0.10); }
.kicker::before, .kicker.gold::before { box-shadow: none; }
.lang-toggle { background: var(--surface-2); border: 1px solid var(--line); }
.lang-btn { color: var(--ink-soft); }
.lang-btn.active { background: var(--gold); color: #231503; }
.glow { opacity: .45; }
.today-strip, .note-box, .tour-panel, .tour-stop, .gal-filter, .cal-row, .gal-item, .home-strip a, .map-embed {
  box-shadow: 0 1px 2px rgba(60,40,10,.05); }
.cta-band { background: linear-gradient(135deg, #f9e9c2, var(--bg-2) 70%); }
.home-hero { background:
    linear-gradient(90deg, rgba(251,248,242,.98) 0%, rgba(251,248,242,.92) 42%, rgba(251,248,242,.35) 100%),
    url("/assets/gallery/bg/cathedral-dome.webp") right 30% / cover no-repeat; }
@media (max-width: 720px) { .home-hero { background:
    linear-gradient(180deg, rgba(251,248,242,.90), rgba(251,248,242,.97)),
    url("/assets/gallery/bg/cathedral-dome-m.webp") center / cover no-repeat; } }
.am-name { color: #8a5a00; }
.map-ph { background: repeating-linear-gradient(45deg, rgba(60,40,10,0.03) 0 12px, transparent 12px 24px), var(--surface); }
.tour-stop-thumb { background: radial-gradient(ellipse at 50% 40%, rgba(255,183,3,.18), transparent 70%), #f6efe2; }
/* media stages stay dark (photos, video, 360°) */
.tour-ph-title { color: #fff; }
.tour-ph-note { color: #d6cfc2; }
.tour-ph { color: #ffd166; }
.site-footer { background: var(--bg-2); }
.footer-grid a:hover { color: #8a5a00; }

/* social icons */
.social { display: flex; gap: 10px; margin-top: 6px; }
.footer-grid .social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; margin: 0;
  border-radius: 999px; border: 1px solid var(--line-light); color: var(--ink); background: var(--surface); }
.footer-grid .social a:hover { border-color: var(--gold); color: #8a5a00; }
.btn svg { flex-shrink: 0; }

/* =====================================================================
   Live
   ===================================================================== */
.nav-live { display: inline-flex; align-items: center; gap: 6px; }
.nav-live.is-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e0242c; box-shadow: 0 0 0 3px rgba(224,36,44,.18); animation: livePulse 1.6s ease-in-out infinite; }
@media (min-width: 1101px) { .nav-links .nav-secondary { display: none; } }
.live-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px;
  background: #c8102e; color: #fff !important; font-size: 14px; position: relative; z-index: 101; text-align: center; }
.live-banner strong { letter-spacing: .08em; font-size: 12.5px; }
.live-banner-cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.live-banner:hover { background: #a90d26; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; display: inline-block; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot, .nav-live.is-live::before { animation: none; } }
.live-hero { padding-bottom: 30px; }
.live-status p { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-soft); font-size: 16px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  padding: 6px 12px; border-radius: 999px; background: #c8102e; color: #fff; }
.live-pill.soon { background: #fbefd2; color: #8a5a00; }
.live-pill.off { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.live-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0d0d0d;
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(60,40,10,.18); }
.live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-title { margin-top: 14px; font-weight: 600; color: var(--white); }
.live-status p[hidden] { display: none; }

/* =====================================================================
   Ethiopian tricolour + Psalm 68:31
   ===================================================================== */
:root { --et-green: #078930; --et-yellow: #FCDD09; --et-red: #DA121A; }
.tricolor, .site-nav::after, .site-footer::before {
  background: linear-gradient(90deg, var(--et-green) 0 33.33%, var(--et-yellow) 33.33% 66.66%, var(--et-red) 66.66% 100%); }
.site-nav { border-bottom: none; }
.site-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; }
.site-footer { position: relative; border-top: none; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; }

.verse-band { position: relative; padding: 46px 0; background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.verse-band::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(7,137,48,.07), transparent 60%),
              radial-gradient(ellipse 60% 120% at 100% 50%, rgba(218,18,26,.06), transparent 60%); }
.verse-inner { display: flex; align-items: center; gap: 34px; position: relative; }
.flag { width: 120px; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(60,40,10,.18));
  transform-origin: 4px 50%; animation: flagSway 6s ease-in-out infinite; }
@keyframes flagSway { 0%,100% { transform: rotate(0deg) skewY(0deg); } 50% { transform: rotate(-1.2deg) skewY(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .flag { animation: none; } }
.verse { margin: 0; }
.verse-am { font-family: var(--ethiopic); font-size: 30px; font-weight: 700; color: var(--white); line-height: 1.35; }
.verse-en { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink-soft); margin-top: 6px; }
.verse cite { display: inline-block; margin-top: 12px; font-style: normal; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; }
@media (max-width: 640px) {
  .verse-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .flag { width: 92px; }
  .verse-am { font-size: 23px; }
  .verse-en { font-size: 17px; }
}

/* Long waving ribbon flag (shape from the sketch); the Amharic verse runs
   along the yellow stripe. English + citation sit underneath. */
.flag-verse { position: relative; padding: 28px 0 40px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(138,90,0,.06)); }
.ribbon { display: block; width: 100%; max-width: 1400px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 10px 16px rgba(60,40,10,.22)); }
.ribbon-bands { transform-origin: 2% 50%; animation: ribbonWave 7s ease-in-out infinite; }
@keyframes ribbonWave { 0%,100% { transform: skewY(0deg) scaleY(1); } 50% { transform: skewY(-.8deg) scaleY(1.03); } }
@media (prefers-reduced-motion: reduce) { .ribbon-bands { animation: none; } }
.ribbon-emblem image { image-rendering: auto; }
.ribbon-verse { font-family: var(--ethiopic); font-weight: 700; font-size: 25px; fill: #1d1608; letter-spacing: .5px; }
.flag-verse .verse { margin: 4px auto 0; }
.flag-verse .verse-am-mobile { display: none; }
.flag-verse .verse-en { color: var(--ink-soft); font-size: 21px; }
.flag-verse .verse cite { color: #8a5a00; }
@media (max-width: 720px) {
  .ribbon-verse { display: none; }                 /* too small to read on phones */
  .flag-verse .verse-am-mobile { display: block; font-size: 23px; margin-top: 8px; }
  .flag-verse .verse-en { font-size: 17px; }
}

/* Warmer parchment background instead of near-white */
:root {
  --bg: #f3e9d6;
  --bg-2: #ecdfc6;
  --surface: #fcf7ee;
  --surface-2: #f4ead8;
  --line: #e0d1b4;
  --line-light: #cdb994;
}
.site-nav { background: rgba(243,233,214,.9); }
.home-hero { background:
    linear-gradient(90deg, rgba(243,233,214,.98) 0%, rgba(243,233,214,.92) 42%, rgba(243,233,214,.35) 100%),
    url("/assets/gallery/bg/cathedral-dome.webp") right 30% / cover no-repeat; }
@media (max-width: 720px) { .home-hero { background:
    linear-gradient(180deg, rgba(243,233,214,.90), rgba(243,233,214,.97)),
    url("/assets/gallery/bg/cathedral-dome-m.webp") center / cover no-repeat; } }

/* =====================================================================
   ROYAL PURPLE & GOLD THEME (chosen) — purple menu/footer, lavender page
   Mid-tone: coloured, not dark. Overrides the parchment tokens above.
   ===================================================================== */
:root {
  --bg: #e9e2ee;          /* soft lavender */
  --bg-2: #ddd2e6;
  --surface: #faf7fc;     /* near-white lavender cards */
  --surface-2: #efe8f4;
  --line: #cdbfdb;
  --line-light: #b7a5c9;
  --white: #3a1d52;       /* headings: deep purple */
  --ink: #251a2e;
  --ink-soft: #54465e;
  --ink-faint: #6f6178;
  --burgundy: #5a2f7d;
  --burgundy-2: #3e2256;
  --gold-text: #ffd57a;
}
/* menu */
.site-nav { background: rgba(62,34,86,.97); }
.site-nav .brand, .site-nav .brand .brand-text { color: #fff6e6; }
.site-nav .brand .brand-text small { color: #e9c98f; }
.site-nav .nav-links a { color: #ececec; }
.site-nav .nav-links a:hover, .site-nav .nav-links a.current { color: var(--gold-text); }
.site-nav .nav-signin { color: var(--gold-text) !important; }
.site-nav .lang-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.site-nav .lang-btn { color: #ececec; }
.site-nav .lang-btn.active { background: var(--gold); color: #2a1404; }
.nav-toggle { color: #fff6e6 !important; }
.nav-links.open { background: var(--burgundy-2) !important; border-bottom-color: rgba(255,255,255,.12) !important; }
.nav-links-mobile-cta { border-top-color: rgba(255,255,255,.15) !important; }
/* page */
body { background:
    radial-gradient(ellipse 900px 520px at 8% 0%, rgba(90,47,125,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,183,3,.12), transparent 60%),
    var(--bg); }
body::before { background-image:
    linear-gradient(rgba(90,47,125,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,47,125,0.05) 1px, transparent 1px); }
.home-hero { background:
    linear-gradient(90deg, rgba(233,226,238,.97) 0%, rgba(233,226,238,.90) 42%, rgba(233,226,238,.25) 100%),
    url("/assets/gallery/bg/cathedral-dome.webp") right 30% / cover no-repeat; }
@media (max-width: 720px) { .home-hero { background:
    linear-gradient(180deg, rgba(233,226,238,.88), rgba(233,226,238,.97)),
    url("/assets/gallery/bg/cathedral-dome-m.webp") center / cover no-repeat; } }
.kicker.gold, .verse cite, .flag-verse .verse cite { color: #5a2f7d; }
.kicker.gold::before { background: var(--burgundy); }
.btn-outline { border-color: var(--line-light); color: var(--burgundy-2); }
.btn-outline:hover { border-color: var(--burgundy); background: rgba(90,47,125,.07); }
.info-card .more, .footer-grid a:hover { color: #5a2f7d; }
.tech-card::before, .tech-card::after { border-color: var(--burgundy) !important; }
.today-strip .today-eth { color: var(--burgundy-2); }
/* calls to action: burgundy band with light text */
.cta-band { background: linear-gradient(135deg, #6b3a8f, #3e2256 70%); }
.cta-band h2, .cta-band .display { color: #fff6e6 !important; }
.cta-band .lede { color: #ececec; }
.cta-band .btn-outline { color: #fff6e6; border-color: rgba(255,255,255,.35); }
/* footer */
.site-footer { background: var(--burgundy-2); color: #dedede; }
.footer-grid h4 { color: var(--gold-text) !important; }
.footer-grid a, .footer-grid p { color: #e8e8e8 !important; }
.footer-grid a:hover { color: var(--gold-text) !important; }
.footer-grid { border-bottom-color: rgba(255,255,255,.14); }
.footer-bottom { color: #c4c4c4; }
.footer-grid .social a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #fff6e6 !important; }
/* gallery filter / tour accents */
.gal-filter.active { background: var(--burgundy); border-color: var(--burgundy); color: #fff6e6; }
.tour-stop.active { border-color: var(--burgundy); box-shadow: 0 0 0 1px rgba(90,47,125,.35); }
.tour-progress span { background: linear-gradient(90deg, #ffd57a, #f1a90f); }

/* =====================================================================
   DARK + PHOTOS THEME (current)
   Black, charcoal & white base with gold accents; brightness comes from parish photos used as
   section and header backgrounds. Overrides every theme block above.
   ===================================================================== */
:root {
  --bg: #0d0d0d;
  --bg-2: #141414;
  --surface: #1c1c1c;
  --surface-2: #242424;
  --white: #ffffff;
  --ink: #f5f5f5;
  --ink-soft: #d6d6d6;
  --ink-faint: #a8a8a8;
  --line: #2e2e2e;
  --line-light: #4a4a4a;
  --gold-light: #ffd57a;
  --gold-dark: #3d2b0c;
  --teal-light: #e6e6e6;
  --teal-dark: #2a2a2a;
  --green-light: #7be3b5;
  --burgundy: #9a9a9a;
  --burgundy-2: #111111;
  color-scheme: dark;
}
body { background:
    radial-gradient(ellipse 900px 520px at 8% 0%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,183,3,.10), transparent 60%),
    var(--bg); color: var(--ink); }
body::before { background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); }
.site-nav { background: rgba(10,10,10,.88) !important; }
.site-nav .nav-links a { color: #eeeeee; }
.nav-links.open { background: #111111 !important; }
.kicker.gold, .verse cite, .flag-verse .verse cite { color: var(--gold-light) !important; }
.kicker.gold::before { background: var(--gold) !important; }
.btn-outline { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: rgba(10,10,10,.25); backdrop-filter: blur(4px); }
.btn-outline:hover { border-color: var(--gold) !important; background: rgba(255,183,3,.12); }
.info-card .more { color: var(--gold-light); }
.tech-card { background: rgba(28,28,28,.78) !important; backdrop-filter: blur(6px); border-color: rgba(255,255,255,.12) !important; }
.tech-card::before, .tech-card::after { border-color: var(--gold) !important; }
.today-strip, .note-box, .tour-panel, .tour-stop, .gal-filter, .cal-row, .contact-item, .map-embed {
  background-color: rgba(28,28,28,.82); box-shadow: none; }
.contact-item { background: transparent; }
.today-strip .today-eth { color: #fff; }
.cal-tag.feast { background: #4a3510; color: #ffd57a; }
.placeholder { color: #ffd57a; background: rgba(255,183,3,.10); }
.tour-stop-thumb { background: radial-gradient(ellipse at 50% 40%, rgba(255,183,3,.18), transparent 70%), #1f1f1f; }
.tour-stop.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,183,3,.4); }
.gal-filter { color: var(--ink-soft); }
.gal-filter.active { background: var(--gold); border-color: var(--gold); color: #231503; }
.lang-toggle { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.15) !important; }
.live-pill.off { background: rgba(255,255,255,.08); color: var(--ink-soft); }
.live-pill.soon { background: #4a3510; color: #ffd57a; }
.am-name { color: #ffd57a; }

/* ── photo backgrounds ───────────────────────────────────────────────── */
.photo-bg, .page-hero { position: relative; background-size: cover !important; background-position: center !important; }
.photo-bg { background:
    linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.80)),
    var(--photo) center / cover no-repeat !important; }
.bg-procession { --photo: url("/assets/gallery/bg/procession-sanctuary.webp"); }
.bg-cross      { --photo: url("/assets/gallery/bg/processional-cross.webp"); }
.bg-demera     { --photo: url("/assets/gallery/bg/demera-sunset.webp"); }

/* home hero: the cathedral at dusk, bright on the right */
.home-hero { background:
    linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.70) 45%, rgba(10,10,10,.15) 100%),
    url("/assets/gallery/bg/cathedral-dome.webp") right 30% / cover no-repeat !important; }
@media (max-width: 720px) { .home-hero { background:
    linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.88)),
    url("/assets/gallery/bg/cathedral-dome-m.webp") center / cover no-repeat !important; } }

/* each page header gets its own photo */
.page-hero { background:
    linear-gradient(90deg, rgba(10,10,10,.90) 0%, rgba(10,10,10,.62) 55%, rgba(10,10,10,.30) 100%),
    var(--hero-photo, none) center 35% / cover no-repeat; }
.page-hero .glow { display: none; }
.page-about .page-hero         { --hero-photo: url("/assets/gallery/bg/mekdes-icon.webp"); }
.page-services .page-hero      { --hero-photo: url("/assets/gallery/bg/procession-sanctuary.webp"); }
.page-events .page-hero        { --hero-photo: url("/assets/gallery/bg/demera-wrapped.webp"); }
.page-sunday-school .page-hero { --hero-photo: url("/assets/gallery/bg/icon-st-mary.webp"); }
.page-give .page-hero          { --hero-photo: url("/assets/gallery/bg/cross-roses-censer.webp"); }
.page-live .page-hero          { --hero-photo: url("/assets/gallery/bg/roses-candle.webp"); }
.page-gallery .page-hero       { --hero-photo: url("/assets/gallery/bg/demera-adey-abeba.webp"); }
.page-tour .page-hero          { --hero-photo: url("/assets/gallery/bg/cathedral-dome.webp"); }
.page-contact .page-hero       { --hero-photo: url("/assets/gallery/bg/cathedral-dome.webp"); }
.page-hero h1, .page-hero .lede { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.page-hero .lede { color: #f2f2f2; }

/* flag band on a warm candle-lit photo */
.flag-verse { background:
    linear-gradient(180deg, rgba(10,10,10,.70), rgba(10,10,10,.82)),
    url("/assets/gallery/bg/demera-torches.webp") center / cover no-repeat !important; }
.flag-verse .verse-en { color: #f5f5f5; }
.flag-verse .verse-am-mobile { color: #fff; }

/* members band: roses & candlelight */
.cta-band { background:
    linear-gradient(135deg, rgba(10,10,10,.78), rgba(10,10,10,.88)),
    url("/assets/gallery/bg/roses-candle.webp") center / cover no-repeat !important; }

.site-footer { background: #080808 !important; }
.section-alt { background-color: var(--bg-2); }

/* neutral palette: black, charcoal & white only (plus gold accents and flag colours) */
:root { --teal: #9a9a9a; --teal-light: #e6e6e6; --teal-dark: #2a2a2a; --teal-deep: #2a2a2a;
        --violet: #9a9a9a; --blue: #9a9a9a; --pink: #9a9a9a; }

/* clean cards: no gold corner brackets */
.tech-card::before, .tech-card::after { display: none !important; content: none !important; }

/* proportional 2:1 flag */
.flag-verse { padding: 48px 0 52px; }
.ribbon { max-width: 600px; padding: 0 16px; box-sizing: content-box; }
.ribbon-bands { transform-origin: 8% 50%; animation: flagWave 6s ease-in-out infinite; }
@keyframes flagWave { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-1.2deg); } }
.flag-verse .verse-am-mobile { display: block !important; font-size: 26px; margin-top: 10px; }   /* the verse sits under the flag; the emblem is on it */
@media (max-width: 720px) { .ribbon { max-width: 100%; padding: 0; } .ribbon { width: calc(100% - 16px); } }

/* official logo: shown as-is (any shape), no box, no shine effect */
.brand .mark-wrap { width: auto; height: 46px; border-radius: 0; overflow: visible; display: flex; align-items: center; }
.brand .mark-wrap::after { display: none; animation: none; }
.brand .mark { width: auto; height: 46px; max-width: 150px; border-radius: 0; object-fit: contain; background: none !important; box-shadow: none !important; }
@media (max-width: 720px) { .brand .mark-wrap, .brand .mark { height: 38px; } .brand .mark { max-width: 110px; } }

/* Member login menu */
.nav-member { position: relative; }
.nav-member-btn { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: var(--gold-light); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-member-btn .caret { font-size: .75em; transition: transform .15s ease; }
.nav-member-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.member-menu { display: none; position: absolute; right: 0; top: calc(100% + 18px); min-width: 250px; padding: 8px;
  background: #141414; border: 1px solid var(--line-light); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55); z-index: 200; }
.nav-member.open .member-menu { display: block; }
.member-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink) !important; text-align: left; }
.member-menu a:hover, .member-menu a:focus-visible { background: rgba(255,255,255,.07); }
.member-menu b { display: block; font-weight: 600; font-size: 14.5px; }
.member-menu small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
@media (max-width: 1100px) {
  .nav-links.open .nav-member { width: 100%; text-align: center; }
  .nav-links.open .member-menu { position: static; display: block; min-width: 0; margin: 10px auto 0; max-width: 320px; background: rgba(255,255,255,.04); box-shadow: none; }
  .nav-links.open .member-menu a { text-align: center; }
  .nav-links.open .nav-member-btn .caret { display: none; }
}
/* portal choices on the home page */
.portal-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 22px auto 0; }
.portal-pick { display: block; padding: 16px 14px; border-radius: 12px; background: rgba(13,13,13,.62); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; text-align: center; transition: border-color .15s ease, background .15s ease; }
.portal-pick:hover { border-color: var(--gold); background: rgba(13,13,13,.8); }
.portal-pick b { display: block; font-size: 15.5px; }
.portal-pick small { display: block; font-size: 12.5px; color: #cfcfcf; margin-top: 4px; }
@media (max-width: 820px) { .portal-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .portal-picks { grid-template-columns: 1fr; } }

/* ── Member login: every portal is a sign-in choice ─────────────────────── */
.pi { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,183,3,.10); border: 1px solid rgba(255,183,3,.28); color: var(--gold-light); }
.pi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #f8cd5c, #e9a91e); color: #1b1203 !important; font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: transform .15s ease, filter .15s ease; }
.go::after { content: "→"; transition: transform .15s ease; }

.member-menu { min-width: 340px; padding: 10px; }
.mm-head { padding: 6px 10px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono, monospace); }
.member-menu a { display: flex !important; align-items: center; gap: 12px; padding: 10px; border: 1px solid transparent; }
.member-menu a + a { margin-top: 4px; }
.member-menu .mm-text { flex: 1; min-width: 0; text-align: left; }
.member-menu a:hover, .member-menu a:focus-visible { background: rgba(255,255,255,.06); border-color: rgba(255,183,3,.30); }
.member-menu a:hover .go, .portal-pick:hover .go { filter: brightness(1.06); }
.member-menu a:hover .go::after, .portal-pick:hover .go::after { transform: translateX(3px); }

@media (max-width: 1100px) {
  .nav-links.open .member-menu { max-width: 360px; width: 100%; padding: 10px; }
  .nav-links.open .member-menu a { text-align: left; }
  .nav-links.open .mm-head { text-align: center; }
}

.portal-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; }
.portal-pick .pi { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 6px; }
.portal-pick .pi svg { width: 23px; height: 23px; }
.portal-pick small { margin-top: 0; flex: 1; }
.portal-pick .go { margin-top: 12px; width: 100%; justify-content: center; padding: 10px 14px; font-size: 14px; }
@media (max-width: 420px) {
  .portal-pick { flex-direction: row; text-align: left; flex-wrap: wrap; padding: 14px; gap: 4px 12px; }
  .portal-pick .pi { margin: 0; grid-row: span 2; }
  .portal-pick b { flex: 1; align-self: center; }
  .portal-pick small { flex-basis: 100%; padding-left: 58px; margin-top: -6px; }
  .portal-pick .go { margin-top: 8px; }
}

/* ── Home calendar ───────────────────────────────────────────────────────── */
.home-cal-section { background: var(--bg-2); }
.home-cal { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; margin-top: 26px; }
.hc-main, .hc-side > div { background: #161616; border: 1px solid var(--line); border-radius: 16px; }
.hc-main { padding: 18px; }
.hc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hc-side > div { padding: 18px; }
.hc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hc-heading { text-align: center; }
.hc-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #fff; }
.hc-sub { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.hc-nav { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-light); background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.hc-nav:hover { border-color: var(--gold); color: var(--gold-light); }
.hc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hc-dow { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light); padding: 4px 0 6px; }
.hc-day { position: relative; aspect-ratio: 1 / .86; min-height: 50px; border-radius: 10px; border: 1px solid #262626; background: #1c1c1c; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 2px; font: inherit; transition: border-color .12s ease, background .12s ease; }
.hc-day:hover { border-color: var(--line-light); background: #222; }
.hc-eth { font-family: var(--ethiopic, 'Noto Sans Ethiopic'), sans-serif; font-size: 17px; font-weight: 700; line-height: 1.1; }
.hc-greg { font-size: 11.5px; color: var(--ink-faint); }
.hc-day.is-kidase::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hc-day.is-feast { border-color: rgba(255,183,3,.55); background: rgba(255,183,3,.08); }
.hc-day.is-feast .hc-eth { color: var(--gold-light); }
.hc-day.is-parish { background: linear-gradient(135deg, #f8cd5c, #e3a51b); border-color: #f8cd5c; }
.hc-day.is-parish .hc-eth, .hc-day.is-parish .hc-greg { color: #1b1203; }
.hc-day.is-parish::after { background: #1b1203; }
.hc-day.is-fast { box-shadow: inset 0 -3px 0 #8f8f8f; }
.hc-day.is-today { outline: 2px solid #fff; outline-offset: 1px; }
.hc-day.is-selected { border-color: #fff; background: #2a2a2a; }
.hc-day.is-parish.is-selected { filter: brightness(1.08); border-color: #fff; }
.hc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); }
.hc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hc-legend b { font-weight: 500; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: #1c1c1c; border: 1px solid #333; position: relative; }
.lg-kidase::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.lg-feast { border-color: rgba(255,183,3,.6); background: rgba(255,183,3,.15); }
.lg-parish { background: #f0b93a; border-color: #f8cd5c; }
.lg-fast { box-shadow: inset 0 -3px 0 #8f8f8f; }
.hc-today { margin-left: auto; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-light); background: transparent; color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.hc-today:hover { border-color: var(--gold); color: var(--gold-light); }
.hc-d-date { font-family: var(--serif); font-size: 19px; font-weight: 600; color: #fff; }
.hc-d-greg { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.hc-d-tags { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hc-obs { font-size: 13.5px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.05); border-left: 3px solid #8f8f8f; }
.hc-obs-feast { border-left-color: var(--gold); color: var(--gold-light); background: rgba(255,183,3,.07); }
.hc-obs-parish { border-left-color: #f8cd5c; color: #1b1203; background: #f0b93a; font-weight: 600; }
.hc-obs-season { border-left-color: #cfcfcf; }
.hc-d-head { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono, monospace); }
.hc-month .hc-d-head { margin-top: 0; }
.hc-svc, .hc-month-list { list-style: none; margin: 10px 0 0; padding: 0; }
.hc-svc li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #242424; font-size: 13.5px; }
.hc-svc li:first-child { border-top: 0; }
.hc-time { color: var(--gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-what { color: var(--ink); }
.hc-month-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border-left: 3px solid #8f8f8f; margin-top: 6px; background: rgba(255,255,255,.03); }
.hc-month-list li:hover { background: rgba(255,255,255,.07); }
.hc-month-list li.hc-ml-feast { border-left-color: var(--gold); }
.hc-month-list li.hc-ml-parish { border-left-color: #f8cd5c; }
.hc-month-list li.hc-ml-none { cursor: default; border-left-color: transparent; color: var(--ink-faint); font-size: 13px; }
.hc-ml-when { font-size: 11.5px; color: var(--ink-faint); }
.hc-ml-name { font-size: 14px; color: #fff; }
@media (max-width: 900px) { .home-cal { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .hc-main { padding: 12px 10px; }
  .hc-grid { gap: 4px; }
  .hc-day { min-height: 44px; border-radius: 8px; aspect-ratio: auto; height: 50px; }
  .hc-eth { font-size: 15px; }
  .hc-greg { font-size: 10.5px; }
  .hc-day.is-kidase::after { top: 4px; right: 4px; width: 5px; height: 5px; }
  .hc-svc li { grid-template-columns: 96px 1fr; font-size: 13px; }
  .hc-dow { font-size: 10px; letter-spacing: 0; }
}
.hc-day.is-parish.is-selected { background: linear-gradient(135deg, #ffd978, #f0b93a); }

/* ── Home calendar: white, with event days in red ───────────────────────── */
.hc-main, .hc-side > div { background: #ffffff; border-color: #e6e6e6; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hc-title, .hc-d-date, .hc-ml-name { color: #111; }
.hc-sub, .hc-d-greg, .hc-ml-when, .hc-greg { color: #6b6b6b; }
.hc-dow { color: #b3121f; }
.hc-d-head { color: #5f5f5f; }
.hc-nav, .hc-today { border-color: #d6d6d6; color: #111; }
.hc-nav:hover, .hc-today:hover { border-color: #b3121f; color: #b3121f; }
.hc-legend { color: #444; }
.hc-day { background: #fafafa; border-color: #e8e8e8; color: #111; }
.hc-day:hover { background: #f1f1f1; border-color: #cfcfcf; }
.hc-day.is-kidase::after { background: #c98a00; }
/* feasts / events: red */
.hc-day.is-feast { background: #fdecee; border-color: #f2b8be; }
.hc-day.is-feast .hc-eth, .hc-day.is-feast .hc-greg { color: #c8102e; }
.hc-day.is-parish, .hc-day.is-parish.is-selected { background: #c8102e; border-color: #c8102e; }
.hc-day.is-parish .hc-eth, .hc-day.is-parish .hc-greg { color: #fff; }
.hc-day.is-parish::after { background: #fff; }
.hc-day.is-fast { box-shadow: inset 0 -3px 0 #9a9a9a; }
.hc-day.is-today { outline: 2px solid #111; }
.hc-day.is-selected { background: #fff; border-color: #111; box-shadow: 0 0 0 1px #111; }
.hc-day.is-feast.is-selected { background: #fdecee; border-color: #c8102e; box-shadow: 0 0 0 1px #c8102e; }
.hc-day.is-parish.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c8102e; }
.lg { background: #fafafa; border-color: #d6d6d6; }
.lg-kidase::after { background: #c98a00; }
.lg-feast { background: #fdecee; border-color: #f2b8be; }
.lg-parish { background: #c8102e; border-color: #c8102e; }
.lg-fast { box-shadow: inset 0 -3px 0 #9a9a9a; }
.hc-svc li { border-top-color: #eeeeee; }
.hc-time { color: #b3121f; }
.hc-what { color: #222; }
.hc-obs { background: #f4f4f4; color: #222; border-left-color: #9a9a9a; }
.hc-obs-feast { background: #fdecee; color: #a30d26; border-left-color: #c8102e; }
.hc-obs-parish { background: #c8102e; color: #fff; border-left-color: #8e0b20; }
.hc-month-list li { background: #f7f7f7; border-left-color: #9a9a9a; }
.hc-month-list li:hover { background: #efefef; }
.hc-month-list li.hc-ml-feast, .hc-month-list li.hc-ml-parish { border-left-color: #c8102e; }
.hc-month-list li.hc-ml-feast .hc-ml-name, .hc-month-list li.hc-ml-parish .hc-ml-name { color: #a30d26; }
.hc-month-list li.hc-ml-none { background: transparent; color: #777; }
/* event days: solid red */
.hc-day.is-feast, .hc-day.is-feast.is-selected { background: #d0142c; border-color: #d0142c; }
.hc-day.is-feast .hc-eth, .hc-day.is-feast .hc-greg { color: #fff; }
.hc-day.is-feast::after { background: #fff; }
.hc-day.is-feast.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d0142c; }
.hc-day.is-parish, .hc-day.is-parish.is-selected { background: #8e0b20; border-color: #e8b94a; }
.lg-feast { background: #d0142c; border-color: #d0142c; }
.lg-parish { background: #8e0b20; border-color: #e8b94a; }
.hc-obs-feast { background: #d0142c; color: #fff; border-left-color: #8e0b20; }
.hc-obs-parish { background: #8e0b20; color: #fff; border-left-color: #e8b94a; }
/* five portals */
.portal-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1120px; }
@media (max-width: 1000px) { .portal-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .portal-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .portal-picks { grid-template-columns: 1fr; } }
.member-menu { min-width: 360px; }
/* five portal choices */
.portal-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1080px; }
@media (max-width: 1000px) { .portal-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .portal-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .portal-picks { grid-template-columns: 1fr; } }
.member-menu { min-width: 360px; }
.member-menu .mm-text b, .member-menu .mm-text small { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) { .member-menu .go { padding: 6px 11px; font-size: 12.5px; } .member-menu a { gap: 10px; } }
/* six portal choices: 3 x 2 */
.portal-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
@media (max-width: 680px) { .portal-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .portal-picks { grid-template-columns: 1fr; } }

/* ── Home hero: the cathedral at night ───────────────────────────────── */
.home-hero { position: relative; overflow: hidden; background:
    linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.80) 45%, rgba(8,8,8,.45) 100%),
    url("/assets/gallery/bg/cathedral-night.webp") center 40% / cover no-repeat !important; }
.home-hero .container { position: relative; z-index: 2; }
@media (max-width: 900px) { .home-hero { background:
    linear-gradient(180deg, rgba(8,8,8,.60), rgba(8,8,8,.88)),
    url("/assets/gallery/bg/cathedral-night-m.webp") 70% center / cover no-repeat !important; } }

/* ── Gallery: compact photo grid (see more without scrolling) ──────────── */
.gal-grid { columns: auto !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gal-item { margin: 0 !important; aspect-ratio: 1 / 1; border-radius: 10px; }
.gal-item img { width: 100%; height: 100% !important; object-fit: cover; }
@media (max-width: 600px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .gal-item { border-radius: 7px; } }

/* ── Gallery videos ─────────────────────────────────────────────────────── */
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 22px; }
.vid-tile { position: relative; display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 9 / 14; font: inherit; color: #fff; text-align: left; }
.vid-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.vid-tile:hover img { transform: scale(1.04); }
.vid-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%); }
.vid-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.vid-play::before { content: ''; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #c8102e; }
.vid-len { position: absolute; z-index: 1; top: 8px; right: 8px; font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); }
.vid-name { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 9px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.vid-tile:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.vid-credit { margin-top: 14px; font-size: 13px; color: var(--ink-faint); }
.vid-credit a { color: var(--gold-light); }
@media (max-width: 600px) { .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .vid-name { font-size: 11.5px; left: 7px; right: 7px; } .vid-play { width: 36px; height: 36px; margin: -18px 0 0 -18px; } .vid-play::before { left: 14px; top: 11px; border-width: 7px 0 7px 11px; } }
.vid-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 20px; }
.vid-modal[hidden] { display: none; }
.vid-stage { width: min(100%, 960px); max-height: calc(100vh - 130px); display: flex; justify-content: center; }
.vid-stage video { max-width: 100%; max-height: calc(100vh - 130px); border-radius: 10px; background: #000; }
.vid-title { margin-top: 12px; color: #fff; font-size: 15px; text-align: center; }
.vid-tile::after { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%); }

/* ── Mezmur player ──────────────────────────────────────────────────────── */
.page-mezmur .page-hero { --hero-photo: url("/assets/gallery/bg/mezemran-girls-sashes.webp"); }
.mz-wrap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.mz-now { position: sticky; top: 96px; background: #141414; border: 1px solid #2a2a2a; border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.mz-cover { aspect-ratio: 1 / 1; min-width: 200px; min-height: 200px; border-radius: 12px; overflow: hidden; background: #000 radial-gradient(circle at 50% 40%, #2a2a2a, #000); }
.mz-cover iframe, .mz-cover #mzPlayer { width: 100%; height: 100%; display: block; border: 0; }
.mz-meta { margin: 16px 2px 6px; min-height: 48px; }
.mz-meta b { display: block; font-size: 18px; color: #fff; line-height: 1.3; }
.mz-meta span { display: block; font-size: 14px; color: var(--gold-light); margin-top: 2px; }
.mz-progress { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; font-size: 12px; color: #a8a8a8; font-variant-numeric: tabular-nums; }
.mz-progress span:last-child { text-align: right; }
.mz-progress input[type=range] { width: 100%; accent-color: #f0b93a; }
.mz-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.mz-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mz-btn:hover { background: rgba(255,255,255,.08); }
.mz-btn.big { width: 64px; height: 64px; font-size: 22px; background: linear-gradient(135deg, #f8cd5c, #e9a91e); color: #1b1203; box-shadow: 0 8px 20px rgba(233,169,30,.35); }
.mz-btn.big:hover { filter: brightness(1.06); background: linear-gradient(135deg, #f8cd5c, #e9a91e); }
.mz-btn.sm { width: 38px; height: 38px; font-size: 17px; color: #a8a8a8; }
.mz-btn.sm.on { color: var(--gold-light); }
.mz-note { margin: 12px 0 0; font-size: 13px; color: #ff9aa7; text-align: center; }
.mz-listbox { background: #141414; border: 1px solid #2a2a2a; border-radius: 18px; overflow: hidden; }
.mz-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #2a2a2a; }
.mz-listhead b { color: #fff; white-space: nowrap; }
.mz-listhead input { width: min(260px, 55%); padding: 8px 12px; border-radius: 999px; border: 1px solid #3a3a3a; background: #0d0d0d; color: #fff; font: inherit; font-size: 14px; }
.mz-list { list-style: none; margin: 0; padding: 6px; max-height: 70vh; overflow-y: auto; }
.mz-row { display: grid; grid-template-columns: 30px 64px minmax(0, 1fr) 28px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.mz-row:hover, .mz-row:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.mz-row.on { background: rgba(240,185,58,.12); }
.mz-row img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; background: #222; }
.mz-n { text-align: center; color: #8f8f8f; font-size: 13px; font-variant-numeric: tabular-nums; }
.mz-t { min-width: 0; }
.mz-t b { display: block; color: #fff; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-t small { display: block; color: #a8a8a8; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-row.on .mz-t b { color: var(--gold-light); }
.mz-play { color: #8f8f8f; opacity: 0; font-size: 13px; }
.mz-row:hover .mz-play { opacity: 1; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq b { width: 3px; background: var(--gold-light); height: 30%; border-radius: 1px; }
.mz-playing .eq b { animation: eq 0.9s ease-in-out infinite; }
.mz-playing .eq b:nth-child(2) { animation-delay: -.3s; } .mz-playing .eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .mz-playing .eq b { animation: none; height: 70%; } }
.mz-empty-msg { display: none; padding: 30px 16px; text-align: center; color: #a8a8a8; }
.mz-empty .mz-empty-msg { display: block; }
.mz-empty .mz-now, .mz-empty .mz-bar { display: none !important; }
.mz-empty .mz-wrap { grid-template-columns: 1fr; }
.mz-bar { display: none; }
@media (max-width: 860px) {
  .mz-wrap { grid-template-columns: 1fr; }
  .mz-now { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
  .mz-list { max-height: none; }
  .mz-has-track .mz-bar { display: grid; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 300; grid-template-columns: minmax(0, 1fr) 46px 46px; align-items: center; gap: 4px;
    padding: 8px 8px 8px 10px; background: rgba(20,20,20,.96); backdrop-filter: blur(10px); border: 1px solid #333; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .mz-has-track .site-footer { padding-bottom: 90px; }
}
.mz-bar-prog { position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.mz-bar-prog span { display: block; height: 100%; width: 0; background: var(--gold-light); }
.mz-bar-open { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; color: #fff; text-align: left; padding: 0; font: inherit; cursor: pointer; }
.mz-bar-open img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #222; flex: none; }
.mz-bar-open span { min-width: 0; } .mz-bar-open b, .mz-bar-open small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-bar-open b { font-size: 14px; } .mz-bar-open small { font-size: 12px; color: #a8a8a8; }

/* Mahibere Kidusan teachings */
.mk-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-list a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 14px 16px; border-radius: 12px; background: #161616; border: 1px solid #2a2a2a; color: #fff; text-decoration: none; transition: border-color .15s; }
.mk-list a:hover { border-color: var(--gold); }
.mk-list b { font-weight: 600; line-height: 1.35; }
.mk-list small { grid-row: 2; color: #a8a8a8; font-size: 12.5px; margin-top: 3px; }
.mk-list span { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--gold-light); }
.mk-empty { color: #a8a8a8; padding: 10px 0; }
.mk-src { margin-top: 14px; font-size: 14px; }
.mk-src a { color: var(--gold-light); }
@media (max-width: 720px) { .mk-list { grid-template-columns: 1fr; } }

/* ── Phone menu: full-height drawer from the left ─────────────────────── */
.nav-drawer-head { display: none; }
@media (max-width: 1100px) {
  .site-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #0d0d0d !important; }
  .nav-links, .nav-links.open {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important;
    position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0;
    width: min(84vw, 360px); max-height: none !important; height: 100vh; height: 100dvh;
    padding: 0 0 28px !important; overflow-y: auto; z-index: 1000;
    background: #fff !important; border: 0 !important; box-shadow: 8px 0 40px rgba(0,0,0,.45) !important;
    transform: translateX(-105%); transition: transform .28s ease; visibility: hidden;
  }
  .nav-links.open { transform: none; visibility: visible; }
  .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 26px; }
  .nav-drawer-head img { height: 56px; width: auto; }
  .nav-drawer-close { width: 46px; height: 46px; border: 0; background: none; font-size: 34px; line-height: 1; color: #111; cursor: pointer; }
  .nav-links > a { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px !important;
    font-size: 19px !important; color: #1b1b1b !important; border: 0 !important; text-align: left; }
  .nav-links > a::after { content: "›"; color: #9a9a9a; font-size: 22px; }
  .nav-links > a.active, .nav-links > a[aria-current="page"] { color: #8a5a00 !important; font-weight: 700; }
  .nav-links > a:active { background: #f4f2ee; }
  .nav-links .nav-member { padding: 10px 18px 0; text-align: left !important; width: auto !important; }
  .nav-links .nav-member-btn { color: #8a5a00 !important; font-size: 19px; padding: 8px 8px 4px; }
  .nav-links .member-menu { background: #f7f6f3 !important; border: 1px solid #e5e2db !important; margin: 8px 0 0 !important; max-width: none !important; }
  .nav-links .member-menu a { color: #1b1b1b !important; }
  .nav-links .member-menu small, .nav-links .mm-head { color: #7a7a7a !important; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .28s; }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav-links, .nav-backdrop { transition: none !important; } }
/* teachings: summaries + in-page reader */
.mk-list a { display: flex !important; flex-direction: column; gap: 4px; }
.mk-list p { margin: 6px 0 0; color: #cfcfcf; font-size: 14px; line-height: 1.55; }
.mk-list em { font-style: normal; color: var(--gold-light); font-size: 13.5px; margin-top: 6px; font-weight: 600; }
.mk-list small { margin-top: 0; }
.mk-reader { position: fixed; inset: 0; z-index: 2000; background: #fff; display: flex; flex-direction: column; }
.mk-reader[hidden] { display: none; }
.mk-reader-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #0d0d0d; border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,#078930 0 33.33%,#FCDD09 33.33% 66.66%,#DA121A 66.66%) 1; }
.mk-back { flex: none; padding: 12px 18px; border-radius: 999px; border: 0; background: linear-gradient(135deg,#f8cd5c,#e9a91e); color: #1b1203; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.mk-reader-title { flex: 1; min-width: 0; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ext { flex: none; color: #a8a8a8; font-size: 20px; padding: 6px 10px; text-decoration: none; }
.mk-frame { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 520px) { .mk-reader-title { display: none; } .mk-back { flex: 1; } }
/* Sunday school classes, one card each */
.ss-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.ss-class { background: #161616; border: 1px solid #2a2a2a; border-left: 4px solid var(--gold); border-radius: 14px; padding: 18px; }
.ss-class h3 { margin: 0; font-size: 22px; color: #fff; }
.ss-age { color: var(--gold-light); font-size: 14px; margin-top: 2px; }
.ss-class ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ss-class li { padding: 8px 0; border-top: 1px solid #2a2a2a; color: #e8e8e8; font-size: 15.5px; }
.ss-place { margin-top: 18px; color: #cfcfcf; }
@media (max-width: 1000px) { .ss-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ss-classes { grid-template-columns: 1fr; } }
.mk-article { flex: 1; overflow-y: auto; padding: 24px 20px 60px; color: #1b1b1b; background: #fff; font-size: 18px; line-height: 1.8; }
.mk-article[hidden], .mk-frame[hidden] { display: none; }
.mk-article > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.mk-a-title { font-size: 28px; line-height: 1.3; margin: 6px auto 6px; color: #111; }
.mk-a-meta { color: #8a5a00; font-size: 14.5px; margin-bottom: 18px; }
.mk-a-body img { max-width: 100%; height: auto; border-radius: 8px; }
.mk-a-body a { color: #8a5a00; }
.mk-a-body blockquote { border-left: 4px solid #e9a91e; margin: 16px 0; padding: 4px 16px; color: #333; }
.mk-a-credit { margin-top: 30px; padding-top: 14px; border-top: 1px solid #e5e2db; font-size: 14px; color: #666; }
.mk-a-credit a { color: #8a5a00; }
.mk-a-loading, .mk-a-fail { color: #8a8a8a; font-style: italic; }

/* Reader: keep the top bar fixed and stop sideways scrolling */
.mk-reader { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
.mk-reader-bar { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; }
.mk-article { min-height: 0; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.mk-a-body, .mk-a-body * { max-width: 100% !important; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; }
.mk-a-body table { display: block; overflow-x: auto; }
.mk-a-body pre { white-space: pre-wrap; }
.mk-a-body iframe, .mk-a-body video { width: 100%; height: auto; aspect-ratio: 16/9; }
html.mk-open, html.mk-open body { overflow: hidden; height: 100%; overscroll-behavior: none; }

/* Reader: easier reading */
.mk-a-body { text-align: left; }
.mk-a-body p, .mk-a-body div { margin: 0 0 1.1em; }
.mk-break { display: block; height: 1em; }

/* Mezmur keeps playing on other pages: they open over the player, mini bar stays */
body.mz-shell { overflow: hidden; }
#mzShell { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; border: 0; z-index: 3000; background: #111; }
.mz-shell.mz-has-track .mz-bar { display: grid; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 3001;
  grid-template-columns: minmax(0, 1fr) 46px 46px; align-items: center; gap: 4px; max-width: 560px; margin: 0 auto;
  padding: 8px 8px 8px 10px; background: rgba(20,20,20,.96); backdrop-filter: blur(10px); border: 1px solid #333; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
html.in-mz-shell body { padding-bottom: 90px; }

/* White top bar */
.site-nav, .site-nav.scrolled { background: #ffffff !important; box-shadow: 0 1px 0 #e6e6e6, 0 4px 16px rgba(0,0,0,.06); }
.site-nav .brand, .site-nav .brand .brand-text { color: #111111; }
.site-nav .brand .brand-text small { color: #9a6a00; }
.site-nav .nav-toggle { color: #111111 !important; }
.site-nav .lang-toggle { background: #f3f3f3; border-color: #dddddd; }
.site-nav .lang-btn { color: #333333; }
.site-nav .lang-btn.active { background: var(--gold); color: #231503; }
@media (min-width: 1101px) {
  .site-nav .nav-links > a, .site-nav .nav-links .nav-contact > a, .site-nav .nav-links .nav-contact > button { color: #222222; }
  .site-nav .nav-links > a:hover, .site-nav .nav-links > a.current { color: #9a6a00; }
}
.site-nav .nav-signin { color: #9a6a00 !important; }
.mk-article > .mk-a-body { max-width: 760px !important; }   /* body lines up under the title */

/* ── Daily cards on the home page ───────────────────────────────────────── */
.daily-section { padding-top: 56px; padding-bottom: 56px; }
.daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .daily-grid { grid-template-columns: 1fr; } }
.daily-card { padding: 24px 22px !important; display: flex; flex-direction: column; gap: 10px; }
.daily-card .kicker { margin-bottom: 4px; }
.dv-geez { white-space: pre-line; font-family: var(--serif), 'Noto Sans Ethiopic', serif; font-size: 20px; line-height: 1.7; color: #fff; margin: 0; }
.dv-am { color: #d4d4d8; font-size: 16px; line-height: 1.7; margin: 0; }
.dv-ref { color: var(--gold-light); font-weight: 600; font-size: 14.5px; }
.dv-sub { margin-top: 10px; font-size: 13px; color: #a1a1aa; font-weight: 600; letter-spacing: .02em; }
.dv-readings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dv-readings li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 14.5px; }
.dv-readings .k { color: #a1a1aa; min-width: 128px; }
.dv-readings a { color: #f4f4f5; border-bottom: 1px dashed rgba(255, 209, 102, .5); }
.dv-saints { margin: 6px 0 0; font-size: 13px; color: #8a8a93; line-height: 1.6; }
.dw-title { font-size: 17px; line-height: 1.6; margin: 0; color: #fff; }
.dw-v { margin: 0; color: #d4d4d8; line-height: 1.75; font-size: 15.5px; }
.dw-v b, .wd-v b { color: var(--gold-light); margin-right: 4px; }
.dw-more { align-self: flex-start; margin-top: 8px; }

/* ── Library page ───────────────────────────────────────────────────────── */
.lib-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.lib-tab { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: #e4e4e7; font-weight: 600; background: rgba(20, 20, 20, .7); }
.lib-tab.on { background: var(--gold); color: #1a1203; border-color: transparent; }
.lib-search { width: 100%; max-width: 420px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: #111; color: #fff; font: inherit; font-size: 16px; margin-bottom: 18px; }
.lib-gh { font-size: 20px; margin: 18px 0 12px; }
.lib-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lib-book { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px; border-radius: 12px; background: rgba(28, 28, 28, .85); border: 1px solid rgba(255, 255, 255, .1); color: #f4f4f5; transition: border-color .15s, transform .15s; }
.lib-book:hover { border-color: rgba(255, 183, 3, .6); transform: translateY(-1px); }
.lib-book b { font-size: 15.5px; line-height: 1.4; }
.lib-book small { color: #9a9aa3; font-size: 12.5px; }
.lib-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; top: 72px; z-index: 20; padding: 12px 0; background: rgba(11, 11, 11, .94); backdrop-filter: blur(8px); }
@media (max-width: 1100px) { .lib-bar { top: 64px; } }
.lib-back { color: var(--gold-light); font-weight: 600; white-space: nowrap; }
.lib-btitle { font-size: 22px; margin: 0; flex: 1; min-width: 160px; }
.lib-ben { display: block; font-family: var(--sans); font-size: 12.5px; color: #9a9aa3; font-weight: 500; }
.lib-chsel { padding: 10px 12px; border-radius: 10px; background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, .2); font: inherit; }
.lib-text { background: #fff; color: #1b1b1b; border-radius: 16px; padding: 26px 24px 30px; margin-top: 10px; font-size: 18.5px; line-height: 1.95; max-width: 820px; }
.lib-chh { font-size: 21px; margin: 0 0 10px; color: #111; }
.lib-sec { font-size: 15px; color: #8a5a00; margin: 20px 0 6px; font-family: var(--sans); font-weight: 700; }
.lib-p { margin: 0 0 6px; }
.lib-v sup { color: #9a6a00; font-size: 11.5px; font-weight: 700; margin-right: 3px; font-family: var(--sans); }
.lib-v.hl { background: #fff1c7; box-shadow: 0 0 0 3px #fff1c7; border-radius: 3px; }
.lib-nav { display: flex; justify-content: space-between; gap: 12px; max-width: 820px; margin-top: 18px; flex-wrap: wrap; }
.lib-loading, .lib-empty { color: #9a9aa3; }
.lib-credit { margin-top: 26px; font-size: 13px; color: #8a8a93; }
.lib-credit a { color: var(--gold-light); }
.wd-days, .wd-langs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wd-day, .wd-lang { padding: 8px 13px; border-radius: 10px; background: rgba(28, 28, 28, .85); border: 1px solid rgba(255, 255, 255, .12); color: #e4e4e7; font-size: 14.5px; }
.wd-day.today { border-color: rgba(255, 183, 3, .6); }
.wd-day.on, .wd-lang.on { background: var(--gold); color: #1a1203; border-color: transparent; font-weight: 700; }
.wd-v { margin: 0 0 14px; }
.wd-text .wd-v b { color: #9a6a00; }
@media (max-width: 560px) { .lib-text { padding: 20px 16px 24px; font-size: 17.5px; } .lib-books { grid-template-columns: 1fr 1fr; } }

/* Bible reader: fixed full screen — bars stay put, only the text scrolls */
html.lib-open, html.lib-open body { overflow: hidden; height: 100%; overscroll-behavior: none; }
.lib-reader { position: fixed; inset: 0; z-index: 2500; display: flex; flex-direction: column; background: #0b0b0b; height: 100dvh; }
.lr-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  background: #0d0d0d; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #078930 0 33.33%, #FCDD09 33.33% 66.66%, #DA121A 66.66%) 1; }
.lr-back { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--gold); color: #1a1203; font-weight: 700; }
.lr-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lr-title b { color: #fff; font-family: var(--serif), 'Noto Sans Ethiopic', serif; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-title small { color: #9a9aa3; font-size: 12.5px; }
.lr-top .lib-chsel { flex: none; padding: 10px 10px; font-size: 15px; }
.lr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; }
.lr-body .lib-text { margin: 0 auto; border-radius: 0; max-width: 820px; padding: 22px 20px 40px; }
.lr-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #0d0d0d; border-top: 1px solid #262626; }
.lr-foot .btn { flex: 1; justify-content: center; text-align: center; padding: 13px 10px; }
.lr-foot .btn.off { opacity: .35; pointer-events: none; }
.lr-pos { flex: none; color: #9a9aa3; font-size: 13px; min-width: 52px; text-align: center; }
.mz-shell .lib-reader, html.in-mz-shell .lib-reader { padding-bottom: 76px; }

@media (max-width: 760px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } }  /* iPhones zoom in on fields under 16px */

/* gallery: no long-press "Save image" on phones */
.gal-grid img, .lightbox img, .vid-tile img, .vid-modal video { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.gal-toolbar { justify-content: flex-end; }

/* ── ንባብ ቤት audio (Teachings page) ── */
.ab-lede { max-width: 760px; color: inherit; opacity: .88; margin: 6px 0 18px; }
.abnet { display: flex; flex-direction: column; gap: 10px; }
.ab-group { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; }
.ab-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 700; font-size: 17px; color: #1a1a1a; }
.ab-group > summary::-webkit-details-marker { display: none; }
.ab-group > summary::before { content: '›'; font-size: 22px; line-height: 1; color: #b07a00; transition: transform .15s; }
.ab-group[open] > summary::before { transform: rotate(90deg); }
.ab-group .ab-gt { flex: 1; }
.ab-group .ab-n { color: #777; font-weight: 600; font-size: 13px; background: #f3f0e8; border-radius: 999px; padding: 2px 9px; }
.ab-list { list-style: none; margin: 0; padding: 0 0 6px; border-top: 1px solid rgba(0,0,0,.07); max-height: 460px; overflow-y: auto; }
.ab-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; background: none; text-align: left; font: inherit; font-size: 16px; color: #222; cursor: pointer; }
.ab-row:hover { background: #faf6ec; }
.ab-row .ab-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f3ead2; color: #8a5a00; font-size: 12px; }
.ab-row.on { background: #fff4d6; font-weight: 700; }
.ab-row.on .ab-ic { background: #b07a00; color: #fff; }
.ab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #111; color: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,.3); }
.ab-bar[hidden] { display: none; }
.ab-bar button { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 15px; cursor: pointer; }
.ab-bar .ab-pp { width: 48px; height: 48px; background: #ffb703; color: #1a1203; font-weight: 800; }
.ab-now { flex: 1; min-width: 0; }
.ab-now b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.ab-now small { display: block; color: #bbb; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-prog { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ab-prog input { flex: 1; min-width: 0; accent-color: #ffb703; height: 16px; }
.ab-prog .ab-tm { font-size: 12px; color: #bbb; white-space: nowrap; }
body.ab-playing { padding-bottom: 86px; }
@media (max-width: 520px) { .ab-bar .ab-prev, .ab-bar .ab-next { display: none; } }

/* ── Library: liturgy books (PDF reader) ── */
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.bk-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid rgba(0,0,0,.1); background: #fff; color: #1a1a1a; font: inherit; cursor: pointer; }
.bk-card:hover { border-color: #b07a00; }
.bk-ic { flex: none; width: 48px; height: 58px; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(160deg, #8a1020, #5c0a15); color: #ffd166; font-size: 24px; box-shadow: inset -4px 0 0 rgba(0,0,0,.25); }
.bk-tx { flex: 1; min-width: 0; } .bk-tx b { display: block; font-size: 17px; } .bk-tx small { display: block; color: #777; margin-top: 3px; font-size: 13px; }
.bk-go { font-size: 26px; color: #b07a00; }
html.bk-open, html.bk-open body { overflow: hidden; }
.bk-reader { position: fixed; inset: 0; z-index: 1000; background: #3a3a3a; display: flex; flex-direction: column; }
.bk-reader[hidden] { display: none; }
.bk-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: #111; color: #fff; }
.bk-back { flex: none; background: none; border: 0; color: #ffd166; font: inherit; font-weight: 700; cursor: pointer; padding: 6px 4px; }
.bk-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-count { flex: none; color: #bbb; font-size: 13px; }
.bk-z { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; }
.bk-pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 10px 8px 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bk-page { flex: none; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); max-width: none; }
.bk-page canvas { display: block; -webkit-touch-callout: none; user-select: none; }
.bk-msg { color: #eee; text-align: center; margin-top: 40px; padding: 0 20px; }
@media (max-width: 520px) { .bk-back { font-size: 14px; } .bk-title { font-size: 14px; } }
.lib-pick[hidden] { display: none; }
#library .lib-view[hidden] { display: none; }
.lib-pick { padding-top: 8px !important; }
section:has(#library .lib-view[hidden]) { padding-bottom: 8px !important; }

/* ── Library: four parts listed downward; each opens as its own page ── */
.lib-menu { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.lib-menu[hidden], .lib-home[hidden], .lib-ptitle[hidden] { display: none; }
.lib-choice { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(0,0,0,.1); color: #1a1a1a; text-decoration: none; }
.lib-choice:hover { border-color: #b07a00; text-decoration: none; }
.lib-choice .lp-ic { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(160deg, #8a1020, #5c0a15); color: #ffd166; }
.lib-choice .lp-tx { flex: 1; min-width: 0; } .lib-choice .lp-tx b { display: block; font-size: 19px; } .lib-choice .lp-tx small { display: block; color: #666; margin-top: 3px; font-size: 14px; }
.lib-choice .lp-go { font-size: 30px; color: #b07a00; }
.lib-home { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #ffd166; margin: 0 0 8px; text-decoration: none; padding: 8px 0; }
.lib-ptitle { margin: 0 0 18px; }
body.lib-in .page-hero { display: none; }
body.lib-in main > .section:first-of-type { padding-top: 28px; }
.lib-part { padding: 0; background: none; }
.lib-part > .container { padding: 0; max-width: none; }
.lib-part .kicker, .lib-part > .container > h2.display { display: none; }

/* English pages in the book reader, Wudase language pages */
.bk-ic.pg { background: linear-gradient(160deg, #1f4f7a, #12304b); }
.bk-tx .bk-note { color: #8a5a00; }
.bk-reader.text .bk-pages { background: #f7f5ef; align-items: stretch; }
.bk-article { max-width: 760px; margin: 0 auto; width: 100%; background: #fff; color: #1a1a1a; padding: 22px 20px 30px; border-radius: 8px; font-size: 17px; line-height: 1.75; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.bk-article h2, .bk-article h3 { font-family: var(--serif, Georgia, serif); line-height: 1.3; margin: 18px 0 8px; color: #1a1a1a; }
.bk-article p { margin: 0 0 12px; } .bk-article .bk-msg { color: #555; }
.bk-credit { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e5e2db; color: #777; font-size: 14px; }
.wd-pick { margin-top: 4px; }
.wd-up { display: inline-block; margin: 0 0 12px; font-weight: 700; color: #ffd166; text-decoration: none; }

/* Live page: recommended videos under the live player (they play here, on our page) */
.live-recs-section { padding-top: 8px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.rec-card { display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.rec-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #0d0d0d; border: 1px solid var(--line); }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.rec-card:hover .rec-thumb img, .rec-card:focus-visible .rec-thumb img { transform: scale(1.04); }
.rec-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(0,0,0,.62); display: grid; place-items: center; transition: background .2s; }
.rec-play::after { content: ''; margin-left: 4px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.rec-card:hover .rec-play { background: #c8102e; }
.rec-title { font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--white); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rec-ch { font-size: 12px; color: var(--ink-soft); margin-top: -6px; }
.rec-card:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: 4px; border-radius: 12px; }
.rec-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rec-modal[hidden] { display: none; }
.rec-box { width: min(1100px, 100%); }
.rec-box .live-player { box-shadow: none; }
.rec-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: #fff; }
.rec-bar b { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-close { border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.rec-close:hover { background: rgba(255,255,255,.12); }
html.rec-open { overflow: hidden; }
@media (max-width: 560px) { .rec-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .rec-title { font-size: 11.5px; } .rec-ch { display: none; } .rec-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; } .rec-play::after { border-width: 6px 0 6px 9px; margin-left: 3px; } }

/* ── Phones: smaller copies of the background photos (faster on mobile data) ── */
@media (max-width: 720px) {
  .bg-procession { --photo: url("/assets/gallery/bg/procession-sanctuary-m.webp"); }
  .bg-cross { --photo: url("/assets/gallery/bg/processional-cross-m.webp"); }
  .bg-demera { --photo: url("/assets/gallery/bg/demera-sunset-m.webp"); }
  .page-about .page-hero { --hero-photo: url("/assets/gallery/bg/mekdes-icon-m.webp"); }
  .page-services .page-hero { --hero-photo: url("/assets/gallery/bg/procession-sanctuary-m.webp"); }
  .page-events .page-hero { --hero-photo: url("/assets/gallery/bg/demera-wrapped-m.webp"); }
  .page-sunday-school .page-hero { --hero-photo: url("/assets/gallery/bg/icon-st-mary-m.webp"); }
  .page-give .page-hero { --hero-photo: url("/assets/gallery/bg/cross-roses-censer-m.webp"); }
  .page-live .page-hero { --hero-photo: url("/assets/gallery/bg/roses-candle-m.webp"); }
  .page-gallery .page-hero { --hero-photo: url("/assets/gallery/bg/demera-adey-abeba-m.webp"); }
  .page-tour .page-hero { --hero-photo: url("/assets/gallery/bg/cathedral-dome-m.webp"); }
  .page-contact .page-hero { --hero-photo: url("/assets/gallery/bg/cathedral-dome-m.webp"); }
  .page-mezmur .page-hero { --hero-photo: url("/assets/gallery/bg/mezemran-girls-sashes-m.webp"); }
  .flag-verse { background: linear-gradient(180deg, rgba(10,10,10,.70), rgba(10,10,10,.82)), url("/assets/gallery/bg/demera-torches-m.webp") center / cover no-repeat !important; }
}

/* footer headings are h2 now (headings in order for screen readers) — same look as before */
.footer-grid h2.foot-h { color: var(--gold-text, var(--white)) !important; font-size: 13px; margin: 0 0 16px; font-family: var(--sans);
  font-weight: 600; letter-spacing: normal; line-height: 1.4; text-transform: none; }
/* text only screen readers hear */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mezmur: keep the page the same height while the playlist loads (nothing jumps) */
.mz-section { min-height: calc(100vh - 64px); }

/* Reserve room for parts the scripts fill in, so the page doesn't jump while it loads */
.today-strip[data-church-today]:empty { min-height: 51px; }
.cal-list[data-church-calendar]:empty { min-height: 100vh; }
.gal-grid:empty { min-height: 100vh; }
.library:empty { min-height: 100vh; }

/* ── A Library book or Teachings opened inside a portal (Resources tab): only the book ──
   (only when framed by our own portal with ?embed=1; the Library page itself is unchanged) */
html.kr-embed .site-nav, html.kr-embed .page-hero, html.kr-embed .site-footer, html.kr-embed .lib-menu,
html.kr-embed .lib-home, html.kr-embed #krLangPick { display: none !important; }
html.kr-embed body { padding-top: 0 !important; }
html.kr-embed .section { padding-top: 18px; padding-bottom: 28px; }
/* privacy page and footer privacy link */
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.prose h2 { font-family: var(--serif, Fraunces, serif); font-size: 24px; margin: 36px 0 10px; }
.prose p, .prose li { line-height: 1.65; }
.prose ul { padding-left: 22px; margin: 0 0 8px; }
.prose li { margin: 6px 0; }