/* Keep the homepage card artwork flush with the inner border. */
body #page-home .panels > .panel {
  padding-top:0;
  overflow:hidden;
}
body #page-home .panels > .panel > .home-card-art {
  width:calc(100% + 24px);
  max-width:none;
  aspect-ratio:366 / 133;
  object-fit:fill;
}
body #page-home .header-actions a[aria-label="Discord"] svg {
  fill:currentColor;
  stroke:none;
  opacity:1;
}

/* Tighten the Guides title and card spacing together. */
body #page-guides .reviewed-hero > .direct-header-art {
  margin-bottom:clamp(-8px,-1vw,-3px);
  mask-image:
    linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
    linear-gradient(#000 82%,transparent);
  mask-composite:intersect;
}

/* Give the Community artwork its own space above the heading. */
body #page-community .reviewed-hero > .direct-header-art {
  margin-bottom:clamp(18px,2vw,28px);
  mask-image:
    linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
    linear-gradient(#000 87%,transparent);
  mask-composite:intersect;
}

/* The community detail routes use the same dark navigation as the landing pages. */
body:has(:is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources):not([hidden])) > header {
  background:#000!important;
  border:0!important;
  box-shadow:none!important;
  position:relative;
  min-height:60px;
  padding:10px 4.2%;
}
body:has(:is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources):not([hidden])) > header * {
  color:#f4f1ed!important;
  font-family:Georgia,'Times New Roman',serif!important;
}
body:has(:is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources):not([hidden])) :is(#site-back,footer) {
  color:#f4f1ed!important;
  background:#000!important;
}

/* Enlarge the illuminated area while keeping the centered subjects in view. */
body :is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .reviewed-hero {
  overflow:hidden;
}
body :is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .reviewed-hero > .direct-header-art {
  position:relative;
  left:50%;
  width:min(126vw,1440px);
  max-width:none;
  margin:clamp(12px,2vw,28px) 0 0;
  transform:translateX(-50%);
  filter:brightness(1.32) contrast(1.23)!important;
  mask-image:linear-gradient(#000 81%,transparent);
}
body :is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .route-shell {
  width:min(82%,1040px);
  min-height:0;
  margin:14px auto 40px;
  padding:0;
}
body :is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) :is(.eclipse-public-grid,.staff-grid) {
  display:grid;
  margin-top:0;
}
body :is(#page-announcements,#page-hall,#page-donors,#page-staff) .eclipse-public-card {
  background:#080808!important;
  border-color:#706970!important;
}
body :is(#page-announcements,#page-hall,#page-donors,#page-staff) .eclipse-public-card :is(h2,p,.eclipse-public-meta) {
  color:#f4f1ed!important;
}
body #page-staff .eclipse-public-card a {
  color:#d7badc!important;
}
@media(max-width:560px){
  body :is(#page-announcements,#page-hall,#page-donors,#page-staff,#page-resources) .route-shell {
    width:calc(100% - 32px);
  }
}

/* Match the Guides frame and use the space occupied by the assets' black tails. */
body :is(#page-announcements,#page-hall,#page-donors,#page-staff) .reviewed-hero {
  padding-inline:0!important;
}
body :is(#page-announcements,#page-hall,#page-donors,#page-staff) .reviewed-hero > .direct-header-art {
  width:min(100%,1200px);
  aspect-ratio:3 / 1;
  height:auto;
  margin:0 0 12px;
  object-view-box:inset(0 0 23% 0);
  object-fit:fill;
  mask-image:
    linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
    linear-gradient(#000 88%,transparent);
  mask-composite:intersect;
}

/* Give the Announcements banner a little more depth than the shared frame. */
body #page-announcements .reviewed-hero > .direct-header-art {
  aspect-ratio:1200 / 420;
  object-view-box:none;
  object-fit:contain;
  filter:none!important;
}

/* Preserve the circular star ring and match the Announcements frame. */
body #page-hall .reviewed-hero > .direct-header-art {
  aspect-ratio:1200 / 420;
  object-view-box:none;
  object-fit:contain;
  filter:none!important;
}

/* Match the approved Announcements banner dimensions. */
body #page-donors .reviewed-hero > .direct-header-art {
  aspect-ratio:1200 / 420;
  object-view-box:none;
  object-fit:contain;
  filter:none!important;
}