:root {
  --purple: #2D1B4E;
  --purple-deep: #1A0F2E;
  --purple-mid: #4A2D7A;
  --silver: #C0C0C0;
  --gold: #C9A84C;
  --gold-light: #E8D5A0;
  --white: #FFF;
}

* { margin: 0; padding: 0; box-sizing: border-box }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--purple-deep);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: default;
}

#globe-canvas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; cursor: crosshair }
#ripple-canvas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none }

/* Ticker banner */
.ticker-bar {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 11;
  background: linear-gradient(90deg, var(--purple-deep), rgba(45,27,78,.95), var(--purple-deep));
  border-bottom: 1px solid rgba(201,168,76,.15);
  overflow: hidden; height: 36px; display: flex; align-items: center;
}
.ticker-track {
  display: flex; white-space: nowrap;
  animation: tickerScroll 28s linear infinite;
}
.ticker-text {
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); padding: 0 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.ticker-sep {
  color: var(--gold); opacity: .7; font-size: .85rem; padding: 0 16px; flex-shrink: 0;
}
.ticker-icon {
  width: 20px; height: 20px; fill: var(--gold); vertical-align: middle; flex-shrink: 0;
}
@keyframes tickerScroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}
.ticker-track { animation-duration: 120s }

.top-accent {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--purple-mid), var(--gold), var(--purple-mid), transparent);
  z-index: 10;
}

.click-hint {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-size: .58rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(201,168,76,.35);
  animation: hintPulse 3s ease-in-out infinite, fadeIn 2s ease-out 3s both;
  pointer-events: none;
}

@keyframes hintPulse { 0%, 100% { opacity: .35 } 50% { opacity: .6 } }

/* Sticky header */
.sticky-header {
  position: sticky; top: 39px; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 24px 0;
  background: rgba(26,15,46,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

.page-wrap { position: relative; z-index: 2; transition: margin-right .5s cubic-bezier(.4,0,.2,1) }
.page-wrap.shifted { margin-right: 260px }

.container {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px 20px; pointer-events: none;
}
.container a,
.container iframe,
.container .contact-link,
.container .map-directions-btn,
.container .scripture-slider,
.container .lang-switch,
.container .message-body { pointer-events: auto }

.logo-wrapper { animation: fadeInDown 1s ease-out; margin-bottom: 8px }
.logo {
  width: clamp(110px, 16vw, 160px); height: auto;
  filter: drop-shadow(0 4px 30px rgba(201,168,76,.18)) drop-shadow(0 0 60px rgba(74,45,122,.25));
  transition: filter .5s;
}

/* Church identity */
.church-identity { text-align: center; margin-bottom: 10px; animation: fadeInDown 1.2s ease-out .2s both }
.church-name {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; letter-spacing: .08em; line-height: 1.15; margin-bottom: 6px;
  text-shadow: 0 2px 40px rgba(201,168,76,.12);
}
.church-subtitle {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(.9rem, 2.2vw, 1.3rem);
  font-weight: 400; color: var(--gold); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 5px;
}
.church-motto {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(.85rem, 1.8vw, 1.05rem);
  font-weight: 600; font-style: italic; color: var(--silver); letter-spacing: .1em; margin-bottom: 4px;
}
.church-location { font-size: .72rem; font-weight: 400; color: rgba(255,255,255,.35); letter-spacing: .2em; text-transform: uppercase }

.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 14px; animation: fadeIn 1.5s ease-out .4s both }
.ornament .line { width: 45px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)) }
.ornament .line:last-child { background: linear-gradient(90deg, var(--gold), transparent) }
.ornament .gem { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg) }

/* Language switch */
.lang-switch { position: fixed; top: 46px; left: 16px; z-index: 10; display: flex; gap: 4px; animation: fadeIn 1.5s ease-out 1s both; pointer-events: auto }
.lang-btn {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid rgba(201,168,76,.35); border-radius: 6px;
  background: rgba(26,15,46,.7); color: rgba(255,255,255,.55); cursor: pointer;
  transition: all .3s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lang-btn.active { background: rgba(201,168,76,.2); border-color: var(--gold); color: var(--gold) }
.lang-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,.12) }

