/* ============================================================================
   WOODWARD MOTOR CLUB — Detroit. Restored American cars, by the day.
   Built to DESIGN_SYSTEM.md v1.0.  SECOND DIRECTION.

   WHY THIS WAS REBUILT
   The first version set its register as "a working garage's inventory ledger
   crossed with a race program" and wrote NOT LUXURIOUS into its own header.
   That was an overcorrection. Refusing NOSTALGIA was right — sepia and swash
   serifs are a way of not looking at the object. Extending that refusal to
   luxury was wrong: somebody paying $610 a day for a Daytona is buying an
   experience, and a parts catalog does not make them want it.

   Three faults, all named by the client and all correct:
     1. Enumerated section markers everywhere — SHEET 01, PLATE 03A, 01—Brakes.
        See §12.0a: this is the model's OWN fingerprint, not the house style's,
        and it appeared in all four builds. REMOVED ENTIRELY. Nothing here is
        numbered unless the order genuinely is the content.
     2. A blueprint grid used as background texture. The same instinct — a
        cheap signal of "measured" on a page that had not earned it. REMOVED.
     3. The map was invented. It is now projected from real OpenStreetMap
        geometry — the actual Detroit River and Lake St Clair shorelines and
        the real centrelines of Woodward, Jefferson, Michigan Avenue and Huron
        River Drive. build-map.py holds the pipeline.

   ONE LINE   these are not categories, they are cars
   REGISTER   A LIT SHOWROOM AT NIGHT. Deep ground, object lit, generous space,
              few elements, rich surface. The reference is Leica and Bang &
              Olufsen rather than any car-rental site: darkness as luxury, and
              restraint in COUNT with richness in SURFACE.
              Still not nostalgia — 1965 as it looked when it was new.

   CONTEXT (§12)  A2 · B2 · C5 · D3 · E3  →  motion ceiling 3 (maximum)
     Every interactive thing still answers a real renter's question. What
     changed is the material, not the discipline.

   COLOR (§7) — ACHROMATIC, and that is the whole idea.
     Six cars in six paints already carry an enormous amount of color, so the
     interface carries none: near-black grounds, one warm white, and light
     itself as the accent. Actions are blocks of light. An earlier draft used a
     deep oxblood for scarcity; it measured 3.23:1 and sat 3° off the §12
     terracotta gate, so it was dropped rather than argued for.

   TYPE (§6) — the expressive channel is still THE NUMERAL, but the setting is
     re-cut for space: leading 1.75, wider gutters, far more air. Luxury lives
     in spacing and surface much more than in typeface.

   TEXTURE — SPECULAR LIGHT. Soft elliptical pools behind the objects, the way
     a showroom lights a car, plus light blooming from the actions. Replaces
     the banned grid, and it is a signature the previous builds have not used
     (pressed clay, concrete, machining hatch).
   ========================================================================= */

:root {
  --ground:   #0C0D0F;
  --ground-2: #141619;
  --ground-3: #1E2126;
  --line:     #2A2E34;
  --line-2:   #3A4048;

  --text:   #EFEDE9;   /* measured 16.79:1 on --ground */
  --text-2: #A5A29D;   /* 7.64 */
  --text-3: #8B8883;   /* 5.51 on --ground, 4.57 on --ground-3 */
  --ink:    #0C0D0F;   /* for text sitting ON a block of light */

  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-2xs:  0.75rem;
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.375rem;
  --t-lg:   clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --t-xl:   clamp(3.3rem, 1.5rem + 4.4vw, 4.6rem);
  --t-num:  clamp(3.4rem, 1.6rem + 7.4vw, 6.4rem);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 168px;
  --measure: 62ch;

  --ease:   cubic-bezier(.22, 1, .36, 1);
  --m-fast: 220ms;
  --m-mid:  420ms;
  --m-slow: 820ms;   /* slower than the last build: weight reads as quality */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.75;
  overflow-x: hidden;
  /* NO BACKGROUND GRID (§12.0a). The texture is light, applied per surface. */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--text); color: var(--ink); }

