/* city.css -- the public pages: the city pages (city.html, one city; cities.html, the list of
   cities) and the venue pages (venue.html, one venue; venues.html, the list of venues), which are
   laid out the same way. The venue pages' own rules are at the foot of this file.
   (JR, 2026-09-28: "Lets do the city pages and ill edit from there".)
   These pages wear the first page's clothes: they load welcome.css and use its bar, its stage,
   its buttons, its number tiles, its locked contact box and its footer. This file holds only what
   the first page has no rule for. Colours come from tokens.css by name. Nothing on these pages
   moves except the slow drift of the stage lights, which stops for reduced motion (welcome.css). */

/* the stage band at the top (dark at night, paper by day): room for the fixed bar above, and the words held to a readable width */
.city-hero { padding: calc(132px + var(--beta-h)) 0 72px; }
.city-hero h1 { font-size: clamp(38px, 5.6vw, 76px); line-height: 1; margin: 12px 0 20px; color: var(--stage-ink); }
.city-hero .lede { max-width: 62ch; }
.city-hero .hero-ctas { margin: 28px 0 18px; }
/* the trail back: MuniStage / Florida gigs / the city */
.crumbs { margin: 0 0 24px; font-size: var(--t-small); color: var(--stage-soft); }
.crumbs a { color: var(--stage-soft); text-decoration: none; }
.crumbs a:hover { color: var(--stage-ink); }
.crumbs span { margin: 0 6px; opacity: .6; }
/* "City/Govt gigs" over the name, in the same brass as on the first page's headline */
.city-kicker { margin: 0; font: 700 clamp(16px, 2vw, 26px)/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--stage-brass); }

/* the sections under the band */
.city-numbers { padding: 80px 0 40px; }
.city-who { padding: 56px 0; }
.city-more { padding: 56px 0 110px; }
.city-list { padding-top: 80px; }
/* the number tiles: three across at most, however many the city has */
.city-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 900px; margin-top: 0; }
/* (on the first page the first tile is made double width on a narrow screen; here every tile is the
   same width, one under another on a phone) */
.city-stats .stat:first-child { grid-column: auto; }
.city-say { margin: 0 0 8px; max-width: 65ch; line-height: 1.6; color: var(--ink-soft); }
.city-who .locked { background: var(--bg-raised); padding: 20px 22px; }
.city-cta { margin: 28px 0 0; }

/* the links to the other cities: a grid of plain cards, the city's name over its count */
.city-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.city-link { display: block; padding: 18px 20px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-fast), transform var(--dur-move) var(--ease); }
.city-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.city-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.city-link b { display: block; font: 700 20px/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.city-link span { display: block; margin-top: 6px; font-size: var(--t-small); color: var(--ink-soft); }

/* the logo and name in the bar and footer are a link on these pages (on the first page the logo is
   the music switch); the name is dark on the solid bar */
.citypage .brand { text-decoration: none; }
.citypage .bar .brand .word { color: var(--ink); }

/* a plain outlined button for the light part of a page ("Every Florida room MuniStage follows");
   the first page's outlined button is made for the stage */
.btn.ghost-light { height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink); text-decoration: none; font: 600 15px/1 var(--font);
  transition: border-color var(--dur-fast); }
.btn.ghost-light:hover { border-color: var(--accent); }

/* ---------------- the venue pages ---------------- */
/* the venue's city and state, under its name */
.venue-place { margin: -8px 0 18px; font: 600 clamp(17px, 1.8vw, 22px)/1.2 var(--font); color: var(--stage-soft); }
.venuepage .city-hero h1 { font-size: clamp(34px, 5vw, 68px); }
/* the locked box's labels are longer on a venue page ("Seats sold, show by show"), so their column is
   wider here, to keep each on one line */
.venuepage .l-row { grid-template-columns: 230px 1fr; }
/* THE RATINGS BOX: the four ratings, each a coloured label with a sentence beside it, and under a
   rule the line for this room, its label blurred. The colours are the first page's own rating
   colours (welcome.css, .s-strong and so on), so a rating looks the same wherever it is seen. */
.venue-rate { padding-bottom: 24px; }
.rate-box { margin-top: 20px; padding: 8px 22px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--line); }
.rate-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); line-height: 1.5; color: var(--ink-soft); }
.rate-row:first-child { border-top: 0; }
.rate-row .spill { justify-self: start; white-space: nowrap; }
.rate-row b { color: var(--ink); }
.s-none { background: var(--bg); color: var(--ink-soft); border: 1px dashed var(--line); }
.s-hidden { background: var(--line); color: var(--ink-soft); user-select: none; }
.rate-this { border-top: 2px solid var(--line); }
.rate-lock { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 4px 12px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font: 600 var(--t-small)/1.4 var(--font); color: var(--ink); white-space: nowrap; }

@media (max-width: 600px) {
  .venuepage .l-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .venuepage .locked { padding-bottom: 56px; }        /* room for "Members see..." under the rows, not over them */
  .rate-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rate-lock { margin: 8px 0 0; }
  .city-hero { padding: calc(108px + var(--beta-h)) 0 56px; }
  .city-numbers { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .city-link { transition: none; } }