:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --ink: #1d2a33;
  --muted: #5d6b74;
  --line: #e4e0d6;
  --lake: #1f5f7a;
  --lake-deep: #143f52;
  --sand: #c9a46a;
  --notice-bg: #fff4dc;
  --notice-ink: #6b4a10;
  --ym: #2b5f8f;
  --yw: #8f3f6b;
  --ad: #3f7f5a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11181d;
    --surface: #1a232a;
    --ink: #e8ecee;
    --muted: #9aa8b0;
    --line: #2a353d;
    --lake: #5fa8c6;
    --lake-deep: #0f2a36;
    --sand: #d8b77f;
    --notice-bg: #3a2f17;
    --notice-ink: #f3dca8;
    --ym: #7fb0dc;
    --yw: #d98fb5;
    --ad: #85c4a0;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Keep sideways swipes from moving or navigating the whole page */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Inter", system-ui, sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.notices {
  background: var(--notice-bg);
  color: var(--notice-ink);
  font-weight: 500;
  text-align: center;
  padding: 10px 16px;
}
.notices p { margin: 2px 0; }

/* ---------- Header (unchanged look) ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--lake) 0%, var(--lake-deep) 100%);
  color: #fff;
  padding: 56px 0 72px;
  text-align: center;
}
.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}
.hero h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 650;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 1.1;
}
.tagline { margin: 12px 0 24px; opacity: .9; }
.jump { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jump a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
}
.jump a:hover { background: rgba(255,255,255,.15); }
.waves {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 40px;
  fill: var(--bg);
}

/* ---------- Layout ---------- */
main section { margin: 32px 0; }
h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 650;
  font-size: 26px;
  margin: 0 0 14px;
}
h3 { margin: 0 0 4px; font-size: 18px; }
.stack { display: grid; gap: 12px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.card p { margin: 0; }
/* Long web addresses or words wrap instead of pushing cards past the screen edge */
.card, .org-panel-inner { overflow-wrap: anywhere; min-width: 0; }
.stack > *, .col-main, .col-side { min-width: 0; }
.meta { font-size: 13px; color: var(--muted); margin-bottom: 4px !important; }
.empty { color: var(--muted); }

/* ---------- Sunday strip ---------- */
.sunday-strip {
  margin-top: -8px !important;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sand);
  border-radius: 10px;
  font-size: 14px;
}
.sunday-times { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sunday-times span b { font-weight: 600; }
.sunday-times span em { font-style: normal; color: var(--muted); }
.sunday-lead { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); }
.sunday-lead b { color: var(--ink); font-weight: 600; }

