/* Homepage-only Eclipse Mist. All other routes retain the protected foundation. */
html:has(#page-home:not([hidden])),body:has(#page-home:not([hidden])){background:#000!important;color:#f4f1ed!important;color-scheme:dark!important}
body:has(#page-home:not([hidden])){font-family:Georgia,'Times New Roman',serif!important;min-height:100vh}
body:has(#page-home:not([hidden])) header{background:#030303!important;border-color:#504a44!important;padding:14px 5%;position:relative;box-shadow:none!important}
body:has(#page-home:not([hidden])) header *{color:#f4f1ed!important;font-family:Georgia,'Times New Roman',serif!important}
body:has(#page-home:not([hidden])) .brand{font-style:italic;font-weight:normal;font-size:27px}
body:has(#page-home:not([hidden])) nav a{font-size:16px}
body:has(#page-home:not([hidden])) nav a[aria-current=page]{text-decoration:underline;text-decoration-color:#a68aa6!important;text-underline-offset:8px;text-decoration-thickness:2px}
body:has(#page-home:not([hidden])) .header-actions a{width:32px;height:32px;border-color:#aaa39b!important}
body #page-home{background:#000!important;color:#f4f1ed!important;max-width:1440px;margin:auto}
body #page-home *{color:inherit!important;font-family:Georgia,'Times New Roman',serif!important}
body #page-home .hero{background-color:#000!important;background-image:linear-gradient(0deg,#000 0%,transparent 52%),url('assets/homepage/eclipse-hero.webp')!important;background-repeat:no-repeat!important;background-position:center top!important;background-size:100% auto!important;min-height:470px;padding:178px 24px 24px;border:0!important;isolation:isolate}
body #page-home .hero::before{display:none!important}
body #page-home .hero h1{font-size:clamp(44px,5.6vw,76px);font-weight:normal;line-height:1.12;margin:0 0 12px;letter-spacing:0!important}
body #page-home .moon-phases{display:flex!important;align-items:center;justify-content:center;gap:12px;margin:12px auto 16px;color:#e5ddc6!important;font-size:22px;line-height:1}
body #page-home .moon-phases::before,body #page-home .moon-phases::after{content:'';width:90px;height:1px;background:#a59b80!important}
body #page-home .hero p{font-size:17px;margin:16px 0 0;line-height:1.5}
body #page-home .actions{margin-top:27px;gap:18px}
body #page-home .actions a,body #page-home .panel a.more{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#080808!important;border:1px solid #b9b3a8!important;border-radius:30px!important;padding:10px 20px;font-size:14px;text-decoration:none;line-height:1.3}
body #page-home .actions a:hover,body #page-home .panel a.more:hover{background:#302333!important;border-color:#bb9bb9!important}
body #page-home .panels{max-width:1240px;padding:0 24px 30px;margin:8px auto 0;gap:24px}
body #page-home .panel{position:relative;overflow:hidden;background:#050505!important;border:1px solid #918778!important;border-radius:12px!important;padding:135px 23px 24px;min-height:345px;text-align:center}
body #page-home .panel::before{content:'';position:absolute;top:0;left:0;right:0;height:135px;background-image:linear-gradient(0deg,#050505,transparent 65%),var(--panel-art)!important;background-size:cover!important;background-position:center!important;pointer-events:none}
body #page-home .panel:nth-child(1){--panel-art:url('assets/homepage/announcements-half-moon.webp')}
body #page-home .panel:nth-child(2){--panel-art:url('lunar-card-2.jpg')}
body #page-home .panel:nth-child(3){--panel-art:url('lunar-card-3.jpg')}
body #page-home .panel h2{font-size:24px;font-weight:normal;line-height:1.25;margin:5px 0 18px}
body #page-home .panel li{font-size:14px;border-color:#48423d!important;padding:10px 0;line-height:1.5}
body #page-home .panel ul{margin-bottom:18px}
body #page-home .placeholder{background:#2b202f!important;border:1px solid #79647c!important;border-radius:8px;padding:18px 12px;font-size:14px;line-height:1.5}
body #page-home .panel a.more{align-self:center;font-size:12px;padding:8px 13px;margin-top:auto}
body:has(#page-home:not([hidden])) footer{background:#000!important;color:#aaa39b!important;font-family:Georgia,serif!important}
body #page-home a:focus-visible{outline:2px solid #c6a4ca!important;outline-offset:4px}
@media(min-width:1440px){body #page-home .hero{background-size:1440px auto!important}}
@media(max-width:850px){body:has(#page-home:not([hidden])) header{padding:14px 24px}body:has(#page-home:not([hidden])) header nav{justify-content:center;width:100%}body #page-home .hero{padding-top:135px;min-height:390px;background-size:auto 320px!important}body #page-home .panels{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 16px 25px}body #page-home .panel{padding:110px 12px 20px}body #page-home .panel h2{font-size:20px}body #page-home .panel::before{height:110px}}
@media(max-width:620px){body #page-home .hero{padding:140px 18px 26px}body #page-home .hero p{font-size:15px}body #page-home .actions{gap:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}body #page-home .actions a{padding:10px 8px;font-size:12px}body #page-home .panels{grid-template-columns:1fr;max-width:440px;gap:20px}body #page-home .panel{min-height:310px;padding-top:135px}body #page-home .panel::before{height:135px}body #page-home .moon-phases{font-size:18px;gap:8px}body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:45px}}

/* Center the crescent itself, rather than the asymmetric source image. */
body #page-home .panel:first-child::before{background-position:calc(50% - 78px) center!important;background-size:auto 135px!important}
@media(min-width:621px) and (max-width:850px){body #page-home .panel:first-child::before{background-position:calc(50% - 64px) center!important;background-size:auto 110px!important}}

/* Requested homepage spacing adjustments. */
body #page-home .hero{padding-top:243px;min-height:535px}
body #page-home .panels{margin-top:48px}
@media(max-width:850px){body #page-home .hero{padding-top:180px;min-height:435px}}
@media(max-width:620px){body #page-home .hero{padding-top:185px}}

body #page-home .panel:first-child::before{background-position:center!important;background-size:cover!important}

/* Refine title breathing room and bring cards closer to the action row. */
body #page-home .hero{min-height:0;padding-bottom:12px}
body #page-home .hero h1{margin-bottom:30px}
body #page-home .hero p{margin-top:24px}
body #page-home .panels{margin-top:16px}

/* Match the supplied November 3 homepage reference. */
body #page-home{max-width:1536px}
body:has(#page-home:not([hidden])) header{padding:12px 4.2%;min-height:74px}
body:has(#page-home:not([hidden])) .brand{font-size:clamp(25px,2.5vw,38px)}
body:has(#page-home:not([hidden])) nav{gap:clamp(24px,4vw,60px)}
body:has(#page-home:not([hidden])) nav a{font-size:clamp(16px,1.65vw,25px)}
body:has(#page-home:not([hidden])) .header-actions a{width:46px;height:46px}
body:has(#page-home:not([hidden])) .header-actions svg{width:25px;height:25px}
body #page-home .hero{padding:clamp(185px,18vw,276px) 24px 10px;background-size:100% auto!important;background-position:center top!important}
body #page-home .hero h1{font-size:clamp(45px,6vw,92px);line-height:1.05;margin:0 0 16px}
body #page-home .moon-phases{font-size:clamp(22px,2.3vw,35px);gap:clamp(12px,1.5vw,23px);margin:16px auto 20px;color:#f5f3ec!important}
body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:clamp(65px,10vw,150px);background:#d7d3c7!important}
body #page-home .hero p{font-size:clamp(16px,1.8vw,27px);margin:20px 0 0;line-height:1.4}
body #page-home .actions{gap:clamp(12px,2.6vw,40px);margin-top:26px}
body #page-home .actions a{font-size:clamp(14px,1.55vw,23px);padding:12px 25px;min-width:18%;gap:14px}
body #page-home .actions svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
body #page-home .panels{max-width:1424px;margin-top:22px;gap:26px;padding:0 24px 30px}
body #page-home .panel{min-height:335px;padding:138px 24px 25px;border-radius:0!important;border-color:#b8b3aa!important;background:#050505!important}
body #page-home .panel:nth-child(1){--panel-art:url('assets/homepage/reference-announcements.webp')}
body #page-home .panel:nth-child(2){--panel-art:url('assets/homepage/reference-events.webp')}
body #page-home .panel:nth-child(3){--panel-art:url('assets/homepage/reference-community.webp')}
body #page-home .panel::before,body #page-home .panel:first-child::before{height:142px;background-position:center top!important;background-size:100% auto!important;background-repeat:no-repeat!important}
body #page-home .panel h2{font-size:clamp(23px,2.1vw,32px);margin:3px 0 20px}
body #page-home .panel li{font-size:clamp(15px,1.5vw,22px);padding:9px 0}
body #page-home .placeholder{font-size:clamp(15px,1.5vw,22px);padding:20px 12px;background:#251f29!important;border-color:#776578!important;border-radius:14px}
body #page-home .panel a.more{font-size:12px}
@media(max-width:850px){body:has(#page-home:not([hidden])) header{padding:12px 24px}body #page-home .hero{padding-top:205px;background-size:auto 350px!important}body #page-home .panels{gap:14px}body #page-home .panel{padding:105px 14px 20px}body #page-home .panel::before,body #page-home .panel:first-child::before{height:110px;background-size:cover!important}body #page-home .actions a{padding:10px 14px;min-width:0}body #page-home .actions svg{width:22px;height:22px}}
@media(max-width:620px){body #page-home .hero{padding-top:205px}body #page-home .panels{margin-top:18px}body #page-home .panel{padding-top:138px}body #page-home .panel::before,body #page-home .panel:first-child::before{height:142px}body #page-home .actions a{padding:10px 8px;font-size:12px}body #page-home .actions svg{width:19px;height:19px}body:has(#page-home:not([hidden])) nav{gap:18px}}

body #page-home .moon-phases svg{width:clamp(20px,2.4vw,37px);height:clamp(20px,2.4vw,37px);flex:none}

/* Reduce supporting elements on large screens; retain hero title and artwork. */
@media(min-width:851px){
body:has(#page-home:not([hidden])) header{min-height:60px;padding:10px 4.2%}
body:has(#page-home:not([hidden])) .brand{font-size:28px}
body:has(#page-home:not([hidden])) nav{gap:36px}
body:has(#page-home:not([hidden])) nav a{font-size:17px}
body:has(#page-home:not([hidden])) .header-actions a{width:34px;height:34px}
body:has(#page-home:not([hidden])) .header-actions svg{width:20px;height:20px}
body #page-home .moon-phases{gap:16px}
body #page-home .moon-phases svg{width:26px;height:26px}
body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:110px}
body #page-home .hero p{font-size:19px}
body #page-home .actions{gap:24px}
body #page-home .actions a{font-size:16px;padding:10px 22px;min-width:0;gap:10px}
body #page-home .actions svg{width:22px;height:22px}
body #page-home .panels{max-width:1180px;gap:22px}
body #page-home .panel{min-height:285px;padding:115px 20px 22px}
body #page-home .panel::before,body #page-home .panel:first-child::before{height:120px}
body #page-home .panel h2{font-size:25px;margin-bottom:16px}
body #page-home .panel li{font-size:16px;padding:8px 0}
body #page-home .placeholder{font-size:16px;padding:16px 12px}
}

/* Smaller moon-phase divider beneath the homepage title. */
body #page-home .moon-phases{gap:11px;font-size:16px}
body #page-home .moon-phases svg{width:17px;height:17px}
body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:72px}
@media(max-width:620px){body #page-home .moon-phases{gap:8px}body #page-home .moon-phases svg{width:15px;height:15px}body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:45px}}

/* Compact the content below the main title as a coordinated group. */
body #page-home .moon-phases{gap:9px;margin:13px auto 16px}
body #page-home .moon-phases svg{width:14px;height:14px}
body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:60px}
body #page-home .hero p{font-size:16px;margin-top:16px;line-height:1.45}
body #page-home .actions{gap:18px;margin-top:21px}
body #page-home .actions a{font-size:14px;padding:9px 18px;gap:8px;min-width:0}
body #page-home .actions svg{width:19px;height:19px}
body #page-home .panels{max-width:1020px;gap:19px;margin-top:18px;padding-bottom:25px}
body #page-home .panel{min-height:245px;padding:100px 17px 18px}
body #page-home .panel::before,body #page-home .panel:first-child::before{height:105px}
body #page-home .panel h2{font-size:22px;margin-bottom:13px}
body #page-home .panel p{font-size:14px!important;line-height:1.5!important;margin-bottom:18px!important}
body #page-home .panel li{font-size:14px;padding:7px 0}
body #page-home .placeholder{font-size:14px;padding:13px 10px;border-radius:10px}
body #page-home .panel a.more{font-size:11px;padding:7px 11px}
@media(max-width:620px){body #page-home .panels{max-width:365px;gap:16px}body #page-home .actions{gap:9px}body #page-home .actions a{font-size:12px;padding:9px 7px}body #page-home .hero p{font-size:14px}body #page-home .moon-phases::before,body #page-home .moon-phases::after{width:38px}}

/* Separate the celestial header from the homepage actions and cards. */
body #page-home .home-section-divider{display:flex;align-items:center;justify-content:center;gap:15px;max-width:720px;width:80%;margin:30px auto 26px;color:#c6c1b5!important;font-size:16px;line-height:1}
body #page-home .home-section-divider::before,body #page-home .home-section-divider::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#9d988e)!important}
body #page-home .home-section-divider::after{transform:rotate(180deg)}
body #page-home .actions{margin-top:0}
@media(max-width:620px){body #page-home .home-section-divider{width:90%;margin:25px auto 22px}}

/* Bring the three card artworks closer to the hero's silver highlights and deep blacks. */
body #page-home .panel::before{filter:brightness(1.24) contrast(1.12) saturate(.85)!important}