/* ==========================================================================
 * lc-tours.css — self-guided walking tours: the stop page and the route page.
 *
 * The usage scene decides everything here, and it is not a desk. It is a
 * pavement, in daylight, on a phone held in one hand, by somebody who is
 * walking and who looks up every few seconds. So:
 *
 *   · near-black ink, never the theme's body grey. #6c6d74 on white is about
 *     4.4:1 — fine indoors, gone in direct sun.
 *   · body type starts at 19px, not 16.
 *   · touch targets are 48px and up, and the primary one is 68px.
 *   · nothing is carried by colour alone. The evidence flag is carried by the
 *     SHAPE of a rule — solid, double, dashed — so it survives glare, a
 *     greyscale screen and colour blindness identically.
 *   · light only. A dark UI outdoors is a mirror.
 *
 * Tokens are the house block from the other hand-rendered singles verbatim
 * (ink/muted/line/bg/bg-soft/accent/gold/serif/sans), plus three of this
 * vertical's own for the lore ground.
 * ========================================================================== */

.lc-tr {
  --lc-ink: #1a1a1a;
  --lc-muted: #6b6b6b;
  --lc-line: #e5e5e5;
  --lc-bg: #fff;
  --lc-bg-soft: #fafafa;
  --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. Outdoors the muted grey is
     the first thing to disappear, and every line that uses it here is a line
     somebody needs while standing up. */
  --lct-2nd: #4a4a4a;

  /* The lore ground. Cool limewash, deliberately NOT parchment or sepia — the
     whole product is distinguishing itself from the ghost-tour register, and a
     warm aged tint would put it straight back there. */
  --lct-lore-bg: #ecefef;
  --lct-lore-line: #1a1a1a;

  --lct-measure: 40rem;

  color-scheme: light;
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-family: var(--lc-serif);
  overflow-x: clip;
}
.lc-tr *, .lc-tr *::before, .lc-tr *::after { box-sizing: border-box; }

/* theme.js injects .tm-header-placeholder to hold space for the overlaid
   navigation. With the header transparent, the hero would otherwise still
   start 80px down behind a white bar. Scoped to these pages' own body
   classes — every other page still wants that space held. */
.lc-tour-stop-single .tm-header-placeholder,
.lc-tour-single .tm-header-placeholder { display: none; }

/* An overlaid header keeps its transparent background when UIkit fixes it on
   scroll, so past the hero the logo and every link would float over white
   paper. .uk-navbar-sticky, never .uk-sticky-fixed: an overlay header is
   fixed from the first paint, so .uk-sticky-fixed is present at the very top
   and a white ground on it would hide the light navigation over the hero. */
.lc-tour-stop-single .tm-header .uk-navbar-container.uk-navbar-sticky,
.lc-tour-single .tm-header .uk-navbar-container.uk-navbar-sticky {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.lc-tr__wrap {
  width: 100%;
  max-width: var(--lct-measure);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 720px) { .lc-tr__wrap { padding: 0 28px; } }

/* --------------------------------------------------------------- kickers */

.lc-tr__kicker {
  display: block;
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ hero
 *
 * The ground is painted unconditionally and the photograph layered over it,
 * rather than one or the other. Nothing in this vertical has a picture yet and
 * an imported URL can 404 later; either way the band still has a ground, which
 * is what stops a transparent header rendering a 200 page with every nav link
 * invisible. The gradient is the site's own hero fallback, not a new one.
 */
.lc-tr__hero {
  position: relative;
  background-color: #0b0f0c;
  background-image: var(--lc-hero-img, linear-gradient(158deg, #243027 0%, #131a15 55%, #0b0f0c 100%));
  /* A column, not a row. As a row the inner block, the credit and the claims
     strip were siblings whose flex basis is clamped by their own max-width, so
     they measured narrow enough to share one line and never wrapped — which
     pinned the content to the left edge at any viewport wider than the cap and
     was invisible on a phone. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-top: 128px;              /* clearance for the navigation now on top */
}
@media (max-width: 959px) {
  /* The worst case, not a spacer: the storm ribbon rides inside the mobile
     header and wraps on a phone. */
  .lc-tr__hero { padding-top: 158px; }
}

/* The scrim only exists to hold type off a photograph. With no photograph the
   gradient ground already has the contrast, and a second dark layer over it
   just muddies the depth — so it is opacity:0 until wp_head says otherwise. */
.lc-tr__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to top, rgba(9, 11, 10, .92) 0%, rgba(9, 11, 10, .62) 44%, rgba(9, 11, 10, .34) 100%);
}

.lc-tr__heroinner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lct-measure);
  margin: 0 auto;
  padding: 0 20px 30px;
  color: #fff;
}
@media (min-width: 720px) { .lc-tr__heroinner { padding: 0 28px 40px; } }

