/* ═══════════════════════════════════════════════════════════════════════════
   GUESTS PAGE — designed band, filter bar, sections, CTA
   Port of design/guests/code/css/guests.css onto the site tokens; the cards
   themselves reuse .guest-card from main.css (identical spec). Loads only on
   the guests page template, after blocks.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Page header band — stage-deep + yearly stage art at .14 */
.gp-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-stage-deep);
  color: var(--color-stage-ink);
  padding: 176px max(var(--gutter), calc((100% - var(--container)) / 2)) 0;
}
.gp-hero-art {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.14;
}
.gp-hero-in { position: relative; }
.gp-h1 {
  font: 400 64px/var(--lh-display) var(--font-display);
  margin: 18px 0 0;
  text-transform: uppercase;
  transform: skewX(-5deg);
}
.gp-h1 .accent { color: var(--color-accent); }
.gp-lead {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-stage-ink) 78%, transparent);
  margin: 16px 0 0;
  max-width: 600px;
}
.gp-lead p { margin: 0; }
.gp-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: 34px;
  border-top: 1px solid var(--color-stage-hairline);
  padding: 20px 0 22px;
}
.gp-years { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-meta-label {
  font: 600 var(--fs-label-sm) var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-7);
  color: color-mix(in srgb, var(--color-stage-ink) 60%, transparent);
  margin-right: 6px;
}
.gp-year {
  background: transparent;
  color: var(--color-stage-ink);
  border: 1px solid var(--color-stage-hairline);
  font: 800 var(--fs-label-lg) var(--font-body);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-2);
  text-decoration: none;
  transition: border-color var(--dur-fast);
}
.gp-year:hover { border-color: var(--color-accent); color: var(--color-stage-ink); }
.gp-year[aria-current] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.gp-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 var(--fs-label-sm) var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: color-mix(in srgb, var(--color-stage-ink) 70%, transparent);
}
.gp-chip-s {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--color-stage-hairline);
  border-radius: var(--radius-pill);
  color: inherit;
  text-decoration: none;
}
a.gp-chip-s:hover { border-color: var(--color-accent); color: var(--color-stage-ink); }
.gp-chip-s--total { color: var(--color-stage-ink); }
.gp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}

/* Role filter bar */
.gp-filter {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-hairline);
  padding: 16px max(var(--gutter), calc((100% - var(--container)) / 2));
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.gp-filter .chip { padding: 9px 16px; font-size: 13px; }
.gp-filter .chip .n { opacity: 0.55; }

/* Sections */
.gp-body { padding: 26px max(var(--gutter), calc((100% - var(--container)) / 2)) 0; }
.gp-body--last { padding-bottom: 90px; }
.gp-sec { padding-top: 44px; }
.gp-sec-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.gp-sec-h h2 {
  font: 400 var(--fs-h3) var(--font-display);
  margin: 0;
  text-transform: uppercase;
  transform: skewX(-4deg);
}
.gp-sec-h .n {
  font: 700 var(--fs-label-lg) var(--font-label);
  letter-spacing: var(--tracking-4);
  color: var(--color-ink-soft);
}
.gp-sec .guests__grid { margin-top: 20px; }

/* CTA band — current year only */
.gp-cta {
  margin-top: 64px;
  background: var(--color-stage-deep);
  color: var(--color-stage-ink);
  border-radius: var(--radius-lg);
  padding: 34px 38px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.gp-cta-t {
  font: 400 28px var(--font-display);
  text-transform: uppercase;
  transform: skewX(-4deg);
}
.gp-cta-s {
  font-size: var(--fs-body);
  color: color-mix(in srgb, var(--color-stage-ink) 75%, transparent);
  margin-top: 8px;
}

@media (max-width: 960px) {
  .gp-hero { padding-top: 150px; } /* breadcrumb at 150px like every other interior band (was 176) */
}
@media (max-width: 900px) {
  .gp-h1 { font-size: 52px; }
}

/* ── PHONES (mobile design 2026-09-06) ──────────────────────────────────
   The 2026 archive rendered 45,700px tall at 390px: ten edition pills in three
   rows, ten role chips in six rows, 88 single-column cards. Pickers become
   single scrolling rows (edge fade via mask), the filter sticks under the
   header, cards go two-up (main.css), headings step down so long role names
   wrap instead of running off the screen. */
@media (max-width: 560px) {
  /* nowrap matters: a WRAPPING column flexbox sizes its line to the items'
     max-content width, so the year row grew to 956px instead of scrolling. */
  .gp-meta { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; }
  .gp-years, .gp-status {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .gp-years::-webkit-scrollbar, .gp-status::-webkit-scrollbar, .gp-filter::-webkit-scrollbar { display: none; }
  .gp-year, .gp-chip-s { flex: none; white-space: nowrap; }
  .gp-meta-label { flex: none; }

  .gp-filter {
    position: sticky; top: 64px; z-index: 5; /* compact header: 46px logo + 9px padding ×2 */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 0;
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .gp-filter .chip { flex: none; white-space: nowrap; }
  .gp-filter .chip:last-child { margin-right: var(--gutter); }

  .gp-body { padding-top: 8px; }
  .gp-sec-h h2 { font-size: 28px; min-width: 0; }
  .gp-cta { padding: 34px 28px; }
}