/* Conference weekends (General Conference or stake conference) replace the meeting times */
.conf-title { margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.conf-title small { font-weight: 400; color: var(--muted); }
.conf-day { display: grid; gap: 2px; margin: 6px 0 0; }
.conf-day > b { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.conf-day span em { font-style: normal; color: var(--muted); }
.conf-link { display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; margin: 16px 0 !important; padding: 14px 18px; text-decoration: none; color: inherit; }
.conf-link .program-title { grid-column: 1; }
.conf-link .conf-link-sub { grid-column: 1; font-size: 13px; color: var(--muted); }
.conf-link .app-card-go { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; color: var(--muted); }
.conf-link[hidden] { display: none !important; }

/* ---------- Youth ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.seg button {
  font: inherit; font-size: 13px; font-weight: 500;
  border: 0; background: transparent; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.seg button[aria-selected="true"] { background: var(--lake); color: #fff; }
.thu h3 { font-family: "Fraunces", Georgia, serif; font-size: 19px; }
.thu .meta { margin-bottom: 10px !important; }
.groups { display: grid; gap: 8px; }
.group { display: grid; grid-template-columns: 8px 1fr; gap: 10px; }
.group i { border-radius: 4px; background: var(--c); }
.group .g-name { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.group .g-title { font-weight: 500; }
.group .g-sub { font-size: 14px; color: var(--muted); }
.group.none .g-title { color: var(--muted); font-weight: 400; }
.group.ym { --c: var(--ym); } .group.yw { --c: var(--yw); } .group.ad { --c: var(--ad); }
@media (min-width: 640px) {
  .groups { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ---------- Events ---------- */
.event { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
.badge {
  text-align: center; border-radius: 10px; padding: 6px 0;
  background: var(--lake); color: #fff; line-height: 1.1;
}
.badge .mo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.badge .d { font-family: "Fraunces", Georgia, serif; font-size: 24px; font-weight: 650; }

/* ---------- Resources ---------- */
.resources { display: grid; gap: 10px; }
@media (min-width: 640px) { .resources { grid-template-columns: 1fr 1fr; } }
.resources a {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.resources a:hover { border-color: var(--lake); }
.resources b { color: var(--lake); }
.resources span { display: block; font-size: 14px; color: var(--muted); }

/* ---------- Quote of the day (in the header) ---------- */
.hero { padding-bottom: 84px; }
.qotd {
  max-width: 620px;
  margin: 30px auto 0;
  padding: 18px 22px 16px;
  text-align: left;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.3);
  border-left: 4px solid var(--sand);
  border-radius: 14px;
}
.qotd-label {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand);
}
.qotd blockquote {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(20px, 4.6vw, 26px);
  line-height: 1.35;
}
.qotd .quote-by { margin: 10px 0 0; font-size: 14px; opacity: .9; }
.qotd .quote-by a { color: inherit; text-underline-offset: 3px; }

/* ---------- Sacrament program (collapsible) ---------- */
.program { margin: 16px 0 !important; padding: 0; }
.program summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.program summary::-webkit-details-marker { display: none; }
.program summary::after {
  content: ""; flex: none; align-self: center;
  width: 8px; height: 8px; margin-left: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s;
}
.program[open] summary::after { transform: rotate(-135deg); }
.program-title { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 19px; margin-right: auto; }
.program-date { font-size: 13px; color: var(--muted); }
.program[open] summary { border-bottom: 1px solid var(--line); }
.program-note { margin: 0; padding: 12px 18px 0; color: var(--muted); font-size: 14px; }
.program-list { margin: 0; padding: 6px 18px 14px 44px; }
.program-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.program-list li:last-child { border-bottom: 0; }
.program-list li::marker { color: var(--muted); font-size: 13px; }
.p-role { font-weight: 500; }
.p-detail { display: block; font-size: 14px; color: var(--muted); }

.church-link { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; margin-bottom: 10px; }
.church-link-text { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.footer p { margin: 6px 0 0; }
.footer .disclaimer { max-width: 560px; margin: 14px auto 0; font-size: 13px; line-height: 1.5; }
.footer { padding: 24px 16px 40px; color: var(--muted); font-size: 14px; text-align: center; }

/* DESIGN B — "Dawn": warm, light, soft cards. Loaded after styles.css. */
:root {
  color-scheme: light;
  --bg: #fbf6ee;
  --surface: #ffffff;
  --ink: #3a2a22;
  --muted: #7a665b;
  --line: #eadfce;
  --lake: #b5532f;       /* terracotta accent (reuses the variable name) */
  --lake-deep: #8c3b1d;
  --sand: #c98a3d;
  --ym: #2b5f8f; --yw: #a8426f; --ad: #3f7f5a;
}
.hero {
  background: linear-gradient(180deg, #f4d3b2 0%, #f9e6d0 55%, var(--bg) 100%);
  color: var(--ink);
  padding: 52px 0 40px;
}
.waves { display: none; }
.eyebrow { color: var(--lake-deep); opacity: 1; }
.hero h1 { color: #4a2a1c; }
.tagline { opacity: .85; }
.jump a { color: var(--lake-deep); border-color: rgba(140,59,29,.35); background: rgba(255,255,255,.5); }
.jump a:hover { background: #fff; }
.qotd {
  background: #fff;
  border: 0;
  border-top: 4px solid var(--sand);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(120,70,30,.14);
  text-align: center;
  padding: 22px 24px 18px;
}
.qotd-label { color: var(--lake); }
.qotd blockquote { color: #4a2a1c; font-size: clamp(21px, 5vw, 28px); }
.qotd .quote-by { color: var(--muted); }
.qotd .quote-by a { color: var(--lake); }

main section { margin: 36px 0; }
h2 { color: #4a2a1c; }
h2::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; background: var(--sand); border-radius: 2px; }
.section-head h2::after { display: none; }
.card, .resources a { border: 0; border-radius: 18px; box-shadow: 0 2px 10px rgba(120,70,30,.09); }
.sunday-strip { border: 0; border-left: 4px solid var(--sand); border-radius: 14px; box-shadow: 0 2px 10px rgba(120,70,30,.09); margin-top: 8px !important; }
.seg { border-color: var(--line); }
.badge { background: var(--lake); border-radius: 14px; }
.footer { color: var(--muted); }

/* ---------- Desktop: two columns (phones keep the single column) ---------- */
@media (min-width: 980px) {
  main.wrap {
    max-width: 1100px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
  }
  #install, #sundays, #program, #conf-link, #current-bishop, #bishop, #orgs, #resources { grid-column: 1 / -1; }
  #orgs { margin-top: 8px; }
  #resources .resources { grid-template-columns: repeat(3, 1fr); }
  .col-main > section:first-child, .col-side > section:first-child { margin-top: 28px; }
  .col-side .resources { grid-template-columns: 1fr; }
  .hero { padding-top: 64px; }
  .qotd { max-width: 680px; }
  .footer { max-width: 1100px; }
}
@media (min-width: 640px) and (max-width: 979px) {
  main.wrap { max-width: 760px; }
}

/* ---------- "Save this website as an app" widget ---------- */
#install { margin: 8px 0 0 !important; }
.app-card {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid transparent; border-radius: 18px;
  box-shadow: 0 2px 10px rgba(120,70,30,.09); padding: 14px 16px;
}
.app-card:hover { border-color: var(--sand); }
.app-card-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--lake); color: #fff; display: grid; place-items: center; }
.app-card-text { display: grid; gap: 2px; min-width: 0; }
.app-card-text b { font-weight: 600; }
.app-card-text > span { font-size: 14px; color: var(--muted); }
.app-card-go { margin-left: auto; font-size: 28px; line-height: 1; color: var(--muted); }

/* ---------- Current Bishop ---------- */
#current-bishop { margin: 16px 0 0 !important; }
#current-bishop[hidden] { display: none !important; }
.current-bishop-label { font-size: 12px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.current-bishop .app-card-text b { font-size: 17px; }
.current-bishop-phone { font-size: 15px; font-weight: 500; color: var(--lake); text-decoration: none; justify-self: start; }
.current-bishop-phone:hover, .current-bishop-phone:focus-visible { text-decoration: underline; }
.current-bishop:hover { border-color: transparent; }
#current-bishop:not([hidden]) + #bishop { margin-top: 10px !important; }

/* ---------- Meet with Bishop ---------- */
#bishop { margin: 16px 0 0 !important; }
.bishop-card { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.bishop-card:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
.bishop-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 0; border-radius: 20px; padding: 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.bishop-dialog::backdrop { background: rgba(20,30,36,.45); }
.bishop-form { padding: 22px 20px 20px; }
.bishop-form h2 { margin: 0 0 6px; }
.bishop-lead { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.bishop-form label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
.bishop-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bishop-names label { margin-top: 0; }
.bishop-names input { margin-top: 6px; }
.bishop-form input[type="text"], .bishop-form textarea {
  display: block; width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.bishop-form textarea { resize: vertical; min-height: 80px; }
.bishop-form input:focus, .bishop-form textarea:focus { outline: 2px solid var(--lake); outline-offset: 1px; }
.bishop-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.bishop-optional { font-weight: 400; color: var(--muted); }
.bishop-form > div > input[type="text"]:not(.bishop-hp) { margin-top: 0; }
.bishop-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bishop-err { margin: 12px 0 0; color: #a12b1c; font-size: 14px; }
.bishop-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.bishop-btn {
  font: inherit; font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.bishop-btn.primary { background: var(--lake); border-color: var(--lake); color: #fff; }
.bishop-btn:disabled { opacity: .6; cursor: default; }
@media (prefers-color-scheme: dark) { .bishop-err { color: #f0a090; } .bishop-btn.primary { color: #0d1b22; } }
@media (max-width: 380px) { .bishop-names { grid-template-columns: 1fr; } }

/* ---------- Install tutorial page ---------- */
.hero-sm { padding: 40px 0 36px; }
.hero-sm h1 { font-size: clamp(30px, 7vw, 44px); }
.hero-sm .tagline { max-width: 560px; margin: 12px auto 0; }
.back { display: inline-block; margin-bottom: 14px; color: var(--lake-deep); text-decoration: none; font-size: 14px; font-weight: 500; }
.back:hover { text-decoration: underline; }
main.wrap.narrow { display: block; max-width: 820px; }
.seg-wide { display: flex; width: 100%; margin: 28px 0 8px; }
.seg-wide button { flex: 1; padding: 9px 8px; font-size: 14px; }
.panel[hidden] { display: none; }
.demo { margin: 22px auto 8px; text-align: center; }
.demo svg { width: 210px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(80,40,10,.25)); }
.demo-wide svg { width: min(100%, 460px); }
.demo figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.step { display: grid; gap: 16px; align-items: center; }
@media (min-width: 640px) { .step { grid-template-columns: 1fr 170px; } .step.step-text { grid-template-columns: 1fr; } }
.step-body { display: flex; gap: 14px; align-items: flex-start; }
.step h3 { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 20px; margin: 2px 0 6px; }
.num { flex: none; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; background: var(--lake); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.shot { margin: 0; justify-self: center; }
.shot svg { width: 170px; height: auto; display: block; }
.install-note { text-align: center; color: var(--muted); font-size: 14px; margin: 28px 0 8px; }

/* gentle "tap here" pulse + looping preview (no GIF files needed) */
.pulse { fill: none; stroke: #e0752d; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse 1.5s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.demo .f { opacity: 0; animation: frame5 15s infinite; }
.demo-4 .f { animation-name: frame4; animation-duration: 12s; }
.demo .f2 { animation-delay: 3s; } .demo .f3 { animation-delay: 6s; } .demo .f4 { animation-delay: 9s; } .demo .f5 { animation-delay: 12s; }
@keyframes frame5 { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@keyframes frame4 { 0% { opacity: 0; } 2.5% { opacity: 1; } 22.5% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .demo .f { animation: none; } .demo .f1 { opacity: 1; } }

/* ---------- Loading state + Admin Access tab ---------- */
body.loading > *:not(script) { visibility: hidden; }
.admin-tab {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  color: var(--lake-deep);
  padding: 6px 12px;
  border: 1px solid rgba(140,59,29,.35); border-radius: 999px;
  background: rgba(255,255,255,.6);
}
.admin-tab:hover { background: #fff; }
.admin-tab[hidden] { display: none; }
@media (min-width: 980px) { .admin-tab { top: 20px; right: 24px; } }

/* ---------- Organizations: swipe row + collapsible panel ---------- */
:root {
  --org-0: #6f5aa8;  /* Relief Society */
  --org-1: #2b5f8f;  /* Elders Quorum */
  --org-2: #b5532f;  /* Sunday School */
  --org-3: #c98a3d;  /* Primary */
  --org-4: #3f7f5a;  /* Aaronic Priesthood */
  --org-5: #a8426f;  /* Young Women */
  --org-6: #2f7f86;  /* Ward Mission */
}
.orgs h2 { margin-bottom: 6px; }
.org-row {
  position: relative; display: flex; gap: 12px;
  margin: 0 -16px; padding: 10px 16px 14px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-snap-type: x proximity; scroll-padding: 0 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.org-row::-webkit-scrollbar { display: none; }
@media (max-width: 979px) {
  .org-row { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); }
}
.org-tile {
  position: relative; flex: 1 0 156px; scroll-snap-align: start;
  display: grid; gap: 4px; align-content: start; text-align: left;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 0; border-radius: 18px;
  padding: 16px 34px 14px 22px; min-height: 92px;
  box-shadow: 0 2px 10px rgba(120,70,30,.09);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s, transform .2s;
}
.org-tile::before {
  content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 5px;
  border-radius: 4px; background: var(--oc);
}
.org-name { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 18px; line-height: 1.2; color: #4a2a1c; }
.org-sum { font-size: 13px; color: var(--muted); }
.org-tile::after {
  content: ""; position: absolute; right: 14px; top: 18px; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.org-tile[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--oc), 0 8px 22px rgba(120,70,30,.16); transform: translateY(-2px); }
.org-tile[aria-expanded="true"]::after { transform: rotate(-135deg); top: 21px; }
.org-tile:focus-visible, .org-close:focus-visible, .org-links a:focus-visible { outline: 3px solid var(--lake); outline-offset: 3px; }

.org-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.org-panel.open { grid-template-rows: 1fr; }
.org-panel-inner {
  min-height: 0; overflow: hidden; visibility: hidden;
  background: var(--surface); border-radius: 18px; border-top: 4px solid var(--oc, var(--sand));
  box-shadow: 0 2px 10px rgba(120,70,30,.09);
  transition: visibility 0s .28s;
}
.org-panel.open .org-panel-inner { visibility: visible; transition-delay: 0s; }
.org-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 2px; }
.org-head h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 22px; color: #4a2a1c; }
.org-close {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.org-close:hover { color: var(--ink); border-color: var(--muted); }
.org-block { padding: 12px 18px; }
.org-block + .org-block { border-top: 1px dashed var(--line); }
.org-block h4 { margin: 0 0 8px; font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 16px; color: var(--oc); }
.org-panel-inner > :last-child { padding-bottom: 18px; }
.org-note + .org-note { margin-top: 10px; }
.org-note b { font-weight: 600; }
.org-note p, .org-event p { margin: 2px 0 0; }
.org-event { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
.org-event + .org-event { margin-top: 12px; }
.org-event .badge { background: var(--oc); padding: 4px 0; }
.org-event .badge .d { font-size: 20px; }
.org-event b { font-weight: 600; }
.org-event .meta { margin-bottom: 2px !important; }
.org-links { display: grid; gap: 10px; }
@media (min-width: 640px) { .org-links { grid-template-columns: 1fr 1fr; } }
.org-links a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.org-links a:hover { border-color: var(--oc); }
.org-links b { color: var(--oc); }
.org-links span { display: block; font-size: 14px; color: var(--muted); }
.org-empty { margin: 0; padding: 10px 18px 18px; color: var(--muted); }
.org-lesson { margin: 12px 18px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fffaf1; overflow: hidden; }
.org-lesson summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.org-lesson summary::-webkit-details-marker { display: none; }
.org-teacher { margin: 6px 0 0; font-size: 14px; }
.org-block > .org-teacher { margin: 0; font-size: 15px; }
.org-teacher b { font-weight: 600; }
.org-lesson summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oc); flex: none; }
.org-lesson summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.org-lesson[open] summary::after { transform: rotate(-135deg); }
.org-lesson summary:focus-visible, .org-lesson-go:focus-visible { outline: 3px solid var(--lake); outline-offset: 2px; }
.org-lesson-label { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 16px; color: var(--oc); }
.org-lesson-body { padding: 0 14px 14px; }
.org-lesson-source { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f6ecdc; color: #6b4524; margin-bottom: 8px; }
.org-lesson-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.org-lesson-by { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.org-lesson-go { display: block; margin-top: 12px; text-align: center; padding: 10px 14px; border-radius: 999px; background: var(--oc); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.org-lesson-go:hover { filter: brightness(.92); }
.org-lesson + .org-block { border-top: 0; }
.org-lesson + .org-study { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .org-panel, .org-panel-inner, .org-tile, .org-tile::after { transition: none; }
  .org-tile[aria-expanded="true"] { transform: none; }
}
.org-panel-inner > .org-lesson:last-child { padding-bottom: 0; margin-bottom: 18px; }

/* Event links: Join on Zoom / Get directions / More info */
.event-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--lake);
  color: var(--lake-deep); font-size: 14px; font-weight: 600; text-decoration: none;
}
.event-link::before { font-size: 13px; line-height: 1; }
.event-link.zoom::before { content: "\25B6"; }
.event-link.directions::before { content: "\27A4"; }
.event-link.link::before { content: "\2197"; }
.event-link:hover { background: var(--lake); color: #fff; }
.event-link:focus-visible { outline: 3px solid var(--lake); outline-offset: 3px; }
@media (prefers-color-scheme: dark) { .event-link { color: var(--ink); } }

/* ---------- "Choose a different ward" (footer) ---------- */
.footer .other-wards { margin: 18px 0 4px; }
.ward-switch-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 500; text-decoration: none;
  box-shadow: 0 2px 10px rgba(120,70,30,.09);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ward-switch-btn svg { color: var(--lake); flex: none; }
.ward-switch-btn:hover { border-color: var(--sand); box-shadow: 0 4px 14px rgba(120,70,30,.14); }
.ward-switch-btn:active { transform: translateY(1px); }
.ward-switch-btn:focus-visible { outline: 2px solid var(--lake); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ward-switch-btn { transition: none; } }