/* River — a theme for localevents.
 *
 * Warm sand ground, rounded cards carried on a category-coloured spine, and
 * listings grouped under the day they fall on. Every rule is scoped under
 * [data-theme="river"] so that loading this file on an instance that has not
 * chosen it changes nothing, and so a rule here outranks a utility class
 * without needing !important.
 *
 * Carries no community's identity: no place name, no coordinates, no prose.
 * The palette is a generic water-and-sand one that any town can wear.
 *
 * Category colours are keyed by slug (--cat-music and so on) with a neutral
 * fallback, so a category this file has never heard of still renders — it
 * just gets the default blue rather than a colour of its own.
 */

[data-theme="river"] {
  --deep: #123a4f;
  --deep-2: #0b2a3a;
  --river: #2e7fa8;
  /* The end stop for anything that carries text. --river is too light to sit
     under white at 15px — it measures 4.45 — and the gradients run text right
     across their lightest end. This is the same hue, dark enough that white
     reaches 8.1 and the pale blue 5.8. --river itself stays as it is for the
     links and spines, which sit on sand rather than under type. */
  --river-deep: #17566f;
  --shallow: #7cb6ce;
  --sand: #fdf9f3;
  --sand-2: #f5ebdd;
  --sand-3: #e3d3bf;
  --coral: #e2664a;
  --coral-deep: #b23a22;
  --peach: #f2a65a;
  --moss: #3f7d5a;
  --ink: #17262e;
  --ink-2: #5a6e78;

  --font-display: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --cat-music: #6e4b9e;
  --cat-arts-theatre: #b84a80;
  --cat-family: #de8a38;
  --cat-food-drink: #c55a38;
  --cat-markets: #3f7d5a;
  --cat-sports-outdoors: #1f7f84;
  --cat-learning: #2e6fb0;
  --cat-community: #2e7fa8;
  --cat-volunteering: #4b7d52;
  --cat-nightlife: #4e4488;
  --cat-seasonal: #e2664a;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

[data-theme="river"] body {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

[data-theme="river"] .le-main {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px 56px;
}

[data-theme="river"] a {
  color: var(--river);
}

/* ── Navigation ────────────────────────────────────────────────────────── */

[data-theme="river"] .le-nav {
  background: var(--deep);
  color: #fff;
}

[data-theme="river"] .le-nav__inner {
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
}

[data-theme="river"] .le-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  /* A signed-in moderator adds two more links to this bar, which was enough
     to break a two-word site name across two lines. */
  white-space: nowrap;
}

[data-theme="river"] .le-nav__links {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 14px;
}

/* :not(.le-btn) is load-bearing. `.le-nav__links a` is one specificity step
   above `.le-btn`, so without it this pale blue wins over the button's own
   dark text and the call to action renders at a contrast ratio of 1.16 —
   effectively invisible. */
[data-theme="river"] .le-nav__links a:not(.le-btn) {
  color: #a9c9d8;
  text-decoration: none;
}

[data-theme="river"] .le-nav__links a:not(.le-btn):hover {
  color: #fff;
}

[data-theme="river"] .le-badge {
  background: rgba(255, 255, 255, 0.16);
  color: #d6e7f0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  line-height: 1.4;
}

[data-theme="river"] .le-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--peach);
  color: var(--deep-2);
  border: 0;
  border-radius: 999px;
  padding: 11px 21px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

[data-theme="river"] .le-btn:hover {
  background: #fff;
  color: var(--deep-2);
}

[data-theme="river"] .le-btn--quiet {
  background: transparent;
  color: var(--deep);
  box-shadow: inset 0 0 0 1.5px var(--sand-3);
}

