/* Compact 2000s Maple portal proportions, informed by the live RevivalStory reference. */
.hero-track { width: 300%; }
.hero-slide { width: 33.333333%; }
.hero-slide > .atlas-backdrop {
  position: absolute;
  inset: 0;
  background-color: #8ccbe0;
  /* One whole copy of the mushroom-house scene, cropped from the atlas it came
     in (the scene repeats every 1002 px there, which left a seam beside the
     house). Cover fills the banner at any width; right alignment keeps the
     house in view, and its transparent sky shows the background colour. */
  background-image: url("../images/banners/maple-mushroom-house-scene.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
}
.hero-slide:nth-child(2) > .atlas-backdrop {
  background-image: url("../images/revival-reference/world-background.webp");
  background-size: 1770px auto;
  background-position: left bottom;
}
.hero-slide:nth-child(3) > .atlas-backdrop {
  background-image: url("../images/revival-reference/world-background.webp");
  background-size: 1770px auto;
  background-position: right bottom;
}
@media (min-width: 761px) {
  :root { --rail: 222px; }
  body { background: linear-gradient(#c2e7f7 0, #e7f2f6 310px, #f3f5f2 650px); }
  .portal-shell {
    width: min(1030px, calc(100% - 24px));
    margin: 24px auto;
    border: 1px solid #667c91;
    border-radius: 0;
    box-shadow: 0 3px 13px #365b7140;
  }
  .brand { min-height: 43px; background: linear-gradient(#f2bf65, #d89a43); }
  .brand-name { font-size: 22px; }
  .top-nav { height: 43px; background: linear-gradient(#355b79, #1c3956); border-bottom: 3px solid #aebfc7; }
  .top-nav button { color: #fff; font: bold 9px Verdana, sans-serif; border-right-color: #426581; text-shadow: 1px 1px #18324b; }
  .top-nav button:hover, .top-nav button:focus-visible { background: #bb7d38; color: #fff; }
  .hero { height: 240px; border-bottom: 5px solid #364b5b; }
  .hero-slide > img.hero-backdrop { object-position: center 65%; }
  .hero-copy { width: 38%; background: linear-gradient(90deg, #fff9e9f5, #fff9e9dd 73%, transparent); }
  .hero-copy strong { font-size: 28px; }
  .body-grid { position: relative; gap: 9px; padding: 0 9px 16px 4px; }
  .left-rail {
    position: absolute;
    z-index: 2;
    top: -240px;
    left: 4px;
    width: 222px;
    margin: 0;
    background: repeating-linear-gradient(135deg, #f9f7ed, #f9f7ed 5px, #eeebdd 6px, #eeebdd 7px);
  }
  .member-box { margin-top: 9px; background-color: #e9e4d1; }
  .member-status { line-height: 1.4; }
  .member-actions button { font-size: 11px; }
  main { grid-column: 2; min-width: 0; }
  .content-columns, .lower-grid { gap: 8px; }
  .portal-module { min-width: 0; }
  .directory-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { background: #e5f0f3; }
  .portal-shell { border-radius: 0; }
  .hero-slide:nth-child(2) > .atlas-backdrop,
  .hero-slide:nth-child(3) > .atlas-backdrop { background-size: 950px auto; background-position-y: bottom; }
  .top-nav { background: linear-gradient(#355b79, #1c3956); }
  .top-nav button { color: #fff; border-right-color: #426581; }
  .top-nav button:hover, .top-nav button:focus-visible { background: #bb7d38; color: #fff; }
}