.shell { width: min(1300px, 100%); margin-inline: auto; padding-inline: clamp(var(--s-5), 5vw, var(--s-20)); }
.band  { padding-block: clamp(var(--s-20), 9vw, var(--s-40)); }
.band--tight { padding-block: clamp(var(--s-16), 5vw, var(--s-24)); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.03; letter-spacing: -0.025em; }
.h1 { font-size: var(--t-xl); }
.h2 { font-size: var(--t-lg); margin-bottom: var(--s-6); }
.h3 { font-size: var(--t-md); letter-spacing: -0.015em; }
.lede  { font-size: var(--t-md); line-height: 1.55; max-width: 40ch; margin: 0; color: var(--text-2); }
.prose { max-width: var(--measure); color: var(--text-2); }
.prose p { margin: 0 0 var(--s-6); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color var(--m-fast) var(--ease); }
.prose a:hover { text-decoration-color: var(--text); }

/* THE NUMERAL — still the expressive channel. A car is its year. */
.num {
  font-family: var(--f-display); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-num); line-height: .82; letter-spacing: -0.05em;
}
.fig { font-family: var(--f-mono); font-variant-numeric: tabular-nums lining-nums; }

/* A quiet caption — NOT a section marker (§12.0a). It never sits above a
   heading to label a section, it carries no number, and it only ever names
   the thing directly beside it. */
.cap { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); letter-spacing: .01em; margin: 0; }

/* ---------------------------------------------------------------- actions
   INTERACTION SIGNATURE — "it lights."
   Actions are blocks of light on a dark ground. On hover the light spreads:
   the block brightens and a soft pool blooms behind it, the way a lamp comes
   up. Ghost actions fill with light from the left. Nothing slides, nothing
   bounces, and everything reverses on leave.
   Distinct from thickens (hollis), seats (ruiz) and advances (v1). */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  padding: var(--s-4) var(--s-8);
  background: var(--text); color: var(--ink); border: 0;
  transition: background var(--m-fast) var(--ease), box-shadow var(--m-mid) var(--ease);
}
.btn:hover, .btn:focus-visible { background: #fff; box-shadow: 0 0 34px -6px rgba(239,237,233,.42); }
.btn:active { background: var(--text-2); box-shadow: none; }
.btn--lg { font-size: var(--t-md); padding: var(--s-5) var(--s-10); }

/* a hairline in --line-2 disappears over a photograph; the ghost outline is
   set in the text color at low alpha so it holds on any ground */
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgba(239,237,233,.42); overflow: hidden; z-index: 0; }
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; background: var(--text); z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--m-mid) var(--ease);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1px var(--text); }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: scaleX(1); }

.tlink { color: var(--text); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-2); transition: box-shadow var(--m-fast) var(--ease); }
.tlink:hover, .tlink:focus-visible { box-shadow: inset 0 -1px 0 var(--text); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; background: var(--text); color: var(--ink); padding: var(--s-3) var(--s-5); z-index: 80; }
.skip:focus { left: var(--s-4); top: var(--s-4); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; }

/* ---------------------------------------------------------------- masthead */
.masthead { position: sticky; top: 0; z-index: 40; background: rgba(12,13,15,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.masthead__in { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-10); align-items: center; justify-content: space-between; padding-block: var(--s-5); }
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.035em; text-decoration: none; line-height: 1; display: flex; align-items: baseline; gap: var(--s-3); }
.wordmark span { font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.nav { display: flex; flex-wrap: wrap; gap: var(--s-8); font-size: var(--t-sm); }
.nav a { position: relative; text-decoration: none; color: var(--text-2); padding-bottom: 4px; transition: color var(--m-fast) var(--ease); }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform var(--m-mid) var(--ease); }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--text); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- imagery */
.shot { display: block; position: relative; overflow: hidden; background: var(--ground-3); }
.shot img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3/2;
  transform: scale(1.001); transition: transform var(--m-slow) var(--ease); }
