/* ==========================================================================
 * lc-garages.css — the parking guides and the page-per-garage.
 *
 * THE USAGE SCENE DECIDES EVERYTHING HERE, AND IT IS NOT A DESK. It is a phone
 * held in one hand in a car park or on a pavement, in daylight, by somebody who
 * has about four seconds and one question: what does this cost and where is it.
 * That is the same scene lc-tours.css was built for, so the same floor applies
 * and is inherited rather than re-decided:
 *
 *   · near-black ink, never the theme's body grey. #6c6d74 on white is ~4.4:1 —
 *     fine indoors, gone in direct sun.
 *   · light only. A dark UI outdoors is a mirror.
 *   · 48px touch targets on anything that is tapped.
 *   · nothing carried by colour alone.
 *
 * TOKENS ARE THE HOUSE BLOCK, COPIED NOT INVENTED (ink/muted/line/bg/bg-soft/
 * accent/gold/serif/sans), same values as the other hand-rendered singles. They
 * are declared on this vertical's own elements rather than on :root, because the
 * guide surfaces are builder pages with no wrapper of ours to hang them on.
 *
 * ⛔ TWO FACES, TWO JOBS, AND THE SPLIT IS NOT DECORATIVE. Figures are set in the
 * sans with tabular numerals so a column of money reads as a column; prose and
 * names stay in the site's serif. Mixing them per-cell is what makes a rate table
 * scannable at a glance instead of readable at a sitting.
 *
 * ⛔ NO COPY IS COMPOSED IN THIS FILE. No generated headings, no hint sentences,
 * no labels. Page language belongs in the template or the builder where an editor
 * can reach it and a translator can find it. The single exception is the letter on
 * the map pin, which is the international parking symbol rather than a sentence,
 * and which follows the pattern lc-tours already set of setting a character inside
 * the pin shape.
 * ========================================================================== */

.lc-gar,
.lc-gar-map,
.lc-gar-tablewrap,
.lc-gar-notes,
.lc-gar-checked {
  --lc-ink: #1a1a1a;
  --lc-muted: #6b6b6b;
  --lc-line: #e5e5e5;
  --lc-bg: #fff;
  --lc-bg-soft: #f6f7f5;
  --lc-accent: #2f6f57;
  --lc-gold: #b8863b;
  /* Lime's own green, darkened enough to hold its edge against a pale basemap and to clear
     4.5:1 on white for the toggle's label. A pin that matches the livery needs no legend. */
  --lc-lime: #00a03c;
  --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. Every line that uses it is a
     line somebody reads standing up, and the muted grey is the first thing to go
     when the screen is in the sun. */
  --lcg-2nd: #4a4a4a;

  /* The width the page's prose and spec rows are set to. */
  --lcg-measure: 1120px;

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

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

  /* How much of the table's right edge is veiled to signal the columns that have
     not been scrolled to yet. Animated to zero at the end of the scroll where the
     browser can drive an animation from scroll position. */
  --lcg-fade: 0px;
  --lcg-pinshadow: 0;
}

@supports (animation-timeline: scroll()) {
  @property --lcg-fade    { syntax: "<length>"; inherits: true; initial-value: 0px; }
  @property --lcg-pinshadow { syntax: "<number>"; inherits: true; initial-value: 0; }
}

.lc-gar,
.lc-gar *,
.lc-gar *::before,
.lc-gar *::after,
.lc-gar-tablewrap,
.lc-gar-tablewrap *,
.lc-gar-notes,
.lc-gar-notes * { box-sizing: border-box; }

.lc-gar { color-scheme: light; }

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

.lc-gar a:focus-visible,
.lc-gar-tablewrap a:focus-visible,
.lc-gar-checked a:focus-visible,
.lc-gar-map a:focus-visible {
  outline: 3px solid var(--lc-accent);
  outline-offset: 2px;
  border-radius: 0;
}

/* =====================================================================
 * SHARED — the small uppercase label, used for every field name on both
 * surfaces so a fact reads the same wherever it appears.
 * ===================================================================== */

.lc-gar__facts dt,
.lc-gar-notes dt,
.lc-gar__h3 {
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--lcg-2nd);
}

/* =====================================================================
 * THE CITY GUIDES — map, comparison table, the city's rules, the stamp.
 *
 * These sit inside a YOOtheme container that supplies the page's own
 * measure and rhythm, so nothing here sets a width or a page margin. It
 * styles the four objects the shortcodes emit and stops.
 * ===================================================================== */

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

/* A map that is a stripe is a map nobody opens. The floor holds whatever height
   the shortcode asks for, and the ceiling keeps it inside a phone screen so the
   page below it stays discoverable. */
.lc-gar-map {
  height: clamp(320px, var(--lc-gar-map-h, 440px), 62vh);
  background: var(--lc-bg-soft);
  border: 1px solid var(--lc-line);
  z-index: 0;   /* Leaflet panes sit at 400+; keep the whole map under the header */
}

/* ON A WIDE SCREEN THE HEIGHT IS WHAT BUYS THE ZOOM, AND 460px MISSES BY 60.
 *
 * fitBounds picks the largest zoom at which the pins still fit, so in a box far
 * wider than it is tall the vertical extent decides everything and the width is
 * only ever filled with whatever happens to be either side. Charleston's garages
 * run the length of the peninsula: measured at 1200x462 they settled at zoom 13
 * and occupied 16% of the width, with two rivers and the far bank taking the rest.
 * The same set in a 1200x520 box clears zoom 14 and occupies 32% by 80% — twice
 * the size in each direction for sixty pixels.
 *
 * The floor is therefore a framing requirement rather than a preference, and it is
 * written as the floor rather than as the fallback because the shortcode states a
 * height of its own and a fallback would never be consulted. A guide whose set is
 * tight enough to reach the maxZoom ceiling instead — Savannah's six sit inside the
 * historic district and stop at 16 — is unaffected by the zoom and only gains a
 * little more street around the district.
 *
 * The ceiling rises with it so a short laptop window cannot quietly take the zoom
 * level back; below roughly 690px of viewport the floor is what holds. */