[data-theme="river"] .le-btn--quiet:hover {
  background: #fff;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

/* A gradient reading as water deepening, rather than a flat band. */
[data-theme="river"] .le-hero {
  background: linear-gradient(168deg, var(--deep) 0%, #164b63 52%, var(--river-deep) 100%);
  color: #fff;
  padding: 12px 0 62px;
  position: relative;
  overflow: hidden;
}

[data-theme="river"] .le-hero__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

[data-theme="river"] .le-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 9vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

[data-theme="river"] .le-hero h1 em {
  font-style: normal;
  color: var(--peach);
}

[data-theme="river"] .le-hero p {
  margin-top: 13px;
  font-size: 16.5px;
  color: #c6deea;
  max-width: 44ch;
}

[data-theme="river"] .le-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 88px;
}

/* ── Filters ───────────────────────────────────────────────────────────── */

/* Positioning context for the filter panel, which drops below the whole bar.
   The z-index is what keeps that panel above the map further down the page:
   Leaflet gives its own panes z-indexes in the hundreds, and without a
   stacking context here they would paint straight through it. */
[data-theme="river"] .le-filters {
  background: var(--sand-2);
  padding: 18px 0;
  margin-bottom: 8px;
  position: relative;
  z-index: 20;
}

[data-theme="river"] .le-filters__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  /* Containing block for the summary lifted out of the second row below. */
  position: relative;
}

[data-theme="river"] .le-filters input[type="search"],
[data-theme="river"] .le-filters select {
  border: 0;
  background: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--sand-3);
}

/* Capped: `flex: 1` alone stretches the box to whatever is left over, so on a
   wide window it becomes a search field the width of a paragraph beside two
   small selects, which reads as a mistake rather than a hierarchy. */
/* The flex bases matter as much as the cap. All four controls have to fit one
   line down to the 760px breakpoint, or the summary wraps and ends up alone on
   a row of its own — which is what it looked like before. At 760px there is
   712px of content: 220 + 130 + 170 + ~130 + 27 of gaps leaves room to spare,
   and the search takes whatever is left over above that. */
[data-theme="river"] .le-filters input[type="search"] {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 460px;
}

/* A <select> is sized by its widest option, so one long venue name silently
   stretches this to half the bar and pushes everything after it onto a second
   row. The names truncate natively once a width is imposed. */
[data-theme="river"] .le-filters select {
  max-width: 170px;
}

[data-theme="river"] .le-filters input:focus,
[data-theme="river"] .le-filters select:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--river);
}

/* inline-flex, not the default inline: vertical padding on an inline box does
   not grow the line, so the pill bleeds over the rows above and below it and
   wrapped chips visibly overlap. These were <button>s in the prototype, which
   are inline-block already, so porting them to <span> lost it silently. */
[data-theme="river"] .le-chip {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: #fff;
  padding: 11px 19px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--sand-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  color: var(--deep);
  cursor: pointer;
}

[data-theme="river"] .le-more__panel label {
  display: inline-flex;
}

/* Visually hidden so the chip beside it can be styled freely, but still
   focusable and still announced — `display:none` would take it out of the tab
   order and out of the accessibility tree along with it. */
[data-theme="river"] .le-catbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hiding the input hides the browser's focus ring too — without this a
   keyboard user cannot tell which chip they are on. */
[data-theme="river"] .le-catbox:focus-visible + .le-chip {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

[data-theme="river"] .le-catbox:checked + .le-chip {
  background: var(--deep);
  color: #fff;
  box-shadow: none;
}

/* The <details> is an ordinary item on the first row, so its summary sits
   inline beside the search box and wraps with everything else when space runs
   out. The panel it opens is the part that escapes — see below. Taking the
   summary out of the flow instead does not work: the row then lays out as
   though it were absent and the select beside it ends up underneath. */
[data-theme="river"] .le-more {
  flex: 0 1 auto;
}

/* Styled as a control, not a link. An underlined phrase reads as a section
   heading, and nothing about it suggests there is anything to open — the
   chevron and the pill are what make it look pressable. */
[data-theme="river"] .le-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  /* Matches the height of the inputs beside it, and clears the 44px minimum
     for something that has to be tapped. */
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--sand-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  color: var(--deep);
  white-space: nowrap;
}

[data-theme="river"] .le-more > summary::-webkit-details-marker {
  display: none;
}

/* Says "a filter is applied" without opening anything. Paired with an
   sr-only phrase, because a coloured dot announces nothing on its own. */
[data-theme="river"] .le-more__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  margin-left: -1px;
}

[data-theme="river"] .le-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-theme="river"] .le-more > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

