/* ============================================================================
   SHARED STYLESHEET
   Every page pulls from this one file. Change a colour here, it changes
   everywhere.

   DESIGN DIRECTION — "the park map, made live"
   The paper campground map is the park's best asset. The whole site is built
   to look like that map: its pale grass greens, its pond blue, its flat vector
   shapes. Deep forest ink on map paper, with aspen gold for anything you can
   act on. No stock-photo gradients, no drop shadows pretending to be depth.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Colour. The generator rewrites these five from theme.palette; everything
     else in this file is expressed in terms of them. */
  --ink:          #16241d;  /* near-black, body text                        */
  --primary:      #1f4034;  /* header ground, dark surfaces                 */
  --primary-soft: #3d6b52;  /* secondary text on those dark surfaces        */
  --light:        #cadfb6;  /* the light tint                               */
  --light-deep:   #9dbf85;  /* the light tint, shaded                       */
  --paper:        #f2f3ee;  /* page background                              */
  --paper-warm:   #e8eae1;  /* background, recessed                         */
  --accent:       #a9d4e4;  /* water fill, secondary accent                 */
  --accent-deep:  #2b6f8c;  /* links                                        */
  --neutral:      #d9d9d3;  /* roads, pads                                  */
  --neutral-deep: #8c8c85;  /* road edges                                   */
  --action:       #d8a12a;  /* the one action colour                        */
  --action-deep:  #8f670f;  /* action, darkened to clear 4.5:1 as small text */
  --rule:         #c8cbc0;

  /* Type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --measure: 62ch;
}

/* --- 2. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--accent-deep); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* The eyebrow doubles as a map label — set in the utility face, like the
   legend text on a real survey sheet. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-soft);
  margin: 0 0 0.9rem;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--action); color: var(--ink);
  padding: 0.7rem 1.1rem; font-weight: 700; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- 3. Demo ribbon ------------------------------------------------------ */
/* DELETE THIS ELEMENT FROM EVERY PAGE BEFORE GOING LIVE. One line each. */

.demo-ribbon {
  background: var(--ink);
  color: var(--light);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.5rem var(--gutter);
}
.demo-ribbon b { color: var(--action); font-weight: 500; }