/* Message card */
.message-card {
  background: linear-gradient(135deg, rgba(45,27,78,.75), rgba(26,15,46,.88));
  border: 1px solid rgba(201,168,76,.15); border-radius: 2px;
  padding: clamp(24px, 3.5vw, 40px) clamp(28px, 4vw, 56px);
  margin-top: 18px;
  max-width: 920px; width: 100%; text-align: center; position: relative;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  animation: fadeIn 1.4s ease-out .4s both; pointer-events: auto;
}
.message-card::before, .message-card::after {
  content: ''; position: absolute; width: 34px; height: 34px;
  border-color: var(--gold); border-style: solid; opacity: .3;
}
.message-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px }
.message-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0 }
.message-label {
  font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); background: var(--purple-deep); display: inline-block;
  padding: 5px 16px; position: relative; top: -6px; margin-bottom: 12px;
  border: 1px solid rgba(201,168,76,.22);
}
.message-heading { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.3; margin-bottom: 16px }
.message-heading em { color: var(--gold); font-style: italic }
.message-body {
  font-size: clamp(.82rem, 1.3vw, .93rem); font-weight: 300; color: rgba(255,255,255,.6);
  line-height: 1.75; margin-bottom: 22px; max-width: 720px; margin-left: auto; margin-right: auto;
}
.divider { width: 45px; height: 1px; background: var(--gold); margin: 0 auto 22px; opacity: .35 }

/* Services */
.service-info { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 22px }
.service-item {
  text-align: center; padding: 12px 18px; background: rgba(201,168,76,.04);
  border: 1px solid rgba(201,168,76,.08); border-radius: 2px; min-width: 180px; flex: 1; max-width: 280px;
}
.service-item .label { font-size: .52rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px }
.service-item .value { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 600 }
.service-item .detail { font-size: .62rem; color: rgba(255,255,255,.3); margin-top: 2px }

/* Contact */
.contact-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.contact-link {
  font-size: .72rem; font-weight: 500; color: var(--gold-light); text-decoration: none;
  padding: 8px 18px; border: 1px solid rgba(201,168,76,.22); transition: all .3s;
  display: flex; align-items: center; gap: 7px; cursor: pointer;
}
.contact-link:hover { background: rgba(201,168,76,.1); border-color: var(--gold); color: var(--gold) }
.contact-link svg { width: 13px; height: 13px; fill: currentColor }

/* Map */
.map-section { max-width: 920px; width: 100%; margin-top: 24px; animation: fadeInUp 1.4s ease-out .6s both; pointer-events: auto }
.map-container {
  background: linear-gradient(135deg, rgba(45,27,78,.75), rgba(26,15,46,.88));
  border: 1px solid rgba(201,168,76,.12); border-radius: 2px; overflow: hidden;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); position: relative;
}
.map-container::before, .map-container::after {
  content: ''; position: absolute; width: 24px; height: 24px;
  border-color: var(--gold); border-style: solid; opacity: .22; z-index: 2; pointer-events: none;
}
.map-container::before { top: -1px; left: -1px; border-width: 2px 0 0 2px }
.map-container::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0 }
.map-header { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px }
.map-header-left { display: flex; align-items: center; gap: 10px }
.map-pin {
  width: 28px; height: 28px; background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.18); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.map-pin svg { width: 12px; height: 12px; fill: var(--gold) }
.map-address { font-size: .78rem; font-weight: 500; line-height: 1.4 }
.map-address span { display: block; font-size: .65rem; font-weight: 300; color: rgba(255,255,255,.35); margin-top: 1px }
.map-directions-btn {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; padding: 6px 14px;
  border: 1px solid rgba(201,168,76,.22); transition: all .3s;
  display: flex; align-items: center; gap: 5px; cursor: pointer;
}
.map-directions-btn:hover { background: rgba(201,168,76,.1); border-color: var(--gold) }
.map-directions-btn svg { width: 11px; height: 11px; fill: var(--gold) }
.map-embed {
  width: 100%; height: 200px; border: none; display: block;
  filter: saturate(.2) brightness(.6) contrast(1.1); transition: filter .5s;
}
.map-embed:hover { filter: saturate(.5) brightness(.8) contrast(1.05) }

