/* ==========================================================================
 * lc-stages.css — the venue page and the index of theatres, music halls and arenas.
 *
 * THE USAGE SCENE IS NOT THE ONE lc-garages.css WAS BUILT FOR, AND THE TOKENS ARE
 * STILL ITS TOKENS. A garage page is read standing in daylight with four seconds
 * and one question. A venue page is read at home in the evening by somebody
 * deciding whether to spend eighty dollars on two seats — a longer look, a
 * photograph that is the argument, and only then the practical block. The two
 * verticals link to each other in both directions and a reader crosses between
 * them constantly, so the palette, the spacing scale, the type scale and the
 * horizontal-rule vocabulary are inherited unchanged. What differs is emphasis,
 * not system.
 *
 * INHERITED VERBATIM from lc-garages.css, which took them from lc-tours.css:
 *   · the token block (ink/muted/line/bg/bg-soft/accent/gold/serif/sans/display)
 *   · near-black ink, never the theme's body grey
 *   · light only, 48px touch targets, nothing carried by colour alone
 *   · the small uppercase sans label used for every field name
 *   · the two-scrim hero stack and the house fallback ground
 *   · the index construction: name left, distance right in tabular figures, meta under
 *   · the drawn arrow on the back link
 *
 * WHAT THIS FILE DECIDES FOR ITSELF, and why each is not a copy:
 *   · The facts sheet has no headline figure. A garage's first two facts are money
 *     and get set at 2rem; a venue's are an address and a phone number, and a street
 *     address set at 2rem is a shout with nothing behind it. Every row here is a
 *     spec row.
 *   · The ticket link is the page's action and the garage pages have no equivalent,
 *     so this file draws the one filled object on a surface otherwise made of rules.
 *     It is the only one, which is what makes it read as the action.
 *   · The index is a finder with a card grid, which garages has no counterpart for.
 *
 * ⛔ NO COPY IS COMPOSED IN THIS FILE. No generated headings, no labels, no hint
 * sentences. Page language belongs in the template where an editor can reach it.
 *
 * ⛔ NOTHING HERE DECLARES --uk-inverse AND NOTHING HERE TOUCHES THE HEADER. The
 * navigation picks its own ink by sampling what sits under the bar; the templates
 * state uk-light on the photographed band and uk-dark on the pale body, which is
 * what the sampler reaches. A ground painted on the stuck navbar would sit under a
 * backdrop-filter that is set elsewhere and drop the menu links to ~2:1.
 * ========================================================================== */