/* --- 4. Header ----------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--primary);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.masthead .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px; flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-decoration: none;
  line-height: 1.1;
  margin-right: auto;
}
.wordmark span {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--light-deep);
  font-weight: 400;
}

.nav { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

.nav a {
  color: var(--light);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--light-deep); }
.nav a[aria-current='page'] { color: #fff; border-bottom-color: var(--action); }

/* The one button that matters, and it is the only aspen-gold thing up here. */
.book-btn {
  background: var(--action);
  color: var(--ink) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.6rem 1.15rem !important;
  border-radius: 3px;
  border-bottom: none !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.book-btn:hover { background: #eeb43c; color: var(--ink) !important; }

/* --- 5. Hero ------------------------------------------------------------- */

/* A full-bleed photograph with nothing written over it. The words live in the
   .hero-text band directly beneath, where they are always legible.
   Pages supply only the background-image; the geometry belongs here.
   Bounded in px as well as vh so a short laptop still shows the headline
   without scrolling, and a tall monitor doesn't get a wall of photo. */
.hero-image {
  display: block;
  width: 100%;
  height: clamp(280px, 56vh, 560px);
  background: var(--primary) center / cover no-repeat;
}

.hero-text { padding: clamp(2.6rem, 7vw, 4.5rem) 0; }
.hero-text .wrap > div { max-width: 60ch; }

.hero {
  background: var(--primary) center / cover no-repeat;
  color: var(--paper);
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(3.5rem, 10vw, 7rem);
  position: relative;
  overflow: hidden;
}

/* Contour lines — the map's own vernacular, used as atmosphere rather than
   a gradient. Deliberately faint. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 44%, rgba(202,223,182,0.07) 44.4%, transparent 45.4%),
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 54%, rgba(202,223,182,0.07) 54.4%, transparent 55.4%),
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 64%, rgba(202,223,182,0.07) 64.4%, transparent 65.4%),
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 74%, rgba(202,223,182,0.07) 74.4%, transparent 75.4%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

/* Hero typography is shared by the dark .hero and the .hero-text band that
   sits under a photograph. The band can be light or dark, so the DEFAULT here
   is the light case and the dark contexts override below — the other way round
   left the events page with pale sage text on near-white paper at 1.3:1,
   which is invisible. Any new colour here needs checking against both. */
.hero-coords {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.15em;
  color: var(--primary-soft);
  text-transform: uppercase;
  margin: 0 0 1.6rem;
}

.hero h1,
.hero-text h1 {
  font-size: var(--step-4);
  max-width: 15ch;
  margin-bottom: 1.4rem;
}
.hero h1 em,
.hero-text h1 em {
  font-style: normal;
  display: block;
  color: var(--primary-soft);
}

.hero-lede {
  font-size: var(--step-1);
  color: #3f5147;
  max-width: 46ch;
  line-height: 1.45;
  margin-bottom: 2.2rem;
}

/* Dark contexts: the pale palette, which only works on ink or forest. */
.hero .hero-coords,
.band--ink .hero-coords { color: var(--light-deep); }
.hero .hero-lede        { color: var(--light); }
.hero h1 em             { color: var(--light); }

.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary { background: var(--action); color: var(--ink); }
.btn-primary:hover { background: #eeb43c; }
.btn-ghost { border-color: var(--light-deep); color: var(--light); background: transparent; }
.btn-ghost:hover { border-color: var(--light); color: #fff; }

/* Season strip sits directly under the hero — the single most-asked question */
.season-strip {
  background: var(--light);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  padding: 0.75rem 0;
}
.season-strip .wrap {
  display: flex; gap: 0.6rem 2.4rem; flex-wrap: wrap; justify-content: center;
}

/* --- 6. Sections --------------------------------------------------------- */

.band { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.band--paper { background: var(--paper); }
.band--warm  { background: var(--paper-warm); border-block: 1px solid var(--rule); }
.band--ink   { background: var(--ink); color: var(--paper); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink h1 em, .band--ink h2 em { color: var(--light); }
.band--ink .hero-lede { color: var(--light); }
.band--ink .eyebrow { color: var(--light-deep); }

.band-head { margin-bottom: 2.6rem; }
.band-head h2 { font-size: var(--step-3); max-width: 20ch; }
.band-head p { color: #4a5a50; font-size: var(--step-1); margin-top: 1rem; }
.band--ink .band-head p { color: var(--light); }

/* --- 7. Map ------------------------------------------------------------- */

.mapwrap {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.6rem;
  align-items: start;
}

.legend {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.3rem;
  position: sticky; top: 88px;
}
.band--warm .legend { background: #fff; }

.legend h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-soft);
  margin-bottom: 0.9rem;
}

.filters { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1.2rem; }

.filters label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; padding: 0.34rem 0.4rem;
  border-radius: 3px; cursor: pointer;
}
.filters label:hover { background: var(--paper-warm); }
.filters input { accent-color: var(--accent-deep); width: 15px; height: 15px; margin: 0; }

/* Price, set flush right in the utility face so the column reads as a table */
.filters label b {
  margin-left: auto; padding-left: 0.6rem;
  font-family: var(--mono); font-weight: 500;
  font-size: 0.82rem; color: var(--primary-soft);
  white-space: nowrap;
}
.filters label b.tbd { font-size: 0.7rem; }

.swatch {
  width: 13px; height: 13px; border-radius: 2px;
  border: 1.5px solid var(--neutral-deep); flex: none;
}
.sw-rv       { background: var(--neutral); }
.sw-tent     { background: var(--light-deep); border-color: #6f8f5c; }
.sw-pullthru { background: #e6dcc2; border-color: #b3a377; }
.sw-river    { background: var(--accent); border-color: var(--accent-deep); }
.sw-dry      { background: #e9e4d4; border-color: #a89a72; border-style: dashed; }
.sw-cabin    { background: none; border-style: dashed; border-color: #7b7f78;
               display: inline-block; vertical-align: -1px; margin-right: 0.15rem; }

.legend-note {
  font-size: 0.78rem; color: #5d6d63; line-height: 1.45;
  border-top: 1px solid var(--rule); padding-top: 0.9rem; margin: 0 0 0.8rem;
}
.legend-note:last-child { margin-bottom: 0; }
.legend-note b { color: var(--ink); font-weight: 600; }

.reset {
  background: none; border: none; padding: 0; margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.map-stage {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem;
}
#parkmap { display: block; width: 100%; height: auto; }

/* Site markers.
   The base map is the park's own printed drawing, so the markers add colour
   without hiding it: a translucent disc that rings the printed number, with a
   white edge to lift it off the paper. Nothing is redrawn underneath. */
.site { cursor: pointer; }

.site-ring {
  fill: var(--neutral);
  fill-opacity: 0.62;
  stroke: #fff;
  stroke-width: 2.5;
  transition: fill-opacity 0.15s ease, stroke 0.15s ease, r 0.15s ease;
}
.site-ring.is-pullthru { fill: #d8a12a; }
.site-ring.is-river    { fill: var(--accent-deep); }
.site-ring.is-tent     { fill: #5f8f4a; }
.site-ring.is-backin   { fill: #6b6f6a; }
/* Dry sites carry a dashed edge as well as their own colour: gold and tan are
   close enough to confuse, and a texture cue survives colour-blindness. */
.site-ring.is-dry      { fill: #b39a5c; stroke-dasharray: 5 3; }

.site:hover .site-ring,
.site:focus-visible .site-ring { fill-opacity: 0.9; stroke: var(--ink); }

.site-ring.is-selected {
  fill: var(--action);
  fill-opacity: 1;
  stroke: var(--ink);
  stroke-width: 3;
}

/* Filtered out: faded well back, but still faintly visible so the shape of
   the park does not change as you tick boxes. */
.site-ring.is-dimmed { fill-opacity: 0.06; stroke-opacity: 0.25; }
.site-ring.is-dimmed ~ * { opacity: 0.3; }

/* The disused cabins. Deliberately unlike a site marker: no fill, dashed,
   grey — reads as "noted, but not one of these". */
.cabin-ring {
  fill: none;
  stroke: #7b7f78;
  stroke-width: 2;
  stroke-dasharray: 4 3;
  opacity: 0.85;
}

.feature-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  fill: #59695f; text-anchor: middle; text-transform: uppercase;
  pointer-events: none;
}
.water-label { fill: var(--accent-deep); }

/* Detail panel */
.detail {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--action);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  min-height: 128px;
}
.detail-empty { color: #5d6d63; font-size: 0.92rem; margin: 0; }
.detail h3 { font-size: var(--step-2); margin-bottom: 0.15rem; }
.detail .kind {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary-soft); margin-bottom: 0.9rem;
}
.specs { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.spec dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--primary-soft); margin-bottom: 0.15rem;
}
.spec dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.28rem; }

/* --- 8. Rates ------------------------------------------------------------ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.rates {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--rule); font-size: 0.95rem; min-width: 460px;
}
table.rates caption {
  text-align: left; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-soft);
  padding-bottom: 0.7rem;
}
table.rates th, table.rates td {
  text-align: left; padding: 0.78rem 1rem; border-bottom: 1px solid var(--rule);
}
table.rates thead th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--primary-soft); font-weight: 500;
  background: var(--paper-warm);
}
table.rates tbody tr:last-child td { border-bottom: none; }
table.rates td.num {
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  white-space: nowrap;
}
.tbd {
  font-family: var(--mono); font-size: 0.78rem; color: #7d6640;
  background: #fbf3dd; border: 1px dashed #d8bd70;
  padding: 0.1rem 0.45rem; border-radius: 2px; white-space: nowrap;
}
/* On a dark band the cream chip glares; keep the dashed edge, drop the slab. */
.band--ink .tbd, .foot .tbd {
  color: var(--action); background: rgba(216,161,42,0.12);
  border-color: rgba(216,161,42,0.5);
}

/* --- 9. Cards ------------------------------------------------------------ */

/* CARD GRIDS — the number in the class is the NUMBER OF CARDS, not columns.
   auto-fit was fitting four 250px columns into the 1180px wrap, so a six-card
   section broke 4 + 2 and looked lopsided. Every step below divides its card
   count exactly, so a row is never left short at any width.
     .grid-2   2 cards   -> 2 / 1
     .grid-3   3 cards   -> 3 / 1        (never 2: that would leave 2 + 1)
     .grid-4   4 cards   -> 4 / 2 / 1
     .grid-6   6 cards   -> 3 / 2 / 1
     .grid-8   8 cards   -> 4 / 2 / 1    (never 3: that would leave 3 + 3 + 2)
   Adding a card? Move to the class that matches the new count. */
.grid { display: grid; gap: 1.2rem; }

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
.grid-8 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid-8, .grid-6, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 660px) {
  .grid-2, .grid-3, .grid-4, .grid-6, .grid-8 { grid-template-columns: 1fr; }
}

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.5rem 1.5rem 1.6rem;
}
.band--ink .card {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14);
}
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card p { font-size: 0.94rem; color: #4a5a50; margin-bottom: 0; }
.band--ink .card p { color: var(--light); }

.card-mark {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--action-deep); margin-bottom: 0.7rem;
}
.band--ink .card-mark { color: var(--action); }

.plainlist { list-style: none; padding: 0; margin: 0; }
.plainlist li {
  padding: 0.55rem 0 0.55rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--rule); font-size: 0.94rem;
}
.band--ink .plainlist li { border-bottom-color: rgba(255,255,255,0.13); }
.plainlist li:last-child { border-bottom: none; }
.plainlist li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 8px; border: 2px solid var(--action); border-radius: 50%;
}

/* --- 9b. Venue page ------------------------------------------------------ */

/* Map figure: the venue half of the printed map, shown as a photograph. */
.mapfig {
  margin: 0 0 2.6rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem;
}
.mapfig img { display: block; width: 100%; height: auto; border-radius: 2px; }
.mapfig figcaption {
  font-size: 0.8rem; color: #5d6d63; line-height: 1.5;
  padding: 0.8rem 0.3rem 0.2rem; margin: 0;
}

/* Enquiry form. This form is the venue's whole funnel, so it gets room to
   breathe rather than being squeezed into one column. */
.enquiry { max-width: 760px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.2rem;
  margin-bottom: 1rem;
}
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; } }

.enquiry label,
.field-wide {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.enquiry input,
.enquiry textarea {
  display: block; width: 100%; margin-top: 0.35rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--rule); border-radius: 3px;
  font: inherit; font-weight: 400;
  background: #fff; color: var(--ink);
}
.enquiry textarea { resize: vertical; }
.enquiry input::placeholder,
.enquiry textarea::placeholder { color: #8b968f; }
.enquiry input:focus-visible,
.enquiry textarea:focus-visible { outline: 3px solid var(--action); outline-offset: 1px; }
.enquiry .field-wide { margin-bottom: 1.3rem; }
.enquiry button { justify-self: start; }

/* Headline figures. The venue's capacity numbers are the first thing a couple
   looks for, so they get to be big rather than buried in a table. */
.figures {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin: 0 0 2.4rem;
}
@media (max-width: 720px) { .figures { grid-template-columns: 1fr; } }

.figure-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.5rem;
}
.band--ink .figure-card {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14);
}
.figure-card b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink); margin-bottom: 0.5rem;
}
.band--ink .figure-card b { color: var(--action); }
.figure-card span {
  display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-soft);
  margin-bottom: 0.5rem;
}
.band--ink .figure-card span { color: var(--light-deep); }
.figure-card p { font-size: 0.9rem; color: #4a5a50; margin: 0; }
.band--ink .figure-card p { color: var(--light); }

/* Upcoming shows list */
.shows { list-style: none; padding: 0; margin: 0; }
.shows li {
  display: grid; grid-template-columns: 8.5rem 1fr auto;
  gap: 0.4rem 1.2rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.band--ink .shows li { border-bottom-color: rgba(255,255,255,0.13); }
.shows li:last-child { border-bottom: none; }
@media (max-width: 620px) { .shows li { grid-template-columns: 1fr; } }

.show-date {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--primary-soft); text-transform: uppercase;
}
.band--ink .show-date { color: var(--light-deep); }
.show-act { font-family: var(--display); font-weight: 700; font-size: var(--step-1); }
.show-act small {
  display: block; font-family: var(--body); font-weight: 400;
  font-size: 0.88rem; color: #4a5a50; margin-top: 0.2rem;
}
.band--ink .show-act small { color: var(--light); }
.show-meta { font-family: var(--mono); font-size: 0.8rem; color: var(--primary-soft); }
.band--ink .show-meta { color: var(--light-deep); }

.shows-empty {
  border: 2px dashed var(--rule); border-radius: 3px;
  padding: 2rem; text-align: center; background: var(--paper-warm);
}
.shows-empty p:last-child { margin-bottom: 0; }

/* --- 10. Policies -------------------------------------------------------- */

.policy-block { margin-bottom: 2.2rem; }
.policy-block h3 {
  font-size: var(--step-1); margin-bottom: 0.6rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--light);
}
.policy-block p, .policy-block li { color: #3d4c44; }
.policy-block ul { padding-left: 1.1rem; margin: 0 0 1em; }
.policy-block li { margin-bottom: 0.35rem; max-width: var(--measure); }

/* --- 11. Footer ---------------------------------------------------------- */

.foot { background: var(--ink); color: var(--light); padding: 3.2rem 0 2.2rem; }
.foot a { color: var(--light); }
.foot h2 { color: var(--paper); font-size: var(--step-2); margin-bottom: 0.9rem; }
.foot-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; margin-bottom: 2.4rem;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h3 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--light-deep); margin-bottom: 0.7rem;
  font-weight: 500;
}
.foot-grid p { font-size: 0.92rem; margin-bottom: 0.3rem; }
.foot-base {
  border-top: 1px solid rgba(255,255,255,0.13); padding-top: 1.3rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--primary-soft);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* --- 12. Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .mapwrap { grid-template-columns: 1fr; }
  .legend { position: static; }
  .filters { flex-direction: row; flex-wrap: wrap; }
  .filters label { border: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  /* The nav wraps to two rows here. Sticking that to the top would eat a
     sixth of a phone screen, so it scrolls away instead. */
  .masthead { position: static; }
  .legend { top: 12px; }
  .masthead .wrap { min-height: 0; padding-block: 0.7rem; gap: 0.7rem 1rem; }
  .wordmark { font-size: 1rem; margin-right: 0; width: 100%; }
  .nav { width: 100%; gap: 0.9rem 1.1rem; }
  .nav a { font-size: 0.86rem; }
  .book-btn { margin-left: auto; }
  .hero h1 { max-width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
}

@media print {
  /* The legend stays: it is the map's colour key and carries the prices, so
     a printed map is useless without it. Only its controls go. */
  .masthead, .demo-ribbon, .hero-actions, .book-btn,
  .hero-image, .filters input, .reset { display: none; }

  body { background: #fff; }
  .band, .hero-text { padding-block: 1.2rem; }
  .mapwrap { grid-template-columns: 1fr; }
  .legend { position: static; border: 1px solid #999; break-inside: avoid; }
  .filters label { padding-left: 0; }
  .map-stage, .card { break-inside: avoid; }

  /* Print the destination of a link the reader cannot click. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}