@media (min-width: 960px) {
  .lc-gar-map { height: clamp(540px, var(--lc-gar-map-h, 540px), 78vh); }
}

/* ----------------------------------------------------------- the table */

/* THE TABLE IS THE GUIDE. Everything below is in service of one movement: a
   driver's eye going down the daily-maximum column, then sideways to whatever
   separates two garages charging the same. */

.lc-gar-tablewrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* a sideways flick never becomes a page swipe */
  scrollbar-width: thin;
  scrollbar-color: #c9ccc9 transparent;
  padding-bottom: 2px;
}

/* The builder wraps the shortcode in its own .uk-overflow-auto. Two nested
   scrollers means the outer one owns the gesture on some touch stacks and the
   sticky column belongs to the inner one, so the name column would slide away
   while the figures stayed. Hand the scroll to the wrap that owns the table. */
.uk-overflow-auto:has(> .lc-gar-tablewrap) { overflow: visible; }

.lc-gar-tablewrap::-webkit-scrollbar { height: 8px; }
.lc-gar-tablewrap::-webkit-scrollbar-track { background: var(--lc-bg-soft); }
.lc-gar-tablewrap::-webkit-scrollbar-thumb { background: #c9ccc9; }
.lc-gar-tablewrap::-webkit-scrollbar-thumb:hover { background: var(--lcg-2nd); }

.lc-gar-t {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--lc-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lc-ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* The caption carries the one sentence that tells a reader which columns are
   worth their attention, so it is set as a line of the page rather than as the
   small print a caption defaults to. */
.lc-gar-t__cap {
  caption-side: top;
  text-align: left;
  font-family: var(--lc-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lcg-2nd);
  padding: 0 0 16px;
  /* The caption lives inside the table's box, so a measure set against the table
     puts the end of the sentence off the right of a phone — behind the fade, in
     a region the reader has to scroll a table sideways to read a sentence in.
     The viewport term keeps it inside what is actually on screen; the rem term
     keeps it to a readable measure once there is room. */
  max-width: min(46rem, calc(100vw - 2.5rem));
  position: sticky;
  left: 0;
  text-wrap: pretty;
}

.lc-gar-t thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--lc-bg);
  text-align: left;
  vertical-align: bottom;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lcg-2nd);
  padding: 0 18px 10px 0;
  border-bottom: 2px solid var(--lc-ink);
  white-space: nowrap;
}

.lc-gar-t tbody th,
.lc-gar-t tbody td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--lc-line);
}

.lc-gar-t tbody tr:last-child th,
.lc-gar-t tbody tr:last-child td { border-bottom: 2px solid var(--lc-ink); }

/* A row is the unit a reader compares, so the whole row lights up — including
   the pinned name cell, which needs its own opaque repaint to do it. */
@media (hover: hover) {
  .lc-gar-t tbody tr:hover > th,
  .lc-gar-t tbody tr:hover > td { background: #f2f4f2; }
}

/* --- column 1: the name, pinned, because the figures are to the right ---- */

.lc-gar-t tbody th[scope="row"],
.lc-gar-t thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--lc-bg);
  padding-right: 22px;
  min-width: 9.5rem;
}
.lc-gar-t thead th:first-child { z-index: 3; }
.lc-gar-t tbody th[scope="row"] { z-index: 1; }

/* The edge that says the column is pinned and there is table under it. It only
   exists once the reader has actually scrolled; at rest the hairline below each
   row is the only rule on the page. */
.lc-gar-t tbody th[scope="row"]::after,
.lc-gar-t thead th:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  transform: translateX(100%);
  pointer-events: none;
  background: linear-gradient(to right, rgba(26, 26, 26, .13), rgba(26, 26, 26, 0));
  opacity: var(--lcg-pinshadow);
}

.lc-gar-t__name {
  font-family: var(--lc-serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lc-ink);
  text-wrap: balance;
}

/* Two of the nineteen carry no page of their own and render as a span. The
   difference is carried on the LINK, never on the span: an underlined name is
   obviously a link, so a name without one is obviously text. Marking the span
   instead — greying it, striking it, fading it — would read as a broken link
   rather than as a garage that simply has no page. */
a.lc-gar-t__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(47, 111, 87, .45);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease),
              text-decoration-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
a.lc-gar-t__name:hover,
a.lc-gar-t__name:focus-visible {
  color: var(--lc-accent);
  text-decoration-color: var(--lc-accent);
}
span.lc-gar-t__name { display: inline-block; }

/* --- columns 3 and 4: the money, in both cities ------------------------- */

/* The row header is cell 1, the address 2, the rate 3 and the daily maximum 4
   in Charleston's seven columns and in Savannah's eight alike. The maximum is
   the number a whole day is decided on, so it is the heaviest thing in the
   table; the rate beside it is next. */
.lc-gar-t tbody td:nth-child(3),
.lc-gar-t tbody td:nth-child(4) { white-space: nowrap; }

.lc-gar-t tbody td:nth-child(4) {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lc-ink);
}
.lc-gar-t tbody td:nth-child(3) {
  font-size: .95rem;
  font-weight: 600;
  color: var(--lc-ink);
}