.lc-stg,
.lc-stg-arch {
  --lc-ink: #1a1a1a;
  --lc-muted: #6b6b6b;
  --lc-line: #e5e5e5;
  --lc-bg: #fff;
  --lc-bg-soft: #f6f7f5;
  --lc-accent: #2f6f57;
  --lc-gold: #b8863b;
  --lc-serif: "PT Serif", Georgia, serif;
  --lc-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --lc-display: "Playfair Display", Georgia, serif;

  /* Secondary text one step darker than --lc-muted. Same reason as the sibling
     file: the muted grey is the first thing to go when a screen is in the sun,
     and a distance or a rate is read outdoors even when the page is not. */
  --lcs-2nd: #4a4a4a;

  /* The width the prose, the spec rows and the card grid are set to. */
  --lcs-measure: 1120px;

  /* The room the overlaid navigation occupies at the top of a band, stated once
     because several rules depend on it and a number typed several times drifts.
     The bar is 80px at every width — the mobile header carries only the wordmark
     and both measure 80.

     --lc-storm-h is the storm ribbon's live height, published on the document
     element and 0 on a page that never loads it. The ribbon renders inside the
     header, which is absolutely positioned, so it lowers the menu without moving
     the document. A flat 80px looks correct until a storm is live and then puts
     the title inside the navigation — a failure that comes and goes with the
     weather and so never reproduces on the day anyone looks for it. */
  --lcs-navroom: calc(80px + var(--lc-storm-h, 0px));

  /* The eyebrow's two golds, derived from the house gold rather than typed as
     literals beside it, so a change to the palette reaches them. The house gold
     at full strength does not clear 4.5:1 on either dark ground; lifting it
     toward white is what makes it legible, and the photographed band needs more
     lift than the flat one because it sits over a moving amount of light.
     ⚠ Where color-mix is unsupported the eyebrow inherits the band's white,
     which is legible on both grounds — the failure costs the accent, not the
     line. */
  --lcs-eyebrow-flat: color-mix(in srgb, var(--lc-gold) 56%, #fff);
  --lcs-eyebrow-photo: color-mix(in srgb, var(--lc-gold) 40%, #fff);
}

/* Scoped, never global. A document-wide box-sizing reset makes links on this site
   render wider than they were asked to. */
.lc-stg,
.lc-stg *,
.lc-stg *::before,
.lc-stg *::after,
.lc-stg-arch,
.lc-stg-arch *,
.lc-stg-arch *::before,
.lc-stg-arch *::after { box-sizing: border-box; }

.lc-stg,
.lc-stg-arch { color-scheme: light; }

/* The browser surfaces nobody draws and everybody ships with the default. */
.lc-stg ::selection,
.lc-stg-arch ::selection { background: rgba(47, 111, 87, .17); color: var(--lc-ink); }

.lc-stg a:focus-visible,
.lc-stg-arch a:focus-visible {
  outline: 3px solid var(--lc-accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* =====================================================================
 * SHARED — the small uppercase label. Every field name, group heading and
 * eyebrow on both surfaces is this object, so a fact reads the same
 * wherever it appears and the two verticals read as one site.
 *
 * The eyebrow is kept rather than dropped: it carries the town and the
 * kind, which the title does not, and it is what the sibling vertical's
 * hero prints in the same position. It also normalises the source data,
 * where the kind is stored lower-case.
 * ===================================================================== */

.lc-stg__factlist dt,
.lc-stg__h3,
.lc-stg__eyebrow {
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--lcs-2nd);
}

/* =====================================================================
 * THE VENUE PAGE
 *
 * The theme's container is flattened to nothing by the template, so this
 * page owns its full width and supplies its own gutters. That is what
 * lets the hero and the map run edge to edge while the type stays on one
 * measure — done with padding rather than with a negative margin or a
 * viewport width, either of which loops against the sticky header.
 * ===================================================================== */

.lc-stg {
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-family: var(--lc-serif);
  overflow-x: clip;
}

.lc-stg__body > section,
.lc-stg__heroinner,
.lc-stg__back {
  padding-inline: max(20px, calc((100% - var(--lcs-measure)) / 2));
}

/* ------------------------------------------------------------ the hero */

/* A SUBJECT HERO. The photograph shows this room, and looking at it is how a
 * reader decides whether to buy a ticket — so it earns real height, unlike the
 * ground under an index's title. The proportions are one step taller than the
 * sibling vertical's, because a garage photograph is a fact about a door and an
 * auditorium photograph is the argument.
 *
 * It stops well short of the fold on every screen so the block below stays
 * visible. A band that fills the viewport reads as a splash page and hides the
 * one thing a reader scrolled for. */

.lc-stg__hero {
  position: relative;
  background: var(--lc-bg);
}

/* THE TOP OF THE BAND IS THE MENU'S ROOM, NOT THE TYPE'S.
 *
 * The template tucks the navigation over this band and hides the spacer the theme
 * injects to hold room for an overlaid navbar. The band now starts at the very top
 * of the document with the menu floating on it, so the type's air is measured from
 * the FOOT of the navigation rather than from the top of the element. */
.lc-stg__heroinner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(var(--lcs-navroom) + 26px);
  padding-bottom: 32px;
}
@media (min-width: 720px) {
  .lc-stg__heroinner { padding-top: calc(var(--lcs-navroom) + 34px); padding-bottom: 48px; }
}

.lc-stg__eyebrow { margin: 0 0 14px; letter-spacing: .18em; }

.lc-stg__title {
  margin: 0;
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 6.4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 18ch;
}

.lc-stg__lead {
  margin: 18px 0 0;
  font-size: 1.14rem;
  line-height: 1.6;
  max-width: 38rem;
  text-wrap: pretty;
}

/* --- no photograph: the fallback ground -------------------------------- */

/* ⛔ THIS IS THE RULE THAT KEEPS THE PAGE FROM SHIPPING WITHOUT A NAVIGATION.
 * The template tucks the header over this band unconditionally, and a transparent
 * navigation over a white page is a 200 response with the logo and every link
 * invisible. The band therefore always paints a ground, whether or not a
 * photograph resolved.
 *
 * #1d2721 is the ground the site's hero service paints under every hero when an
 * image does not resolve, so a venue with no photograph reads as the same house
 * furniture rather than as a page missing a picture. .uk-light is already on the
 * element, which is what makes white type correct here.
 *
 * With no subject there is nothing worth height, so this state is a masthead
 * strip at the height its own type needs and not a pixel more. The pages this
 * catches are drafts awaiting a photograph; the fix for one is a photograph, not
 * a taller strip. */
.lc-stg__hero:not(.lc-stg__hero--img) {
  background-color: #1d2721;
  /* A near-monochrome tonal shift rather than one flat swatch. Perfectly even
     fill is the tell that a band was typed rather than made. */
  background-image: linear-gradient(165deg, #24322c 0%, #1d2721 48%, #151d18 100%);
}
.lc-stg__hero:not(.lc-stg__hero--img) .lc-stg__title { color: #fff; }
.lc-stg__hero:not(.lc-stg__hero--img) .lc-stg__lead { color: rgba(255, 255, 255, .84); }
.lc-stg__hero:not(.lc-stg__hero--img) .lc-stg__eyebrow { color: var(--lcs-eyebrow-flat); }

/* --- with a photograph: the band ---------------------------------------- */

.lc-stg__hero--img {
  display: flex;
  align-items: flex-end;
  min-height: max(380px, 52vh);
  background-color: #121814;
  background-image: var(--lc-stg-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 960px) {
  .lc-stg__hero--img { min-height: max(460px, 62vh); }
}

/* TWO SCRIMS IN ONE STACK, EACH DOING ONE JOB, AND THE MIDDLE LEFT ALONE.
 *
 * The foot holds the title. The top one is the navigation's, and it is needed
 * because the menu is now ON the photograph: an idle navigation link is set at
 * 40% white, which carries over a dark auditorium and disappears over a sunlit
 * facade — and half these venues are photographed from the street in daylight.
 * It is measured in pixels down from the top so it covers the bar itself and
 * nothing more, rather than as a percentage of a band whose height moves with
 * the viewport.
 *
 * The middle stays near-clear on purpose. An even wash over the whole frame
 * turns every auditorium into the same dark rectangle, and the photograph is the
 * reason this hero earns its height at all. */
.lc-stg__hero--img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 14, 11, .56) 0,
      rgba(10, 14, 11, .30) calc(var(--lcs-navroom) + 10px),
      rgba(10, 14, 11, 0) calc(var(--lcs-navroom) + 170px)),
    linear-gradient(to top,
      rgba(12, 18, 14, .88) 0%,
      rgba(12, 18, 14, .48) 44%,
      rgba(12, 18, 14, .06) 88%);
}

/* The band is flex-end, so this padding is a floor rather than a gap: it costs
   nothing while the photograph is taller than its contents, and it is the only
   thing standing between a long title and the menu on a narrow screen, where the
   same source is sliced deeper and the band is shortest. */
.lc-stg__hero--img .lc-stg__heroinner {
  padding-top: calc(var(--lcs-navroom) + 40px);
  padding-bottom: 40px;
}
.lc-stg__hero--img .lc-stg__eyebrow { color: var(--lcs-eyebrow-photo); }
.lc-stg__hero--img .lc-stg__title { color: #fff; }
.lc-stg__hero--img .lc-stg__lead { color: rgba(255, 255, 255, .88); }

/* ------------------------------------------------------------ the body */

.lc-stg__body { width: 100%; }

/* WHAT THE ROOM IS, AND THE FACTS ABOUT IT, SIT SIDE BY SIDE ONCE THERE IS ROOM.
 *
 * Stacked, they are a 640px ribbon of type down the left of a 1120px measure with
 * the right half empty for the whole white region — the shape a page takes when a
 * column measure meant for prose is applied to a page that also carries indexes.
 * Paired, the description reads as the description and the sheet reads as a rail,
 * and the ticket link arrives on the first screen beside the paragraph that made
 * the case for it rather than a scroll below it.
 *
 * The gutter moves onto the grid's outer tracks here, because two sections each
 * padding themselves to a share of the measure would each compute that share
 * against their own column and align with nothing. The map and the walk keep
 * their own padding: they run edge to edge and their grounds must reach the
 * viewport, so they span every track and inset their contents themselves. */
@media (min-width: 1040px) {
  .lc-stg__body {
    display: grid;
    align-items: start;
    grid-template-columns:
      max(20px, calc((100% - var(--lcs-measure)) / 2))
      minmax(0, 1.3fr)
      64px
      minmax(0, 1fr)
      max(20px, calc((100% - var(--lcs-measure)) / 2));
  }

  .lc-stg__prose,
  .lc-stg__facts,
  .lc-stg__on,
  .lc-stg__park,
  .lc-stg__back { padding-inline: 0; }

  .lc-stg__prose { grid-column: 2; grid-row: 1; padding-top: 54px; }
  .lc-stg__facts { grid-column: 4; grid-row: 1; padding-top: 58px; }

  /* A venue whose record carries no description leaves the sheet as the first
     child, and a rail alone in the right column with nothing beside it is a
     column of hairlines against an empty half. It takes the whole measure. */
  .lc-stg__facts:first-child { grid-column: 2 / 5; }

  .lc-stg__on,
  .lc-stg__park,
  .lc-stg__back { grid-column: 2 / 5; }
  .lc-stg__mapwrap,
  .lc-stg__walk { grid-column: 1 / -1; }

  /* In the rail the label goes back above its value. The name-beside-value form
     below needs about eleven rems for the label and a readable column beside it,
     and the rail has neither — a street address in what is left of it breaks
     across three lines in a way that reads as a fault rather than as wrapping. */
  .lc-stg__facts:not(:first-child) .lc-stg-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: start;
  }
}

.lc-stg__h2 {
  margin: 0 0 20px;
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.4vw, 1.95rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--lc-ink);
  max-width: 28ch;
  text-wrap: balance;
}

/* ----------------------------------------------------------- the prose */

.lc-stg__prose {
  padding-top: 40px;
  padding-bottom: 8px;
}
@media (min-width: 720px) { .lc-stg__prose { padding-top: 54px; } }

.lc-stg__prose p {
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--lc-ink);
  max-width: 40rem;
  text-wrap: pretty;
}
.lc-stg__prose p:last-child { margin-bottom: 0; }

