/* ===================================================== on-the-water.css ==
   The /on-the-water/ hub. Inlined into the page's builder layout by
   scripts/build_water_page.py — it is not enqueued from PHP, because the
   two things it dresses (a live tide instrument and a 135-row launch
   finder) have to work the day the page is written, and the asset channel
   to the server is a separate, human-operated step.

   Everything the theme can dress is left to the theme. The page is built
   from native builder elements — headline, text, image, accordion, button
   — and those carry no rules here at all. What is below is only the four
   things a builder element cannot express: a department rule, a tide
   chart, a filterable launch list, and a full-bleed dark spread.

   Tokens are the site's own, read off the live stylesheet rather than
   invented: Playfair Display is what h1/h2 already resolve to, PT Serif is
   the body face, and #2d2e33 / #6c6d74 / #e5e5e7 are the ink, muted and
   hairline the rest of the site is set in. The accent is the house red
   that lc-guide.css already uses on /golf/ and /daufuskie/. No new palette.
   ======================================================================= */

/* .lcw-panel carries the same block because on a phone the site bottom bar
   MOVES the control group out of this section and into its own docked panel,
   which is a child of <body>. Tokens declared only on the section would stop
   resolving the moment the controls leave it, and every control would fall
   back to the theme's defaults at three times the size. */
.lcw, .lcw-panel {
  --w-ink:    #2d2e33;
  --w-muted:  #6c6d74;
  --w-line:   #e5e5e7;
  --w-accent: #e44e56;
  --w-well:   #14161a;   /* what a photograph fades into. Never #000. */
  --w-paper:  #f7f6f4;
  --w-serif:  'Playfair Display', 'PT Serif', Georgia, serif;
  --w-sans:   -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --w-ease:   cubic-bezier(.22,.72,0,1);
}

/* ------------------------------------------------------------ the hero -- */
/* The photograph is on the SECTION and the header tucks over it; the scrim
   comes from lc-motion.css. Only two things need saying here: the kicker's
   register, and a measure for the lede, because YOOtheme's max-width control
   emits a FIXED width rather than a cap. */