/* The address is how a reader confirms a garage they already half-know, not how
   they choose one. It recedes. */
.lc-gar-t tbody td:nth-child(2) {
  color: var(--lcg-2nd);
  font-size: 13px;
  min-width: 8.5rem;
}

/* The evening and weekend columns hold sentences, not figures, on both cities.
   Given room they set in two tidy lines; left to themselves they shred. */
.lc-gar-t tbody td:nth-child(n+5) {
  color: var(--lcg-2nd);
  font-size: 13px;
  min-width: 8rem;
  max-width: 15rem;
}
.lc-gar-t tbody td:empty { min-width: 0; }

/* On a phone the reader gets about two and a half columns before the first
   scroll, and the address is not what they are choosing on — it is what they
   confirm afterwards. Narrowing it and the cell gutters brings the daily
   maximum into that first view instead of the street number. */
@media (max-width: 699px) {
  /* The column headings are longer than the figures under them, so on a phone
     the heading is what sets the column width — "PER 20 MINUTES" is five times
     the width of "$1". Letting them wrap costs a line of the header row and
     buys a whole column of the first view. */
  .lc-gar-t thead th { padding-right: 12px; white-space: normal; }
  .lc-gar-t thead th:first-child { white-space: nowrap; }
  .lc-gar-t tbody th,
  .lc-gar-t tbody td { padding-right: 12px; }
  .lc-gar-t tbody th[scope="row"],
  .lc-gar-t thead th:first-child { padding-right: 14px; min-width: 8.4rem; }
  .lc-gar-t tbody td:nth-child(2) { min-width: 6rem; max-width: 8rem; }
  /* A cell holding a sentence sets its row's height whether or not it is on
     screen, so a narrow measure on the evening column shows as a tall empty gap
     beside the figures a phone reader is actually looking at. Wider here means
     fewer lines, not more. */
  .lc-gar-t tbody td:nth-child(n+5) { min-width: 10rem; max-width: 21rem; }
}

.lc-gar-t td a {
  color: var(--lc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lc-gar-t td a:hover { color: var(--lc-ink); }

/* --- the sideways affordance ------------------------------------------- */

/* Seven columns do not fit a phone and no arrangement of them will. So the
   table scrolls, and the scroll is made visible two ways at once: the pinned
   name column keeps the reader's place, and the right edge of the viewport is
   veiled so a column is always cut mid-figure. A cut column is the one signal
   that needs no words and no icon.
   Above the width where the table fits, neither appears. */
@media (max-width: 1199px) {
  .lc-gar-tablewrap {
    --lcg-fade: 52px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--lcg-fade)), rgba(0, 0, 0, .06));
            mask-image: linear-gradient(to right, #000 calc(100% - var(--lcg-fade)), rgba(0, 0, 0, .06));
  }
}

/* Where the browser can drive an animation from scroll position, the veil lifts
   as the last column arrives and the pinned column's edge appears as soon as
   there is anything behind it. Both are state, not decoration: they say where in
   the table the reader is. */
@supports (animation-timeline: scroll()) {
  .lc-gar-tablewrap {
    animation: lcg-table-scroll linear both;
    animation-timeline: scroll(self inline);
  }
  @keyframes lcg-table-scroll {
    0%   { --lcg-pinshadow: 0;  --lcg-fade: 52px; }
    6%   { --lcg-pinshadow: 1; }
    88%  { --lcg-pinshadow: 1;  --lcg-fade: 52px; }
    100% { --lcg-pinshadow: 1;  --lcg-fade: 0px; }
  }
}

/* --------------------------------------------------- the city's rules */

/* A spec sheet, not a prose list: the name of the rule in a left rail, the
   city's own sentence beside it, one hairline between each. Six of them read
   in a single downward glance that way. */
.lc-gar-notes {
  margin: 0;
  font-family: var(--lc-serif);
  border-top: 2px solid var(--lc-ink);
}

.lc-gar-note {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lc-line);
}
/* Closed the way the table is closed, so the stamp under it reads as a separate
   block rather than as a seventh rule. */
.lc-gar-note:last-child { border-bottom: 2px solid var(--lc-ink); }
@media (min-width: 720px) {
  .lc-gar-note {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0 32px;
    align-items: baseline;
    padding: 18px 0;
  }
}

.lc-gar-notes dt { margin: 0; }
.lc-gar-notes dd {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--lc-ink);
  max-width: 42rem;
  text-wrap: pretty;
}

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

/* A rate with no date on it is a rate nobody can trust, so the stamp is set as a
   block of the page and given a rule of its own rather than shrunk into small
   print. */
.lc-gar-checked,
.lc-gar__checked {
  margin: 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(--lcg-2nd);
}
.lc-gar-checked a,
.lc-gar__checked a {
  color: var(--lcg-2nd);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(26, 26, 26, .3);
}
.lc-gar-checked a:hover,
.lc-gar__checked a:hover { color: var(--lc-accent); text-decoration-color: var(--lc-accent); }

/* =====================================================================
 * THE GARAGE PAGE
 *
 * The theme's own 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 map and the walk index 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 the sticky header.
 * ===================================================================== */

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

.lc-gar > * > section,
.lc-gar__heroinner,
.lc-gar__back {
  padding-inline: max(20px, calc((100% - var(--lcg-measure)) / 2));
}

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