/* The opening paragraph carries what the room is, and on most of these records
   it is the only paragraph. Set one step up so the page opens on a statement
   rather than on a block of even body text. */
/* Sized against the viewport rather than flat, because the step up that reads as
   a lead on a laptop is a step up to forty characters a line on a phone, where
   the paragraph is already the full width of the screen. */
.lc-stg__prose > p:first-child {
  font-size: clamp(1.08rem, .98rem + .55vw, 1.24rem);
  line-height: 1.55;
  max-width: 38rem;
}

.lc-stg__prose a {
  color: var(--lc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(47, 111, 87, .4);
  transition: text-decoration-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg__prose a:hover { text-decoration-color: var(--lc-accent); }

/* ----------------------------------------------------------- the facts */

.lc-stg__facts {
  padding-top: 34px;
  padding-bottom: 44px;
}
@media (min-width: 720px) { .lc-stg__facts { padding-top: 42px; padding-bottom: 56px; } }

/* A BOUNDED OBJECT: heavy rule top and bottom, hairlines inside. What follows
 * it then reads as its own block rather than as more rows.
 *
 * ⛔ NO HEADLINE FIGURE, WHICH IS WHERE THIS PARTS COMPANY WITH THE GARAGE PAGE.
 * There the first two rows are money and are set at 2rem, because a driver came
 * for a price. Here the rows are an address, a seat count and a phone number;
 * none of them is what brought a reader to the page, and a street address set at
 * display size is emphasis with nothing behind it. Every row is a spec row. */
.lc-stg__factlist {
  margin: 0;
  border-top: 2px solid var(--lc-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.lc-stg-fact {
  padding: 15px 0;
  border-bottom: 1px solid var(--lc-line);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.lc-stg-fact:last-child { border-bottom: 2px solid var(--lc-ink); }

@media (min-width: 720px) {
  .lc-stg-fact {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0 32px;
    align-items: baseline;
  }
}

.lc-stg-fact dt { margin: 0; }

/* Lining figures because a value on this sheet is a house number or a seat count,
   and old-style figures inside a street address read as a typesetting slip. */
.lc-stg-fact dd {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--lc-ink);
  max-width: 42rem;
  text-wrap: pretty;
  font-variant-numeric: lining-nums;
}

.lc-stg-fact dd a {
  color: var(--lc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg-fact dd a:hover { color: var(--lc-ink); }

/* A phone number is tapped, so it gets a target rather than a line of text. */
.lc-stg-fact dd a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--lc-sans);
  font-size: .98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ------------------------------------------------------- the two links */

/* THE ONE FILLED OBJECT ON A SURFACE MADE OF RULES, AND IT IS FILLED BECAUSE IT
 * IS THE ACTION. Everything else on this page is a hairline, a label or a line
 * of type; a reader's eye finds the single solid shape without being told. That
 * only works while it stays single, so nothing else in this file gets a ground.
 *
 * The website link beside it is deliberately NOT a second button. The template
 * only prints it where it goes somewhere the ticket link does not, and two
 * equally-weighted buttons make a reader choose between them for nothing. */
.lc-stg__links {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.lc-stg__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  background: var(--lc-accent);
  color: #fff;
  font-family: var(--lc-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--lc-accent);
  transition: background var(--lc-t-fast, .18s) var(--lc-ease, ease),
              border-color var(--lc-t-fast, .18s) var(--lc-ease, ease),
              color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg__cta:hover,
.lc-stg__cta:focus-visible {
  background: var(--lc-ink);
  border-color: var(--lc-ink);
  color: #fff;
}
.lc-stg__cta:active { background: #24543f; border-color: #24543f; }

.lc-stg__site {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--lc-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lcs-2nd);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(26, 26, 26, .28);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease),
              text-decoration-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg__site:hover,
.lc-stg__site:focus-visible { color: var(--lc-accent); text-decoration-color: var(--lc-accent); }

/* WHERE THE VENUE PUBLISHES NO SEPARATE TICKET ADDRESS, ITS SITE IS THE ACTION.
   Most of these records carry one URL that does both jobs, and the template
   correctly prints it once — which leaves a page about deciding on an evening
   out ending in a quiet grey domain name. Alone, it takes the weight the ticket
   link would have had. It does not take the ticket link's filled ground: the
   text is a domain rather than an instruction, and a solid button labelled with
   an address says nothing about what pressing it does. */
.lc-stg__links > .lc-stg__site:only-child {
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--lc-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--lc-ink);
}
.lc-stg__links > .lc-stg__site:only-child:hover,
.lc-stg__links > .lc-stg__site:only-child:focus-visible {
  color: var(--lc-accent);
  text-decoration-color: var(--lc-accent);
}

/* ------------------------------------------------------ the provenance */

/* A claim that a venue is open, with no date on it, is a claim nobody can trust,
   so the stamp is set as a block of the page with a rule of its own rather than
   shrunk into small print. */
.lc-stg__checked {
  margin: 30px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--lc-line);
  font-family: var(--lc-sans);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--lcs-2nd);
  font-variant-numeric: tabular-nums lining-nums;
}
.lc-stg__checked a {
  color: var(--lcs-2nd);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(26, 26, 26, .3);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg__checked a:hover { color: var(--lc-accent); text-decoration-color: var(--lc-accent); }

/* --------------------------------------------------------- the parking */

/* THE PRACTICAL BLOCK, AND ON A SHOW NIGHT IT IS THE MOST USEFUL THING HERE.
 * Set as an index rather than a list: the name at the left, the distance
 * right-aligned in tabular figures so the distances form a rail the eye runs
 * down, the rate beneath. Same construction as the walk index below and as the
 * garage pages' own, because two indexes that measured differently would read as
 * two components. */
.lc-stg__on,
.lc-stg__park {
  padding-top: 8px;
  padding-bottom: 48px;
}
@media (min-width: 720px) { .lc-stg__on, .lc-stg__park { padding-bottom: 60px; } }

.lc-stg__onlist,
.lc-stg__parklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 48px;
  border-top: 2px solid var(--lc-ink);
}
@media (min-width: 720px) {
  .lc-stg__onlist,
  .lc-stg__parklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lc-stg__onitem,
.lc-stg__parkitem,
.lc-stg__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--lc-line);
  min-height: 48px;
}

.lc-stg__onitem > a,
.lc-stg__parkitem > a,
.lc-stg__item > a:not(.lc-stg__thumb) {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--lc-serif);
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--lc-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 26, 26, .22);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease),
              text-decoration-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg__onitem > a:hover,