.lcw-kicker {
  margin: 0 0 .6em;
  font-family: var(--w-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.lcw-hero h1 { text-wrap: balance; text-shadow: 0 1px 24px rgba(10,14,12,.34); }
.lcw-lede {
  margin: .5em 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 16px rgba(10,14,12,.4);
}
.lcw-credit {
  margin: 2.4em 0 0;
  font-family: var(--w-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ------------------------------------------------- the department rule -- */
/* Same grammar as the other guide fronts: a hairline with an accent tick on
   it, the section name in the display serif, the note as a small label on
   the same baseline. */
.lcw-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 26px;
  padding-top: 16px;
  border-top: 1px solid var(--w-line);
}
.lcw-head::before {
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 46px; height: 3px;
  background: var(--w-accent);
}
.lcw-head h2 {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--w-serif);
  font-size: 27px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em;
  color: var(--w-ink);
}
.lcw-head span {
  flex: 0 1 auto; max-width: 42%; text-align: right;
  font-family: var(--w-sans);
  font-size: 11px; font-weight: 600; line-height: 1.55; letter-spacing: .16em;
  text-transform: uppercase; color: var(--w-muted); text-wrap: balance;
}
.lcw-head--light { border-top-color: rgba(255,255,255,.2); }
.lcw-head--light h2 { color: #fff; }
.lcw-head--light span { color: rgba(255,255,255,.6); }

/* ========================================================== the tide ==== */
/* The one instrument on the page. Six stations across the corridor; one is
   read at a time, because six identical tiles would be six identical tiles
   and because it keeps this to a single request against a public API.  */
.lcw-tide { display: grid; grid-template-columns: 260px 1fr; gap: 0 46px; align-items: start; }

.lcw-stations { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lcw-station {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 0 8px; border: 0; border-bottom: 1px solid var(--w-line);
  background: none; text-align: left; cursor: pointer;
  font-family: var(--w-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--w-muted);
  transition: color .2s var(--w-ease);
}
.lcw-station em { font-style: normal; font-size: 10px; letter-spacing: .1em; opacity: .7; }
.lcw-station:hover { color: var(--w-ink); }
.lcw-station[aria-pressed="true"] { color: var(--w-ink); border-bottom-color: var(--w-accent); }
.lcw-station:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }

.lcw-reading { min-height: 232px; }
.lcw-state {
  margin: 0; font-family: var(--w-serif); font-size: 34px; font-weight: 400;
  line-height: 1.16; color: var(--w-ink); text-wrap: balance;
}
.lcw-state b { font-weight: 400; color: var(--w-accent); }
.lcw-sub {
  margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--w-muted); max-width: 62ch;
}

/* The chart. One series, so no legend box: the heading names it, the four
   turning points are labelled on the curve, and the row underneath is the
   same numbers as text. Axes stay recessive; the accent is spent only on
   the now-marker, which is the one thing being asserted. */
.lcw-chart { display: block; width: 100%; height: 152px; margin: 22px 0 0; overflow: visible; }
.lcw-chart .lcw-area   { fill: var(--w-ink); opacity: .06; }
.lcw-chart .lcw-line   { fill: none; stroke: var(--w-ink); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.lcw-chart .lcw-base   { stroke: var(--w-line); stroke-width: 1; }
.lcw-chart .lcw-now    { stroke: var(--w-accent); stroke-width: 2; }
.lcw-chart .lcw-dot    { fill: var(--w-ink); opacity: .55; }
.lcw-chart .lcw-tick   { fill: var(--w-muted); font-family: var(--w-sans); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.lcw-chart .lcw-nowlbl { fill: var(--w-ink); font-family: var(--w-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }

.lcw-events { display: flex; flex-wrap: wrap; gap: 0 34px; margin: 16px 0 0; padding: 0; list-style: none; }
.lcw-events li { font-family: var(--w-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-muted); }
.lcw-events b { color: var(--w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.lcw-note { margin: 18px 0 0; font-family: var(--w-sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-muted); }
.lcw-note a { color: inherit; border-bottom: 1px solid var(--w-line); text-decoration: none; }
.lcw-note a:hover { color: var(--w-ink); border-bottom-color: var(--w-accent); }

/* =================================================== the mosaic caption == */
/* The tiles themselves are native image + text elements. This only sets the
   caption's register so the six read as one family at three different sizes. */
.lcw-tile { margin: 14px 0 0; }
/* Ink, not the accent: #e44e56 measures 3.80:1 on white, which is enough for
   a rule or a 34px word and not for a 10px label. The accent stays on the
   marks — the department tick, the selected-station rule, the now-marker. */
.lcw-tile__k {
  margin: 0; font-family: var(--w-sans); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--w-ink);
}
.lcw-tile__t {
  margin: 7px 0 0; font-family: var(--w-serif); font-size: 23px; font-weight: 400;
  line-height: 1.16; color: var(--w-ink);
}
.lcw-tile__b { margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--w-muted); }
.lcw-tile__l {
  display: inline-block; margin: 11px 0 0; font-family: var(--w-sans); font-size: 10.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--w-ink);
  text-decoration: none; border-bottom: 1px solid var(--w-line);
  transition: color .2s var(--w-ease), border-color .2s var(--w-ease);
}
.lcw-tile__l:hover { border-bottom-color: var(--w-accent); border-bottom-width: 2px; }
.lcw-tile__l:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
.lcw-tile--lead .lcw-tile__t { font-size: 31px; }
.lcw-tile--lead .lcw-tile__b { font-size: 16px; max-width: 52ch; }

/* ================================================== the captains spread == */
/* Full-bleed and dark: the only place on the page where the white stops,
   which is what stops it reading as a second hero. */
.lcw-spread { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; background: var(--w-well); }
.lcw-spread__fig { position: relative; overflow: hidden; min-height: 560px; background: var(--w-well); }
/* A 2560-wide photograph in a 600-wide frame: centred, the crop lands on
   empty water between the two boats, so it is pulled left onto the bow and
   the name on it. */
.lcw-spread__fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 22% 55%; filter: saturate(.94);
}
.lcw-spread__cap {
  position: absolute; z-index: 2; left: 22px; bottom: 18px; padding-left: 12px;
  border-left: 2px solid var(--w-accent);
  font-family: var(--w-sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.84); text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.lcw-spread__panel { display: flex; flex-direction: column; justify-content: center; padding: 66px 6% 66px 58px; color: #fff; }

.lcw-boats { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: lcwb; }
.lcw-boats li { position: relative; counter-increment: lcwb; padding: 0 0 0 46px; margin: 0 0 21px; }
.lcw-boats li:last-child { margin-bottom: 0; }
.lcw-boats li::before {
  content: counter(lcwb, decimal-leading-zero);
  position: absolute; left: 0; top: .32em;
  font-family: var(--w-sans); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--w-accent);
}
.lcw-boats a {
  font-family: var(--w-serif); font-size: 21px; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28); transition: border-color .22s ease;
}
.lcw-boats a:hover { border-bottom-color: var(--w-accent); }
.lcw-boats a:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
.lcw-boats p { margin: 5px 0 0; font-size: 14px; line-height: 1.62; color: rgba(255,255,255,.72); }
.lcw-boats em { font-style: normal; font-family: var(--w-sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* ======================================================== the finder ==== */
/* The dense band. Everything else on this page is curated down; this is the
   one surface where the complete inventory is the point, so it is a list of
   135 rows and it is meant to be. */
/* YOOtheme's max-width control emits a fixed width rather than a cap, so the
   only honest place to set a line length is here. */
.lcw-intro { max-width: 72ch; }

.lcw-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 0 0 16px; border-bottom: 1px solid var(--w-line);
}
.lcw-controls .lcw-search { flex: 1 1 240px; min-width: 0; }
.lcw-controls input[type="search"],
.lcw-controls select {
  width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px;
  border: 1px solid var(--w-line); border-radius: 0; background: #fff;
  font-family: var(--w-sans); font-size: 13px; color: var(--w-ink);
  appearance: none; -webkit-appearance: none;
}
.lcw-controls select { padding-right: 30px; background-image: none; }
.lcw-controls input[type="search"]:focus,
.lcw-controls select:focus { outline: 2px solid var(--w-accent); outline-offset: -1px; }
/* Every one of these is set hidden from script, and an author `display` rule
   outranks the user-agent's [hidden] whatever its specificity — so the control
   stays on screen doing nothing. Each rule below is the matching opt-out. */
.lcw-controls label.lcw-toggle[hidden] { display: none; }
.lcw-controls label.lcw-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 2px;
  font-family: var(--w-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--w-muted); cursor: pointer; white-space: nowrap;
}
.lcw-controls label.lcw-toggle input { accent-color: var(--w-accent); width: 15px; height: 15px; }
.lcw-near {
  height: 42px; padding: 0 18px; border: 1px solid var(--w-ink); background: var(--w-ink);
  color: #fff; cursor: pointer; white-space: nowrap;
  font-family: var(--w-sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background .22s ease, border-color .22s ease;
}
.lcw-near:hover { background: var(--w-accent); border-color: var(--w-accent); }
.lcw-near[aria-pressed="true"] { background: var(--w-accent); border-color: var(--w-accent); }
.lcw-near:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }

.lcw-kinds { display: flex; gap: 24px; margin: 0 0 14px; padding: 0; list-style: none; }
.lcw-kinds button {
  padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--w-sans); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--w-muted);
}
.lcw-kinds button[aria-pressed="true"] { color: var(--w-ink); border-bottom-color: var(--w-accent); }
.lcw-kinds button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }

/* The result line and, on a phone, the list/map switch, on one baseline. */
.lcw-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 14px 0 0;
}
.lcw-count {
  margin: 0; font-family: var(--w-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--w-muted);
}
/* Only ever shown when a map exists AND the viewport is too narrow to hold both.
   On the split it would be a switch between two things already on screen. */
.lcw-view { display: none; flex: 0 0 auto; border: 1px solid var(--w-line); background: #fff; }
.lcw-finder.has-map:not(.is-split) .lcw-view { display: inline-flex; }
/* Adopted: the bar's own Map action is the switch, and two of them side by
   side is one more than anybody needs. */
.lcw-finder.has-map.has-bar .lcw-view { display: none; }
.lcw-view button {
  padding: 8px 16px; border: 0; background: none; cursor: pointer;
  font-family: var(--w-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--w-muted);
}
.lcw-view button[aria-pressed="true"] { background: var(--w-ink); color: #fff; }
.lcw-view button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }

.lcw-list { margin: 4px 0 0; padding: 0; list-style: none; column-count: 2; column-gap: 54px; }
.lcw-list > li {
  break-inside: avoid; padding: 15px 0 14px; border-bottom: 1px solid var(--w-line);
}
.lcw-list > li[hidden] { display: none; }
.lcw-launch__n {
  display: inline; margin: 0; font-family: var(--w-serif); font-size: 18px;
  font-weight: 400; line-height: 1.2; color: var(--w-ink);
}
/* Empty until a reader asks to be located, so it takes no room until then. */
.lcw-launch__d {
  float: right; margin-left: 12px; font-family: var(--w-sans); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; color: var(--w-ink);
  font-variant-numeric: tabular-nums;
}
.lcw-launch__w { margin: 4px 0 0; font-family: var(--w-sans); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--w-muted); }
.lcw-launch__b { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--w-ink); }
/* Unrecorded is not the same as absent, and on a boat ramp the difference is
   whether someone in a wheelchair drives an hour for nothing. Blank fields
   say so in their own words rather than being rendered as a "no" — but it is
   true of most rows, so it is set as a field rather than as a warning. */
