/* Home page: a comic page of four panels */

.comic-page {
  box-sizing: border-box;
  width: min(92vw, 1100px);
  min-height: 92vh;
  margin: 2vh auto;
  padding: 4vh 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "status status status status status status status status status status status status"
    "logo logo logo logo logo hero hero hero hero hero hero hero"
    "stack stack stack stack stack stack stack stack stack stack stack stack";
}

.panel-status {
  grid-area: status;
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.status-online {
  color: var(--radioactive);
}

.panel-logo {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--spider-red);
}

.logo-img-cls {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
}

.panel-hero {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 40px;
}

.bio-text {
  margin: 0;
  max-width: 52ch;
}

.panel-stack {
  grid-area: stack;
  padding: 16px 24px;
}

.panel-stack .caption {
  margin: 0;
  max-width: 100%;
  white-space: normal;
}

/* Let grid children shrink below their content width on small screens */
.panel,
.comic-page > * {
  min-width: 0;
}

/* Mission menu overlay */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(11, 11, 11, 0.75);
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  width: 80%;
  max-width: 420px;
  padding: 24px;
  background: var(--paper);
  border: var(--panel-border);
  box-shadow: 8px 8px 0 var(--spider-red);
}

.close {
  float: right;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.close:hover,
.close:focus-visible {
  color: var(--spider-red);
}

/* Narrow screens: panels stack one above another */
@media (max-width: 720px) {
  .comic-page {
    grid-template-areas:
      "status"
      "logo"
      "hero"
      "stack";
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-hero {
    padding: 24px;
  }
}