/* TWO HEROES, AND THEY ARE NOT THE SAME OBJECT AT TWO OPACITIES.
 *
 * With a photograph of the garage there is a subject worth looking at, so the
 * hero is the site's standard band: full width, scrimmed, white type at the
 * foot, real height.
 *
 * With no photograph there is no subject, and height spent on a ground with a
 * name on it is height taken from the figures a driver came for. So the no-photo
 * state is a masthead strip — the house fallback ground at the height its own
 * type needs, plus the room the menu now sitting on it takes, and not a pixel
 * more — and the page's picture is the map further
 * down, which is the image this subject actually has. That gives the page four
 * bands of different shape and ground rather than one long column: a dark strip,
 * a white price sheet, a full-bleed map, a soft index of what is within a walk. */

.lc-gar__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 .tm-header-placeholder,
 * 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 — which is what --lcg-navroom is for.
 *
 * The figure added to it is smaller than the padding this band carried when a solid
 * white bar sat above it. A gap below a hard white edge and a gap below a frosted bar
 * that has no bottom line are not the same gap: the first is a boundary the type must
 * stand clear of, the second is open ground, and repeating the boundary figure there
 * reads as a hole rather than as air. So the band absorbs the navigation and the type
 * keeps very nearly the same dark below the menu as it had below the white bar. */
.lc-gar__heroinner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(var(--lcg-navroom) + 26px);
  padding-bottom: 32px;
}
@media (min-width: 720px) {
  .lc-gar__heroinner { padding-top: calc(var(--lcg-navroom) + 34px); padding-bottom: 48px; }
}