/* A stop's photograph shows the thing the reader is being told to look at, so
   it is the design and earns real height. Never exactly 100vh — a sliver of
   what is below is the scroll cue. */
.lc-tr__hero--stop.has-photo { min-height: 66vh; }
@media (min-width: 960px) { .lc-tr__hero--stop.has-photo { min-height: 62vh; } }

/* The tour's photograph is only a ground for the title. Height is what the
   title block needs plus the clearance, and no more: the reader came for the
   route, and the route is the next thing down. */
.lc-tr__hero--tour { padding-bottom: 0; }

.lc-tr__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-bottom: 26px;
}
@media (max-width: 620px) { .lc-tr__topline > * { flex: 1 1 100%; } }
.lc-tr__back,
.lc-tr__pos {
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
}
.lc-tr__back { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 2px; }
.lc-tr__back:hover, .lc-tr__back:focus-visible { color: #fff; border-bottom-color: #fff; }
.lc-tr__pos { color: rgba(255, 255, 255, .72); letter-spacing: .19em; }

/* ------------------------------------------------------- the instruction */

.lc-tr__lookfor { margin: 0 0 22px; }
.lc-tr__lookfor .lc-tr__kicker {
  color: #fff;
  opacity: .82;
  margin-bottom: 10px;
  padding-left: 14px;
  border-left: 3px solid #fff;
}
.lc-tr__lookforline {
  margin: 0;
  font-family: var(--lc-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 6.6vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.005em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  text-wrap: balance;
}

/* The name is deliberately subordinate to the instruction. Standing on a
   street you do not need "Philadelphia Alley" at display size — you need "the
   narrow passage between Queen and Cumberland". The name is how the page was
   found; the instruction is what is useful now. */
.lc-tr__title {
  margin: 0;
  font-family: var(--lc-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 4.4vw, 1.6rem);
  line-height: 1.25;
  color: #fff;
}
.lc-tr__place {
  margin: 8px 0 0;
  font-family: var(--lc-sans);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------- the evidence rule
 *
 * The loudest statement the flag makes: the page is underlined differently
 * depending on how far the record goes. Built from gradients rather than
 * border-style so the dash length is exact — a 3px `dashed` border renders as
 * a dotted smear at this weight and reads as a mistake.
 */
.lc-tr__rule {
  border: 0;
  margin: 26px 0 0;
  width: 100%;
}
.lc-tr__rule--solid { height: 3px; background: var(--lc-ink); }
.lc-tr__rule--double {
  height: 7px;
  background: linear-gradient(var(--lc-ink) 0 2px, transparent 2px 5px, var(--lc-ink) 5px 7px);
}
.lc-tr__rule--dashed {
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--lct-lore-line) 0 13px, transparent 13px 23px);
}

/* ---------------------------------------------------------- read aloud
 *
 * Somebody will tap this in a quiet street, so it says out loud what it is
 * about to do and how long for before it is pressed, and the stop control is a
 * separate target rather than a second meaning for the same one.
 */
.lc-tr__player[hidden], .lc-tr__stop[hidden], .lc-tr__here[hidden] { display: none !important; }

.lc-tr__player {
  display: flex;
  gap: 10px;
  margin: 26px 0 30px;
}
.lc-tr__play {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 18px;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--lc-ink);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-tr__play:hover { background: #000; }
.lc-tr__play:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 2px; }
.lc-tr__playmark {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
}
.lc-tr__playtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lc-tr__playlabel {
  font-family: var(--lc-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.lc-tr__playmeta {
  font-family: var(--lc-sans);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .74);
}
.lc-tr__glyph-pause { display: none; }
.lc-tr__player.is-playing .lc-tr__glyph-play { display: none; }
.lc-tr__player.is-playing .lc-tr__glyph-pause { display: inline; }

/* How far through, along the foot of the control. Cheap, honest, and it is
   the only thing that answers "how much of this is left" while walking. */
.lc-tr__play::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--lct-progress, 0));
  transform-origin: left center;
  background: var(--lc-accent);
  transition: transform var(--lc-t-base, .32s) var(--lc-ease, ease);
}

