/* ============================================================
   CITY PAGE — namespace .city-*  ·  Direction A "The Marquee"
   (city page redesign, ADR 0175 follow-on)

   Dark AB house style, page-scoped. Layered on design-tokens
   (colours/spacing/fonts) + the shared el-eventbanner primitive
   (app-extras) + feed cards (card-stream/feed-v2). No global
   tokens are changed here — only the .city-* page body + the
   shared .notify-capture strip this page renders.

   Composition: two jobs first (Get tickets + Apply), proof after.
   Order — Hero → Schedule → Apply → Results → Roster → Gallery →
   Archive → Activity. Sticky action bar keeps both jobs one tap
   away. One accent: league orange, on actions + the next date.

   Width/gutter come from .page-shell; the hero and action bar
   cancel the shell gutter to run edge-to-edge of the content
   column (cinematic), everything else stays content-width.
   ============================================================ */
:root { --city-accent: var(--ab-orange); --city-accent-hi: #ffb943; }

/* fonts — brand set only (no serif; Source Serif is not a site body font):
     display = Bebas Neue → Oswald   body/sans = Oswald (var(--font-body))
     mono    = ui-monospace                                        */

/* ---- shared bits ------------------------------------------- */
.city-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--city-accent);
}
.city-eyebrow--muted { color: var(--ink-faint); }

/* scroll-margin clears the fixed site header (3.5rem) + revealed action bar so
   in-page anchor jumps (#city-apply, #city-schedule) don't hide the target top. */
.city-section { padding-block: clamp(48px, 7vw, 80px); border-top: 1px solid var(--line); scroll-margin-top: 7rem; }
.city-section--tight { padding-block: clamp(36px, 5vw, 56px); }

.city-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--space-8); }
.city-sec-head__l { display: grid; gap: 8px; }
.city-sec-head__title {
  font-family: 'Bebas Neue','Oswald',sans-serif; font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 0.92;
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
}
.city-sec-head__link {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-muted);
  white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.city-sec-head__link:hover { color: var(--ink); border-color: var(--city-accent); }

/* ---- buttons (page-scoped .city-btn) ----------------------- */
.city-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 22px;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.city-btn--primary { background: var(--city-accent); color: var(--ink-on-fill); border-color: var(--city-accent); }
.city-btn--primary:hover { background: var(--city-accent-hi); border-color: var(--city-accent-hi); }
.city-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.city-btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }
.city-btn--dark { background: var(--ink); color: var(--ink-on-fill); border-color: var(--ink); }
.city-btn--lg { padding: 17px 30px; font-size: 14px; }
.city-btn--sm { padding: 9px 15px; font-size: 11px; }

/* The hero and the action bar are ALWAYS dark (literal backgrounds below),
   independent of the site light/dark theme toggle. Redefine the inherited ink /
   line tokens to light values on these two containers so all descendant text and
   the ghost buttons stay readable even when a viewer flips to the light theme.
   (--ink-on-fill is left alone → primary buttons keep dark text on orange.) */
.city-hero, .city-actionbar {
  --ink: #ffffff;
  --ink-muted: rgba(244,237,224,0.72);
  --ink-faint: rgba(244,237,224,0.5);
  --line: rgba(255,255,255,0.14);
  --line-strong: rgba(255,255,255,0.28);
}

/* ============================================================
   STICKY ACTION BAR
   ============================================================ */
/* Fixed (not sticky) so it reserves no flow space above the hero — a sticky
   transl-hidden bar would leave a ~60px dark gap under the site header. Fixed
   at the header's height (3.5rem), under the header in stacking (z 40 < 50). */