a:hover .shot img, a:focus-visible .shot img,
.card:hover .shot img, .card:focus-within .shot img { transform: scale(1.05); }

/* TEXTURE — specular light. A soft pool behind the object, the way a showroom
   lights a car. This is the textural signature, and it is in the first
   viewport. */
.lit { position: relative; isolation: isolate; }
/* The pool bleeds vertically but NOT horizontally: at 132% wide it pushed
   31px of horizontal scroll on a 360px screen, and a pseudo-element does not
   show up in a DOM overflow scan, so it has to be prevented rather than
   found. The gradient's own falloff does the softening. */
.lit::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 46%; height: 124%; transform: translateY(-50%);
  background: radial-gradient(58% 46% at 50% 50%, rgba(239,237,233,.085), transparent 72%);
}

/* ============================================================== IMMERSIVE */
.stage { position: relative; overflow: hidden; background: var(--ground); }
.stage__img { position: absolute; inset: 0; }
.stage__img img { width: 100%; height: 100%; object-fit: cover; }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(12,13,15,.96) 0 32%, rgba(12,13,15,.72) 54%, rgba(12,13,15,.22) 100%),
              linear-gradient(0deg, rgba(12,13,15,.92) 0 5%, transparent 38%);
}
.stage__in { position: relative; z-index: 2; padding-block: clamp(var(--s-24), 13vw, 230px); }
.stage h1 { max-width: 16ch; }
.stage .lede { margin-top: var(--s-8); }

/* ================================================================= FILTERS */
.filters { display: grid; gap: var(--s-6); padding-block: var(--s-8); border-block: 1px solid var(--line); }
@media (min-width: 980px) { .filters { grid-template-columns: 1fr auto; align-items: center; } }
.fgroups { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-10); align-items: center; }
.fgroup { display: flex; align-items: center; gap: var(--s-4); }
.fgroup__l { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font-family: var(--f-body); font-size: var(--t-xs); padding: var(--s-2) var(--s-5);
  cursor: pointer; background: transparent; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 999px;
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }
.fcount { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; margin: 0; }
.fcount b { font-family: var(--f-display); font-size: var(--t-md); color: var(--text); }
select {
  font-family: var(--f-body); font-size: var(--t-xs); padding: var(--s-2) var(--s-4);
  background: transparent; color: var(--text); border: 1px solid var(--line); min-height: 44px;
}
select option { background: var(--ground-2); color: var(--text); }

/* ============================================================ MODULAR CELLS
   Cells because six equal peers listed for browsing genuinely is a grid of
   equivalents — Reference, not Prove (see the ledger note of 2026-09-02). */
.fleet { display: grid; gap: var(--s-16) var(--s-10); margin-top: var(--s-16); }
@media (min-width: 760px)  { .fleet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .fleet { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card__body { padding: var(--s-6) 0 0; display: grid; gap: var(--s-2); }
.card__yr { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; font-size: 2.6rem; line-height: .9; letter-spacing: -0.05em; }
.card__name { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.card__spec { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); line-height: 1.7; }
.card__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.card__rate { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-md); }
.card__rate small { font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 400; color: var(--text-3); }
/* scarcity is marked by light on glass, not by a red badge */
.tagline { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 3; background: rgba(12,13,15,.66); backdrop-filter: blur(8px); color: var(--text); font-family: var(--f-mono); font-size: var(--t-2xs); padding: var(--s-2) var(--s-4); border: 1px solid rgba(239,237,233,.3); }
.card__cmp { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); cursor: pointer; transition: color var(--m-fast) var(--ease); }
.card__cmp input { width: 16px; height: 16px; accent-color: var(--text); cursor: pointer; }
.card__cmp:hover { color: var(--text-2); }
.empty { padding: var(--s-24) 0; text-align: center; color: var(--text-2); }
.empty[hidden] { display: none; }

/* ============================================================= COMPARE TRAY */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(20,22,25,.93); backdrop-filter: blur(18px); color: var(--text);
  transform: translateY(100%); transition: transform var(--m-mid) var(--ease);
  border-top: 1px solid var(--line-2); }