.lcw-launch__u {
  margin: 4px 0 0; font-family: var(--w-sans); font-size: 10.5px; line-height: 1.5;
  letter-spacing: .04em; color: var(--w-muted); opacity: .9;
}
.lcw-launch__m { display: inline-block; margin: 7px 12px 0 0; font-family: var(--w-sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink); text-decoration: none; border-bottom: 1px solid var(--w-line); }
.lcw-launch__m:hover { border-bottom-color: var(--w-accent); }
.lcw-launch__m:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
/* The row's own way onto the map. A real button, always in the tab order, so
   the list-to-map link is never mouse-only — the row click is a convenience
   layered over this, not the mechanism. */
button.lcw-launch__go {
  padding: 0; border: 0; border-bottom: 1px solid var(--w-line);
  background: none; cursor: pointer; color: var(--w-muted);
  transition: color .18s var(--w-ease), border-color .18s var(--w-ease);
}
button.lcw-launch__go:hover { color: var(--w-ink); border-bottom-color: var(--w-accent); }
.lcw-list > li.is-sel button.lcw-launch__go { color: var(--w-accent); border-bottom-color: var(--w-accent); }

/* The mosaic's "Find a ramp" tile points here, and the theme header is sticky:
   without this the anchor lands the tab strip and the whole control row
   underneath it. */
.lcw-finder { scroll-margin-top: 104px; }

/* ====================================================== the split stage == */
/* A landing's most important attribute is where it is, so above 960px the list
   and the map are one instrument rather than two blocks: the stage is a fixed
   height, the list scrolls inside it, and the map therefore stays put while a
   reader works down the column. The map is added by script — everything below
   .is-split is inert until then, so a reader with no JavaScript, or with the
   Leaflet CDN blocked, keeps the two-column list exactly as it was. */