.city-actionbar {
  position: fixed; top: 3.5rem; left: 0; right: 0; z-index: 40;
  background: rgba(20,17,13,0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-130%); transition: transform .3s ease;
  will-change: transform;
}
.city-actionbar.is-visible { transform: translateY(0); }
.city-actionbar__in {
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 16px; padding-block: 11px;
}
.city-actionbar__id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.city-actionbar__city { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: 1.5rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.city-actionbar__when { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-actionbar__when b { color: var(--city-accent); font-weight: 600; }
.city-actionbar__cta { margin-left: auto; display: flex; gap: 9px; }
@media (max-width: 640px) {
  .city-actionbar__when { display: none; }
  .city-actionbar__cta .city-btn { padding: 10px 14px; }
}

/* ============================================================
   HERO — cinematic marquee
   ============================================================ */
.city-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  min-height: clamp(520px, 76vh, 720px);
  margin-bottom: 0;
  /* graceful base so the hero reads intentionally with OR without a banner image */
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(247,165,44,0.16) 0%, rgba(247,165,44,0) 46%),
    linear-gradient(180deg, #1c1712 0%, #14110d 60%, #0d0b08 100%);
}
.city-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.city-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,11,8,0.97) 2%, rgba(13,11,8,0.72) 34%, rgba(13,11,8,0.25) 72%, rgba(13,11,8,0.5) 100%); }
.city-hero__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-block: clamp(32px, 5vw, 56px); }
.city-hero__crumbs { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-6); }
.city-hero__crumbs a { color: var(--ink-muted); }
.city-hero__crumbs a:hover { color: var(--ink); }
.city-hero__crumbs span { color: #fff; }
.city-hero__flag { font-size: 15px; }
.city-hero__name {
  font-family: 'Bebas Neue','Oswald',sans-serif; font-weight: 400; color: #fff;
  font-size: clamp(3.6rem, 11vw, 9rem); line-height: 0.82; letter-spacing: 0.005em;
  text-transform: uppercase; margin: 0;
}
.city-hero__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--space-5); font-family: ui-monospace, monospace; font-size: 14px; color: rgba(244,237,224,0.82); letter-spacing: 0.02em; }
.city-hero__stats b { color: #fff; font-weight: 600; }
.city-hero__stats .sep { color: var(--line-strong); }
.city-hero__lede { font-family: var(--font-body, 'Oswald', sans-serif); font-weight: 300; font-size: 1.12rem; line-height: 1.5; color: rgba(244,237,224,0.82); margin: var(--space-6) 0 0; max-width: 52ch; text-wrap: pretty; }
.city-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--space-8); }
.city-hero__nextline { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: rgba(244,237,224,0.7); margin-top: var(--space-5); text-transform: uppercase; }
.city-hero__nextline b { color: var(--city-accent); font-weight: 600; }

/* When an ADR 0175 header banner supplies the masthead art + identity, the hero
   below it collapses to a compact CTA strip: the redundant crumbs / eyebrow /
   name / stats / lede are dropped (the banner already carries the brand), and
   only the action CTAs + next-battle line remain. Stays literal-dark so it reads
   as one band with the banner in either theme. */