/* Ministry Slider */
.ministry-slider {
  text-align: center; margin-top: 28px; animation: fadeInUp 1.4s ease-out .7s both;
  max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; position: relative;
  pointer-events: auto; background: linear-gradient(135deg, rgba(45,27,78,.6), rgba(26,15,46,.75));
  border: 1px solid rgba(201,168,76,.12); border-radius: 4px;
  padding: 28px 50px 20px;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.ministry-slider::before, .ministry-slider::after {
  content: ''; position: absolute; width: 28px; height: 28px;
  border-color: var(--gold); border-style: solid; opacity: .25;
}
.ministry-slider::before { top: -1px; left: -1px; border-width: 2px 0 0 2px }
.ministry-slider::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0 }
.ministries-label {
  font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); text-align: center; margin-bottom: 20px;
}
.ministry-track { position: relative; min-height: 160px; overflow: hidden }
.ministry-slide {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
}
.ministry-slide.active {
  position: relative; opacity: 1; transform: translateY(0); pointer-events: auto;
}
.ms-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.15);
  border-radius: 50%; transition: all .3s;
}
.ms-icon svg { width: 26px; height: 26px; fill: var(--gold); opacity: .75 }
.ms-icon.band { background: rgba(192,192,192,.05); border-color: rgba(192,192,192,.15) }
.ms-icon.band svg { fill: var(--silver) }
.ms-tag {
  font-size: .5rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px; opacity: .6;
}
.ms-tag.band { color: var(--silver) }
.ms-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 600;
  margin-bottom: 14px; color: rgba(255,255,255,.9);
}
.ms-desc {
  font-size: clamp(.85rem, 1.3vw, .95rem); font-weight: 300;
  color: rgba(255,255,255,.55); line-height: 1.8;
  max-width: 640px; margin: 0 auto;
}
.ministry-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px }
.ministry-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.18);
  cursor: pointer; transition: all .3s;
}
.ministry-dot.active { background: var(--gold); transform: scale(1.25) }
.ministry-dot.band-dot { background: rgba(192,192,192,.12); border-color: rgba(192,192,192,.18) }
.ministry-dot.band-dot.active { background: var(--silver) }
.ministry-dot:hover { background: rgba(201,168,76,.35) }
.ministry-dot.band-dot:hover { background: rgba(192,192,192,.35) }
.ministry-nav {
  position: absolute; top: 50%; left: 0; right: 0;
  display: flex; justify-content: space-between;
  pointer-events: none; transform: translateY(-50%); padding: 0 8px;
}
.ministry-arrow {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.15);
  border-radius: 50%; color: rgba(201,168,76,.5);
  cursor: pointer; transition: all .3s; pointer-events: auto; outline: none;
}
.ministry-arrow:hover { background: rgba(201,168,76,.15); border-color: var(--gold); color: var(--gold) }
.ministry-arrow svg { width: 16px; height: 16px; fill: currentColor }

/* Scripture slider */
.scripture-slider {
  text-align: center; margin-top: 28px; animation: fadeInUp 1.4s ease-out .8s both;
  max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; position: relative;
  pointer-events: auto; background: linear-gradient(135deg, rgba(45,27,78,.5), rgba(26,15,46,.6));
  border: 1px solid rgba(201,168,76,.1); border-radius: 4px; padding: 28px 50px 20px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.scripture-track { position: relative; min-height: 100px; overflow: hidden }
.scripture-slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease, transform 1.2s ease; pointer-events: none }
.scripture-slide.active { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto }
.scripture-text {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-style: italic; color: rgba(255,255,255,.65); line-height: 1.7; max-width: 680px; margin: 0 auto;
}
.scripture-ref { font-size: .7rem; font-weight: 700; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; margin-top: 12px }
.scripture-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px }
.scripture-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.2); cursor: pointer; transition: all .3s }
.scripture-dot.active { background: var(--gold); transform: scale(1.2) }
.scripture-dot:hover { background: rgba(201,168,76,.4) }
.scripture-nav { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); padding: 0 8px }
.scripture-arrow {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.15); border-radius: 50%;
  color: rgba(201,168,76,.5); cursor: pointer; transition: all .3s; pointer-events: auto; outline: none;
}
.scripture-arrow:hover { background: rgba(201,168,76,.15); border-color: var(--gold); color: var(--gold) }
.scripture-arrow svg { width: 16px; height: 16px; fill: currentColor }

