/* Shared platform palette, based on the church footer reference.
   Load after component styles so public pages and staff tools stay consistent. */
:root {
  color-scheme: light;
  --church-navy: #0c2032;
  --church-surface: #ffffff;
  --church-raised: #edf3f7;
  --church-gold: #e2ad3a;
  --church-blue: #b8cfdf;
  --church-white: #ffffff;
  --church-border: #d6e0e7;
  --navy: var(--church-navy);
  --navy2: var(--church-surface);
  --gold: var(--church-gold);
  --paper: var(--church-surface);
  --church-heading: #0c2032;
  --church-muted: #506779;
  --church-accent: #805b13;
  --church-page: #f6f8fa;
  --ink: #243c4e;
  --muted: var(--church-muted);
  --line: var(--church-border);
  --shadow: 0 18px 50px #00000025;
}
body { background: var(--church-page); color: var(--ink); }
body :is(h1,h2,h3,h4,h5,h6) { color: var(--church-heading); }
body :is(.section h2,.panel.dark h2,.announcement-heading h2,.announcement-content h3,.community-invitation h2,.program-bulletin h2,.ministry-directory h2,.program-layout h2,.program-outline h2,.community-next h2,.program-event h3) { color: var(--church-heading); }
body :is(.hero h1,.page-title,.community-hero h1,.giving-intro h1,.calendar-intro h1,.dash-head h1) { color: var(--church-heading); }
body :is(.hero-copy,.hero-scripture,.section-head p,.card p,.church-description,.contact-panel small,.staff-section p,.giving-intro>.shell>p,.giving-church,.giving-help,.giving-complete p,.offering-group-heading p,.offering-feature p,.offering-feature small,.calendar-intro p,.calendar-published,.calendar-navigation label,.calendar-result-count,.calendar-event-count,.calendar-list-row time,.calendar-download p,.calendar-mobile-hint,.community-hero-grid>div>p,.community-invitation p,.program-bulletin p,.ministry-card>p,.community-next p,.program-time-note,.program-week-nav h3,.program-week-reset,.program-date,.program-date span,.program-event p,.program-help p,.outline-card ol,.announcement-meta,.announcement-content p,.announcement-controls,.service small,.schedule small,.offline-label,.destination,.side-brand small,.side-label,.chat-heading small,.footer small) { color: var(--church-muted); }
body :is(.eyebrow,.meta,.hero .eyebrow,.community-hero .eyebrow,.giving-sidebar .eyebrow,.ministry-card-top .eyebrow,.hero-scripture cite,.announcement-symbol,.announcement-worship>span,.offering-mark,.outline-number,.quick span) { color: var(--church-accent); }
body :is(.hero,.giving-intro,.calendar-intro,.community-hero) { background: radial-gradient(ellipse at 85% 10%,#f5ead0 0%,transparent 65%),#f8fafb; border-color: var(--church-border); }
body :is(.community-page,.live-page,.dashboard,.gallery-page,.footer,.sidebar,.service-strip) { background: var(--church-page); color: var(--ink); }
body :is(.section.alt,.panel,.panel.dark,.card,.dash-card,.quick,.hero-announcements,.community-invitation,.ministry-card,.program-bulletin,.program-help,.program-outline,.program-week-nav,.program-week-reset,.outline-card,.giving-help,.giving-complete,.offering-feature,.offering-group,.offering-group-heading,.calendar-list,.calendar-empty,.admin-media-card,.church-gallery-card,.media-upload,.media-document,.translation-editor,.modal,.live-stage,.chat-panel) { background: var(--church-surface); color: var(--ink); border-color: var(--church-border); }
body :is(.announcement-worship,.chat-heading,.calendar-weekdays) { background: var(--church-navy); color: var(--church-white); }
body :is(.announcement-heading,.announcement-controls,.ministry-card-links,.community-next,.program-event,.bulletin-cover,.calendar-scroll,.calendar-list-row,.offering-group li,.giving-sidebar nav a,.destination,.translation,.content-table th,.content-table td,.chat-form) { border-color: var(--church-border); }
body :is(.card a,.resource-links a,.community-invitation a,.text-link,.text-button,.ministry-card-links a,.program-help>a:not(.btn),.chat-message a,.offering-feature a,.footer a,.side-link,.outline-card summary,.program-event-link) { color: var(--church-muted); }
body :is(.card a,.resource-links a,.community-invitation a,.text-link,.text-button,.ministry-card-links a,.program-help>a:not(.btn),.chat-message a,.offering-feature a,.footer a,.side-link):hover { color: var(--church-accent); }
body .content-table th { color: var(--church-muted); }
body :is(.card-visual,.card-visual.gold,.card-visual.red,.window,.player) { background: linear-gradient(140deg,#19384f,var(--church-navy)); color: var(--church-white); }
body :is(.ministry-icon,.ministry-icon.large,.ministry-card:nth-child(3n+2) .ministry-icon,.ministry-card:nth-child(3n) .ministry-icon,.offering-number,.announcement-meta span:first-child) { background: var(--church-raised); color: var(--church-accent); }
body .sanctuary-arch { border-color: #e2ad3a25; box-shadow: 0 0 0 24px #e2ad3a05,0 0 0 48px #e2ad3a05; }
body .hero-scripture { border-color: var(--church-accent); }

/* Present the SDA symbol in white directly on the dark identity areas. */
body .church-header { background: var(--church-navy); border-color: var(--church-border); border-top-color: var(--church-accent); }
body .church-header .brand strong { color: var(--church-muted); }
body .church-header .brand small { color: var(--church-muted); }
body .church-header .church-logo-image,body .footer .church-logo-image { background: transparent; border-radius: 0; padding: 0; }
body .church-header .sda-symbol,body .footer .sda-symbol { filter: brightness(0) invert(1); }
body :is(.church-nav-wrap,.church-nav.is-open) { background: var(--church-surface); border-color: var(--church-border); }
body .church-nav>a { color: var(--church-muted); }
body .church-nav>a:hover { color: var(--church-white); background: var(--church-raised); }
body .church-nav>a[aria-current=page] { background: var(--church-raised); color: var(--church-accent); box-shadow: inset 0 -2px var(--church-gold); }
body .church-menu { background: var(--church-surface); color: var(--church-white); border-color: var(--church-border); }

/* White inputs and gold actions mirror the reference footer. */
body :is(input,select,textarea,.church-language,.field input,.field select,.field textarea,.media-upload input[type=file]) { color-scheme: light; background: #fff; color: #0c2032; border-color: #a4b6c3; accent-color: var(--church-accent); }
body :is(input,textarea)::placeholder { color: #586b79; opacity: 1; }
body :is(.btn,.tab,.announcement-controls button,.chat-topics button,.ministry-filters .btn) { background: var(--church-surface); color: var(--church-muted); border-color: var(--church-border); }
body :is(.btn,.tab,.announcement-controls button,.chat-topics button):hover { background: var(--church-raised); color: var(--church-heading); border-color: var(--church-accent); }
body :is(.btn-gold,.btn-navy,.tab.active,.ministry-filters .btn[aria-pressed=true],.calendar-views .btn[aria-pressed=true],.play) { background: var(--church-gold); color: var(--church-navy); border-color: var(--church-accent); }
body :is(.btn-gold,.btn-navy):hover { background: #efbd50; color: var(--church-navy); }
body :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--church-gold); outline-offset: 3px; }
body :is(.side-link:hover,.side-link.active) { background: var(--church-raised); color: var(--church-accent); }
body .close { color: var(--church-muted); }
body .chat-heading .close { color: var(--church-blue); }
body .toast { background: var(--church-gold); color: var(--church-navy); }

/* Calendar event types retain labeled distinctions within the shared palette. */
body .calendar-cell { background: var(--church-surface); border-color: var(--church-border); }
body .calendar-cell.outside { background: #f0f3f5; }
body .calendar-cell.is-today { background: var(--church-raised); box-shadow: inset 0 0 0 2px var(--church-gold); }
body .calendar-day-number { color: var(--church-muted); }
body :is(.calendar-day-number:hover,.program-event-link:hover) { background: var(--church-raised); color: var(--church-heading); }
body .calendar-day-number[aria-current=date] { background: var(--church-gold); color: var(--church-navy); }
body :is(.calendar-event,.calendar-event.vesper,.calendar-event.study,.calendar-event.music,.calendar-event.community) { background: var(--church-raised); border-left-color: var(--church-muted); }
body :is(.calendar-event.vesper,.calendar-event.community) { border-left-color: var(--church-accent); }
body .calendar-event strong { color: var(--church-heading); }
body .calendar-event span { color: var(--church-muted); }
body .calendar-scroll:before { background: var(--church-surface); color: var(--church-muted); }
body :is(.admin-media-card>img,.admin-media-card>video,.church-gallery-card img,.church-gallery-card video) { background: var(--church-navy); }
body :is(.chat-launcher,.chat-launcher[aria-expanded=true]) { background: var(--church-navy); color: var(--church-white); border-color: var(--church-accent); }
body .chat-message { background: var(--church-raised); color: var(--ink); }
body .chat-message.user { background: #e7eef6; color: var(--church-heading); }
/* Semantic statuses stay distinct and readable on dark surfaces. */
body .pill { background: var(--church-raised); color: var(--church-muted); }
body :is(.status-good,.pill.online) { color: #196044; }
body .pill.online { background: #e1f2e8; }
body :is(.status-missing,.pill.live,.modal [role=alert]) { color: #9a303d; }
body .pill.live { background: #fbe7eb; }
body .media-delete { color: #9a303d!important; border-color: #a66572!important; }
/* Routine media actions group together; the destructive one sits apart at the right. */
body .admin-media-card .actions { gap: 10px; align-items: center; }
body .admin-media-card .actions .media-delete { margin-left: auto; }

/* Dark identity and feature areas frame the lighter reading surfaces.
   Local tokens let child headings, copy and buttons inherit the right contrast. */
body :is(.church-header,.footer,.sidebar,.service-strip,.panel.dark,.program-bulletin,.offering-feature,.live-stage,.announcement-worship,.chat-heading,.calendar-weekdays) {
  color-scheme: dark;
  --church-surface: #122c42;
  --church-raised: #19384f;
  --church-border: #38546a;
  --church-heading: #ffffff;
  --church-muted: #b8cfdf;
  --church-accent: #e2ad3a;
  --ink: #edf4f8;
  background: var(--church-navy);
  color: var(--ink);
}
body .section.alt,body .program-outline { background: #edf3f7; }
body :is(.program-week-nav,.program-week-reset,.offering-group-heading,.media-upload,.translation-editor) { background: #f3f6f9; }
body .church-header .brand strong { color: var(--church-blue); }
body .chat-launcher { color: #ffffff; }
body .announcement-meta span:first-child { background: #f6ecd5; }
body .church-search label { color: var(--church-blue); }

/* Church noticeboard: a calm reading area and a distinct weekly schedule. */
body .hero { background: radial-gradient(ellipse at 88% 0%,#f3e8ce 0%,transparent 55%),#f8fafb; }
body .hero .hero-grid { gap: clamp(32px,4vw,56px); align-items: start; padding-top: 32px; padding-bottom: 32px; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
body .hero .hero-welcome { padding: 24px 0 0; }
body .hero h1 { font-size: clamp(38px,4.3vw,56px); letter-spacing: -.035em; line-height: 1.08; margin: 18px 0 22px; }
body .hero .hero-copy { max-width: 490px; line-height: 1.75; }
body .hero .hero-scripture { max-width: 450px; font-size: 17px; line-height: 1.55; margin-top: 24px; }
body .hero .actions { margin-top: 24px; gap: 12px; }
body .hero-location { display: flex; align-items: center; gap: 12px; max-width: 390px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #d6e0e7; color: #506779; text-decoration: none; }
body .hero-location-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #edf3f7; color: #0c2032; flex-shrink: 0; }
body .hero-location-icon svg { width: 21px; height: 21px; }
body .hero-location strong { display: block; font-size: 13px; color: #0c2032; line-height: 1.6; }
body .hero-location small { display: block; font-size: 12px; line-height: 1.6; }
body .hero-location>span:last-child { margin-left: 0; }
body .hero-location:hover { color: #805b13; }
body .announcement-contact { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: #0c2032; text-decoration: none; margin-top: 14px; padding: 4px 0; }
body .announcement-contact:hover { color: #805b13; text-decoration: underline; text-underline-offset: 4px; }
body .hero .hero-announcements { padding: 0; border-radius: 20px; border: 1px solid #d6e0e7; box-shadow: 0 12px 36px #0c203210; }
body .hero .announcement-heading { padding: 24px 28px 20px; gap: 14px; border-bottom: 1px solid #e5ebef; align-items: center; }
body .hero .announcement-symbol { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #f6ecd5; color: #805b13; }
body .announcement-symbol svg { width: 25px; height: 25px; }
body .hero .announcement-heading .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .13em; }
body .hero .announcement-heading h2 { font-size: 25px; line-height: 1.2; margin: 5px 0 0; }
body .hero .announcement-content { padding: 22px 28px 8px; min-height: 170px; }
body .hero .announcement-meta { justify-content: flex-start; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; }
body .announcement-meta .announcement-priority { display: inline-flex; align-items: center; gap: 7px; border-radius: 99px; padding: 5px 11px; line-height: 1.5; }
body .announcement-priority::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body .announcement-date { font-size: 12px; color: #506779; }
body .hero .announcement-content h3 { font-size: 29px; line-height: 1.2; margin: 20px 0 12px; white-space: normal; }
body .hero .announcement-content p { font-size: 14px; line-height: 1.75; margin: 0; }
body .hero .announcement-controls { margin: 0 28px; padding: 14px 0 20px; gap: 12px; }
body #announcement-count { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .08em; color: #506779; }
body .announcement-controls .announcement-navigation { display: flex; gap: 8px; align-items: center; }
body .announcement-controls button { min-width: 40px; min-height: 40px; padding: 8px 10px; background: #f6f8fa; border: 1px solid #d6e0e7; color: #0c2032; border-radius: 8px; }
body .announcement-controls #announcement-pause { min-width: 74px; font-size: 12px; font-weight: 600; }
body .announcement-controls button:hover { background: #edf3f7; border-color: #805b13; }
body .announcement-controls button:disabled { opacity: .4; cursor: default; }
body .hero .announcement-worship { display: block; margin: 0; padding: 18px 24px; }
body .announcement-worship h3 { font-family: 'DM Sans',sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; margin: 0 0 14px; color: #ffffff; }
body .announcement-worship dl { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
body .announcement-worship dl>div { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 12px 14px; border: 1px solid #38546a; border-radius: 9px; background: #122c42; font-size: 12px; line-height: 1.6; color: #b8cfdf; }
body .announcement-worship dt { min-width: 0; }
body .announcement-worship dd { margin: 0; white-space: nowrap; font-size: 16px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
body .announcement-worship .sabbath-service { color: #ffffff; border-color: #a6843b; font-weight: 600; }
body .announcement-worship .sabbath-service dd { color: #e2ad3a; }
body .announcement-worship .ay-service { border-color: #38546a; }
body .announcement-worship .ay-service a { color: #e2ad3a; text-underline-offset: 4px; }
body .announcement-worship .ay-service dd { white-space: normal; text-align: left; max-width: none; font-size: 16px; }
body .worship-together { padding: 40px 0 44px; border-top: 3px solid #e2ad3a; }
body .worship-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
body .worship-section-heading h2 { font-family: Newsreader,Georgia,serif; font-size: 34px; line-height: 1.2; margin: 8px 0; color: #fff; }
body .worship-section-heading p { color: #b8cfdf; font-size: 13px; margin: 0; line-height: 1.6; }
body .worship-section-heading .btn { gap: 16px; flex-shrink: 0; }
body .worship-session-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
body .worship-session { display: flex; flex-direction: column; padding: 22px; background: #122c42; border: 1px solid #38546a; border-radius: 12px; }
body .worship-session.sabbath { border-top: 3px solid #e2ad3a; padding-top: 20px; }
body .worship-session-day { color: #e2ad3a; font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.6; }
body .worship-session h3 { color: #fff; font-size: 18px; line-height: 1.4; margin: 12px 0; }
body .worship-session-time { color: #b8cfdf; font-size: 14px; line-height: 1.6; margin: 0 0 22px; font-variant-numeric: tabular-nums; }
body .worship-session>a { display: flex; justify-content: space-between; gap: 10px; color: #b8cfdf; font-size: 12px; line-height: 1.6; margin-top: auto; padding-top: 14px; border-top: 1px solid #38546a; text-decoration: none; }
body .worship-session>a:hover { color: #e2ad3a; }
body #ay-program { scroll-margin-top: 160px; }
body .outline-time { margin: 0 24px 18px; font-size: 13px; color: #506779; line-height: 1.6; }
@media(max-width:1000px) { body .worship-session-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { body .worship-section-heading { align-items: flex-start; flex-direction: column; } body .worship-session-grid { grid-template-columns: 1fr; } body .worship-together { padding: 30px 0; } }
@media(max-width:620px) {
  body .hero .announcement-heading { padding: 20px; gap: 12px; }
  body .hero .announcement-heading h2 { font-size: 23px; }
  body .hero .announcement-content { padding: 20px 20px 8px; min-height: 0; }
  body .hero .announcement-content h3 { font-size: 27px; }
  body .hero .announcement-controls { margin: 0 20px; }
  body .hero .announcement-worship { padding: 20px; }
}
@media(max-width:900px) {
  body .hero .hero-grid { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 32px; gap: 32px; }
  body .hero .hero-welcome,body .hero .hero-announcements { width: 100%; max-width: 650px; margin-inline: auto; }
  body .hero h1 { font-size: clamp(36px,6vw,48px); }
}
@media(max-width:380px) { body .announcement-worship dl { grid-template-columns: 1fr; } }

/* Prioritize readable notice text and complete, unambiguous service times. */
body .hero .announcement-heading { padding: 18px 24px; }
body .hero .announcement-heading .eyebrow { font-size: 11px; line-height: 1.7; letter-spacing: .09em; }
body .hero .announcement-heading h2 { font-size: 25px; line-height: 1.3; }
body .hero .announcement-content { padding: 18px 24px 8px; min-height: 0; }
body .hero .announcement-content h3 { font-size: 27px; line-height: 1.3; margin: 14px 0 10px; white-space: normal; }
body .hero .announcement-content p { font-size: 16px; line-height: 1.65; color: #3e5669; }
body .hero .announcement-meta,body .announcement-date { font-size: 13px; }
body .announcement-contact { margin-top: 14px; padding: 10px 16px; border-radius: 7px; background: #0c2032; color: #ffffff; font-size: 14px; min-height: 44px; }
body .announcement-contact:hover { background: #19384f; color: #ffffff; }
body .hero .announcement-controls { margin: 0 24px; padding: 10px 0 16px; }
body #announcement-count { font-size: 14px; }
body .announcement-controls button { min-width: 44px; min-height: 44px; }
body .announcement-controls #announcement-pause { font-size: 14px; }
body .announcement-worship h3 { font-size: 18px; margin-bottom: 6px; }
body .hero .announcement-worship .announcement-timezone { color: #b8cfdf; font-size: 12px; line-height: 1.6; margin: 0 0 18px; }
body .announcement-worship dl>div { padding: 10px 12px; gap: 4px; }
body .announcement-worship dt { font-size: 14px; line-height: 1.6; }
body .announcement-worship dd,body .announcement-worship .ay-service dd { font-size: 16px; line-height: 1.6; white-space: normal; }
html[lang=my] body .hero .announcement-heading h2 { font-size: 24px; line-height: 1.7; }
html[lang=my] body .hero .announcement-content h3 { font-size: 26px; line-height: 1.7; }
html[lang=my] body .hero .announcement-content p { line-height: 2; }
@media(max-width:620px) {
  body .hero .announcement-heading,body .hero .announcement-content { padding: 20px; }
  body .hero .announcement-heading h2 { font-size: 25px; }
  body .hero .announcement-content h3 { font-size: 27px; }
  body .announcement-worship dl { grid-template-columns: 1fr; }
}

/* Short desktop windows (including display scaling): prioritize the full notice
   and schedule without clipping text or adding an internal scroll area. */
@media(min-width:901px) and (max-height:850px) {
  body .church-header-main { min-height: 64px; padding-top: 6px; padding-bottom: 6px; }
  body .church-header .church-logo-image { width: 48px; height: 48px; flex-basis: 48px; }
  body .church-header .brand strong { font-size: 21px; }
  body .church-header .brand small { margin-top: 3px; }
  body .church-nav { padding-top: 2px; padding-bottom: 2px; }
  body .church-nav>a,body .nav-group>summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  body .hero .hero-grid { padding-top: 12px; padding-bottom: 12px; gap: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); }
  body .hero .hero-welcome { padding-top: 12px; }
  body .hero h1 { font-size: clamp(36px,3.6vw,46px); margin: 14px 0 18px; }
  body .hero .hero-copy { font-size: 16px; line-height: 1.6; margin: 14px 0; }
  body .hero .hero-scripture { margin-top: 18px; font-size: 16px; line-height: 1.45; }
  body .hero .hero-scripture cite { margin-top: 6px; }
  body .hero .actions { margin-top: 18px; }
  body .hero-location { margin-top: 18px; padding-top: 14px; }
  body .hero .announcement-heading { padding: 12px 22px; gap: 12px; }
  body .hero .announcement-heading h2 { font-size: 23px; line-height: 1.2; margin-top: 3px; }
  body .hero .announcement-heading .eyebrow { font-size: 10px; line-height: 1.5; }
  body .hero .announcement-symbol { width: 36px; height: 36px; flex-basis: 36px; }
  body .hero .announcement-content { padding: 14px 22px 0; }
  body .hero .announcement-content h3 { font-size: 24px; line-height: 1.2; margin: 12px 0 8px; }
  body .hero .announcement-content p { font-size: 15px; line-height: 1.5; }
  body .announcement-contact { margin-top: 10px; padding: 6px 0; min-height: 32px; background: transparent; color: #0c2032; border-radius: 0; }
  body .announcement-contact:hover { background: transparent; color: #805b13; }
  body .hero .announcement-controls { margin: 0 22px; padding: 6px 0 10px; }
  body .hero .announcement-worship { padding: 12px 22px 14px; }
  body .announcement-worship h3 { font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
  body .hero .announcement-worship .announcement-timezone { font-size: 12px; line-height: 1.4; margin-bottom: 7px; }
  body .announcement-worship dl { grid-template-columns: 1fr; gap: 0; }
  body .announcement-worship dl>div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0; border: 0; border-bottom: 1px solid #38546a; border-radius: 0; background: transparent; }
  body .announcement-worship dl>div:last-child { border-bottom: 0; }
  body .announcement-worship dt { font-size: 12px; line-height: 1.4; }
  body .announcement-worship dd,body .announcement-worship .ay-service dd { font-size: 14px; line-height: 1.4; text-align: right; flex-shrink: 0; }
}

/* Featured noticeboard: one focused message, one action, a distinct timetable. */
body .hero .noticeboard { border-radius: 16px; border-color: #d4dee5; box-shadow: 0 16px 40px #0c203212; }
body .hero .noticeboard .announcement-heading { padding: 16px 22px; border-bottom: 0; gap: 12px; }
body .hero .noticeboard .announcement-heading>div { flex: 1; min-width: 0; }
body .hero .noticeboard .announcement-heading h2 { font-size: 24px; line-height: 1.25; }
body .hero .noticeboard #announcement-count { flex-shrink: 0; align-self: center; padding: 6px 9px; border: 1px solid #dce4e9; border-radius: 20px; background: #f7fafc; font-size: 12px; letter-spacing: 0; }
body .hero .noticeboard .announcement-content { margin: 0 18px; padding: 16px 18px; border: 1px solid #eee4ce; border-left: 3px solid #d9a632; border-radius: 4px 10px 10px 4px; background: linear-gradient(115deg,#fbf5e8,#fffdf9); }
body .hero .noticeboard .announcement-meta { gap: 10px; }
body .hero .noticeboard .announcement-priority { background: transparent; padding: 0; border-radius: 0; color: #805b13; font-size: 12px; }
body .hero .noticeboard .announcement-date { padding-left: 10px; border-left: 1px solid #d8cdb4; font-size: 12px; }
body .hero .noticeboard .announcement-content h3 { font-size: 27px; line-height: 1.25; margin: 12px 0 10px; }
body .hero .noticeboard .announcement-content p { font-size: 15px; line-height: 1.6; color: #405769; }
body .hero .noticeboard .announcement-controls { margin: 0; padding: 12px 18px 16px; flex-wrap: wrap; gap: 10px; }
body .hero .noticeboard .announcement-contact { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #e2ad3a; color: #0c2032; padding: 10px 14px; min-height: 44px; margin: 0; border: 1px solid #ca972b; border-radius: 7px; font-size: 13px; font-weight: 700; text-decoration: none; }
body .hero .noticeboard .announcement-contact:hover { background: #efbd50; }
body .hero .noticeboard .announcement-navigation { gap: 4px; }
body .hero .noticeboard .announcement-navigation button { background: transparent; border-color: transparent; min-width: 40px; padding: 8px; font-size: 16px; }
body .hero .noticeboard .announcement-navigation #announcement-pause { font-size: 12px; min-width: 64px; }
body .hero .noticeboard .announcement-navigation button:hover { background: #edf3f7; border-color: #d6e0e7; }
body .hero .noticeboard .announcement-worship { border-top: 3px solid #e2ad3a; }
body .hero .noticeboard .announcement-worship h3 { letter-spacing: .01em; }
@media(max-width:620px) {
  body .hero .noticeboard .announcement-heading { padding: 16px; gap: 10px; flex-wrap: wrap; }
  body .hero .noticeboard .announcement-heading h2 { font-size: 22px; }
  body .hero .noticeboard .announcement-content { margin: 0 14px; padding: 16px; }
  body .hero .noticeboard .announcement-content h3 { font-size: 25px; }
  body .hero .noticeboard .announcement-controls { padding: 12px 14px 16px; }
}
html[lang=my] body .hero .noticeboard .announcement-content h3 { font-size: 24px; line-height: 1.65; }
html[lang=my] body .hero .noticeboard .announcement-heading h2 { font-size: 22px; line-height: 1.65; }
html[lang=my] body .hero .noticeboard .announcement-content p { line-height: 1.9; }

/* Standalone announcement card; worship times live in the section below. */
body .hero .noticeboard { align-self: center; border-radius: 18px; border: 1px solid #d6e0e7; border-top: 4px solid #e2ad3a; background: #fff; box-shadow: 0 18px 48px #0c203213; }
body .hero .noticeboard .announcement-heading { padding: 22px 26px; background: #f5f8fa; border-bottom: 1px solid #e0e7ec; }
body .hero .noticeboard .announcement-symbol { background: #0c2032; color: #e2ad3a; border-radius: 10px; }
body .hero .noticeboard .announcement-heading h2 { font-size: 25px; }
body .hero .noticeboard #announcement-count { background: #fff; color: #506779; }
body .hero .noticeboard .announcement-content { margin: 0; padding: 28px 28px 24px; border: 0; border-radius: 0; background: #fff; min-height: 190px; }
body .hero .noticeboard .announcement-priority { background: #f6ecd5; padding: 5px 10px; border-radius: 5px; }
body .hero .noticeboard .announcement-date { border: 0; margin-left: auto; padding-left: 0; }
body .hero .noticeboard .announcement-content h3 { font-size: 32px; line-height: 1.2; margin: 20px 0 14px; letter-spacing: -.015em; }
body .hero .noticeboard .announcement-content p { font-size: 16px; line-height: 1.75; max-width: 55ch; }
body .hero .noticeboard .announcement-controls { border-top: 1px solid #e0e7ec; margin: 0 28px; padding: 18px 0 22px; }
body .hero .noticeboard .announcement-contact { padding: 10px 18px; font-size: 14px; }
body .hero .noticeboard .announcement-navigation button { border: 1px solid #d6e0e7; background: #fff; border-radius: 8px; min-width: 40px; }
body .hero .noticeboard .announcement-navigation #announcement-pause { border-color: transparent; }
@media(min-width:901px) and (max-height:850px) {
  body .hero .noticeboard .announcement-heading { padding: 18px 24px; }
  body .hero .noticeboard .announcement-content { padding: 24px; }
  body .hero .noticeboard .announcement-content h3 { font-size: 30px; }
  body .hero .noticeboard .announcement-controls { margin-inline: 24px; padding: 16px 0 18px; }
}
@media(max-width:620px) {
  body .hero .noticeboard .announcement-heading { padding: 18px; }
  body .hero .noticeboard .announcement-heading h2 { font-size: 23px; }
  body .hero .noticeboard .announcement-content { padding: 22px 20px; min-height: 0; }
  body .hero .noticeboard .announcement-content h3 { font-size: 28px; }
  body .hero .noticeboard .announcement-controls { margin-inline: 20px; }
}
html[lang=my] body .hero .noticeboard .announcement-content h3 { font-size: 26px; line-height: 1.65; }

/* Photographic hero retains a solid announcement panel and readable welcome. */
body .hero.photo-hero { background: #0c2032; isolation: isolate; }
body .photo-hero .hero-background-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
body .photo-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0c2032e8 0%,#0c2032b3 48%,#0c20325c 100%); z-index: -1; }
body .photo-hero .sanctuary-arch { display: none; }
body .photo-hero .hero-welcome h1 { color: #fff; }
body .photo-hero .hero-welcome :is(.hero-copy,.hero-scripture,.hero-location,.hero-location strong,.hero-location small) { color: #edf4f8; }
body .photo-hero .hero-welcome :is(.eyebrow,.hero-scripture cite) { color: #f2cd76; }
body .photo-hero .hero-location { border-color: #b8cfdf66; }
body .photo-hero .hero-location-icon { background: #ffffff1f; color: #fff; }
body .photo-hero .hero-welcome .actions>.btn:not(.btn-gold) { background: #fff; color: #0c2032; }
.activity-assignments { border: 1px solid #d6e0e7; border-radius: 8px; margin: 16px 0; padding: 12px; }
.activity-assignments legend { font-weight: 700; }
.activity-assignments p { font-size: 12px; line-height: 1.6; }
.activity-assignments>div { display: grid; gap: 10px; max-height: 220px; overflow-y: auto; }
.activity-assignments label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.activity-assignments input { flex: 0 0 18px; width: 18px; height: 18px; }
.activity-media { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; margin: 12px 0 20px; min-width: 0; max-width: 100%; padding-bottom: 4px; }
.activity-media figure { margin: 0; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; border: 1px solid #d6e0e7; border-radius: 10px; overflow: hidden; background: #fff; }
.activity-media :is(img,video) { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #0c2032; }
/* Photos fill the frame. Letterboxing them left navy bars down both sides of every
   card; a 3:2 photo in a 16:9 frame loses very little to a crop. Video keeps
   contain, where cropping the picture would be worse than the bars. */
.activity-media img { object-fit: cover; }
.activity-media video { object-fit: contain; }
.activity-media figcaption { font-size: 12px; padding: 10px 12px; line-height: 1.5; color: #405769; overflow-wrap: anywhere; }
body .activity-media-empty { font-size: 12px; line-height: 1.65; padding: 16px; border: 1px dashed #a8b9c5; border-radius: 8px; margin: 0; color: var(--church-muted); width: 100%; }
.worship-session,.ministry-card,.program-event>div { min-width: 0; }
.outline-card>.activity-media { margin: 12px 22px 22px; }
body .calendar-event .activity-media figcaption { color: #405769; }
@media(max-width:620px) { body .photo-hero::before { background: #0c2032c7; } }

/* Pastor introduction: preserve the complete family photograph. */
body .pastor-section { background: #f8fafb; scroll-margin-top: 140px; }
.pastor-profile { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid #d6e0e7; border-radius: 18px; overflow: hidden; background: #fff; }
.pastor-profile figure { margin: 0; align-self: center; background: #edf3f7; }
.pastor-profile img { display: block; width: 100%; height: auto; }
.pastor-profile figcaption { padding: 12px 20px; font-size: 12px; color: #506779; line-height: 1.6; }
.pastor-introduction { padding: clamp(24px,4vw,48px); align-self: center; }
body .pastor-introduction h2 { font-size: clamp(30px,3vw,40px); line-height: 1.2; margin: 14px 0; color: #0c2032; }
.pastor-introduction p { color: #405769; font-size: 16px; line-height: 1.8; }
.pastor-introduction .pastor-church { font-size: 13px; color: #506779; }
.pastor-introduction .btn { gap: 14px; margin-top: 12px; padding: 12px 18px; line-height: 1.5; }
.pastor-profile.without-photo { grid-template-columns: 1fr; }
@media(max-width:800px) { .pastor-profile { grid-template-columns: 1fr; } }

/* One predictable hero layout replaces competing compact/card alignment rules. */
body .hero.photo-hero { overflow: hidden; }
body .hero.photo-hero .hero-background-photo.captioned-exterior { height: 145%; bottom: auto; object-position: center top; }
body .hero.photo-hero::before { background: linear-gradient(90deg,#0c2032eb 0%,#0c2032bf 52%,#0c20328c 100%); }
body .hero.photo-hero .hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: clamp(32px,5vw,80px); padding-top: 28px; padding-bottom: 28px; }
body .hero.photo-hero .hero-welcome { padding: 0; min-width: 0; }
body .hero.photo-hero .hero-welcome h1>span { display: block; }
body .hero.photo-hero .hero-welcome h1 { font-size: clamp(36px,3.4vw,58px); line-height: 1.1; margin: 16px 0 20px; }
body .hero.photo-hero .hero-copy { font-size: 16px; line-height: 1.7; margin: 0; max-width: 48ch; }
body .hero.photo-hero .hero-scripture { margin-top: 20px; font-size: 16px; line-height: 1.5; }
body .hero.photo-hero .actions { margin-top: 22px; }
body .hero.photo-hero .hero-location { margin-top: 20px; padding-top: 14px; max-width: 100%; }
body .hero.photo-hero .noticeboard { align-self: center; margin: 0; width: 100%; max-width: none; min-width: 0; border-radius: 12px; border: 1px solid #d6e0e7; border-top: 3px solid #e2ad3a; box-shadow: 0 12px 32px #00000020; }
body .hero.photo-hero .noticeboard .announcement-heading { padding: 20px 24px 18px; background: #fff; border-bottom: 1px solid #e5ebef; align-items: center; gap: 12px; }
body .hero.photo-hero .noticeboard .announcement-symbol { width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; background: #f6ecd5; color: #805b13; }
body .hero.photo-hero .noticeboard .announcement-heading .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
body .hero.photo-hero .noticeboard .announcement-heading h2 { font-family: 'DM Sans',sans-serif; font-size: 20px; line-height: 1.4; font-weight: 700; margin: 4px 0 0; }
body .hero.photo-hero .noticeboard #announcement-count { border: 0; padding: 4px 0 4px 8px; background: transparent; font-size: 12px; }
body .hero.photo-hero .noticeboard .announcement-content { padding: 22px 24px; min-height: 0; }
body .hero.photo-hero .noticeboard .announcement-meta { align-items: center; gap: 10px; }
body .hero.photo-hero .noticeboard .announcement-content h3 { font-size: 28px; line-height: 1.3; margin: 18px 0 12px; white-space: normal; overflow-wrap: anywhere; }
body .hero.photo-hero .noticeboard .announcement-content p { font-size: 15px; line-height: 1.75; margin: 0; overflow-wrap: anywhere; }
body .hero.photo-hero .noticeboard .announcement-controls { padding: 16px 24px; margin: 0; background: #f7f9fb; border-top: 1px solid #e5ebef; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
body .hero.photo-hero .noticeboard .announcement-contact { font-size: 13px; padding: 10px 14px; }
body .hero.photo-hero .noticeboard .announcement-navigation { margin-left: auto; gap: 4px; }
body .hero.photo-hero .noticeboard .announcement-navigation button { min-height: 40px; min-width: 36px; padding: 8px; }
@media(max-width:1000px) {
  body .hero.photo-hero .hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; padding-bottom: 28px; }
  body .hero.photo-hero .hero-welcome,body .hero.photo-hero .noticeboard { max-width: 650px; width: 100%; margin-inline: auto; }
}
@media(max-width:620px) {
  body .hero.photo-hero .noticeboard .announcement-heading { padding: 18px; }
  body .hero.photo-hero .noticeboard .announcement-content { padding: 20px; }
  body .hero.photo-hero .noticeboard .announcement-content h3 { font-size: 26px; }
  body .hero.photo-hero .noticeboard .announcement-controls { padding: 14px 18px; }
}
html[lang=my] body .hero.photo-hero .noticeboard .announcement-heading h2 { font-size: 19px; line-height: 1.7; }
html[lang=my] body .hero.photo-hero .noticeboard .announcement-content h3 { font-size: 24px; line-height: 1.7; }

/* A single masthead: church identity left, utilities and navigation right. */
body .church-header { border-top-width: 3px; box-shadow: 0 6px 24px #06142118; }
body .church-header .brand strong { color: #edf4f8; }
body .church-header select.church-language { appearance: none; border: 1px solid #496174; background: #142e42; color: #edf4f8; color-scheme: dark; border-radius: 8px; height: 40px; min-height: 40px; padding: 9px 34px 9px 14px; line-height: 24px; }
body .church-header .church-language-control { position: relative; }
body .church-header .church-language-control::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #b8cfdf; }
body .church-header select.church-language:hover { border-color: #e2ad3a; }
body .church-header .church-watch { border-radius: 8px; }
.header-socials { display: flex; align-items: center; gap: 6px; }
.header-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #b8cfdf; border: 1px solid #38546a; border-radius: 8px; text-decoration: none; }
.header-socials svg { width: 20px; height: 20px; }
.header-socials a:hover { color: #e2ad3a; background: #19384f; border-color: #e2ad3a; }
.header-socials a:focus-visible { outline: 2px solid #e2ad3a; outline-offset: 3px; }
@media(max-width:620px) {
  body .church-header-actions { gap: 8px; flex-wrap: wrap; }
  body .church-header .church-language { width: 120px; }
  .header-socials { gap: 4px; }
  body .church-header-main { gap: 6px; }
}
body .church-nav>a,body .nav-group>summary { position: relative; border-radius: 6px; transition: background-color .15s ease,color .15s ease; }
/* The active page is underlined beneath its text rather than across the padded box,
   so the line stays centred whatever side padding a breakpoint gives the item. */
body .church-nav>a[aria-current=page],body .nav-group[data-active=true]>summary { background: transparent; box-shadow: none; color: #efb839; text-decoration: underline 2px #e2ad3a; text-underline-offset: 8px; }
body .nav-dropdown { padding: 8px; border-top-width: 2px; border-radius: 10px; box-shadow: 0 16px 40px #06142130; color-scheme: light; max-height: min(420px,60dvh); overflow-y: auto; }
body .church-header .nav-group>summary { align-items: center; }
body .church-header .nav-group>summary>span,body .church-header .church-language-control::after { display: inline-block; width: 20px; height: 20px; border: 0; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
body .church-header .nav-group>summary>span { transform: none; flex-shrink: 0; }
body .church-header .nav-group[open]>summary>span { transform: rotate(180deg); }
body .church-header .nav-group[open]>summary { background: #19384f; color: #e2ad3a; }
body .church-header .nav-dropdown>a { color: #0c2032; text-align: left; border-radius: 6px; }
body .church-header .nav-dropdown { top: calc(100% + 10px); min-width: 240px; padding: 10px; border: 1px solid #dce4e9; border-top: 3px solid #e2ad3a; }
body .church-header .nav-dropdown>a:hover,body .church-header .nav-dropdown>a:focus-visible { background: #edf3f7; color: #0c2032; }
body .nav-dropdown>a { min-height: 44px; padding: 11px 14px; }
body .nav-dropdown>a+a { margin-top: 2px; }
@media(min-width:1181px) {
  body .church-header { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 24px; row-gap: 0; padding: 8px 24px 0; }
  body .church-header-main { display: contents; }
  body .church-header .brand { grid-column: 1; grid-row: 1 / 3; align-self: center; gap: 8px; padding: 0; align-items: center; }
  body .church-header .church-logo-image { width: 64px; height: 64px; flex-basis: 64px; object-fit: contain; object-position: center; }
  body .church-header .brand strong { font-size: 22px; line-height: 1.25; max-width: none; white-space: normal; }
  body .church-header .brand>span { padding-top: 0; }
  body .church-header .brand small { margin-top: 4px; font-size: 10px; letter-spacing: .07em; }
  body .church-header-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 18px; padding-bottom: 0; }
  body .church-header .church-nav-wrap { grid-column: 2; grid-row: 2; background: transparent; border: 0; }
  body .church-nav { padding: 0 0 4px; margin: 0; max-width: none; gap: 4px; flex-wrap: nowrap; }
  body .church-nav>a,body .nav-group>summary { padding: 10px; font-size: 14px; min-height: 44px; }
  body .nav-group>summary { gap: 6px; }
  html[lang=my] body .church-header .brand strong { font-size: 18px; line-height: 1.6; }
  html[lang=my] body .church-nav>a,html[lang=my] body .nav-group>summary { font-size: 12px; padding-inline: 10px; }
}
@media(max-width:1180px) {
  body .church-header .nav-dropdown { min-width: 0; }
  body .church-menu { background: #19384f; color: #edf4f8; border-color: #496174; border-radius: 8px; }
  body .church-nav.is-open { top: 8px; border-radius: 12px; box-shadow: 0 16px 40px #06142140; }
  body .church-nav>a[aria-current=page],body .nav-group[data-active=true]>summary { background: #19384f; }
  body .church-nav>a[aria-current=page]::after,body .nav-group[data-active=true]>summary::after { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  body .church-nav>a,body .nav-group>summary { transition: none; }
}

/* A readable church noticeboard inside the on-demand sidebar. */
body .announcement-board { width: 100%; min-width: 0; padding: 0; margin: 0; background: #fffdf9; color: #102b40; }
body .announcement-board .board-heading { display: flex; align-items: center; gap: 14px; padding: 26px 24px; background: #102b40; border-bottom: 1px solid #c49a47; }
body .announcement-board .board-heading-icon { display: grid; place-items: center; color: #e7c57f; width: 42px; height: 52px; flex: 0 0 42px; border: 1px solid #e7c57f66; border-radius: 22px 22px 4px 4px; }
body .announcement-board .board-heading-icon svg { width: 23px; height: 23px; }
body .announcement-board .board-heading-copy { flex: 1; min-width: 0; }
body .announcement-board .board-kicker { margin: 0 0 6px; color: #e7c57f; font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
body .announcement-board .board-heading h2 { margin: 0; color: #fffdf9; font: 500 25px/1.15 Georgia,serif; letter-spacing: -.025em; }
body .announcement-board .board-feature { margin: 24px 24px 0; background: #f5f1e8; border: 1px solid #e7dfd0; border-radius: 10px; overflow: hidden; }
body .announcement-board .board-list { padding: 22px 20px 12px; opacity: 1; transition: opacity .3s ease; }
body .announcement-board .board-list.is-fading { opacity: 0; }
body .announcement-board .board-notice[hidden] { display: none; }
body .announcement-board .board-notice { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
body .announcement-board .board-notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: 11px; line-height: 1.5; color: #78603b; }
body .announcement-board .board-date { display: inline-flex; gap: 4px; }
body .announcement-board .board-date strong { font-weight: inherit; }
body .announcement-board .board-priority { color: #76500f; background: #eaddbf; padding: 3px 7px; border-radius: 4px; font-weight: 600; }
body .announcement-board .board-priority::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin: 0 5px 2px 0; }
body .announcement-board .board-notice-title { margin: 0 0 12px; color: #102b40; font: 600 21px/1.35 'DM Sans',sans-serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
body .announcement-board .board-notice-body p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: #526675; white-space: pre-line; overflow-wrap: anywhere; }
body .announcement-board .board-attachments { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 16px 0; }
body .announcement-board .board-attachments a { min-width: 0; }
body .announcement-board .board-attachments a:first-child { grid-column: 1/-1; }
body .announcement-board .board-attachments img { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 6px; background: #e9e3d8; }
body .announcement-board .board-contact { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 13px; color: #102b40; font-weight: 600; text-decoration: none; }
body .announcement-board .board-contact:hover { text-decoration: underline; text-underline-offset: 4px; }
body .announcement-board .board-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 6px 20px; border-top: 1px solid #e7dfd0; }
body .announcement-board .board-counter { color: #526675; font-size: 11px; font-variant-numeric: tabular-nums; }
body .announcement-board .board-cycle-controls { display: flex; align-items: center; gap: 2px; }
body .announcement-board .board-cycle-controls button { width: 40px; min-height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #102b40; cursor: pointer; font-size: 15px; }
body .announcement-board .board-cycle-controls button:hover { background: #e7dfcd; }
body .announcement-board .board-directory,body .announcement-board .board-resources { margin: 26px 24px 0; }
body .announcement-board .board-section-label { margin: 0 0 12px; color: #78603b; font: 600 10px/1.6 'DM Sans',sans-serif; letter-spacing: .12em; text-transform: uppercase; }
body .announcement-board .board-jump-list { display: grid; gap: 6px; }
body .announcement-board .board-jump { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #102b40; cursor: pointer; }
body .announcement-board .board-jump:hover { background: #f5f1e8; }
body .announcement-board .board-jump[aria-current=true] { border-color: #ded8c9; background: #f5f1e8; }
body .announcement-board .board-jump-number { align-self: flex-start; padding-top: 2px; color: #96733e; font-size: 11px; font-variant-numeric: tabular-nums; }
body .announcement-board .board-jump-copy { flex: 1; min-width: 0; }
body .announcement-board .board-jump-title { display: block; font-size: 13px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
body .announcement-board .board-jump-date { display: block; margin-top: 4px; color: #667784; font-size: 11px; line-height: 1.5; }
body .announcement-board .board-jump-arrow { color: #96733e; }
body .announcement-board .board-resources { padding-top: 22px; margin-bottom: 24px; border-top: 1px solid #e7dfd0; }
body .announcement-board :is(.board-program,.board-calendar,.board-team) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 16px; font-size: 13px; line-height: 1.5; font-weight: 600; text-decoration: none; border-radius: 6px; }
body .announcement-board .board-program { background: #102b40; color: #fffdf9; }
body .announcement-board .board-program>span:nth-child(2) { flex: 1; }
body .announcement-board .board-program svg { display: block; width: 18px; height: 18px; color: #e7c57f; }
body .announcement-board .board-program:hover { background: #204259; }
body .announcement-board .board-calendar { margin-top: 8px; border: 1px solid #e7dfd0; color: #102b40; }
body .announcement-board .board-calendar:hover,body .announcement-board .board-team:hover { background: #f5f1e8; }
body .announcement-board .board-team { margin-top: 10px; color: #526675; font-size: 12px; font-weight: 500; }
body .announcement-board .board-admin { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 14px 16px 0; border-top: 1px solid #e7dfd0; color: #526675; font-size: 12px; font-weight: 600; text-decoration: none; }
body .announcement-board .board-admin svg { width: 16px; height: 16px; flex-shrink: 0; color: #96733e; }
body .announcement-board .board-admin>span:first-of-type { flex: 1; }
body .announcement-board .board-admin:hover { color: #102b40; text-decoration: underline; text-underline-offset: 4px; }
body .announcement-board .board-empty h3 { margin: 0 0 12px; font: 500 22px/1.35 Georgia,serif; color: #102b40; }
body .announcement-board .board-empty p { margin: 0 0 12px; font-size: 14px; line-height: 1.75; color: #526675; }
body .announcement-board :is(a,button):focus-visible { outline: 2px solid #a47a2b; outline-offset: -2px; }
html[lang=my] body .announcement-board :is(h2,.board-notice-title) { font-family: 'Myanmar Text',sans-serif; line-height: 1.65; }
@media(max-width:380px) {
 body .announcement-board .board-heading { padding: 22px 16px; gap: 10px; }
 body .announcement-board .board-heading h2 { font-size: 22px; }
 body .announcement-board .board-heading-icon { display: none; }
 body .announcement-board .board-feature { margin: 20px 16px 0; }
 body .announcement-board .board-list { padding: 18px 16px 8px; }
 body .announcement-board .board-directory,body .announcement-board .board-resources { margin-left: 16px; margin-right: 16px; }
}
@media(prefers-reduced-motion:reduce) { body .announcement-board .board-list { transition: none; } }

body .hero.photo-hero .hero-background-photo { opacity: 0; transition: opacity 1.4s ease; }
body .hero.photo-hero .hero-background-photo.is-active { opacity: 1; }
body .hero.photo-hero .hero-slide-controls { display: flex; align-items: center; width: fit-content; gap: 2px; margin-top: 24px; padding: 2px 4px; border: 0; border-radius: 26px; background: #0c203299; color: #fff; }
body .hero.photo-hero .hero-slide-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 15px; cursor: pointer; }
body .hero.photo-hero .hero-slide-controls button:hover { background: #ffffff24; }
body .hero.photo-hero .hero-slide-controls button:focus-visible { outline: 2px solid #ebc77e; outline-offset: 0; }
body .hero.photo-hero #hero-slide-count { padding: 0 12px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.announcement-photo-picker { min-width: 0; margin: 8px 0; padding: 16px; border: 1px solid #d6e0e7; border-radius: 8px; }
.announcement-photo-picker legend { font-weight: 600; padding: 0 6px; }
.announcement-photo-picker p,.announcement-photo-picker>a { font-size: 13px; }
.announcement-photo-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-height: 280px; overflow-y: auto; margin: 12px 0; }
.announcement-photo-options label { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #d6e0e7; border-radius: 6px; font-size: 12px; cursor: pointer; }
.announcement-photo-options label:has(:checked) { border-color: #9c7429; background: #faf3e5; }
.announcement-photo-options input { position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; accent-color: #102b40; }
.announcement-photo-options img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 3px; }
@media(prefers-reduced-motion:reduce) { body .hero.photo-hero .hero-background-photo { transition: none; } }

/* Ministries: a quiet editorial layout with a consistent action hierarchy. */
body .ministries-page { background: #fff; }
body .ministries-page .shell { max-width: 1184px; padding-inline: 40px; }
body .ministries-page .community-hero { padding: 72px 0; background: #f7f6f2; border-bottom: 1px solid #e6e6e0; }
body .ministries-page .community-hero-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 64px; }
body .ministries-page .eyebrow { font-size: 11px; letter-spacing: .16em; line-height: 1.7; }
body .ministries-page .community-hero h1 { font-size: clamp(40px,4.5vw,60px); line-height: 1.1; letter-spacing: -.035em; margin: 18px 0 22px; white-space: normal; }
body .ministries-page .community-hero-grid>div>p { max-width: 43ch; font-size: 17px; line-height: 1.8; margin: 0 0 28px; color: #52616d; }
body .ministries-page .btn { min-height: 48px; border-radius: 6px; font-size: 14px; padding: 10px 20px; line-height: 1.5; }
body .ministries-page .btn.btn-navy { background: #0c2032; border-color: #0c2032; color: #fff; }
body .ministries-page .btn.btn-navy:hover { background: #203d52; border-color: #203d52; color: #fff; }
body .ministries-page .community-invitation { padding: 30px; border: 1px solid #e1e4e5; border-top: 3px solid #c49848; border-radius: 8px; box-shadow: 0 8px 24px #0c203206; background: #fff; }
body .ministries-page .ministry-icon.large { width: 44px; height: 44px; margin: 0; border-radius: 50%; background: #f6f1e6; }
body .ministries-page .ministry-icon.large svg { width: 24px; height: 24px; }
body .ministries-page .community-invitation h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; margin: 18px 0 12px; white-space: normal; }
body .ministries-page .community-invitation p { font-size: 14px; line-height: 1.8; margin: 0 0 20px; color: #52616d; }
body .ministries-page .community-invitation a { display: block; border-top: 1px solid #e8ebed; padding-top: 16px; font-size: 13px; line-height: 1.7; color: #0c2032; }
body .ministries-page .ministry-directory { padding-top: 56px; padding-bottom: 56px; }
body .ministries-page .section-head { gap: 24px; margin-bottom: 26px; align-items: end; }
body .ministries-page .ministry-directory .section-head h2 { font-size: clamp(30px,3.3vw,40px); line-height: 1.15; letter-spacing: -.025em; margin: 8px 0 0; white-space: normal; }
body .ministries-page .section-head .text-link { flex-shrink: 0; font-size: 13px; padding-block: 5px; color: #0c2032; }
body .ministries-page .ministry-filters { gap: 8px; margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid #e5e9eb; }
body .ministries-page .ministry-filters .btn { min-height: 44px; padding: 9px 16px; font-size: 13px; font-weight: 500; background: #f6f8f9; border-color: transparent; color: #465966; }
body .ministries-page .ministry-filters .btn:hover { background: #eaf0f3; box-shadow: none; transform: none; }
body .ministries-page .ministry-filters .btn[aria-pressed=true] { background: #0c2032; border-color: #0c2032; color: #fff; }
body .ministries-page .ministry-grid { gap: 20px; }
body .ministries-page .ministry-card { padding: 26px; border: 1px solid #e1e7eb; border-radius: 8px; box-shadow: 0 2px 5px #0c203203; }
body .ministries-page .ministry-card-top { gap: 12px; align-items: center; }
body .ministries-page .ministry-icon { width: 42px; height: 42px; border-radius: 8px; background: #f4f1e9; color: #805b13; }
body .ministries-page .ministry-icon svg { width: 23px; height: 23px; }
body .ministries-page .ministry-card-top .eyebrow { font-size: 9px; letter-spacing: .12em; color: #6b6455; }
body .ministries-page .ministry-card h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.02em; margin: 22px 0 12px; }
body .ministries-page .ministry-card>p { font-size: 14px; line-height: 1.8; color: #52616d; margin-bottom: 24px; }
body .ministries-page .ministry-card-links { gap: 8px; padding-top: 18px; }
body .ministries-page .ministry-card-links a { font-size: 12px; color: #52616d; }
body .ministries-page .ministry-card-links a:first-child { color: #0c2032; }
body .ministries-page .community-next { margin-top: 0; padding-top: 36px; padding-bottom: 48px; border-color: #e5e9eb; }
body .ministries-page .community-next h2 { font-size: 32px; letter-spacing: -.02em; }
body .ministries-page .community-next p { font-size: 14px; }
body .ministries-page :is(a,button):focus-visible { outline: 3px solid #a47826; outline-offset: 4px; }
@media (max-width: 1000px) {
  body .ministries-page .shell { padding-inline: 32px; }
  body .ministries-page .community-hero { padding: 48px 0; }
  body .ministries-page .community-hero-grid { gap: 32px; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
  body .ministries-page .community-invitation { padding: 24px; }
  body .ministries-page .section-head { align-items: start; flex-direction: column; gap: 12px; }
}
@media (max-width: 700px) {
  body .ministries-page .shell { padding-inline: 24px; }
  body .ministries-page .community-hero { padding: 36px 0; }
  body .ministries-page .community-hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  body .ministries-page .community-hero h1 { font-size: clamp(36px,8vw,46px); }
  body .ministries-page .community-invitation h2 { font-size: 26px; }
  body .ministries-page .ministry-directory { padding-top: 36px; padding-bottom: 36px; }
  body .ministries-page .ministry-directory .section-head h2 { font-size: 32px; }
  body .ministries-page .section-head .text-link { display: inline-block; margin-top: 10px; }
  body .ministries-page .ministry-filters { gap: 6px; padding-bottom: 20px; margin-bottom: 24px; }
  body .ministries-page .ministry-filters .btn { padding-inline: 12px; font-size: 12px; }
  body .ministries-page .ministry-card { padding: 24px; }
}
html[lang=my] body .ministries-page :is(h1,h2) { line-height: 1.65; letter-spacing: normal; }
html[lang=my] body .ministries-page .community-hero h1 { font-size: clamp(30px,4vw,44px); }
@media (prefers-reduced-motion: reduce) {
  body .ministries-page :is(a,button) { transition: none; }
}

body .ministries-page .activity-media:has(>.activity-media-empty) { display: none; }

/* Public church theme: shared rhythm and surfaces across every visitor page. */
body .public-site {
  --church-page: #ffffff;
  --church-border: #e0e5e7;
  --church-muted: #526471;
  --church-cream: #f7f5f0;
  background: #fff;
  color: #243c4e;
}
body .public-site .shell { max-width: 1200px; padding-inline: 32px; }
body .home-page>section>.shell,body .home-page .hero-grid { max-width: 1440px; }
@media(min-width:1001px) {
 body .home-page .hero-welcome { max-width: 650px; }
 body .home-page .announcement-board { max-width: 420px; justify-self: end; }
}
@media(min-width:1001px) and (max-height:720px) {
 body .hero.photo-hero .hero-grid { padding-block: 20px; }
 body .hero.photo-hero .hero-welcome h1 { margin-block: 12px 16px; }
 body .hero.photo-hero .hero-scripture { margin-top: 16px; }
 body .hero.photo-hero .actions { margin-top: 16px; }
 body .hero.photo-hero .hero-slide-controls { margin-top: 16px; }
}
body .public-site .section { padding-block: 68px; }
body .public-site .section.alt { background: var(--church-cream); }
body .public-site .section-head { gap: 24px; margin-bottom: 28px; }
body .public-site .section-head>div { min-width: 0; }
body .public-site .section-head>.btn { flex-shrink: 0; }
body .public-site .section-head p { font-size: 15px; line-height: 1.8; max-width: 42ch; margin-bottom: 0; }
body .public-site .eyebrow { font-size: 11px; line-height: 1.7; letter-spacing: .14em; }
body .public-site .section h2 { font-size: clamp(30px,3vw,40px); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; white-space: normal; }
body .public-site .btn { min-height: 46px; padding: 11px 18px; font-size: 14px; line-height: 1.5; border-radius: 6px; box-shadow: none; }
body .public-site .btn:hover { box-shadow: 0 3px 10px #0c20320a; }
body .public-site .btn.btn-navy { background: #0c2032; border-color: #0c2032; color: #fff; }
body .public-site .btn.btn-navy:hover { background: #203d52; border-color: #203d52; color: #fff; }
body .public-site .btn.btn-gold { background: #e2ad3a; border-color: #c28f26; color: #0c2032; }
body .public-site .btn.btn-gold:hover { background: #edbc50; }
body .public-site :is(.panel,.card,.church-gallery-card) { border: 1px solid #e0e5e7; border-radius: 10px; box-shadow: 0 3px 12px #0c203203; }
body .public-site .panel { padding: 32px; }
body .public-site .panel p,body .public-site .church-description { font-size: 15px; line-height: 1.85; color: #526471; }
body .public-site .panel h3 { font-family: Newsreader,Georgia,serif; font-size: 29px; font-weight: 500; margin: 0 0 14px; }
body .public-site .panel.dark { border-color: #0c2032; border-top: 3px solid #c49848; }
body .public-site .panel.dark p { color: #c6d5de; }
body .public-site :is(.community-hero,.giving-intro,.calendar-intro) { padding-block: 56px; background: var(--church-cream); border-bottom: 1px solid #e5e4df; }
body .public-site :is(.community-hero,.giving-intro,.calendar-intro) h1 { font-size: clamp(38px,4.5vw,58px); line-height: 1.12; letter-spacing: -.035em; margin: 16px 0 22px; }
body .public-site :is(.community-hero,.giving-intro,.calendar-intro)>.shell>p { max-width: 58ch; font-size: 17px; line-height: 1.8; color: #526471; }
body .public-site .community-hero-grid { gap: 48px; }
body .public-site :is(.program-layout,.giving-layout,.calendar-body,.gallery-page) { padding-top: 48px; padding-bottom: 60px; }
body .public-site .activity-media:has(>.activity-media-empty) { display: none; }
body .public-site .activity-media figure { border-radius: 6px; border-color: #e0e5e7; }
body .public-site .activity-media figcaption { font-size: 11px; line-height: 1.6; padding: 8px 10px; }
body .public-site :is(a,button,input,select):focus-visible { outline: 3px solid #a47a2b; outline-offset: 4px; }
body .public-site [id] { scroll-margin-top: 160px; }

/* The worship schedule is easy to scan directly beneath the photographic welcome. */
body .public-site .worship-together { color-scheme: light; --church-heading: #0c2032; --church-muted: #526471; --church-accent: #805b13; background: #f7f5f0; color: #243c4e; padding: 34px 0 40px; border-top: 1px solid #d9c48f; border-bottom: 1px solid #e5e4df; }
body .public-site .worship-section-heading h2 { color: #0c2032; font-size: 36px; font-weight: 500; letter-spacing: -.025em; }
body .public-site .worship-section-heading p { color: #526471; }
body .public-site .worship-session { padding: 22px; border: 1px solid #e0e5e7; border-top: 3px solid #e0e5e7; border-radius: 8px; background: #fff; }
body .public-site .worship-session.sabbath { border-top-color: #c49848; }
body .public-site .worship-session-day { color: #805b13; font-size: 11px; letter-spacing: .05em; }
body .public-site .worship-session h3 { color: #0c2032; font-size: 16px; font-weight: 600; line-height: 1.5; margin: 10px 0; }
body .public-site .worship-session-time { color: #526471; font-size: 13px; margin-bottom: 14px; }
body .public-site .worship-session>a { color: #0c2032; border-top-color: #e0e5e7; font-weight: 600; }
body .public-site .worship-session .activity-media { margin: auto 0 18px; }
body .public-site .worship-session .activity-media figure { border: 0; }
body .public-site .worship-session .activity-media figcaption { padding-inline: 0; }

/* Event cards and recordings use compact category headers and generous reading space. */
body .public-site .cards { gap: 22px; }
body .public-site .card { display: flex; flex-direction: column; }
body .public-site .card-visual { height: auto; min-height: 64px; padding: 20px 24px; background: #f4f6f7; color: #805b13; border-bottom: 1px solid #e0e5e7; }
body .public-site .card-visual::before,body .public-site .card-visual::after { display: none; }
body .public-site .card-visual span { font-family: 'DM Sans',sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
body .public-site .card-body { display: flex; flex-direction: column; padding: 24px; flex: 1; }
body .public-site .card-body .meta { font-size: 10px; line-height: 1.8; letter-spacing: .03em; }
body .public-site .card-body h3 { font-family: Newsreader,Georgia,serif; font-size: 27px; font-weight: 500; line-height: 1.25; margin: 12px 0; }
body .public-site .card-body p { font-size: 13px; line-height: 1.8; margin: 0 0 16px; }
body .public-site .card-body>a { margin-top: auto; border-top: 1px solid #e0e5e7; padding-top: 16px; color: #0c2032; font-size: 13px; line-height: 1.7; text-decoration: none; }
body .public-site .card-body>a:hover { text-decoration: underline; text-underline-offset: 4px; }
body .public-site .resource-links { gap: 0; }
/* The second half of the headline carries the gold accent. */
body .hero h1 .hero-accent { color: var(--church-gold,#e2ad3a); }
/* Values row: four icon cards introducing the church straight under the hero. */
body .church-values { padding: 46px 0 8px; background: var(--church-page); }
body .value-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; text-align: center; }
body .value-card h2 { margin: 16px 0 6px; font: 600 18px/1.4 'DM Sans',sans-serif; color: var(--church-navy); }
body .value-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--church-muted); }
body .value-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; }
body .value-icon svg { width: 28px; height: 28px; }
@media(max-width:900px) { body .value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 20px; } }
@media(max-width:560px) { body .value-grid { grid-template-columns: 1fr; } }
/* Live banner: one dark card offering every way to watch. */
body .live-banner { padding: 40px 0 8px; background: var(--church-page); }
body .live-banner-inner { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 30px; align-items: center; padding: 34px; border-radius: 14px; background: var(--church-navy); color: #f3f7fa; }
/* Without a published worship photo the banner is a single full-width column. */
body .live-banner-inner:not(:has(.live-banner-media)) { grid-template-columns: 1fr; }
body .live-flag { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f6d9a0; }
body .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2503f; box-shadow: 0 0 0 4px #e2503f33; }
body .live-banner h2 { margin: 14px 0 10px; font: 600 30px/1.2 Newsreader,Georgia,serif; color: #fff; }
body .live-banner p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #cfdbe4; }
body .live-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body .live-banner .btn { min-height: 46px; padding: 12px 20px; border-radius: 7px; font-size: 14px; }
body .live-banner .live-youtube { background: #c8362a; border-color: #c8362a; color: #fff; }
body .live-banner .live-facebook { background: #2b5798; border-color: #2b5798; color: #fff; }
body .live-banner .live-site { background: transparent; border-color: #7d93a4; color: #fff; }
body .live-banner .live-site:hover { background: #ffffff1a; }
body .live-banner-media { display: block; border-radius: 10px; overflow: hidden; }
body .live-banner-media img,body .live-banner-media video { width: 100%; height: 236px; object-fit: cover; display: block; }
body .live-banner-media:empty { display: none; }
@media(max-width:820px) { body .live-banner-inner { grid-template-columns: 1fr; padding: 26px; } body .live-banner-media img,body .live-banner-media video { height: 190px; } }
/* Event cards lead with the date, so the week reads at a glance. */
body .event-head { display: flex; align-items: flex-start; gap: 14px; }
body .event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 54px; padding: 7px 0; border: 1px solid var(--church-line,#dfe4e7); border-radius: 9px; background: #fbf7ee; }
body .event-date small { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #96733e; }
body .event-date strong { font: 600 21px/1.1 'DM Sans',sans-serif; color: var(--church-navy); }
body .event-head h3 { margin: 0 0 4px; }
body .event-head .meta { margin: 0; }
body .event-head p { margin: 4px 0 0; }
/* The media strip scrolls; give it a slim scrollbar instead of the browser default. */
body .activity-media { scrollbar-width: thin; scrollbar-color: #c3d0d9 transparent; }
body .activity-media::-webkit-scrollbar { height: 8px; }
body .activity-media::-webkit-scrollbar-track { background: transparent; }
body .activity-media::-webkit-scrollbar-thumb { background: #c3d0d9; border-radius: 4px; }
body .activity-media::-webkit-scrollbar-button { display: none; }
/* A single photo has nothing to scroll between. */
body .activity-media:not(:has(figure + figure)) { overflow-x: hidden; }
/* A giving action sits with the header controls. */
body .header-give { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 18px; font-size: 13px; white-space: nowrap; }
body .header-give::after { content: none; }
@media(max-width:900px) { body .header-give { display: none; } }
/* Adventist resource directory: four groups across, collapsing on narrower screens. */
body .resource-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; margin-top: 8px; }
body .resource-group h3 { margin: 0 0 6px; font: 600 17px/1.4 'DM Sans',sans-serif; }
@media(max-width:1000px) { body .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } }
@media(max-width:620px) { body .resource-grid { grid-template-columns: 1fr; } }
body .public-site .resource-links a { display: block; padding: 14px 0; border-bottom: 1px solid #e0e5e7; font-size: 14px; text-decoration: none; color: #0c2032; }
body .public-site .resource-links a:last-child { border-bottom: 0; padding-bottom: 0; }
body .public-site .contact-panel>a { display: block; padding: 18px 0; margin: 0; border-top: 1px solid #e0e5e7; color: #0c2032; font-size: 17px; text-decoration: none; }
body .public-site .contact-panel small { font-size: 10px; letter-spacing: .1em; color: #805b13; }
body .public-site .pastor-section { background: #fff; }
body .public-site .pastor-profile { border-radius: 10px; border-color: #e0e5e7; }
body .public-site .pastor-introduction { padding: 36px; }
body .public-site .church-gallery-grid { gap: 22px; }
body .public-site .church-gallery-card { overflow: hidden; }
body .public-site .church-gallery-card :is(img,video) { background: #edf0f2; }
body .public-site .church-gallery-card figcaption { font-size: 13px; font-weight: 500; line-height: 1.65; padding: 16px 18px; }

/* Program and giving pages share the same quiet, structured panels. */
body .public-site .program-bulletin { border: 1px solid #19384f; border-top: 3px solid #c49848; border-radius: 10px; box-shadow: 0 8px 20px #0c20320c; padding: 28px; }
body .public-site .program-help { border: 1px solid #e0e5e7; border-radius: 8px; background: #f7f5f0; padding: 26px; }
body .public-site .program-help h2 { font-size: 28px; line-height: 1.25; }
body .public-site .program-help>a { overflow-wrap: anywhere; }
body .public-site .program-week-nav { background: #f7f5f0; border-color: #e5e4df; border-radius: 8px 8px 0 0; }
body .public-site .program-week-reset { background: #f7f5f0; border-color: #e5e4df; border-radius: 0 0 8px 8px; }
body .public-site .program-event { padding-block: 28px; }
body .public-site .program-event .activity-media { max-width: 380px; }
body .public-site .program-date { padding: 10px; background: #f7f5f0; border-radius: 6px; font-size: 12px; }
body .public-site .program-event-link { background: #fff; color: #0c2032; width: 44px; height: 44px; }
body .public-site .program-outline { background: #f7f5f0; border-color: #e5e4df; padding-block: 56px; }
body .public-site .outline-card { border-radius: 8px; border-color: #e0e5e7; }
body .public-site .outline-card summary { font-size: 14px; color: #0c2032; padding: 22px; }
body .public-site .outline-card[open] summary { border-bottom: 1px solid #e0e5e7; margin-bottom: 18px; }
body .public-site .outline-card .activity-media { max-width: 340px; }
body .public-site .offering-feature { border-radius: 10px; border-top: 3px solid #c49848; }
body .public-site .offering-group { border-radius: 8px; border-color: #e0e5e7; }
body .public-site .offering-group-heading { background: #f7f5f0; border-bottom: 1px solid #e5e4df; }
body .public-site .offering-number { background: #fff; color: #805b13; border: 1px solid #e4dfd3; }
body .public-site .offering-group li { font-size: 14px; }
body .public-site .giving-help { border: 1px solid #e0e5e7; background: #f7f5f0; }
body .public-site .giving-complete { border: 1px solid #e0e5e7; background: #f7f5f0; padding: 30px; }
body .public-site .giving-intro>.shell>.giving-note { font-size: 13px; }

/* Calendar and worship broadcast. */
body .public-site .calendar-tools { padding: 24px; border: 1px solid #e0e5e7; border-radius: 8px; background: #f7f5f0; }
body .public-site .calendar-views .btn[aria-pressed=true] { background: #0c2032; color: #fff; border-color: #0c2032; }
body .public-site .calendar-navigation { padding-block: 12px; }
body .public-site .calendar-day-number[aria-current=date] { background: #0c2032; color: #fff; }
body .public-site .calendar-cell.is-today { background: #faf6ea; box-shadow: inset 0 0 0 2px #c49848; }
body .public-site .calendar-download { padding-top: 20px; border-top: 1px solid #e0e5e7; }
body .public-site.live-page { padding-top: 48px; }
body .public-site .live-stage { border-radius: 10px; border-top: 3px solid #c49848; padding: 36px; }
body .public-site .live-stage h1 { font-family: Newsreader,Georgia,serif; font-size: clamp(34px,4vw,52px); line-height: 1.15; font-weight: 500; margin: 16px 0 28px; letter-spacing: -.025em; }
body .public-site .player { min-height: 340px; aspect-ratio: auto; padding: 40px 24px; border: 1px solid #38546a; border-radius: 8px; background: #142f44; }
body .public-site .player h2 { font-family: Newsreader,Georgia,serif; font-size: 32px; font-weight: 500; }
body .public-site .player p { font-size: 14px; line-height: 1.8; }
body .public-site .schedule { padding-top: 22px; gap: 32px; flex-wrap: wrap; }
body .public-site .schedule small { font-size: 11px; margin-bottom: 6px; }
body .public-site .schedule strong { font-size: 14px; line-height: 1.6; }
body .footer { border-top: 3px solid #b58b37; padding: 52px 0; }
body .footer .shell { max-width: 1200px; padding-inline: 32px; }
body .footer .footer-grid { gap: 32px; }
body .footer h3 { font-size: 14px; font-weight: 600; margin: 0 0 18px; }
body .footer a:not(.brand) { font-size: 13px; line-height: 1.8; padding-block: 3px; text-underline-offset: 4px; }
body .footer p { font-size: 13px; line-height: 1.8; }
body .footer .brand { align-items: flex-start; }
body .footer .brand strong { font-size: 20px; }
body .footer .church-search { gap: 10px; }
body .footer .church-search .btn { min-height: 46px; }
@media(max-width:1000px) {
  body .public-site .community-hero-grid { gap: 32px; }
  body .public-site .section-head { align-items: flex-start; }
  body .public-site .section-head p { max-width: 35ch; }
  body .public-site .program-layout { gap: 28px; }
  body .public-site .pastor-introduction { padding: 28px; }
}
@media(max-width:700px) {
  body .public-site .shell,body .footer .shell { padding-inline: 22px; }
  body .public-site .section { padding-block: 44px; }
  body .public-site .section-head { flex-direction: column; gap: 16px; align-items: flex-start; }
  body .public-site :is(.community-hero,.giving-intro,.calendar-intro) { padding-block: 36px; }
  body .public-site :is(.community-hero,.giving-intro,.calendar-intro) h1 { font-size: clamp(34px,8vw,44px); }
  body .public-site .community-hero-grid { grid-template-columns: minmax(0,1fr); }
  body .public-site :is(.program-layout,.giving-layout,.calendar-body,.gallery-page) { padding-top: 32px; padding-bottom: 40px; }
  body .public-site .panel,body .public-site .live-stage { padding: 24px; }
  body .public-site .worship-together { padding-block: 36px; }
  body .public-site .worship-section-heading h2 { font-size: 32px; }
  body .public-site .worship-session { padding: 22px; }
  body .public-site .card-body { padding: 22px; }
  body .public-site .program-outline { padding-block: 40px; }
  body .public-site .program-event { grid-template-columns: 66px minmax(0,1fr) 36px; gap: 10px; }
  body .public-site .program-date { padding: 8px 5px; }
  body .public-site .program-event-link { width: 36px; height: 44px; }
  body .public-site .calendar-tools { padding: 18px; }
  body .public-site .calendar-search>div { flex-wrap: wrap; }
  body .public-site .calendar-search input { flex: 1; min-width: 130px; }
  body .public-site .calendar-search .btn { flex: 1; }
  body .public-site .calendar-navigation .btn { min-width: 44px; }
  body .public-site .player { min-height: 310px; padding: 28px 18px; }
  body .public-site .player h2 { font-size: 28px; }
  body .public-site.live-page { padding-top: 28px; }
  body .public-site .live-stage h1 { font-size: 36px; }
  body .public-site .schedule { gap: 18px; }
  body .footer { padding-block: 40px; }
  body .footer .footer-grid { gap: 28px; }
}
html[lang=my] body .public-site :is(h1,h2,h3) { line-height: 1.65; letter-spacing: normal; }
html[lang=my] body .public-site :is(.community-hero,.giving-intro,.calendar-intro) h1 { font-size: clamp(30px,4vw,44px); }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  body .public-site :is(a,button) { transition: none; }
  body .public-site .btn:hover { transform: none; }
}

/* Keep worship outlines compact, with their steps and photos side by side. */
body .public-site .outline-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
body .public-site .outline-card[open] summary { margin-bottom: 0; }
body .public-site .outline-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 28px; padding: 24px; }
body .public-site .outline-body>p,body .public-site .outline-body>ol { grid-column: 1; margin: 0; }
body .public-site .outline-body>ol { padding: 0 0 0 28px; }
body .public-site .outline-body>.activity-media { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; max-width: 100%; }
@media(max-width:700px) {
  body .public-site .outline-body { display: block; padding: 22px; }
  body .public-site .outline-body>p { margin-bottom: 16px; }
  body .public-site .outline-body>.activity-media { margin-top: 20px; }
}
/* A focused first-visit section brings the essential details together. */
body .public-site .visit-section { background: #fff; }
body .public-site .visit-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
body .public-site .visit-welcome { background: #0c2032; border: 1px solid #19384f; border-top: 3px solid #c49848; border-radius: 10px; padding: 32px; color: #edf4f8; }
body .public-site .visit-welcome .eyebrow { color: #e5bd62; }
body .public-site .visit-welcome h3 { color: #fff; font-family: Newsreader,Georgia,serif; font-size: 34px; font-weight: 500; line-height: 1.2; margin: 12px 0 24px; letter-spacing: -.025em; }
body .public-site .visit-detail { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid #385064; }
body .public-site .visit-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; color: #e5bd62; background: #19384f; border-radius: 6px; }
body .public-site .visit-icon svg { width: 21px; height: 21px; }
body .public-site .visit-detail strong { display: block; font-size: 15px; line-height: 1.7; font-weight: 500; }
body .public-site .visit-detail div>span { display: block; color: #b8cfdf; font-size: 13px; line-height: 1.7; margin-top: 4px; }
body .public-site .visit-welcome .btn { margin-top: 18px; gap: 28px; }
body .public-site .visit-resources { display: grid; gap: 18px; }
body .public-site .visit-resource { display: flex; gap: 18px; padding: 28px; background: #f7f5f0; border: 1px solid #e5e4df; border-radius: 10px; }
body .public-site .visit-resource .ministry-icon { width: 42px; height: 42px; background: #fff; border: 1px solid #e6e2d8; border-radius: 8px; }
body .public-site .visit-resource h3 { font-family: Newsreader,Georgia,serif; font-size: 28px; font-weight: 500; line-height: 1.25; margin: 0 0 12px; }
body .public-site .visit-resource p { color: #526471; font-size: 14px; line-height: 1.8; margin: 0 0 16px; }
body .public-site .visit-resource .text-link { color: #0c2032; font-size: 13px; }
body .public-site .visit-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0 0; margin-top: 24px; border-top: 1px solid #e0e5e7; }
body .public-site .visit-contact p { color: #526471; margin: 0; font-size: 14px; line-height: 1.8; }
body .public-site .visit-contact a { color: #0c2032; font-size: 13px; }
body .skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 14px 20px; border: 2px solid #c49848; border-radius: 6px; background: #fff; color: #0c2032; font-size: 15px; font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - 20px)); }
body .skip-link:focus { transform: translateY(0); outline: 3px solid #0c2032; outline-offset: 2px; }
body #main-content:focus { outline: none; }
@media(max-width:700px) {
  body .public-site .visit-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  body .public-site .visit-welcome { padding: 26px; }
  body .public-site .visit-resource { padding: 24px; gap: 14px; }
  body .public-site .visit-resource h3 { font-size: 26px; }
  body .public-site .visit-resource .ministry-icon { width: 34px; height: 34px; }
  body .public-site .visit-resource .ministry-icon svg { width: 20px; height: 20px; }
  body .public-site .visit-contact { align-items: flex-start; flex-direction: column; }
}
html[lang=my] body .public-site .visit-grid h3 { line-height: 1.65; }

body #main-content { scroll-margin-top: 140px; }

/* Keep language and menu controls on one row on narrow phones. */
@media(max-width:380px) {
  body .church-header .header-socials { display: none; }
  body .church-header-actions { flex-wrap: nowrap; }
}

/* Bring the header identity close to the left edge at smaller widths too. */
@media(max-width:1180px) { body .church-header-main { max-width: none; padding-left: 12px; } }

/* Dedicated staff sign-in, separate from the public homepage layout. */
.admin-login-page { min-height: 100vh; padding: 36px 24px; background: #f5f3ed; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.admin-back-link { width: 100%; max-width: 960px; margin-bottom: 24px; color: #405769; text-decoration: none; font-size: 14px; }
.admin-back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.admin-login-card { width: 100%; max-width: 960px; display: grid; grid-template-columns: 1fr 1.08fr; border: 1px solid #e2dfd5; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 60px #102b4010; }
.admin-login-brand { position: relative; overflow: hidden; padding: 44px; background: #0c2032; color: #edf4f8; border-top: 3px solid #c49a47; }
.admin-login-brand::after { content: ''; position: absolute; width: 230px; height: 350px; bottom: -100px; right: -85px; border: 1px solid #e2ad3a26; border-radius: 140px 140px 0 0; transform: rotate(-16deg); pointer-events: none; }
.admin-login-brand>img { filter: brightness(0) invert(1); display: block; margin-bottom: 22px; }
.admin-church-name { max-width: 300px; font-family: Newsreader,Georgia,serif; font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0; }
.admin-church-location { color: #b8cfdf; font-size: 12px; letter-spacing: .04em; margin-top: 10px; }
.admin-login-welcome { position: relative; z-index: 1; margin-top: 80px; }
body .admin-login-welcome .eyebrow { color: #ebc77e; font-size: 10px; }
body .admin-login-welcome h2 { color: #fff; font-family: Newsreader,Georgia,serif; font-weight: 500; font-size: 36px; line-height: 1.15; margin: 14px 0; }
.admin-login-welcome p { color: #b8cfdf; line-height: 1.8; font-size: 14px; max-width: 29ch; }
.admin-login-form-panel { padding: 52px 44px 40px; min-width: 0; align-self: center; }
.admin-login-form-panel>.eyebrow { color: #916b29; font-size: 10px; }
body .admin-login-form-panel h1 { margin: 12px 0 16px; font-family: Newsreader,Georgia,serif; font-size: 38px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: #0c2032; }
.admin-auth-intro { color: #526675; font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
.admin-login-page .field { display: grid; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #243c4e; }
.admin-login-page input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #cad5dd; border-radius: 7px; padding: 12px; font-size: 16px; background: #fff; color: #0c2032; }
.admin-password-control { position: relative; }
.admin-password-control input { padding-right: 80px; }
.admin-password-control button { position: absolute; right: 5px; top: 4px; min-height: 40px; border: 0; padding: 8px 12px; border-radius: 4px; background: #edf3f7; color: #405769; font-size: 12px; cursor: pointer; }
.admin-auth-help { color: #657987; font-size: 12px; line-height: 1.6; margin: 8px 0 20px; }
.admin-login-page #admin-login-submit { display: flex; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 12px; background: #0c2032; border-color: #0c2032; color: #fff; }
.admin-login-page #admin-login-submit:hover { background: #19384f; }
.admin-login-page #admin-login-submit:disabled { opacity: .65; cursor: wait; }
#admin-auth-error { font-size: 13px; color: #a1282a; line-height: 1.6; }
#admin-auth-error:empty,#admin-auth-status:empty { display: none; }
.admin-auth-status,#admin-auth-status { color: #526675; font-size: 13px; line-height: 1.6; }
.admin-auth-contact { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #e5e9eb; margin-top: 26px; padding-top: 22px; font-size: 13px; line-height: 1.6; color: #657987; }
.admin-auth-contact a { color: #0c2032; text-underline-offset: 4px; }
.admin-login-footer { text-align: center; color: #657987; font-size: 11px; line-height: 1.6; margin-top: 24px; }
.admin-login-page :is(a,button,input):focus-visible { outline: 3px solid #b48b3d; outline-offset: 3px; }
html[lang=my] .admin-login-page :is(h1,h2,.admin-church-name) { font-family: 'Myanmar Text',sans-serif; line-height: 1.65; }
@media(max-width:700px) {
 .admin-login-page { padding: 24px 16px; justify-content: flex-start; }
 .admin-login-card { grid-template-columns: 1fr; }
 .admin-login-brand { padding: 24px; display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 16px; align-items: center; }
 .admin-login-brand>img { width: 48px; height: 48px; margin: 0; grid-row: 1 / 3; }
 .admin-church-name { font-size: 22px; }
 .admin-church-location { margin: 6px 0 0; }
 .admin-login-welcome { display: none; }
 .admin-login-form-panel { padding: 30px 24px; }
 body .admin-login-form-panel h1 { font-size: 32px; }
}

/* Announcements stay behind a right-edge tab until requested. */
.announcement-edge-tab { position: fixed; z-index: 42; right: 0; top: 44%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px; border: 1px solid #b6934f; border-right: 0; border-radius: 8px 0 0 8px; background: #0c2032; color: #f3dfb0; box-shadow: 0 4px 18px #0c20322a; cursor: pointer; }
.announcement-edge-tab>span:last-child { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.announcement-edge-tab svg { display: block; width: 18px; height: 18px; }
.announcement-edge-tab:hover { background: #19384f; }
.announcement-edge-tab:focus-visible,.announcement-close:focus-visible { outline: 3px solid #d7af5c; outline-offset: -4px; }
.announcement-overlay { position: fixed; inset: 0; z-index: 90; }
.announcement-overlay[hidden] { display: none; }
.announcement-scrim { position: absolute; inset: 0; background: #06142166; touch-action: none; animation: announcement-shade-in .2s ease both; }
.announcement-drawer { position: absolute; top: 0; bottom: 0; right: 0; width: 420px; max-width: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; background: #fffdf9; border-left: 1px solid #e7e0d2; box-shadow: -12px 0 36px #06142130; animation: announcement-drawer-in .25s ease both; }
body .announcement-drawer .announcement-board { max-width: none; border: 0; border-top: 3px solid #c49a47; border-radius: 0; box-shadow: none; }
.announcement-close { display: grid; place-items: center; align-self: flex-start; flex: 0 0 36px; height: 44px; padding: 0; border: 0; border-radius: 5px; background: #ffffff12; color: #fffdf9; font-size: 26px; cursor: pointer; }
@keyframes announcement-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes announcement-shade-in { from { opacity: 0; } to { opacity: 1; } }
@media(max-width:620px) {
 .announcement-edge-tab { top: auto; bottom: 80px; right: 12px; flex-direction: row; min-height: 44px; padding: 10px 14px; border-right: 1px solid #b6934f; border-radius: 24px; }
 .announcement-edge-tab>span:last-child { writing-mode: horizontal-tb; letter-spacing: normal; }
}
@media(prefers-reduced-motion:reduce) { .announcement-drawer,.announcement-scrim { animation: none; } }
/* Staff workspace: scoped separately from visitor pages. */
/* One type step per role, so the workspace and its dialogs stay in scale. */
body :is(.dashboard,.modal) { --dash-eyebrow: 11px; --dash-meta: 13px; --dash-body: 15px; --dash-control: 14px; --dash-h3: 18px; --dash-h2: 22px; }
body .dashboard { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100vh; background: #f5f6f4; }
body .dashboard .sidebar { position: sticky; top: 0; width: auto; height: 100vh; box-sizing: border-box; padding: 30px 18px; background: #102a3a; color: #b9ccda; }
body .side-brand { display: flex; gap: 12px; align-items: center; margin: 0 4px 38px; text-decoration: none; color: white; }
body .side-brand strong { display: block; font: 600 19px Georgia,serif; }
body .side-brand img { filter: brightness(0) invert(1); flex-shrink: 0; }
body .side-brand small { display: block; margin-top: 6px; color: #a7bdcc; font-size: 11px; text-transform: none; }
body .dashboard .side-label { display: block; margin: 0 14px 12px; color: #d4b574; font-size: var(--dash-eyebrow); text-transform: uppercase; letter-spacing: .12em; }
body .dashboard .side-link { display: flex; align-items: center; gap: 12px; padding: 13px 12px; margin: 3px 0; color: #b9ccda; border: 1px solid transparent; border-radius: 6px; font-size: var(--dash-body); text-decoration: none; }
body .dashboard .side-link[aria-current=page] { color: #fff; background: #203f50; border-color: #2a475c; }
body .dashboard .side-link:hover { color: #fff; background: #203f50; }
body .dashboard .side-link span,body .dashboard .side-brand>span { display: block; }
body .dashboard .side-link { justify-content: flex-start; }
body .side-number { color: #d4b574; font-size: 10px; }
body .side-website { display: flex; justify-content: space-between; margin: 30px 10px 0; padding-top: 20px; border-top: 1px solid #ffffff20; color: #b9ccda; font-size: var(--dash-control); text-decoration: none; }
body .dashboard .dash-main { min-width: 0; margin: 0; padding: 36px clamp(20px,3vw,52px) 60px; }
body .dashboard .dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
body .dashboard h1 { font-size: clamp(28px,3vw,38px); line-height: 1.2; margin: 6px 0 8px; }
body .dashboard h2 { margin: 0; font: 600 var(--dash-h2)/1.35 'DM Sans',sans-serif; }
body .dashboard p { font-size: var(--dash-body); line-height: 1.65; }
body .dashboard .dash-head p { margin: 0; }
body .dash-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
body .dashboard .btn { min-height: 42px; font-size: var(--dash-control); }
body .dashboard .dash-head .btn { width: auto; padding: 10px 15px; }
body .dashboard .dash-head .btn::after { content: none; }
body :is(.dashboard,.modal) .btn-navy { background: #173447; border-color: #173447; color: #fff; }
body :is(.dashboard,.modal) .btn-navy:hover { background: #204259; border-color: #204259; color: #fff; }
body .dashboard :is(.staff-account,.staff-create) { position: relative; }
body .dashboard :is(.staff-account,.staff-create)>summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 42px; padding: 10px 15px; border: 1px solid #d5ddda; border-radius: 6px; list-style: none; cursor: pointer; font-size: var(--dash-control); font-weight: 600; background: #fff; }
body .dashboard details>summary::-webkit-details-marker { display: none; }
body .dashboard .staff-create>summary { background: #173447; color: #fff; border-color: #173447; }
body .dashboard :is(.staff-account,.staff-create)>div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 235px; padding: 12px; background: #fff; border: 1px solid #d5ddda; border-radius: 8px; box-shadow: 0 10px 24px #102b4020; }
body .dashboard :is(.staff-account,.staff-create) button { display: block; width: 100%; padding: 12px; background: #fff; color: #173447; border: 0; border-radius: 4px; text-align: left; font-size: var(--dash-control); cursor: pointer; }
body .dashboard :is(.staff-account,.staff-create) button:hover { background: #f1e9d8; }
body .dashboard .staff-account label { display: grid; gap: 8px; padding: 8px; font-size: var(--dash-control); }
body .dashboard select,body .staff-toolbar input { min-height: 42px; min-width: 0; width: 100%; padding: 9px 12px; font: inherit; font-size: var(--dash-control); font-weight: 400; border: 1px solid #b8b2a5; border-radius: 5px; }
body .dashboard .field { min-width: 0; }
body .dashboard .media-upload input[type=file] { width: 100%; min-width: 0; }
body .staff-storage { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin-bottom: 24px; background: #edf1f2; border: 1px solid #d8e0e2; border-radius: 6px; color: #40583f; font-size: var(--dash-control); line-height: 1.6; }
body .staff-storage .btn { flex-shrink: 0; }
body .staff-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 32px; }
body .staff-stats>a { display: flex; flex-direction: column; padding: 20px; color: #173447; text-decoration: none; border: 1px solid #dce2e0; border-radius: 8px; background: #fff; }
body .staff-stats>a>span { font-size: var(--dash-control); color: #5d6b70; }
body .staff-stats strong { margin: 12px 0; font-size: 30px; line-height: 1.1; font-weight: 600; }
body .staff-stats small { display: flex; justify-content: space-between; color: #806028; font-size: var(--dash-meta); }
body .dashboard .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
body .dashboard .card-head p { margin: 6px 0 0; max-width: 620px; }
body .dashboard .card-head>button { flex-shrink: 0; min-height: 42px; padding: 10px 16px; background: #fff; border: 1px solid #cfc6b7; border-radius: 5px; color: #173447; font-size: var(--dash-control); font-weight: 600; cursor: pointer; }
body .dashboard .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 30px; }
body .dashboard .quick { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 16px 18px; font-size: var(--dash-body); font-weight: 600; text-align: left; border-radius: 7px; }
body .dashboard .quick>span:nth-child(2) { flex: 1; color: #173447; }
body .dashboard .quick-number { color: #92723e; font-size: var(--dash-meta); }
body .dashboard .dash-card { padding: 24px; margin: 0 0 24px; background: #fff; border: 1px solid #dce2e0; border-radius: 10px; box-shadow: none; }
body .staff-toolbar { display: flex; gap: 12px; margin-bottom: 18px; padding: 16px; border-radius: 7px; background: #f2f4f3; }
body .staff-toolbar label { display: grid; gap: 7px; font-size: var(--dash-meta); font-weight: 600; flex: 1; min-width: 0; }
body .dashboard .content-table { width: 100%; font-size: var(--dash-body); }
body .dashboard .content-table :is(th,td) { padding: 14px 12px; vertical-align: middle; }
body .dashboard .content-table th { font-size: var(--dash-eyebrow); letter-spacing: .06em; }
body .dashboard .content-table td:first-child { min-width: 180px; }
body .dashboard .content-table tr[hidden],body .staff-empty-filter[hidden] { display: none; }
body .staff-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; background: #eef3f0; color: #5d6b70; font-size: var(--dash-meta); }
body .staff-badge.important { background: #f5ead0; color: #805b1c; }
body .staff-row-menu { min-width: 88px; max-width: 190px; }
body .staff-row-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; min-height: 42px; list-style: none; cursor: pointer; border: 1px solid #d5ddda; border-radius: 4px; font-size: var(--dash-control); }
body .staff-row-menu>div { padding: 4px; border: 1px solid #d5ddda; border-radius: 4px; margin-top: 4px; }
body .staff-row-menu button { display: block; width: 100%; padding: 10px 8px; background: #fff; border: 0; text-align: left; color: #173447; font-size: var(--dash-control); cursor: pointer; }
body .staff-row-menu button:hover { background: #f2f4f3; }
body .staff-row-menu .staff-delete { color: #a13a36; }
body .staff-empty,body .staff-empty-filter { padding: 22px; text-align: center; color: #6b746e; }
body .staff-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body .staff-link-grid article { padding: 22px; background: #f2f4f3; border: 1px solid #dfe5e2; border-radius: 6px; }
body .staff-section-label { font-size: var(--dash-eyebrow); color: #806028; text-transform: uppercase; letter-spacing: .08em; }
body .staff-link-grid h3 { font-size: var(--dash-h3); line-height: 1.4; overflow-wrap: anywhere; }
body .staff-link-grid .btn { display: block; margin-top: 20px; }
body .staff-text-link { display: inline-block; padding: 10px 0; font-size: var(--dash-control); font-weight: 600; }
body .staff-mobile-nav { display: none; }
body .dashboard :is(a,button,summary,select,input):focus-visible { outline: 2px solid #956f2e; outline-offset: 3px; }
body .modal .field { min-width: 0; display: grid; gap: 8px; font-size: var(--dash-control); font-weight: 600; }
body .modal .field>span { display: flex; justify-content: space-between; gap: 10px; }
body .modal .field small { color: #6b746e; font-size: var(--dash-meta); font-weight: 400; }
body .modal .field :is(input,textarea,select) { width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; }
body .modal .form-grid>.full { grid-column: 1/-1; }
body .modal .form-grid>[hidden] { display: none; }
body .staff-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid #dce2e0; }
@media(max-width:1050px) { body .dashboard { grid-template-columns: 195px minmax(0,1fr); } body .dashboard .sidebar { padding: 24px 12px; } body .staff-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 body .dashboard { display: block; }
 body .dashboard .sidebar { display: none; }
 body .dashboard .dash-main { padding: 24px 16px; }
 body .staff-mobile-nav { display: grid; gap: 8px; margin-bottom: 20px; font-size: 12px; font-weight: 600; }
 body .staff-storage { align-items: flex-start; flex-direction: column; }
 body .dashboard .dash-card { padding: 18px 14px; }
 body .dashboard .quick-grid,body .staff-link-grid { grid-template-columns: 1fr; }
 body .dashboard .card-head { align-items: flex-start; flex-wrap: wrap; }
 body .staff-toolbar { padding: 12px; flex-direction: column; }
 body .dashboard .table-wrap { overflow-x: auto; }
 body .staff-stats>a { padding: 16px; }
 body .dashboard .staff-create { width: 100%; }
 body .dashboard .staff-create>div { width: 100%; right: 0; left: auto; }
 body .dashboard .staff-account>div { right: 0; left: auto; }
}
body .staff-department-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body .staff-department-card { padding: 20px; border: 1px solid #dce2e0; border-radius: 8px; background: #fff; min-width: 0; }
body .staff-department-card[hidden],body .department-no-results[hidden] { display: none; }
body .department-card-heading { display: flex; gap: 12px; align-items: center; }
body .department-card-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 48px; background: #f1e9d8; color: #876730; border-radius: 7px; }
body .department-card-icon svg { width: 24px; height: 24px; }
body .department-card-heading h3 { margin: 5px 0 0; font: 600 var(--dash-h3)/1.4 'DM Sans',sans-serif; overflow-wrap: anywhere; }
body .department-leader { display: grid; gap: 5px; margin: 20px 0 12px; }
body .department-leader>span { font-size: var(--dash-meta); color: #6b746e; }
body .department-leader strong { font-size: var(--dash-body); font-weight: 500; }
body .department-meeting { overflow-wrap: anywhere; }
body .department-content-counts { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0; color: #5d6b70; font-size: var(--dash-meta); border-top: 1px solid #edf1f4; }
body .department-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
body .department-card-actions .btn { margin: 0; }
body .department-card-actions .staff-row-menu { flex: 1; max-width: 180px; }
body .department-card-actions .staff-row-menu a { display: block; padding: 10px 8px; font-size: var(--dash-control); text-decoration: none; }
body .department-editor-note { padding: 12px; border-radius: 6px; background: #f1e9d8; color: #5d6b70; font-size: var(--dash-control); line-height: 1.7; }
body .ministry-details { padding-top: 12px; border-top: 1px solid #dce2e0; }
body .ministry-details>div { margin: 12px 0; }
body .ministry-details dt { font-size: 11px; font-weight: 600; color: #87652f; }
body .ministry-details dd { margin: 4px 0 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
body .staff-stats { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
@media(max-width:1050px) { body .staff-department-grid { grid-template-columns: 1fr; } }
@media(max-width:760px) { body .staff-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } body .staff-department-card { padding: 16px; } body .department-card-actions { flex-wrap: wrap; } }
body .department-content-counts button { padding: 4px 0; border: 0; background: transparent; color: #5d6b70; font: inherit; cursor: pointer; text-align: left; }
body .department-content-counts button:hover { color: #173447; text-decoration: underline; text-underline-offset: 3px; }
/* Church administration navigation and focused workspace views. */
body .dashboard { grid-template-columns: 256px minmax(0,1fr); }
body .dashboard .sidebar { padding: 28px 18px 24px; overflow-y: auto; overscroll-behavior: contain; }
body .side-brand-row .side-brand { margin: 0 6px 30px; padding: 0; }
body .side-brand-row .side-brand small { color: #a9bdca; font-size: 10px; }
body #staff-menu-toggle { display: none; }
body .side-overview .side-link { padding: 13px 14px; margin-bottom: 18px; }
body .side-nav-group { margin: 8px 0; border: 0; background: transparent; }
body .side-nav-group>summary { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 11px 12px; color: #c5d4de; border-radius: 6px; font-size: var(--dash-body); font-weight: 600; cursor: pointer; list-style: none; }
body .side-nav-group>summary:hover { background: #ffffff0a; color: #fff; }
body .side-nav-group>summary::-webkit-details-marker { display: none; }
body .side-nav-icon { display: flex; color: #d8b971; }
body .side-nav-icon svg { width: 19px; height: 19px; }
body .side-nav-chevron { margin-left: auto; transition: transform .18s ease; }
body .side-nav-group[open]>summary .side-nav-chevron { transform: rotate(180deg); }
body .side-nav-group[open]>summary { color: #fff; }
body .side-nav-children { margin: 2px 0 14px 21px; padding-left: 12px; border-left: 1px solid #365064; }
body .side-nav-children .side-link { justify-content: space-between; min-height: 42px; padding: 10px 12px; font-size: var(--dash-control); line-height: 1.5; }
body .side-nav-children .side-link[aria-current=page] { background: #294b58; border-color: transparent; color: #fff; box-shadow: inset 3px 0 #d6ad59; }
body .side-nav-count { font-size: var(--dash-meta); padding: 2px 6px; background: #ffffff12; border-radius: 4px; color: #d6bc88; }
body .side-footer { margin: 28px 10px 0; border-top: 1px solid #ffffff1c; padding-top: 22px; }
body .side-footer .side-label { margin: 0 0 10px; }
body .side-footer .side-website { padding: 10px 0; margin: 0; border: 0; }
body .side-signout { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; margin-top: 5px; border: 0; background: transparent; color: #b9ccda; font: inherit; font-size: var(--dash-control); cursor: pointer; }
body .side-signout:hover { color: #fff; }
body .staff-breadcrumb { display: flex; align-items: center; gap: 9px; margin: 14px 0 10px; font-size: var(--dash-meta); color: #6b7d89; }
body .staff-breadcrumb a { text-decoration: none; color: #5d6b70; }
body .staff-breadcrumb>a:only-child { display: none; }
body .staff-breadcrumb:has(>a:only-child) { margin: 0; }
body .staff-overview[hidden],body .staff-department-view[hidden],body .staff-media-view[hidden],body .dashboard .staff-section[hidden] { display: none; }
body .staff-overview-panels,body .staff-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
body .staff-overview-panels .card-head>a { font-size: var(--dash-control); white-space: nowrap; color: #8b672e; }
body .staff-overview-list { list-style: none; padding: 0; margin: 0; }
body .staff-overview-list li+li { border-top: 1px solid #e5e9e7; }
body .staff-overview-list a { display: grid; gap: 7px; padding: 17px 0; color: #173447; text-decoration: none; }
body .staff-overview-list strong { font-size: var(--dash-body); line-height: 1.5; }
body .staff-overview-list span { font-size: var(--dash-meta); color: #6b746e; }
body .staff-settings-grid>div { padding: 22px; border-radius: 7px; background: #f2f4f3; }
body .staff-settings-grid h3 { margin-top: 0; font-size: var(--dash-h3); }
body .staff-settings-grid .field { display: grid; gap: 10px; font-size: var(--dash-control); font-weight: 600; }
@media(max-width:1050px) { body .dashboard { grid-template-columns: 232px minmax(0,1fr); } body .staff-overview-panels { grid-template-columns: 1fr; } }
@media(max-width:760px) {
 body .dashboard { display: block; }
 body .dashboard .sidebar { display: block; position: relative; height: auto; width: 100%; padding: 18px 16px; overflow: visible; }
 body .side-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
 body .side-brand-row .side-brand { margin: 0; gap: 10px; }
 body .side-brand-row .side-brand strong { font-size: 18px; }
 body #staff-menu-toggle { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 10px; border: 1px solid #486071; background: #203f50; color: #fff; border-radius: 5px; font-size: var(--dash-control); cursor: pointer; }
 body .sidebar:not(.is-open) #staff-sidebar-nav { display: none; }
 body .sidebar.is-open #staff-sidebar-nav { margin-top: 24px; }
 body .staff-settings-grid { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) { body .side-nav-chevron { transition: none; } }
/* Separate identity bar above the navigation and workspace columns. */
body .dashboard { grid-template-rows: 84px minmax(0,1fr); }
body .staff-topbar { grid-column: 1/-1; display: flex; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 30; height: 84px; padding-right: 30px; background: #ffffff; border-top: 3px solid #ba944b; border-bottom: 1px solid #dce2e0; box-shadow: 0 2px 8px #102b4006; }
body .staff-topbar-brand { display: flex; align-items: center; gap: 13px; align-self: stretch; flex: 0 0 256px; padding: 16px 24px; border-right: 1px solid #dce2e0; text-decoration: none; color: #173447; min-width: 0; }
body .staff-topbar-brand .church-logo-image { width: 36px; height: 44px; object-fit: contain; flex-shrink: 0; }
body .staff-topbar-brand .sda-symbol { filter: none; }
body .staff-topbar-brand strong { display: block; font: 600 21px/1.2 Georgia,serif; color: #173447; }
body .staff-topbar-brand small { display: block; margin-top: 6px; font-size: var(--dash-meta); color: #617583; line-height: 1.4; }
body .staff-topbar-context { flex: 1; color: #5d6b70; font-size: var(--dash-control); }
body .staff-topbar .dash-head-actions { margin-left: auto; flex-shrink: 0; }
body .staff-topbar .btn { padding: 10px 15px; }
/* The navy column fills the whole workspace row; its navigation is what sticks and scrolls. */
body .dashboard .sidebar { grid-column: 1; grid-row: 2; position: static; height: auto; padding-top: 0; padding-bottom: 0; overflow: visible; }
body .dashboard #staff-sidebar-nav { position: sticky; top: 84px; max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; padding: 28px 0 24px; scrollbar-width: thin; scrollbar-color: #3c5a68 transparent; }
body .dashboard #staff-sidebar-nav::-webkit-scrollbar { width: 8px; }
body .dashboard #staff-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
body .dashboard #staff-sidebar-nav::-webkit-scrollbar-button { display: none; }
body .dashboard #staff-sidebar-nav::-webkit-scrollbar-thumb { background: #3c5a68; border-radius: 4px; }
body .dashboard .dash-main { grid-column: 2; grid-row: 2; }
body .side-action { width: 100%; font-family: inherit; text-align: left; background: transparent; cursor: pointer; }
body .side-nav-children .side-action { white-space: normal; font-weight: 400; }
body .side-action:hover { color: #fff; }
body .staff-topbar-brand:focus-visible { outline: 2px solid #956f2e; outline-offset: -4px; }
@media(max-width:1050px) {
 body .staff-topbar-brand { flex-basis: 232px; padding-left: 18px; padding-right: 18px; }
 body .staff-topbar-context { display: none; }
 body .staff-topbar { padding-right: 20px; gap: 16px; }
}
@media(max-width:760px) {
 body .staff-topbar { height: auto; min-height: 80px; flex-wrap: wrap; gap: 14px 12px; padding: 16px; position: relative; }
 body .staff-topbar-brand { flex: 1; padding: 0; border: 0; }
 body .staff-topbar-brand strong { font-size: 20px; }
 body .staff-topbar .dash-head-actions { flex-basis: 100%; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #dfe5e2; }
 body #staff-menu-toggle { flex-shrink: 0; background: #173447; }
 body .dashboard .sidebar { display: none; height: auto; max-height: none; top: auto; padding: 22px 16px; }
 body .dashboard #staff-sidebar-nav { position: static; max-height: none; overflow: visible; padding: 0; }
 body .dashboard .sidebar.is-open { display: block; }
 body .sidebar.is-open #staff-sidebar-nav { margin-top: 0; }
 body .staff-topbar .staff-account>div { z-index: 40; }
}
/* Neutral workspace surfaces with navy navigation and selective gold accents. */
body .dashboard .staff-topbar-brand { background: #fff; border-right-color: #dce2e0; }
body .dashboard .staff-topbar-brand strong { color: #173447; }
body .dashboard .staff-topbar-brand small { color: #5d6b70; }
body .dashboard .staff-topbar-brand .sda-symbol { filter: none; }
body .dashboard :is(.dash-card,.staff-stats>a,.quick,.staff-department-card) { background: #ffffff; border-color: #dce2e0; }
body .dashboard .staff-topbar .btn { border-color: #d5ddda; background: #ffffff; color: #173447; }
body .dashboard .staff-stats>a { border-top: 1px solid #dce2e0; }
body .dashboard .staff-stats>a:hover,body .dashboard .quick:hover { border-color: #9aaea5; background: #f8faf8; }
body .dashboard .staff-stats small,body .dashboard .quick-number,body .dashboard .staff-section-label { color: #806028; }
body .dashboard .side-label { color: #d4bd88; }
body .dashboard .side-link[aria-current=page] { background: #2a4754; border-color: #47616b; color: #fffaf0; box-shadow: inset 3px 0 #d7b36b; }
body .dashboard .side-nav-count { background: #d7b36b20; color: #f0d89f; }
body .dashboard .staff-badge { background: #eef3f0; color: #40583f; }
body .dashboard .staff-badge.important { background: #f2e5c9; color: #765419; }
body .dashboard .staff-storage .btn { border-color: #173447; color: #fff; background: #173447; }
body .dashboard .staff-storage .btn:hover { background: #25495c; }
body .dashboard :is(.staff-create>summary,.btn-navy) { background: #173447; color: #fffaf0; }
@media(max-width:760px) {
 body .dashboard .staff-topbar-brand { background: transparent; border: 0; }
 body .dashboard .staff-topbar-brand strong { color: #173447; }
 body .dashboard .staff-topbar-brand small { color: #5d6b70; }
 body .dashboard .staff-topbar-brand .sda-symbol { filter: none; }
}

/* ---------------------------------------------------------------------------
   Reference layout. Appended last so it settles the cascade without editing the
   rules above. Colour is global; the single-row arrangement is desktop only,
   because header.css hides the navigation behind the Menu button below 1181px
   and that behaviour must be left intact.
--------------------------------------------------------------------------- */
body .church-header.church-header { background: #fff; border-bottom: 1px solid #e3e7ea; border-top: 3px solid var(--church-gold,#e2ad3a); }
body .church-header.church-header .brand strong { color: var(--church-navy); }
body .church-header.church-header .brand small { color: #6b7d89; }
body .church-header.church-header .sda-symbol { filter: none; }
body .church-header.church-header .church-nav-wrap { background: transparent; border: 0; }
body .church-header.church-header .church-nav > a,
body .church-header.church-header .church-nav summary { color: #33454f; font-weight: 600; border-radius: 6px; }
body .church-header.church-header .church-nav > a:hover,
body .church-header.church-header .church-nav summary:hover { background: #f1f4f6; color: var(--church-navy); }
body .church-header.church-header .church-nav > a[aria-current=page] { background: transparent; color: var(--church-navy); box-shadow: none; }
body .church-header.church-header .nav-group[open] > summary { background: #f1f4f6; color: var(--church-navy); }
body .church-header.church-header .nav-dropdown { background: #fff; border: 1px solid #e0e5e8; box-shadow: 0 14px 34px #10273d1f; }
body .church-header.church-header .nav-dropdown > a { color: #33454f; }
body .church-header.church-header .nav-dropdown > a:hover { background: #f1f4f6; color: var(--church-navy); }
body .church-header.church-header .church-language { background: #fff; border: 1px solid #d5dde2; color: var(--church-navy); }
body .church-header.church-header .church-menu { background: #fff; color: var(--church-navy); border: 1px solid #d5dde2; }
body .church-header.church-header .header-socials a { color: #33454f; border: 1px solid #dde3e7; border-radius: 7px; }
body .church-header.church-header .header-socials a:hover { background: #f1f4f6; color: var(--church-navy); }
body .header-live { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 7px; background: #d7342a; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
body .header-live:hover { background: #bd2c23; color: #fff; }
body .header-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; }
body .header-give { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
body .header-give::after { content: none; }

/* Single row: identity, navigation, controls. Only where the desktop nav shows. */
@media(min-width:1181px) {
 body .church-header.church-header { display: block; padding: 0; }
 body .church-header.church-header .church-header-main { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; min-height: 76px; max-width: none; width: 100%; padding-left: clamp(16px,3vw,40px); padding-right: clamp(16px,3vw,40px); }
 body .church-header.church-header .brand { flex: 0 1 auto; order: 1; min-width: 0; gap: 10px; padding: 0; align-items: center; }
 body .church-header.church-header .church-logo-image { width: 44px; height: 44px; flex-basis: 44px; }
 body .church-header.church-header .brand strong { font-size: 18px; line-height: 1.25; white-space: normal; }
 body .church-header.church-header .brand small { margin-top: 3px; font-size: 10px; letter-spacing: .06em; }
 body .church-header.church-header .church-nav-wrap { order: 2; flex: 1 1 320px; min-width: 0; display: flex; justify-content: flex-end; }
 /* Items wrap between themselves so the row can never overlap the identity. */
 body .church-header.church-header .church-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; padding: 0; margin: 0; max-width: none; }
 body .church-header.church-header .church-nav > a,
 body .church-header.church-header .church-nav > .nav-group,
 body .church-header.church-header .church-nav summary { white-space: nowrap; flex: 0 0 auto; }
 body .church-header.church-header .church-nav > a,
 body .church-header.church-header .church-nav summary { padding: 9px 11px; font-size: 14px; min-height: 40px; }
 body .church-header-actions.church-header-actions { order: 3; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; padding-bottom: 0; }
 body .church-header.church-header .church-language { padding: 8px 10px; font-size: 13px; }
 body .church-header.church-header .header-socials { gap: 6px; }
 body .church-header.church-header .header-socials a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
 body .church-header.church-header .header-give { padding: 9px 13px; font-size: 13px; }
 /* Burmese runs longer; give the row more room before it wraps. */
 html[lang=my] body .church-header.church-header .church-nav > a,
 html[lang=my] body .church-header.church-header .church-nav summary { font-size: 12.5px; padding: 9px 8px; }
}
@media(min-width:1181px) and (max-width:1420px) {
 body .church-header.church-header .header-socials { display: none; }
}

/* Hero meta: address and service time side by side, sharing one rule. */
body .hero-meta-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 30px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #d6e0e7; }
body .hero-meta-row .hero-location { margin-top: 0; padding-top: 0; border-top: 0; max-width: none; }
body .hero-service { display: flex; align-items: center; gap: 12px; color: #506779; text-decoration: none; }
body .hero-service strong { display: block; font-size: 13px; color: #0c2032; line-height: 1.6; }
body .hero-service small { display: block; font-size: 12px; line-height: 1.6; }
body .hero-service > span:last-child { margin-left: 6px; }
body .hero-service:hover { color: #805b13; }
body .hero-service .hero-location-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #edf3f7; color: #0c2032; flex-shrink: 0; }
body .hero-service .hero-location-icon svg { width: 21px; height: 21px; }
body .photo-hero .hero-welcome :is(.hero-service,.hero-service strong,.hero-service small) { color: #edf4f8; }
body .photo-hero .hero-welcome .hero-service strong { color: #fff; }
/* The verse is the hero's second column, settling bottom-right on wide screens. */
body .photo-hero .hero-grid > .hero-scripture { align-self: end; justify-self: end; max-width: 340px; margin: 0; padding: 2px 16px 2px 0; text-align: right; border-left: 0; border-right: 2px solid var(--church-gold,#e2ad3a); color: #edf4f8; font-size: 14px; line-height: 1.5; }
body .photo-hero .hero-grid > .hero-scripture cite { color: #f2cd76; text-align: right; font-size: 11px; }
@media(max-width:900px) {
 body .photo-hero .hero-grid > .hero-scripture { justify-self: start; text-align: left; padding: 2px 0 2px 16px; border-right: 0; border-left: 2px solid var(--church-gold,#e2ad3a); }
 body .photo-hero .hero-grid > .hero-scripture cite { text-align: left; }
}
/* The second half of the headline carries the gold accent. */
body .hero h1 .hero-accent { color: var(--church-gold,#e2ad3a); }
/* Values row: four icon cards, a hairline between each. */
body .church-values { padding: 46px 0 8px; background: var(--church-page); }
body .value-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; text-align: center; }
body .value-card { position: relative; padding: 0 18px; }
body .value-card + .value-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: #e1e6ea; }
body .value-card h3 { margin: 16px 0 6px; font: 600 18px/1.4 'DM Sans',sans-serif; color: var(--church-navy); }
body .value-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--church-muted); }
body .value-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; }
body .value-icon svg { width: 28px; height: 28px; }
@media(max-width:1050px) { body .value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 20px; } body .value-card + .value-card::before { content: none; } }
@media(max-width:560px) { body .value-grid { grid-template-columns: 1fr; } body .value-card { padding: 0; } }
/* Live banner: one dark card offering every way to watch. */
body .live-banner { padding: 40px 0 8px; background: var(--church-page); }
body .live-banner-inner { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 30px; align-items: center; padding: 34px; border-radius: 14px; background: var(--church-navy); color: #f3f7fa; }
body .live-banner-inner:not(:has(.live-banner-media)) { grid-template-columns: 1fr; }
body .live-flag { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f6d9a0; }
body .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2503f; box-shadow: 0 0 0 4px #e2503f33; }
body .live-banner h2 { margin: 14px 0 10px; font: 600 30px/1.2 Newsreader,Georgia,serif; color: #fff; }
body .live-banner p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #cfdbe4; }
body .live-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body .live-banner .btn { min-height: 46px; padding: 12px 20px; border-radius: 7px; font-size: 14px; }
body .live-banner .live-youtube { background: #c8362a; border-color: #c8362a; color: #fff; }
body .live-banner .live-facebook { background: #2b5798; border-color: #2b5798; color: #fff; }
body .live-banner .live-site { background: transparent; border-color: #7d93a4; color: #fff; }
body .live-banner .live-site:hover { background: #ffffff1a; }
body .live-banner-media { display: block; border-radius: 10px; overflow: hidden; }
body .live-banner-media img { width: 100%; height: 236px; object-fit: cover; display: block; }
@media(max-width:820px) { body .live-banner-inner { grid-template-columns: 1fr; padding: 26px; } body .live-banner-media img { height: 190px; } }
/* Upcoming events: four compact tiles led by the date. */
body .section-head > .btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
body .event-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
body .event-tile { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid #e0e5e8; border-radius: 10px; background: #fff; text-decoration: none; color: inherit; }
body .event-tile:hover { border-color: #b9c6ce; box-shadow: 0 8px 22px #10273d12; }
body .event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 42px; }
body .event-date small { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #7d8a93; }
body .event-date strong { font: 600 26px/1.1 'DM Sans',sans-serif; color: var(--church-navy); }
body .event-tile-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body .event-tile-body > strong { font: 600 15px/1.4 'DM Sans',sans-serif; color: var(--church-navy); }
body .event-tile-time { font-size: 13px; color: #5f6f7a; }
body .event-tile-place { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7d8a93; }
body .event-tile-place svg { width: 14px; height: 14px; flex-shrink: 0; }
@media(max-width:1000px) { body .event-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { body .event-strip { grid-template-columns: 1fr; } }
/* About: the church story leads, the worldwide family follows it. */
body .about-worldwide { margin-top: 30px; padding-top: 24px; border-top: 1px solid #dfe4e7; }
body .about-worldwide h3 { margin: 6px 0 10px; font: 600 20px/1.3 Newsreader,Georgia,serif; color: var(--church-navy); }
/* Closing motto band. */
body .church-motto { padding: 60px 0; background: linear-gradient(180deg,#1d3a52,var(--church-navy)); text-align: center; }
body .church-motto p { margin: 0 auto; max-width: 760px; font: 400 italic 22px/1.6 Newsreader,Georgia,serif; color: #eef4f8; }
body .church-motto p::after { content: ""; display: block; width: 66px; height: 3px; margin: 22px auto 0; background: var(--church-gold,#e2ad3a); border-radius: 2px; }
/* Footer language switcher. */
body .footer-languages { display: flex; flex-wrap: wrap; gap: 8px; }
body .footer-languages button { padding: 7px 12px; border: 1px solid #ffffff2e; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
body .footer-languages button:hover { background: #ffffff14; }
body .footer-languages button[aria-current=true] { border-color: var(--church-gold,#e2ad3a); color: var(--church-gold,#e2ad3a); }
/* The media strip scrolls; give it a slim scrollbar instead of the browser default. */
body .activity-media { scrollbar-width: thin; scrollbar-color: #c3d0d9 transparent; }
body .activity-media::-webkit-scrollbar { height: 8px; }
body .activity-media::-webkit-scrollbar-track { background: transparent; }
body .activity-media::-webkit-scrollbar-thumb { background: #c3d0d9; border-radius: 4px; }
body .activity-media::-webkit-scrollbar-button { display: none; }
body .activity-media:not(:has(figure + figure)) { overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   Hero: one full-height composition. The lede sits centred, the verse balances
   it on the right, and the visit details anchor a bar across the foot.
--------------------------------------------------------------------------- */
body .hero.photo-hero { position: relative; display: flex; align-items: stretch; overflow: hidden;
  min-height: calc(100vh - var(--header-h,88px)); min-height: calc(100svh - var(--header-h,88px)); }
body .hero.photo-hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  /* The right end carries the doxology over a photograph the church can change.
     At the old 0.22 alpha it measured 1.9:1 on the brighter slides. */
  background: linear-gradient(100deg,#0a1b2be0 0%,#0a1b2bba 34%,#0a1b2bb8 62%,#0a1b2bb3 100%); }
body .hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,#0a1b2b8f 0%,#0a1b2b12 24%,#0a1b2b1c 54%,#0a1b2bcc 100%); }
body .hero.photo-hero .hero-background-photo { z-index: -2; }
body .hero.photo-hero .hero-inner { position: relative; z-index: 1; display: grid; width: 100%;
  max-width: 1460px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(30px,5vh,64px) clamp(20px,4vw,68px) clamp(20px,3vh,38px);
  grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr auto;
  align-items: center; column-gap: clamp(28px,5vw,88px); row-gap: clamp(22px,3vh,40px); }
body .hero.photo-hero .hero-welcome { grid-column: 1; grid-row: 1; padding: 0; min-width: 0; align-self: center; }
body .hero.photo-hero .hero-welcome { max-width: 760px; }
body .hero.photo-hero .hero-welcome .hero-scripture { max-width: 44ch;
  margin: clamp(20px,2.6vh,30px) 0 0; padding: 2px 0 2px 16px; text-align: left;
  border-right: 0; border-left: 2px solid #e2ad3a8c;
  color: #dfe9f1; font-size: 15px; line-height: 1.55; }
body .hero.photo-hero .hero-welcome .hero-scripture cite { display: block; margin-top: 8px; text-align: left; color: #f2cd76; }
body .hero-footer { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px 34px; padding-top: clamp(16px,2.4vh,26px); border-top: 1px solid #ffffff33; }
body .hero-footer .hero-meta-row { flex: 1 1 auto; margin: 0; padding: 0; border-top: 0; gap: 14px clamp(24px,4vw,56px); }
body .photo-hero .hero-footer :is(.hero-location,.hero-service,.hero-location small,.hero-service small) { color: #dce7ef; }
body .photo-hero .hero-footer :is(.hero-location strong,.hero-service strong) { color: #fff; }
body .photo-hero .hero-footer :is(.hero-location,.hero-service):hover { color: var(--church-gold,#e2ad3a); }
body .photo-hero .hero-footer .hero-location-icon { background: #ffffff24; color: #fff; }
body .photo-hero .hero-footer .hero-location { border: 0; }
body .hero-footer .hero-slide-controls { margin: 0; flex: 0 0 auto; }
body .hero.photo-hero .hero-welcome h1 { font-size: clamp(34px,4vw,62px); line-height: 1.06; letter-spacing: -.02em; margin: 14px 0 20px; }
body .hero.photo-hero .hero-copy { max-width: 46ch; font-size: clamp(15px,1.15vw,17px); line-height: 1.7; }
body .hero.photo-hero .actions { margin-top: clamp(20px,3vh,30px); gap: 12px; }
@media(max-width:1100px) {
 body .hero.photo-hero { min-height: calc(100vh - var(--header-h,100px)); min-height: calc(100svh - var(--header-h,100px)); }
 body .hero.photo-hero .hero-inner { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: clamp(18px,3vh,30px); grid-template-columns: none; }
 body .hero.photo-hero .hero-welcome { order: 1; align-self: stretch; }
 /* The verse now lives in the welcome column at every width, so it only needs its measure here;
    order/align-self/justify-self applied when it was a separate child of .hero-inner. */
 body .hero.photo-hero .hero-welcome .hero-scripture { max-width: 58ch; }
 body .hero-footer { order: 3; margin-top: auto; }
}
@media(max-width:760px) {
 body .hero.photo-hero { min-height: calc(100vh - var(--header-h,150px)); min-height: calc(100svh - var(--header-h,150px)); }
 body .hero.photo-hero::before { background: linear-gradient(180deg,#0a1b2bd1 0%,#0a1b2bab 45%,#0a1b2be0 100%); }
 body .hero-scrim { background: linear-gradient(180deg,#0a1b2b7a 0%,#0a1b2b5c 40%,#0a1b2bcc 100%); }
 body .hero-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
 body .hero-footer .hero-meta-row { flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
 body .hero.photo-hero .hero-welcome .hero-scripture { max-width: 100%; font-size: 14px; }
 body .hero.photo-hero .hero-inner { padding-bottom: clamp(26px,5vh,44px); }
}
@media(max-height:560px) and (orientation:landscape) {
 body .hero.photo-hero { min-height: 0; }
 body .hero.photo-hero .hero-inner { padding-top: 22px; padding-bottom: 18px; }
}
@media(min-width:1800px) { body .hero.photo-hero .hero-inner { max-width: 1560px; } }
@media(min-height:1100px) {
 body .hero.photo-hero { min-height: min(calc(100vh - var(--header-h,88px)),940px); min-height: min(calc(100svh - var(--header-h,88px)),940px); }
}

/* Muted text still has to clear WCAG AA (4.5:1) on white and on the cream badge. */
body .event-date small { color: #5f6f7a; }
body .event-tile-place { color: #5f6f7a; }
body .church-header.church-header .brand small { color: #5f6f7a; }
body .staff-breadcrumb { color: #5f6f7a; }

/* The selected-week range wraps rather than letting its two dates collide. */
body .program-week-nav h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; overflow-wrap: anywhere; }
body .program-week-nav h3 > span { white-space: nowrap; }

/* A collapsed outline card must not render its body, and neither must a closed
   dashboard disclosure panel; an author display value re-exposes the content. */
body .outline-card:not([open]) .outline-body { display: none; }
body .staff-row-menu:not([open]) > div,
body .staff-create:not([open]) > div,
body .staff-account:not([open]) > div,
body .side-nav-group:not([open]) > .side-nav-children,
body .translation-editor:not([open]) > :not(summary) { display: none; }

/* Small phones: the control cluster wraps instead of forcing the page wider. */
@media(max-width:430px) {
 body .church-header-actions.church-header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
 body .church-header.church-header .church-language { padding: 7px 8px; font-size: 12px; }
 body .church-header.church-header .header-give { padding: 8px 11px; font-size: 12px; }
 body .header-live.header-live { padding: 7px 10px; font-size: 11px; }
 body .church-header.church-header .brand strong { font-size: 15px; }
}

/* Phone header: identity and Menu share the first row, controls take the second. */
@media(max-width:620px) {
 body .church-header.church-header .church-header-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px 12px; min-height: 0; }
 body .church-header-actions.church-header-actions { display: contents; }
 body .church-header.church-header .brand { order: 1; flex: 1 1 0%; min-width: 0; }
 body .church-header.church-header .brand strong { overflow-wrap: anywhere; }
 body .church-header.church-header .church-menu { order: 2; flex: 0 0 auto; }
 body .church-header.church-header .church-header-main::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
 body .church-header.church-header .church-language-control { order: 4; flex: 1 1 90px; min-width: 0; }
 body .church-header.church-header .church-language { width: 100%; }
 body .church-header.church-header .header-give { order: 5; flex: 0 0 auto; display: inline-flex; }
 body .header-live.header-live { order: 6; flex: 0 0 auto; display: inline-flex; }
 body .church-header.church-header .header-socials { order: 7; display: none; }
 body .church-header.church-header .church-menu-label { display: inline; }
 /* The collapsed navigation wrapper must not claim a row while the menu is shut. */
 body .church-header.church-header .church-nav-wrap { order: 9; flex: 0 0 100%; height: 0; margin: 0; padding: 0; border: 0; }
 body .church-header.church-header .church-nav-wrap:has(.church-nav.is-open) { height: auto; }
 /* Let the hero end clear of the floating tab and helper. */
 body .hero.photo-hero .hero-inner { padding-bottom: 140px; }
 body .announcement-edge-tab { bottom: 84px; }
}

/* Social icons only appear once the nav and controls have room. */
@media(max-width:1560px) { body .church-header.church-header .header-socials { display: none; } }
/* The tightest desktop bands: trim so the six items stay on the identity's line. */
@media(min-width:1181px) and (max-width:1320px) {
 body .church-header.church-header .church-nav > a,
 body .church-header.church-header .church-nav summary { padding: 9px 6px; font-size: 12.5px; }
 body .church-header.church-header .brand strong { font-size: 16px; }
 body .church-header.church-header .church-logo-image { width: 40px; height: 40px; flex-basis: 40px; }
 body .church-header.church-header .church-header-main { gap: 14px; }
}
@media(min-width:1181px) and (max-width:1225px) {
 body .church-header.church-header .church-nav > a,
 body .church-header.church-header .church-nav summary { padding: 9px 4px; font-size: 12px; }
 body .church-header.church-header .brand strong { font-size: 15px; }
 body .church-header.church-header .church-header-main { gap: 10px; }
 body .church-header.church-header .church-language { padding: 8px 6px; font-size: 12px; }
}

/* The helper carries the church mark instead of a telephone glyph. */
body .chat-launcher-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; }
body .chat-launcher-mark .church-logo-image { width: 26px; height: 26px; margin: 0; padding: 0; background: transparent; border-radius: 0; object-fit: contain; }
body .chat-launcher-mark .sda-symbol { filter: brightness(0) invert(1); }
body .chat-heading-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; }
body .chat-heading-mark .church-logo-image { width: 34px; height: 34px; margin: 0; padding: 0; background: transparent; border-radius: 0; object-fit: contain; }
body .chat-heading-mark .sda-symbol { filter: brightness(0) invert(1); }
body .chat-heading { gap: 12px; align-items: center; }

/* ---------------------------------------------------------------------------
   Values row: four equal columns that read as one band. Descriptions balance to
   the same depth so the dividers run true and the row has a common baseline.
--------------------------------------------------------------------------- */
body .church-values { padding: clamp(54px,7vh,86px) 0 clamp(46px,6vh,72px); background: var(--church-page); }
body .value-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; align-items: stretch; text-align: center; }
body .value-card { display: flex; flex-direction: column; align-items: center; padding: 4px clamp(18px,2.4vw,40px); }
body .value-icon { width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(180deg,#f4f8fb,#e7eef6); color: var(--church-navy);
  box-shadow: inset 0 0 0 1px #e2ad3a66; }
body .value-icon svg { width: 30px; height: 30px; stroke-width: 1.6; }
/* The cards render an h2; match both so the tuning cannot miss again. */
body .value-card :is(h2,h3) { margin: 20px 0 9px; font: 600 19px/1.35 'DM Sans',sans-serif; color: var(--church-navy); letter-spacing: -.005em; }
body .value-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--church-muted);
  max-width: 25ch; text-wrap: balance; }
/* Reserve two lines everywhere so a one-line entry does not shorten its column. */
body .value-card p { min-height: calc(2 * 1.65 * 14.5px); }
/* Dividers run the height of the band rather than floating beside the text. */
body .value-card + .value-card::before { top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg,#0c203200,#0c203220 18%,#0c203220 82%,#0c203200); }
/* The announcements tab is fixed to the right edge; keep the last column clear
   of it at the widths where the reading shell reaches that far. */
@media(min-width:621px) and (max-width:1620px) {
 body .church-values .shell { padding-right: clamp(52px,5vw,76px); }
}
@media(max-width:1050px) {
 body .value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 0; }
 body .value-card + .value-card::before { content: none; }
 body .value-card:nth-child(even)::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: #0c203218; }
}
@media(max-width:560px) {
 body .value-grid { grid-template-columns: 1fr; gap: 30px 0; }
 body .value-card { padding: 0; }
 body .value-card:nth-child(even)::before { content: none; }
 body .value-card p { min-height: 0; }
}
/* On phones the tab becomes a compact icon button stacked above the helper, so
   it stops covering the content it floats over. The label stays for assistive
   technology rather than being removed. */
@media(max-width:620px) {
 body .announcement-edge-tab { right: 16px; bottom: 86px; width: 48px; height: 48px; min-height: 48px; padding: 0;
   border: 1px solid #b6934f; border-radius: 50%; justify-content: center; align-items: center; gap: 0; }
 body .announcement-edge-tab > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
 body .announcement-edge-tab svg { width: 21px; height: 21px; }
 /* The hero already reserves room for both; other sections need none. */
 body .hero.photo-hero .hero-inner { padding-bottom: 150px; }
}
body .announcement-edge-tab { min-width: 44px; }

/* ---------------------------------------------------------------------------
   Small screens: the header was taking 18% of the viewport before any content
   showed. Tighten the identity so the two rows stay compact, and let the
   announcements tab be the compact circle on tablets too, not just phones.
--------------------------------------------------------------------------- */
@media(max-width:900px) {
 body .announcement-edge-tab { top: auto; right: 16px; bottom: 86px; width: 48px; height: 48px; min-height: 48px; min-width: 48px;
   padding: 0; flex-direction: row; border: 1px solid #b6934f; border-radius: 50%; justify-content: center; align-items: center; gap: 0; }
 body .announcement-edge-tab > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; writing-mode: horizontal-tb; }
 body .announcement-edge-tab svg { width: 21px; height: 21px; }
}
@media(max-width:620px) {
 body .church-header.church-header .church-header-main { padding: 8px 14px 10px; gap: 8px; }
 body .church-header.church-header .brand { gap: 9px; }
 body .church-header.church-header .church-logo-image { width: 34px; height: 34px; flex-basis: 34px; }
 body .church-header.church-header .brand strong { font-size: 14.5px; line-height: 1.24; }
 body .church-header.church-header .brand small { display: none; }
 body .church-header.church-header .church-menu { min-height: 40px; padding: 8px 12px; }
 body .church-header.church-header .church-language { min-height: 40px; padding: 7px 9px; }
 body .church-header.church-header .header-give,
 body .header-live.header-live { min-height: 40px; }
}
@media(max-width:380px) {
 body .church-header.church-header .brand strong { font-size: 13.5px; }
 body .church-header.church-header .church-logo-image { width: 30px; height: 30px; flex-basis: 30px; }
}
/* Tablets: the identity keeps a 60px mark and 22px name from the wide layout,
   which pushes the header past 160px before any content shows. */
@media(min-width:621px) and (max-width:900px) {
 body .church-header.church-header .church-header-main { min-height: 0; padding-top: 10px; padding-bottom: 10px; gap: 16px; }
 body .church-header.church-header .church-logo-image { width: 44px; height: 44px; flex-basis: 44px; }
 body .church-header.church-header .brand strong { font-size: 17px; line-height: 1.25; }
 body .church-header.church-header .brand small { font-size: 9.5px; margin-top: 2px; }
}
/* header.css visually hides every span inside the launcher - a rule written for
   the old text label. The mark that carries the church logo must opt out of it,
   or the button renders as an empty circle. */
body .chat-launcher .chat-launcher-mark { position: static; width: 26px; height: 26px; overflow: visible; clip-path: none; clip: auto; margin: 0; }

/* ---------------------------------------------------------------------------
   One floating control. The announcements drawer now opens from the Church Life
   menu, so its edge tab is gone and only the helper (carrying the church mark)
   floats over the page.
--------------------------------------------------------------------------- */
body .nav-dropdown > button { display: block; width: 100%; min-height: 44px; padding: 11px 14px; margin: 0;
  border: 0; border-radius: 6px; background: transparent; color: #33454f; font: inherit; font-size: 14px;
  font-weight: 600; text-align: left; cursor: pointer; }
body .nav-dropdown > button + a,body .nav-dropdown > a + button { margin-top: 2px; }
body .church-header.church-header .nav-dropdown > button:hover,
body .church-header.church-header .nav-dropdown > button:focus-visible { background: #f1f4f6; color: var(--church-navy); }

/* The language control was stretching to fill the phone row; size it to content
   so Giving and the live badge sit beside it rather than being crowded out. */
@media(max-width:620px) {
 body .church-header.church-header .church-language-control { flex: 0 1 auto; min-width: 0; }
 body .church-header.church-header .church-language { width: auto; min-width: 96px; max-width: 130px; padding: 7px 8px; }
 body .church-header.church-header .church-header-main { justify-content: flex-start; }
 body .church-header.church-header .header-give { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   Announcements tab: one control, two shapes. A slim vertical tab on the right
   edge where there is room beside the reading shell, and a round button beside
   the helper where there is not. The menu entry stays either way.
--------------------------------------------------------------------------- */
body .announcement-edge-tab { position: fixed; z-index: 42; right: 0; top: 44%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; min-width: 44px; padding: 16px 12px;
  border: 1px solid #b6934f; border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--church-navy); color: #f3dfb0; cursor: pointer; }
body .announcement-edge-tab:hover { background: #19384f; }
body .announcement-edge-icon { display: flex; }
body .announcement-edge-tab svg { display: block; width: 18px; height: 18px; }
body .announcement-edge-label { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
/* Below the width where the shell reaches the edge, the tab would sit on top of
   the content, so it becomes a round button stacked above the helper instead. */
@media(max-width:1100px) {
 body .announcement-edge-tab { top: auto; right: 16px; bottom: 86px; width: 48px; height: 48px; min-height: 48px;
   flex-direction: row; padding: 0; border: 1px solid #b6934f; border-radius: 50%; gap: 0; }
 body .announcement-edge-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; writing-mode: horizontal-tb; }
 body .announcement-edge-tab svg { width: 21px; height: 21px; }
}
/* Where the tab is a round button in the corner, the hero ends clear of it and
   the helper rather than letting them sit on the visit details. */
@media(max-width:1100px) { body .hero.photo-hero .hero-inner { padding-bottom: 118px; } }
@media(max-width:620px) { body .hero.photo-hero .hero-inner { padding-bottom: 150px; } }
/* Between 761 and 1100 the detail bar is still a row with the slideshow controls
   at its right end, exactly where the corner buttons sit. Stop the row short of
   them rather than padding the whole hero. */
@media(min-width:761px) and (max-width:1499px) { body .hero-footer { padding-right: 78px; } }
@media(min-width:761px) and (max-width:1100px) { body .hero.photo-hero .hero-inner { padding-bottom: clamp(20px,3vh,38px); } }

/* ---------------------------------------------------------------------------
   Mission band: a titled section of white cards, each led by a church photo in
   a soft halo with the value's icon badged onto it. Replaces the plain icon row.
   The halo tints are the only colour here; they sit behind a photograph rather
   than standing alone, which is why four of them read as a wash and not as four
   unrelated blocks.
--------------------------------------------------------------------------- */
body .church-values { background: var(--church-cream,#f7f5f0); }
body .values-head { max-width: 780px; margin: 0 auto clamp(30px,4.5vh,52px); text-align: center; }
body .values-eyebrow { display: flex; align-items: center; justify-content: center; gap: clamp(14px,2vw,24px);
  margin: 0 0 clamp(12px,1.6vh,18px);
  font: 700 12px/1 'DM Sans',sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--church-accent); }
body .values-eyebrow::before,body .values-eyebrow::after { content: ""; flex: 0 0 auto; width: clamp(36px,6vw,92px); height: 1px; }
body .values-eyebrow::before { background: linear-gradient(90deg,#e2ad3a00,#c9962c); }
body .values-eyebrow::after { background: linear-gradient(90deg,#c9962c,#e2ad3a00); }
body .values-head h2 { margin: 0 0 clamp(10px,1.4vh,16px);
  font: 500 clamp(28px,3.5vw,46px)/1.14 Newsreader,Georgia,serif; letter-spacing: -.015em; color: var(--church-navy); }
body .values-tagline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px clamp(10px,1.4vw,16px);
  margin: 0; font-size: clamp(15px,1.25vw,18px); color: var(--church-muted); }
body .values-tagline span+span::before { content: "·"; margin-right: clamp(10px,1.4vw,16px); color: #a9b6c1; }

body .value-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(14px,1.5vw,24px); align-items: stretch; }
body .value-card { justify-content: flex-start; padding: clamp(24px,2.6vw,34px) clamp(16px,1.8vw,26px) clamp(26px,2.8vw,34px);
  background: #fff; border-radius: 18px; box-shadow: 0 1px 2px #0c20320d, 0 14px 34px -20px #0c203238; }
/* The cards are separate panels now, so the old between-column rules would only add noise. */
body .value-card+.value-card::before,body .value-card:nth-child(even)::before { content: none; }

body .value-figure { position: relative; display: grid; place-items: center;
  width: clamp(142px,12.5vw,182px); aspect-ratio: 1; margin-bottom: clamp(16px,2vw,24px); }
body .value-figure::before { content: ""; position: absolute; inset: 0; border-radius: 50%; }
body .value-figure.users::before { background: radial-gradient(circle,#cfe0f5 58%,#cfe0f500 73%); }
body .value-figure.book::before { background: radial-gradient(circle,#d5e6d6 58%,#d5e6d600 73%); }
body .value-figure.sprout::before { background: radial-gradient(circle,#d5e6d6 58%,#d5e6d600 73%); }
body .value-figure.heart::before { background: radial-gradient(circle,#f6ded6 58%,#f6ded600 73%); }
body .value-figure.globe::before { background: radial-gradient(circle,#dfd9f0 58%,#dfd9f000 73%); }
body .value-photo { position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 18px -10px #0c203259; }
body .value-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .value-badge { position: absolute; right: 3%; bottom: 7%; display: grid; place-items: center;
  width: clamp(44px,3.9vw,56px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--church-navy); box-shadow: inset 0 0 0 1px #e2ad3a66, 0 4px 14px -8px #0c203266; }
body .value-badge svg { width: 46%; height: 46%; stroke-width: 1.7; }
/* No photo published for this value yet: the icon carries the card on its own. */
body .value-figure.is-plain .value-icon { width: 62%; height: 62%; }
body .value-figure.is-plain .value-icon svg { width: 44%; height: 44%; }

body .value-card h3 { margin: 0 0 clamp(12px,1.5vh,16px);
  font: 500 clamp(19px,1.5vw,23px)/1.3 Newsreader,Georgia,serif; letter-spacing: -.01em; color: var(--church-navy); }
/* A short gold rule under each heading, the same accent as the section eyebrow. */
body .value-card h3::after { content: ""; display: block; width: 34px; height: 2px; margin: clamp(12px,1.5vh,16px) auto 0;
  border-radius: 2px; background: #c9962c; }
body .value-card p { margin: 0; max-width: 27ch; }

@media(max-width:1050px) {
 body .value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(14px,2vw,22px); }
}
@media(max-width:560px) {
 body .value-grid { grid-template-columns: 1fr; gap: 14px; }
 body .value-card { padding: 26px 20px 28px; }
 body .value-figure { width: clamp(132px,42vw,168px); }
 body .value-card p { min-height: 0; }
}

/* ---------------------------------------------------------------------------
   Mobile menu panel.

   Two faults this fixes. The desktop header is a light bar, and its link colour
   (#33454f) was written without a breakpoint, so it also landed on the dark
   drop-down panel: dark slate on navy, about 1.4:1, which reads as ghosted text
   through a see-through panel. And the panel sized itself with
   `calc(100% - 48px)` against .church-nav-wrap, which was only stretched to the
   header's full width below 621px — between 621px and 1180px the wrap is
   content-width, so the panel collapsed to a 22px sliver.
--------------------------------------------------------------------------- */
@media(max-width:1180px) {
  /* Take the wrap out of the header row and hang it off the header itself. As a
     flex item it either could not reach its own line (nowrap) or added a gap row
     that grew the header by 16px; out of flow it costs nothing and spans the full
     header width, which is what the panel measures itself against. */
  body .church-header.church-header .church-nav-wrap { position: absolute; top: 100%; left: 0; right: 0;
    height: 0; margin: 0; padding: 0; border: 0; }
  body .church-header.church-header .church-nav-wrap:has(.church-nav.is-open) { height: auto; }
  body .church-header.church-header .church-nav.is-open { left: auto; right: clamp(16px,3vw,24px);
    width: min(360px,calc(100% - 32px)); background: #12243a;
    border: 1px solid #35526d; border-radius: 12px; box-shadow: 0 18px 44px #04101d5c; }

  /* Light text on the dark panel, whatever the light desktop bar asks for. */
  body .church-header.church-header .church-nav.is-open > a,
  body .church-header.church-header .church-nav.is-open summary { color: #e9f0f6; }
  body .church-header.church-header .church-nav.is-open > a:hover,
  body .church-header.church-header .church-nav.is-open summary:hover { background: #1d3651; color: #fff; }
  /* A full-width underline makes no sense down a vertical list; mark the edge. */
  body .church-header.church-header .church-nav.is-open > a[aria-current=page],
  body .church-header.church-header .church-nav.is-open .nav-group[data-active=true] > summary {
    background: #1d3651; color: #f2cd76; box-shadow: inset 3px 0 var(--church-gold,#e2ad3a); }

  /* Submenus open inline inside the panel, so they need the same treatment. */
  body .church-header.church-header .church-nav.is-open .nav-dropdown { background: #16293f; border: 1px solid #2b4560; border-radius: 8px; }
  body .church-header.church-header .church-nav.is-open .nav-dropdown > a { color: #cfdde8; }
  body .church-header.church-header .church-nav.is-open .nav-dropdown > a:hover { background: #22394f; color: #fff; }
  body .church-header.church-header .church-nav.is-open .nav-dropdown > a[aria-current=page] {
    background: #22394f; color: #f2cd76; box-shadow: inset 3px 0 var(--church-gold,#e2ad3a); }
}

/* ---------------------------------------------------------------------------
   Gathering cards and the page behind each one.

   The card used to embed the full activity gallery: a scrolling strip with its
   own scrollbar, arrows and caption inside every card, showing the photo letter-
   boxed against the navy card with bars down both sides. It now carries a single
   cover photo that fills its frame, and the whole card is the link.
--------------------------------------------------------------------------- */
body .worship-session { display: flex; flex-direction: column; text-decoration: none; }
body .worship-session:hover { transform: translateY(-2px); }
body .worship-session { transition: transform .18s ease, box-shadow .18s ease; }
body .worship-session:hover { box-shadow: 0 18px 36px -22px #0c203266; }
@media(prefers-reduced-motion:reduce) { body .worship-session { transition: none; } body .worship-session:hover { transform: none; } }
body .worship-session-photo { display: block; overflow: hidden; border-radius: 12px;
  margin: clamp(14px,1.8vw,20px) 0 clamp(16px,2vw,22px); background: #e7eef6; aspect-ratio: 3/2; }
body .worship-session-photo:empty { display: none; }
body .worship-session-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .worship-session-more { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: clamp(14px,1.8vw,18px); border-top: 1px solid #0c203218;
  font-weight: 600; color: var(--church-navy); }
body .worship-session:hover .worship-session-more { color: var(--church-accent); }

body .gathering-page .community-hero .shell { max-width: 780px; }
body .gathering-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(14px,2vh,22px);
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--church-muted); }
body .gathering-back:hover { color: var(--church-navy); text-decoration: underline; }
body .gathering-time { margin: 6px 0 4px; font: 600 clamp(20px,2.2vw,26px)/1.3 'DM Sans',sans-serif; color: var(--church-accent); }
body .gathering-steps { display: grid; gap: 10px; max-width: 640px; margin: clamp(18px,2.4vh,28px) 0 0; padding-left: 0; list-style: none; counter-reset: step; }
body .gathering-steps li { position: relative; counter-increment: step; padding: 12px 16px 12px 52px;
  background: #fff; border: 1px solid #0c203214; border-radius: 10px; color: var(--church-navy); }
body .gathering-steps li::before { content: counter(step,decimal-leading-zero); position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font: 700 12px/1 'DM Sans',sans-serif; letter-spacing: .1em; color: var(--church-accent); }
/* On a gathering's own page the gallery is the point, so show the photos side by
   side instead of one full-width figure with a scrollbar under it. */
body .gathering-page .activity-media { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: clamp(12px,1.4vw,18px); overflow: visible; }
body .gathering-page .activity-media figure { flex: initial; }
@media(max-width:560px) { body .gathering-page .activity-media { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Gathering page. It led with a bare cream band; it now opens on the gathering's
   own photograph, states day/time/place once beneath it, and runs the order of
   service in columns rather than a single narrow stack beside empty space.
--------------------------------------------------------------------------- */
body .gathering-hero { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(34px,6vh,64px) 0 clamp(30px,5vh,54px); background: var(--church-cream,#f7f5f0); }
body .gathering-hero.has-photo { background: var(--church-navy); }
body .gathering-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
body .gathering-hero-scrim { position: absolute; inset: 0; z-index: -1;
  /* Deep enough that a bright outdoor photo still clears WCAG AA behind the title;
     staff can swap these photos, so the scrim cannot depend on the current one. */
  background: linear-gradient(100deg,#06121ff7 0%,#06121fe8 58%,#06121fab 100%); }
body .gathering-hero-inner { max-width: 900px; }
body .gathering-hero.has-photo :is(h1,.gathering-back,.gathering-time) { color: #fff; }
body .gathering-hero.has-photo .eyebrow { color: #ffdc94; }
body .gathering-hero.has-photo .gathering-back { color: #cddced; }
body .gathering-hero.has-photo .gathering-back:hover { color: #fff; }
body .gathering-hero h1 { margin: 10px 0 4px; font: 500 clamp(32px,4.4vw,58px)/1.08 Newsreader,Georgia,serif; letter-spacing: -.02em; }
body .gathering-hero .gathering-time { margin: 0 0 clamp(20px,3vh,28px); font: 600 clamp(19px,2vw,24px)/1.3 'DM Sans',sans-serif; color: var(--church-accent); }
body .gathering-hero.has-photo .gathering-time { color: #ffdc94; }
body .gathering-hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
body .gathering-hero.has-photo .actions .btn:not(.btn-gold) { background: #ffffff1f; border-color: #ffffff59; color: #fff; }
body .gathering-hero.has-photo .actions .btn:not(.btn-gold):hover { background: #ffffff30; }

body .gathering-facts { background: var(--church-page); border-bottom: 1px solid #0c203214; }
body .gathering-facts .shell { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px,2.4vw,40px);
  padding-block: clamp(18px,2.6vh,26px); }
body .gathering-fact { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
body a.gathering-fact:hover strong { color: var(--church-accent); text-decoration: underline; }
body .gathering-fact-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px;
  border-radius: 50%; background: #eaf0f6; color: var(--church-navy); box-shadow: inset 0 0 0 1px #e2ad3a4d; }
body .gathering-fact-icon svg { width: 19px; height: 19px; }
body .gathering-fact strong { display: block; font-size: 15px; color: var(--church-navy); }
body .gathering-fact small { display: block; font-size: 13px; color: var(--church-muted); }
body .gathering-note { margin: 0; margin-left: auto; font-size: 13px; color: var(--church-muted); }

body .gathering-steps { grid-template-columns: repeat(auto-fit,minmax(258px,1fr)); max-width: 100%; gap: 12px; }
@media(max-width:620px) { body .gathering-facts .shell { gap: 14px; } body .gathering-note { margin-left: 0; } }

/* ---------------------------------------------------------------------------
   Wide screens: use the width instead of stacking everything into the left
   third. The foot of the hero was two items bunched at the left and the
   slideshow controls 800px away at the right; it now distributes across the
   band. The reading column itself is governed by the copy and verse measures,
   so it is those that widen, not the column.
--------------------------------------------------------------------------- */
@media(min-width:1101px) {
  body .hero.photo-hero .hero-footer { display: grid; grid-template-columns: 1fr 1fr auto;
    align-items: center; column-gap: clamp(24px,3.5vw,64px); }
  /* The two meta links become grid items of the footer itself so all three
     children distribute together. */
  body .hero.photo-hero .hero-footer .hero-meta-row { display: contents; }
  body .hero.photo-hero .hero-footer .hero-slide-controls { justify-self: end; }
  body .hero.photo-hero .hero-welcome { max-width: 900px; }
  body .hero.photo-hero .hero-copy { max-width: 52ch; }
  body .hero.photo-hero .hero-welcome .hero-scripture { max-width: 50ch; }
}
@media(min-width:1600px) {
  body .hero.photo-hero .hero-copy { font-size: clamp(17px,1.15vw,19px); }
  body .hero.photo-hero .hero-welcome .hero-scripture { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   Hero to the supplied reference: a rule leading the eyebrow, a play mark on
   Watch Live and an arrow on Plan Your Visit, the two footer facts divided by a
   hairline rather than sitting under one, and the doxology set against the
   photograph where the verse used to be.
--------------------------------------------------------------------------- */
body .hero.photo-hero .hero-welcome .eyebrow { display: flex; align-items: center; gap: 16px; }
body .hero.photo-hero .hero-welcome .eyebrow::before { content: ""; flex: 0 0 auto; width: 46px; height: 2px;
  background: var(--church-gold,#e2ad3a); }

body .hero.photo-hero .actions .btn { display: inline-flex; align-items: center; gap: 10px; }
body .hero.photo-hero .btn-play { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #0c2032; color: #f0c860; }
body .hero.photo-hero .btn-play svg { width: 13px; height: 13px; }
body .hero.photo-hero .btn-arrow { font-size: 17px; line-height: 1; }

/* The reference has no rule across the foot of the hero. */
body .hero.photo-hero .hero-footer { border-top: 0; }
body .photo-hero .hero-footer .hero-service { position: relative; }
@media(min-width:761px) {
  body .photo-hero .hero-footer .hero-service::before { content: ""; position: absolute; left: calc(-1 * clamp(18px,2.4vw,34px));
    top: 50%; transform: translateY(-50%); width: 1px; height: 42px; background: #ffffff3d; }
}

/* Doxology, set quietly into the photograph on the right. */
body .hero.photo-hero .hero-glory { margin: 0; align-self: end; justify-self: end; text-align: right;
  font: 400 clamp(17px,1.75vw,26px)/1.5 Newsreader,Georgia,serif; letter-spacing: .22em; text-transform: uppercase;
  color: #ffffffd6; }
body .hero.photo-hero .hero-glory::after { content: ""; display: block; width: 62px; height: 2px;
  margin: 16px 0 0 auto; background: var(--church-gold,#e2ad3a); }
@media(min-width:1101px) {
  body .hero.photo-hero .hero-inner { grid-template-columns: minmax(0,1fr) auto; }
  body .hero.photo-hero .hero-welcome { grid-column: 1; grid-row: 1; }
  body .hero.photo-hero .hero-glory { grid-column: 2; grid-row: 1; align-self: center; max-width: 8ch; }
}
@media(max-width:1100px) {
  /* The stacked hero orders its children explicitly; without this the doxology
     defaults to order 0 and leads the hero instead of following the buttons. */
  body .hero.photo-hero .hero-glory { order: 2; align-self: start; justify-self: start; text-align: left; max-width: none;
    letter-spacing: .18em; margin-top: clamp(18px,2.4vh,26px); }
  body .hero.photo-hero .hero-glory::after { margin-left: 0; }
}
/* The reference groups the address and service time together at the left with a
   hairline between them, rather than distributing them across the band. The
   slideshow controls keep the far right - that area is empty in the reference,
   and auto-advancing content needs a pause control (WCAG 2.2.2). */
@media(min-width:1101px) {
  body .hero.photo-hero .hero-footer { grid-template-columns: auto auto 1fr; column-gap: clamp(28px,3vw,54px); }
  body .hero.photo-hero .hero-footer .hero-slide-controls { grid-column: 3; justify-self: end; }
  body .photo-hero .hero-footer .hero-service::before { left: calc(-1 * clamp(14px,1.5vw,27px)); }
  /* "TO GOD / BE THE / GLORY" - three lines, as set in the reference. */
  body .hero.photo-hero .hero-glory { max-width: 11ch; }
}
/* Quieter than the buttons above them; they are a control, not a feature. */
body .hero.photo-hero .hero-slide-controls { opacity: .72; }
body .hero.photo-hero .hero-slide-controls:hover,
body .hero.photo-hero .hero-slide-controls:focus-within { opacity: 1; }

/* ---------------------------------------------------------------------------
   Header to the reference: gold mark, the church name over two lines, a hairline
   before the Giving button, and quiet disclosure chevrons that brighten when the
   item is hovered, focused or open. They stay visible: a hidden chevron still takes
   its width, which left uneven gaps around the dropdown items.
--------------------------------------------------------------------------- */
body .church-header.church-header .sda-symbol {
  filter: brightness(0) saturate(100%) invert(76%) sepia(41%) saturate(742%) hue-rotate(348deg) brightness(92%) contrast(88%); }
body .church-header .brand strong { display: block; max-width: 17ch; }
body .church-header .nav-group > summary > span[aria-hidden] { opacity: .45; transition: opacity .15s ease; }
body .church-header .nav-group > summary:hover > span[aria-hidden],
body .church-header .nav-group > summary:focus-visible > span[aria-hidden],
body .church-header .nav-group[open] > summary > span[aria-hidden] { opacity: .9; }
@media(prefers-reduced-motion:reduce) { body .church-header .nav-group > summary > span[aria-hidden] { transition: none; } }
@media(min-width:1181px) {
  /* The margin matches the hairline's offset, so the line sits midway between the
     language control and Giving instead of against the control's border. */
  body .church-header .header-give { position: relative; margin-left: clamp(10px,1vw,18px); }
  body .church-header .header-give::before { content: ""; position: absolute; left: calc(-1 * clamp(10px,1vw,18px));
    top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background: #0c203226; }
}
/* The reference runs language | Giving | LIVE with no social icons in the header;
   Facebook and YouTube both remain in the footer's Connect column. */
@media(min-width:1181px) { body .church-header .header-socials { display: none; } }
body .church-header .church-logo-image { width: 62px; height: 62px; flex-basis: 62px; }
@media(min-width:1181px) { body .church-header .church-logo-image { width: 72px; height: 72px; flex-basis: 72px; } }
@media(min-width:1181px) {
  body .church-header .header-give::before { background: #0c20323d; height: 34px; }
}

/* ===========================================================================
   Homepage refinement pass. Everything below refines what is already here -
   the white header, the congregation photograph, the existing sections - it
   does not replace them.
   =========================================================================== */

/* --- Hero: shorter, and the overlay pulled back so the congregation reads --- */
/* The hero fills what is left of the screen under the header. It was cut to 87%
   earlier; that left a band of the next section showing on load, which read as the
   page not filling. The cap only bites on unusually tall windows.
   Note this reverses the earlier 10-15% reduction; the two requests conflict. */
@media(min-width:761px) {
  body .hero.photo-hero { min-height: min(calc(100vh - var(--header-h,88px)),1200px);
    min-height: min(calc(100svh - var(--header-h,88px)),1200px); }
}
/* Weighted to the left, behind the text, and light enough over the centre and
   right that faces and the church interior stay visible. */
body .hero.photo-hero::before {
  background: linear-gradient(100deg,#0a1b2bdb 0%,#0a1b2bab 30%,#0a1b2b6b 58%,#0a1b2b4d 100%); }
body .hero-scrim {
  background: linear-gradient(180deg,#0a1b2b7d 0%,#0a1b2b0f 26%,#0a1b2b3d 56%,#0a1b2bd9 100%); }
body .hero.photo-hero .hero-welcome h1 { margin-bottom: clamp(12px,1.6vh,18px); }
body .hero.photo-hero .hero-copy { margin-bottom: clamp(20px,2.8vh,30px); }

/* --- Hero buttons: one height, one radius, one weight ---------------------- */
body .hero.photo-hero .actions .btn { min-height: 52px; padding: 0 26px; border-radius: 10px;
  font-size: 15px; font-weight: 700; }
body .hero.photo-hero .actions .btn-gold { background: var(--church-gold,#e2ad3a); color: #0c2032; border: 1px solid #d0a034; }
body .hero.photo-hero .actions .btn-gold:hover { background: #efbe4c; }
body .hero.photo-hero .actions .btn:not(.btn-gold) { background: #fbfcfd; color: #0c2032; border: 1px solid #ffffff8a; }
body .hero.photo-hero .actions .btn:not(.btn-gold):hover { background: #fff; border-color: #fff; }
body .hero.photo-hero .btn-play { background: #0c2032; color: #f0c860; }

/* --- Hero quote: understated, low right, never over the headline ----------- */
body .hero.photo-hero .hero-quote { margin: 0; max-width: 20ch; }
body .hero.photo-hero .hero-quote blockquote { margin: 0; padding: 0;
  font: italic 400 clamp(16px,1.45vw,21px)/1.55 Newsreader,Georgia,serif; color: #ffffffed; }
body .hero.photo-hero .hero-quote blockquote span { display: block; }
body .hero.photo-hero .hero-quote blockquote::before { content: ""; display: block; width: 40px; height: 2px;
  margin: 0 0 14px; background: var(--church-gold,#e2ad3a); }
@media(min-width:1101px) {
  body .hero.photo-hero .hero-inner { grid-template-columns: minmax(0,1fr) auto; }
  body .hero.photo-hero .hero-welcome { grid-column: 1; grid-row: 1; }
  body .hero.photo-hero .hero-quote { grid-column: 2; grid-row: 1; align-self: end; justify-self: end;
    text-align: left; margin-bottom: clamp(8px,2vh,26px); }
}
@media(max-width:1100px) {
  body .hero.photo-hero .hero-quote { order: 2; align-self: start; justify-self: start;
    margin-top: clamp(18px,2.4vh,26px); max-width: 26ch; }
}

/* --- Hero info bar --------------------------------------------------------- */
body .photo-hero .hero-footer .hero-location-icon { width: 44px; height: 44px; border: 1px solid #ffffff4a;
  background: #ffffff14; }
body .photo-hero .hero-footer :is(.hero-location,.hero-service) strong { font-size: 15px; }
body .photo-hero .hero-footer :is(.hero-location,.hero-service) small { font-size: 13.5px; color: #d6e3ee; }

/* --- Slideshow: three dots, two arrows, a quiet pause ---------------------- */
body .hero-slide-controls { display: flex; align-items: center; gap: 10px; }
body .hero-dots { display: inline-flex; align-items: center; gap: 8px; }
body .hero-dot { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; }
body .hero-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffffff5c;
  transition: background-color .18s ease, transform .18s ease; }
body .hero-dot:hover::after { background: #ffffff9e; }
body .hero-dot.is-current::after { background: var(--church-gold,#e2ad3a); transform: scale(1.35); }
body .hero-dot:focus-visible { outline: 2px solid #e2ad3a; outline-offset: 1px; }
body :is(.hero-slide-arrow,.hero-slide-pause) { display: grid; place-items: center; width: 34px; height: 34px;
  padding: 0; border-radius: 50%; border: 1px solid #ffffff33; background: #ffffff12; color: #eaf1f7;
  font-size: 14px; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
body :is(.hero-slide-arrow,.hero-slide-pause):hover { background: #ffffff26; border-color: #ffffff5c; }
body .hero-slide-pause { width: 30px; height: 30px; font-size: 12px; opacity: .62; }
body .hero-slide-pause:hover,body .hero-slide-pause:focus-visible { opacity: 1; }
@media(prefers-reduced-motion:reduce) {
  body .hero-dot::after,body :is(.hero-slide-arrow,.hero-slide-pause) { transition: none; }
}

/* --- Header: compact, integrated, sticky ---------------------------------- */
/* The social links come back beside Giving as small integrated buttons rather
   than the outlined pills they were. */
/* An earlier rule hid these below 1560px to save header room. The name, nav
   padding, LIVE button and the icons themselves are all smaller now, so they fit.
   Matching that rule's specificity is what makes this one apply. */
@media(min-width:1181px) { body .church-header.church-header .header-socials { display: flex; } }
body .church-header.church-header .header-socials { gap: 4px; }
body .church-header.church-header .header-socials a { width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: #55697a; }
body .church-header.church-header .header-socials svg { width: 17px; height: 17px; }
body .church-header.church-header .header-socials a:hover { background: #eef2f6; border-color: #dbe3ea; color: var(--church-navy); }
/* Language, Giving and LIVE share one 40px height so the row lines up; Giving
   reads as the primary action through weight and size, not height. */
body .church-header.church-header .header-give { min-height: 40px; padding: 0 18px; border-radius: 9px;
  font-size: 14.5px; font-weight: 700; box-shadow: 0 1px 2px #0c20321a; }
body .church-header.church-header .header-live { min-height: 40px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
body .church-header .brand strong { font-size: clamp(17px,1.2vw,21px); letter-spacing: -.01em; }
body .church-header .brand small { font-size: 11.5px; letter-spacing: .06em; }
body .church-header { border-bottom: 1px solid #e4e9ee; box-shadow: 0 1px 3px #0c20320f; }
body .church-header .church-nav { gap: 2px; }
body .church-header .church-nav > a,body .church-header .nav-group > summary { padding-inline: 14px; }

/* --- Announcements: the sidebar tab, back on the hero's right edge ---------
   Scoped to the widths where a vertical label actually fits. Below 1101px an
   existing rule already turns this into a round icon button stacked above the
   helper, which is the right answer on a narrow screen - left alone. */
@media(min-width:1101px) {
  body .announcement-edge-tab { position: fixed; top: 42%; right: 0; bottom: auto;
    flex-direction: column; align-items: center; gap: 10px; width: auto; height: auto;
    min-height: 0; padding: 18px 10px; border-radius: 12px 0 0 12px;
    border: 1px solid #e2ad3a8a; border-right: 0; background: var(--church-navy,#0c2032); color: #f2cd76;
    box-shadow: -6px 8px 24px -12px #0c2032a6; }
  body .announcement-edge-tab .announcement-edge-label { position: static; width: auto; height: auto;
    margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none;
    writing-mode: vertical-rl; white-space: nowrap;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  body .announcement-edge-tab .announcement-edge-icon { display: grid; place-items: center; }
  body .announcement-edge-tab svg { width: 19px; height: 19px; }
  body .announcement-edge-tab:hover { background: #16304a; border-color: var(--church-gold,#e2ad3a); }
}

/* --- Live worship banner --------------------------------------------------- */
body .live-banner .live-dot { animation: maf-live-pulse 2s ease-in-out infinite; }
@keyframes maf-live-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}
@media(prefers-reduced-motion:reduce) { body .live-banner .live-dot { animation: none; } }
body .live-banner .live-banner-media { display: block; border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 44px -26px #00000099; }
body .live-banner .live-banner-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
/* With no published worship photo the banner becomes one full-width column
   rather than leaving an empty frame beside the text. */
body .live-banner .live-banner-inner:not(:has(.live-banner-media)) { grid-template-columns: 1fr; }
body .live-banner .live-actions .btn { min-height: 46px; border-radius: 9px; font-weight: 700; }

/* --- Event cards: fixed date badge, content in its own column -------------- */
body .event-tile { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start;
  gap: clamp(14px,1.4vw,18px); }
body .event-tile .event-date { flex: 0 0 auto; align-self: start; }
/* The place line used to sit outside the text column on narrow cards. */
body .event-tile .event-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
body .event-tile .event-tile-place { display: flex; align-items: center; gap: 7px; min-width: 0;
  overflow-wrap: anywhere; }
body .event-tile .event-tile-place svg { flex: 0 0 auto; width: 15px; height: 15px; }
body .event-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(14px,1.6vw,22px); }
@media(max-width:1050px) { body .event-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { body .event-strip { grid-template-columns: 1fr; } }

/* --- About: copy left, one large rounded photograph right ------------------ */
body .about-split { align-items: center; gap: clamp(30px,4vw,72px); }
body .about-figure { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 54px -30px #0c203273; }
body .about-figure:empty { display: none; }
body .about-figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
/* .public-site .resource-links sets gap:0 with equal specificity later in the
   file, so this needs the extra class to win. */
body .public-site .about-resource-links { margin-top: clamp(20px,2.6vh,28px); display: flex; flex-wrap: wrap;
  gap: 10px clamp(18px,2vw,28px); border: 0; padding: 0; }
body .public-site .about-resource-links a { padding: 0; border: 0; white-space: nowrap; }
/* Every button that ends in an arrow needs room before it. */
body .public-site .btn > span[aria-hidden] { margin-left: 8px; }
body .about-worldwide { margin-top: clamp(28px,3.4vh,40px); }
@media(max-width:900px) { body .about-split { grid-template-columns: 1fr; } }
/* Stacked, the two hero buttons should still read as a matched pair. */
@media(max-width:560px) {
  body .hero.photo-hero .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  body .hero.photo-hero .actions .btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   Follow-up pass: logo size, header balance, hero info bar, chat launcher.
   =========================================================================== */

/* --- Logo. Earlier rules cap this at 44px using .church-header.church-header,
   so a plain .church-header selector never wins. Match their specificity. ---- */
body .church-header.church-header .church-logo-image { width: 56px; height: 56px; flex-basis: 56px; }
@media(min-width:1181px) {
  body .church-header.church-header .church-logo-image { width: 66px; height: 66px; flex-basis: 66px; }
}
@media(max-width:620px) {
  body .church-header.church-header .church-logo-image { width: 46px; height: 46px; flex-basis: 46px; }
}

/* --- Header: let the nav sit in the middle and give the right group room --- */
/* .church-header-main carries more children than brand / nav / actions, so an
   explicit three-column grid pushed the rest onto new rows and grew the header
   from 84px to 127px. Left as flex; the nav lands a little right of the page
   centre, which is what the differing brand and action widths give you. */
@media(min-width:1181px) {
  body .church-header.church-header .church-header-main { gap: clamp(14px,1.6vw,28px); }
  body .church-header.church-header .church-header-actions { gap: clamp(8px,1vw,14px); }
}
/* --- Hero info bar: one grouped, aligned block rather than two stray items -- */
@media(min-width:761px) {
  body .hero.photo-hero .hero-footer .hero-meta-row { display: flex; align-items: stretch;
    gap: clamp(18px,2vw,30px); }
  /* .hero.photo-hero .hero-location still carries a 20px top margin from the
     single-column layout, which knocked the two cards out of line. */
  body .photo-hero .hero-footer :is(.hero-location,.hero-service) { align-items: center; gap: 14px;
    margin: 0; padding: 12px 18px; border-radius: 12px; background: #0a1b2b52;
    border: 1px solid #ffffff1f; border-top: 1px solid #ffffff1f; }
  body .photo-hero .hero-footer :is(.hero-location,.hero-service):hover { background: #0a1b2b75; border-color: #ffffff3d; }
  /* The standalone divider is redundant once each item has its own edge. */
  body .photo-hero .hero-footer .hero-service::before { content: none; }
}
body .photo-hero .hero-footer :is(.hero-location,.hero-service) strong { line-height: 1.35; }
body .photo-hero .hero-footer :is(.hero-location,.hero-service) small { line-height: 1.4; }

/* --- Church Helper button: bigger target, clearer that it is the church ----- */
body .chat-launcher { min-width: 60px; min-height: 60px; width: 60px; height: 60px;
  border: 1px solid #e2ad3a7a; box-shadow: 0 10px 26px -10px #0c2032a6;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
body .chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px #0c2032c4;
  border-color: var(--church-gold,#e2ad3a); }
body .chat-launcher .chat-launcher-mark .church-logo-image { width: 32px; height: 32px; }
@media(max-width:620px) {
  body .chat-launcher { min-width: 54px; min-height: 54px; width: 54px; height: 54px; }
  body .chat-launcher .chat-launcher-mark .church-logo-image { width: 28px; height: 28px; }
}
@media(prefers-reduced-motion:reduce) {
  body .chat-launcher { transition: none; }
  body .chat-launcher:hover { transform: none; }
}

/* --- Church Helper conversation: streamed AI replies ----------------------- */
/* Replies arrive as plain text, so line breaks carry the layout and links sit
   inline rather than taking the block style the built-in answers use. */
body .chat-ai-text { white-space: pre-line; }
body .chat-message .chat-ai-text a { display: inline; margin: 0; }
body .chat-typing { display: inline-flex; align-items: center; gap: 4px; height: 20px; }
body .chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35;
  animation: chat-typing 1.2s infinite ease-in-out; }
body .chat-typing i:nth-child(2) { animation-delay: .15s; }
body .chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media(prefers-reduced-motion:reduce) { body .chat-typing i { animation: none; opacity: .6; } }
body .chat-note { margin: 0; padding: 0 14px 12px; font-size: 11.5px; line-height: 1.5; color: var(--church-muted,#5b6b76); }
body .chat-form .btn:disabled { cursor: progress; }

/* ===========================================================================
   Site-wide navy theme: the footer's palette on every public page, the header,
   the announcements drawer and Church Helper. The staff dashboard is untouched.
   Everything above was written for light pages, often with literal colours, so
   this layer restates surfaces and text with enough weight to win: the scope
   class is repeated to outrank earlier rules instead of using !important.
   Photo heroes keep their own measured scrims and text, gold buttons stay gold,
   and form fields stay white, as in the footer.
=========================================================================== */
html body .public-site.public-site.public-site,
html body .announcement-drawer.announcement-drawer {
  color-scheme: dark;
  --church-page: #0c2032;
  --church-band: #0f2639;
  --church-cream: #0f2639;
  --church-surface: #122c42;
  --church-raised: #19384f;
  --church-border: #2a4760;
  --church-heading: #ffffff;
  --church-muted: #b8cfdf;
  --church-accent: #e2ad3a;
  --ink: #edf4f8;
  background: #0c2032;
  color: #edf4f8;
}
html body .public-site :where(*) { border-color: #2a4760; }

/* Surfaces: page, bands, cards, and the small tiles inside cards. */
html body .public-site.public-site.public-site :is(.section.alt,.church-values,.worship-together,.community-hero,.giving-intro,.calendar-intro,.program-outline,.calendar-tools,.gathering-hero:not(.has-photo)) { background: #0f2639; color: #edf4f8; border-color: #2a4760; }
html body .public-site.public-site.public-site :is(.live-banner,.visit-section,.pastor-section,.gallery-page,.gathering-facts,.section:not(.alt)) { background: transparent; }
html body .public-site.public-site.public-site figure { background-color: #19384f; }
html body .public-site.public-site.public-site img { background-color: #19384f; }
html body .public-site.public-site.public-site :is(.panel:not(.dark),.card,.value-card,.worship-session,.event-tile,.pastor-profile,.visit-resource,.church-gallery-card,.community-invitation,.ministry-card,.program-week-nav,.program-week-reset,.program-help,.outline-card,.giving-help,.giving-complete,.offering-group,.offering-group-heading,.calendar-list,.calendar-empty,.calendar-cell) { background-color: #122c42; color: #edf4f8; border-color: #2a4760; box-shadow: none; }
html body .public-site.public-site.public-site :is(.worship-session-photo,.event-date,.program-date,.program-event-link,.card-visual,.calendar-event) { background-color: #19384f; border-color: #2a4760; }
html body .public-site.public-site.public-site :is(.ministry-icon,.gathering-fact-icon,.value-badge,.offering-number) { background-color: #19384f; color: #e2ad3a; border-color: #2a4760; }
html body .public-site.public-site.public-site .calendar-cell.outside { background-color: #0f2639; }
html body .public-site.public-site.public-site .calendar-cell.is-today { background-color: #1d3a52; box-shadow: inset 0 0 0 2px #e2ad3a; }
html body .public-site.public-site.public-site .calendar-scroll::before { background: #122c42; color: #b8cfdf; }
html body .public-site.public-site.public-site :is(.worship-session,.event-tile,.program-event-link,.visit-resource,.church-gallery-card):hover { background-color: #19384f; border-color: #3d6180; }

/* Text: white headings, blue-grey reading copy, gold labels. Photo heroes and
   buttons are left alone; they carry their own verified colours. */
html body .public-site.public-site.public-site :is(a,span,summary,div,em,button):where(:not(.btn,.play,.eyebrow,.meta,.hero-accent,.pill,.sr-only)):where(:not(:is(.photo-hero,.gathering-hero.has-photo,.btn,.play) *)) { color: inherit; }
html body .public-site.public-site.public-site :is(h1,h2,h3,h4,h5,h6,strong,dt):where(:not(:is(.photo-hero,.gathering-hero.has-photo,.btn) *)) { color: #ffffff; }
html body .public-site.public-site.public-site :is(p,li,small,figcaption,label,dd,time,blockquote):where(:not(:is(.photo-hero,.gathering-hero.has-photo,.btn,.panel.dark) *)) { color: #b8cfdf; }
html body .public-site.public-site.public-site :is(.eyebrow,.meta,.values-eyebrow,.worship-session-day,.outline-number,.offering-mark,.card-visual,.card-visual span):where(:not(:is(.photo-hero,.gathering-hero.has-photo) *)) { color: #e2ad3a; }
html body .public-site.public-site.public-site :is(.text-link,.text-button,.ministry-card-links a,.card-body>a,.worship-session>a,.program-help>a:not(.btn),.resource-links a,.community-invitation a) { color: #d5e1ea; }
html body .public-site.public-site.public-site :is(.text-link,.text-button,.ministry-card-links a,.card-body>a,.worship-session>a,.program-help>a:not(.btn),.resource-links a,.community-invitation a):hover { color: #e2ad3a; }
html body .public-site.public-site.public-site :is(.calendar-day-number,.calendar-event span) { color: #b8cfdf; }
html body .public-site.public-site.public-site :is(.calendar-day-number:hover,.program-event-link:hover) { background: #19384f; color: #ffffff; }
html body .public-site.public-site.public-site .calendar-day-number[aria-current=date] { background: #e2ad3a; color: #0c2032; }

/* Buttons: primary actions are gold on navy; secondary ones are outlined. */
html body .public-site.public-site.public-site .btn:not(.btn-gold,.btn-navy,[aria-pressed=true]) { background: transparent; color: #edf4f8; border-color: #4a6a84; }
html body .public-site.public-site.public-site .btn:not(.btn-gold,.btn-navy,[aria-pressed=true]):hover { background: #19384f; color: #ffffff; border-color: #e2ad3a; }
html body .public-site.public-site.public-site :is(.btn.btn-navy,.btn[aria-pressed=true]) { background: #e2ad3a; border-color: #c28f26; color: #0c2032; }
html body .public-site.public-site.public-site :is(.btn.btn-navy,.btn[aria-pressed=true]):hover { background: #edbc50; color: #0c2032; }

/* The header has its own section, "Header and navigation", at the end of this file. */

/* Church Helper panel. The input stays white, like the footer's search field. */
html body #church-chat .chat-panel { background: #0c2032; color: #edf4f8; border-color: #2a4760; box-shadow: 0 24px 60px #0000008c; }
html body #church-chat .chat-message { background: #19384f; color: #edf4f8; }
html body #church-chat .chat-message.user { background: #24486a; color: #ffffff; }
html body #church-chat .chat-message :is(p,strong,span) { color: inherit; }
html body #church-chat .chat-message a { color: #f0c65c; }
html body #church-chat .chat-topics button { background: transparent; color: #d5e1ea; border-color: #3a5a74; }
html body #church-chat .chat-topics button:hover { background: #19384f; color: #ffffff; border-color: #e2ad3a; }
html body #church-chat .chat-form { border-top-color: #2a4760; }
html body #church-chat :is(.chat-note,.chat-typing) { color: #b8cfdf; }
html body #church-chat .chat-heading .close { background: #19384f; color: #ffffff; border-color: #2a4760; }
html body #church-chat .chat-heading .close:hover { background: #24486a; }

/* Dividers that earlier rules set in light grey. */
html body .public-site.public-site.public-site :is(.visit-contact,.contact-panel a,.resource-links a,.calendar-download,.community-invitation a,.ministry-filters,.activity-media figure,.community-next,.outline-card summary) { border-color: #2a4760; }

/* Announcements drawer: navy cards, white titles, gold labels. */
html body .announcement-drawer.announcement-drawer { border-left-color: #2a4760; }
html body .announcement-drawer.announcement-drawer :is(.board-feature,.board-jump,.board-calendar,.board-team,.board-admin) { background-color: #122c42; border-color: #2a4760; color: #edf4f8; }
html body .announcement-drawer.announcement-drawer :is(.board-jump,.board-calendar,.board-team,.board-admin):hover { background-color: #19384f; }
html body .announcement-drawer.announcement-drawer .board-jump[aria-current=true] { background-color: #19384f; border-color: #e2ad3a; }
html body .announcement-drawer.announcement-drawer .board-cycle-controls button:hover { background: #19384f; color: #ffffff; }
html body .announcement-drawer.announcement-drawer :is(.board-footer,.board-resources,.board-directory) { border-color: #2a4760; }
html body .announcement-drawer.announcement-drawer :is(a,span,button,div,em):where(:not(.btn,.eyebrow,.meta,.board-section-label,.board-jump-number,.board-jump-arrow,.board-date-label,.sr-only)):where(:not(.btn *)) { color: inherit; }
html body .announcement-drawer.announcement-drawer :is(h2,h3,h4,strong,.board-jump-title,.board-calendar span) { color: #ffffff; }
html body .announcement-drawer.announcement-drawer :is(p,small,time,.board-date-label,.board-team span,.board-admin span) { color: #b8cfdf; }
html body .announcement-drawer.announcement-drawer :is(.board-section-label,.board-jump-number,.board-jump-arrow,.eyebrow,.meta) { color: #e2ad3a; }

/* ===========================================================================
   Header and navigation
   A floating glass bar: rounded, inset from the window edges, blurred over
   whatever sits behind it. On the homepage it floats over the photograph and
   turns solid navy once the page scrolls (its height never changes, so the page
   does not jump). Desktop is one row of identity, pill navigation and utilities
   ending in Giving, the single primary action. The compact bar (app.js decides
   when) opens a rounded glass menu below it carrying Giving, Watch Live,
   language and social links. Earlier header rules are superseded here; the
   repeated class outranks them without !important.
=========================================================================== */
html body .church-header.church-header.church-header {
  --hdr-h: 68px; --hdr-inset: clamp(12px,2vw,24px);
  position: sticky; top: 0; z-index: 35; display: block;
  padding: 12px var(--hdr-inset);
  background: transparent; color: #edf4f8; border: 0; box-shadow: none;
  /* Only the bar takes clicks; the clear margin around it passes them to the page. */
  pointer-events: none;
}
/* The page behind the floating bar is the site's navy, not the light base colour. */
html body:has(.public-site) { background: #0c2032; }
/* An open menu sits above the floating announcements and helper buttons. */
html body .church-header.church-header.church-header:has(.church-nav.is-open) { z-index: 60; }
/* app.js measures the desktop row at its natural width to decide whether it fits. Transitions are
   off so the measurement reads the final size, not a value part-way through an animation. */
html body .church-header.church-header.church-header.is-measuring :is(.brand,.church-nav-wrap,.church-header-actions) { flex-grow: 0; flex-shrink: 0; transition: none; }
/* The glass bar. Over the homepage photograph it is mostly clear; elsewhere it reads as a lighter navy
   panel; once the page scrolls it turns solid so content underneath never shows through the text. */
html body .church-header.church-header.church-header .church-header-main {
  pointer-events: auto; position: relative;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 24px;
  width: 100%; max-width: 1400px; min-height: var(--hdr-h); margin-inline: auto;
  padding-block: 0; padding-inline: 20px 12px;
  border: 1px solid #ffffff1f; border-radius: 20px; background: transparent; isolation: isolate;
  box-shadow: 0 14px 36px -18px #000000cc;
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* The frosted glass is a layer behind the bar's content, not a filter on the bar itself: in Chrome a
   backdrop filter on the bar renders its dropdowns and menu panel see-through. Absolute positioning
   also neutralises the older two-row phone header's ::after spacer. */
html body .church-header.church-header.church-header .church-header-main::after {
  content: ''; display: block; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; flex: none; order: 0;
  border-radius: inherit; background: #122c42c7; box-shadow: inset 0 1px 0 #ffffff14; pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transition: background-color .25s ease;
}
html body .church-header.church-header.church-header .church-header-main::before {
  content: ''; position: absolute; top: -1px; left: 50%; width: 40%; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg,#e2ad3a00,#e2ad3ab3,#e2ad3a00); pointer-events: none;
}
html body .church-header.church-header.church-header.is-overlay .church-header-main { border-color: #ffffff2e; }
html body .church-header.church-header.church-header.is-overlay .church-header-main::after { background: #0a1b2b66; }
html body .church-header.church-header.church-header.is-scrolled .church-header-main { border-color: #ffffff1a; box-shadow: 0 18px 44px -20px #000000f2; }
html body .church-header.church-header.church-header.is-scrolled .church-header-main::after { background: #0c2032f0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .church-header.church-header.church-header .church-header-main::after { background: #0f2639f5; }
}
@media (prefers-reduced-motion: reduce) {
  html body .church-header.church-header.church-header :is(.church-header-main,.church-header-main::after) { transition: none; }
}

/* Homepage: the photograph runs up under the floating bar. The hero moves up by the header's height
   and pads its content back down by the same amount, so the text stays where it was. The height caps
   match the hero's own rules, which subtract the header instead. */
html body .home-page>.hero.photo-hero.photo-hero:first-child { box-sizing: border-box; margin-top: calc(-1 * var(--header-h,92px)); padding-top: var(--header-h,92px); min-height: 100vh; min-height: 100svh; }
@media (min-width: 761px) {
  html body .home-page>.hero.photo-hero.photo-hero:first-child { min-height: min(100vh,calc(1200px + var(--header-h,92px))); min-height: min(100svh,calc(1200px + var(--header-h,92px))); }
}
@media (max-width: 760px) and (min-height: 1100px) {
  html body .home-page>.hero.photo-hero.photo-hero:first-child { min-height: min(100svh,calc(940px + var(--header-h,92px))); }
}
@media (max-height: 560px) and (orientation: landscape) {
  html body .home-page>.hero.photo-hero.photo-hero:first-child { min-height: 0; }
}

/* Identity */
html body .church-header.church-header.church-header .brand { order: 0; flex: 0 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 0; text-decoration: none; }
html body .church-header.church-header.church-header .brand .church-logo-image { width: 46px; height: 46px; flex: 0 0 46px; }
html body .church-header.church-header.church-header .brand>span { display: block; min-width: 0; padding: 0; }
html body .church-header.church-header.church-header .brand strong { display: block; max-width: 17ch; font-family: Newsreader,Georgia,serif; font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; color: #ffffff; white-space: normal; }
html body .church-header.church-header.church-header .brand small { display: block; margin-top: 4px; font-family: 'DM Sans',sans-serif; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #9fb6c8; }

/* Myanmar script needs its own face and taller lines; the box is sized for the longest word so the
   name never spills into the navigation. */
html[lang=my] body .church-header.church-header.church-header .brand strong { max-width: 12em; font-family: 'Noto Sans Myanmar','Myanmar Text',sans-serif; font-size: 16px; line-height: 1.55; letter-spacing: 0; }
html[lang=my] body .church-header.church-header.church-header .brand small { font-family: 'Noto Sans Myanmar','Myanmar Text',sans-serif; letter-spacing: .02em; text-transform: none; }
html[lang=my] body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary,.nav-dropdown>a,.nav-dropdown>button) { line-height: 1.7; }
/* Language names are shown in their own script, so the Burmese one needs a Myanmar face on any page. */
html body .church-header.church-header.church-header .church-language option[lang=my],
html body .church-header.church-header.church-header.church-header .church-nav-languages button[lang=my] { font-family: 'Noto Sans Myanmar','Myanmar Text',sans-serif; line-height: 1.8; }
/* The longer Burmese labels need the room; the social links stay in the footer and the menu. */
html[lang=my] body .church-header.church-header.church-header .header-socials { display: none; }

/* Navigation */
html body .church-header.church-header.church-header .church-nav-wrap { order: 0; flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; position: static; margin: 0; background: transparent; border: 0; }
html body .church-header.church-header.church-header .church-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: none; margin: 0; padding: 0; background: transparent; }
html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px;
  border-radius: 999px; background: transparent; box-shadow: none;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: #c9d7e2; text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary):hover { background: #ffffff14; color: #ffffff; }
html body .church-header.church-header.church-header .nav-group[open]>summary { background: #ffffff1f; color: #ffffff; }
/* The current page is a gold-tinted pill. */
html body .church-header.church-header.church-header :is(.church-nav>a[aria-current=page],.nav-group[data-active=true]>summary) { background: #e2ad3a24; color: #f5d48a; text-decoration: none; box-shadow: inset 0 0 0 1px #e2ad3a33; }
html body .church-header.church-header.church-header .nav-group>summary>span[aria-hidden] { width: 16px; height: 16px; opacity: .6; transition: transform .2s ease, opacity .15s ease; }
html body .church-header.church-header.church-header :is(.nav-group>summary:hover,.nav-group>summary:focus-visible,.nav-group[open]>summary)>span[aria-hidden] { opacity: 1; }
html body .church-header.church-header.church-header .nav-group[open]>summary>span[aria-hidden] { transform: rotate(180deg); }
html body .church-header.church-header.church-header .church-nav-extras { display: none; }

/* Dropdown panels */
html body .church-header.church-header.church-header .nav-group { position: relative; }
html body .church-header.church-header.church-header .nav-dropdown {
  position: absolute; top: calc(100% + 22px); left: -8px; right: auto; z-index: 40;
  width: max-content; min-width: 240px; max-width: min(300px,calc(100vw - 48px)); padding: 8px;
  background: #0f2639f5; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid #ffffff1f; border-radius: 16px;
  box-shadow: 0 24px 48px -20px #000000e6, inset 0 1px 0 #ffffff14; animation: nav-drop .16s ease-out;
}
html body .church-header.church-header.church-header :is(.nav-dropdown>a,.nav-dropdown>button) {
  display: flex; align-items: center; width: 100%; min-height: 42px; margin: 0; padding: 10px 14px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: #d5e1ea; text-align: left; text-decoration: none; cursor: pointer;
}
html body .church-header.church-header.church-header .nav-dropdown>*+* { margin-top: 2px; }
html body .church-header.church-header.church-header :is(.nav-dropdown>a,.nav-dropdown>button):is(:hover,:focus-visible) { background: #ffffff12; color: #ffffff; }
html body .church-header.church-header.church-header .nav-dropdown>a[aria-current=page] { background: #e2ad3a1f; color: #f5d48a; font-weight: 600; box-shadow: none; }
@keyframes nav-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Utilities */
html body .church-header.church-header.church-header .church-header-actions { order: 0; flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
html body .church-header.church-header.church-header .church-language-control { position: relative; display: flex; align-items: center; flex: 0 0 auto; order: 0; min-width: 0; }
/* No divider: spacing sets the utilities apart. The language picker is a quiet text control that
   matches the navigation, Live is a red-tinted status pill, and Giving is the only solid, gold action.
   Icons share one size and line weight. */
html body .church-header.church-header.church-header .church-language-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: #9fb6c8; pointer-events: none; }
html body .church-header.church-header.church-header .church-language-control::after { right: 12px; width: 16px; height: 16px; color: #9fb6c8; }
html body .church-header.church-header.church-header select.church-language {
  appearance: none; color-scheme: dark; width: auto; min-width: 0; max-width: none;
  height: 40px; min-height: 40px; padding: 0 34px 0 38px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; box-shadow: none;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 38px; color: #c9d7e2; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
html body .church-header.church-header.church-header select.church-language:hover { background: #ffffff0f; border-color: transparent; color: #ffffff; }
html body .church-header.church-header.church-header .church-language-control:hover :is(.church-language-icon) { color: #ffffff; }
html body .church-header.church-header.church-header select.church-language option { background: #0c2032; color: #edf4f8; }
html body .church-header.church-header.church-header .header-socials { display: flex; align-items: center; gap: 2px; }
html body .church-header.church-header.church-header .header-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #9fb6c8; }
html body .church-header.church-header.church-header .header-socials a:hover { background: #ffffff14; color: #ffffff; }
html body .church-header.church-header.church-header .header-socials svg { width: 18px; height: 18px; }
html body .church-header.church-header.church-header .header-live {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 14px 0 12px;
  border: 1px solid #ef444459; border-radius: 999px; background: #ef44441a;
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; color: #ffffff; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
html body .church-header.church-header.church-header .header-live:hover { background: #ef44442e; border-color: #ef4444a6; color: #ffffff; }
/* Static on purpose: a pulsing dot would claim a stream is on air right now. */
html body .church-header.church-header.church-header .header-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px #ef444433; flex-shrink: 0; }
html body .church-header.church-header.church-header .header-give {
  display: inline-flex; align-items: center; gap: 8px; position: relative; order: 0; height: 40px; min-height: 40px; margin: 0 0 0 4px; padding: 0 20px 0 18px;
  border: 1px solid #e2ad3a; border-radius: 999px; background: #e2ad3a; box-shadow: 0 6px 16px -8px #e2ad3a99;
  font-size: 14px; font-weight: 700; line-height: 1; color: #0c2032; white-space: nowrap;
}
html body .church-header.church-header.church-header .give-icon { width: 16px; height: 16px; flex-shrink: 0; }
html body .church-header.church-header.church-header .header-give:hover { background: #edbc50; border-color: #edbc50; color: #0c2032; }
html body .church-header.church-header.church-header .header-give::before { content: none; display: none; }

/* Menu button: three bars that turn into a close mark. */
html body .church-header.church-header.church-header .church-menu { display: none; }
html body .church-header.church-header.church-header .church-menu-icon { position: relative; display: inline-block; width: 18px; height: 14px; font-size: 0; }
html body .church-header.church-header.church-header .church-menu-icon i { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .15s ease, top .2s ease; }
html body .church-header.church-header.church-header .church-menu-icon i:nth-child(1) { top: 0; }
html body .church-header.church-header.church-header .church-menu-icon i:nth-child(2) { top: 6px; }
html body .church-header.church-header.church-header .church-menu-icon i:nth-child(3) { top: 12px; }
html body .church-header.church-header.church-header .church-menu[aria-expanded=true] .church-menu-icon i:nth-child(1) { top: 6px; transform: rotate(45deg); }
html body .church-header.church-header.church-header .church-menu[aria-expanded=true] .church-menu-icon i:nth-child(2) { opacity: 0; }
html body .church-header.church-header.church-header .church-menu[aria-expanded=true] .church-menu-icon i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary,.nav-group>summary>span,.church-menu-icon i) { transition: none; }
  html body .church-header.church-header.church-header .nav-dropdown { animation: none; }
}

/* Narrow desktops: social links live in the footer, so they give way first. */
@media (min-width: 1181px) and (max-width: 1360px) {
  html body .church-header.church-header.church-header .church-header-main { gap: 18px; }
  html body .church-header.church-header.church-header .header-socials { display: none; }
  html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary) { padding-inline: 11px; font-size: 14.5px; }
  html body .church-header.church-header.church-header .church-header-actions { gap: 10px; }
}

/* Compact header: a short bar plus a full-width menu sheet. app.js sets .is-compact at
   1180px and below, and wherever the desktop row would not fit (longer translations). */
html body .church-header.church-header.church-header.is-compact { --hdr-h: 68px; }
html body .church-header.church-header.church-header.is-compact .church-header-main { gap: 12px; }
html body .church-header.church-header.church-header.is-compact .brand { flex: 1 1 auto; }
html body .church-header.church-header.church-header.is-compact .church-header-actions { margin-left: auto; padding-left: 0; border-left: 0; gap: 10px; }
html body .church-header.church-header.church-header.is-compact :is(.header-socials,.header-live) { display: none; }
html body .church-header.church-header.church-header.is-compact .church-menu {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; min-height: 40px; min-width: 0; padding: 0 14px;
  border: 1px solid #ffffff24; border-radius: 999px; background: #ffffff0f; color: #ffffff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
html body .church-header.church-header.church-header.is-compact :is(.church-menu:hover,.church-menu[aria-expanded=true]) { background: #ffffff1f; border-color: #ffffff3d; }
html body .church-header.church-header.church-header.is-compact .church-menu-label { display: inline; font-size: 14px; font-weight: 600; }
html body .church-header.church-header.church-header.is-compact .church-nav-wrap { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: block; }
html body .church-header.church-header.church-header.is-compact .church-nav { display: none; }
html body .church-header.church-header.church-header.is-compact .church-nav.is-open {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; position: static; width: auto; margin: 0;
  max-height: calc(100dvh - var(--header-h,92px) - 12px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 20px 20px; background: #0c2032f7;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid #ffffff1f; border-radius: 20px; box-shadow: 0 28px 56px -24px #000000f2; animation: nav-drop .18s ease-out;
}
html body .church-header.church-header.church-header.is-compact :is(.church-nav>a,.church-nav>.nav-group) { width: 100%; }
html body .church-header.church-header.church-header.is-compact :is(.church-nav>a,.church-nav summary) {
  display: flex; justify-content: space-between; width: 100%; min-height: 52px; padding: 12px 4px;
  border-radius: 0; border-bottom: 1px solid #ffffff14; background: transparent; font-size: 16px; text-align: left;
}
html body .church-header.church-header.church-header.is-compact :is(.church-nav>a,.church-nav summary):hover,
html body .church-header.church-header.church-header.is-compact .nav-group[open]>summary { background: transparent; color: #ffffff; }
html body .church-header.church-header.church-header.is-compact :is(.church-nav>a[aria-current=page],.nav-group[data-active=true]>summary) { color: #e2ad3a; text-decoration: none; }
html body .church-header.church-header.church-header.is-compact .nav-dropdown {
  position: static; width: auto; min-width: 0; max-width: none; margin: 6px 0 10px; padding: 0 0 0 12px;
  background: transparent; border: 0; border-left: 2px solid #2a4760; border-radius: 0; box-shadow: none; animation: none;
}
html body .church-header.church-header.church-header.is-compact :is(.nav-dropdown>a,.nav-dropdown>button) { min-height: 44px; font-size: 15px; }
html body .church-header.church-header.church-header.is-compact .church-nav-extras { display: grid; gap: 16px; margin-top: 20px; }
html body .church-header.church-header.church-header.is-compact .church-nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body .church-header.church-header.church-header.is-compact .church-nav-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0; border-radius: 999px; font-size: 15px; font-weight: 700; }
html body .church-header.church-header.church-header.is-compact .church-nav-live { background: #ef44441a; border: 1px solid #ef444459; color: #ffffff; }
html body .church-header.church-header.church-header.is-compact .church-nav-live:hover { background: #ef44442e; border-color: #ef4444a6; color: #ffffff; }
html body .church-header.church-header.church-header.is-compact .church-nav-languages { display: flex; flex-wrap: wrap; gap: 8px; }
html body .church-header.church-header.church-header.is-compact .church-nav-languages button { min-height: 40px; padding: 0 16px; border: 1px solid #2a4760; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; color: #d5e1ea; cursor: pointer; }
html body .church-header.church-header.church-header.is-compact .church-nav-languages button:hover { border-color: #4a6a84; color: #ffffff; }
html body .church-header.church-header.church-header.is-compact .church-nav-languages button[aria-current=true] { border-color: #e2ad3a; background: #e2ad3a14; color: #e2ad3a; }
html body .church-header.church-header.church-header.is-compact .church-nav-socials { display: flex; gap: 8px; }
html body .church-header.church-header.church-header.is-compact .church-nav-socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #2a4760; border-radius: 999px; color: #b8cfdf; }
html body .church-header.church-header.church-header.is-compact .church-nav-socials a:hover { border-color: #4a6a84; color: #ffffff; }
html body .church-header.church-header.church-header.is-compact .church-nav-socials svg { width: 18px; height: 18px; }
/* An earlier panel design styled the open menu with longer selectors; restate the list look over it. */
html body .church-header.church-header.church-header.is-compact .church-nav.is-open>a[aria-current=page],
html body .church-header.church-header.church-header.is-compact .church-nav.is-open .nav-group[data-active=true]>summary { background: transparent; box-shadow: none; color: #e2ad3a; text-decoration: none; }
html body .church-header.church-header.church-header.is-compact .church-nav.is-open .nav-dropdown { background: transparent; border: 0; border-left: 2px solid #2a4760; border-radius: 0; box-shadow: none; }
html body .church-header.church-header.church-header.is-compact .church-nav.is-open .nav-dropdown>a { color: #d5e1ea; }
html body .church-header.church-header.church-header.is-compact .church-nav.is-open .nav-dropdown>a:hover { background: #ffffff0a; color: #ffffff; }
html body .church-header.church-header.church-header.is-compact .church-nav.is-open .nav-dropdown>a[aria-current=page] { background: transparent; box-shadow: none; color: #e2ad3a; }
@media (max-width: 620px) {
  html body .church-header.church-header.church-header.is-compact { --hdr-h: 60px; }
  html body .church-header.church-header.church-header { padding-block: 10px; }
  html body .church-header.church-header.church-header .church-header-main { display: flex; flex-wrap: nowrap; padding-inline: 14px 8px; border-radius: 16px; }
  html body .church-header.church-header.church-header .church-header-actions { display: flex; }
  html body .church-header.church-header.church-header :is(.church-language-control,.header-give) { display: none; }
  html body .church-header.church-header.church-header .brand .church-logo-image { width: 40px; height: 40px; flex-basis: 40px; }
  html body .church-header.church-header.church-header .brand strong { font-size: 17px; max-width: 16ch; }
  html body .church-header.church-header.church-header .brand small { display: none; }
}

/* The live banner ran ~590px tall on desktop and ~830px stacked, because the
   photo was held at 4:3 and allowed to fill the whole column. A wider crop and
   a cap on the stacked width bring it back to a band rather than a page. */
body .live-banner .live-banner-inner { align-items: center; padding-block: clamp(30px,4vh,44px); }
body .live-banner .live-banner-media img { aspect-ratio: 16/9; max-height: 340px; }
@media(max-width:1023px) {
  body .live-banner .live-banner-media { max-width: 520px; margin-inline: auto; }
  body .live-banner .live-banner-media img { max-height: 280px; }
}
@media(max-width:560px) {
  body .live-banner .live-banner-media img { max-height: 210px; }
}
/* On phones the section and its inner block were each adding their own padding,
   120px of it between them, and the three watch buttons wrapped onto three rows. */
@media(max-width:560px) {
  body .live-banner .live-banner-inner { padding-block: 22px; gap: 20px; }
  body .live-banner .live-actions { gap: 8px; }
  body .live-banner .live-actions .btn { min-height: 44px; flex: 1 1 100%; justify-content: center; }
  body .live-banner .live-banner-media img { max-height: 168px; }
}

/* The navy card ran the full width of the page, which left a wide void between
   the text and the photograph. Containing it pulls the two columns together. */
/* theme.css:634 sets .home-page>section>.shell to 1440px at specificity 0-2-2,
   so naming .shell here as well is what lets this one through. */
body .live-banner .live-banner-inner.shell { max-width: 1120px; margin-inline: auto; }

/* --- Back to top ----------------------------------------------------------
   Sits above the Church Helper, and stays out of the way until the reader is
   past the first screen. */
body .back-to-top { position: fixed; right: 16px; bottom: 76px; z-index: 40;
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 1px solid #0c203226; background: #fff; color: var(--church-navy,#0c2032);
  box-shadow: 0 8px 22px -12px #0c2032a6; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; }
body .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
body .back-to-top:hover { border-color: var(--church-gold,#e2ad3a); color: var(--church-accent,#805b13); }
body .back-to-top:focus-visible { outline: 3px solid #e2ad3a; outline-offset: 2px; }
body .back-to-top svg { width: 20px; height: 20px; }
@media(min-width:1101px) { body .back-to-top { right: 22px; bottom: 88px; width: 48px; height: 48px; } }
@media(prefers-reduced-motion:reduce) { body .back-to-top { transition: none; } }
/* Three fixed controls share the bottom-right corner below 1101px: the helper,
   the announcements button and this one. They were overlapping, so each gets an
   explicit slot clear of the one beneath it. */
@media(max-width:1100px) {
  body .chat-launcher { bottom: 16px; }
  body .announcement-edge-tab { bottom: 88px; }
  body .back-to-top { bottom: 150px; }
}
/* With the card narrowed the three watch buttons wrapped onto two rows; the
   text side needs a slightly larger share of the split to keep them in one. */
@media(min-width:1024px) {
  body .live-banner .live-banner-inner.shell { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); }
  body .live-banner .live-actions .btn { padding-inline: 16px; }
}

/* --- Announcements sits near the top, under the header --------------------
   It was anchored at 42% of the viewport, which put it 630-890px down on most
   screens and crowded the corner the helper already occupies. --header-h is
   published by syncHeaderHeight(), so this tracks the real header. */
body .announcement-edge-tab { top: calc(var(--header-h,88px) + 20px); bottom: auto; }
@media(max-width:1100px) {
  body .announcement-edge-tab { top: calc(var(--header-h,88px) + 14px); bottom: auto; right: 12px; }
}

/* --- Back to top moves out of that corner to the foot of the screen -------- */
body .back-to-top { right: auto; left: 50%; bottom: 18px;
  transform: translateX(-50%) translateY(8px); }
body .back-to-top.is-visible { transform: translateX(-50%); }
@media(min-width:1101px) { body .back-to-top { right: auto; left: 50%; bottom: 22px; } }
@media(max-width:1100px) { body .back-to-top { bottom: 18px; } }

/* --- The live banner comes down again -------------------------------------- */
body .live-banner .live-banner-media img { max-height: 250px; }
body .live-banner .live-banner-inner.shell { padding-block: clamp(22px,2.6vh,30px); }
@media(max-width:1023px) { body .live-banner .live-banner-media img { max-height: 220px; } }
@media(max-width:560px) { body .live-banner .live-banner-media img { max-height: 165px; } }
/* The photo was 236px of a 282px card - it alone set the height. Capping it to
   roughly the height of the text beside it turns the section into a band. */
body .live-banner .live-banner-inner.shell { max-width: 1000px; padding: 20px; gap: 24px; }
body .live-banner .live-banner-media img { max-height: 152px; }
body .live-banner h2 { font-size: clamp(22px,2vw,27px); margin-bottom: 6px; }
body .live-banner .live-banner-inner > div > p { margin-bottom: 14px; }
body .live-banner { padding-block: 28px 24px; }
@media(max-width:1023px) { body .live-banner .live-banner-media img { max-height: 170px; } }
@media(max-width:560px) { body .live-banner .live-banner-media img { max-height: 140px; } }
/* Line the card up with every other section on the page (1440 shell) instead of
   floating narrower than them, and hold the photo to a fixed column so the extra
   width goes to the copy rather than the height. */
body .live-banner .live-banner-inner.shell { max-width: 1440px; padding: 22px clamp(20px,2.4vw,34px); }
@media(min-width:1024px) {
  body .live-banner .live-banner-inner.shell { grid-template-columns: minmax(0,1fr) clamp(260px,24vw,360px); }
}
body .live-banner .live-banner-media { justify-self: end; width: 100%; }
body .live-banner .live-banner-media img { max-height: 150px; }

/* --- Order of service: a numbered sequence beside the gathering's photo -----
   It was a grid of plain boxes with the right half of the page empty. It reads
   as an ordered walk-through now, with a rule connecting the steps. */
body .gathering-order { display: grid; grid-template-columns: minmax(0,1fr) clamp(300px,32%,420px);
  gap: clamp(28px,4vw,64px); align-items: start; margin-top: clamp(20px,2.6vh,30px); }
body .gathering-order .gathering-steps { display: grid; grid-template-columns: 1fr; gap: 0;
  max-width: none; margin: 0; padding: 0; list-style: none; counter-reset: step; }
body .gathering-order .gathering-steps li { position: relative; counter-increment: step;
  display: flex; align-items: center; min-height: 62px;
  padding: 10px 0 10px 68px; background: none; border: 0; border-radius: 0;
  font-size: clamp(15px,1.2vw,17px); color: var(--church-navy); }
/* The number badge, and the rule that threads them together. */
body .gathering-order .gathering-steps li::before { content: counter(step,decimal-leading-zero);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px #0c203222, 0 2px 6px -3px #0c203240;
  font: 700 12px/1 'DM Sans',sans-serif; letter-spacing: .06em; color: var(--church-accent); }
/* z-index:-1 put this behind the section background instead of behind the badge. */
body .gathering-order .gathering-steps li { z-index: 0; }
body .gathering-order .gathering-steps li::after { content: ""; position: absolute; left: 21px; top: 50%;
  width: 1px; height: 100%; background: #0c203226; }
body .gathering-order .gathering-steps li::before { z-index: 1; }
body .gathering-order .gathering-steps li:last-child::after { display: none; }
body .gathering-order .gathering-steps li:first-child::before { background: var(--church-navy); color: #f2cd76;
  box-shadow: inset 0 0 0 1px #e2ad3a6b, 0 3px 8px -3px #0c203259; }

body .gathering-order-photo { margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 48px -30px #0c203280; }
body .gathering-order-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
@media(max-width:900px) {
  body .gathering-order { grid-template-columns: 1fr; }
  body .gathering-order-photo { max-width: 420px; }
  body .gathering-order-photo img { aspect-ratio: 4/3; }
}

/* 2026 header refresh: a quieter architectural bar with one clear action. */
html body .church-header.church-header.church-header {
  --hdr-h: 76px;
  padding: 0;
  border-top: 3px solid #e2ad3a;
  border-bottom: 1px solid #ffffff14;
  background: linear-gradient(90deg,#091c2d 0%,#0d2941 55%,#123b5d 100%);
  box-shadow: 0 10px 30px -20px #000;
}
html body .church-header.church-header.church-header .church-header-main {
  max-width: 1440px;
  min-height: var(--hdr-h);
  padding: 0 clamp(22px,3vw,42px);
  gap: clamp(22px,2.4vw,38px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body .church-header.church-header.church-header .church-header-main::before { display: none; }
html body .church-header.church-header.church-header .church-header-main::after {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body .church-header.church-header.church-header.is-overlay .church-header-main::after,
html body .church-header.church-header.church-header.is-scrolled .church-header-main::after { background: transparent; }
html body .church-header.church-header.church-header .brand { gap: 14px; flex: 0 0 auto; }
html body .church-header.church-header.church-header .brand .church-logo-image { width: 44px; height: 44px; flex-basis: 44px; }
html body .church-header.church-header.church-header .brand strong {
  max-width: 225px;
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: 0;
}
html body .church-header.church-header.church-header .brand small {
  margin-top: 6px;
  color: #a9bdcb;
  font-size: 9px;
  letter-spacing: .17em;
}
html body .church-header.church-header.church-header .church-nav { gap: 2px; }
html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary) {
  min-height: 76px;
  padding: 0 14px;
  border-radius: 0;
  color: #c4d2dc;
  font-size: 14px;
  font-weight: 600;
}
html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary):hover,
html body .church-header.church-header.church-header .nav-group[open]>summary { background: #ffffff09; color: #fff; }
html body .church-header.church-header.church-header :is(.church-nav>a[aria-current=page],.nav-group[data-active=true]>summary) {
  background: transparent;
  color: #f2c963;
  box-shadow: inset 0 -3px #e2ad3a;
}
html body .church-header.church-header.church-header .nav-dropdown { top: calc(100% + 1px); border-radius: 0 0 12px 12px; }
html body .church-header.church-header.church-header .header-socials { display: none; }
html body .church-header.church-header.church-header .church-header-actions { gap: 8px; }
html body .church-header.church-header.church-header .church-language-control {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid #ffffff1f;
}
html body .church-header.church-header.church-header select.church-language,
html body .church-header.church-header.church-header .header-live,
html body .church-header.church-header.church-header .header-give { border-radius: 10px; }
html body .church-header.church-header.church-header .header-live { height: 40px; min-height: 40px; background: transparent; }
html body .church-header.church-header.church-header .header-give {
  height: 44px;
  min-height: 44px;
  margin-left: 2px;
  padding-inline: 20px;
  box-shadow: 0 8px 20px -12px #000, inset 0 1px #fff5;
}
@media (min-width:1181px) and (max-width:1360px) {
  html body .church-header.church-header.church-header .church-header-main { gap: 16px; padding-inline: 24px; }
  html body .church-header.church-header.church-header :is(.church-nav>a,.church-nav summary) { padding-inline: 10px; }
}
html body .church-header.church-header.church-header.is-compact { --hdr-h: 68px; padding: 0; }
html body .church-header.church-header.church-header.is-compact .church-header-main { padding-inline: 18px; }
html body .church-header.church-header.church-header.is-compact .church-language-control { border-left: 0; padding-left: 0; }
html body .church-header.church-header.church-header.is-compact .church-nav-wrap { top: 100%; }
html body .church-header.church-header.church-header.is-compact .church-nav.is-open {
  border-radius: 0 0 16px 16px;
  border-top: 1px solid #ffffff14;
}
@media (max-width:620px) {
  html body .church-header.church-header.church-header,
  html body .church-header.church-header.church-header.is-compact { --hdr-h: 62px; padding: 0; }
  html body .church-header.church-header.church-header .church-header-main { padding-inline: 14px 10px; border-radius: 0; }
  html body .church-header.church-header.church-header .brand .church-logo-image { width: 38px; height: 38px; flex-basis: 38px; }
  html body .church-header.church-header.church-header .brand strong { max-width: 16ch; font-size: 16px; }
}

/* Homepage welcome: warm, reverent, and grounded in worship rather than an event poster. */
body .hero.photo-hero::before {
  background:
    radial-gradient(circle at 78% 32%,#d8ae5824 0%,transparent 30%),
    linear-gradient(96deg,#061725f2 0%,#0a2134df 38%,#0a213493 66%,#081b2bc4 100%);
}
body .hero.photo-hero .hero-background-photo { filter: saturate(.78) contrast(1.03); }
body .hero-scrim {
  background:
    linear-gradient(180deg,#07182735 0%,transparent 36%,#061725e8 100%),
    repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ffffff08 25%);
}
body .hero.photo-hero .hero-inner { padding-top: clamp(58px,10vh,108px); }
body .hero.photo-hero .hero-welcome { position: relative; padding-left: clamp(22px,2.5vw,38px); }
body .hero.photo-hero .hero-welcome::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 2px;
  height: min(260px,75%);
  background: linear-gradient(180deg,#e2ad3a,#e2ad3a30);
}
body .hero.photo-hero .hero-welcome .eyebrow { color: #f2c963; letter-spacing: .19em; }
body .hero.photo-hero .hero-welcome .eyebrow::before { width: 28px; background: #e2ad3a; }
body .hero.photo-hero .hero-welcome h1 {
  max-width: 12ch;
  font-size: clamp(40px,4.5vw,64px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
body .hero.photo-hero .hero-copy {
  max-width: 600px;
  color: #e0e8ee;
  font-size: clamp(15px,1.05vw,17px);
  line-height: 1.65;
}
body .hero.photo-hero .actions .btn { min-height: 56px; padding-inline: 28px; }
body .hero.photo-hero .actions .btn:not(.btn-gold) {
  background: #07182766;
  color: #fff;
  border-color: #ffffff52;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body .hero.photo-hero .actions .btn:not(.btn-gold):hover { background: #ffffff16; border-color: #e2ad3a; }
body .hero.photo-hero .hero-quote {
  position: relative;
  min-width: 260px;
  max-width: 290px;
  margin: 0 0 clamp(20px,5vh,60px);
  padding: 74px 28px 26px;
  border: 1px solid #e2ad3a61;
  border-radius: 140px 140px 14px 14px;
  background: linear-gradient(180deg,#0b2b43d9,#071b2ad9);
  box-shadow: inset 0 1px #ffffff17,0 20px 50px -28px #000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body .hero.photo-hero .hero-quote::before,
body .hero.photo-hero .hero-quote::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 27px;
  width: 2px;
  height: 34px;
  transform: translateX(-50%);
  background: #e2ad3a;
}
body .hero.photo-hero .hero-quote::after { top: 38px; width: 22px; height: 2px; }
body .hero.photo-hero .hero-quote blockquote { text-align: center; font-style: normal; line-height: 1.45; }
body .hero.photo-hero .hero-quote blockquote::before { display: none; }
body .hero.photo-hero .hero-quote blockquote span { margin-top: 3px; color: #f2c963; }
body .hero.photo-hero .hero-footer {
  padding: 18px 20px;
  border-top: 1px solid #e2ad3a52;
  border-bottom: 1px solid #ffffff14;
  background: linear-gradient(90deg,#071827d9,#0b2639b8);
  box-shadow: inset 0 1px #ffffff0c;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (min-width:761px) {
  body .photo-hero .hero-footer :is(.hero-location,.hero-service) { padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
  body .photo-hero .hero-footer :is(.hero-location,.hero-service):hover { background: transparent; border-color: transparent; }
}
body .photo-hero .hero-footer .hero-location-icon {
  border-color: #e2ad3a70;
  background: #e2ad3a12;
  color: #f2c963;
}
@media(max-width:1100px) {
  body .hero.photo-hero .hero-quote { min-width: 0; max-width: 330px; margin-bottom: 0; padding: 24px 24px 24px 64px; border-radius: 12px; }
  body .hero.photo-hero .hero-quote::before { left: 30px; top: 18px; transform: none; }
  body .hero.photo-hero .hero-quote::after { left: 20px; top: 29px; transform: none; }
  body .hero.photo-hero .hero-quote blockquote { text-align: left; }
}
@media(max-width:620px) {
  body .hero.photo-hero .hero-inner { padding-top: 40px; }
  body .hero.photo-hero .hero-welcome { padding-left: 18px; }
  body .hero.photo-hero .hero-welcome h1 { font-size: clamp(34px,10vw,44px); }
  body .hero.photo-hero .hero-footer { padding: 16px; }
}

/* The arched element is useful worship information, not decorative copy. */
body .hero.photo-hero .hero-worship-card { display: block; color: #fff; }
body .hero.photo-hero .hero-worship-card::before,
body .hero.photo-hero .hero-worship-card::after { display: none; }
body .hero.photo-hero .hero-worship-card .hero-cross {
  position: relative;
  display: block;
  width: 2px;
  height: 36px;
  margin: -48px auto 30px;
  background: #e2ad3a;
}
body .hero.photo-hero .hero-worship-card .hero-cross::after {
  content: '';
  position: absolute;
  top: 11px;
  left: -10px;
  width: 22px;
  height: 2px;
  background: #e2ad3a;
}
body .hero.photo-hero .hero-worship-card>p {
  margin: 0 0 8px;
  color: #f2c963;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
body .hero.photo-hero .hero-worship-card h2 {
  margin: 0 auto 20px;
  max-width: 12ch;
  color: #fff;
  font: 500 22px/1.18 Newsreader,Georgia,serif;
  text-align: center;
}
body .hero.photo-hero .hero-worship-card dl { margin: 0; border-top: 1px solid #ffffff1f; }
body .hero.photo-hero .hero-worship-card dl>div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff1f;
}
body .hero.photo-hero .hero-worship-card :is(dt,dd) { margin: 0; color: #e2ebf1; font-size: 13px; }
body .hero.photo-hero .hero-worship-card dd { color: #f2c963; font-weight: 700; white-space: nowrap; }
body .hero.photo-hero .hero-worship-card>a {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
body .hero.photo-hero .hero-worship-card>a:hover { color: #f2c963; }
@media(max-width:1100px) {
  body .hero.photo-hero .hero-worship-card { width: min(100%,520px); padding: 24px; }
  body .hero.photo-hero .hero-worship-card .hero-cross { float: left; margin: 0 28px 0 10px; }
  body .hero.photo-hero .hero-worship-card>p,
  body .hero.photo-hero .hero-worship-card h2 { text-align: left; max-width: none; }
  body .hero.photo-hero .hero-worship-card dl { clear: both; margin-top: 18px; }
}

/* Final hero geometry: stable two-column composition with a true bottom rail. */
@media(min-width:1101px) {
  html body .home-page>.hero.photo-hero.photo-hero:first-child {
    min-height: clamp(650px,calc(100svh - var(--header-h,76px)),820px);
  }
  body .hero.photo-hero .hero-inner {
    grid-template-columns: minmax(0,1fr) 300px;
    grid-template-rows: minmax(0,1fr) auto;
    column-gap: clamp(48px,7vw,110px);
    row-gap: 30px;
    padding: clamp(46px,7vh,74px) clamp(28px,4vw,68px) 28px;
  }
  body .hero.photo-hero .hero-welcome { grid-column: 1; grid-row: 1; align-self: center; max-width: 680px; }
  body .hero.photo-hero .hero-worship-card {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    width: 100%;
    margin: 0;
  }
  body .hero.photo-hero .hero-footer { grid-column: 1/-1; grid-row: 2; width: 100%; }
}
@media(min-width:801px) and (max-width:1100px) {
  html body .home-page>.hero.photo-hero.photo-hero:first-child { min-height: 700px; }
  body .hero.photo-hero .hero-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) 280px;
    grid-template-rows: minmax(0,1fr) auto;
    gap: 28px 40px;
    padding: 46px 30px 26px;
  }
  body .hero.photo-hero .hero-welcome { grid-column: 1; grid-row: 1; align-self: center; }
  body .hero.photo-hero .hero-worship-card {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 100%;
    max-width: none;
    padding: 58px 24px 24px;
    border-radius: 120px 120px 14px 14px;
  }
  body .hero.photo-hero .hero-worship-card .hero-cross { float: none; margin: -36px auto 24px; }
  body .hero.photo-hero .hero-worship-card>p,
  body .hero.photo-hero .hero-worship-card h2 { text-align: center; }
  body .hero.photo-hero .hero-worship-card dl { margin-top: 0; }
  body .hero.photo-hero .hero-footer { grid-column: 1/-1; grid-row: 2; width: 100%; margin: 0; }
}
@media(max-width:800px) {
  body .hero.photo-hero .hero-inner { gap: 24px; padding: 38px 20px 22px; }
  body .hero.photo-hero .hero-welcome { width: 100%; max-width: 620px; }
  body .hero.photo-hero .hero-worship-card { order: 2; width: 100%; max-width: 520px; }
  body .hero.photo-hero .hero-footer { order: 3; width: 100%; margin-top: 4px; }
}
@media(max-width:620px) {
  body .hero.photo-hero .hero-inner { padding: 30px 16px 18px; }
  body .hero.photo-hero .hero-welcome { padding-left: 14px; }
  body .hero.photo-hero .actions { margin-top: 18px; }
  body .hero.photo-hero .actions .btn { min-height: 48px; padding-inline: 18px; }
  body .hero.photo-hero .hero-worship-card { padding: 20px; }
  body .hero.photo-hero .hero-worship-card .hero-cross { height: 30px; margin: 0 24px 0 6px; }
  body .hero.photo-hero .hero-footer .hero-meta-row { gap: 12px; }
}

/* Quiet utility layer: service times already live in the worship panel. */
body .hero.photo-hero .hero-footer .hero-service { display: none; }
body .hero.photo-hero .hero-footer .hero-meta-row { flex: 0 1 auto; }
body .hero.photo-hero .hero-slide-controls {
  gap: 4px;
  padding: 2px;
  border: 1px solid #ffffff16;
  background: #07182766;
  opacity: .82;
}
body .hero.photo-hero :is(.hero-slide-arrow,.hero-slide-pause) {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
}
body .hero.photo-hero .hero-dot { width: 22px; height: 30px; }

/* Announcements becomes a compact companion to Church Helper instead of a tall side banner. */
body .announcement-edge-tab {
  top: auto;
  right: 88px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #e2ad3a70;
  border-radius: 50%;
  background: #0c2032f2;
  box-shadow: 0 10px 26px -10px #0c2032a6;
}
body .announcement-edge-tab .announcement-edge-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
body .announcement-edge-tab svg { width: 22px; height: 22px; }
body .announcement-edge-tab:hover { transform: translateY(-2px); background: #173b58; }
@media(max-width:620px) {
  body .announcement-edge-tab { right: 76px; bottom: 16px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  body .announcement-edge-tab svg { width: 19px; height: 19px; }
}

/* Live calendar summary in the hero, with a month drawer that opens inward. */
body .hero.photo-hero .hero-program-card { overflow: visible; }
body .hero.photo-hero .hero-program-card h2 { margin-bottom: 14px; }
body .hero-program-list,
body .hero-monthly-events ul { margin: 0; padding: 0; list-style: none; }
body .hero-program-list li,
body .hero-monthly-events li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid #ffffff1f;
}
body .hero-program-list li>span,
body .hero-monthly-events li>span { min-width: 0; }
body .hero-program-list strong,
body .hero-monthly-events strong { display: block; color: #fff; font-size: 13px; line-height: 1.25; }
body .hero-program-list small,
body .hero-monthly-events small { display: block; margin-top: 2px; color: #9fb6c8; font-size: 10px; }
body .hero-program-list time,
body .hero-monthly-events time { color: #f2c963; font-size: 12px; font-weight: 700; white-space: nowrap; }
body .hero-program-card>.hero-cross { margin-bottom: 22px; }
body .hero-monthly-events { position: absolute; top: 50%; right: -54px; transform: translateY(-50%); z-index: 4; }
body .hero-monthly-events>summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 150px;
  padding: 12px 8px;
  border: 1px solid #e2ad3a70;
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: #0b2b43f2;
  color: #f2c963;
  cursor: pointer;
  list-style: none;
  box-shadow: 10px 10px 24px -18px #000;
}
body .hero-monthly-events>summary::-webkit-details-marker { display: none; }
body .hero-monthly-events>summary span:first-child { writing-mode: vertical-rl; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
body .hero-monthly-events>summary span:last-child { position: absolute; bottom: 10px; font-size: 17px; }
body .hero-monthly-events[open]>summary span:last-child { transform: rotate(45deg); }
body .hero-monthly-events>div {
  position: absolute;
  top: 50%;
  right: 44px;
  width: 300px;
  max-height: 440px;
  overflow: auto;
  transform: translateY(-50%);
  padding: 18px;
  border: 1px solid #e2ad3a70;
  border-radius: 14px 0 0 14px;
  background: #071b2afa;
  box-shadow: 0 24px 48px -20px #000;
}
body .hero-monthly-events>div>a { display: flex; justify-content: space-between; margin-top: 12px; color: #f2c963; font-size: 12px; font-weight: 700; text-decoration: none; }
@media(max-width:1100px) {
  body .hero-monthly-events { position: static; transform: none; margin-top: 14px; }
  body .hero-monthly-events>summary { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #e2ad3a52; border-radius: 8px; justify-content: space-between; }
  body .hero-monthly-events>summary span:first-child { writing-mode: horizontal-tb; }
  body .hero-monthly-events>summary span:last-child { position: static; }
  body .hero-monthly-events>div { position: static; width: auto; max-height: 300px; transform: none; margin-top: 8px; border-radius: 8px; box-shadow: none; }
}

/* Open-Bible schedule: weekly program on the left page, month drawer on the right. */
@media(min-width:1101px) {
  body .hero.photo-hero .hero-inner { grid-template-columns: minmax(0,1fr) minmax(500px,560px); column-gap: clamp(38px,5vw,78px); }
  body .hero.photo-hero .hero-welcome h1 { font-size: clamp(38px,3.7vw,56px); }
}
body .hero.photo-hero .hero-program-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 0;
  width: min(100%,560px);
  max-width: 560px;
  min-width: 0;
  margin: 0;
  padding: 26px 0 20px;
  overflow: hidden;
  border: 1px solid #d6c59b;
  border-radius: 46% 46% 18px 18px / 34px 34px 18px 18px;
  background:
    linear-gradient(90deg,#f4eddc 0%,#fffaf0 48.5%,#d7caa8 49.7%,#c4b184 50%,#d7caa8 50.3%,#fffaf0 51.5%,#f4eddc 100%);
  color: #10283c;
  box-shadow: 0 26px 60px -30px #000, inset 0 1px #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .hero.photo-hero .hero-program-card::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 34%;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0c203228;
  filter: blur(7px);
  pointer-events: none;
}
body .hero.photo-hero .hero-program-card>.hero-cross,
body .hero.photo-hero .hero-program-card>p,
body .hero.photo-hero .hero-program-card>h2,
body .hero.photo-hero .hero-program-card>.hero-program-list,
body .hero.photo-hero .hero-program-card>a { grid-column: 1; margin-left: 26px; margin-right: 26px; }
body .hero.photo-hero .hero-program-card>.hero-cross {
  grid-row: 1;
  width: 2px;
  height: 28px;
  margin-top: 0;
  margin-bottom: 12px;
  justify-self: center;
  background: #b17a18;
}
body .hero.photo-hero .hero-program-card>.hero-cross::after { top: 9px; left: -8px; width: 18px; background: #b17a18; }
body .hero.photo-hero .hero-program-card>p {
  grid-row: 2;
  margin-bottom: 5px;
  color: #8b641d;
  font-size: 9px;
  letter-spacing: .12em;
}
body .hero.photo-hero .hero-program-card>h2 {
  grid-row: 3;
  align-self: start;
  margin-bottom: 12px;
  color: #10283c;
  font-size: 21px;
}
body .hero.photo-hero .hero-program-card>.hero-program-list { grid-row: 4; align-self: start; }
body .hero.photo-hero .hero-program-card>.hero-program-list li { gap: 10px; padding: 8px 0; border-color: #10283c1c; }
body .hero.photo-hero .hero-program-card>.hero-program-list strong { color: #10283c; font-size: 11.5px; }
body .hero.photo-hero .hero-program-card>.hero-program-list small { color: #64717b; font-size: 9px; }
body .hero.photo-hero .hero-program-card>.hero-program-list time { color: #986b18; font-size: 10.5px; text-align: right; }
body .hero.photo-hero .hero-program-card>a {
  grid-row: 5;
  margin-top: 10px;
  color: #10283c;
  font-size: 11px;
}
body .hero.photo-hero .hero-program-card>a:hover { color: #986b18; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events {
  grid-column: 2;
  grid-row: 1/6;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 26px;
}
body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  width: 100%;
  min-height: 100%;
  padding: 24px;
  border: 1px dashed #a98b4d70;
  border-radius: 46% 46% 12px 12px / 28px 28px 12px 12px;
  background: #ffffff4d;
  color: #10283c;
  box-shadow: none;
}
body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary::before {
  content: 'Monthly events';
  color: #8b641d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary span:first-child {
  writing-mode: horizontal-tb;
  color: #10283c;
  font: 500 23px/1.15 Newsreader,Georgia,serif;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}
body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary span:last-child {
  position: static;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #a47a28;
  border-radius: 50%;
  color: #8b641d;
}
body .hero.photo-hero .hero-program-card>.hero-monthly-events>div {
  position: static;
  width: auto;
  max-height: 310px;
  transform: none;
  margin-top: 10px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary { min-height: auto; padding: 10px; border-radius: 10px; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary::before { display: none; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary span:first-child { font-size: 18px; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events li { padding: 7px 0; border-color: #10283c1c; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events strong { color: #10283c; font-size: 11px; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events small { color: #64717b; font-size: 9px; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events time { color: #986b18; font-size: 10px; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events>div>a { color: #8b641d; }
@media(min-width:701px) and (max-width:1100px) {
  body .hero.photo-hero .hero-program-card { width: min(100%,620px); max-width: 620px; }
}
@media(max-width:700px) {
  body .hero.photo-hero .hero-program-card {
    display: block;
    width: 100%;
    max-width: 520px;
    padding: 24px 20px 20px;
    border-radius: 30px 30px 14px 14px;
    background: linear-gradient(100deg,#fffaf0,#f3ead6);
  }
  body .hero.photo-hero .hero-program-card>.hero-cross,
  body .hero.photo-hero .hero-program-card>p,
  body .hero.photo-hero .hero-program-card>h2,
  body .hero.photo-hero .hero-program-card>.hero-program-list,
  body .hero.photo-hero .hero-program-card>a { margin-left: 0; margin-right: 0; }
  body .hero.photo-hero .hero-program-card>.hero-cross { margin-inline: auto; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events { margin-top: 16px; padding: 0; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary { min-height: 48px; display: flex; justify-content: space-between; padding: 0 14px; border-radius: 10px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary::before { display: none; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary span:first-child { font: 700 12px/1.2 'DM Sans',sans-serif; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary span:last-child { width: 28px; height: 28px; }
}

/* Five-second page turn. The right sheet pivots from the book's center seam. */
body .hero.photo-hero .hero-program-card { perspective: 1400px; }
body .hero.photo-hero .hero-program-card>.hero-monthly-events {
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
body .hero.photo-hero .hero-program-card.is-flipping>.hero-monthly-events { animation: hero-book-turn .72s cubic-bezier(.55,.08,.25,1); }
@keyframes hero-book-turn {
  0% { transform: rotateY(0); filter: brightness(1); }
  48% { transform: rotateY(-82deg); filter: brightness(.72); }
  52% { transform: rotateY(-82deg); filter: brightness(.72); }
  100% { transform: rotateY(0); filter: brightness(1); }
}
body .hero.photo-hero .hero-program-card.is-flipping::after {
  content: '';
  position: absolute;
  inset: 12px 0 12px 50%;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(90deg,#10283c2e,transparent 34%);
  animation: hero-book-shadow .72s ease;
}
@keyframes hero-book-shadow { 0%,100% { opacity: 0; } 45%,55% { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  body .hero.photo-hero .hero-program-card.is-flipping>.hero-monthly-events,
  body .hero.photo-hero .hero-program-card.is-flipping::after { animation: none; }
}
@media(max-width:700px) {
  body .hero.photo-hero .hero-program-card { perspective: none; }
  body .hero.photo-hero .hero-program-card.is-flipping>.hero-monthly-events { animation: hero-book-mobile .36s ease; }
  @keyframes hero-book-mobile { 0%,100% { opacity: 1; transform: translateY(0); } 50% { opacity: .35; transform: translateY(4px); } }
  body .hero.photo-hero .hero-program-card.is-flipping::after { display: none; }
}

/* A literal page turn: fixed-size book, cover sheet rotating around the spine. */
@media(min-width:701px) {
  body .hero.photo-hero .hero-program-card {
    height: 430px;
    min-height: 430px;
    max-height: 430px;
    overflow: visible;
    perspective: 1800px;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events {
    position: relative;
    height: 100%;
    min-height: 0;
    padding: 0;
    transform: none;
    transform-style: preserve-3d;
    overflow: visible;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary {
    position: absolute;
    inset: 24px 24px 24px 20px;
    z-index: 3;
    width: auto;
    min-height: 0;
    transform: rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform .9s cubic-bezier(.64,.02,.28,1),box-shadow .9s ease;
    will-change: transform;
    box-shadow: -8px 8px 20px -18px #10283c70;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary {
    min-height: 0;
    padding: 24px;
    border-radius: 46% 46% 12px 12px / 28px 28px 12px 12px;
    transform: rotateY(-180deg);
    box-shadow: 18px 10px 28px -16px #10283c80;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open].is-closing>summary {
    transform: rotateY(0deg);
    box-shadow: -8px 8px 20px -18px #10283c70;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary::before { display: block; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary span:first-child { font-size: 23px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>div {
    position: absolute;
    inset: 22px 24px 22px 24px;
    z-index: 1;
    display: none;
    width: auto;
    max-height: none;
    overflow: hidden;
    margin: 0;
    padding: 8px 4px 0;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>div {
    display: block !important;
    visibility: visible;
    opacity: 1;
    background: #f8f0df;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events li:nth-child(n+6) { display: none; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events li { padding: 8px 0; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>div>a { margin-top: 10px; }
  body .hero.photo-hero .hero-program-card.is-flipping>.hero-monthly-events,
  body .hero.photo-hero .hero-program-card.is-flipping::after { animation: none; }
}
@media(prefers-reduced-motion:reduce) {
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary { transition: none; }
}
@media(max-width:700px) {
  body .hero.photo-hero .hero-program-card { height: auto; min-height: 0; max-height: none; overflow: hidden; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary { transition: background-color .18s ease; }
}

/* Compact book proportions: previews stay scannable and defer detail to their full pages. */
@media(min-width:1101px) {
  body .hero.photo-hero .hero-inner { grid-template-columns: minmax(0,1fr) minmax(390px,420px); }
}
@media(min-width:701px) {
  body .hero.photo-hero .hero-program-card {
    width: min(100%,420px);
    max-width: 420px;
    height: 310px;
    min-height: 310px;
    max-height: 310px;
    justify-self: end;
    padding-top: 20px;
    padding-bottom: 15px;
  }
  body .hero.photo-hero .hero-program-card>.hero-cross,
  body .hero.photo-hero .hero-program-card>p,
  body .hero.photo-hero .hero-program-card>h2,
  body .hero.photo-hero .hero-program-card>.hero-program-list,
  body .hero.photo-hero .hero-program-card>a { margin-left: 20px; margin-right: 20px; }
  body .hero.photo-hero .hero-program-card>.hero-cross { height: 22px; margin-bottom: 7px; }
  body .hero.photo-hero .hero-program-card>.hero-cross::after { top: 7px; }
  body .hero.photo-hero .hero-program-card>p { margin-bottom: 3px; font-size: 8px; }
  body .hero.photo-hero .hero-program-card>h2 { margin-bottom: 7px; font-size: 18px; }
  body .hero.photo-hero .hero-program-card>.hero-program-list li { padding: 7px 0; }
  body .hero.photo-hero .hero-program-card>.hero-program-list strong { font-size: 10.5px; }
  body .hero.photo-hero .hero-program-card>.hero-program-list time { font-size: 9.5px; }
  body .hero.photo-hero .hero-program-card>a { margin-top: 7px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary { inset: 19px 19px 19px 16px; padding: 18px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>summary span:first-child { font-size: 20px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events>div { inset: 16px 20px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events li:nth-child(n+5) { display: none; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events li { padding: 6px 0; }
}
@media(min-width:701px) and (max-width:1100px) {
  body .hero.photo-hero .hero-program-card { width: min(100%,420px); max-width: 420px; }
}

/* Announcements bell belongs to the right edge rail, separate from bottom utilities. */
body .announcement-edge-tab,
body .announcement-edge-tab:where(:hover,:focus-visible) {
  position: fixed;
  top: 50%;
  right: 0;
  bottom: auto;
  width: 52px;
  height: 62px;
  min-width: 52px;
  min-height: 62px;
  transform: translateY(-50%);
  border-right: 0;
  border-radius: 14px 0 0 14px;
}
body .announcement-edge-tab:hover { transform: translateY(-50%); }
body .announcement-edge-tab::after {
  content: '';
  position: absolute;
  right: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: #e2ad3a;
}
@media(max-width:700px) {
  body .announcement-edge-tab,
  body .announcement-edge-tab:where(:hover,:focus-visible) {
    top: 48%;
    right: 0;
    bottom: auto;
    width: 46px;
    height: 54px;
    min-width: 46px;
    min-height: 54px;
    transform: translateY(-50%);
    border-radius: 12px 0 0 12px;
  }
  body .announcement-edge-tab:hover { transform: translateY(-50%); }
}

/* The compact weekly book previews two events per page and keeps the opened page contained. */
@media (min-width:701px) {
  body .hero.photo-hero .hero-program-card {
    grid-template-rows: 25px 16px 50px minmax(0,1fr) 24px;
  }
  body .hero.photo-hero .hero-program-card>.hero-program-list { min-height: 0; overflow: hidden; }
  body .hero.photo-hero .hero-program-card>.hero-program-list li { padding: 6px 0; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events { height: 100%; overflow: hidden; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary {
    inset: 10px 14px auto 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid #d6c59b;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary::before { display: none; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary span:first-child { font-size: 15px; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary span:last-child { width: 26px; height: 26px; font-size: 0; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>summary span:last-child::after { content: '?'; font: 18px/1 Arial,sans-serif; }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events[open]>div {
    inset: 48px 14px 14px;
    padding: 0 2px;
    background: transparent;
  }
  body .hero.photo-hero .hero-program-card>.hero-monthly-events li { padding: 5px 0; }
}

/* Compact updates hub behind the fixed bell. */
body .announcement-edge-tab .updates-badge { position: absolute; top: -9px; left: -9px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border: 2px solid #0c2032; border-radius: 999px; background: #e2ad3a; color: #0c2032; font: 700 11px/1 'DM Sans',sans-serif; writing-mode: horizontal-tb; letter-spacing: 0; }
body .announcement-edge-tab .updates-badge[hidden] { display: none; }
html body .announcement-drawer.announcement-drawer .updates-drawer-content { min-height: 100%; background: #0c2032; color: #edf4f8; }
html body .announcement-drawer.announcement-drawer .updates-header { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 29px 56px 22px 24px; border-top: 3px solid #e2ad3a; border-bottom: 1px solid #2a4760; }
html body .announcement-drawer.announcement-drawer .updates-heading-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #e2ad3a66; border-radius: 50%; color: #e2ad3a; }
html body .announcement-drawer.announcement-drawer .updates-heading-icon svg { width: 21px; height: 21px; }
html body .announcement-drawer.announcement-drawer .updates-header .board-kicker { margin: 0 0 6px; color: #e2ad3a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
html body .announcement-drawer.announcement-drawer .updates-header h2 { margin: 0; color: #fff; font: 500 30px/1.15 Newsreader,Georgia,serif; }
html body .announcement-drawer.announcement-drawer .updates-header p:last-of-type { margin: 8px 0 0; color: #b8cfdf; font-size: 13px; line-height: 1.5; }
html body .announcement-drawer.announcement-drawer .updates-header .announcement-close { position: absolute; top: 20px; right: 17px; }
html body .announcement-drawer.announcement-drawer .updates-tabs { display: flex; gap: 7px; padding: 18px 20px 10px; }
html body .announcement-drawer.announcement-drawer .updates-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid #2a4760; border-radius: 8px; background: #122c42; color: #d5e5ee; font: 700 12px/1.2 'DM Sans',sans-serif; cursor: pointer; }
html body .announcement-drawer.announcement-drawer .updates-tabs button[aria-selected=true] { border-color: #e2ad3a; background: #19384f; color: #fff; }
html body .announcement-drawer.announcement-drawer .updates-tabs button span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #2a4760; color: #fff; font-size: 11px; }
html body .announcement-drawer.announcement-drawer .updates-panel { display: grid; align-content: start; gap: 12px; padding: 12px 20px 24px; }
html body .announcement-drawer.announcement-drawer .updates-panel[hidden] { display: none; }
html body .announcement-drawer.announcement-drawer .updates-card,html body .announcement-drawer.announcement-drawer .updates-event { display: block; padding: 18px; border: 1px solid #2a4760; border-radius: 12px; background: #122c42; text-decoration: none; }
html body .announcement-drawer.announcement-drawer .updates-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #e2ad3a; font-size: 11px; font-weight: 700; }
html body .announcement-drawer.announcement-drawer .updates-card-meta .board-date { display: inline-flex; align-items: baseline; gap: 4px; color: #e2ad3a; }
html body .announcement-drawer.announcement-drawer .updates-card-meta .board-date strong { color: inherit; font-size: 15px; }
html body .announcement-drawer.announcement-drawer .updates-important { padding: 3px 7px; border-radius: 99px; background: #e2ad3a; color: #0c2032; }
html body .announcement-drawer.announcement-drawer .updates-card h3 { margin: 0 0 7px; color: #fff; font-size: 18px; line-height: 1.3; }
html body .announcement-drawer.announcement-drawer .updates-card p { margin: 0; color: #b8cfdf; font-size: 13px; line-height: 1.6; white-space: pre-line; }
html body .announcement-drawer.announcement-drawer .updates-card img { display: block; width: 100%; max-height: 170px; object-fit: cover; margin-top: 12px; border-radius: 7px; }
html body .announcement-drawer.announcement-drawer .updates-card>a { display: inline-block; margin-top: 12px; color: #e2ad3a; font-size: 12px; font-weight: 700; }
html body .announcement-drawer.announcement-drawer .updates-event { display: grid; grid-template-columns: 66px minmax(0,1fr) 16px; gap: 3px 10px; align-items: center; color: #edf4f8; }
html body .announcement-drawer.announcement-drawer .updates-event:hover { border-color: #e2ad3a; background: #19384f; }
html body .announcement-drawer.announcement-drawer .updates-event-date { grid-row: 1/3; color: #e2ad3a; font-size: 11px; font-weight: 700; }
html body .announcement-drawer.announcement-drawer .updates-event strong { overflow-wrap: anywhere; color: #fff; font-size: 14px; }
html body .announcement-drawer.announcement-drawer .updates-event small { grid-column: 2; color: #b8cfdf; font-size: 11px; }
html body .announcement-drawer.announcement-drawer .updates-event-arrow { grid-column: 3; grid-row: 1/3; color: #e2ad3a; }
html body .announcement-drawer.announcement-drawer .updates-empty { margin: 0; padding: 24px 16px; border: 1px dashed #2a4760; border-radius: 10px; color: #b8cfdf; font-size: 13px; line-height: 1.5; }
html body .announcement-drawer.announcement-drawer .updates-more { display: inline-block; justify-self: start; margin: 7px 0; color: #e2ad3a; font-size: 13px; font-weight: 700; }
html body .announcement-drawer.announcement-drawer .updates-footer { display: flex; flex-wrap: wrap; gap: 9px 20px; padding: 20px; border-top: 1px solid #2a4760; }
html body .announcement-drawer.announcement-drawer .updates-footer a { color: #e2ad3a; font-size: 12px; font-weight: 700; text-decoration: none; }
html body .announcement-drawer.announcement-drawer :is(.updates-tabs button,.updates-event,.updates-footer a,.updates-card a):focus-visible { outline: 2px solid #e2ad3a; outline-offset: 2px; }
@media(max-width:470px) { html body .announcement-drawer.announcement-drawer .updates-tabs button { font-size: 11px; padding: 8px; } html body .announcement-drawer.announcement-drawer .updates-header { padding-left: 17px; } html body .announcement-drawer.announcement-drawer .updates-panel { padding-inline: 14px; } }

/* Keep the bell with the other page tools, clear of hero content. */
body .announcement-edge-tab,body .announcement-edge-tab:where(:hover,:focus-visible) { top: auto; right: 22px; bottom: 96px; width: 54px; height: 54px; min-width: 54px; min-height: 54px; padding: 0; border: 1px solid #b6934f; border-radius: 50%; transform: none; }
body .announcement-edge-tab:hover { transform: translateY(-2px); }
body .announcement-edge-tab::after { display: none; }
body .announcement-edge-tab .announcement-edge-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media(max-width:700px) { body .announcement-edge-tab,body .announcement-edge-tab:where(:hover,:focus-visible) { top: auto; right: 16px; bottom: 82px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; transform: none; border-radius: 50%; } body .announcement-edge-tab:hover { transform: translateY(-2px); } }