.lc-gar__eyebrow {
  margin: 0 0 12px;
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.lc-gar__title {
  margin: 0;
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 20ch;
}

.lc-gar__lead {
  margin: 16px 0 0;
  font-size: 1.14rem;
  line-height: 1.62;
  max-width: 40rem;
  text-wrap: pretty;
}

/* --- no photograph: the masthead strip ---------------------------------- */

/* #1d2721 is the ground lc-hero.php paints under every hero on the site when an
   image does not resolve, so a garage 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; the strip only
   has to supply the ground it was written for. */
.lc-gar__hero:not(.lc-gar__hero--img) {
  background-color: #1d2721;
  /* A near-monochrome tonal shift across the strip rather than one flat swatch.
     Perfectly even fill is the tell that a band was typed rather than made, and
     the shift reads as printed ground at a strength nobody consciously sees. */
  background-image: linear-gradient(165deg, #24322c 0%, #1d2721 48%, #151d18 100%);
}
.lc-gar__hero:not(.lc-gar__hero--img) .lc-gar__title { color: #fff; }
.lc-gar__hero:not(.lc-gar__hero--img) .lc-gar__lead { color: rgba(255, 255, 255, .84); }
.lc-gar__hero:not(.lc-gar__hero--img) .lc-gar__eyebrow { color: #d8c091; }

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

.lc-gar__hero--img {
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  background-color: #121814;
  background-image: var(--lc-gar-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 960px) { .lc-gar__hero--img { min-height: 54vh; } }

/* TWO SCRIMS IN ONE STACK, EACH DOING ONE JOB, AND THE MIDDLE LEFT ALONE.
 *
 * The foot holds the title and was always here. The top one is the navigation's,
 * and it is needed because the menu is now ON the photograph: the theme sets an
 * idle navigation link at 40% white, which carries over a sky and disappears over
 * a sunlit wall — and a garage photographed in daylight is mostly wall. 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 garage into the same dark rectangle, and the photograph is the reason this
 * hero earns its height at all. */
.lc-gar__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(--lcg-navroom) + 10px),
      rgba(10, 14, 11, 0) calc(var(--lcg-navroom) + 170px)),
    linear-gradient(to top,
      rgba(12, 18, 14, .86) 0%,
      rgba(12, 18, 14, .46) 42%,
      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 with a lead under it and the menu on a
   narrow screen, where the same source is sliced deeper and the band is shortest. */
.lc-gar__hero--img .lc-gar__heroinner {
  padding-top: calc(var(--lcg-navroom) + 40px);
  padding-bottom: 40px;
}
.lc-gar__hero--img .lc-gar__eyebrow { color: #e6d3ab; }
.lc-gar__hero--img .lc-gar__title { color: #fff; }
.lc-gar__hero--img .lc-gar__lead { color: rgba(255, 255, 255, .88); }

/* Nothing here declares --uk-inverse. The navigation picks its own ink by sampling
   what sits under the bar, and the uk-light / uk-dark the template states on the two
   bands is reached from the sections inside them — checked under a real scroll on
   both band types. A rule re-declaring the token on their descendants was written
   during this pass and removed: it changed no rendered state, and a stylesheet that
   carries a defence against a failure that does not occur teaches the next reader
   something untrue about how this page gets its colours. */

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

.lc-gar__body { width: 100%; }

.lc-gar__h2 {
  margin: 0 0 18px;
  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: 26ch;
  text-wrap: balance;
}

/* --------------------------------------------------- the venue this garage serves

   Its own section rather than a row in the walk block, because it is a different
   claim: the walk block says what is near, this says this garage is the closest
   one to that venue. The heading takes the same small uppercase label as every
   other section here — without it the h2 falls through to the display serif and
   the block reads as a second title under the first. */

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

/* One row, so it takes the measure rather than the 17rem column the walk block's
   auto-fill grid gives it — a single row boxed into a third of the width reads as
   a fragment of a table that failed to load. */
.lc-gar__stage .lc-gar__list { grid-template-columns: 1fr; }

.lc-gar__stage .lc-gar__h2 {
  font-family: var(--lc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lc-ink);
  max-width: none;
  margin-bottom: 6px;
}

/* ------------------------------------------------------------ the rates */

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

/* The label sits above the figures rather than shouting alongside them: the
   figures are what the page is for and they are already large. */
/* One step above the field labels below it in size, tracking and ink, so the
   three tiers of small uppercase on this page — section, field, amenity — are
   distinguishable rather than one flat register repeated. */
.lc-gar__rates .lc-gar__h2 {
  font-family: var(--lc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lc-ink);
  margin-bottom: 12px;
}

.lc-gar__facts {
  margin: 0;
  border-top: 2px solid var(--lc-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .lc-gar__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lc-gar-fact {
  padding: 16px 0;
  border-bottom: 1px solid var(--lc-line);
  min-width: 0;
}
/* The spec sheet is a bounded object: heavy rule top and bottom, hairlines
   inside. What follows it — the amenities, the rule — then reads as its own
   block rather than as more rows. */
.lc-gar-fact:last-child { border-bottom: 2px solid var(--lc-ink); }

.lc-gar-fact dt { margin: 0 0 6px; }
.lc-gar-fact dd { margin: 0; }

/* THE FIRST TWO FACTS ARE THE HEADLINE FIGURES, and the template's own ordering
   guarantees it: the rate is written first and the daily maximum second, and a
   field with no value prints nothing, so whatever lands in these two positions
   is the most important pair the city publishes for this garage. A page with
   only two facts is a pair of large figures and still looks finished; a page
   with eight is a pair of figures over a spec sheet. */
.lc-gar-fact:nth-child(1) dd,
.lc-gar-fact:nth-child(2) dd {
  font-family: var(--lc-sans);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--lc-ink);
  font-variant-numeric: tabular-nums lining-nums;
  text-wrap: balance;
}
@media (min-width: 720px) {
  .lc-gar-fact:nth-child(1) dd,
  .lc-gar-fact:nth-child(2) dd { font-size: 2rem; }
}
@media (min-width: 560px) {
  .lc-gar-fact:nth-child(1) { padding-right: 32px; border-right: 1px solid var(--lc-line); }
  .lc-gar-fact:nth-child(2) { padding-left: 32px; }
  /* One published figure and nothing else is a real record here, and a divider
     with nothing on its right is the tell that the page expected more. */
  .lc-gar-fact:nth-child(1):last-child { border-right: 0; }
}

/* Everything after the pair is a spec row: name in a rail, value beside it. */
.lc-gar-fact:nth-child(n+3) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
@media (min-width: 720px) {
  .lc-gar-fact:nth-child(n+3) {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0 32px;
    align-items: baseline;
  }
  .lc-gar-fact:nth-child(n+3) dt { margin-bottom: 0; }
}

.lc-gar-fact:nth-child(n+3) dd {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--lc-ink);
  max-width: 42rem;
  text-wrap: pretty;
}

.lc-gar-fact dd a {
  color: var(--lc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-gar-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-gar-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;
}

/* ------------------------------------------------------- the amenities */

/* Nought to three short strings — attributes of the garage rather than values
   of a field, read at a glance beside the figures.
   Underlined rather than boxed: this page's whole vocabulary is horizontal
   rules, and a filled pill is a component borrowed from a different one. The
   guide's table renders the same data as a plain run in its own last column,
   so a badge here would be a second treatment of one fact.
   They carry no icon on purpose — the platform's icon set has a glyph for the
   plug-in but none for restrooms or an attendant, and one icon among three bare
   labels reads worse than three bare labels. */
.lc-gar__amen {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}
/* Tight to the spec sheet they belong to, wide of the rule that follows. */
.lc-gar__amen { margin-top: 20px; }
.lc-gar__amen + .lc-gar__rule { margin-top: 54px; }

.lc-gar__amen li {
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lc-ink);
  padding: 0 0 8px;
  border-bottom: 2px solid var(--lc-ink);
}

/* ------------------------------------------------------------- the rule */

/* THE RULE IS THE MOST VALUABLE FACT ON THE PAGE and it is worth more than the
   rates, because the rates are published everywhere and this is not: a daily
   maximum that resets at midnight means an overnight stay crosses two of them
   and costs nearly double what a reader has just calculated.
   So it is given the weight of a statement — full measure, rules above and
   below, set larger than the body — rather than the tinted alert box that would
   file it as a warning to be dismissed. */
.lc-gar__rule {
  margin: 42px 0 0;
  padding: 24px 0 26px;
  border-top: 2px solid var(--lc-ink);
  border-bottom: 1px solid var(--lc-line);
}

.lc-gar__rule p {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--lc-ink);
  max-width: 42rem;
  text-wrap: pretty;
}
.lc-gar__rule p + p {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--lcg-2nd);
}

/* The rule already closes on a hairline, so the stamp below it does not need a
   second one 20px away. */
.lc-gar__rates .lc-gar__checked { margin-top: 26px; }
.lc-gar__rule + .lc-gar__checked { border-top: 0; padding-top: 0; }

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

/* Edge to edge, and it is the page's picture. A garage has no interior worth a
   photograph and often no exterior anybody has shot; what a driver actually
   wants to look at is where the door is in relation to everything else. */
/* The gutter rule above matches on `.lc-gar > * > section`, so undoing it needs a
   selector of at least equal weight rather than the bare class. */
.lc-gar section.lc-gar__mapwrap {
  padding-inline: 0;
  margin: 0;
}

.lc-gar__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;
}

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

/* Up to twenty-one places in four groups, and the failure mode is a link dump.
   Set as an index instead: a ruled column per group, the name on the left and
   the distance right-aligned in tabular figures so the distances form a rail
   the eye can run down. An index is read by scanning; a list is read by
   reading, and nobody reads a list of twenty-one. */
.lc-gar__walk {
  margin-top: 0;
  padding-top: 44px;
  padding-bottom: 52px;
  background: var(--lc-bg-soft);
  border-bottom: 1px solid var(--lc-line);
}

.lc-gar__walk .lc-gar__h2 {
  max-width: 30ch;
  margin-bottom: 28px;
}

.lc-gar__walkgroup { margin: 0 0 36px; }
.lc-gar__walkgroup:last-child { margin-bottom: 0; }

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

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

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

.lc-gar__item > a {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--lc-serif);
  font-size: 1.02rem;
  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-gar__item > a:hover,
.lc-gar__item > a:focus-visible {
  color: var(--lc-accent);
  text-decoration-color: var(--lc-accent);
}

.lc-gar__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(--lcg-2nd);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.lc-gar__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);
}

/* ------------------------------------------------------------- the bikes */

/* THE PAGE ASKS TWO QUESTIONS IN A ROW HERE AND THEY ARE NOT THE SAME QUESTION.
 * The index above is what is within reach on foot. This is how to cover the rest,
 * and its payload is not the list — it is the prose under it. What stops somebody
 * hiring a bike in a strange city is rarely finding one; it is not knowing that the
 * rack is opened from a phone, and that the scooter they hired in another city is
 * not an option here.
 *
 * ⛔ ONE COLUMN, AND THE REASON IS STRUCTURAL RATHER THAN A PREFERENCE. This was
 * built as a two-column spread — index at the left margin, standing note at the
 * right — and the shape cannot be held safely with this markup. Stacking several
 * short items beside one tall item in a grid, with no wrapper element around them,
 * requires the tall item to span rows, and a spanning item's height is shared out
 * across every row it covers. That pushed the credit a hundred pixels down an empty
 * column on the first pass. A right-hand column can therefore carry exactly ONE
 * item, and the block now has two prose paragraphs and a credit line, one of which
 * is conditional. A layout whose geometry depends on how many optional paragraphs
 * the data produced is a layout that breaks on a page nobody happened to open.
 *
 * So the section is one column, and it earns its difference from the band above it
 * three other ways: it returns to the white ground the walk index left, it carries
 * no group headings, and it closes on prose where that one closes on more lists.
 * The index itself is deliberately IDENTICAL — same columns, same gaps, same row —
 * because two indexes a screen apart that measured differently would read as two
 * different kinds of fact.
 */
.lc-gar__bikes {
  /* One measure for every object in this section — the index, both rules and the
     prose — stated once so the block has a straight right edge instead of three
     objects that each stop somewhere different. */
  --lcg-bikemeasure: 34rem;
  padding-top: 44px;
  padding-bottom: 52px;
}

.lc-gar__bikes .lc-gar__h2 {
  max-width: 30ch;
  margin-bottom: 28px;
}

/* The index construction the page already uses: the heavy rule that opens a data
   object, the name at the left, the distance right-aligned in tabular figures so a
   column of them is a rail the eye runs down.
 *
 * ⛔ ONE COLUMN, NOT THE WALK INDEX'S AUTO-FILL, AND THE RENDER IS WHY. That index
 * carries up to twenty-one entries and needs the columns. This one carries two to
 * five. Given the same auto-fill track at the page's full measure, two entries filled
 * two columns of four and left the heavy rule above them running two hundred pixels
 * over nothing, with the distances broken into two short rails instead of one. A
 * rule that extends past its own content reads as an unfinished object.
 *
 * So it is held to its own measure at every width, and every rule in the section is
 * cut to that same measure so the block is a column with a straight right edge. */
.lc-gar__bikelist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--lcg-bikemeasure);
  border-top: 2px solid var(--lc-ink);
}