.lc-stg__onitem > a:focus-visible,
.lc-stg__parkitem > a:hover,
.lc-stg__parkitem > a:focus-visible,
.lc-stg__item > a:not(.lc-stg__thumb):hover,
.lc-stg__item > a:not(.lc-stg__thumb):focus-visible {
  color: var(--lc-accent);
  text-decoration-color: var(--lc-accent);
}

.lc-stg__dist {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--lc-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lcs-2nd);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.lc-stg__meta {
  grid-column: 1;
  grid-row: 2;
  margin-top: 3px;
  font-family: var(--lc-sans);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--lc-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ------------------------------------------------------------- the map */

/* Edge to edge, and it is the page's second picture: the hero says what the room
   looks like, this says where it sits in relation to the cars.
   The gutter rule above matches on `.lc-stg__body > section`, so undoing it needs
   a selector of at least equal weight rather than the bare class. */
.lc-stg__body > section.lc-stg__mapwrap {
  padding-inline: 0;
  margin: 0;
}

.lc-stg__map {
  height: clamp(300px, 46vh, 460px);
  background: var(--lc-bg-soft);
  border-top: 1px solid var(--lc-line);
  border-bottom: 1px solid var(--lc-line);
  z-index: 0;   /* Leaflet panes sit at 400+; keep the whole map under the header */
}

/* ⭐ AN UNDRAWN MAP IS A STATE, NOT A HOLE. No map library is enqueued on these
 * pages yet, so today this container renders with pins in a data attribute and
 * nothing inside it — and an empty grey rectangle four hundred pixels tall,
 * ruled top and bottom, reads as a broken page rather than as a missing feature.
 * :empty is exactly the "nothing has been drawn here" state: the section
 * collapses while the container has no children, and the day a library
 * initialises into it and injects its panes the map appears at its designed
 * height with no change to this file. */
.lc-stg__map:empty { display: none; }
.lc-stg__body > section.lc-stg__mapwrap:has(> .lc-stg__map:empty) { display: none; }

/* ------------------------------------------------------------ the walk */

/* Up to twelve places in two groups, and the failure mode is a link dump. Set as
   an index instead, on its own ground so it reads as a different question from
   the parking above it: that block is how to arrive, this is what to do with the
   hour before the curtain. */
.lc-stg__walk {
  padding-top: 46px;
  padding-bottom: 54px;
  background: var(--lc-bg-soft);
  border-top: 1px solid var(--lc-line);
  border-bottom: 1px solid var(--lc-line);
}

.lc-stg__walk .lc-stg__h2 { max-width: 30ch; margin-bottom: 30px; }

.lc-stg__walkgroup { margin: 0 0 38px; }
.lc-stg__walkgroup:last-child { margin-bottom: 0; }

.lc-stg__h3 {
  margin: 0 0 4px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--lc-ink);
  color: var(--lc-ink);
}