.city-hero--has-banner { min-height: 0; background: #14110d; }
.city-hero--has-banner .city-hero__scrim { display: none; }
.city-hero--has-banner .city-hero__inner { padding-block: clamp(18px, 3vw, 30px); }
.city-hero--has-banner .city-hero__crumbs,
.city-hero--has-banner .city-eyebrow,
.city-hero--has-banner .city-hero__name,
.city-hero--has-banner .city-hero__stats,
.city-hero--has-banner .city-hero__lede { display: none; }
.city-hero--has-banner .city-hero__cta { margin-top: 0; }
.city-hero--has-banner .city-hero__nextline { margin-top: var(--space-3); }

/* ============================================================
   SCHEDULE — "when can I go"
   ============================================================ */
.city-sched__lead { display: grid; grid-template-columns: 0.85fr 1fr; border: 1px solid var(--line-strong); background: var(--bg-raised); margin-bottom: var(--space-5); }
.city-sched__lead-art { position: relative; background: var(--bg-inset); min-height: 300px; overflow: hidden; }
.city-sched__lead-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-sched__lead-tag { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--city-accent); color: var(--ink-on-fill); font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; }
.city-sched__lead-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--space-4); }
.city-sched__lead-date { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--city-accent); }
.city-sched__lead-title { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 0.9; text-transform: uppercase; margin: 0; }
.city-sched__lead-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 4px 0; }
.city-sched__lead-meta .lbl { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 3px; }
.city-sched__lead-meta strong { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.city-sched__lead-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.city-sched__lead-avatars { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.city-sched__avstack { display: flex; }
.city-sched__avstack .av { width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--bg-raised); border-radius: 50%; overflow: hidden; background: var(--bg-inset); }
.city-sched__avstack .av:first-child { margin-left: 0; }
.city-sched__avstack .av img { width: 100%; height: 100%; object-fit: cover; }
.city-sched__avnote { font-size: 12px; color: var(--ink-faint); }

.city-sched__list { border-top: 1px solid var(--line-strong); }
.city-sched__row { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.city-sched__row:hover { background: var(--bg-raised); }
.city-sched__row-date { display: flex; align-items: baseline; gap: 8px; }
.city-sched__row-date .day { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: 2rem; line-height: 0.8; }
.city-sched__row-date .mo { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.city-sched__row-ev { display: grid; gap: 4px; }
.city-sched__row-ev strong { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.05rem; }
.city-sched__row-ev span { font-size: 13px; color: var(--ink-muted); }
.city-sched__row-cta { display: flex; gap: 10px; align-items: center; }

/* notify + calendar */
.notify-capture { margin-top: var(--space-5); padding: var(--space-6); border: 1px solid var(--line); background: var(--bg-raised); display: grid; gap: 10px; }
.notify-capture__title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.05rem; margin: 0; color: var(--ink); }
.notify-capture__deck { font-size: 13px; color: var(--ink-muted); margin: 0; }
.notify-capture__form { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.notify-capture__input { flex: 1; min-width: 220px; max-width: 420px; background: var(--bg-inset); border: 1px solid var(--line-strong); color: var(--ink); font-family: 'Oswald', sans-serif; font-size: 14px; padding: 12px 14px; }
.notify-capture__input::placeholder { color: var(--ink-faint); }
.notify-capture__thanks { font-size: 14px; color: var(--ink); margin: 0; }
.notify-capture__error { font-size: 13px; color: var(--city-accent); margin: 0; }
.city-cal { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); margin-top: 12px; }
.city-cal a { color: var(--ink-muted); border-bottom: 1px solid var(--line-strong); }
.city-cal a:hover { color: var(--city-accent); }

/* empty / new-city state */
.city-empty { border: 1px dashed var(--line-strong); background: var(--bg-raised); padding: clamp(28px, 4vw, 48px); text-align: center; display: grid; gap: 12px; justify-items: center; }
.city-empty__title { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); text-transform: uppercase; line-height: 0.95; margin: 0; }
.city-empty__sub { font-family: var(--font-body, 'Oswald', sans-serif); font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--ink-muted); max-width: 48ch; margin: 0; }
.city-empty__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ============================================================
   APPLY — elevated recruitment band
   ============================================================ */
.city-apply { position: relative; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line-strong); display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 340px; }
.city-apply__body { padding: clamp(30px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.city-apply__title { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.94; text-transform: uppercase; margin: 0; max-width: 16ch; color: var(--ink); }
.city-apply__title em { font-style: normal; color: var(--city-accent); }
.city-apply__sub { font-family: var(--font-body, 'Oswald', sans-serif); font-weight: 300; font-size: 1.05rem; line-height: 1.5; color: var(--ink-muted); max-width: 52ch; margin: 0; }
.city-apply__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0; padding: 0; list-style: none; }
.city-apply__points li { font-family: ui-monospace, monospace; font-size: 13px; color: var(--ink-muted); letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; }
.city-apply__points li::before { content: ""; width: 6px; height: 6px; background: var(--city-accent); flex: none; }
.city-apply__row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.city-apply__art { position: relative; overflow: hidden; background: var(--bg-inset); }
.city-apply__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-apply__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-raised) 0%, rgba(28,24,20,0) 60%); }

/* ============================================================
   LATEST RESULTS
   ============================================================ */
