/* About page keeps the portal shell and navigation intact, replacing only the world scene and central content. */
.about-stage .world-background { object-position: center center; }
.about-stage .world-vignette { background: radial-gradient(circle at 50% 48%, transparent 46%, rgba(3,9,20,.06) 72%, rgba(1,5,12,.28) 100%), linear-gradient(180deg, rgba(2,7,18,.08), transparent 25%, transparent 82%, rgba(2,7,18,.16)); }
.about-stage .site-brand a { display: block; }

.about-panel {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 19.5%;
  width: 78%;
  aspect-ratio: 1672 / 941;
  transform: translateX(-50%);
  filter: drop-shadow(0 1.1cqw 1.8cqw rgba(0,0,0,.34));
}
.about-parchment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.about-content {
  position: absolute;
  z-index: 2;
  left: 18.5%;
  right: 18.5%;
  top: 22.25%;
  bottom: 12%;
  color: #17283b;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
.about-content h1 {
  margin: 0;
  text-align: center;
  color: #102b4b;
  font-size: 3.2cqw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;
}
.about-rule {
  width: 34%;
  margin: 1.15cqw auto 2cqw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .55cqw;
}
.about-rule span { height: 1px; background: linear-gradient(90deg, transparent, rgba(126,86,32,.75)); }
.about-rule span:last-child { background: linear-gradient(90deg, rgba(126,86,32,.75), transparent); }
.about-rule i {
  width: .7cqw;
  height: .7cqw;
  transform: rotate(45deg);
  border: .09cqw solid #9f6c28;
  background: #1d78c1;
  box-shadow: inset 0 0 0 .12cqw #d7a34b, 0 0 .55cqw rgba(41,129,202,.45);
}
.about-copy {
  width: 56%;
  margin: 0 auto;
  max-height: 72%;
  overflow: auto;
  padding: 0 .55cqw .4cqw 0;
  font-size: 1.13cqw;
  line-height: 1.58;
  color: #273342;
  scrollbar-width: thin;
  scrollbar-color: rgba(115,78,28,.35) transparent;
}
.about-copy p { margin: 0 0 1.15em; }
.about-copy p:last-child { margin-bottom: 0; }

@media (max-width: 980px), (max-aspect-ratio: 4/3) {
  .about-stage { padding-bottom: 2rem; }
  .about-stage .world-background { opacity: .65; filter: saturate(.9); }
  .about-panel {
    position: relative;
    left: auto;
    top: auto;
    width: min(920px, 100%);
    aspect-ratio: auto;
    min-height: 680px;
    margin: .6rem auto 0;
    transform: none;
    overflow: hidden;
  }
  .about-parchment {
    left: 50%;
    right: auto;
    width: auto;
    height: 100%;
    min-width: 1210px;
    transform: translateX(-50%);
    object-fit: contain;
  }
  .about-content {
    left: 9%;
    right: 9%;
    top: 13%;
    bottom: 12%;
  }
  .about-content h1 { font-size: clamp(38px, 8vw, 56px); }
  .about-rule { width: min(280px, 58%); margin: 1rem auto 1.5rem; gap: .5rem; }
  .about-rule i { width: 10px; height: 10px; border-width: 1px; box-shadow: inset 0 0 0 2px #d7a34b, 0 0 8px rgba(41,129,202,.45); }
  .about-copy { width: min(620px, 100%); max-height: none; margin: 0 auto; padding: 0; font-size: clamp(16px, 2.5vw, 20px); line-height: 1.62; }
}

@media (max-width: 620px) {
  .about-panel { min-height: 760px; margin-top: .2rem; }
  .about-parchment { min-width: 1350px; }
  .about-content { left: 7%; right: 7%; top: 12%; }
  .about-copy { font-size: 16px; }
}