.footer { position: relative; z-index: 2; text-align: center; padding: 18px 24px; font-size: .58rem; color: rgba(255,255,255,.15) }

/* Sidebar */
.social-sidebar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 8; pointer-events: auto; animation: sidebarSlideIn 1s ease-out 1.2s both }
.sidebar-inner {
  background: linear-gradient(135deg, rgba(45,27,78,.9), rgba(26,15,46,.96));
  border: 1px solid rgba(201,168,76,.18); border-right: none; border-radius: 12px 0 0 12px;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 62px; transition: width .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1);
  overflow: hidden; cursor: pointer;
}
.sidebar-inner.expanded { width: 280px; padding: 22px 20px; align-items: stretch; cursor: default }
.sidebar-heading {
  font-size: .5rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg); margin-bottom: 8px; white-space: nowrap; transition: all .45s;
}
.sidebar-inner.expanded .sidebar-heading {
  writing-mode: horizontal-tb; transform: none; font-size: .8rem; letter-spacing: .22em;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid rgba(201,168,76,.25);
  width: 100%; text-align: center; cursor: pointer;
}
.sidebar-divider { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .35; margin: 4px 0 }
.sidebar-inner.expanded .sidebar-divider { display: none }
.sidebar-link {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201,168,76,.12); border-radius: 10px; transition: all .35s;
  color: rgba(255,255,255,.5); text-decoration: none; cursor: pointer; flex-shrink: 0; overflow: hidden;
}
.sidebar-link:hover { border-color: var(--gold); background: rgba(201,168,76,.12); color: var(--gold) }
.sidebar-link svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; min-width: 18px }
.link-label {
  font-size: 0; font-weight: 600; color: rgba(255,255,255,.75); white-space: nowrap;
  opacity: 0; max-width: 0; overflow: hidden; transition: all .45s cubic-bezier(.4,0,.2,1);
}
.sidebar-inner.expanded .sidebar-link {
  width: 100%; height: 46px; justify-content: flex-start; padding: 0 16px;
  gap: 14px; border-radius: 8px; background: rgba(201,168,76,.04);
}
.sidebar-inner.expanded .sidebar-link svg { width: 20px; height: 20px; min-width: 20px }
.sidebar-inner.expanded .link-label { font-size: .82rem; opacity: 1; max-width: 180px }
.sidebar-inner.expanded .sidebar-link:hover { background: rgba(201,168,76,.14); transform: translateX(-4px) }
.sidebar-inner.expanded .sidebar-link:hover .link-label { color: var(--gold) }
.sidebar-toggle {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  margin-top: 6px; color: rgba(201,168,76,.4); transition: all .3s; cursor: pointer;
  border: 1px solid rgba(201,168,76,.1); border-radius: 50%;
}
.sidebar-toggle svg { width: 14px; height: 14px; fill: currentColor; transition: transform .4s }
.sidebar-inner.expanded .sidebar-toggle svg { transform: rotate(180deg) }
.sidebar-toggle:hover { color: var(--gold); border-color: rgba(201,168,76,.25) }
.sidebar-link .tip {
  position: absolute; right: 52px; top: 50%; transform: translateY(-50%);
  background: rgba(26,15,46,.95); border: 1px solid rgba(201,168,76,.2);
  color: var(--gold-light); font-size: .68rem; font-weight: 600; padding: 6px 14px;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .3s;
}
.sidebar-link .tip::after {
  content: ''; position: absolute; right: -5px; top: 50%;
  transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px;
  background: rgba(26,15,46,.95); border-right: 1px solid rgba(201,168,76,.2);
  border-top: 1px solid rgba(201,168,76,.2);
}
.sidebar-link:hover .tip { opacity: 1; right: 56px }
.sidebar-inner.expanded .tip { display: none }