.lcw-stage { position: relative; }
.lcw-finder.is-split .lcw-stage {
  --lcw-col: clamp(360px, 32%, 500px);
  display: grid;
  grid-template-columns: var(--lcw-col) minmax(0, 1fr);
  gap: 0 34px;
  align-items: stretch;
  height: var(--lcw-stage-h, 700px);
}
.lcw-finder.is-split .lcw-pane {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 16px;
  scrollbar-width: thin; scrollbar-color: #c3c3c8 transparent;
  /* The cut at the bottom of a scroller reads as the end of the list unless
     something says otherwise. Removed the moment the pane IS at the end, so it
     never implies rows that are not there. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent);
}
.lcw-finder.is-split .lcw-pane.at-end { -webkit-mask-image: none; mask-image: none; }
.lcw-finder.is-split .lcw-list { column-count: 1; margin-top: 0; }
.lcw-finder.is-split .lcw-list > li {
  position: relative; padding: 13px 12px 12px 26px; cursor: pointer;
  transition: background .18s var(--w-ease);
}
/* The same mark as the map's, in the same column, so the two read as one thing
   before anybody has moved the mouse. */
.lcw-finder.is-split .lcw-list > li > .lcw-pin { position: absolute; left: 3px; top: 20px; }
.lcw-finder.is-split .lcw-list > li:hover,
.lcw-finder.is-split .lcw-list > li.is-hot { background: rgba(45,46,51,.045); }
.lcw-finder.is-split .lcw-list > li.is-sel { background: rgba(228,78,86,.07); }
.lcw-finder.is-split .lcw-list > li.is-sel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: -1px; width: 2px; background: var(--w-accent);
}
.lcw-finder.is-split .lcw-list > li:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -2px; }
.lcw-finder.is-split .lcw-list > li { scroll-margin: 14px 0 52px; }
.lcw-finder.is-split .lcw-launch__b { font-size: 13.5px; line-height: 1.5; }
.lcw-finder.is-split .lcw-more { margin-top: 14px; }

/* -------------------------------------------------------------- the map -- */
/* isolation: the theme header is sticky and Leaflet's own controls sit at
   z-index 1000, which on a 700px map would otherwise ride over it. */
.lcw-mapcol { display: flex; flex-direction: column; min-height: 0; }
.lcw-mapcol[hidden] { display: none; }
.lcw-mapwrap {
  position: relative; isolation: isolate; flex: 1 1 auto; min-height: 0;
  border: 1px solid var(--w-line);
  /* Not grey. Until the tiles arrive the frame holds the colour the water will
     be, so the wait looks like a map loading rather than a box that failed. */
  background: #dde4e8;
  /* Two motion-kernel tokens, overridden rather than redefined: the veil takes
     the water colour instead of white, and its wait line the house accent. */
  --lc-bg: #dde4e8;
  --lc-rose: var(--w-accent);
}
.lcw-map { position: absolute; inset: 0; }
.lcw-mapwrap.lc-pending { --lc-pending-min: 100%; }

/* The mark. One element, used at 11px in the list rail and on the map, because
   a legend only works if the two are literally the same object. Solid says the
   agency recorded a courtesy dock; hollow says it did not record one — which is
   not the same as recording that there is none, and the key says so. */
/* The rail mark belongs to the split, where it pairs with the map. In the
   two-column list there is nothing for it to pair with. */
.lcw-list > li > .lcw-pin { display: none; }
.lcw-finder.is-split .lcw-list > li > .lcw-pin { display: block; }
.lcw-pin {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--w-ink);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20,22,26,.36);
  transition: transform .18s var(--w-ease), background .18s var(--w-ease), box-shadow .18s var(--w-ease);
}
.lcw-pin--open {
  background: #fff;
  box-shadow: inset 0 0 0 2.5px var(--w-ink), 0 0 0 2px #fff, 0 1px 3px rgba(20,22,26,.3);
}
.lcw-pinwrap { width: 0 !important; height: 0 !important; background: none; border: 0; }
.lcw-pinwrap .lcw-pin { position: absolute; left: -6px; top: -6px; }
.lcw-pinwrap.is-hot .lcw-pin { background: var(--w-accent); transform: scale(1.5); box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(20,22,26,.4); }
.lcw-pinwrap.is-sel { z-index: 620 !important; }
.lcw-pinwrap.is-sel .lcw-pin {
  background: var(--w-accent); transform: scale(1.8);
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 7px rgba(228,78,86,.2), 0 2px 9px rgba(20,22,26,.4);
}
/* Where the reader is, once they ask. A ring rather than a dot, so it is never
   mistaken for a landing. */
