html:has(#page-community:not([hidden]),#page-announcements:not([hidden]),#page-hall:not([hidden]),#page-donors:not([hidden]),#page-staff:not([hidden]),#page-resources:not([hidden])),body:has(#page-community:not([hidden]),#page-announcements:not([hidden]),#page-hall:not([hidden]),#page-donors:not([hidden]),#page-staff:not([hidden]),#page-resources:not([hidden])) {background:#000!important;color-scheme:dark}
body:has(#page-community:not([hidden]),#page-announcements:not([hidden]),#page-hall:not([hidden]),#page-donors:not([hidden]),#page-staff:not([hidden]),#page-resources:not([hidden])) #site-back-wrap {position:absolute!important;z-index:3}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero {
 background:#000!important;text-align:center;position:relative;isolation:isolate;
 padding:min(24vw,288px) 16px 10px!important;
}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero::before {
 content:"";position:absolute;inset:0;z-index:-1;
 background-image:var(--lunar-header-art)!important;
 background-position:center top;background-size:min(100%,1200px) auto;background-repeat:no-repeat;
}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero h1 {
 font:500 clamp(36px,4.2vw,50px)/1.05 Georgia,serif!important;color:#f4f1ed!important;
 margin:0 0 16px!important;
}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero > p {
 font:16px/1.45 Georgia,serif!important;color:#f4f1ed!important;margin:0!important;
}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero .guides-moon-phases {
 display:flex;align-items:center;justify-content:center;gap:9px;margin:13px auto 16px;color:#e5dfcb!important;
}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero .guides-moon-phases svg {width:14px;height:14px;flex:none}
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero .guides-moon-phases::before,
body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero .guides-moon-phases::after {
 content:"";width:clamp(28px,5vw,60px);height:1px;background:#a49c86!important;
}
@media(max-width:760px){
 body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero::before {background-size:100% auto}
}
#page-community{--lunar-header-art:url('/assets/page-headers/community.webp')}
#page-announcements{--lunar-header-art:url('/assets/page-headers/announcements.webp')}
#page-hall{--lunar-header-art:url('/assets/page-headers/hall.webp')}
#page-donors{--lunar-header-art:url('/assets/page-headers/donors.webp')}
#page-staff{--lunar-header-art:url('/assets/page-headers/staff.webp')}
#page-resources{--lunar-header-art:url('/assets/page-headers/resources.webp')}

/* Keep the artwork uncropped and place the text below its illuminated area. */
body #page-home .hero,
body #page-guides .guides-overview-hero,
body #page-events .guides-overview-hero {
 padding-top:min(24vw,288px)!important;
 background-size:min(100%,1200px) auto!important;
 background-position:center top!important;
}

/* All primary headers share one artwork frame and pure-black transitions. */
html:has(#page-home:not([hidden]),#page-guides:not([hidden]),#page-community:not([hidden]),#page-events:not([hidden]),#page-announcements:not([hidden]),#page-hall:not([hidden]),#page-donors:not([hidden]),#page-staff:not([hidden]),#page-resources:not([hidden])),body:has(#page-home:not([hidden]),#page-guides:not([hidden]),#page-community:not([hidden]),#page-events:not([hidden]),#page-announcements:not([hidden]),#page-hall:not([hidden]),#page-donors:not([hidden]),#page-staff:not([hidden]),#page-resources:not([hidden])) {background:#000!important}
html body > header {
 background:#000!important;border-bottom:0!important;box-shadow:none!important;
}
html body > header nav {background:#000!important}
html body > header nav a,html body > header .brand,html body > header .header-actions a {
 color:#f4f1ed!important;
}
body :is(#page-home,#page-guides,#page-community,#page-events,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) {background-color:#000!important}
body #page-home .hero,body #page-guides .guides-overview-hero,body #page-events .guides-overview-hero,body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero {
 position:relative;isolation:isolate;background:#000!important;
 border:0!important;
}
body #page-home .hero::before,body #page-guides .guides-overview-hero::before,body #page-events .guides-overview-hero::before,body :is(#page-community,#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .eclipse-lunar-hero::before {
 content:"";display:block!important;position:absolute;inset:0 auto auto 50%;
 transform:translateX(-50%);width:min(100%,1200px);aspect-ratio:3/1;
 height:auto;z-index:-1;pointer-events:none;opacity:1;
 background-image:linear-gradient(0deg,#000,transparent 22%),
 linear-gradient(90deg,#000,transparent 4%,transparent 96%,#000),
 linear-gradient(180deg,#000,transparent 4%),var(--lunar-header-art)!important;
 background-position:center;background-size:100% 100%;background-repeat:no-repeat;
}
body #page-home .hero {padding-top:min(21.5vw,258px)!important}
#page-home{--lunar-header-art:url('/assets/page-headers/home.webp')}
#page-guides{--lunar-header-art:url('/assets/page-headers/guides.webp')}
#page-events{--lunar-header-art:url('/assets/page-headers/events.webp')}

/* Homepage cards share their destination artwork. */
body #page-home .panel {background:#000!important}
body #page-home .panel:nth-child(1) {--panel-art:url('/assets/page-headers/guides.webp')}
body #page-home .panel:nth-child(2) {--panel-art:url('/assets/page-headers/events.webp')}
body #page-home .panel:nth-child(3) {--panel-art:url('/assets/page-headers/community.webp')}
body #page-home .panel::before,
body #page-home .panel:first-child::before {
 background-color:#000!important;
 background-image:linear-gradient(0deg,#000,transparent 28%),var(--panel-art)!important;
 background-position:center top!important;
 background-size:auto 100%!important;
 background-repeat:no-repeat!important;
 filter:none!important;
}