/* Compact spider hero: fill empty stage, less text */
.hero.hero-compact{
  padding-top: calc(64px + env(safe-area-inset-top,0px));
}
.hero.hero-compact .hero-scene.spider-collage{
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 14px 4px;
  display: block;
}
.hero.hero-compact .hero-scene.spider-collage::before,
.hero.hero-compact .hero-scene.spider-collage::after{
  display: none !important;
  content: none !important;
}
.spider-collage .collage{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: min(920px, 100%);
  margin: 0 auto;
  align-items: stretch;
}
.spider-collage .c-main{
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 28px;
  border: 4px solid rgba(43,33,24,.9);
  box-shadow: 0 8px 0 rgba(43,33,24,.85);
  background: #fff;
}
.spider-collage .c-a,
.spider-collage .c-b,
.spider-collage .c-c,
.spider-collage .c-d{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22px;
  border: 3.5px solid rgba(43,33,24,.88);
  box-shadow: 0 6px 0 rgba(43,33,24,.7);
  background: #fff;
}
.spider-collage .c-a{grid-column:2;grid-row:1}
.spider-collage .c-b{grid-column:3;grid-row:1}
.spider-collage .c-c{grid-column:2;grid-row:2}
.spider-collage .c-d{grid-column:3;grid-row:2}

.hero-copy-short{
  padding: 10px 18px 22px !important;
}
.hero-copy-short .title-3d{
  font-size: clamp(1.8rem, 6vw, 2.6rem) !important;
  margin: 0.2rem 0 0.35rem !important;
}
.hero-copy-short .hero-sub{
  margin: 0 auto 0.75rem !important;
  max-width: 28rem;
  font-size: 1.05rem !important;
  font-weight: 800;
}
.hero-copy-short .hero-kicker,
.hero-copy-short .disclaimer{display:none}

.hero-note{
  margin: 0.85rem auto 0;
  max-width: 34rem;
  text-align: left;
  background: rgba(255,255,255,.72);
  border: 2.5px dashed rgba(43,33,24,.35);
  border-radius: 16px;
  padding: 0.35rem 0.75rem;
  font-size: 0.86rem;
  color: rgba(43,33,24,.75);
}
.hero-note summary{
  cursor: pointer;
  font-family: var(--font-display, Fredoka, ZCOOL KuaiLe, sans-serif);
  font-weight: 400;
  list-style: none;
}
.hero-note summary::-webkit-details-marker{display:none}
.hero-note[open] summary{margin-bottom:.35rem}
.hero-note p{margin:0;line-height:1.45}

.mission-guide-mini{
  padding: 0.45rem 0.7rem !important;
  gap: 0.55rem !important;
  max-width: 280px;
}
.mission-guide-mini img{width:48px!important;height:48px!important;border-radius:14px}
.mission-guide-mini .mg-name{font-size:1rem;margin:0}
.mission-guide-mini .mg-role{display:none}
.mission-guide-mini .mg-line{display:block;margin:.2rem 0 0;font-size:.9rem;font-weight:650;line-height:1.3}

@media (max-width: 640px){
  .spider-collage .collage{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .spider-collage .c-main{
    grid-column: 1 / span 2;
    grid-row: 1;
    max-height: 220px;
  }
  .spider-collage .c-a{grid-column:1;grid-row:2}
  .spider-collage .c-b{grid-column:2;grid-row:2}
  .spider-collage .c-c{grid-column:1;grid-row:3}
  .spider-collage .c-d{grid-column:2;grid-row:3}
}