.city-recent { display: grid; grid-template-columns: 0.9fr 1.1fr; border: 1px solid var(--line-strong); }
.city-recent__art { position: relative; background: var(--bg-inset); min-height: 360px; overflow: hidden; }
.city-recent__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-recent__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,11,8,0.7), transparent 55%); }
.city-recent__win { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: #fff; }
.city-recent__win .tag { display: inline-flex; gap: 6px; background: var(--city-accent); color: var(--ink-on-fill); font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 10px; }
.city-recent__win .nm { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: 2.2rem; line-height: 0.9; text-transform: uppercase; }
.city-recent__win .pc { font-family: ui-monospace, monospace; font-size: 12px; color: rgba(244,237,224,0.8); margin-top: 4px; }
.city-recent__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--space-4); }
.city-recent__date { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.city-recent__title { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 0.9; text-transform: uppercase; margin: 0; }
.city-recent__venue { font-size: 14px; color: var(--ink-muted); }
.city-recent__podium { border-top: 1px solid var(--line); margin-top: 4px; }
.city-recent__prow { display: grid; grid-template-columns: 26px 38px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.city-recent__prow .rank { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: 1.4rem; color: var(--ink-faint); }
.city-recent__prow:first-child .rank { color: var(--city-accent); }
.city-recent__prow .av { width: 38px; height: 38px; border: 1px solid var(--line); overflow: hidden; background: var(--bg-inset); }
.city-recent__prow .av img { width: 100%; height: 100%; object-fit: cover; }
.city-recent__prow .who { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; }
.city-recent__prow .who a { color: inherit; }
.city-recent__prow .who span { display: block; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.city-recent__prow .vt { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-muted); }
.city-recent__cta { margin-top: 6px; }

/* ============================================================
   ARTISTS ROSTER
   ============================================================ */
.city-roster { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.city-artist { border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; transition: border-color .12s ease; }
.city-artist:hover { border-color: var(--ink); }
.city-artist__portrait { aspect-ratio: 4/5; background: var(--bg-inset); position: relative; overflow: hidden; }
.city-artist__portrait img { width: 100%; height: 100%; object-fit: cover; }
.city-artist__rank { position: absolute; left: 9px; top: 9px; z-index: 2; font-family: 'Bebas Neue','Oswald',sans-serif; font-size: 1.25rem; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(13,11,8,0.8); color: #fff; }
.city-artist__rank--1 { background: var(--city-accent); color: var(--ink-on-fill); }
.city-artist__body { padding: 10px 12px 12px; display: grid; gap: 5px; }
.city-artist__name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.city-artist:hover .city-artist__name { color: var(--city-accent); }
.city-artist__stats { display: flex; gap: 12px; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-muted); }
.city-artist__stats b { font-family: 'Bebas Neue','Oswald',sans-serif; font-size: 1.05rem; color: var(--ink); margin-right: 3px; }

/* ============================================================
   GALLERY
   ============================================================ */
.city-gallery { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.city-gcell { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--bg-inset); border: 1px solid var(--line); }
.city-gcell img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.city-gcell:hover img { transform: scale(1.05); }
.city-gcell__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 10px 9px; font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: #fff; background: linear-gradient(0deg, rgba(13,11,8,0.85), transparent); }

/* ============================================================
   PAST / ARCHIVE
   ============================================================ */
.city-past { border-top: 1px solid var(--line-strong); }
.city-past__row { display: grid; grid-template-columns: 100px 1fr 170px 140px 90px; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: background .12s ease; }
.city-past__row:hover { background: var(--bg-raised); }
.city-past__date { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.03em; }
.city-past__ev strong { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink); }
.city-past__ev code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); margin-left: 8px; }
.city-past__venue { font-size: 13px; color: var(--ink-muted); }
.city-past__champ { font-size: 13px; display: flex; align-items: center; gap: 7px; color: var(--ink); }
.city-past__champ .dot { width: 8px; height: 8px; background: var(--city-accent); flex: none; }
.city-past__champ.is-empty { color: var(--ink-faint); }
.city-past__link { text-align: right; font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.city-past__link:hover { color: var(--city-accent); }

/* ============================================================
   ACTIVITY — condensed feed
   ============================================================ */
.city-feed { display: grid; gap: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .city-sched__lead { grid-template-columns: 1fr; }
  .city-sched__lead-art { min-height: 220px; }
  .city-apply { grid-template-columns: 1fr; }
  .city-apply__art { min-height: 200px; order: -1; }
  .city-apply__art::after { background: linear-gradient(0deg, var(--bg-raised) 0%, rgba(28,24,20,0) 60%); }
  .city-recent { grid-template-columns: 1fr; }
  .city-recent__art { min-height: 280px; }
  .city-roster { grid-template-columns: repeat(4, 1fr); }
  .city-gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .city-roster { grid-template-columns: repeat(2, 1fr); }
  .city-gallery { grid-template-columns: repeat(3, 1fr); }
  .city-gallery > :nth-child(n+4) { display: none; }
  .city-sched__row { grid-template-columns: 1fr; gap: 12px; }
  .city-sched__row-cta { justify-content: flex-start; }
  .city-past__row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .city-past__venue, .city-past__champ { display: none; }
  .city-recent__prow { grid-template-columns: 22px 32px 1fr auto; }
  .notify-capture__input { max-width: none; }
}