.lc-tr__stop {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 68px;
  min-height: 68px;
  border: 2px solid var(--lc-ink);
  background: #fff;
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lc-tr__stop:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 2px; }

/* ------------------------------------------------------------- the plate
 *
 * Only contested and lore carry one. A documented stop is the unmarked
 * baseline on purpose: if every stop wears a banner the banner stops meaning
 * anything, and then the presence of one says nothing.
 */
.lc-tr__plate {
  display: block;
  padding: 24px 0 4px;
  margin-bottom: 20px;
}
.lc-tr__platelabel {
  display: block;
  font-family: var(--lc-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lc-ink);
  margin-bottom: 9px;
}
.lc-tr__plateline {
  display: block;
  font-family: var(--lc-serif);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--lc-ink);
}

/* ------------------------------------------------------------- the story */

.lc-tr__telling { margin: 0 0 34px; }
.lc-tr__story {
  font-size: clamp(1.1875rem, 4.5vw, 1.25rem);
  line-height: 1.64;
  color: var(--lc-ink);
  letter-spacing: .002em;
}
.lc-tr__story p { margin: 0 0 1.15em; }
.lc-tr__story p:last-child { margin-bottom: 0; }

/* Lore is printed on different paper. The tint bleeds to the page edge rather
   than sitting in a rounded box, because a box reads as a component and paper
   reads as a different kind of claim — which is the actual point. */
.lc-tr--ev-lore .lc-tr__telling,
.lc-tr--ev-contested .lc-tr__telling {
  margin-left: -20px;
  margin-right: -20px;
  padding: 4px 20px 26px;
}
@media (min-width: 720px) {
  .lc-tr--ev-lore .lc-tr__telling,
  .lc-tr--ev-contested .lc-tr__telling { margin-left: -28px; margin-right: -28px; padding: 4px 28px 30px; }
}
.lc-tr--ev-lore .lc-tr__telling {
  background: var(--lct-lore-bg);
  border-top: 3px dashed transparent;
  border-image: repeating-linear-gradient(90deg, var(--lct-lore-line) 0 13px, transparent 13px 23px) 3;
  border-bottom: 3px dashed transparent;
}
.lc-tr--ev-contested .lc-tr__telling {
  background: var(--lc-bg-soft);
  border-top: 3px solid var(--lc-ink);
  border-bottom: 3px solid var(--lc-ink);
}

/* The sentence being read aloud. A tint alone vanishes in sun, so the load is
   carried by the rule under it; the tint only says which line, not that there
   is one. */
.lc-tr__s { transition: background-color var(--lc-t-fast, .18s) var(--lc-ease, ease); }
.lc-tr__s.is-speaking {
  background: #dfeae5;
  box-shadow: -.18em 0 0 #dfeae5, .18em 0 0 #dfeae5;
  border-bottom: 2px solid var(--lc-accent);
}

/* An archival figure. Shown whole on its own ground rather than cropped, because
   the border, the paper and the lettering on an old print are part of what it is. */
.lc-tr__figure { margin: 0 0 34px; }
.lc-tr__figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--lc-bg-soft);
}
.lc-tr__figure figcaption {
  display: block;
  padding: 12px 0 0;
  border-top: 1px solid var(--lc-line);
  margin-top: 12px;
}
.lc-tr__figcap {
  display: block;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--lc-ink);
}
.lc-tr__figcredit {
  display: block;
  margin-top: 5px;
  font-family: var(--lc-sans);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--lct-2nd);
}

/* The credit rides on the photograph rather than under it: on a phone a line of
   grey text between the hero and the first control is a step the reader has to
   walk past to get to the thing they came for. */
.lc-tr__herocredit {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lct-measure);
  margin: 0 auto;
  padding: 0 20px 14px;
  font-family: var(--lc-sans);
  font-size: 10px;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .74);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  text-align: right;
}
@media (min-width: 720px) { .lc-tr__herocredit { padding: 0 28px 18px; } }
/* The claims strip is the one band that spans the whole hero rather than
   sitting in the reading column. */

/* ------------------------------------------------------------- locator */