.lcw-here {
  /* A span is inline by default, which drops width and height on the floor and
     leaves a border-shaped pill the height of the line box. */
  display: block;
  width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid var(--w-accent); background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(20,22,26,.3);
}
.lcw-herewrap { background: none; border: 0; }

/* Clusters. MarkerCluster.Default.css is deliberately NOT loaded — it is the
   blue-and-green blob sheet, and it is the single thing that makes a Leaflet
   map look like every other Leaflet map. This is the same disc as the mark. */
.lcw-cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--w-ink); color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(20,22,26,.34);
  font-family: var(--w-sans); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  transition: background .18s var(--w-ease), transform .18s var(--w-ease);
}
.lcw-cluster.is-lg { font-size: 12px; }
.lcw-cluster.is-hot { background: var(--w-accent); transform: scale(1.1); }

/* A single answer needs no chrome around it; a popup here is the row's own
   fields at the point on the water they describe. */
.lcw-pop .leaflet-popup-content-wrapper {
  border-radius: 0; padding: 0; background: #fff;
  box-shadow: 0 12px 34px rgba(20,22,26,.2), 0 1px 0 var(--w-line);
}
.lcw-pop .leaflet-popup-content { margin: 0; width: 244px !important; line-height: 1.5; }
.lcw-pop .leaflet-popup-tip { background: #fff; box-shadow: 0 12px 34px rgba(20,22,26,.16); }
.lcw-pop a.leaflet-popup-close-button { color: var(--w-muted); padding: 6px 7px 0 0; }
.lcw-pop a.leaflet-popup-close-button:hover { color: var(--w-ink); background: none; }
.lcw-card { padding: 15px 16px 14px; }
/* leaflet.css declares its own font-family on the container, which cuts the
   popup off from the page's body face. The container IS .lcw-map — Leaflet adds
   its class to the element it was handed — so this is matched from the wrapper,
   not as a descendant of the map. */
.lcw-mapwrap .leaflet-container { font-family: inherit; }
/* leaflet.css paints the container #ddd, so a map whose tiles are still in
   flight — or whose last row never arrives — reads as a broken grey box.
   Under the water colour it reads as a map that has not finished. */
.lcw-mapwrap .leaflet-container { background: #dde4e8; }
.lcw-card h4 {
  margin: 0; font-family: var(--w-serif); font-size: 19px; font-weight: 400;
  line-height: 1.18; color: var(--w-ink);
  /* The theme sets h4 in tracked uppercase. That is right for a section label
     and wrong for a place name, which is set here the way the list sets it. */
  text-transform: none; letter-spacing: -.01em;
}
.lcw-card__w { margin: 5px 0 0; font-family: var(--w-sans); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--w-muted); }
.lcw-card__b { margin: 9px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--w-ink); }
.lcw-card__u { margin: 6px 0 0; font-family: var(--w-sans); font-size: 10px; line-height: 1.5; color: var(--w-muted); }
/* Scoped to the popup so it outranks the theme's own link colour, which is a
   blue this page uses nowhere else. */
.lcw-pop .lcw-card__go {
  display: inline-block; margin: 12px 0 0; font-family: var(--w-sans); font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink);
  text-decoration: none; border-bottom: 1px solid var(--w-line);
}
.lcw-pop .lcw-card__go:hover { color: var(--w-ink); border-bottom-color: var(--w-accent); }

/* Leaflet's own furniture, put into the page's register. */
.lcw-map .leaflet-control-zoom { border: 0; box-shadow: 0 1px 6px rgba(20,22,26,.18); }
.lcw-map .leaflet-control-zoom a {
  width: 30px; height: 30px; line-height: 30px; border-radius: 0;
  color: var(--w-ink); border-bottom: 1px solid var(--w-line); font-weight: 400;
}
.lcw-map .leaflet-control-zoom a:hover { background: var(--w-paper); color: var(--w-accent); }
.lcw-map .leaflet-control-attribution {
  background: rgba(255,255,255,.86); padding: 2px 7px;
  font-family: var(--w-sans); font-size: 9.5px; letter-spacing: .04em; color: var(--w-muted);
}
.lcw-map .leaflet-control-attribution a { color: var(--w-muted); }