.lc-stg__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  column-gap: 48px;
}

/* THE CROSS-PROMOTED ROWS CARRY A PICTURE, AND THAT IS NOT DECORATION. A list of
 * names and distances is a cross-promotion nobody reads; the thumbnail leads the
 * row so the eye lands on the place rather than on a line of type. The template
 * drops any row whose record has no photograph, because a half-illustrated list
 * reads as broken — which is worse than either a full one or none.
 *
 * The row keeps the index construction the rest of the page uses. Only a picture
 * column is added in front of it. */
.lc-stg__parkitem,
.lc-stg__item {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
  padding-block: 10px;
}
.lc-stg__parkitem > .lc-stg__thumb,
.lc-stg__item > .lc-stg__thumb { grid-column: 1; grid-row: 1 / span 2; }
.lc-stg__parkitem > a:not(.lc-stg__thumb),
.lc-stg__item > a:not(.lc-stg__thumb) { grid-column: 2; grid-row: 1; }
.lc-stg__parkitem > .lc-stg__dist,
.lc-stg__item > .lc-stg__dist { grid-column: 3; grid-row: 1; }
.lc-stg__parkitem > .lc-stg__meta,
.lc-stg__item > .lc-stg__meta { grid-column: 2 / -1; grid-row: 2; }

.lc-stg__thumb {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: var(--lc-line);
}
.lc-stg__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--lc-t-base, .32s) var(--lc-ease, ease);
}
.lc-stg__item:hover .lc-stg__thumb img { filter: contrast(1.06) saturate(1.12) brightness(1.03); }