/* THE SAME ROW AS THE WALK INDEX ABOVE IT, DOWN TO THE TRACK SIZES, AND THAT IS THE
 * POINT: two indexes a screen apart that measured differently would read as two
 * different kinds of fact.
 *
 * ⚠ The row assumes ONE .lc-gar__meta, because the shared class carries an explicit
 * `grid-column: 1; grid-row: 2` and two spans sent to one cell are drawn on top of
 * each other. The template composes its tags into a single string for that reason.
 * A row that starts emitting a span per tag prints them through one another, and
 * only a render shows it. */
.lc-gar__bikeitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--lc-line);
  min-height: 48px;
}

/* The tag line takes the WHOLE row, not the name's column. Nothing else stands on
   its row — the distance is on the line above — so confining it to the first track
   would wrap a long string against an empty column beside it, and these strings are
   composed from however many tags a street earned. Spanning costs nothing when the
   line is short and is the difference between one line and three when it is not. */
.lc-gar__bikeitem .lc-gar__meta {
  grid-column: 1 / -1;
  text-wrap: pretty;
}

/* No underline and no link colour, because these are places rather than pages. A
   name that looks like a link and is not costs a tap to find out. */
.lc-gar__bikename {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--lc-serif);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--lc-ink);
  text-wrap: pretty;
}

/* The prose that closes the section. It opens on the heavy rule that starts every
   other object on this page, and it is set LARGER than the names in the index above
   it, which is the hierarchy the right way up: the index is scanned and this is
   read, and it is the reason the block is on the page at all.
 *
 * 40px of air above the rule, not 30. It lands under the hairline that closes the
 * index, and two rules a short gap apart read as one doubled line rather than as the
 * end of one object and the start of another. */