/* Said in the frame it applies to, not in a caption underneath it. */
.lcw-mapnote {
  position: absolute; z-index: 500; top: 12px; max-width: 66%;
  left: 50%; transform: translateX(-50%);
  padding: 9px 13px; background: rgba(255,255,255,.94);
  box-shadow: 0 2px 12px rgba(20,22,26,.14);
  font-family: var(--w-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--w-ink);
}
.lcw-mapnote[hidden] { display: none; }

.lcw-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  margin: 10px 0 0; font-family: var(--w-sans); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--w-muted);
}
.lcw-legend[hidden] { display: none; }
.lcw-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lcw-legend i { flex: 0 0 auto; }
.lcw-legend .lcw-pin { position: static; display: block; }
.lcw-legend .lcw-here { width: 12px; height: 12px; border-width: 2.5px; box-shadow: none; }
.lcw-legend .lcw-cluster { box-shadow: none; }

/* The empty state names what was asked for and hands back the way out, because
   "no results" tells a reader nothing they did not already know. */
.lcw-empty { margin: 26px 0; }
.lcw-empty[hidden] { display: none; }
.lcw-empty p { margin: 0; font-family: var(--w-serif); font-size: 20px; line-height: 1.3; color: var(--w-ink); }
.lcw-empty small { display: block; margin: 8px 0 0; font-size: 14px; font-family: var(--w-sans); letter-spacing: 0; text-transform: none; color: var(--w-muted); }
.lcw-clear {
  margin: 16px 0 0; padding: 11px 20px; border: 1px solid var(--w-ink); background: var(--w-ink);
  color: #fff; cursor: pointer; font-family: var(--w-sans); font-size: 10.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s var(--w-ease), border-color .2s var(--w-ease);
}
.lcw-clear:hover { background: var(--w-accent); border-color: var(--w-accent); }
.lcw-clear:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
/* Every row is already in the page; this only reveals the ones held back so
   the section is a section rather than sixteen thousand pixels of list. */
.lcw-more {
  display: block; width: 100%; margin: 26px 0 0; padding: 15px 22px;
  border: 1px solid var(--w-line); background: #fff; cursor: pointer;
  font-family: var(--w-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--w-ink);
  transition: border-color .22s ease, background .22s ease;
}
.lcw-more[hidden] { display: none; }
.lcw-more:hover { border-color: var(--w-ink); background: var(--w-paper); }
.lcw-more:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
.lcw-source { margin: 22px 0 0; font-family: var(--w-sans); font-size: 10.5px; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); }

/* ========================================================== the index === */
.lcw-index { margin: 0; padding: 0; list-style: none; column-count: 3; column-gap: 50px; }
.lcw-index li { break-inside: avoid; padding: 0 0 15px; margin: 0 0 15px; border-bottom: 1px solid var(--w-line); }
.lcw-index a { font-family: var(--w-serif); font-size: 19px; color: var(--w-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.lcw-index a:hover { border-bottom-color: var(--w-accent); }
.lcw-index a:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
.lcw-index span { display: block; margin: 4px 0 0; font-family: var(--w-sans); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--w-muted); }

/* ============================================================ the tail == */
.lcw-tail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 34px; }
.lcw-tail__l { width: 100%; text-align: center; font-family: var(--w-sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--w-muted); }
.lcw-tail a { font-family: var(--w-serif); font-size: 20px; color: var(--w-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .22s ease, border-color .22s ease; }
.lcw-tail a:hover { border-bottom-color: var(--w-accent); }
.lcw-tail a:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 4px; }