.lc-tr__h {
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--lc-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lc-line);
}
.lc-tr__locator { margin: 0 0 34px; }
.lc-tr__minimap {
  height: 190px;
  background: var(--lc-bg-soft);
  border: 1px solid var(--lc-line);
}
.lc-tr__walkbtn {
  display: inline-block;
  margin-top: 14px;
  padding: 15px 22px;
  min-height: 48px;
  border: 2px solid var(--lc-ink);
  background: #fff;
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--lc-t-fast, .18s) var(--lc-ease, ease), color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-tr__walkbtn:hover, .lc-tr__walkbtn:focus-visible { background: var(--lc-ink); color: #fff; }

/* ------------------------------------------------------------- sources
 *
 * Visible, not folded away. The credibility is the product, so the list is set
 * like a reference at the foot of an article rather than hidden behind a
 * disclosure nobody opens.
 */
.lc-tr__sources { margin: 0 0 34px; }
.lc-tr__sourcelead {
  font-family: var(--lc-sans);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--lct-2nd);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--lc-ink);
}
.lc-tr__sourcelead--lore { border-left: 0; padding-left: 17px; background: repeating-linear-gradient(180deg, var(--lct-lore-line) 0 9px, transparent 9px 16px) left / 3px 100% no-repeat; }
.lc-tr__srclist { margin: 0; padding: 0; list-style: none; counter-reset: src; }
.lc-tr__srclist li {
  counter-increment: src;
  position: relative;
  padding: 0 0 16px 34px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--lc-line);
  font-size: 16.5px;
  line-height: 1.45;
}
.lc-tr__srclist li:last-child { border-bottom: 0; margin-bottom: 0; }
.lc-tr__srclist li::before {
  content: counter(src);
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: var(--lc-sans);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--lc-ink);
}
.lc-tr__srclist a { color: var(--lc-ink); text-decoration: none; border-bottom: 1px solid var(--lc-ink); }
.lc-tr__srclist a:hover, .lc-tr__srclist a:focus-visible { color: var(--lc-accent); border-bottom-color: var(--lc-accent); }
.lc-tr__ext { font-size: .8em; margin-left: 4px; }
.lc-tr__srcmeta {
  display: block;
  margin-top: 5px;
  font-family: var(--lc-sans);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--lct-2nd);
}

/* ------------------------------------------------------------- next stop */