/* Theme toggle button */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2);
  color: var(--gold); cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all .3s; animation: fadeIn 1.5s ease-out 1s both;
}
.theme-toggle:hover { background: rgba(201,168,76,.15); border-color: var(--gold) }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor }
.theme-toggle .icon-sun { display: none }
.theme-toggle .icon-moon { display: block }

/* Light theme — warm ivory/cream with purple-gold accents */
[data-theme="light"] {
  --purple-deep: #F0E8D8;
  --purple: #E6DCCB;
  --purple-mid: #B8A080;
}
[data-theme="light"] body { color: #2D1B4E }
[data-theme="light"] .top-accent { background: linear-gradient(90deg, transparent, var(--gold), #8B6914, var(--gold), transparent) }
[data-theme="light"] .church-name { text-shadow: 0 2px 40px rgba(139,105,20,.12) }
[data-theme="light"] .church-motto { color: #5A4270 }
[data-theme="light"] .church-location { color: rgba(45,27,78,.45) }
[data-theme="light"] .message-card {
  background: linear-gradient(135deg, rgba(240,232,216,.92), rgba(230,220,203,.96));
  border-color: rgba(201,168,76,.3);
}
[data-theme="light"] .message-label { background: var(--purple-deep); border-color: rgba(201,168,76,.35) }
[data-theme="light"] .message-heading em { color: #8B6914 }
[data-theme="light"] .message-body { color: rgba(45,27,78,.55) }
[data-theme="light"] .divider { background: #8B6914 }
[data-theme="light"] .service-item { background: rgba(45,27,78,.04); border-color: rgba(201,168,76,.2) }
[data-theme="light"] .service-item .label { color: #8B6914 }
[data-theme="light"] .service-item .detail { color: rgba(45,27,78,.4) }
[data-theme="light"] .contact-link { color: #6B4F10; border-color: rgba(201,168,76,.35) }
[data-theme="light"] .contact-link:hover { background: rgba(201,168,76,.15); color: #8B6914 }
[data-theme="light"] .map-container {
  background: linear-gradient(135deg, rgba(240,232,216,.92), rgba(230,220,203,.96));
  border-color: rgba(201,168,76,.25);
}
[data-theme="light"] .map-address span { color: rgba(45,27,78,.45) }
[data-theme="light"] .map-embed { filter: saturate(.6) brightness(.9) contrast(1.05) }
[data-theme="light"] .map-embed:hover { filter: saturate(.8) brightness(.95) contrast(1.05) }
[data-theme="light"] .scripture-slider {
  background: linear-gradient(135deg, rgba(240,232,216,.88), rgba(230,220,203,.92));
  border-color: rgba(201,168,76,.2);
}
[data-theme="light"] .scripture-text { color: rgba(45,27,78,.55) }
[data-theme="light"] .scripture-ref { color: #8B6914 }
[data-theme="light"] .scripture-dot { background: rgba(201,168,76,.2); border-color: rgba(201,168,76,.3) }
[data-theme="light"] .scripture-arrow { background: rgba(201,168,76,.1); border-color: rgba(201,168,76,.25); color: rgba(139,105,20,.6) }
[data-theme="light"] .sidebar-inner {
  background: linear-gradient(135deg, rgba(240,232,216,.96), rgba(230,220,203,.98));
  border-color: rgba(201,168,76,.3);
}
[data-theme="light"] .sidebar-heading { color: #8B6914 }
[data-theme="light"] .sidebar-inner.expanded .sidebar-heading { border-bottom-color: rgba(201,168,76,.35) }
[data-theme="light"] .sidebar-link { color: rgba(45,27,78,.5) }
[data-theme="light"] .sidebar-link:hover { color: #8B6914 }
[data-theme="light"] .link-label { color: rgba(45,27,78,.65) }
[data-theme="light"] .sidebar-link .tip { background: rgba(240,232,216,.97); color: #6B4F10 }
[data-theme="light"] .sidebar-link .tip::after { background: rgba(240,232,216,.97) }
[data-theme="light"] .footer { color: rgba(45,27,78,.18) }
[data-theme="light"] .lang-btn { color: rgba(45,27,78,.45); border-color: rgba(201,168,76,.3) }
[data-theme="light"] .lang-btn.active { color: #8B6914; background: rgba(201,168,76,.12) }
[data-theme="light"] .lang-btn:hover { color: #8B6914 }
[data-theme="light"] .click-hint { color: rgba(139,105,20,.45) }
[data-theme="light"] .ornament .gem { background: #8B6914 }
[data-theme="light"] .theme-toggle .icon-sun { display: block }
[data-theme="light"] .theme-toggle .icon-moon { display: none }
[data-theme="light"] #globe-canvas { opacity: .35 }
[data-theme="light"] .theme-toggle { background: rgba(45,27,78,.06); border-color: rgba(45,27,78,.18); color: #8B6914 }

/* Keyframe animations */
@keyframes sidebarSlideIn {
  from { opacity: 0; transform: translateY(-50%) translateX(70px) }
  to { opacity: 1; transform: translateY(-50%) translateX(0) }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Tablet and below */
@media (max-width: 768px) {
  .page-wrap.shifted { margin-right: 0 }

  /* Ticker — 3px accent + 30px ticker = 33px total */
  .ticker-bar { height: 30px; top: 3px }
  .ticker-text { font-size: .65rem; padding: 0 14px; letter-spacing: .12em }
  .ticker-sep { padding: 0 10px; font-size: .75rem }
  .ticker-icon { width: 16px; height: 16px }

  /* Header — stays sticky, sits below ticker (top: 33px) */
  .sticky-header { position: sticky; top: 33px; z-index: 5; padding: 6px 16px 0 }
  .logo { width: clamp(50px, 10vw, 70px) }
  .logo-wrapper { margin-bottom: 2px }
  .church-name { font-size: clamp(1.2rem, 3.5vw, 1.6rem); margin-bottom: 2px }
  .church-subtitle { font-size: clamp(.6rem, 1.6vw, .78rem); letter-spacing: .06em; margin-bottom: 2px }
  .church-motto { font-size: clamp(.6rem, 1.4vw, .72rem); margin-bottom: 1px }
  .church-location { font-size: .55rem; letter-spacing: .1em }
  .church-identity { margin-bottom: 2px }
  .ornament { margin: 2px 0 4px; gap: 8px }
  .ornament .line { width: 28px }
  .ornament .gem { width: 5px; height: 5px }

  /* Language switch — top-left, below ticker, above sticky header */
  .lang-switch {
    position: fixed; top: 34px; bottom: auto; left: 8px; right: auto;
    transform: none; z-index: 7;
    flex-wrap: nowrap; gap: 2px;
  }
  .lang-btn { padding: 3px 7px; font-size: .55rem; border-radius: 4px; background: rgba(26,15,46,.95) }

  /* Sidebar — bottom bar */
  .social-sidebar {
    position: fixed; right: auto; left: 0; top: auto; bottom: 0;
    transform: none; width: 100%; animation: mobileSlideUp .8s ease-out 1.2s both;
  }
  .sidebar-inner {
    flex-direction: row; flex-wrap: nowrap; border-radius: 0; border: none;
    border-top: 1px solid rgba(201,168,76,.15); padding: 6px 6px;
    justify-content: center; align-items: center; gap: 3px; width: 100%;
  }
  .sidebar-inner.expanded { flex-direction: column; flex-wrap: nowrap; width: 100%; padding: 16px 20px }
  .sidebar-heading { writing-mode: horizontal-tb; transform: none; font-size: .4rem; letter-spacing: .08em; margin-bottom: 0; margin-right: 2px; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
  .sidebar-inner.expanded .sidebar-heading { font-size: .7rem; margin-bottom: 10px; margin-right: 0; overflow: visible }
  .sidebar-divider { width: 1px; height: 16px; margin: 0 2px; flex-shrink: 0 }
  .sidebar-link { width: 32px; height: 32px; flex-shrink: 0 }
  .sidebar-link svg { width: 14px; height: 14px; min-width: 14px }
  .sidebar-link .tip { display: none }
  .sidebar-toggle { width: 24px; height: 24px; margin-top: 0 }
  .sidebar-toggle svg { transform: rotate(90deg) }
  .sidebar-inner.expanded .sidebar-toggle svg { transform: rotate(-90deg) }
  @keyframes mobileSlideUp {
    from { opacity: 0; transform: translateY(60px) }
    to { opacity: 1; transform: translateY(0) }
  }

  /* Sliders */
  .ministry-slider { padding: 24px 42px 18px }
  .scripture-slider { padding: 24px 42px 18px }
  .ministry-arrow, .scripture-arrow { width: 28px; height: 28px }
  .ministry-arrow svg, .scripture-arrow svg { width: 14px; height: 14px }
  .ministry-nav, .scripture-nav { padding: 0 4px }

  .footer { padding-bottom: 55px }
  .theme-toggle { top: 12px; right: 12px }

  /* Message card */
  .message-card { padding: clamp(20px, 3vw, 32px) clamp(20px, 3.5vw, 40px) }
  .message-body { font-size: clamp(.8rem, 1.2vw, .9rem) }
}

/* Mobile portrait */
@media (max-width: 600px) and (orientation: portrait) {
  /* Ticker — 3px accent + 26px ticker = 29px total */
  .ticker-bar { height: 26px }
  .ticker-text { font-size: .58rem; padding: 0 10px; letter-spacing: .08em }
  .ticker-sep { padding: 0 6px; font-size: .65rem }
  .ticker-icon { width: 13px; height: 13px }

  /* Sticky header — compact, sits below ticker (top: 29px) */
  .sticky-header { top: 29px; padding: 4px 10px 0 }
  .logo { width: clamp(40px, 9vw, 55px) }
  .logo-wrapper { margin-bottom: 1px }
  .church-name { font-size: clamp(1rem, 3.2vw, 1.2rem); margin-bottom: 1px }
  .church-subtitle { font-size: clamp(.52rem, 1.4vw, .65rem); margin-bottom: 1px }
  .church-motto { font-size: .58rem; margin-bottom: 0 }
  .church-location { font-size: .5rem }
  .church-identity { margin-bottom: 1px }
  .ornament { margin: 1px 0 2px; gap: 6px }
  .ornament .line { width: 18px }
  .ornament .gem { width: 4px; height: 4px }
  .container { padding: 10px 12px 16px }

  /* Lang switch */
  .lang-switch { top: 30px }
  .lang-btn { padding: 2px 5px; font-size: .5rem }

  /* Services stack */
  .service-info { flex-direction: column; align-items: center }
  .service-item { width: 100%; max-width: 100% }
  .contact-row { flex-direction: column; align-items: stretch }
  .contact-link { justify-content: center }

  /* Map */
  .map-header { flex-direction: column; align-items: flex-start }
  .map-directions-btn { width: 100%; justify-content: center }
  .map-embed { height: 160px }

  /* Sliders */
  .ministry-slider { padding: 20px 34px 16px }
  .scripture-slider { padding: 20px 34px 16px }
  .ministry-track { min-height: 140px }
  .ms-icon { width: 44px; height: 44px; margin-bottom: 12px }
  .ms-icon svg { width: 20px; height: 20px }
  .ms-title { font-size: clamp(1.1rem, 2.2vw, 1.4rem); margin-bottom: 10px }
  .ms-desc { font-size: clamp(.78rem, 1.2vw, .88rem); line-height: 1.65 }
  .ministry-dots { gap: 5px; margin-top: 14px }
  .ministry-dot { width: 6px; height: 6px }

  /* Bottom bar */
  .sidebar-inner { padding: 5px 6px; gap: 2px }
  .sidebar-link { width: 30px; height: 30px }
  .sidebar-link svg { width: 13px; height: 13px; min-width: 13px }
  .sidebar-divider { height: 12px }
  .footer { padding-bottom: 50px }
  .click-hint { display: none }
}

/* Landscape — short viewport */
@media (orientation: landscape) and (max-height: 500px) {
  /* Ticker — 2px accent + 22px ticker = 24px total */
  .ticker-bar { height: 22px }
  .ticker-text { font-size: .5rem; padding: 0 8px }
  .ticker-sep { padding: 0 4px; font-size: .55rem }
  .ticker-icon { width: 11px; height: 11px }
  .top-accent { height: 2px }

  /* Header — sticky, centered, very compact, below ticker (top: 24px) */
  .sticky-header { position: sticky; top: 24px; z-index: 5; padding: 3px 16px 0 }
  .logo-wrapper { margin-bottom: 1px }
  .logo { width: 32px }
  .church-identity { margin-bottom: 0 }
  .church-name { font-size: .85rem; margin-bottom: 0 }
  .church-subtitle { font-size: .45rem; margin-bottom: 0 }
  .church-motto { font-size: .42rem; margin-bottom: 0 }
  .church-location { font-size: .38rem }
  .ornament { display: none }

  /* Language switch — top-right corner, inside ticker height */
  .lang-switch { position: fixed; top: 3px; left: auto; right: 8px; transform: none; z-index: 12 }
  .lang-btn { padding: 2px 5px; font-size: .42rem; line-height: 1.4; border-radius: 3px; background: transparent; border-color: rgba(201,168,76,.25) }
  .lang-btn.active { background: rgba(201,168,76,.2) }

  /* Content compact */
  .container { padding: 6px 16px 12px }
  .message-card { margin-top: 6px; padding: 12px 20px }
  .message-label { font-size: .5rem; padding: 3px 10px; top: -4px; margin-bottom: 6px }
  .message-heading { font-size: 1rem; margin-bottom: 8px }
  .message-body { font-size: .75rem; line-height: 1.5; margin-bottom: 12px }
  .divider { margin-bottom: 12px }
  .service-info { gap: 8px; margin-bottom: 12px; flex-direction: row }
  .service-item { padding: 6px 10px; min-width: 140px }
  .service-item .label { font-size: .45rem }
  .service-item .value { font-size: .8rem }
  .service-item .detail { font-size: .5rem }

  /* Map */
  .map-section { margin-top: 12px }
  .map-embed { height: 140px }

  /* Sliders */
  .ministry-slider { margin-top: 14px; padding: 14px 40px 10px }
  .ministry-track { min-height: 100px }
  .ms-icon { width: 32px; height: 32px; margin-bottom: 6px }
  .ms-icon svg { width: 16px; height: 16px }
  .ms-title { font-size: 1rem; margin-bottom: 6px }
  .ms-desc { font-size: .72rem; line-height: 1.5 }
  .scripture-slider { margin-top: 14px; padding: 14px 40px 10px }
  .scripture-text { font-size: .9rem }

  /* Bottom bar — thinner */
  .sidebar-inner { padding: 3px 6px; gap: 2px }
  .sidebar-link { width: 26px; height: 26px }
  .sidebar-link svg { width: 11px; height: 11px; min-width: 11px }
  .sidebar-heading { font-size: .32rem }
  .sidebar-divider { height: 10px }
  .sidebar-toggle { width: 20px; height: 20px; margin-top: 0 }
  .sidebar-toggle svg { width: 10px; height: 10px }
  .footer { padding-bottom: 40px }
  .click-hint { display: none }
}

/* Extra small screens */
@media (max-width: 380px) {
  .church-name { font-size: 1.15rem }
  .church-subtitle { font-size: .62rem }
  .message-card { padding: 18px 16px }
  .message-heading { font-size: 1.2rem }
  .ministry-slider { padding: 18px 28px 14px }
  .scripture-slider { padding: 18px 28px 14px }
  .scripture-text { font-size: .95rem }
  .lang-btn { padding: 5px 8px; font-size: .58rem }
}