/* ========================================================= breakpoints == */
@media (max-width: 1199px) {
  .lcw-tide { grid-template-columns: 220px 1fr; gap: 0 34px; }
  .lcw-spread__panel { padding: 54px 44px; }
  .lcw-list { column-gap: 40px; }
}
@media (max-width: 959px) {
  .lcw-tide { grid-template-columns: 1fr; gap: 26px; }
  .lcw-stations { flex-direction: row; flex-wrap: wrap; gap: 0 26px; }
  .lcw-station { width: auto; border-bottom-width: 2px; }
  .lcw-station em { display: none; }
  .lcw-spread { grid-template-columns: 1fr; }
  /* min-height MUST drop to 0 alongside an aspect-ratio, or the ratio
     derives the WIDTH from the height and the figure outgrows the phone. */
  .lcw-spread__fig { min-height: 0; aspect-ratio: 16 / 9; }
  .lcw-spread__panel { padding: 44px 30px 52px; }
  .lcw-list { column-count: 1; }
  .lcw-index { column-count: 2; column-gap: 34px; }

  /* Not a split. Below 960 the two halves take turns: the list is the page it
     has always been, and the map is a place you go to and come back from. */
  .lcw-stage[data-view="list"] .lcw-mapcol { display: none; }
  .lcw-stage[data-view="map"] .lcw-pane { display: none; }
  .lcw-stage[data-view="map"] .lcw-mapcol { margin-top: 14px; }
  .lcw-stage[data-view="map"] .lcw-mapwrap { height: 68vh; min-height: 380px; }
  /* Adopted by the site bottom bar: the controls leave the page entirely, so
     the count line becomes the top of the finder and loses its gap. */
  .lcw-finder.has-bar .lcw-bar { margin-top: 0; }
  /* Inside the bar's docked panel the group has no room for a 42px control row
     and a tab strip at full spacing. */
  .lc-bottombar__panel .lcw-controls { display: block; padding-bottom: 0; border-bottom: 0; }
  /* One column, one width. The desktop row sizes the two selects to their own
     content, which reads as a row; stacked, it reads as three ragged edges. */
  .lc-bottombar__panel .lcw-controls > * { width: 100%; margin: 0 0 10px; }
  .lc-bottombar__panel .lcw-controls > *:last-child { margin-bottom: 0; }
  .lc-bottombar__panel .lcw-toggle { height: 38px; }
  .lc-bottombar__panel .lcw-kinds { gap: 18px; }
  .lcw-legend { font-size: 9.5px; gap: 5px 14px; }
}
@media (max-width: 639px) {
  .lcw-head { flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
  .lcw-head h2 { width: 100%; font-size: 21px; }
  .lcw-head span { max-width: 100%; text-align: left; font-size: 10px; letter-spacing: .14em; }
  .lcw-kicker { font-size: 10px; letter-spacing: .2em; }
  .lcw-lede { font-size: 15px; }
  .lcw-state { font-size: 25px; }
  .lcw-sub { font-size: 14px; }
  .lcw-events { gap: 0 20px; }
  .lcw-index { column-count: 1; }
  .lcw-tile--lead .lcw-tile__t { font-size: 25px; }
  .lcw-tile--lead .lcw-tile__b { font-size: 15px; }
  .lcw-controls .lcw-search { flex: 1 1 100%; }
  .lcw-near { flex: 1 1 100%; }
  .lcw-tail a { font-size: 17px; }
  /* Inline, the place label breaks after the name and orphans half of
     "Mount Pleasant" on its own line. */
  .lcw-boats em { display: block; margin-top: 5px; }
  .lcw-boats li { padding-left: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .lcw-station, .lcw-tile__l, .lcw-near, .lcw-tail a, .lcw-boats a { transition: none !important; }
  .lcw-pin, .lcw-cluster, .lcw-list > li, .lcw-clear { transition: none !important; }
  /* Highlight still has to READ, so the colour change stays and only the
     movement goes: a scaled pin is the one part of it that can cause trouble. */
  .lcw-pinwrap.is-hot .lcw-pin, .lcw-pinwrap.is-sel .lcw-pin, .lcw-cluster.is-hot { transform: none; }
}