/* ------------------------------------------------------------ the back */

.lc-stg__back { border-bottom: 1px solid var(--lc-line); }

.lc-stg__back a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 16px 0;
  font-family: var(--lc-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-ink);
  text-decoration: none;
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg__back a:hover { color: var(--lc-accent); }

/* Drawn, not a character: two sides of a square turned forty-five degrees. */
.lc-stg__back a::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--lc-t-base, .32s) var(--lc-ease, ease);
}
.lc-stg__back a:hover::after { transform: rotate(45deg) translate3d(3px, -3px, 0); }

/* =====================================================================
 * THE INDEX
 *
 * A FINDER, AND THE READER CAME FOR THE GRID. The band at the top is a
 * ground for the title plus the room the menu now takes, and no more:
 * no viewport height, no invented air. Every pixel spent above the
 * filters is a pixel of venues pushed off the first screen.
 * ===================================================================== */

.lc-stg-arch {
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-family: var(--lc-serif);
  overflow-x: clip;
}

.lc-stg-arch__heroinner,
.lc-stg-arch__filters,
.lc-stg-arch__grid {
  padding-inline: max(20px, calc((100% - var(--lcs-measure)) / 2));
}

/* ------------------------------------------------------------ the band */

/* ⛔ THE GROUND IS PAINTED WHETHER OR NOT A PHOTOGRAPH RESOLVED, for the same
 * reason the venue page's is: the navigation is tucked over this band, and
 * transparency over a white page renders the logo and every link invisible.
 *
 * ⚠ In practice the fallback is the state this band is nearly always in. The
 * template picks a hero from this vertical's own records and excludes anything
 * the grid below will draw — which on the unfiltered index is every record it
 * has, so the loop finds nothing. That dedupe is right and the two verticals it
 * was written after both shipped the bug it prevents; the consequence is simply
 * that this ground has to be finished work rather than a stopgap. */
.lc-stg-arch__hero {
  position: relative;
  background-color: #1d2721;
  background-image: linear-gradient(165deg, #24322c 0%, #1d2721 48%, #151d18 100%);
}

.lc-stg-arch__hero.has-img {
  display: flex;
  align-items: flex-end;
  background-color: #121814;
  background-image: var(--lc-stg-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The navigation's scrim only. There is no second one at the foot: this band is
   short enough that the title sits inside the reach of the first. */
.lc-stg-arch__hero.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 14, 11, .62) 0,
    rgba(10, 14, 11, .52) calc(var(--lcs-navroom) + 10px),
    rgba(10, 14, 11, .40) 100%);
}

.lc-stg-arch__heroinner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(var(--lcs-navroom) + 26px);
  padding-bottom: 30px;
}
@media (min-width: 720px) {
  .lc-stg-arch__heroinner { padding-top: calc(var(--lcs-navroom) + 34px); padding-bottom: 42px; }
}