.lc-gar__bikenote {
  margin: 40px 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--lc-ink);
  font-family: var(--lc-serif);
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--lc-ink);
  max-width: var(--lcg-bikemeasure);
  text-wrap: pretty;
}

/* ⚠ CONDITIONAL, AND NOTHING HERE MAY DEPEND ON IT. The template omits the element
   entirely when the fact has not been passed to it, so this is a paragraph that is
   either present or absent from the document, never an empty box holding a gap open.
   It follows the note as a second paragraph of one statement — same measure, same
   face, one step down in size so the note keeps the lead. */
.lc-gar__bikerule {
  margin: 14px 0 0;
  font-family: var(--lc-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--lc-ink);
  max-width: var(--lcg-bikemeasure);
  text-wrap: pretty;
}

/* ⚠ Required by the licence on the data, and the least important line in the
   section — which is settled by position, not by legibility. Text a licence
   requires is text that has to be readable, so it keeps the ink that survives a
   screen in the sun and takes its quiet from sitting last, small, and outside the
   object it belongs to.
 *
 * It carries NO rule of its own. The index closes on the hairline under its last
 * row, and a second hairline twenty pixels below that one reads as a mistake rather
 * than as a division. The air is the division. */
.lc-gar__credit {
  margin: 22px 0 0;
  font-family: var(--lc-sans);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--lc-muted);
  max-width: 44ch;
}

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

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

.lc-gar__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-gar__back a:hover { color: var(--lc-accent); }

/* Drawn, not a character: two sides of a square turned forty-five degrees. */
.lc-gar__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-gar__back a:hover::after { transform: rotate(45deg) translate3d(3px, -3px, 0); }

/* =====================================================================
 * LEAFLET — the pin and the popup, on both surfaces.
 * ===================================================================== */

.lc-gar-map .leaflet-container,
.lc-gar__map.leaflet-container,
.lc-gar-map.leaflet-container { font-family: var(--lc-serif, "PT Serif", Georgia, serif); }

/* The pin is the parking sign: a white P on a coloured square, which is what
   the reader is already looking for on the street. Set on the house pin
   construction — a white ring and a soft drop shadow so it survives the pale
   basemap — and squared rather than round, because that is the sign's shape. */
.lc-gar-pin {
  background: none;
  border: 0;
}

