

body:has(#page-community:not([hidden])){background:#000!important;color:#f4f1ed!important;color-scheme:dark!important}

body:has(#page-community:not([hidden])){font-family:Georgia,'Times New Roman',serif!important;min-height:100vh}

body:has(#page-community:not([hidden])) header{background:#030303!important;border-color:#504a44!important;padding:14px 5%;position:relative;box-shadow:none!important}

body:has(#page-community:not([hidden])) header *{color:#f4f1ed!important;font-family:Georgia,'Times New Roman',serif!important}

body:has(#page-community:not([hidden])) .brand{font-style:italic;font-weight:normal;font-size:27px}

body:has(#page-community:not([hidden])) nav a{font-size:16px}

body:has(#page-community: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-community:not([hidden])) .header-actions a{width:32px;height:32px;border-color:#aaa39b!important}

body:has(#page-community:not([hidden])) footer{background:#000!important;color:#aaa39b!important;font-family:Georgia,serif!important}

body:has(#page-community:not([hidden])) header{padding:14px 24px}

body:has(#page-community:not([hidden])) header nav{justify-content:center;width:100%}

body:has(#page-community:not([hidden])) header{padding:12px 4.2%;min-height:74px}

body:has(#page-community:not([hidden])) .brand{font-size:clamp(25px,2.5vw,38px)}

body:has(#page-community:not([hidden])) nav{gap:clamp(24px,4vw,60px)}

body:has(#page-community:not([hidden])) nav a{font-size:clamp(16px,1.65vw,25px)}

body:has(#page-community:not([hidden])) .header-actions a{width:46px;height:46px}

body:has(#page-community:not([hidden])) .header-actions svg{width:25px;height:25px}

body:has(#page-community:not([hidden])) header{padding:12px 24px}

body:has(#page-community:not([hidden])) nav{gap:18px}

body:has(#page-community:not([hidden])) header{min-height:60px;padding:10px 4.2%}

body:has(#page-community:not([hidden])) .brand{font-size:28px}

body:has(#page-community:not([hidden])) nav{gap:36px}

body:has(#page-community:not([hidden])) nav a{font-size:17px}

body:has(#page-community:not([hidden])) .header-actions a{width:34px;height:34px}

body:has(#page-community:not([hidden])) .header-actions svg{width:20px;height:20px}


html:has(#page-community:not([hidden])),body:has(#page-community:not([hidden])){background:#000!important;color:#f4f1ed!important;color-scheme:dark!important}

body:has(#page-community:not([hidden])){font-family:Georgia,'Times New Roman',serif!important}

body #page-community{background:#000!important;color:#f4f1ed!important;min-height:calc(100vh - 100px);padding-bottom:25px}

body #page-community *{font-family:Georgia,'Times New Roman',serif!important;color:inherit!important}

body #page-community .guides-overview-hero{text-align:center;padding:145px 24px 12px;max-width:1440px;margin:auto;background-image:linear-gradient(0deg,#000,transparent 65%),url('/assets/lunar-approved/header-798a8024bed131.webp')!important;background-position:center top!important;background-size:100% auto!important;background-repeat:no-repeat!important}

body #page-community h1{font-size:clamp(38px,4vw,58px);font-weight:normal;line-height:1.12;margin:0 0 12px}

body #page-community .guides-overview-hero>p{font-size:16px;margin:0;line-height:1.5}

body #page-community .guides-moon-phases{display:flex;align-items:center;justify-content:center;gap:9px;margin:17px auto 6px;color:#e5dfcb!important}

body #page-community .guides-moon-phases svg{width:14px;height:14px;flex:none}

body #page-community .guides-moon-phases::before,body #page-community .guides-moon-phases::after{content:'';width:60px;height:1px;background:#a49c86!important}

body #page-community .eclipse-guide-categories{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:20px;max-width:1040px;margin:24px auto 0;padding:0 24px}

body #page-community .eclipse-guide-category{grid-column:span 2;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:180px;padding:20px 16px;background:#050505!important;border:1px solid #999184!important;border-radius:7px;text-decoration:none;transition:border-color .18s,background-color .18s;position:relative}

body #page-community .eclipse-guide-category:nth-child(5){grid-column:2/span 2}

body #page-community .guide-category-icon{width:37px;height:37px;fill:none;stroke:#eeece6;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:13px;overflow:visible}

body #page-community .eclipse-guide-category:nth-child(2) .guide-category-icon,body #page-community .eclipse-guide-category:nth-child(5) .guide-category-icon,body #page-community .eclipse-guide-category:nth-child(6) .guide-category-icon,body #page-community .eclipse-guide-category:nth-child(7) .guide-category-icon{stroke:#c4acc4}

body #page-community .eclipse-guide-category h2{font-weight:normal;font-size:21px;line-height:1.2;margin:0 0 9px}

body #page-community .eclipse-guide-category p{font-size:13px;line-height:1.45;margin:0;max-width:175px;color:#d2cec9!important}

body #page-community .eclipse-guide-category:hover{background:#1b141e!important;border-color:#b99dbd!important}

body #page-community .eclipse-guide-category:focus-visible{outline:2px solid #c7a8cc!important;outline-offset:4px}
body #page-community .guides-overview-hero{padding-top:140px;background-size:auto 270px!important}
body #page-community .eclipse-guide-categories{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;gap:16px}
body #page-community .eclipse-guide-category,body #page-community .eclipse-guide-category:nth-child(5){grid-column:auto}
body #page-community .eclipse-guide-category:last-child{grid-column:1/-1;max-width:278px;width:100%;justify-self:center}
body #page-community .eclipse-guide-categories{gap:12px;padding:0 16px}
body #page-community .eclipse-guide-category{padding:18px 10px}
body #page-community .eclipse-guide-category h2{font-size:18px}
body #page-community .guides-overview-hero>p{font-size:14px}

/* Compact overview proportions to match the approved homepage. */
body #page-community .guides-overview-hero{padding:130px 24px 8px;background-size:1440px auto!important}

body #page-community h1{font-size:42px;margin-bottom:10px}

body #page-community .guides-overview-hero>p{font-size:14px}

body #page-community .guides-moon-phases{margin:14px auto 5px;gap:8px}

body #page-community .guides-moon-phases svg{width:12px;height:12px}

body #page-community .eclipse-guide-categories{max-width:940px;gap:16px;margin-top:20px}

body #page-community .eclipse-guide-category{min-height:150px;padding:17px 12px}

body #page-community .guide-category-icon{width:29px;height:29px;margin-bottom:10px}

body #page-community .eclipse-guide-category h2{font-size:18px;margin-bottom:7px}

body #page-community .eclipse-guide-category p{font-size:12px;max-width:160px}
body #page-community .guides-overview-hero{padding-top:125px;background-size:auto 170px!important}
body #page-community .eclipse-guide-categories{max-width:560px}
body #page-community h1{font-size:36px}
body #page-community .guides-overview-hero>p{font-size:13px}
body #page-community .eclipse-guide-category h2{font-size:16px}


/* Keep the full 3:1 header canvas, including space above and below the artwork. */
body #page-community .guides-overview-hero{box-sizing:border-box;min-height:480px;padding:350px 24px 24px;background-image:url('/assets/lunar-approved/header-798a8024bed131.webp')!important;background-size:1440px auto!important;background-position:center 160px!important;background-color:#000!important}
body #page-community .guides-overview-hero{min-height:370px;padding-top:265px;background-size:1100px auto!important;background-position:center 110px!important}
body #page-community .guides-overview-hero{min-height:335px;padding-top:235px;background-size:950px auto!important;background-position:center 95px!important}


/* Match the approved homepage hero geometry with crescent artwork. */
body #page-community .guides-overview-hero{max-width:1536px;min-height:0;padding:clamp(185px,18vw,276px) 24px 10px;background-image:linear-gradient(0deg,#000 0%,transparent 52%),url('/assets/lunar-approved/header-19dc0e3064736d.webp')!important;background-size:100% auto!important;background-position:center top!important;background-repeat:no-repeat!important}

body #page-community h1{font-size:clamp(45px,6vw,92px);line-height:1.05;margin:0 0 16px}

body #page-community .guides-overview-hero>p{font-size:16px;margin:16px 0 0;line-height:1.45}

body #page-community .guides-moon-phases{margin:13px auto 16px;gap:9px}

body #page-community .guides-moon-phases svg{width:14px;height:14px}

body #page-community .eclipse-guide-categories{margin-top:22px}
body #page-community .guides-overview-hero{padding-top:205px;background-size:auto 350px!important}
body #page-community h1{font-size:45px}


/* Category cards follow the approved four-over-three mockup. */
body #page-community .eclipse-guide-categories{max-width:980px;gap:17px;margin-top:24px;margin-bottom:35px}

body #page-community .eclipse-guide-category{min-height:164px;padding:18px 16px 17px;border:0!important;border-radius:0;background:#030303!important;justify-content:flex-start;isolation:isolate}

body #page-community .guide-card-frame{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#aaa193;stroke-width:.8;pointer-events:none;overflow:visible}

body #page-community .guide-card-frame path{vector-effect:non-scaling-stroke}

body #page-community .guide-category-icon{width:32px;height:32px;margin:0 0 11px;stroke-width:1.1}

body #page-community .eclipse-guide-category h2{max-width:145px;min-height:42px;font-size:19px;line-height:1.12;margin:0 0 8px;display:flex;align-items:center;justify-content:center}

body #page-community .eclipse-guide-category p{font-size:12px;line-height:1.45;max-width:158px;margin:0;color:#dedad3!important}

body #page-community .eclipse-guide-category:hover{background:#171119!important}

body #page-community .eclipse-guide-category:hover .guide-card-frame{stroke:#bba0c0}

body #page-community .eclipse-guide-category:focus-visible{outline:2px solid #c1a1c8!important;outline-offset:5px}
body #page-community .eclipse-guide-categories{max-width:560px;gap:15px}
body #page-community .eclipse-guide-category{min-height:164px}
body #page-community .eclipse-guide-categories{gap:13px}
body #page-community .eclipse-guide-category{padding:18px 12px}
body #page-community .eclipse-guide-category h2{font-size:17px}

body #page-community .guide-card-frame{display:none!important}
body #page-community .eclipse-guide-category{min-height:205px;padding:24px 17px 35px;overflow:visible}
body #page-community .eclipse-guide-category h2{margin-top:10px;position:relative;z-index:1}
body #page-community .eclipse-guide-category p{position:relative;z-index:1}

body #page-community .guides-overview-hero{padding-top:clamp(225px,22vw,336px)}

body #page-community .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-community .home-section-divider:before,body #page-community .home-section-divider:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#9d988e)!important}
body #page-community .home-section-divider:after{transform:rotate(180deg)}
body #page-community .guides-overview-hero{padding-top:250px}
body #page-community .eclipse-guide-category:nth-child(5){grid-column:auto!important}
body #page-community .eclipse-guide-categories{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:1040px!important}
@media(max-width:700px){body #page-community .eclipse-guide-categories{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:450px){body #page-community .eclipse-guide-categories{grid-template-columns:1fr!important}}


/* Community artwork only: match the visual scale of the approved Guides artwork. */
body #page-community .guides-overview-hero {
  background-size: 94% auto !important;
  background-position: center top !important;
}
@media (max-width:850px) {
  body #page-community .guides-overview-hero { background-size: auto 329px !important; }
}


/* Back button floats over the hero instead of creating an empty band above it. */
body:has(#page-community:not([hidden])) #site-back-wrap,
body:has(#page-guides:not([hidden])) #site-back-wrap {
  position: absolute !important;
  z-index: 30 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 30px 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
}
body:has(#page-community:not([hidden])) #site-back,
body:has(#page-guides:not([hidden])) #site-back {
  pointer-events: auto !important;
}
/* Remove the narrow rule between navigation and celestial artwork. */
body:has(#page-community:not([hidden])) > header,
body:has(#page-guides:not([hidden])) > header {
  border-bottom: 0 !important;
}


/* Align Community heading, subtitle, moon phases and divider with the Guides reference.
   The header artwork, navigation, Back button and cards remain unchanged. */
@media (min-width: 851px) {
  body #page-community .guides-overview-hero > h1 {
    margin-top: -30px !important;
  }
}


/* Only the Community hero is adjusted; the Guides page and cards are untouched. */
@media (min-width:851px) {
  body #page-community .guides-overview-hero {
    background-size: 100% auto !important;
  }
  body #page-community .guides-overview-hero > h1 {
    font-size: 50px !important;
    font-weight: 500 !important;
  }
}