[data-theme="river"] .le-more[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

[data-theme="river"] .le-more > summary:hover {
  background: var(--sand);
}

[data-theme="river"] .le-more > summary:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

/* The panel drops below the whole bar instead of opening inside the row.
   That is what lets the summary stay inline with the search box: the row
   holds one small control, and the wide contents hang off the bar itself. */
[data-theme="river"] .le-more__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sand-2);
  padding: 14px 0 20px;
  box-shadow: 0 22px 30px -26px rgba(23, 38, 46, 0.85);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

[data-theme="river"] .le-more__panel-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px;
}

[data-theme="river"] .le-more__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-theme="river"] .le-toggles {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
}

[data-theme="river"] .le-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ── Day heading ───────────────────────────────────────────────────────── */

[data-theme="river"] .le-day {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 36px 0 13px;
}

[data-theme="river"] .le-day h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--deep);
  white-space: nowrap;
}

[data-theme="river"] .le-day__rel {
  background: var(--peach);
  color: var(--deep-2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 12px;
  line-height: 1.3;
}

/* A drawn current in place of a rule. */
[data-theme="river"] .le-day__wave {
  flex: 1;
  height: 12px;
  opacity: 0.55;
  min-width: 24px;
}

[data-theme="river"] .le-day__count {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ── Event row ─────────────────────────────────────────────────────────── */

[data-theme="river"] .le-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The day heading owns the date, so the row spends nothing repeating it and
   keeps only a colour spine for the category. The spine is an inset pseudo-
   element rather than a border: a border-left against a 26px radius renders
   as a curved crescent instead of a straight bar. */
[data-theme="river"] .le-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  align-items: center;
  background: #fff;
  border-radius: 26px;
  margin-bottom: 11px;
  padding: 16px 22px 16px 26px;
  box-shadow:
    0 2px 3px rgba(23, 38, 46, 0.045),
    0 12px 26px -16px rgba(23, 38, 46, 0.3);
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.18s ease;
}

[data-theme="river"] .le-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 999px;
  background: var(--spine, var(--river));
}

[data-theme="river"] .le-row:hover {
  transform: translateY(-2px);
  box-shadow:
    0 3px 5px rgba(23, 38, 46, 0.06),
    0 20px 36px -18px rgba(23, 38, 46, 0.38);
}

[data-theme="river"] .le-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.22;
  letter-spacing: -0.028em;
}

/* The whole card is the target, not just the title: a row that lifts on
   hover but only accepts a tap on one line of text is a trap on a phone. */
[data-theme="river"] .le-row h3 a {
  color: var(--ink);
  text-decoration: none;
}

[data-theme="river"] .le-row h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
}

[data-theme="river"] .le-row h3 a:hover {
  color: var(--ink);
  color: color-mix(in srgb, var(--spine, var(--river)) 55%, var(--ink));
}

[data-theme="river"] .le-row h3 a:focus-visible {
  outline: 0;
}

[data-theme="river"] .le-row:focus-within {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

/* Mixed toward ink for the same reason as the pills: this is the category
   hue on a white card, and the lighter categories do not survive it raw —
   Family measured 2.69, and even the default --river only reaches 4.45. */
[data-theme="river"] .le-when {
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  color: color-mix(in srgb, var(--spine, var(--river)) 55%, var(--ink));
}

[data-theme="river"] .le-where {
  font-weight: 500;
  color: var(--ink-2);
}

[data-theme="river"] .le-summary {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.58;
  max-width: 60ch;
}

[data-theme="river"] .le-cats {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Tinted, not saturated — the colour whispers the category rather than
   competing with the title. A solid fallback precedes each color-mix so a
   browser without it gets a plain pill rather than an unpainted one.

   The *text* is the hue mixed most of the way to ink, not the hue itself.
   At 12.5px the raw category colours do not carry: measured against their own
   13% tint, Family came out at 2.39, Food & Drink 3.64, Community 3.81 and
   Sports 4.02, all short of the 4.5 that normal-size text needs. Mixing 55%
   toward ink keeps the hue recognisable and puts every one of them above 5. */
[data-theme="river"] .le-cat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1.35;
  color: var(--ink);
  color: color-mix(in srgb, var(--tint, var(--ink)) 55%, var(--ink));
  background: var(--sand-2);
  background: color-mix(in srgb, var(--tint, var(--ink-2)) 13%, #fff);
}

/* Capped: `price_display` is free text, and a submitter explaining their
   whole ticketing arrangement in it would otherwise squeeze the title and
   summary into a column an inch wide. */
[data-theme="river"] .le-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  padding-left: 14px;
  max-width: 150px;
}

[data-theme="river"] .le-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  text-align: right;
}