.tray.is-open { transform: translateY(0); }
.tray__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-block: var(--s-4); }
.tray__l { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-3); }
.tray__items { display: flex; flex-wrap: wrap; gap: var(--s-3); flex: 1; }
.tray__item { display: flex; align-items: center; gap: var(--s-2); border: 1px solid var(--line-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); font-size: var(--t-xs); }
.tray__item button { background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: var(--t-md); line-height: 1; padding: 0 var(--s-2); }
.tray__item button:hover { color: var(--text); }

.cmp { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.cmp th, .cmp td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-family: var(--f-display); font-size: var(--t-md); border-bottom: 1px solid var(--line-2); color: var(--text); }
.cmp tbody th { font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 400; color: var(--text-3); width: 20ch; }
.cmp td { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cmp .best { color: var(--text); font-weight: 600; }

/* ============================================================== INDEX/SPEC */
.spec { border-top: 1px solid var(--line-2); }
.spec__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-8); padding-block: var(--s-5); border-bottom: 1px solid var(--line); align-items: baseline; }
@media (min-width: 720px) { .spec__row { grid-template-columns: 22ch 1fr auto; } }
.spec__k { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-3); }
.spec__v { font-variant-numeric: tabular-nums; color: var(--text); }
.spec__n { color: var(--text-2); font-size: var(--t-sm); grid-column: 1/-1; }
@media (min-width: 720px) { .spec__n { grid-column: auto; text-align: right; max-width: 46ch; justify-self: end; } }

/* ================================================================= GALLERY */
.gal { display: grid; gap: var(--s-5); }
.gal__main { position: relative; background: var(--ground-2); overflow: hidden; }
.gal__main img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.gal__main img.is-swap { animation: swap var(--m-mid) var(--ease); }
@keyframes swap { from { opacity: 0; } to { opacity: 1; } }
.gal__cap { position: absolute; left: 0; bottom: 0; background: rgba(12,13,15,.78); backdrop-filter: blur(10px); color: var(--text-2); font-family: var(--f-mono); font-size: var(--t-2xs); padding: var(--s-3) var(--s-5); max-width: 54ch; margin: 0; }
.gal__thumbs { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.gal__t { position: relative; width: 116px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.gal__t img { aspect-ratio: 3/2; object-fit: cover; width: 100%; height: auto; opacity: .4; transition: opacity var(--m-mid) var(--ease); }
.gal__t:hover img, .gal__t:focus-visible img { opacity: .75; }
.gal__t[aria-current="true"] img { opacity: 1; }

/* ================================================================= BOOKING */
.book { position: relative; background: var(--ground-2); border: 1px solid var(--line); padding: var(--s-8); }
@media (min-width: 1040px) { .book { position: sticky; top: 104px; } }
.book h2 { margin-bottom: var(--s-6); }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field > label, .fieldset__l { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); }
.field input {
  font-family: var(--f-body); font-size: var(--t-base); padding: var(--s-3) var(--s-4);
  background: var(--ground); color: var(--text); border: 1px solid var(--line); min-height: 48px;
  color-scheme: dark;
}
.field input:focus { border-color: var(--text-2); }
fieldset { margin: 0 0 var(--s-6); padding: 0; border: 0; display: grid; gap: var(--s-2); }
legend { padding: 0; }
.opts { display: grid; gap: var(--s-2); }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-5); background: var(--ground); border: 1px solid var(--line); cursor: pointer; font-size: var(--t-sm); transition: border-color var(--m-fast) var(--ease); }
.opt:hover { border-color: var(--line-2); }
.opt:has(input:checked) { border-color: var(--text-2); background: var(--ground-3); }
.opt input { margin-top: 4px; accent-color: var(--text); width: 16px; height: 16px; }
.opt small { display: block; color: var(--text-3); font-size: var(--t-2xs); font-family: var(--f-mono); margin-top: 2px; }
.opt .p { font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: var(--t-xs); white-space: nowrap; color: var(--text-2); }