.lc-tr__next {
  display: block;
  padding: 24px 0 30px;
  margin-bottom: 46px;
  border-top: 3px solid var(--lc-ink);
  text-decoration: none;
  color: var(--lc-ink);
}
.lc-tr__next--lore { border-top: 3px solid transparent; border-image: repeating-linear-gradient(90deg, var(--lct-lore-line) 0 13px, transparent 13px 23px) 3; }
.lc-tr__nextkicker {
  display: block;
  font-family: var(--lc-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--lct-2nd);
  margin-bottom: 12px;
}
.lc-tr__nextrow { display: flex; align-items: center; gap: 14px; }
.lc-tr__nextnum {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--lc-ink); color: #fff;
  font-family: var(--lc-sans); font-size: 15px; font-weight: 700;
}
.lc-tr__next--lore .lc-tr__nextnum { background: #fff; color: var(--lc-ink); border: 2px dashed var(--lct-lore-line); }
.lc-tr__nextname { font-family: var(--lc-display); font-size: clamp(1.15rem, 4.6vw, 1.5rem); line-height: 1.24; }
.lc-tr__next:hover .lc-tr__nextname { color: var(--lc-accent); }
.lc-tr__nextwalk, .lc-tr__nextdist {
  display: block; margin-top: 10px;
  font-family: var(--lc-sans); font-size: 12.5px; letter-spacing: .04em; color: var(--lct-2nd);
}
.lc-tr__nextdist:empty { display: none; }
.lc-tr__end { padding: 24px 0 44px; border-top: 3px solid var(--lc-ink); }
.lc-tr__endline { margin: 0 0 4px; font-size: 18px; }

/* ==========================================================================
 * The route page
 * ========================================================================== */

.lc-tr__tourtitle {
  margin: 0;
  font-family: var(--lc-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 8.4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .42);
  text-wrap: balance;
}
.lc-tr__hero--tour .lc-tr__kicker { color: rgba(255, 255, 255, .8); margin-bottom: 16px; }
.lc-tr__intro {
  margin: 18px 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 4vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}
.lc-tr__intro p { margin: 0 0 .7em; }
.lc-tr__intro p:last-child { margin-bottom: 0; }

.lc-tr__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 26px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.lc-tr__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 22px;
  margin-right: 22px;
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.lc-tr__facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.lc-tr__facts strong {
  font-family: var(--lc-display);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
.lc-tr__facts span {
  font-family: var(--lc-sans);
  font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.lc-tr__facts-free strong { color: var(--lc-accent); filter: brightness(1.65); }
.lc-tr__startnote { margin: 22px 0 0; padding-bottom: 34px; font-size: 16px; color: rgba(255, 255, 255, .9); }
.lc-tr__startnote .lc-tr__kicker { color: rgba(255, 255, 255, .7); margin-bottom: 6px; }
.lc-tr__hero--tour .lc-tr__facts:last-child { padding-bottom: 34px; }

/* ---------------------------------------------------------------- the map
 *
 * A block in normal document flow with a real height, never a pane with the
 * list scrolling inside it. A capped list inside a page collapses to a window
 * showing most of one card, and every reader takes that for the end of the
 * page.
 */
.lc-tr__mapwrap { position: relative; }

/* Edge to edge, a route across a few city blocks is fitted to the short side of
   a very wide box, so most of the frame ends up being the harbour. Capping the
   width brings the aspect closer to the shape of the walk and lines the map up
   with the column the rest of the page is set in. */
@media (min-width: 960px) {
  .lc-tr__mapwrap { max-width: 900px; margin: 34px auto; }
  .lc-tr__map { border: 1px solid var(--lc-line); }
}
.lc-tr__map {
  height: clamp(300px, 52vh, 560px);
  background: var(--lc-bg-soft);
  border-top: 1px solid var(--lc-line);
  border-bottom: 1px solid var(--lc-line);
  z-index: 0;
}
.lc-tr__locate {
  position: absolute;
  left: 14px; bottom: 32px;
  z-index: 2;
  display: flex; align-items: center; gap: 9px;
  min-height: 48px;
  padding: 12px 16px;
  border: 2px solid var(--lc-ink);
  background: #fff;
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.lc-tr__locate:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 2px; }
.lc-tr__locate[disabled] { opacity: .6; cursor: default; }
.lc-tr__locatemark {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--lc-accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 87, .26);
}
.lc-tr__here {
  margin: 0;
  padding: 14px 20px;
  background: var(--lc-ink);
  color: #fff;
  font-family: var(--lc-sans);
  font-size: 13px;
  letter-spacing: .03em;
  line-height: 1.45;
}
.lc-tr__here strong { color: #9ad9bd; font-weight: 700; }

/* The gesture hint, shown once when a single finger tries to drag the map.
   Two-finger panning is why the page can still be scrolled past a full-width
   map on a phone. */
.lc-tr__gesture {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 11, .58);
  color: #fff;
  font-family: var(--lc-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--lc-t-base, .32s) var(--lc-ease, ease);
}
.lc-tr__gesture.is-on { opacity: 1; }

.lc-tr__fitall {
  position: absolute;
  right: 14px; bottom: 32px;
  z-index: 2;
  min-height: 44px;
  padding: 11px 14px;
  border: 2px solid var(--lc-ink);
  background: #fff;
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.lc-tr__fitall:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 2px; }

/* --------------------------------------------------------------- legend */

.lc-tr__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 22px 0 30px;
  font-family: var(--lc-sans);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--lct-2nd);
}
.lc-tr__legenditem { display: flex; align-items: center; gap: 9px; }
.lc-tr__key { display: block; width: 26px; height: 3px; }
.lc-tr__key--solid { background: var(--lc-ink); }
.lc-tr__key--dashed { background: repeating-linear-gradient(90deg, var(--lct-lore-line) 0 7px, transparent 7px 12px); }

/* ------------------------------------------------------------ stop list */

.lc-tr__stops { margin: 0 0 56px; padding: 0; list-style: none; }
.lc-tr__stoprow { position: relative; }

/* The connector. Dashed on the leg running into a stop that is lore, so the
   motif is readable down the whole list from arm's length. */