.lc-stg-arch__title {
  margin: 0;
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
  max-width: 20ch;
}

.lc-stg-arch__body { width: 100%; background: var(--lc-bg); }

/* --------------------------------------------------------- the filters */

/* TWO QUESTIONS IN A ROW — what kind of room, and which town — and the template
 * gives them no visible labels. They are separated by scale and by a hairline
 * instead: the kind row is the primary filter and is set a step larger, the town
 * row sits under a rule. A reader gets "every kind · theatre · concert hall"
 * then "everywhere · Charleston · Savannah" and needs nothing said.
 *
 * The selected state is carried by THREE channels — a 2px rule, near-black ink
 * and a weight step — never by colour alone. The rule is present at all times as
 * a transparent border, so selecting a chip never reflows the row under the
 * pointer. */
.lc-stg-arch__filters {
  padding-top: 30px;
  padding-bottom: 0;
}
@media (min-width: 720px) { .lc-stg-arch__filters { padding-top: 38px; } }

.lc-stg-arch__chips {
  list-style: none;
  margin: 0;
  padding: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

.lc-stg-arch__chips--town {
  border-top: 1px solid var(--lc-line);
  padding-top: 4px;
  padding-bottom: 16px;
  gap: 0 24px;
}

/* ⚠ THE RULE THAT CLOSES THE FILTERS GOES ON THE LAST ROW, NOT ON THE BLOCK.
   The gutter is padding on the nav, so a border declared there paints across the
   whole viewport and lands two hundred pixels wide of the hairline above it and
   of every card below it. The lists are already inside that padding. */
.lc-stg-arch__chips:last-child { border-bottom: 2px solid var(--lc-ink); }

.lc-stg-chip {
  display: inline-flex;
  align-items: flex-end;
  min-height: 46px;
  padding-bottom: 7px;
  font-family: var(--lc-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--lcs-2nd);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease),
              border-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg-chip:hover,
.lc-stg-chip:focus-visible { color: var(--lc-ink); border-bottom-color: var(--lc-line); }

.lc-stg-chip.is-on {
  color: var(--lc-ink);
  font-weight: 700;
  border-bottom-color: var(--lc-ink);
}

.lc-stg-arch__chips--town .lc-stg-chip {
  font-size: 11px;
  letter-spacing: .11em;
  min-height: 44px;
  padding-bottom: 6px;
}

/* ON A PHONE THE FILTERS BECOME TWO STRIPS THAT SCROLL SIDEWAYS.
 *
 * Wrapped, twelve options across two axes take two hundred and sixty pixels
 * between the title and the first venue — so a reader arrives at a page of
 * theatres and sees no theatre. The whole point of the band above being short is
 * to put a photograph on the first screen, and a filter block that eats the
 * saving undoes it.
 *
 * Each strip stays inside the page gutter rather than running to the screen edge,
 * so the rule closing the block still lines up with the cards under it. The cut
 * through whatever chip the fold lands on is the cue that the strip continues.
 * The scrollbar is hidden because two of them stacked under a title is furniture
 * nobody needs; the strips are still keyboard- and wheel-reachable, and every
 * option remains a link with its own URL.
 *
 * ⚠ A sideways flick is contained so it never becomes a page-level gesture. */
@media (max-width: 719px) {
  .lc-stg-arch__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lc-stg-arch__chips::-webkit-scrollbar { display: none; }
  .lc-stg-chip { flex: 0 0 auto; white-space: nowrap; }
}

/* ------------------------------------------------------------ the grid */

/* NO BOXES. The page's whole vocabulary is horizontal rules, so a card is a
 * photograph with its type under it, closed by a hairline — not a bordered
 * container with a shadow. The photographs do the separating; the rule tells the
 * eye where one entry ends.
 *
 * Three across at the top and no wider. Seventeen venues at four across gives a
 * 256px frame, which is too small for an auditorium to read as a room, and the
 * room is the whole reason a photographic directory is worth building. */
.lc-stg-arch__grid {
  list-style: none;
  margin: 0;
  padding-top: 36px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 38px 34px;
}
@media (min-width: 560px) {
  .lc-stg-arch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .lc-stg-arch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 44px; padding-bottom: 72px; }
}

.lc-stg-card { min-width: 0; }

.lc-stg-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
/* Load-bearing. The whole card is one anchor, and a text-decoration set on an <a>
   is painted across every descendant — without this the meta and the blurb gain
   underlines the moment a pointer arrives. The name's own underline is declared
   below, where it belongs. */
.lc-stg-card__link:hover,
.lc-stg-card__link:focus { text-decoration: none; color: inherit; }
.lc-stg-card__link:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 4px; }
.lc-stg-card__link:active { opacity: .9; }