.quote { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-2); }
.quote__row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); padding-block: var(--s-2); color: var(--text-2); }
.quote__row span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.quote__row--sub { border-top: 1px solid var(--line); margin-top: var(--s-3); padding-top: var(--s-4); }
.quote__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: var(--s-6) 0 0; }
.quote__total b { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-xl); letter-spacing: -0.04em; line-height: 1; }
.quote__note { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); margin: var(--s-5) 0 0; line-height: 1.7; }
.is-recalc { animation: tick var(--m-mid) var(--ease); }
@keyframes tick { from { opacity: .35; } to { opacity: 1; } }

/* ================================================================ SPATIAL
   Real geometry (build-map.py), presented as an instrument: dark water,
   hairline land, and the selected route drawn in light. The drawing IS the
   information — you watch where it goes. */
.routes { display: grid; gap: var(--s-12); }
@media (min-width: 1040px) { .routes { grid-template-columns: 1.15fr .85fr; gap: var(--s-20); align-items: start; } }
.rmap { position: relative; background: var(--ground); border: 1px solid var(--line); overflow: hidden; }
#drawnmap { background: #0E1013; }
#drawnmap[hidden] { display: none; }   /* SVG ignores the UA [hidden] rule */

/* ---------------------------------------------------------- the real map
   Standard OpenStreetMap tiles, chosen because they are the one tile source
   that needs no API key — CARTO, Mapbox, MapTiler and Stadia all now require
   one. The cost of that choice is that OSM tiles arrive as finished pictures,
   bright and colored, and cannot be restyled at source.

   So they are restyled in the browser. invert() flips the lightness and
   hue-rotate(180deg) puts the hues back where they started, which turns a
   white map into a black one while keeping water blue and parks green. The
   saturation is then pulled down to sit under this page's achromatic palette.
   It is a filter, not a designed dark style, and it is honest about that. */
#leafmap { height: clamp(420px, 52vh, 620px); background: var(--ground); }
#leafmap[hidden] { display: none; }
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(.24) brightness(.92) contrast(1.04);
}
.leaflet-container { background: var(--ground); font-family: var(--f-mono); outline: 0; }