.lc-tr__stoprow::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 0;
  width: 3px;
  background: var(--lc-ink);
}
.lc-tr__stoprow:last-child::before { display: none; }
.lc-tr__stoprow.next-lore::before {
  background: repeating-linear-gradient(180deg, var(--lct-lore-line) 0 9px, transparent 9px 17px);
}

.lc-tr__stoplink {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 14px 0 12px;
  text-decoration: none;
  color: var(--lc-ink);
}
.lc-tr__num {
  flex: 0 0 auto;
  width: 45px; height: 45px;
  display: grid; place-items: center;
  background: var(--lc-ink);
  color: #fff;
  font-family: var(--lc-sans);
  font-size: 16px; font-weight: 700;
  border-radius: 50%;
  z-index: 1;
}
.lc-tr__stoprow.is-lore .lc-tr__num {
  background: #fff;
  color: var(--lc-ink);
  border: 3px dashed var(--lct-lore-line);
}
.lc-tr__stopbody { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; min-width: 0; }
.lc-tr__stopname {
  font-family: var(--lc-display);
  font-size: clamp(1.2rem, 5vw, 1.55rem);
  line-height: 1.2;
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}
.lc-tr__stoplink:hover .lc-tr__stopname,
.lc-tr__stoplink:focus-visible .lc-tr__stopname { color: var(--lc-accent); }
.lc-tr__stoplook { font-size: 16px; line-height: 1.45; color: var(--lct-2nd); }
.lc-tr__stoptag {
  align-self: flex-start;
  margin-top: 3px;
  padding: 5px 10px;
  font-family: var(--lc-sans);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lc-ink);
  background: var(--lct-lore-bg);
  border: 2px dashed var(--lct-lore-line);
}
.lc-tr__stopdist {
  font-family: var(--lc-sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lc-accent);
}
.lc-tr__stopdist:empty { display: none; }

.lc-tr__leg {
  margin: 0 0 6px;
  padding: 0 0 16px 61px;
  font-family: var(--lc-sans);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--lct-2nd);
}
.lc-tr__leg:empty { padding-bottom: 20px; }
.lc-tr__leg .lc-tr__legdrive { color: var(--lc-ink); font-weight: 700; }

/* --------------------------------------------------------------- pins */

.lc-tr__pinwrap { background: none; border: 0; }
.lc-tr__pin {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--lc-ink, #1a1a1a);
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(0, 0, 0, .35);
}
.lc-tr__pin--lore {
  background: #fff;
  color: #1a1a1a;
  border: 3px dashed #1a1a1a;
  box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(0, 0, 0, .28);
}
.lc-tr__pin--contested { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a1a1a, 0 2px 5px rgba(0, 0, 0, .3); }
.lc-tr__you {
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #2f6f57;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(47, 111, 87, .38), 0 2px 6px rgba(0, 0, 0, .3);
  animation: lc-tr-pulse 2.4s var(--lc-ease, ease) infinite;
}
@keyframes lc-tr-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(47, 111, 87, .38), 0 2px 6px rgba(0, 0, 0, .3); }
  50%      { box-shadow: 0 0 0 4px #fff, 0 0 0 13px rgba(47, 111, 87, .10), 0 2px 6px rgba(0, 0, 0, .3); }
}

.lc-tr__poplabel {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #4a4a4a;
  display: block; margin-bottom: 4px;
}
.lc-tr__popname { font-family: "Playfair Display", Georgia, serif; font-size: 17px; line-height: 1.2; color: #1a1a1a; }
.leaflet-popup-content-wrapper { border-radius: 0; }
.leaflet-popup-content { margin: 14px 16px; }
.leaflet-container { font-family: "PT Serif", Georgia, serif; }

/* ------------------------------------------------- the bottom-bar control
 *
 * The in-page control starts the reading; this is the one that pauses it once
 * that control has scrolled away and the reader is walking. It rides in the
 * site's existing bar rather than stacking a second fixed strip above it — two
 * fixed bars is what caps every overlay opened from either of them.
 */
.lc-tr-barbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 10px;
}
.lc-tr-barbtn__label {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.lc-tr-barbtn.is-playing { color: #2f6f57; }

/* ------------------------------------------------------------------ a11y */

.lc-tr__sronly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lc-tr *, .lc-tr *::before, .lc-tr *::after { animation: none !important; transition: none !important; }
  .lc-tr__you { animation: none !important; }
}