.lc-stg-card__frame {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #eceee9;
}
.lc-stg-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--lc-t-base, .32s) var(--lc-ease, ease);
}
.lc-stg-card__link:hover .lc-stg-card__frame img,
.lc-stg-card__link:focus-visible .lc-stg-card__frame img {
  filter: contrast(1.06) saturate(1.12) brightness(1.03);
}

.lc-stg-card__body {
  display: block;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--lc-line);
  transition: border-color var(--lc-t-base, .32s) var(--lc-ease, ease);
}
.lc-stg-card__link:hover .lc-stg-card__body,
.lc-stg-card__link:focus-visible .lc-stg-card__body { border-bottom-color: var(--lc-ink); }

/* The underline exists at all times and only its colour changes, so arriving at
   a card never reflows the name under the pointer. */
.lc-stg-card__name {
  display: block;
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--lc-ink);
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: text-decoration-color var(--lc-t-base, .32s) var(--lc-ease, ease);
}
.lc-stg-card__link:hover .lc-stg-card__name,
.lc-stg-card__link:focus-visible .lc-stg-card__name { text-decoration-color: currentColor; }

/* The kind and the town. Uppercased here, which also settles the source data —
   the kind is stored lower-case and would otherwise read as a typo beside a
   proper noun. */
.lc-stg-card__meta {
  display: block;
  margin-top: 7px;
  font-family: var(--lc-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--lc-muted);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg-card__link:hover .lc-stg-card__meta,
.lc-stg-card__link:focus-visible .lc-stg-card__meta { color: var(--lcs-2nd); }

/* Held to three lines. The blurbs are cut from the venues' own descriptions and
   run from one line to five; a grid whose rows are ragged by however much prose
   each record happened to carry reads as unfinished, and the full sentence is on
   the page the card leads to. */
.lc-stg-card__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--lcs-2nd);
  text-wrap: pretty;
}

/* --- a venue with no photograph ---------------------------------------- */

/* The template emits no frame at all for a record with no picture, so the cell
 * would otherwise collapse to a name floating at the top of a row of
 * photographs. It takes the soft ground and a heavy top rule instead: a
 * typographic entry that occupies its cell and holds the grid's rhythm, rather
 * than a faked photograph or a hole. It does not pretend to be an image, which
 * is the point — the fix for one of these is a photograph. */
/* It takes the full height of its row rather than sitting short with a gap
   beneath it, which is the shape that reads as a cell somebody forgot to
   finish. The panel's own edges are what make the air inside it read as air. */
.lc-stg-card--noimg .lc-stg-card__link { grid-template-rows: 1fr; }

.lc-stg-card--noimg .lc-stg-card__body {
  padding: 24px 22px 26px;
  background: var(--lc-bg-soft);
  border-top: 2px solid var(--lc-ink);
  border-bottom: 1px solid var(--lc-line);
}
.lc-stg-card--noimg .lc-stg-card__name { font-size: clamp(19px, 1.55vw, 24px); }

/* ---------------------------------------------------- nothing matched */

/* An empty state that hands back the route rather than apologising. It is set at
   reading size on its own ground, because a reader who lands here has made two
   choices that cancelled each other out and needs to see the way back, not a
   line of small print. */
/* ⚠ THE GUTTER IS A MARGIN HERE AND A PADDING EVERYWHERE ELSE, AND THAT IS THE
   POINT. Every other block on this page insets its CHILDREN, so a measure set on
   one of those children is measured against the text. This block has no child to
   set a measure on — it is one paragraph the template emits bare — so the gutter
   and the measure would land on the same element, and under border-box a
   max-width of forty-six rems then spends three hundred of its pixels on the
   page margins and sets the sentence to two-thirds of the column it asked for.
   A margin sits outside the box, so the two stop competing. */
.lc-stg-arch__none {
  margin: 0 max(20px, calc((100% - var(--lcs-measure)) / 2));
  padding-top: 52px;
  padding-bottom: 64px;
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--lcs-2nd);
  max-width: 46rem;
  text-wrap: pretty;
}
.lc-stg-arch__none a {
  color: var(--lc-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(26, 26, 26, .35);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease),
              text-decoration-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-stg-arch__none a:hover { color: var(--lc-accent); text-decoration-color: var(--lc-accent); }

/* =====================================================================
 * MOTION
 *
 * Everything here moves for one reason — a pointer or a keyboard is on
 * it. Nothing runs on its own, nothing enters on scroll, so a reduced
 * motion setting loses the travel and nothing else.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lc-stg,
  .lc-stg *,
  .lc-stg *::before,
  .lc-stg *::after,
  .lc-stg-arch,
  .lc-stg-arch *,
  .lc-stg-arch *::before,
  .lc-stg-arch *::after {
    transition: none !important;
    animation-duration: .001ms !important;
  }
}