[data-theme="river"] .le-price--free {
  color: var(--moss);
}

[data-theme="river"] .le-flag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* A deeper red than --coral. White on --coral measures 3.37, which is fine
   for a large heading and not for a 12.5px badge; this reaches 5.9. --coral
   itself stays as it is for the dot, which carries no text. */
[data-theme="river"] .le-flag--now {
  background: var(--coral-deep);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1.35;
}

/* ── Featured ──────────────────────────────────────────────────────────── */

[data-theme="river"] .le-feature {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 11px;
  color: #fff;
  background: linear-gradient(150deg, var(--deep) 0%, #164b63 58%, var(--river-deep) 100%);
  display: grid;
  grid-template-columns: 1fr 250px;
  box-shadow: 0 16px 38px -18px rgba(18, 58, 79, 0.72);
}

[data-theme="river"] .le-feature__txt {
  padding: 30px 30px 32px;
}

[data-theme="river"] .le-feature__kicker {
  display: inline-block;
  background: var(--peach);
  color: var(--deep-2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 13px;
  margin-bottom: 14px;
  line-height: 1.35;
}

[data-theme="river"] .le-feature h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

[data-theme="river"] .le-feature h3 a {
  color: #fff;
  text-decoration: none;
}

[data-theme="river"] .le-feature h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Cream, not --peach: peach on this gradient measures 2.20 at its light end
   and 4.00 even after darkening it, which is short of the 4.5 a 16.5px line
   needs. The kicker keeps peach because there it is a background with dark
   text on it, not text on a background. */
[data-theme="river"] .le-feature .le-when {
  color: #ffe0b5;
  font-size: 16.5px;
  margin-top: 0;
  margin-bottom: 10px;
}

[data-theme="river"] .le-feature .le-where {
  color: #c6deea;
}

[data-theme="river"] .le-feature .le-summary {
  color: #c6deea;
  max-width: 50ch;
}

[data-theme="river"] .le-feature .le-cat {
  background: rgba(255, 255, 255, 0.17);
  color: #fff;
}

[data-theme="river"] .le-feature__art {
  position: relative;
  min-height: 240px;
}

[data-theme="river"] .le-feature__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Map ───────────────────────────────────────────────────────────────── */

/* Below the results, not above them: on a phone a 320px map between the
   filters and the first listing means the page opens on no events at all. */
[data-theme="river"] .le-map {
  height: 320px;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  margin: 28px 0 0;
  box-shadow: 0 2px 3px rgba(23, 38, 46, 0.045);
  /* Its own stacking context, so Leaflet's panes — which carry z-indexes in
     the hundreds — stay contained and cannot paint over the filter panel. */
  position: relative;
  z-index: 0;
}

/* ── Sections ──────────────────────────────────────────────────────────── */

[data-theme="river"] .le-section {
  margin-top: 46px;
  padding-top: 24px;
  position: relative;
}

[data-theme="river"] .le-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #ddcdb8 18%,
    #ddcdb8 82%,
    transparent
  );
}

[data-theme="river"] .le-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--deep);
}

[data-theme="river"] .le-section__lede {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 5px 0 14px;
  max-width: 56ch;
}

[data-theme="river"] .le-prog {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 20px;
  background: #fff;
  border-radius: 18px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(23, 38, 46, 0.05);
}

[data-theme="river"] .le-prog h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.02em;
}

[data-theme="river"] .le-prog h3 a {
  color: var(--ink);
  text-decoration: none;
}

[data-theme="river"] .le-prog h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

[data-theme="river"] .le-prog__cadence {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-2);
}

[data-theme="river"] .le-empty {
  background: #fff;
  border-radius: 26px;
  padding: 28px;
  text-align: center;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(23, 38, 46, 0.05);
}

[data-theme="river"] .le-empty strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ── Detail page ───────────────────────────────────────────────────────── */

[data-theme="river"] .le-crumbs {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 22px 0 10px;
}