.lc-gar-pin__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--lc-accent, #2f6f57);
  color: #fff;
  font-family: var(--lc-sans, "Montserrat", Arial, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform var(--lc-t-fast, .18s) var(--lc-ease, ease),
              box-shadow var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-gar-pin__dot::after { content: "P"; }

.lc-gar-pin:hover .lc-gar-pin__dot,
.lc-gar-pin:focus-visible .lc-gar-pin__dot {
  transform: scale(1.14);
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(47, 111, 87, .28), 0 3px 8px rgba(0, 0, 0, .35);
}
.lc-gar-pin:focus-visible { outline: 3px solid var(--lc-accent, #2f6f57); outline-offset: 3px; }

/* --- an overlay's pins: the same construction, deliberately lighter -------
 *
 * Round against the parking sign's square, gold against its green, and two thirds
 * the size. Three differences rather than one, so the second set separates at a
 * glance and stays separated for a reader who cannot tell the two hues apart —
 * and so that a map with both sets on it still has an obvious subject.
 *
 * No character inside it. At fourteen pixels a mark is mush, and the set is named
 * on the control that draws it and again in the pin's own popup. */
.lc-gar-pin__dot--layer {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lc-lime, #00a03c);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .34);
}
.lc-gar-pin__dot--layer::after { content: none; }

.lc-gar-pin--layer:hover .lc-gar-pin__dot--layer,
.lc-gar-pin--layer:focus-visible .lc-gar-pin__dot--layer {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 160, 60, .32), 0 2px 6px rgba(0, 0, 0, .34);
}
.lc-gar-pin--layer:focus-visible { outline-color: var(--lc-lime, #00a03c); }

/* --- the popup: the table row, at the pin -------------------------------- */

.lc-gar-map .leaflet-popup-content-wrapper,
.lc-gar__map .leaflet-popup-content-wrapper {
  border-radius: 0;
  border: 1px solid #1a1a1a;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  padding: 0;
}
.lc-gar-map .leaflet-popup-content,
.lc-gar__map .leaflet-popup-content {
  margin: 0;
  padding: 15px 17px 14px;
  width: auto !important;
  min-width: 172px;
}
.lc-gar-map .leaflet-popup-tip,
.lc-gar__map .leaflet-popup-tip { border: 1px solid #1a1a1a; box-shadow: none; }
.lc-gar-map .leaflet-popup-close-button,
.lc-gar__map .leaflet-popup-close-button { color: #6b6b6b !important; padding: 6px 8px 0 0 !important; }

.lc-gar-pop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--lc-serif, "PT Serif", Georgia, serif);
}

.lc-gar-pop__name {
  font-family: var(--lc-display, "Playfair Display", Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  padding-right: 12px;
}
.lc-gar-pop__name a {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: rgba(47, 111, 87, .5);
  text-underline-offset: 3px;
}
.lc-gar-pop__name a:hover { color: #2f6f57; text-decoration-color: #2f6f57; }

.lc-gar-pop__addr {
  font-size: 13px;
  line-height: 1.4;
  color: #4a4a4a;
  margin-bottom: 5px;
}

/* The two figures are the reason to open a pin at all, so they are set as the
   table sets them: sans, tabular, the maximum heavier than the rate. */
.lc-gar-pop__rate,
.lc-gar-pop__max {
  font-family: var(--lc-sans, "Montserrat", Arial, sans-serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: #1a1a1a;
}
.lc-gar-pop__rate { font-size: 12.5px; font-weight: 600; }
.lc-gar-pop__max { font-size: 13.5px; font-weight: 700; }

/* An overlay's popup is a name and at most one fact, and it is set a step below the
   garage popup — the serif rather than the display face, and smaller — because the
   garage is what the map is for. The fact takes the page's label register, since it
   is the one line that decides whether a visitor can use the thing today. */
.lc-gar-pop--layer .lc-gar-pop__name {
  font-family: var(--lc-serif, "PT Serif", Georgia, serif);
  font-size: 15px;
  line-height: 1.3;
}
.lc-gar-pop__meta {
  margin-top: 4px;
  font-family: var(--lc-sans, "Montserrat", Arial, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4a4a4a;
}

/* Leaflet's own controls, which ship in nobody's design system. */
.lc-gar-map .leaflet-bar,
.lc-gar__map .leaflet-bar { border: 1px solid #1a1a1a; border-radius: 0; box-shadow: none; }
.lc-gar-map .leaflet-bar a,
.lc-gar__map .leaflet-bar a {
  border-radius: 0 !important;
  color: #1a1a1a;
  border-bottom-color: var(--lc-line, #e5e5e5);
  font-family: var(--lc-sans, "Montserrat", Arial, sans-serif);
}
.lc-gar-map .leaflet-bar a:hover,
.lc-gar__map .leaflet-bar a:hover { background: #f2f4f2; color: #2f6f57; }
.lc-gar-map .leaflet-control-attribution,
.lc-gar__map .leaflet-control-attribution {
  font-family: var(--lc-sans, "Montserrat", Arial, sans-serif);
  font-size: 10px;
  background: rgba(255, 255, 255, .86);
}

/* --- the overlay control -------------------------------------------------
 *
 * A pill in the corner Leaflet leaves empty: the zoom stack has the top left and
 * the attribution owns the bottom edge, where it grows leftward as it wraps on a
 * narrow screen and would sit under anything put there.
 *
 * It carries the mark it draws — a ring when the set is off and the filled disc
 * when it is on — so the control is its own legend and its state is a change of
 * form rather than of colour alone. It takes the border the zoom stack above it
 * was given, because two floating objects on one map drawn differently read as two
 * systems, and it is set in the same small uppercase sans as every other label on
 * these pages.
 *
 * The 48px floor is the one this file states for anything tapped: the map is read
 * on a phone far more often than at a desk. */
.lc-gar-layers { background: #fff; }

.lc-gar-layers__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  background: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--lc-sans, "Montserrat", Arial, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lc-ink, #1a1a1a);
  transition: background-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-gar-layers__btn + .lc-gar-layers__btn { border-top: 1px solid var(--lc-line, #e5e5e5); }
.lc-gar-layers__btn:hover { background: #f2f4f2; }
.lc-gar-layers__btn:focus-visible {
  outline: 3px solid var(--lc-accent, #2f6f57);
  outline-offset: -3px;
}

.lc-gar-layers__mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--lc-lime, #00a03c);
  background: transparent;
  transition: background-color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-gar-layers__btn.is-on { background: rgba(0, 160, 60, .12); }
.lc-gar-layers__btn.is-on .lc-gar-layers__mark { background: var(--lc-lime, #00a03c); }

/* At a desk the pointer is precise and a 48px slab is only weight. The floor
   stands wherever a finger is the input, which is where it was written for. */
@media (hover: hover) and (pointer: fine) {
  .lc-gar-layers__btn { min-height: 38px; }
}

/* =====================================================================
 * MOTION
 *
 * Everything above moves for one of two reasons — a pointer is on it, or
 * the reader has scrolled the table sideways. Neither is decoration and
 * neither runs on its own, so a reduced-motion setting loses nothing but
 * the travel.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lc-gar,
  .lc-gar *,
  .lc-gar *::before,
  .lc-gar *::after,
  .lc-gar-tablewrap,
  .lc-gar-tablewrap *,
  .lc-gar-map *,
  .lc-gar-pin__dot { transition: none !important; }

  /* ⚠ The table's fade is NOT cancelled here, and collapsing its duration would
     cancel it. A scroll-driven animation has no duration of its own — a duration
     forced on it scales the whole progress into the first instant, which lands
     the mask at its end state and removes the one cue that says the table has
     columns further right. Nothing about it translates or flashes; it reports
     where in a scroll the reader is, so it is state, not motion. */
  .lc-gar *:not(.lc-gar-tablewrap) { animation-duration: .001ms !important; }
}

/* 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, and the template drops
 * any row whose record has no photograph — 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: the name at the left of
 * the text column, the distance right-aligned in tabular figures on the same line, the meta
 * beneath. Only a picture column is added in front of it. */
.lc-gar__item--thumbed {
  grid-template-columns: 72px 1fr auto;
  column-gap: 14px;
  align-items: start;
  padding-block: 10px;
}
.lc-gar__item--thumbed > .lc-gar__thumb { grid-column: 1; grid-row: 1 / span 2; }
.lc-gar__item--thumbed > a:not(.lc-gar__thumb) { grid-column: 2; grid-row: 1; }
.lc-gar__item--thumbed > .lc-gar__dist { grid-column: 3; grid-row: 1; }
.lc-gar__item--thumbed > .lc-gar__meta { grid-column: 2 / -1; grid-row: 2; }

.lc-gar__thumb {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: var(--lc-line, #e5e5e5);
}
.lc-gar__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}