/* Leaflet's own chrome, brought into the palette */
.leaflet-control-attribution {
  background: rgba(12,13,15,.86) !important; color: var(--text-3) !important;
  font-family: var(--f-mono); font-size: 10px !important; padding: 3px 8px !important;
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-bar { border: 1px solid var(--line-2) !important; box-shadow: none !important; }
.leaflet-bar a {
  background: rgba(20,22,25,.94) !important; color: var(--text) !important;
  border-bottom-color: var(--line-2) !important; font-family: var(--f-body);
}
.leaflet-bar a:hover { background: var(--ground-3) !important; color: #fff !important; }
.leaflet-bar a.leaflet-disabled { color: var(--text-3) !important; background: rgba(20,22,25,.6) !important; }

/* the route: a light line over a dark casing, so it separates from the road
   network underneath without needing a chromatic accent */
.leaflet-overlay-pane .wmc-route { }
.wmc-marker {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text); box-shadow: 0 0 0 4px rgba(239,237,233,.22), 0 0 14px rgba(239,237,233,.5);
}
.maphint { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: baseline; }
/* Scoped to the drawn map by id, NOT '.rmap svg'. Leaflet puts its own SVGs
   inside this container — the vector overlay pane and the flag in its
   attribution — and a blanket width:100%;height:auto blew the flag up to
   250px and collapsed the route overlay to 0x0, so no route ever painted. */
#drawnmap { display: block; width: 100%; height: auto; }
/* on a near-black page, cartographic convention inverts: water has to be
   LIGHTER than the land or it is invisible. #10161C measured all but
   identical to the ground. */
.rwater { fill: #1A242D; stroke: #2E3D49; stroke-width: 1; }
.rpath {
  fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  opacity: 0; transition: stroke-dashoffset 1100ms var(--ease), opacity 260ms linear;
  filter: drop-shadow(0 0 7px rgba(239,237,233,.4));
}
.rpath.is-on { stroke-dashoffset: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rpath { transition: opacity 1ms; stroke-dashoffset: 0; } }
/* With script blocked nothing ever adds .is-on, so every route was
   invisible. Show them all — a static map of all five is the correct
   no-JS state, and the written descriptions below carry the detail. */
.no-js .rpath { opacity: .85; stroke-dashoffset: 0; stroke-dasharray: none; }
.rmap__label { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; fill: #8B8883; }
.rmap__label--place { fill: #A5A29D; }
.rlist { display: grid; }
.rbtn { position: relative; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: var(--s-6) 0; cursor: pointer; display: grid; gap: var(--s-1); font-family: inherit; color: var(--text-2); transition: color var(--m-fast) var(--ease); }
.rbtn:hover, .rbtn[aria-pressed="true"] { color: var(--text); }
.rbtn__n { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.02em; color: inherit; }
.rbtn__m { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); }
.rout { margin-top: var(--s-10); }
.rout__figs { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-bottom: var(--s-8); }
.rout__fig b { display: block; font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-lg); line-height: 1; letter-spacing: -0.04em; color: var(--text); }
.rout__fig span { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--text-3); }

/* ============================================================ EDITORIAL RAIL */
.rail { display: grid; gap: var(--s-12); }
@media (min-width: 980px) { .rail { grid-template-columns: 4fr 7fr; gap: var(--s-20); } }
.rail__side { align-self: start; }
@media (min-width: 980px) { .rail__side { position: sticky; top: 112px; } }
.step { padding-bottom: var(--s-10); }
.step + .step { border-top: 1px solid var(--line); padding-top: var(--s-10); }
.step h3 { margin-bottom: var(--s-4); max-width: 32ch; }
.step p { margin: 0; color: var(--text-2); max-width: 62ch; }

/* ================================================================== AXIAL */
.axial { text-align: center; }
.axial .prose { margin-inline: auto; }

/* ================================================================== SPLIT */
.split { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-20); } }
@media (min-width: 980px) { .split--wide { grid-template-columns: 7fr 5fr; } }

/* ================================================================ FOOTER */
.foot { border-top: 1px solid var(--line); padding-block: var(--s-20) var(--s-12); }
.foot__grid { display: grid; gap: var(--s-12); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-12); } }
.foot h2 { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-5); letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.foot a { color: var(--text-2); text-decoration: none; transition: color var(--m-fast) var(--ease); }
.foot a:hover, .foot a:focus-visible { color: var(--text); }
.legal { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--t-2xs); color: var(--text-3); max-width: 88ch; line-height: 1.8; }
.legal p { margin: 0 0 var(--s-3); }
.legal strong { color: var(--text-2); }
.legal a { color: var(--text-2); }

/* ---------------------------------------------------------------- touch */
@media (pointer: coarse), (max-width: 760px) {
  .nav a, .foot ul a, .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
  .wordmark { flex-wrap: wrap; }
  .btn, .chip, .gal__t { min-height: 44px; }
  .chip { display: inline-flex; align-items: center; }
  .card__cmp { min-height: 44px; }
  .card__cmp input, .opt input { width: 24px; height: 24px; }
  select { min-height: 44px; }
  .tray__item button { min-height: 44px; min-width: 44px; }
  /* Leaflet ships its zoom buttons at 30px; on touch they are targets
     like any other and have to meet the same floor */
  .leaflet-bar a { min-height: 44px !important; min-width: 44px !important;
    line-height: 44px !important; font-size: 20px !important; }
  .masthead { position: static; }
  .book { position: static; }
}

/* ---------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .shot img { transform: none !important; }
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.fgroup__l,.fcount{color:#c5c8cb;font-size:14px}.filters{border-color:#657079}.chip{color:#eceef0;border-color:#7b858e;min-height:44px;font-size:14px}.chip:hover,.chip:focus-visible{border-color:#f0f1f2;outline-offset:3px}.filters select{border-color:#7b858e}