/* ==========================================================================
 * 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;
  --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 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 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; }

/* --- 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; }

/* 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);
}

/* =====================================================================
 * 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; }
}