/* Everything below the first screen, each section in a panel that slides up over it. */
.band {
  padding: clamp(40px, 6vw, 80px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start;
}
.prose h2 { font-stretch: 116%; font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; margin: 0 0 16px; letter-spacing: -0.015em; }
.prose h3 { font-stretch: 110%; font-weight: 700; font-size: 17px; margin: 26px 0 4px; color: var(--amber); }
.prose p { margin: 0 0 12px; color: var(--soft); font-size: 17px; line-height: 1.55; }
.band figure { margin: 0; }
.band img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 6px; border: 1px solid var(--edge); }

.support .donate {
  background: var(--amber); color: #1d1204; border: 0; border-radius: 8px; padding: 12px 26px; margin: 8px 0 14px;
  font-weight: 800; font-stretch: 114%; font-size: 18px; cursor: pointer;
}
.support .donate:hover { background: #ffc666; }
.support .sign { color: var(--mute); font-size: 15px; }
.giscus { margin-top: 18px; }

/* How the tabs work: text on 60% of the panel, the photo filling the other 40%. */
#how .band { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
#how .band img { max-width: none; border: 1px solid #000; box-shadow: 0 0 20px rgb(0 0 0 / 0.5); }

/* The discussion sits in a centred column, wide enough for code in a comment. */
#discussion .band { grid-template-columns: minmax(0, 1fr); }
#discussion .prose { width: 100%; max-width: 980px; margin-inline: auto; }
#discussion .prose h2, #discussion .prose > p { text-align: center; }
#discussion .prose > p { max-width: 62ch; margin-inline: auto; }

/* The panels: pinned to the bottom, reaching up to the header, 95% opaque, slid up by .up (see panels_controller.js). */
.rise {
  position: fixed; inset: auto 0 0 0; z-index: 3; margin: 0; width: 100%; max-width: none; height: calc(100svh - var(--header)); max-height: none;
  padding: 0; border: 0; border-top: 3px solid var(--amber); border-radius: 16px 16px 0 0;
  background: rgb(34 44 54 / 0.95); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rise.up { transform: none; }
.rise .x {
  position: sticky; top: 14px; display: block; margin: 0 var(--gutter) -38px auto; z-index: 2; /* takes no room from the content, and sits above it */
  background: rgb(34 44 54 / 0.95); border: 1px solid var(--sheet-edge); border-radius: 99px; width: 38px; height: 38px;
  color: var(--soft); font-size: 24px; line-height: 1; cursor: pointer;
}
.rise .x:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 900px) {
  .band, #how .band { grid-template-columns: 1fr; }
}