[data-theme="river"] .le-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

[data-theme="river"] .le-detail h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

[data-theme="river"] .le-detail__lede {
  margin-top: 10px;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 62ch;
}

[data-theme="river"] .le-detail__body {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 66ch;
}

[data-theme="river"] .le-panel {
  background: #fff;
  border-radius: 24px;
  padding: 20px 22px;
  margin-bottom: 12px;
  box-shadow:
    0 2px 3px rgba(23, 38, 46, 0.045),
    0 12px 26px -18px rgba(23, 38, 46, 0.28);
}

[data-theme="river"] .le-panel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 9px;
}

[data-theme="river"] .le-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-theme="river"] .le-panel li + li {
  margin-top: 5px;
}

[data-theme="river"] .le-occ--cancelled {
  text-decoration: line-through;
  color: var(--ink-2);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

[data-theme="river"] .le-footer {
  margin-top: 48px;
  background: var(--deep);
  color: #a9c9d8;
  padding: 28px 0 44px;
  font-size: 13.5px;
  position: relative;
}

[data-theme="river"] .le-footer__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px;
}

[data-theme="river"] .le-footer a {
  color: #fff;
}

[data-theme="river"] .le-footer__wave {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  height: 34px;
  transform: scaleY(-1);
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  [data-theme="river"] .le-main,
  [data-theme="river"] .le-hero__inner,
  [data-theme="river"] .le-filters__inner,
  [data-theme="river"] .le-nav__inner,
  [data-theme="river"] .le-footer__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  [data-theme="river"] .le-hero {
    padding: 6px 0 46px;
  }

  /* At 390px the wordmark, the sign-in link and the call to action all wrap
     onto second lines and the bar doubles in height. Shrink the type and stop
     the button breaking mid-phrase instead. */
  [data-theme="river"] .le-nav__inner {
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  [data-theme="river"] .le-brand {
    font-size: 19px;
  }

  [data-theme="river"] .le-nav__links {
    gap: 12px;
    font-size: 13.5px;
  }

  [data-theme="river"] .le-nav__links a,
  [data-theme="river"] .le-btn {
    white-space: nowrap;
  }

  [data-theme="river"] .le-btn {
    padding: 9px 15px;
    font-size: 14px;
  }

  [data-theme="river"] .le-filters input[type="search"] {
    flex: 1 0 100%;
    order: -1;
  }

  /* On a phone the panel belongs in the flow, pushing the listings down
     rather than covering them — there is not enough screen for an overlay to
     leave anything useful visible underneath it. */
  [data-theme="river"] .le-more {
    flex: 1 0 100%;
  }

  [data-theme="river"] .le-more__panel {
    position: static;
    padding: 14px 0 0;
    box-shadow: none;
    border-radius: 0;
  }

  [data-theme="river"] .le-more__panel-inner {
    padding: 0;
  }

  [data-theme="river"] .le-more {
    margin-top: 4px;
  }

  [data-theme="river"] .le-day {
    flex-wrap: wrap;
    gap: 9px;
  }

  [data-theme="river"] .le-day__wave {
    display: none;
  }

  [data-theme="river"] .le-day__count {
    margin-left: auto;
  }

  [data-theme="river"] .le-row {
    grid-template-columns: 1fr;
    padding: 15px 16px 15px 22px;
    align-items: start;
  }

  [data-theme="river"] .le-row h3 {
    font-size: 20px;
  }

  [data-theme="river"] .le-meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 0;
    padding-top: 11px;
  }

  [data-theme="river"] .le-feature,
  [data-theme="river"] .le-detail {
    grid-template-columns: 1fr;
  }

  [data-theme="river"] .le-feature__art {
    min-height: 152px;
    order: -1;
  }

  [data-theme="river"] .le-feature h3 {
    font-size: 32px;
  }

  [data-theme="river"] .le-feature__txt {
    padding: 22px 20px 24px;
  }

  [data-theme="river"] .le-prog {
    flex-wrap: wrap;
    gap: 5px;
  }

  [data-theme="river"] .le-prog__cadence {
    margin-left: 0;
    flex: 1 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="river"] .le-row {
    transition: none;
  }

  [data-theme="river"] .le-row:hover {
    transform: none;
  }
}