/* src/css/site.css
 *
 * Mini Truck Guide, the whole look in one file. Aster, 28 October 2026.
 *
 * LYRA'S V13 PALETTE, 29 October (~/Desktop/mini-truck-family/shared/brand/lyra-v13,
 * adopted on Tyler's word that Lyra shares the style guide and colours). The black
 * and lime below became her deep green and lime olive by one mapped pass: night
 * #0D2419 for the dark bands and the dark theme, its surface #173828 and border
 * #42634E, ink #17291F, muted #4C6052 and #BACCBF on dark, the light ground #F4F7EC
 * with white #FFFFFF as the surface, rules #CFD9C8, the accent fill #A8BF46 and its
 * text #C6DF77 on dark. The road rule colours did not change. The notes below are
 * the history of the black and lime look and name its old values; the tokens in
 * :root are the truth. Lyra's faces are self hosted (/css/fonts.css).
 *
 * The second pass, the same night. Tyler: "I want it to be more professional ...
 * We can make it clean. I want a very subtle accent, though, of lime green, like
 * our other trucks and stuff. I don't know about the yellow gold ... I think we
 * need more professional fonts, and I don't want the headings that big." The
 * first pass was plate yellow, Barlow Condensed in capitals and dark grounds. It
 * read loud. This one is light, set in two professional faces, with one quiet
 * accent taken from the truck's own paint.
 *
 * BLACK AND LIME, from the evening of 28 October. Tyler: "I don't like the colors
 * right now. They're too simple ... I kind of feel like it's the black and lime
 * green: eye-catching, professional, sharp, fast." So:
 *   black  #0A0B0C is the brand ground: the home hero, the nav over it, the dark
 *          bands and the footer. It is also the ink for type on white.
 *   lime   #B4D62F, read from the emblem's sun in src/brand/emblem.svg, spent boldly
 *          now: the primary button (lime fill, black type), active states, key
 *          figures on black, the search focus ring, the lane chips and the one big
 *          accent in each band. Lime type sits on black only, never on white.
 *   white  #FFFFFF is the light ground. Paper is retired as a band colour.
 *   silver blue stays in the emblem and the ports on the map, nowhere else.
 *   No photograph is ever darkened. Type sits on solid black or solid white.
 * The notes below are the light system this replaced, kept for the values that
 * did not change.
 *
 * THE PALETTE (before 28 October evening)
 *   white  #FFFFFF and paper #F5F5F2 alternate as the grounds.
 *   ink    #111418 the type. Primary buttons are ink with white type.
 *   steel  #5B6470 second text, 5.6 to 1 on white.
 *   rule   #E3E5E8 every hairline.
 *   night  #0E1318 only for the map band and the footer.
 *   lime   #B4D62F Phosphor Lime, the same hex as the finish in
 *          src/data/finishes.json, so the UI and the trucks match. It is a mark
 *          and never text, and it is spent about once per screen: the dot in the
 *          wordmark, the active lane's underline, Ridgway on the map, the focus
 *          ring and the thin rule under a section's kicker. Change it there and
 *          here together.
 *   silver #A7BAC8 the emblem's ring, read from src/brand/emblem.svg on 28
 *          October. A quiet second tone: hairline accents, the active nav
 *          underline and the ports on the map. Lime stays the one bright accent.
 *   night  is the ground for the dark home sections and the footer too, since
 *          the home went dark and light in turns that day.
 *   The road rule colours are muted and live only on the rule maps and the
 *   status chips. Two sets, one per lane:
 *     a 25 year truck  open #4C8C63, limited #C49A42, later #4F7DB3,
 *                      unclear #8E97A0, closed #B5554B
 *     a newer truck    utv #4C8C63, ohv #3F8A8C, low speed #4F7DB3,
 *                      farm #C49A42, private land only #B5554B, unclear #8E97A0
 *   There is no yellow anywhere any more. Plate yellow left with the first pass.
 *
 * THE TYPE
 *   Archivo 600 for headings, in sentence case. Inter 400 and 500 for reading,
 *   16 on 1.6, with tabular figures wherever a number lines up (specs, engine
 *   codes, kW, dates). Kickers are Inter 600, 12px, capitals tracked 0.14em, in
 *   steel. The scale is fixed and nothing passes 60px:
 *     H1 56 desk, 44 tablet, 34 phone, line height 1.08, tracking -0.02em
 *     H2 36, 30, 26     H3 20
 *   Both faces come from Google Fonts in the page head with display swap. If that
 *   link changes, change scripts/web/layout.mjs and scripts/web/cards.mjs too.
 *
 * GEOMETRY
 *   Radii 8, 12 and 16. Cards are white on paper or paper on white, with a
 *   hairline and no shadow, except the form, which lifts with a soft one. The
 *   sheet is 1280 wide with a gutter of 16 on a phone rising to 40.
 *
 * Nothing in here uses !important. If a rule needs it, the cascade is wrong.
 * No oxford commas, no em dashes.
 */

:root {
  --white: #ffffff;
  --paper: #ffffff;
  --ink: #17291f;
  --ink-2: #173828;
  --steel: #4c6052;
  --steel-2: #baccbf;
  --rule: #cfd9c8;
  --night: #0d2419;
  --night-2: #173828;
  --night-rule: #42634e;
  --lime: #a8bf46;
  --silver: #baccbf;
  --lime-2: #c6df77;
  --sea: #6f9fdc;
  --go: #4c8c63;
  --limit: #c49a42;
  --wait: #4f7db3;
  --stop: #b5554b;
  --open: #8e97a0;
  --teal: #3f8a8c;
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  /* neonburro's own geometry, Tyler 28 October late: "Make the navigation and the
   * footer on desktop be the same width as Neon Burro". Its src/theme/layout.js
   * gives a 1680 sheet, a 20px rail on a phone and 40 from 768 up. Copied here by
   * value; if neonburro's moves, move these. Reading text keeps its own measure,
   * .lede and .prose at 40em, so a wider sheet widens pictures and grids only. */
  --sheet: 1680px;
  --gutter: 20px;
  --head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow: 0 1px 2px rgba(17, 20, 24, 0.04), 0 8px 28px rgba(17, 20, 24, 0.08);
  /* THE TWO THEMES, 29 October (docs/FAMILY.md). --bg and --fg are the ground and
   * the type of a light band. In light they are --white and --ink, so the page is
   * the same as before; in dark they turn, with --paper, --rule and --steel, in the
   * block at the end of this file. --white and --ink keep their own meaning, the
   * black bands and white type on them, in both themes. */
  --bg: #ffffff;
  --fg: var(--ink);
  /* NO GREEN GROUNDS, Tyler 29 October: "I don't like the green background. We got
   * to clean this up, please." Deep green is type, rules and small marks only. The
   * surfaces that were night in both themes (the hero, the map band, the footer,
   * the sheets, the bar over the hero) read these four instead, so they turn with
   * the theme like every other band: --sfc the ground, --sfc-2 the panel, --on the
   * type on it, --on-m its muted type, --on-r its rules. Light is clean white and a
   * near white paper with the dark ink; dark is a neutral near black, never green.
   * Contrast, light: ink on white 14.6, muted 6.9 on white and 6.4 on paper. Dark:
   * #f2f4f0 on the ground 18.1, muted 8.6 on the ground and 8.0 on the panel. The
   * lime olive stays for the main button, the step numerals and thin rules. Lime as
   * type reads --acc-t, lime on the near black and Lyra's #3c5915 on white, where
   * lime itself is 2.1 to 1. The old
   * --night, --night-2, --night-rule and --steel-2 are kept for anything outside
   * this file that names them. */
  --sfc: #ffffff;
  --sfc-2: #f5f6f3;
  --acc-t: #3c5915;
  --on: #17291f;
  --on-m: #4c6052;
  --on-r: #d9ded6;
  --paper: #f5f6f3;
  --rule: #d9ded6;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--on);
  padding: 10px 16px;
  border-radius: var(--r1);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.sheet {
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type ---------- */

.display {
  font-family: var(--head);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.display--long {
  font-size: 48px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--head);
  font-weight: 600;
}

.h2 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

@media (max-width: 1080px) {
  .display {
    font-size: 44px;
  }
  .display--long {
    font-size: 40px;
  }
  .h2 {
    font-size: 30px;
  }
}

@media (max-width: 600px) {
  .display,
  .display--long {
    font-size: 34px;
  }
  .h2 {
    font-size: 26px;
  }
}

.label {
  font-family: var(--text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
}

/* the thin lime rule under a section's kicker, once per band */
.band__head > .label::after,
.band__head > div > .label:first-child::after,
.hero__copy > .label::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  margin-top: 10px;
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 40em;
  margin: 0;
}

.lede--ink {
  color: var(--fg);
}

.muted {
  color: var(--steel);
}

.small {
  font-size: 14px;
  line-height: 1.55;
}

.prose {
  max-width: 40em;
}

.prose p {
  margin: 0 0 1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.tnum,
.specs,
.factcard__fig,
.step__n,
.lanelist li::before {
  font-variant-numeric: tabular-nums;
}

/* a visible list is parted by a rounded square, never by commas */
.sq {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  border-radius: 0.08em;
  background: currentColor;
  opacity: 0.4;
  vertical-align: 0.2em;
  margin: 0 0.55em;
}

/* ---------- header, the centred nav ----------
 *
 * Tyler, 28 October: "we go centered with the navigation, big logo in the middle."
 * layout.mjs header() writes it, site.js part 1 runs it.
 *   A three column grid, the four left links, the logo, the three right links and
 *   Contact. The bar is 96 tall and the logo 60. Once the page scrolls the whole bar
 *   rises 26px and the logo scales to two thirds, about 40, with a hairline under
 *   it. Transform only, so nothing on the page moves when it shrinks.
 *   .top--over is the home: transparent over the dark hero, the light lockup and
 *   white links. .is-solid turns it white with the ink lockup once the hero has
 *   gone under it. Every other page is solid from the start.
 *   Under 1180 the links fold into Menu; under 700 a search button joins on the
 *   left. The logo stays centred at every width.
 * The active link's underline is silver blue, the emblem's ring, never lime.
 */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--top-h);
  color: var(--ink);
  pointer-events: none;
}

:root {
  --top-h: 96px;
  --top-vis: 70px;
}

html {
  scroll-padding-top: calc(var(--top-vis) + 12px);
}

.top__bar {
  height: var(--top-h);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.28s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}

.top__in {
  max-width: var(--sheet);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  transition: transform 0.35s var(--ease);
}

.top.is-scrolled .top__bar {
  transform: translateY(-26px);
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 rgba(167, 186, 200, 0.35);
}

.top.is-scrolled .top__in {
  transform: translateY(13px);
}

.brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

.logo {
  display: inline-block;
  position: relative;
  line-height: 0;
}

.logo img {
  display: block;
  height: 60px;
  width: auto;
}

.top .logo {
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}

.top.is-scrolled .logo {
  transform: scale(0.67);
}

.logo__light {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.logo--light .logo__ink {
  opacity: 0;
}

.logo--light .logo__light {
  opacity: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav--l {
  grid-column: 1;
  justify-content: flex-end;
}

.nav--r {
  grid-column: 3;
  justify-content: flex-start;
}

.nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: var(--r1);
  white-space: nowrap;
}

.nav a:not(.btn):hover {
  background: rgba(127, 127, 127, 0.1);
}

.nav a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--silver);
  border-radius: 0;
}

.nav .nav__cta {
  margin-left: 12px;
  color: var(--on);
  padding: 0 18px;
}

.nav a.btn--ink:hover {
  background: var(--ink-2);
}

/* over the dark home hero, until it scrolls away */
.top--over:not(.is-solid) .top__bar {
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
}

.top--over:not(.is-solid) {
  color: var(--on);
}

.top--over:not(.is-solid) .logo__ink {
  opacity: 0;
}

.top--over:not(.is-solid) .logo__light {
  opacity: 1;
}

.top--over:not(.is-solid) .nav .nav__cta {
  background: var(--on);
  color: var(--ink);
  border-color: var(--on);
}

.top--over:not(.is-solid) .menu-btn,
.top--over:not(.is-solid) .top__search {
  background: color-mix(in srgb, var(--on) 12%, transparent);
  border-color: color-mix(in srgb, var(--on) 35%, transparent);
  color: var(--on);
}

.has-over main > :first-child {
  margin-top: calc(var(--top-h) * -1);
}

.top__search {
  display: none;
  grid-column: 1;
  justify-self: start;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  color: inherit;
  background: var(--bg);
}

/* the menu truck (layout.mjs MENU_ICON): a 44px square like the search button,
 * the kei truck in currentColor, its rails swinging into an X when the menu is
 * open and the cab and wheels folding away, transform only on the house ease */
.menu-btn {
  display: none;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--fg);
  border-radius: var(--r1);
  cursor: pointer;
}

.mi {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mi > * {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.28s var(--ease);
}

.menu-btn[aria-expanded='true'] .mi__r1 {
  transform: translate(-4px, 0.5px) rotate(45deg);
}

.menu-btn[aria-expanded='true'] .mi__r2 {
  transform: translate(-4px, -4px) rotate(-45deg);
}

.menu-btn[aria-expanded='true'] .mi__cab,
.menu-btn[aria-expanded='true'] .mi__w {
  transform: scale(0);
}

/* the header over the open sheet, solid, so the X is the close button */
.top.is-menu {
  z-index: 70;
}

.top.is-menu .top__bar,
.top.is-menu .top__in {
  transform: none;
}

/* the header leaves on a scroll down past the hero and comes back on any scroll
 * up (site.js part 1), transform only, 280ms on the house ease. Always there at
 * the top of the page and while the menu is open. */
.top.is-hidden:not(.is-menu) .top__bar {
  transform: translateY(calc(-100% - 2px));
}

@media (prefers-reduced-motion: reduce) {
  .mi > *,
  .top__bar,
  .top__in {
    transition: none;
  }
}

/* the menu sheet, full screen, the eight links large and the search bar */
.menusheet {
  display: none;
}

.menusheet[data-open='true'] {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--on);
  color: var(--ink);
  padding: 0 var(--gutter) 32px;
  overflow-y: auto;
}

.menusheet__head {
  height: var(--top-h);
  flex: none;
}

.menusheet__head .brand {
  grid-column: 2;
}

.menusheet__head .logo img {
  height: 40px;
}

.menusheet__head .menu-btn {
  display: inline-flex;
  align-items: center;
  grid-column: 3;
}

.menusheet__search {
  margin: 8px 0 18px;
}

.menusheet__nav a.sheet__link {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.menusheet__nav a.sheet__link[aria-current='page'] {
  box-shadow: inset 3px 0 0 var(--silver);
  padding-left: 14px;
}

@media (max-width: 1179px) {
  :root {
    --top-h: 80px;
    --top-vis: 64px;
  }
  .nav {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
    align-items: center;
  }
  .logo img {
    height: 48px;
  }
  .top.is-scrolled .top__bar {
    transform: translateY(-16px);
  }
  .top.is-scrolled .top__in {
    transform: translateY(8px);
  }
  .top.is-scrolled .logo {
    transform: scale(0.8);
  }
}

@media (max-width: 699px) {
  :root {
    --top-h: 68px;
    --top-vis: 58px;
  }
  .top__in {
    gap: 8px;
  }
  .top__search {
    display: inline-flex;
  }
  .top .logo img {
    height: 38px;
  }
  .top.is-scrolled .top__bar {
    transform: translateY(-10px);
  }
  .top.is-scrolled .top__in {
    transform: translateY(5px);
  }
  .top.is-scrolled .logo {
    transform: scale(0.86);
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r1);
  border: 1px solid transparent;
  font: 600 15px/1 var(--text);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn--ink,
.btn--plate {
  background: var(--ink);
  color: var(--white);
}

.btn--ink:hover,
.btn--plate:hover {
  background: var(--ink-2);
}

.btn--line {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--fg);
}

.btn--line:hover {
  background: var(--paper);
}

.band--ink .btn--line {
  background: transparent;
  color: var(--on);
  border-color: color-mix(in srgb, var(--on) 60%, transparent);
}

.band--ink .btn--line:hover {
  background: color-mix(in srgb, var(--on) 8%, transparent);
}

.band--ink .btn--ink,
.band--ink .btn--plate {
  background: var(--on);
  color: var(--ink);
}

.btn--small {
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

.arrow::after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  flex: none;
}

/* ---------- bands ---------- */

.band {
  padding: clamp(56px, 8vw, 104px) 0;
}

.band--paper {
  background: var(--paper);
}

.band--tight {
  padding: 32px 0 48px;
}

/* night is the map band and the footer, nothing else */
.band--ink {
  background: var(--sfc);
  color: var(--on);
}

.band--ink .label,
.band--ink .lede,
.band--ink .muted {
  color: var(--on-m);
}

.band__head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 48px);
  max-width: 52em;
}

.band__head--split {
  max-width: none;
  grid-template-columns: 1fr auto;
  align-items: end;
}

@media (max-width: 760px) {
  .band__head--split {
    grid-template-columns: 1fr;
  }
}

/* ---------- home hero ---------- */

.hero {
  background: var(--bg);
  padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 80px);
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-areas: 'copy door' 'photo door';
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 28px;
  align-items: start;
}

.hero__copy {
  grid-area: copy;
}

.hero__in > .plate {
  grid-area: door;
}

.hero__photo {
  grid-area: photo;
}

.hero__copy {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-top: clamp(8px, 2vw, 32px);
}

.hero__line {
  font-size: 19px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 34em;
  margin: 0;
}

.hero__facts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.hero__facts li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
}

.hero__facts li::before {
  content: '';
  width: 7px;
  height: 7px;
  margin: 8px 0 0 4px;
  border-radius: 2px;
  background: var(--ink);
}

.hero__photo {
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--paper);
  align-self: stretch;
  min-height: 240px;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: 60% 62%;
}

@media (max-width: 1080px) {
  .hero__in {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'door' 'photo';
    grid-template-rows: auto;
  }
  .hero .plate {
    max-width: 560px;
  }
  .hero__photo img {
    height: clamp(220px, 50vw, 420px);
  }
}

/* ---------- the door, a white card holding the form ---------- */

.plate {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  padding: 24px;
  box-shadow: var(--shadow);
}

.plate__title {
  font-family: var(--head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.plate__sub {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel);
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.field label {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #cfd9c8;
  border-radius: var(--r1);
  background: var(--bg);
  color: var(--fg);
  padding: 0 14px;
  font: 400 16px/1.2 var(--text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s var(--ease);
}

.field input::placeholder {
  color: #baccbf;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field input:hover,
.field select:hover {
  border-color: var(--on-m);
}

.field input:focus,
.field select:focus {
  border-color: var(--fg);
}

.plate .btn {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  margin-top: 6px;
}

.plate__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

.plate__done {
  display: none;
}

.plate[data-state='sent'] form {
  display: none;
}

.plate[data-state='sent'] .plate__done {
  display: block;
}

.plate__err {
  display: none;
  margin: 10px 0 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--stop);
}

.plate[data-state='error'] .plate__err {
  display: block;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* the lane, a segmented control with a lime underline on the active lane */
.seg {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  min-width: 0;
}

.seg legend {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  padding: 0;
}

.seg__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--paper);
  border-radius: var(--r1);
}

.seg label {
  position: relative;
  cursor: pointer;
}

.seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--steel);
}

.seg input:checked + span {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(13, 36, 25, 0.08), inset 0 -3px 0 var(--lime);
}

.seg input:focus-visible + span {
  outline: 3px solid var(--lime);
  outline-offset: 1px;
}

.seg__note {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  margin: 0;
}

/* ---------- truck cards ---------- */

.trucks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.truck {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  background: var(--bg);
  border-radius: var(--r2);
  text-decoration: none;
  color: var(--fg);
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease);
}

.band--paper .truck {
  background: var(--bg);
}

.truck:nth-child(-n + 2) {
  grid-column: span 3;
}

.truck:hover {
  border-color: var(--fg);
}

.truck__img {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 18px 18px 0;
  background: var(--paper);
}

.band--paper .truck__img {
  background: linear-gradient(180deg, #f4f7ec 0%, var(--white) 100%);
}

.truck:nth-child(-n + 2) .truck__img {
  aspect-ratio: 16 / 9;
}

.truck__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--ease);
}

.truck:hover .truck__img img {
  transform: translateX(5px);
}

.truck__body {
  padding: 16px 20px 20px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.truck__name {
  font-family: var(--head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}

.truck__line {
  margin: 0;
  color: var(--steel);
  font-size: 15px;
}

.truck__meta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--steel);
}

@media (max-width: 980px) {
  .trucks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .truck,
  .truck:nth-child(-n + 2) {
    grid-column: span 1;
  }
  .truck:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .trucks {
    grid-template-columns: 1fr;
  }
  .truck,
  .truck:first-child,
  .truck:nth-child(-n + 2) {
    grid-column: span 1;
  }
  .truck__img,
  .truck:nth-child(-n + 2) .truck__img {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.step {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.band--ink .step {
  border-top-color: color-mix(in srgb, var(--on) 40%, transparent);
}

.step__n {
  font-family: var(--text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.band--ink .step__n {
  color: var(--on-m);
}

.step h3 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 8px 0 8px;
}

.step p {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--steel);
}

.band--ink .step p {
  color: color-mix(in srgb, var(--on) 78%, transparent);
}

.steps--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 32px;
}

.steps--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .steps--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .steps,
  .steps--six,
  .steps--four {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------- split, an image beside words ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split__media {
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--paper);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
  color: var(--fg);
}

.band:not(.band--paper):not(.band--ink) .card {
  background: var(--paper);
  border-color: transparent;
}

.band--ink .card {
  background: var(--sfc-2);
  border-color: var(--on-r);
  color: var(--on);
}

a.card {
  text-decoration: none;
  transition: border-color 0.2s var(--ease);
}

a.card:hover,
.band:not(.band--paper):not(.band--ink) a.card:hover {
  border-color: var(--ink);
}

.card h3 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

.card p {
  margin: 0;
  font-size: 15px;
}

.card ul,
.card ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
}

.card li + li {
  margin-top: 6px;
}

.card__foot {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--steel);
}

.band--ink .card__foot {
  border-top-color: var(--on-r);
  color: var(--on-m);
}

/* the source card, a rule or a figure with where it came from. The whole card
   is one link to the page it was read from, opened in a new tab. */
.source {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: start;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg);
  background: var(--bg);
}

.source:hover {
  border-color: var(--fg);
}

.source b {
  font-weight: 600;
}

.source span {
  color: var(--steel);
}

.source::after {
  content: '';
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.answer__src {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note {
  font-size: 14px;
  color: var(--steel);
  border-left: 2px solid var(--rule);
  padding-left: 12px;
  margin: 0;
}

/* ---------- chips and finishes ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  border-radius: var(--r1);
  border: 1px solid var(--rule);
  background: var(--bg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--fg);
}

.band--ink .chip {
  background: transparent;
  border-color: var(--on-r);
  color: var(--on);
  padding-left: 12px;
}

.chip i {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.finish-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.finish {
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 14px 14px 16px;
}

.finish:hover {
  border-color: var(--fg);
}

.finish__img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.finish__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
}

.finish__name i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

@media (max-width: 980px) {
  .finish-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .finish-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- road status, two lanes ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.status i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  background: var(--s, var(--open));
}

.status[hidden] {
  display: none;
}

.s-yes,
.n-utv {
  --s: var(--go);
}
.s-restricted,
.n-farm {
  --s: var(--limit);
}
.s-not_yet,
.n-low_speed {
  --s: var(--wait);
}
.s-no,
.n-private_land_only {
  --s: var(--stop);
}
.s-unclear,
.n-unclear {
  --s: var(--open);
}
.n-ohv {
  --s: var(--teal);
}

/* ---------- maps ---------- */

.map {
  position: relative;
  width: 100%;
}

.map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.map .st {
  fill: #232c36;
  stroke: var(--sfc);
  stroke-width: 0.8;
  transition: fill 0.2s var(--ease);
}

.map--light .st {
  fill: #e6e7e3;
  stroke: var(--bg);
}

.map a:hover .st,
.map a:focus .st {
  fill: #3a4752;
}

.map--light a:hover .st,
.map--light a:focus .st {
  fill: #d3d4cf;
}

.map--light .st.on {
  fill: #c8cbc6;
}

/* a rule map colours its states by the lane shown, set on the wrapper */
[data-lane='age25'] .map .st[data-r='yes'],
.map .st.s-yes {
  fill: var(--go);
}
[data-lane='age25'] .map .st[data-r='restricted'],
.map .st.s-restricted {
  fill: var(--limit);
}
[data-lane='age25'] .map .st[data-r='not_yet'],
.map .st.s-not_yet {
  fill: var(--wait);
}
[data-lane='age25'] .map .st[data-r='no'],
.map .st.s-no {
  fill: var(--stop);
}
[data-lane='age25'] .map .st[data-r='unclear'],
.map .st.s-unclear {
  fill: var(--open);
}
[data-lane='new'] .map .st[data-n='utv'] {
  fill: var(--go);
}
[data-lane='new'] .map .st[data-n='ohv'] {
  fill: var(--teal);
}
[data-lane='new'] .map .st[data-n='low_speed'] {
  fill: var(--wait);
}
[data-lane='new'] .map .st[data-n='farm'] {
  fill: var(--limit);
}
[data-lane='new'] .map .st[data-n='private_land_only'] {
  fill: var(--stop);
}
[data-lane='new'] .map .st[data-n='unclear'] {
  fill: var(--open);
}

.lanebox .legend[data-for] {
  display: none;
}

.lanebox[data-lane='age25'] .legend[data-for='age25'],
.lanebox[data-lane='new'] .legend[data-for='new'] {
  display: flex;
}

.map .route {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.38;
}

.map .route--main {
  stroke-width: 3.4;
  opacity: 1;
}

.map .sea {
  fill: none;
  stroke: var(--sea);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.map .sea--main {
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-dasharray: 3 8;
}

.map .port {
  fill: var(--silver);
  stroke: var(--sfc);
  stroke-width: 2.5;
}

.map .port--likely {
  fill: none;
  stroke: var(--silver);
  stroke-width: 2;
}

.map .hub {
  fill: var(--sfc);
  stroke: var(--silver);
  stroke-width: 3;
}

.map .hub__dot {
  fill: #ffffff;
}

.map .home {
  fill: var(--lime);
  stroke: var(--sfc);
  stroke-width: 2.5;
}

.map .home__bolt {
  fill: var(--sfc);
}

.map .town {
  fill: #ffffff;
  stroke: var(--sfc);
  stroke-width: 2;
}

.map .tag {
  font: 600 13px/1 var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: #ffffff;
  paint-order: stroke;
  stroke: var(--sfc);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.map .tag--home {
  font-size: 15px;
}

.map--light .tag {
  fill: var(--ink);
  stroke: var(--bg);
}

.js .map .route {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}

.js .map.is-in .route {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease);
  transition-delay: calc(var(--i) * 18ms);
}

.js .map .route--main {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .js .map .route {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  html {
    scroll-behavior: auto;
  }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
}

.legend .status {
  color: inherit;
}

.legend--ports {
  color: var(--on);
}

.legend--ports i {
  background: none;
}

.legend--ports .k-home {
  width: 16px;
  height: 11px;
  border-radius: 3px;
  background: var(--lime);
}

.legend--ports .k-main {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #ffffff;
}

.legend--ports .k-port {
  background: var(--silver);
}

.legend--ports .k-likely {
  box-shadow: inset 0 0 0 1.5px var(--silver);
}

.legend--ports .k-hub {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--silver);
}

.legend--ports .k-sea {
  width: 22px;
  height: 0;
  border-top: 2px dotted var(--sea);
  border-radius: 0;
}

/* the lane switch above a rule map */
.laneswitch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r1);
  background: rgba(127, 127, 127, 0.14);
  margin-bottom: 16px;
}

.laneswitch button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 600 14px/1 var(--text);
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}

.laneswitch button[aria-pressed='true'] {
  opacity: 1;
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 -3px 0 var(--lime);
}

/* ---------- state directory ---------- */

.dir-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.dir-tools input {
  flex: 1 1 260px;
  min-height: 46px;
  border: 1px solid #cfd9c8;
  border-radius: var(--r1);
  padding: 0 14px;
  font: 400 16px/1 var(--text);
}

.pill {
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--r1);
  border: 1px solid var(--rule);
  background: var(--bg);
  font: 500 14px/1 var(--text);
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pill .status {
  gap: 0;
}

.pill[aria-pressed='true'] {
  border-color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--lime);
}

.states {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 10px;
}

.stc {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  text-decoration: none;
  color: var(--fg);
}

.stc:hover {
  border-color: var(--fg);
}

.stc svg {
  width: 48px;
  height: 38px;
}

.stc svg path {
  fill: var(--ink);
}

.stc__name {
  display: block;
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
}

.stc .status {
  margin-top: 4px;
  font-size: 12px;
}

.stc[hidden] {
  display: none;
}

/* ---------- inner page heroes ---------- */

.phero {
  background: var(--paper);
  color: var(--fg);
  padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
  position: relative;
}

.phero .lede {
  margin-top: 18px;
}

.phero h1 {
  max-width: 18em;
}

.crumbs {
  font-size: 13px;
  color: var(--steel);
  margin: 0 0 18px;
}

.crumbs a {
  color: var(--steel);
}

/* the map band at the top of the states and the map page */
.phero--map {
  background: var(--sfc);
  color: var(--on);
}

.phero--map .lede,
.phero--map .crumbs,
.phero--map .crumbs a {
  color: var(--on-m);
}

/* a page with a photograph puts it below the words, full width, never under them */
.phero--img {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.phero--img .phero__img {
  order: 2;
  margin-top: clamp(28px, 4vw, 48px);
  height: clamp(220px, 32vw, 420px);
}

.phero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the state hero, the state's own shape drawn big with its port line */
.shero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: center;
}

.shero__shape svg {
  width: 100%;
  height: auto;
  max-height: 360px;
}

.shero__shape .shape {
  fill: #dfe1dd;
  stroke: var(--bg);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.shero__shape .shape.s-yes {
  fill: var(--go);
}
.shero__shape .shape.s-restricted {
  fill: var(--limit);
}
.shero__shape .shape.s-not_yet {
  fill: var(--wait);
}
.shero__shape .shape.s-no {
  fill: var(--stop);
}
.shero__shape .shape.s-unclear {
  fill: var(--open);
}

.shero__map .map svg {
  max-height: 340px;
}

.shero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 22px;
}

.shero__facts .status {
  font-size: 14px;
}

.shero__dates {
  margin: 18px 0 0;
  font-family: var(--head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: var(--fg);
  max-width: 34em;
}

@media (max-width: 860px) {
  .shero {
    grid-template-columns: 1fr;
  }
  .shero__shape {
    order: -1;
    max-width: 280px;
  }
  .shero__shape svg {
    max-height: 200px;
  }
}

/* ---------- the two lanes on a state page ---------- */

.lanes__pick {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r1);
  background: var(--paper);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.lanes__pick button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 600 15px/1 var(--text);
  color: var(--steel);
  cursor: pointer;
}

.lanes__pick button[aria-selected='true'] {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(13, 36, 25, 0.08), inset 0 -3px 0 var(--lime);
}

.lane-panel {
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg);
}

.lane-panel + .lane-panel {
  margin-top: 16px;
}

.js .lane-panel + .lane-panel {
  margin-top: 0;
}

.lane-panel[hidden] {
  display: none;
}

.lane-panel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.lane-panel__head .label {
  max-width: 40em;
}

.lane-where {
  font-family: var(--head);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  margin: 0;
}

/* ---------- the five answers on a state page ---------- */

.answers {
  display: grid;
}

.answer {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}

.answer:first-child {
  border-top: 0;
  padding-top: 0;
}

.answer__q {
  font-family: var(--head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.answer__q small {
  display: block;
  font-family: var(--text);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--steel);
  margin-bottom: 8px;
}

.answer__a {
  display: grid;
  gap: 12px;
  max-width: 46em;
}

.answer__a > p:first-child {
  font-size: 17px;
  line-height: 1.6;
}

.answer__a p {
  margin: 0;
}

.answer__a ul,
.answer__a ol {
  margin: 0;
  padding-left: 1.2em;
}

.answer__a li + li {
  margin-top: 6px;
}

.answer__a .label {
  margin: 4px 0 -4px;
}

.coming + .coming {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.coming p {
  margin: 0 0 8px;
}

@media (max-width: 760px) {
  .answer {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---------- faq ---------- */

.faq details {
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-weight: 400;
  font-size: 22px;
  line-height: 0.9;
  color: var(--steel);
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq details p {
  margin: 10px 0 0;
  max-width: 44em;
  color: var(--steel);
}

/* ---------- tables ---------- */

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.specs th,
.specs td {
  text-align: left;
  vertical-align: top;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

.specs th {
  font-weight: 600;
  padding-right: 20px;
}

.tablewrap {
  overflow-x: auto;
}

.specs--engines th,
.specs--engines td {
  padding-right: 18px;
  white-space: nowrap;
}

.specs--engines thead th {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  border-top: 0;
}

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gallery figure {
  margin: 0;
  border-radius: var(--r1);
  overflow: hidden;
  background: var(--paper);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  font-size: 13px;
  padding: 8px 10px;
  color: var(--steel);
}

@media (max-width: 760px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- truck and make heroes ---------- */

.thero {
  background: var(--paper);
  padding: clamp(28px, 5vw, 56px) 0 0;
  overflow: hidden;
}

.thero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: end;
}

.thero__img img {
  width: 100%;
  height: auto;
  margin-bottom: -2%;
}

.thero__copy {
  padding-bottom: clamp(32px, 5vw, 64px);
}

.thero .lede {
  margin-top: 16px;
}

.thero__meta {
  margin: 16px 0 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--steel);
}

.thero--index {
  padding-bottom: 0;
}

.lineup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  max-width: 1400px;
  margin: 24px auto -1px;
  padding: 0 var(--gutter);
}

.lineup__t {
  margin: 0 -4%;
}

.lineup__t img {
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .thero__grid {
    grid-template-columns: 1fr;
  }
  .thero__copy {
    padding-bottom: 0;
  }
}

@media (max-width: 760px) {
  .lineup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lineup__t:nth-child(n + 4) {
    display: none;
  }
}

.mhero {
  background: var(--paper);
  padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
}

.mhero__maker {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.mhero .lede {
  margin-top: 14px;
}

/* ---------- small truck tiles, makes and kit ---------- */

.kit {
  padding-top: 12px;
}

.kit__img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.minis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.mini {
  display: grid;
  gap: 8px;
  padding: 14px 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  text-decoration: none;
  color: var(--fg);
}

.band--paper .mini {
  background: var(--bg);
}

.mini:hover {
  border-color: var(--fg);
}

.mini img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.mini span {
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
}

.makers {
  color: var(--fg);
}

.makes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.makecard {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 20px;
  border-radius: var(--r2);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--rule);
  min-height: 160px;
}

.band:not(.band--paper) .makecard {
  background: var(--paper);
  border-color: transparent;
}

.makecard:hover,
.band:not(.band--paper) .makecard:hover {
  border-color: var(--fg);
}

.makecard__maker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.makecard__model {
  font-family: var(--head);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
}

.makecard__line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--steel);
  margin-top: 6px;
}

.makes--small .makecard {
  min-height: 0;
}

.makes--small .makecard__line {
  display: none;
}

@media (max-width: 980px) {
  .makes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.engines-wait {
  max-width: 52em;
  border-style: dashed;
}

/* ---------- the fact card, a figure with its sentence and its source ---------- */

.factcard {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  padding: clamp(22px, 3vw, 32px);
  text-decoration: none;
  color: var(--fg);
  position: relative;
}

.factcard:hover {
  border-color: var(--fg);
}

.factcard::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.factcard--tall {
  grid-template-columns: 1fr;
}

.factcard__draw {
  width: 100%;
  height: auto;
  color: var(--fg);
}

.factcard__body {
  display: grid;
  gap: 10px;
}

.factcard__body p {
  margin: 0;
}

.factcard__fig {
  font-family: var(--head);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.factcard__src {
  font-size: 13px;
  color: var(--steel);
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.factcard__src b {
  color: var(--fg);
}

@media (max-width: 600px) {
  .factcard {
    grid-template-columns: 1fr;
  }
}

/* ---------- how it works ---------- */

.lane {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 5vw, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}

.lane::before {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: 9px;
  border-top: 2px dashed var(--on-m);
}

.lane li {
  position: relative;
  display: grid;
  gap: 4px;
  padding-right: 16px;
  font-size: 14px;
  color: var(--steel);
}

.lane b {
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  color: var(--fg);
  margin-top: 14px;
}

.lane__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  position: relative;
}

.lane__dot--port {
  border-radius: 5px;
  background: var(--ink);
}

.lane li:last-child .lane__dot {
  background: var(--lime);
  border-color: var(--ink);
}

@media (max-width: 760px) {
  .lane {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lane::before {
    right: auto;
    bottom: 9px;
    border-top: 0;
    border-left: 2px dashed var(--on-m);
  }
  .lane li {
    grid-template-columns: 18px 1fr;
    column-gap: 14px;
  }
  .lane li > * {
    grid-column: 2;
  }
  .lane__dot {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .lane b {
    margin-top: 0;
  }
}

.rule {
  display: grid;
  gap: 12px;
  align-content: start;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.rule p {
  margin: 0;
}

.quote {
  margin: 0;
  font-family: var(--head);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  border-left: 2px solid var(--ink);
  padding-left: 16px;
}

.ticks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 24px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ink);
}

.lanelist {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lane;
}

.lanelist li {
  counter-increment: lane;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.lanelist li::before {
  content: counter(lane, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
  color: var(--steel);
}

.lanelist p {
  margin: 0;
  grid-column: 2;
}

.doc h3 {
  font-size: 17px;
}

.srcs {
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 14px 18px;
  background: var(--bg);
}

.srcs summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.srcs ul {
  margin: 14px 0 0;
  padding-left: 1.1em;
  columns: 2 320px;
  column-gap: 32px;
  font-size: 13px;
}

.srcs li {
  break-inside: avoid;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

/* ---------- areas ---------- */

.uses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.usecard {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
}

.usecard:hover {
  border-color: var(--fg);
}

.usecard__img img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.usecard__body {
  padding: 18px 20px 22px;
  display: grid;
  gap: 6px;
}

.usecard__body p {
  margin: 0;
  color: var(--steel);
  font-size: 15px;
}

@media (max-width: 760px) {
  .uses {
    grid-template-columns: 1fr;
  }
}

.rulecard__head {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
}

.rulecard__head svg {
  width: 48px;
  height: 38px;
}

.rulecard__head svg path {
  fill: var(--ink);
}

.rulecard__head h3 {
  font-size: 18px;
  margin-bottom: 2px;
}

.portcard--likely {
  border-style: dashed;
}

/* ---------- the map page ---------- */

.maphead {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 20px;
}

.mapwrap {
  position: relative;
}

.mapcard {
  background: var(--sfc-2);
  border: 1px solid var(--on-r);
  border-radius: var(--r2);
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--on);
}

.mapcard p {
  margin: 0;
}

.mapcard .muted {
  color: var(--on-m);
}

.mapcard .btn {
  margin-top: 6px;
  justify-self: start;
}

.mapcard .status {
  color: var(--on);
}

.map [data-st] {
  cursor: pointer;
  outline: none;
}

.map [data-st]:hover .st,
.map [data-st]:focus .st,
.map [data-st].is-on .st {
  fill: #4a5966;
}

.map [data-st]:focus-visible .st {
  stroke: var(--lime);
  stroke-width: 2;
}

@media (min-width: 1081px) {
  .mapwrap .mapcard {
    position: absolute;
    right: 0;
    bottom: 3%;
    width: 300px;
    z-index: 2;
  }
  .maphead--solo {
    grid-template-columns: minmax(0, 0.8fr);
  }
}

@media (max-width: 1080px) {
  .maphead {
    grid-template-columns: 1fr;
  }
  .mapwrap {
    display: grid;
    gap: 16px;
  }
}

/* ---------- finishes page ---------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-self: end;
}

.swatches span {
  aspect-ratio: 1;
  border-radius: var(--r2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.fins {
  display: grid;
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.fin {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(20px, 3vw, 36px) 0;
  border-top: 1px solid var(--rule);
}

.fin:first-child {
  border-top: 0;
}

.fin--flip .fin__img {
  order: 2;
}

.fin__img {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fin) 16%, var(--paper)) 0%, var(--paper) 100%);
  border-radius: var(--r3);
  padding: 24px;
}

.fin__img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.fin__copy {
  display: grid;
  gap: 12px;
}

.fin__copy p {
  margin: 0;
}

.fin__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.fin__chip i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

@media (max-width: 760px) {
  .fin,
  .fin--flip {
    grid-template-columns: 1fr;
  }
  .fin--flip .fin__img {
    order: 0;
  }
}

/* ---------- field guide contents ---------- */

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: end;
}

.toc a {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}

.toc a:hover {
  text-decoration: underline;
}

.toc span {
  font-family: var(--head);
  font-weight: 600;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.phero .two {
  align-items: end;
}

/* ---------- contact ---------- */

.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'intro door' 'cards door';
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.contactgrid__intro {
  grid-area: intro;
}

.contactgrid__cards {
  grid-area: cards;
}

.contactgrid .plate {
  grid-area: door;
}

@media (max-width: 860px) {
  .contactgrid {
    grid-template-columns: 1fr;
    grid-template-areas: 'intro' 'door' 'cards';
  }
}

/* ---------- footer, night ---------- */

.foot {
  background: var(--sfc);
  color: var(--on);
  padding: 56px 0 32px;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.foot a.brand {
  display: flex;
  color: var(--on);
  padding: 0;
}

.foot a.brand:hover {
  text-decoration: none;
}

.foot .brand__sub {
  color: var(--on-m);
}

.foot h4 {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-m);
  margin-bottom: 12px;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.foot a {
  color: var(--on);
  text-decoration: none;
  font-size: 15px;
  display: inline-block;
  padding: 4px 0;
}

.foot a:hover {
  text-decoration: underline;
}

.foot__note {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--on-r);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  font-size: 13px;
  color: var(--on-m);
}

.foot__note p {
  margin: 0;
  max-width: 52em;
}

/* the company and, bottom right in steel at the smallest size, whose property it
   is. Tyler, 28 October: "a property of the Burroship in the very bottom subtle
   right corner". Text only, no mark. */
.foot__own {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.foot__prop {
  font-size: 12px;
  color: var(--steel);
}

@media (max-width: 860px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot__mark {
    grid-column: span 2;
  }
  .foot__note {
    grid-template-columns: 1fr;
  }
  .foot__own {
    justify-items: start;
    text-align: left;
  }
}

/* ---------- small helpers ---------- */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mt-s {
  margin-top: 14px;
}
.mt-m {
  margin-top: 28px;
}
.mt-l {
  margin-top: 48px;
}

.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

@media (max-width: 860px) {
  .two {
    grid-template-columns: 1fr;
  }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- the county map on a state page ---------- */

.cbox {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.75fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.cmap svg {
  width: 100%;
  height: auto;
  max-height: 560px;
}

.cty {
  fill: var(--bg);
  stroke: #aab0b8;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none;
  transition: fill 0.15s var(--ease);
}

.band--paper .cty {
  fill: var(--bg);
}

.band:not(.band--paper) .cty {
  fill: var(--paper);
}

.cty:hover,
.cty:focus-visible,
.cty.is-on {
  fill: #dfe2dc;
}

/* the county route colours are the one map theme's, Ion's atlas COL table:
 * open_roads open, some_routes limit, towns_only later, none_found closed and
 * to_confirm unclear (build.mjs writes the --a- tokens from his theme.json) */
.cty[data-c='open_roads'] {
  fill: var(--a-open);
}
.cty[data-c='some_routes'] {
  fill: var(--a-limit);
}
.cty[data-c='towns_only'] {
  fill: var(--a-later);
}
.cty[data-c='none_found'] {
  fill: var(--a-closed);
}
.cty[data-c='to_confirm'] {
  fill: var(--a-unclear);
}

.cty[data-c]:hover,
.cty[data-c].is-on,
.cty[data-c]:focus-visible {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.c-open_roads,
.l-open,
.l-segments {
  --s: var(--a-open);
}
.c-some_routes,
.l-some,
.l-crossings {
  --s: var(--a-limit);
}
.c-towns_only {
  --s: var(--a-later);
}
.c-none_found,
.l-closed {
  --s: var(--a-closed);
}
.c-to_confirm,
.l-to_confirm {
  --s: var(--a-unclear);
}

.cpanel {
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--bg);
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 88px;
}

.cpanel p {
  margin: 0;
}

.crow {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.crow p,
.crow ul {
  margin: 0;
}

.crow ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.crow__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}

.crules {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 20px;
  max-width: 56em;
}

.crules__state,
.crules__county {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.crules__state p,
.crules__county p {
  margin: 0;
}

.crules__county h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

@media (max-width: 860px) {
  .cbox {
    grid-template-columns: 1fr;
  }
  .cpanel {
    position: static;
  }
}

/* the routes map by lane. A newer truck never lands in California, so its lane
   hides the California sea lanes and every road line from a California port. */
.lane-new {
  display: none;
}

.lanebox[data-lane='new'] .lane-new {
  display: inline;
}

.lanebox[data-lane='new'] .lane-a25,
.lanebox[data-lane='new'] .route--ca,
.lanebox[data-lane='new'] .sea--ca {
  display: none;
}

.lanebox--routes .laneswitch {
  background: color-mix(in srgb, var(--on) 10%, transparent);
}

.specs--head thead th {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  border-top: 0;
}

.specs--head th,
.specs--head td {
  padding-right: 18px;
}

.specs--head td:nth-child(3),
.specs--head td:nth-child(5) {
  white-space: nowrap;
}

/* on a phone the port labels would draw at about four pixels, so only Ridgway
   keeps its label, set large enough to read. The key under the map names the rest. */
@media (max-width: 600px) {
  .map .tag {
    display: none;
  }
  .map .tag--home {
    display: inline;
    font-size: 30px;
    stroke-width: 9px;
  }
}

.quote--small {
  font-family: var(--text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  border-left-width: 2px;
  padding-left: 14px;
}

/* ---------- areas ---------- */

.uses--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .uses--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .uses--three {
    grid-template-columns: 1fr;
  }
}

.areagroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px 32px;
}

.areagroup {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* a figure is a source card: the number, what it counts, and where it was read */
.figs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.figcard {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  position: relative;
}

.band:not(.band--paper) .figcard {
  background: var(--paper);
  border-color: transparent;
}

.figcard:hover,
.band:not(.band--paper) .figcard:hover {
  border-color: var(--fg);
}

.figcard::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.figcard__n {
  font-family: var(--head);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.figcard__w {
  font-size: 15px;
}

.figcard__s {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--steel);
}

.cty-list {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}

.cty--area {
  fill: color-mix(in srgb, var(--ink) 72%, var(--white));
}

.cmap .cty:not(.cty--area) {
  cursor: default;
}

/* ---------- search ---------- */

.search {
  position: relative;
  width: 100%;
  max-width: 760px;
}

.search__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfd9c8;
  border-radius: var(--r2);
  background: var(--white);
  padding: 0 8px 0 16px;
  box-shadow: var(--shadow);
}

.search__bar:focus-within {
  border-color: var(--ink);
}

.search__icon {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--steel);
  border-radius: 50%;
  position: relative;
}

.search__icon::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 2px;
  background: var(--steel);
  right: -6px;
  bottom: -3px;
  transform: rotate(45deg);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 17px/1.2 var(--text);
  color: var(--fg);
  min-height: 52px;
}

.search--big input {
  font-size: 20px;
  min-height: 64px;
}

.search .btn {
  min-height: 40px;
}

.search--big .btn {
  min-height: 48px;
}

.sres {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 8px;
}

.search[data-search-full] .sres {
  position: static;
  max-height: none;
  box-shadow: none;
  margin-top: 16px;
}

.sres__h {
  margin: 10px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.sres__i {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--r1);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}

.sres__i:hover,
.sres__i.is-on {
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--lime);
}

.sres__none {
  margin: 8px;
  color: var(--steel);
  font-size: 14px;
}

.search-strip {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.search-strip .search {
  max-width: 640px;
}

.search-strip .search__bar {
  box-shadow: none;
}

/* the home's first screen: one line, the search bar and the chips, nothing else */
.hero1 {
  min-height: calc(100svh - 69px);
  display: flex;
  align-items: center;
  padding: 48px 0 72px;
  background: var(--bg);
}

.hero1 .sheet {
  display: grid;
  gap: 28px;
  justify-items: start;
}

.hero1__h {
  max-width: 17em;
}

.hero1__chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip--quiet {
  padding: 7px 12px;
  color: var(--steel);
  font-weight: 500;
}

.chip--quiet:hover {
  color: var(--fg);
  border-color: var(--fg);
}

/* ---------- the truck directory and engine model lists ---------- */

.dir {
  display: grid;
  border-top: 1px solid var(--rule);
}

.dir__r {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dir__r[hidden] {
  display: none;
}

.dir__r:target {
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--lime);
}

.dir__m {
  display: grid;
  gap: 2px;
}

.dir__m a {
  color: var(--fg);
  text-decoration: none;
}

.dir__m a:hover b {
  text-decoration: underline;
}

.dir__m b {
  font-family: var(--head);
  font-weight: 600;
  font-size: 16px;
}

.dir__k {
  display: none;
}

.dir .dir__r:not([data-make]) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr);
}

.dirf select.pill {
  appearance: auto;
  padding-right: 10px;
}

@media (max-width: 900px) {
  .dir__r,
  .dir .dir__r:not([data-make]) {
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    padding: 16px 0;
  }
  .dir__m,
  .dir__lane {
    grid-column: span 2;
  }
  .dir__k {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
  }
}

@media (max-width: 480px) {
  .search .btn {
    display: none;
  }
  .search--big input {
    font-size: 18px;
    min-height: 58px;
  }
}

@media (max-width: 760px) {
  .hero1 {
    align-items: flex-start;
    padding-top: 12vh;
  }
}

.hero1__sub {
  margin: -8px 0 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--steel);
  max-width: 36em;
}

/* the compact directory, one row per chassis under a sticky make header */
.dirc {
  display: grid;
  gap: 18px;
}

.dirg[hidden],
.dirr[hidden] {
  display: none;
}

.dirg__h {
  position: sticky;
  top: var(--top-vis);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 0 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
}

.dirg__h::-webkit-details-marker {
  display: none;
}

.dirg__n {
  margin-left: auto;
  font: 500 13px/1 var(--text);
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.dirg__h::after {
  content: '';
  width: 12px;
  height: 8px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111418' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 0.2s var(--ease);
}

.dirg[open] > .dirg__h::after {
  transform: rotate(180deg);
}

@media (max-width: 700px) {
  .dirc {
    gap: 0;
  }
  .dirg__h {
    min-height: 56px;
    padding: 12px 0;
    border-bottom-color: var(--rule);
  }
  .dirg[open] > .dirg__h {
    border-bottom-color: var(--ink);
  }
}

.dirr {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: 4px 14px;
  align-items: center;
  min-height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dirr:hover {
  background: var(--paper);
}

.dirr:target {
  box-shadow: inset 3px 0 0 var(--lime);
}

.dirr__m {
  font-weight: 600;
}

.dirr__c,
.dirr__y {
  color: var(--steel);
}

@media (max-width: 700px) {
  .dirr {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dirr__c {
    grid-column: 1;
    font-size: 13px;
  }
  .dirr__y {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 13px;
  }
  .dirr .status {
    grid-column: 2;
    justify-self: end;
    font-size: 12px;
  }
}

/* ---------- the national county map, /map/ ----------
 *
 * Drawn by src/js/county-map.js from /geo/counties.json and /data/county-lanes.json.
 * The colours are Ion's atlas palette (map-template.html on his shelf, the light
 * set), kept here as the only copy the site uses: open #1F6F78, limit #6FAFB0,
 * later #9CC9EA, unclear #C9D0D6, closed #D9A3A0 and none #E2E7EA, on his sea
 * #E3E8EB. county-map.js maps every status onto one of the five names with Ion's
 * COL table, so a colour changes here and only here. They are scoped to .nmap and
 * do not touch the status chips elsewhere on the site. Ridgway is the one lime.
 */
.nmap {
  --m-sea: var(--a-sea);
  --m-line: var(--a-line);
  --m-border: var(--a-border);
  --m-hover: var(--a-hover);
  --m-open: var(--a-open);
  --m-limit: var(--a-limit);
  --m-later: var(--a-later);
  --m-unclear: var(--a-unclear);
  --m-closed: var(--a-closed);
  --m-none: var(--a-none);
  margin-top: clamp(20px, 3vw, 32px);
}

.nmap__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nmap__bar .laneswitch {
  margin-bottom: 0;
  flex-wrap: wrap;
}

.nmap__go select {
  min-height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6470' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: 500 15px/1 var(--text);
  color: var(--fg);
  appearance: none;
  cursor: pointer;
}

.nmap__go select:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.nmap__stage {
  display: grid;
  gap: 14px;
}

@media (min-width: 1000px) {
  .nmap__stage {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.nmap__box {
  position: relative;
  background: var(--m-sea);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  overflow: hidden;
}

.nmap__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 975 / 610;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

@media (max-width: 600px) {
  .nmap__svg {
    aspect-ratio: 4 / 3;
  }
}

.nmap__ground {
  fill: var(--m-sea);
}

.nmap__counties path {
  stroke: var(--m-line);
  stroke-width: 0.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill-rule: evenodd;
}

.nmap__counties g {
  transition: opacity 0.3s var(--ease);
}

.nmap.is-zoomed .nmap__counties g:not([data-on]) {
  opacity: 0.4;
}

.nmap .k-open {
  fill: var(--m-open);
  --s: var(--m-open);
}

.nmap .k-limit {
  fill: var(--m-limit);
  --s: var(--m-limit);
}

.nmap .k-later {
  fill: var(--m-later);
  --s: var(--m-later);
}

.nmap .k-unclear {
  fill: var(--m-unclear);
  --s: var(--m-unclear);
}

.nmap .k-closed {
  fill: var(--m-closed);
  --s: var(--m-closed);
}

.nmap .k-none {
  fill: var(--m-none);
  --s: var(--m-none);
}

.nmap__hatch path {
  fill: url(#nmap-hatch);
  pointer-events: none;
}

.nmap__states path {
  fill: none;
  stroke: var(--m-border);
  stroke-width: 0.9;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.nmap__hov,
.nmap__sel {
  fill: none;
  stroke: var(--m-hover);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.nmap__hov {
  stroke-width: 2;
}

.nmap__sel {
  stroke-width: 2.6;
}

.nmap__home rect {
  fill: var(--lime);
  stroke: var(--ink);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.nmap__home {
  pointer-events: none;
}

.nmap__home text {
  display: none;
  font: 600 12px var(--text);
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.nmap.is-home .nmap__home text {
  display: block;
}

.nmap__back {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  min-height: 36px;
  padding: 0 12px 0 28px;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M6.5 1l-5 5 5 5' fill='none' stroke='%23111418' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 12px center;
  font: 600 13px/1 var(--text);
  color: var(--fg);
  cursor: pointer;
}

.nmap__back[hidden] {
  display: none;
}

.nmap__wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--steel);
}

.nmap__wait[hidden] {
  display: none;
}

.nmap__card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 18px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.nmap__card p,
.nmap__card h2 {
  margin: 0;
}

.nmap__card .row {
  margin-top: 6px;
  gap: 8px;
}

.nmap__card .row[hidden],
.nmap__card [hidden] {
  display: none;
}

.nmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  color: var(--steel);
}

.nmap__legend .status i,
.nmap__card .status i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(13, 36, 25, 0.08);
}

.nmap__khatch i {
  background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px);
}

.nmap__khome i {
  background: var(--lime);
  border-color: var(--ink);
}

/* a county's photograph, from Ion's Commons list, credited under it. It runs the
 * full sheet at a calm height, 360 on a desk and 220 on a phone, cropped from the
 * middle, so it reads as the place and never as a block with a hole beside it
 * (the coordinator, 28 October: "run it full width at a calm height"). */
.cphoto {
  margin: 0;
}

.cphoto img {
  display: block;
  width: 100%;
  height: clamp(220px, 28vw, 360px);
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--r2);
  background: var(--paper);
}

.cphoto figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--steel);
}

.cphoto figcaption a {
  color: inherit;
}

/* figures two across on a phone, so ten of them read as a table and not a scroll */
@media (max-width: 560px) {
  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .figcard {
    padding: 12px 12px 12px 14px;
  }
  .figcard::after {
    right: 10px;
    top: 12px;
  }
  .figcard__n {
    font-size: 22px;
  }
  .figcard__w {
    font-size: 14px;
    line-height: 1.35;
  }
  .figcard__s {
    font-size: 11px;
  }
}

/* ---------- the smart form, the door on every page ----------
 * layout.mjs door() writes it and site.js part 2 reads the note into it. The chips
 * are real checkboxes under a pill, so they post without script and a keyboard
 * reaches them. The answers under the note are plain lines with an ink rule, never
 * an alert colour, because they are help and not errors. */
.sf__ctx {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.sf__about {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sf__about legend {
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
}

.sf__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sfchip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.sfchip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sfchip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cfd9c8;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.sfchip span::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  opacity: 0.6;
}

.sfchip input:checked + span {
  background: var(--ink);
  border-color: var(--fg);
  color: var(--white);
}

.sfchip input:checked + span::before {
  opacity: 1;
  background: currentColor;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.sfchip input:focus-visible + span {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.sfchip--fin {
  margin: 2px 0 10px;
}

.sfchip--fin span {
  min-height: 34px;
  font-size: 13px;
}

.field textarea {
  min-height: 116px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.field textarea::placeholder {
  color: #baccbf;
}

.field textarea:focus {
  border-color: var(--fg);
}

.sf__hints {
  display: grid;
  gap: 6px;
  margin: -4px 0 14px;
}

.sf__hints:empty {
  display: none;
}

.sf__hint {
  margin: 0;
  padding: 8px 12px;
  border-left: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 0 var(--r1) var(--r1) 0;
  font-size: 14px;
  line-height: 1.45;
}

.sf__how {
  font-size: 12px;
  color: var(--steel);
  min-height: 1em;
}

.sf__row {
  display: grid;
  gap: 0 12px;
}

@media (min-width: 1100px) {
  .sf__row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* can I own one here, Ion's lanes on a county page, one row each with its colour */
.olanes {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.olane {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.olane p {
  margin: 0;
}

.olane p + p {
  margin-top: 6px;
}

.olane__k {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--s, var(--open));
}

.olane__h {
  font-weight: 600;
}

@media (min-width: 900px) {
  .olanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

/* the county's own silhouette in the county hero (pages.mjs countyShape). Paper
 * with an ink hairline on a white plate, towns as ink dots, the state locator in
 * the top corner with the county in lime. */
.shero__shape--county {
  align-self: stretch;
}

.csil {
  height: 100%;
  min-height: 300px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 14px 18px 24px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
}

.csil__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shero__shape .csil__map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  overflow: visible;
}

.csil__shape {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.csil__town circle {
  fill: var(--ink);
  stroke: var(--bg);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.csil__town text,
.csil__home text {
  font-family: var(--text);
  font-weight: 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-linejoin: round;
}

.csil__home rect {
  fill: var(--lime);
  stroke: var(--ink);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.shero__shape .csil__loc {
  flex: none;
  width: 84px;
  height: 84px;
  max-height: 84px;
}

.csil__cap {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--steel);
}

.shero__shape .csil__map {
  align-self: center;
  justify-self: center;
}

@media (max-width: 860px) {
  .shero__shape.shero__shape--county {
    max-width: none;
    width: 100%;
  }
  .csil {
    min-height: 240px;
    padding: 12px 14px 18px;
  }
  .shero__shape--county .csil__map {
    max-height: 250px;
  }
  .shero__shape--county .csil__loc {
    width: 56px;
    height: 56px;
    max-height: 56px;
  }
}

/* ---------- the home, dark and light in turns (pages.mjs home) ----------
 * Tyler, 28 October: "We can do a mix of dark-themed and light-themed sections,
 * so be creative ... Let's design this super nice and clean." Seven bands. The
 * headings are centred on the home only; the rest of the site keeps its left
 * edge. Dark bands sit on night, the lanes band one step deeper on ink.
 */

/* 1. the hero, the photograph full bleed behind a calm veil */
.hero2 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #0b0f13;
  color: var(--on);
  isolation: isolate;
}

.hero2__ph,
.hero2__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero2__ph img {
  object-fit: cover;
  object-position: 42% 18%;
  z-index: -2;
}

/* strongest at the top and the centre where the words sit, lighter where the rock
 * glows and over the aspens, never flat. The overlay is the "darkened" in the
 * credit line. */
.hero2__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 42% at 50% 46%, rgba(13, 36, 25, 0.5), rgba(13, 36, 25, 0) 72%),
    linear-gradient(180deg, rgba(13, 36, 25, 0.78) 0%, rgba(13, 36, 25, 0.5) 30%, rgba(13, 36, 25, 0.34) 58%, rgba(13, 36, 25, 0.5) 82%, rgba(13, 36, 25, 0.82) 100%);
}

.hero2__in {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: calc(var(--top-h) + 24px);
  padding-bottom: 88px;
}

.hero2__h {
  margin: 0;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(42px, 7.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero2__sub {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: #cfd9c8;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero2 .search {
  width: min(100%, 720px);
  margin-top: 32px;
  text-align: left;
}

.hero2 .search__bar {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  border-color: transparent;
}

.hero2__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
}

.chip--glass {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--on);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.chip--glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.hero2__credit {
  position: absolute;
  right: var(--gutter);
  bottom: 14px;
  left: var(--gutter);
  margin: 0;
  text-align: right;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.hero2__credit a {
  color: inherit;
}

/* the centred band heads of the home */
.hhead {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  max-width: 46em;
}

.hhead .label::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--silver);
}

.hhead .lede {
  margin: 0 auto;
}

.hhead--dark .h2 {
  color: var(--on);
}

.hhead--dark .lede,
.hhead--dark .label {
  color: var(--on-m);
}

/* 2. every make, every engine */
.mks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mk {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: end;
  min-height: 132px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.mk:hover {
  border-color: var(--fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.mk__maker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

.mk__model {
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.mk__go {
  position: absolute;
  right: 22px;
  bottom: 24px;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.fams {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.fams__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.fam {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  background: var(--bg);
}

.fam b {
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.fam span {
  color: var(--steel);
}

.fam:hover {
  border-color: var(--silver);
  background: var(--paper);
}

.hband__ask {
  margin: clamp(28px, 3.5vw, 40px) auto 0;
  max-width: 40em;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
}

.hband__ask a {
  font-weight: 600;
  color: var(--fg);
  margin-left: 6px;
  white-space: nowrap;
}

/* 3. the map band */
.hmap .lanebox--routes .laneswitch {
  display: flex;
  width: max-content;
  margin: 0 auto 18px;
}

.hmap .legend {
  justify-content: center;
}

.hmap__county {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: 22px 26px;
  border: 1px solid var(--on-r);
  border-left: 3px solid var(--silver);
  border-radius: var(--r2);
  background: var(--sfc-2);
  color: var(--on);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.hmap__county > span:first-child {
  display: grid;
  gap: 6px;
}

.hmap__county .label {
  color: var(--on-m);
}

.hmap__t {
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.015em;
}

.hmap__s {
  color: var(--on-m);
  font-size: 15px;
}

.hmap__go {
  margin-left: auto;
  flex: none;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--on);
  border-right: 2px solid var(--on);
  transform: rotate(45deg);
}

.hmap__county:hover {
  background: #1d2631;
  border-color: rgba(167, 186, 200, 0.5);
}

/* 4. how it works, four steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
}

.step {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 24px 8px 0;
}

.step + .step {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}

.step__n {
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.step .h3 {
  margin: 0;
}

.step p {
  margin: 0;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.6;
}

.step .arrow {
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  margin-top: 4px;
}

/* 5. the two lanes, ink */
.hlanes {
  background: #0a0e12;
  color: var(--on);
}

.lanes2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lane2 {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--on-r);
  border-radius: var(--r3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--on) 4%, transparent), color-mix(in srgb, var(--on) 1%, transparent));
}

.lane2 .label {
  color: var(--silver);
}

.lane2__h {
  margin: 0;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lane2 p {
  margin: 0;
  color: #c9d1d8;
  line-height: 1.6;
}

.lane2 .arrow {
  color: var(--on);
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
}

.hlanes__neither {
  margin: 24px auto 0;
  max-width: 52em;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-m);
}

/* 6. the form, centred */
.hdoor__in {
  display: grid;
  justify-items: center;
}

.hdoor .plate {
  width: min(100%, 640px);
}

@media (max-width: 980px) {
  .mks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
    gap: 0 24px;
  }
  .step,
  .step + .step {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .step:nth-child(-n + 2) {
    border-top: 1px solid var(--ink);
  }
}

@media (max-width: 640px) {
  .hero2__in {
    padding-top: calc(var(--top-h) + 8px);
    padding-bottom: 72px;
  }
  .hero2__ph img {
    object-position: 37% 30%;
  }
  .hero2 .search--big input {
    font-size: 17px;
    min-height: 56px;
  }
  .mk {
    min-height: 104px;
    padding: 16px;
  }
  .mk__go {
    right: 16px;
    bottom: 18px;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .step:nth-child(2) {
    border-top: 1px solid var(--rule);
  }
  .lanes2 {
    grid-template-columns: 1fr;
  }
  .hmap__county {
    padding: 18px;
  }
  .hero2__credit {
    font-size: 10px;
    bottom: 10px;
  }
}

.foot .logo img {
  height: 52px;
}

/* a text link with the chevron, inline, so the mark sits on the line */
a.arrow:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.foot a.brand {
  justify-content: flex-start;
}

.hdoor .hhead {
  margin-bottom: 20px;
}

/* the state page hero, the state drawn large with every county (pages.mjs
 * stateCounties). Unread counties are white on the paper hero, read ones take the
 * route colours, and every county is a link. */
.shero__shape--state {
  align-self: center;
}

.smap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
}

.smap .cty {
  stroke: #baccbf;
  stroke-width: 0.6;
}

.smap .cty:not([data-c]) {
  fill: var(--bg);
}

.smap .cty[data-c] {
  stroke: var(--bg);
  stroke-width: 0.8;
}

.smap a:hover .cty,
.smap a:focus-visible .cty {
  stroke: var(--ink);
  stroke-width: 1.6;
}

.smap__out {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.smap__town,
.smap__home {
  pointer-events: none;
}

.smap__town circle {
  fill: var(--ink);
  stroke: var(--bg);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.smap__town text,
.smap__home text {
  font-family: var(--text);
  font-weight: 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-linejoin: round;
}

.smap__home rect {
  fill: var(--lime);
  stroke: var(--ink);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.smap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--steel);
}

.smap__legend .status {
  color: var(--fg);
}

.smap__unread i {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px #baccbf;
}

.smap__k-town i {
  border-radius: 50%;
  background: var(--ink);
}

.smap__hint {
  width: 100%;
  color: var(--steel);
}

@media (max-width: 860px) {
  .shero__shape.shero__shape--state {
    max-width: none;
    width: 100%;
  }
  .shero__shape--state .smap svg {
    max-height: 340px;
  }
}

/* ---------- "Owning one in <State>" (pages.mjs ownBlock) ----------
 * The most useful section on a state page, Tyler, 28 October. Numbered steps, the
 * papers as a checklist, a fees table with tabular figures, cards for the rest and
 * the questions as quiet disclosures. Silver blue marks the steps and the ticks. */
.own__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -8px 0 28px;
}

.own__toc a {
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.own__toc a:hover {
  border-color: var(--silver);
}

.own__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.own__steps,
.own__papers,
.ocard {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: clamp(18px, 2.4vw, 28px);
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.band:not(.band--paper) .own .own__steps,
.band:not(.band--paper).own .own__steps,
.band:not(.band--paper).own .own__papers,
.band:not(.band--paper).own .ocard {
  background: var(--paper);
  border-color: transparent;
}

.own p,
.own h3 {
  margin: 0;
}

.ocard__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.osteps {
  list-style: none;
  counter-reset: step;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.osteps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  line-height: 1.6;
}

.osteps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on);
  font: 600 13px/1 var(--head);
  font-variant-numeric: tabular-nums;
}

.own__papers {
  position: sticky;
  top: calc(var(--top-vis) + 16px);
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.checklist label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.checklist input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ink);
}

.checklist input:checked + span {
  color: var(--steel);
  text-decoration: line-through;
  text-decoration-color: var(--silver);
}

.own > .sheet > .ocard,
.own__two,
.own .ofaq,
.own .olinks {
  margin-top: 16px;
}

.own__two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.own__three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.own__three > div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.ofees__wrap {
  overflow-x: auto;
}

.ofees {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.ofees th,
.ofees td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-top: 1px solid var(--rule);
}

.ofees thead th {
  border-top: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

.ofees tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.ofees__amt {
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.olist {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  line-height: 1.55;
}

.osrc summary,
.ofaq__q summary {
  cursor: pointer;
  list-style: none;
}

.osrc summary::-webkit-details-marker,
.ofaq__q summary::-webkit-details-marker {
  display: none;
}

.osrc summary {
  font-size: 12px;
  color: var(--steel);
  text-decoration: underline;
  text-decoration-color: var(--silver);
  text-underline-offset: 3px;
}

.osrc ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.6;
  word-break: break-all;
}

.osrc a {
  color: var(--steel);
}

.ofaq {
  display: grid;
  gap: 0;
}

.ofaq .h3 {
  margin-bottom: 10px;
}

.ofaq__q {
  border-top: 1px solid var(--rule);
}

.ofaq__q:last-child {
  border-bottom: 1px solid var(--rule);
}

.ofaq__q summary {
  position: relative;
  padding: 16px 32px 16px 0;
  font-weight: 600;
  line-height: 1.45;
}

.ofaq__q summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.ofaq__q[open] summary::after {
  transform: rotate(-135deg);
  top: 26px;
}

.ofaq__q p {
  padding: 0 0 18px;
  max-width: 48em;
  color: var(--steel);
  line-height: 1.65;
}

.olinks ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.olinks a {
  color: var(--fg);
  font-weight: 500;
}

@media (max-width: 980px) {
  .own__lead,
  .own__two {
    grid-template-columns: 1fr;
  }
  .own__papers {
    position: static;
  }
  .own__three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ofees thead {
    display: none;
  }
  .ofees tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
  }
  .ofees th,
  .ofees td {
    padding: 0;
    border: 0;
  }
  .ofees td:last-child {
    grid-column: 1 / -1;
    color: var(--steel);
  }
}

/* the ownership cards as disclosures (pages.mjs ownBlock, site.js part 11). Open on
 * a desk, where the summary line hides; folded on a phone, where it shows. */
.odet > .odet__s {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  list-style: none;
  cursor: pointer;
  padding-right: 26px;
  position: relative;
}

.odet > .odet__s::-webkit-details-marker {
  display: none;
}

.odet > .odet__s::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.odet[open] > .odet__s::after {
  transform: rotate(-135deg);
  top: 12px;
}

.odet__t {
  display: grid;
  gap: 4px;
}

.odet__sum {
  display: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.odet:not([open]) .odet__sum {
  display: block;
}

.odet__b {
  display: grid;
  gap: 12px;
}

.own .odet:not([open]) {
  gap: 0;
}

@media (max-width: 700px) {
  .own .ocard {
    padding: 16px;
  }
  .own__two,
  .own > .sheet > .ocard {
    margin-top: 10px;
  }
  .own__two {
    gap: 10px;
  }
}

/* ================== BLACK AND LIME, 28 October evening ==================
 * Overrides the light system above, in one place, so the change can be read whole.
 */

/* grounds: white bands, black bands, no paper */
.band--paper,
.phero,
.search-strip {
  background: var(--bg);
}

.band--paper {
  border-top: 1px solid var(--rule);
}

.phero {
  border-bottom: 1px solid var(--rule);
}

.band--ink,
.hlanes,
.band--black {
  background: var(--sfc);
  color: var(--on);
}

.band--black .label,
.band--black .lede,
.band--black .muted {
  color: var(--on-m);
}

.band--black .h2 {
  color: var(--on);
}

/* the primary button is lime with black type, everywhere */
.btn--ink,
.btn--plate,
.band--ink .btn--ink,
.band--ink .btn--plate,
.nav a.btn--ink,
.nav .nav__cta,
.top--over:not(.is-solid) .nav .nav__cta {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

.btn--ink:hover,
.btn--plate:hover,
.nav a.btn--ink:hover,
.band--ink .btn--ink:hover {
  background: var(--lime-2);
  color: var(--ink);
}

.band--ink .btn--line,
.band--black .btn--line {
  background: transparent;
  color: var(--on);
  border-color: color-mix(in srgb, var(--on) 50%, transparent);
}

/* active states and accents in lime, never as type on white */
.nav a[aria-current='page'] {
  box-shadow: inset 0 -3px 0 var(--lime);
}

.menusheet__nav a.sheet__link[aria-current='page'] {
  box-shadow: inset 4px 0 0 var(--lime);
}

.hhead .label::after,
.band__head > .label::after,
.band__head > div > .label:first-child::after {
  background: var(--lime);
  width: 32px;
  height: 3px;
}

.top.is-scrolled .top__bar {
  box-shadow: 0 1px 0 var(--rule);
}

.search__bar:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime), var(--shadow);
}

.sres__i.is-on,
.sres__i:hover {
  background: var(--ink);
  color: var(--on);
}

.sres__i.is-on::before {
  background: var(--lime);
}

/* lane chips, the lane a truck is in: lime when it is the road lane today */
.lanechip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lanechip--on {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.band--black .lanechip:not(.lanechip--on),
.band--ink .lanechip:not(.lanechip--on) {
  background: transparent;
  border-color: var(--on-r);
  color: var(--on);
}

/* make tiles and steps take the lime accent */
.mk:hover {
  border-color: var(--fg);
  box-shadow: inset 0 -4px 0 var(--lime), var(--shadow);
}

.step__n {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
}

.steps {
  border-top-color: var(--ink);
}

.lane2 .label {
  color: var(--acc-t);
}

.lane2 {
  background: var(--sfc-2);
  border-color: var(--sfc-2);
}

.hmap__county {
  border-left-color: var(--lime);
  background: var(--sfc-2);
}

.hmap__county .hmap__t {
  color: var(--on);
}

.fam:hover {
  border-color: var(--fg);
  background: var(--bg);
  box-shadow: inset 0 -3px 0 var(--lime);
}

/* ---- the home hero: solid black, the line, the search, popular ---- */
.hero3 {
  background: var(--sfc);
  color: var(--on);
  padding: calc(var(--top-h) + clamp(36px, 7vw, 92px)) 0 clamp(40px, 5vw, 64px);
}

.hero3__in {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero3__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font: 600 12px/1.3 var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-m);
}

.hero3__k .sq {
  background: var(--lime);
  opacity: 1;
}

.hero3__h {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(46px, 8.4vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.hero3__lime {
  color: var(--acc-t);
}

.hero3__sub {
  margin: 22px 0 0;
  max-width: 34em;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--on-m);
}

.hero3 .search {
  width: min(100%, 780px);
  margin-top: 38px;
  text-align: left;
}

.hero3 .search__bar {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 60px rgba(0, 0, 0, 0.6);
}

.hero3 .search__bar:focus-within {
  box-shadow: 0 0 0 4px var(--lime), 0 22px 60px rgba(0, 0, 0, 0.6);
}

.hero3 .search--big input {
  min-height: 70px;
  font-size: 21px;
}

.hero3__pop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.hero3__poph {
  margin-right: 6px;
  font: 600 12px/1 var(--text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-m);
}

.chip--dark {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sfc-2);
  border: 1px solid var(--on-r);
  color: var(--on);
}

.chip--dark:hover {
  border-color: var(--lime);
  color: var(--acc-t);
  background: var(--sfc-2);
}

.hero3__browse {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  color: var(--on);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.hero3__browse span {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.hero3__browse:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* the photograph as a wide bright plate, rising out of the black */
.plate3 {
  background: linear-gradient(var(--sfc) 0 42%, var(--white) 42% 100%);
  padding-bottom: clamp(8px, 2vw, 16px);
}

.plate3__fig {
  margin: 0;
}

.plate3__fig img {
  display: block;
  width: 100%;
  height: clamp(260px, 44vw, 620px);
  object-fit: cover;
  object-position: 40% 30%;
  border-radius: var(--r3);
}

.plate3__credit {
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  line-height: 1.4;
  color: var(--steel);
}

.plate3__credit a {
  color: inherit;
}

/* search as a full screen sheet on a phone (site.js part 9) */
.search--sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: auto;
  margin: 0;
  padding: 12px 16px 24px;
  background: var(--white);
  overflow-y: auto;
  text-align: left;
}

.hero3 .search.search--sheet {
  width: auto;
  margin: 0;
}

.search--sheet .search__bar {
  box-shadow: 0 0 0 3px var(--lime);
}

.search--sheet .sres {
  position: static;
  margin-top: 12px;
  box-shadow: none;
  border: 0;
  max-height: none;
}

.search__close {
  display: block;
  margin: 0 0 10px auto;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  background: var(--white);
  color: var(--ink);
  font: 600 15px/1 var(--text);
}

/* ---- a generation page (pages.mjs genPage) ---- */
.gen-hero {
  background: var(--bg);
  padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
}

.gen-hero .label {
  margin-top: 14px;
}

.gen-hero__h {
  margin: 10px 0 0;
}

.gen-hero__code {
  display: inline-block;
  padding: 0 0.16em;
  border-radius: 0.1em;
  background: var(--lime);
  color: var(--ink);
}

.gen-hero__lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.gen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.gen-specs,
.gen-eng {
  margin-top: 18px;
}

.gen-eng .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.genlink {
  color: inherit;
  text-decoration: none;
}

.genlink:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-underline-offset: 3px;
}

.gen-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--on-r);
  color: var(--on-m);
}

.gen-stat b {
  color: var(--acc-t);
  font-family: var(--head);
  font-weight: 600;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gen-cert {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--on-r);
}

.gen-cert__h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.gen-cert__h b {
  font-family: var(--head);
  font-size: 20px;
}

.gen-cert p {
  margin: 0;
  color: var(--on-m);
  line-height: 1.6;
}

.gen-neither {
  margin-top: 18px;
  color: var(--on-m);
  line-height: 1.6;
}

.gen-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.gen-link {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  color: var(--fg);
  text-decoration: none;
}

.gen-link b {
  font-family: var(--head);
  font-size: 20px;
  font-weight: 600;
}

.gen-link:hover {
  border-color: var(--fg);
  box-shadow: inset 0 -4px 0 var(--lime);
}

.gen-changes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--lime);
}

.gen-changes li {
  display: grid;
  gap: 4px;
  padding: 0 0 20px 20px;
}

.gen-changes__when {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .gen-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gen-grid > div {
  min-width: 0;
}

.gen-specs th,
.gen-specs td {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .hero3__k {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .hero3 .search--big input {
    min-height: 58px;
    font-size: 17px;
  }
  .plate3 {
    background: linear-gradient(var(--sfc) 0 36%, var(--white) 36% 100%);
  }
  .plate3__fig img {
    height: 300px;
    object-position: 37% 30%;
  }
}

@media (max-width: 640px) {
  .hero3__k {
    display: none;
  }
}

/* How It Works carries "Import one yourself" under it on a desk */
.nav__group {
  position: relative;
  display: inline-flex;
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding-top: 8px;
  z-index: 5;
}

.nav__sub a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.nav__sub a:hover {
  box-shadow: inset 0 -3px 0 var(--lime), var(--shadow);
  background: var(--bg);
}

.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub {
  display: block;
}

.menusheet__nav a.sheet__link--sub {
  font-size: clamp(20px, 5.4vw, 24px);
  padding-left: 22px;
  color: var(--steel);
  border-left: 3px solid var(--lime);
}

/* the free report call under the home search */
.hero3__report {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 26px;
}

.hero3__report p {
  margin: 0;
  color: var(--on-m);
  font-size: 15px;
  max-width: 34em;
}

.btn--big {
  min-height: 56px;
  padding: 0 28px;
  font-size: 17px;
}

.sfchip--report input:checked + span {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.sfchip--report input:checked + span::before {
  box-shadow: inset 0 0 0 2px var(--lime);
  background: var(--ink);
}

/* the one catalog model, when Lyra's cutout lands */
.catalog {
  margin: 24px 0 0;
  max-width: 560px;
}

.catalog img {
  display: block;
  width: 100%;
  height: auto;
}

.catalog figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--steel);
}

/* the do it yourself guide */
.guide__note {
  display: inline-block;
  margin: 14px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--lime);
  background: var(--ink);
  color: var(--on);
  font-size: 14px;
  font-weight: 500;
}

.guide {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.guide__rail {
  position: sticky;
  top: calc(var(--top-vis) + 16px);
}

.guide__rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--rule);
}

.guide__rail a {
  display: flex;
  gap: 10px;
  padding: 10px 0 10px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}

.guide__rail a span {
  font-variant-numeric: tabular-nums;
  color: var(--steel);
}

.guide__rail a:hover {
  border-left-color: var(--lime);
}

.gstep {
  display: grid;
  gap: 12px;
  padding: 0 0 clamp(32px, 4vw, 48px);
  margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--top-vis) + 16px);
}

.gstep p {
  margin: 0;
  line-height: 1.65;
  max-width: 44em;
}

.gstep__n {
  display: inline-flex;
  width: max-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .guide {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide__rail {
    position: static;
  }
}

/* ---------- the logo, emblem and caps lettering (layout.mjs logo) ----------
 * The emblem untouched as an image, PHOSPHOR beside it in Archivo 700 tracked
 * 0.08em and MOTOR CO. small and tracked under it. Ink on light grounds, white on
 * black, the emblem's ridge following (emblem.svg or emblem-light.svg). */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  color: var(--fg);
}

.logo .logo__em {
  position: relative;
  display: block;
  flex: none;
}

.logo .logo__em img {
  display: block;
  height: 46px;
  width: auto;
}

.logo .logo__em .logo__light {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.logo__txt {
  display: grid;
  gap: 5px;
}

.logo__word {
  font-family: var(--head);
  font-weight: 700;
  font-size: 25px;
  line-height: 0.9;
  letter-spacing: 0.08em;
  margin-right: -0.08em;
}

.logo__sub {
  font-family: var(--head);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.34em;
  opacity: 0.78;
}

.logo--light,
.top--over:not(.is-solid) .logo {
  color: var(--on);
}

.logo--light .logo__em .logo__ink,
.top--over:not(.is-solid) .logo .logo__ink {
  opacity: 0;
}

.logo--light .logo__em .logo__light,
.top--over:not(.is-solid) .logo .logo__light {
  opacity: 1;
}

.menusheet__head .logo .logo__em img {
  height: 34px;
}

.menusheet__head .logo__word {
  font-size: 19px;
}

.foot .logo .logo__em img {
  height: 44px;
}

@media (max-width: 1179px) {
  .logo .logo__em img {
    height: 40px;
  }
  .logo__word {
    font-size: 22px;
  }
}

@media (max-width: 699px) {
  .top .logo {
    gap: 8px;
  }
  .top .logo .logo__em img {
    height: 30px;
  }
  .top .logo__word {
    font-size: 17px;
  }
  .top .logo__sub {
    font-size: 8px;
    letter-spacing: 0.3em;
  }
}

/* ---------- the home hero, condensed, with the fleet ----------
 * Tyler, 28 October evening: "the hero is still too big ... condense ... heading a
 * little too big." H1 64 on a desk and 34 on a phone. On a desk the words and the
 * search sit left and the fleet right, so the line, the search and the trucks fit
 * one 900px screen. On a phone the fleet follows the search. */
.hero3--fleet {
  padding: calc(var(--top-h) + clamp(12px, 3vw, 36px)) 0 clamp(28px, 4vw, 48px);
}

.hero3__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.hero3--fleet .hero3__copy {
  display: grid;
  justify-items: start;
  text-align: left;
}

.hero3--fleet .hero3__h {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero3--fleet .hero3__sub {
  margin-top: 14px;
  font-size: clamp(16px, 1.4vw, 18px);
}

.hero3--fleet .search {
  width: 100%;
  margin-top: 22px;
}

.hero3--fleet .search--big input {
  min-height: 62px;
  font-size: 19px;
}

.hero3--fleet .hero3__pop {
  justify-content: flex-start;
  margin-top: 14px;
}

.hero3__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 18px;
}

.hero3__acts .hero3__browse {
  margin-top: 0;
}

.hero3__fleet {
  margin: 0;
  min-width: 0;
}

.hero3__fleet img {
  display: block;
  width: 100%;
  height: auto;
}

.hero3__fleet figcaption {
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  color: var(--on-m);
}

@media (max-width: 980px) {
  .hero3__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero3--fleet .hero3__copy {
    justify-items: center;
    text-align: center;
  }
  .hero3--fleet .hero3__pop,
  .hero3__acts {
    justify-content: center;
  }
  .hero3__fleet {
    max-width: 640px;
    justify-self: center;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hero3--fleet .hero3__h {
    font-size: 34px;
  }
  .hero3--fleet .search--big input {
    min-height: 54px;
    font-size: 16px;
  }
  .hero3--fleet .hero3__pop .chip--dark {
    padding: 6px 11px;
    font-size: 13px;
  }
  .hero3--fleet .hero3__poph {
    display: none;
  }
}

@media (min-width: 981px) {
  .hero3__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
  .hero3__fleet {
    margin-right: calc(var(--gutter) * -0.5);
  }
}

/* Lyra's scenes as a wide plate under a hero, at true exposure (pages.mjs scenePlate) */
.scene {
  padding: clamp(16px, 2.4vw, 32px) 0 0;
}

.scene__fig {
  margin: 0;
}

.scene__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r3);
}

.scene__fig figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--steel);
}

/* the guide filled from Ion's diy.json */
.gstep__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gstep__what {
  font-size: 17px;
}

.gstep__details {
  max-width: 46em;
}

.gstep__watch {
  padding: 12px 16px;
  border-left: 3px solid var(--lime);
  background: var(--ink);
  color: var(--on);
  border-radius: 0 var(--r1) var(--r1) 0;
}

.gstep__watch b {
  color: var(--acc-t);
}

.gstep__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.gstep__lists > div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.checklist__sub {
  display: block;
  color: var(--steel);
  font-size: 13px;
}

.gcost {
  display: grid;
  gap: 8px;
}

.gcost__amt {
  font-family: var(--head);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gcost__q {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  color: var(--steel);
}

.gstep__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.gstep__links a {
  color: var(--fg);
  font-weight: 500;
}

.gstep__n--off {
  background: var(--ink);
  color: var(--lime);
}

.guide__advice {
  margin-top: 12px;
  max-width: 52em;
  color: var(--fg);
}

@media (max-width: 700px) {
  .gstep__lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gfold {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}

.gfold__h {
  font-weight: 600;
  font-size: 15px;
}

.gfold .odet__sum .sq {
  margin: 0 6px;
  vertical-align: middle;
}

/* ---------- Colorado 2028, the feature page (pages.mjs co2028Page) ---------- */
.co28-hero {
  background: var(--sfc);
  color: var(--on);
  padding: calc(var(--top-h) + clamp(24px, 4vw, 56px)) 0 clamp(36px, 5vw, 64px);
}

.co28-hero__in {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.crumbs--dark,
.crumbs--dark a {
  color: var(--on-m);
}

.co28-hero__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 12px/1.3 var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-m);
}

.co28-hero__k .sq {
  background: var(--lime);
  opacity: 1;
}

.co28-hero__h {
  margin: 0;
  max-width: 18em;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.co28-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 8px;
}

.co28-count__n {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(72px, 13vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--acc-t);
  font-variant-numeric: tabular-nums;
}

.co28-count__n:empty {
  display: none;
}

.co28-count__l {
  max-width: 22em;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.45;
  color: var(--on-m);
}

.co28-hero__dek {
  margin: 4px 0 0;
  max-width: 40em;
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-m);
}

.co28-hero__read {
  margin: 0;
  font-size: 12px;
  color: var(--on-m);
}

.co28-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.co28-card {
  border-top: 4px solid var(--lime);
}

.co28__cite,
.co28__cite a {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--steel);
}

.band--black .co28__cite,
.band--black .co28__cite a {
  color: var(--on-m);
}

.co28-tl {
  padding: clamp(24px, 3vw, 40px) 0;
}

.co28-tl__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 0;
  overflow-x: auto;
  border-top: 3px solid var(--ink);
}

.co28-tl__strip li {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 20px 20px 4px 0;
}

.co28-tl__strip li::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--lime);
  border: 2px solid var(--ink);
}

.co28-tl__d {
  font-family: var(--head);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.co28-myths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.co28-myth {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--sfc-2);
  border-radius: var(--r2);
  background: var(--sfc-2);
}

.co28-myth p {
  margin: 0;
  line-height: 1.55;
}

.co28-myth__m > span:first-child,
.co28-myth__f > span:first-child {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11px/1.4 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.co28-myth__m {
  color: var(--on-m);
  text-decoration: line-through;
  text-decoration-color: rgba(154, 163, 173, 0.5);
}

.co28-myth__m > span:first-child {
  background: #2a2d31;
  color: var(--on-m);
  text-decoration: none;
}

.co28-myth__f {
  color: var(--on);
}

.co28-myth__f > span:first-child {
  background: var(--lime);
  color: var(--ink);
}

/* the lime news strip on the Colorado page and the quiet home line */
.newsstrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px var(--gutter);
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
}

.newsstrip__k {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newsstrip__go,
.hero3__news span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

.newsstrip:hover span:nth-child(2) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero3__news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--on-m);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--on-r);
  padding-bottom: 2px;
}

.hero3__news:hover {
  color: var(--acc-t);
  border-bottom-color: var(--lime);
}

/* Colorado 2028 filled from Ion's file */
.co28-news {
  display: grid;
  gap: 16px;
  max-width: 52em;
}

.co28-news__lead {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
}

.co28-news__who {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-left: 3px solid var(--lime);
  background: var(--ink);
  color: var(--on);
  border-radius: 0 var(--r1) var(--r1) 0;
}

.co28-news__who p {
  margin: 0;
}

.co28-news__who .label,
.co28-news__who .co28__cite {
  color: var(--on-m);
}

.co28-news__two {
  margin: 0;
  color: var(--steel);
}

.co28-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.co28-card p {
  margin: 0;
}

.co28-tl__w {
  line-height: 1.5;
}

.co28-reasons {
  margin: 20px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 12px;
  max-width: 52em;
  line-height: 1.6;
}

.co28-wait {
  margin: 20px 0 0;
  max-width: 52em;
  font-weight: 500;
}

.co28__cite--in {
  display: block;
  margin-top: 4px;
}

.co28-st {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.co28-st--p {
  background: var(--lime);
  color: var(--ink);
}

.co28-st--l {
  background: var(--ink);
  color: var(--on);
}

.co28-st--q {
  border: 1px solid var(--rule);
  color: var(--steel);
}

.co28-pay {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
}

.co28-pay p {
  margin: 0;
}

.co28-newer {
  display: grid;
  gap: 12px;
  max-width: 52em;
}

.co28-newer p {
  margin: 0;
}

.band--black .co28-newer p,
.band--black .co28-newer li {
  color: #cfd9c8;
}

.co28-phones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.co28-phones li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}

.co28-tel {
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- the Ridgway map (pages.mjs ridgwayPage, src/js/ridgway-map.js) ----------
 * The one map theme every map on the site shares, Ion's atlas tokens (.nmap above),
 * read by the script from these custom properties. Land owner tones and the farm
 * hatch are added here in the same quiet register; the coordinator reviews the look
 * against /map/. */
.rmap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: calc(100vh - var(--top-h));
  min-height: calc(100svh - var(--top-h));
  background: var(--bg);
}

.rmap__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.rmap__title {
  display: grid;
  gap: 4px;
  margin-right: auto;
}

.rmap__h {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
}

.rmap__time {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r1);
  background: rgba(127, 127, 127, 0.14);
}

.rmap__time button,
.rmap__chip {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 600 14px/1 var(--text);
  color: var(--fg);
  cursor: pointer;
}

.rmap__time button[aria-pressed='true'] {
  background: var(--bg);
  box-shadow: inset 0 -3px 0 var(--lime);
}

.rmap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rmap__chip {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
}

.rmap__chip[aria-pressed='false'] {
  color: var(--steel);
  text-decoration: line-through;
}

.rmap__stage {
  position: relative;
  min-height: 420px;
}

.rmap__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  outline: none;
}

.rmap__wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  pointer-events: none;
}

.rmap__wait[hidden] {
  display: none;
}

.rmap__panel {
  position: absolute;
  right: 16px;
  top: 16px;
  width: min(340px, calc(100% - 32px));
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.rmap__panel[hidden] {
  display: none;
}

.rmap__panel p,
.rmap__panel h2 {
  margin: 0;
}

.rmap__x {
  justify-self: end;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  background: var(--bg);
  padding: 6px 10px;
  font: 600 13px/1 var(--text);
  cursor: pointer;
}

.rmap__sp b {
  font-family: var(--head);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.rmap__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}

.rmap__dl dt {
  color: var(--steel);
}

.rmap__dl dd {
  margin: 0;
  font-weight: 600;
}

.rmap__src {
  font-size: 12px;
  color: var(--steel);
  word-break: break-word;
}

.rmap__attr {
  margin: 0;
  padding: 8px var(--gutter);
  font-size: 11px;
  color: var(--steel);
  border-top: 1px solid var(--rule);
}

.rmap__attr:empty {
  display: none;
}

@media (max-width: 700px) {
  .rmap__panel {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
  }
}

.rlink {
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--lime);
  border-radius: var(--r2);
  color: var(--fg);
  text-decoration: none;
}

.rlink b {
  font-family: var(--head);
  font-size: 20px;
}

.rlink:hover {
  border-color: var(--fg);
}

/* Colorado 2028 folded on a phone (site.js part 11 closes details.odet under 700px) */
.co28-myth.odet > .odet__s {
  padding-right: 26px;
}

.co28-myth .odet__t {
  gap: 8px;
}

.co28-myth .co28-myth__m {
  display: block;
  line-height: 1.5;
}

.co28-myth__one {
  color: var(--on-m);
}

.co28-myth .odet__b p {
  margin: 0;
}

.ostep > .odet__s {
  padding-right: 22px;
}

.ostep .odet__b {
  gap: 6px;
  margin-top: 6px;
}

.ostep .odet__b p {
  margin: 0;
}

.osteps li::before {
  top: 0;
}

@media (max-width: 700px) {
  .co28-cards--swipe {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .co28-cards--swipe > * {
    scroll-snap-align: start;
  }
  .co28-myths {
    gap: 8px;
  }
  .co28-myth {
    padding: 14px 16px;
  }
}

.band--black .gfold {
  border-top-color: var(--on-r);
}

.band--black .gfold__h {
  color: var(--on);
}

.band--black .gfold .odet__sum {
  color: var(--on-m);
}

.co28-fold {
  margin-top: 14px;
}

.co28-fold .odet__b > p {
  margin: 0;
}

.own__papers .co28-fold {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.own__papers .co28-fold .gfold__h {
  font-family: var(--head);
  font-size: 20px;
}

@media (max-width: 700px) {
  .co28__sec {
    padding: 44px 0;
  }
  .co28-myth .co28-myth__one {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 700px) {
  /* the footer already says where we are, so the door's card steps aside on a phone */
  .doorband__where {
    display: none;
  }
  .co28-myth .co28-myth__one {
    -webkit-line-clamp: 1;
  }
  .co28-myth .co28-myth__m {
    font-size: 15px;
  }
  .co28-myth {
    padding: 12px 14px;
  }
  .ostep .odet__t b {
    font-size: 15px;
    font-weight: 600;
  }
  .osteps {
    gap: 10px;
  }
  .co28-hero {
    padding-bottom: 32px;
  }
  .co28-news__lead {
    font-size: 17px;
  }
}

@media (max-width: 700px) {
  .co28-myth:not([open]) .co28-myth__one {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .co28__sec {
    padding: 32px 0;
  }
  .co28-myth {
    padding: 10px 12px;
  }
  .co28-myth .odet__t {
    gap: 4px;
  }
  /* on a phone the form's own title says it, so the band's line steps aside */
  .doorband__head .lede {
    display: none;
  }
}

@media (max-width: 700px) {
  .co28-hero__dek,
  .co28-hero__read {
    display: none;
  }
  .co28-tl {
    padding: 16px 0;
  }
  .co28-news {
    gap: 10px;
  }
}

@media (max-width: 700px) {
  .co28-hero {
    padding-top: calc(var(--top-h) + 14px);
  }
  .co28-myths {
    gap: 6px;
  }
  .osteps {
    gap: 8px;
  }
  .co28-count {
    margin-top: 2px;
  }
}

/* the Ridgway map's chrome and legend, every colour a theme token (Ion's theme.json:
 * mapbox on sea with a rule, mono figures in ink-3, swatches 13px with a 3px radius) */
.rmap .rmap__stage {
  background: var(--a-sea);
  border-top: 1px solid var(--a-rule);
}

.rmap__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 4px;
}

.rmap__zoom button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--a-rule-2);
  border-radius: 6px;
  background: var(--a-panel);
  color: var(--a-ink);
  font: 700 18px/1 var(--head);
  cursor: pointer;
}

.rmap__mini {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 220px;
  margin: 0;
  padding: 10px;
  background: var(--a-panel);
  border: 1px solid var(--a-rule);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.rmap__minih {
  font: 500 11px/1.2 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-ink-3);
  margin-bottom: 6px;
}

.rmap__mini canvas {
  display: block;
  width: 100%;
  height: 150px;
  background: var(--a-land);
  border-radius: 6px;
}

.rmap__minileg {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--a-ink-2);
}

.rmap__minileg li,
.rmap__legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rmap i {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  flex: none;
}

.rmap .k-open {
  background: var(--a-open);
}

.rmap .k-cross {
  background: repeating-linear-gradient(90deg, var(--a-closed) 0 6px, transparent 6px 10px);
}

.rmap .k-confirm {
  background: var(--a-unclear);
}

.rmap .k-closed {
  background: var(--a-closed);
}

.rmap .k-plain {
  background: var(--a-rule-2);
}

.rmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--a-rule);
  background: var(--a-panel);
  font-size: 13px;
  color: var(--a-ink-2);
}

.rmap[data-time='today'] .rmap__legend [data-leg-open]::after {
  content: ' today';
  font-weight: 400;
}

.rmap[data-time='2028'] .rmap__legend [data-leg-open]::after {
  content: ' from 1 January 2028';
  font-weight: 400;
}

.rmap__legend b {
  font-weight: 600;
}

.rmap__sp b,
.rmap__dl dd {
  font-variant-numeric: tabular-nums;
}

.rmap__sp small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--a-ink-3);
}

@media (max-width: 700px) {
  .rmap__mini {
    width: 160px;
    padding: 8px;
  }
  .rmap__mini canvas {
    height: 96px;
  }
  .rmap__minileg {
    font-size: 10.5px;
  }
  .rmap__stage {
    min-height: 62vh;
  }
}

/* ---------- the hero's avatar stack (pages.mjs AVATARS) ----------
 * Round truck avatars above the line, overlapping by about 30 percent, the lime one
 * on top with a lime ring. A hover lifts one and names it. */
.hero3--stack {
  padding: calc(var(--top-h) + clamp(16px, 3.4vw, 44px)) 0 clamp(36px, 4.4vw, 56px);
}

.hero3--stack .hero3__in {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero3--stack .hero3__h {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero3--stack .hero3__sub {
  margin-top: 14px;
  font-size: clamp(16px, 1.4vw, 18px);
}

.hero3--stack .search {
  width: min(100%, 720px);
  margin-top: 24px;
}

.hero3--stack .search--big input {
  min-height: 62px;
  font-size: 19px;
}

.hero3--stack .hero3__pop {
  margin-top: 14px;
}

.hero3--stack .hero3__acts {
  justify-content: center;
}

.avstack {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  padding-top: 26px;
}

.av {
  position: relative;
  z-index: var(--z, 1);
  display: block;
  width: 62px;
  height: 62px;
  margin-left: -19px;
  border-radius: 50%;
  background: var(--sfc-2);
  box-shadow: 0 0 0 2px var(--sfc), 0 0 0 3px var(--on-r);
  transition: transform 0.2s var(--ease);
}

.av:first-child {
  margin-left: 0;
}

.av img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.av--lime {
  box-shadow: 0 0 0 2px var(--sfc), 0 0 0 4px var(--lime);
}

.av__l {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font: 600 11px/1.3 var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.av:hover,
.av:focus-visible {
  transform: translateY(-6px);
  z-index: 20;
  outline: none;
}

.av:hover .av__l,
.av:focus-visible .av__l {
  opacity: 1;
  transform: translate(-50%, 0);
}

.av__more {
  margin-left: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--on-r);
  background: var(--sfc-2);
  color: var(--on);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.av__more:hover {
  border-color: var(--lime);
  color: var(--acc-t);
}

@media (max-width: 640px) {
  .av {
    width: 44px;
    height: 44px;
    margin-left: -13px;
  }
  .av__more {
    margin-left: 10px;
    padding: 5px 9px;
    font-size: 12px;
  }
  .avstack {
    margin-bottom: 16px;
    padding-top: 22px;
  }
  .hero3--stack .hero3__h {
    font-size: 34px;
  }
  .hero3--stack .search--big input {
    min-height: 54px;
    font-size: 16px;
  }
}

/* ---------- The Tailgate, the bulletin (pages.mjs tailgateIndex, tailgatePost) ----------
 * Black and lime, a board of pinned cards each a little askew, playful and clean. */
.tg-hero {
  background: var(--sfc);
  color: var(--on);
  padding: calc(var(--top-h) + clamp(20px, 4vw, 52px)) 0 clamp(32px, 4.4vw, 56px);
}

.tg-hero__in,
.tg-post__head {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.tg-hero__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 12px/1.3 var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-m);
}

.tg-hero__k .sq {
  background: var(--lime);
  opacity: 1;
}

.tg-hero__h {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--acc-t);
}

.tg-post__h {
  margin: 0;
  max-width: 20em;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.tg-hero__sub {
  margin: 0;
  max-width: 40em;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--on-m);
}

.tgsub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  width: min(100%, 560px);
}

.tgsub input[type='email'] {
  flex: 1 1 240px;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--on-r);
  border-radius: var(--r1);
  background: var(--sfc-2);
  color: var(--on);
  font: 400 16px var(--text);
}

.tgsub input[type='email']:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(180, 214, 47, 0.35);
}

.tgsub .btn {
  min-height: 50px;
}

.tgsub__line {
  width: 100%;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--on-m);
}

.tg-post__sub .tgsub input[type='email'] {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--rule);
}

.tg-post__sub .tgsub__line {
  color: var(--steel);
}

.tgboard {
  background: var(--sfc-2);
}

.tg__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tg__cat {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--on-r);
  color: var(--on-m);
  font-size: 13px;
  font-weight: 600;
}

.tg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 22px;
  padding-top: 10px;
}

.tg__card {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 220px;
  padding: 26px 22px 22px;
  border-radius: 6px;
  background: #f4f1e8;
  color: var(--fg);
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.tg__card:hover,
.tg__card:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.55);
  outline: none;
}

.tg__pin {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.tg__sticker {
  width: 58px;
  height: auto;
}

.tg__tag {
  width: max-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime);
  font: 600 11px/1.3 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tg__date {
  font-size: 12px;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.tg__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.tg-post {
  display: grid;
  gap: 20px;
  max-width: 46em;
}

.tg-post__body p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
}

.tg-post__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.tg-post__sub {
  display: grid;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

/* ---- the long road, /timeline/ (pages.mjs timelinePage, site.js part 12) ----
 * Every position on the road is three numbers set inline by pages.mjs, base years
 * (--a), card widths (--c) and panel widths (--k), multiplied here by --base, --card
 * and --key. A year that holds a card is that much wider, so history and trucks stay
 * on one axis on any screen without the browser working anything out. If the
 * formula changes here, change at() in pages.mjs timelinePage with it.
 * Read down is the default, for no script and for reduced motion. The sideways
 * road is everything under "the long road, sideways" below. */
.lr {
  --base: 22px;
  --card: 0px;
  --key: 0px;
  --pad: 16px;
  --gap: 0px;
  --lane-h: 12px;
  --lane-gap: 4px;
  background: var(--sfc);
  color: var(--on);
  padding: 8px 0 40px;
}

.lr-intro {
  background: var(--sfc);
  color: var(--on);
  padding: calc(var(--top-h) + clamp(28px, 5vw, 64px)) 0 clamp(24px, 3vw, 36px);
}

/* sideways, the road docks under the header, so the last line of the intro keeps
 * a header's height clear above it and never shows through the bar */
@media (prefers-reduced-motion: no-preference) {
  .js .lr-intro {
    padding-bottom: calc(var(--top-h) + 4px);
  }
}

.lr-intro .crumbs,
.lr-intro .crumbs a {
  color: var(--on-m);
}

.lr-intro .label {
  color: var(--acc-t);
}

.lr-intro .lede {
  color: color-mix(in srgb, var(--on) 78%, transparent);
  max-width: 760px;
}

.lr-intro__how {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-m);
}

.lr-intro__h {
  display: none;
}

.lr__track {
  position: relative;
}

.lr__sky {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lr-chs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lr-c__in {
  background: var(--sfc-2);
  border: 1px solid var(--on-r);
  border-radius: var(--r3);
  padding: 20px 22px;
}

.lr-c--ahead .lr-c__in {
  border-style: dashed;
  border-color: rgba(180, 214, 47, 0.45);
  background: transparent;
}

.lr-c__yr {
  margin: 0 0 6px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--acc-t);
}

.lr-c__when {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-m);
}

.lr-c--ahead .lr-c__when {
  color: var(--acc-t);
}

.lr-c__h {
  margin: 8px 0 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--on);
}

.lr-c--key .lr-c__h {
  font-size: 30px;
}

.lr-c__b p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--on) 80%, transparent);
}

.lr-c__go {
  margin: 14px 0 0;
}

.lr-c__go a {
  color: var(--acc-t);
  font-weight: 600;
  text-decoration: none;
}

.lr-c__src {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-m);
}

.lr-c__src a {
  color: inherit;
}

.lr-c__items {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--on) 80%, transparent);
}

.lr-c__items .sq {
  background: var(--steel);
}

.lr-c__srcs a {
  color: var(--on);
}

/* a card whose words run past its box scrolls inside it, and says so with a fade
 * (site.js part 12 adds is-long after measuring) */
.lr-c.is-long .lr-c__in {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0.25));
  mask-image: linear-gradient(180deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0.25));
}

.lr-c.is-long.is-end .lr-c__in {
  -webkit-mask-image: none;
  mask-image: none;
}

/* the 1988 chapter's honesty line, Ion's: no source gives the reason for 25 */
.lr-c__why {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--lime);
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  color: var(--on);
}

/* To confirm and the note on the sources, quiet and folded */
.lr-c__q {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-m);
}

.lr-c__q summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

.lr-c__q summary::-webkit-details-marker {
  display: none;
}

.lr-c__q summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
}

.lr-c__q[open] summary::before {
  transform: rotate(45deg);
}

.lr-c__q p,
.lr-c__q ul {
  margin: 6px 0 0;
}

.lr-c__q ul {
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.lr-c__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lr-c__list li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  font-size: 15px;
  line-height: 1.35;
}

.lr-c__list span {
  color: var(--on-m);
  font-variant-numeric: tabular-nums;
}

.lr-c__list a {
  color: var(--on);
  font-weight: 600;
}

.lr-c__art {
  margin: 16px 0 0;
}

.lr-c__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r2);
}

.lr-dec,
.lr__road,
.lr-cut,
.lr__ctl {
  display: none;
}

/* read down, the trucks lane is a strip that scrolls on its own */
.lr__trucks {
  margin: 36px auto 0;
  max-width: var(--sheet);
  overflow-x: auto;
  padding: 0 var(--gutter);
}

.lr__trucks-in {
  position: relative;
  width: calc(var(--pad) * 2 + var(--A) * var(--base) + var(--C) * var(--card) + var(--K) * var(--key));
  padding: 28px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lr-ticks {
  position: absolute;
  inset: 0 0 auto;
  height: 22px;
}

.lr-tick {
  position: absolute;
  top: 0;
  left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
  font-size: 12px;
  font-weight: 600;
  color: var(--on-m);
  font-variant-numeric: tabular-nums;
}

/* a row a make, its generations in sub-rows: a pill 12px tall (10 on a phone)
 * and 4px between sub-rows, so the row is as tall as its sub-rows need */
.lr-row {
  position: relative;
  flex: none;
  height: calc(var(--n) * var(--lane-h) + (var(--n) - 1) * var(--lane-gap));
}

.lr-row__make {
  position: sticky;
  left: 0;
  z-index: 2;
  display: inline-block;
  transform: translateX(var(--sl, 0px));
  padding: 1px 8px 1px 6px;
  border-radius: 0 6px 6px 0;
  background: rgba(13, 36, 25, 0.88);
  color: color-mix(in srgb, var(--on) 72%, transparent);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.lr-bar {
  position: absolute;
  top: calc(var(--li) * (var(--lane-h) + var(--lane-gap)));
  left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
  width: max(6px, calc(var(--wa) * var(--base) + var(--wc) * var(--card) + var(--wk) * var(--key) - 2px));
  height: var(--lane-h);
  container-type: inline-size;
  text-decoration: none;
}

.lr-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--lane-h) / 2);
  background: linear-gradient(90deg, var(--lime) 0 var(--on), #3a3f45 var(--on) 100%);
  transition: filter 0.2s var(--ease);
}

/* the chassis code inside the pill when the pill is wide enough to hold it,
 * otherwise only on hover, focus or a first tap (site.js part 12) */
.lr-bar span {
  position: relative;
  display: none;
  padding: 0 7px;
  font-size: calc(var(--lane-h) - 3px);
  font-weight: 700;
  line-height: var(--lane-h);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: color-mix(in srgb, var(--on) 86%, transparent);
  pointer-events: none;
}

.lr-bar.is-road span,
.lr-bar.is-part span {
  color: var(--ink);
}

@container (min-width: 50px) {
  .lr-bar span {
    display: block;
  }
}

.lr-bar:hover::before,
.lr-bar:focus-visible::before,
.lr-bar:target::before {
  filter: brightness(1.35);
}

.lr-bar:target::before {
  box-shadow: 0 0 0 2px var(--on);
}

.lr-bar:hover::after,
.lr-bar:focus-visible::after,
.lr-bar:target::after,
.lr-bar.is-peek::after {
  content: attr(data-l);
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 6;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--on);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.lr-cut--lane {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
  width: 2px;
  margin-left: -1px;
  background: var(--lime);
  pointer-events: none;
}

.lr__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: 13px;
  color: color-mix(in srgb, var(--on) 72%, transparent);
}

.lr__key > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lr__key .muted {
  color: var(--on-m);
  flex-basis: 100%;
}

.lr__k {
  width: 22px;
  height: 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--on) 22%, transparent);
}

.lr__k--road {
  background: var(--lime);
}

/* ---- the long road, sideways. Script on and motion allowed. ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .lr-intro__h {
    display: inline;
  }
  .js .lr-intro__v {
    display: none;
  }
  .js .lr {
    --base: 56px;
    --card: 488px;
    --key: 680px;
    --gap: 28px;
    --pad: 56px;
    --snap-m: 48px;
    --road-h: 76px;
    --sky-min: 300px;
    --trucks-h: 21%;
    padding: 0;
  }
  .js .lr__frame {
    height: calc(100vh - var(--top-vis));
    height: calc(100svh - var(--top-vis));
    min-height: 540px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border-top: 1px solid var(--on-r);
  }
  .js .lr__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    outline: none;
  }
  .js .lr__scroll::-webkit-scrollbar {
    display: none;
  }
  .js .lr__scroll:focus-visible {
    box-shadow: inset 0 0 0 2px var(--lime);
  }
  .js .lr__track {
    height: 100%;
    width: calc(var(--pad) * 2 + var(--A) * var(--base) + var(--C) * var(--card) + var(--K) * var(--key));
    display: grid;
    grid-template-rows: minmax(var(--sky-min), 1fr) var(--road-h) minmax(0, var(--trucks-h));
  }
  /* clip and not hidden: hidden would make the sky its own scroll container and
   * take the cards out of the road's scroll snap, which on a phone's mandatory
   * snap left today as the only stop and pulled every link there */
  .js .lr__sky {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow: clip;
  }
  .js .lr-chs {
    position: absolute;
    inset: 0;
    display: block;
  }
  .js .lr-c {
    position: absolute;
    left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
    bottom: 22px;
    width: calc(var(--card) - var(--gap));
    max-height: calc(100% - 44px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    scroll-snap-align: start;
    scroll-margin-left: var(--snap-m);
  }
  .js .lr-c__h {
    font-size: 22px;
  }
  .js .lr-c--key .lr-c__h {
    font-size: 27px;
  }
  .js .lr-c__b p {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.5;
  }
  .js .lr-c::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 100%;
    width: 1px;
    height: 22px;
    background: color-mix(in srgb, var(--on) 30%, transparent);
  }
  .js .lr-c--key {
    width: calc(var(--key) - var(--gap));
  }
  /* a panel is full height only when Lyra's art fills the slot under its year;
   * without art it is as tall as its words and the year sits on the headline */
  .js .lr-c--key.has-art {
    top: 22px;
    max-height: none;
  }
  .js .lr-c__in {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    transform: translateY(16px);
    transition: transform 0.8s var(--ease);
  }
  .js .lr-c.is-in .lr-c__in {
    transform: none;
  }
  .js .lr-c--key .lr-c__in {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(180, 214, 47, 0.07), rgba(255, 255, 255, 0) 46%), var(--sfc-2);
  }
  .js .lr-c--key.has-art .lr-c__in {
    height: 100%;
  }
  .js .lr-c--key .lr-c__yr {
    font-size: clamp(52px, 8vh, 110px);
    padding-bottom: 4px;
  }
  .js .lr-c--key .lr-c__art {
    flex: 1 1 auto;
    min-height: 0;
    margin: 4px 0 16px;
  }
  .js .lr-c--key .lr-c__art img {
    height: 100%;
    object-fit: cover;
  }
  .js .lr-dec {
    display: block;
    position: absolute;
    top: 6%;
    left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
    font-family: var(--head);
    font-weight: 700;
    font-size: min(16vh, calc(var(--base) * 2.3));
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--on) 8%, transparent);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
  }
  .js .lr__road {
    display: block;
    position: relative;
    background: #0f1113;
    border-top: 1px solid var(--on-r);
    border-bottom: 1px solid var(--on-r);
  }
  .js .lr__line {
    position: absolute;
    top: 20px;
    height: 2px;
    left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
    width: calc(var(--wa) * var(--base) + var(--wc) * var(--card) + var(--wk) * var(--key));
  }
  .js .lr__line--past {
    --a: 0;
    --c: 0;
    --k: 0;
    background: color-mix(in srgb, var(--on) 55%, transparent);
  }
  .js .lr__line--ahead {
    background: repeating-linear-gradient(90deg, var(--lime) 0 14px, transparent 14px 26px);
  }
  .js .mp {
    position: absolute;
    top: 20px;
    left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
    width: 1px;
    height: 1px;
  }
  /* only the decades and today are stops; a year a stop would make a phone's
   * mandatory snap stall every 26 pixels. A snap area needs a size, so 1px. */
  .js .mp[data-stop] {
    scroll-snap-align: start;
    scroll-margin-left: var(--snap-m);
  }
  .js .mp::before {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    width: 1px;
    height: 12px;
    background: color-mix(in srgb, var(--on) 35%, transparent);
  }
  .js .mp b {
    position: absolute;
    top: 14px;
    left: 0;
    font-family: var(--head);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: color-mix(in srgb, var(--on) 50%, transparent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .js .mp--5 b {
    font-size: 20px;
    color: color-mix(in srgb, var(--on) 72%, transparent);
  }
  .js .mp.mp--ch b {
    font-size: 15px;
    color: var(--acc-t);
  }
  .js .mp--10::before {
    top: -9px;
    height: 20px;
    background: var(--bg);
  }
  .js .mp--10 b {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on);
  }
  .js .mp.is-hid b {
    visibility: hidden;
  }
  .js .mp--now b {
    font-size: 38px;
    font-weight: 700;
    color: var(--acc-t);
  }
  .js .mp--now i {
    position: absolute;
    left: 12px;
    top: -18px;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acc-t);
    white-space: nowrap;
  }
  .js .lr__today {
    position: absolute;
    top: 15px;
    left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 4px rgba(180, 214, 47, 0.22);
    scroll-snap-align: center;
  }
  /* the trucks lane needs about 600px at full height, more than a docked screen
   * has after the sky and the road, so it takes a fixed share of the frame
   * (--trucks-h) and scrolls up and down inside the road; the sky keeps the rest
   * because a story panel cut off at its source line is worse than a short lane.
   * Being its own scroll container it would hold the make tags still, so site.js
   * part 12 carries them sideways through --sl instead of sticky. */
  .js .lr__trucks {
    margin: 0;
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--on) 25%, transparent) transparent;
    padding: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
  }
  .js .lr__trucks-in {
    width: auto;
    padding: 30px 0 22px;
    gap: 10px;
  }
  .js .lr-row__make {
    position: relative;
    left: auto;
  }
  .js .lr-ticks,
  .js .lr-cut--lane {
    display: none;
  }
  .js .lr-cut {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--pad) + var(--a) * var(--base) + var(--c) * var(--card) + var(--k) * var(--key));
    width: 2px;
    margin-left: -1px;
    background: var(--lime);
    z-index: 3;
    pointer-events: none;
  }
  .js .lr-cut span {
    position: absolute;
    top: 14px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--lime);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .js .lr__ctl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px var(--gutter);
    border-top: 1px solid var(--on-r);
    background: var(--sfc);
  }
  .js .lr__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--on) 28%, transparent);
    background: transparent;
    color: var(--on);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  }
  .js .lr__btn:hover,
  .js .lr__btn:focus-visible {
    border-color: var(--lime);
    background: rgba(180, 214, 47, 0.12);
  }
  .js .lr__btn span {
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(2px) rotate(45deg);
  }
  .js .lr__btn--next span {
    transform: translateX(-2px) rotate(-135deg);
  }
  .js .lr-scrub {
    position: relative;
    height: 40px;
    padding-right: 64px;
  }
  .js .lr-scrub__eras {
    position: absolute;
    left: 0;
    right: 64px;
    top: 26px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--on) 12%, transparent);
  }
  .js .lr-scrub__eras span {
    position: absolute;
    top: 0;
    height: 100%;
    border-left: 1px solid var(--sfc);
  }
  .js .lr-scrub__eras span:nth-child(odd) {
    background: color-mix(in srgb, var(--on) 10%, transparent);
  }
  .js .lr-scrub__eras .is-dec em {
    text-transform: none;
  }
  .js .lr-scrub__eras em {
    position: absolute;
    bottom: 10px;
    left: 4px;
    right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-m);
    white-space: nowrap;
  }
  .js .lr-scrub__eras .is-mark {
    width: 2px;
    margin-left: -1px;
    top: -4px;
    height: 12px;
    border: 0;
    background: var(--lime);
  }
  .js .lr-scrub__in {
    position: absolute;
    left: 0;
    right: 64px;
    top: 14px;
    width: calc(100% - 64px);
    height: 28px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .js .lr-scrub__in::-webkit-slider-runnable-track {
    height: 28px;
    background: transparent;
  }
  .js .lr-scrub__in::-moz-range-track {
    height: 28px;
    background: transparent;
  }
  .js .lr-scrub__in::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 14px;
    margin-top: 7px;
    border-radius: 7px;
    background: var(--lime);
    border: 0;
  }
  .js .lr-scrub__in::-moz-range-thumb {
    width: 34px;
    height: 14px;
    border-radius: 7px;
    background: var(--lime);
    border: 0;
  }
  .js .lr-scrub__in:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
  }
  .js .lr-scrub__yr {
    position: absolute;
    right: 0;
    top: 12px;
    width: 56px;
    text-align: right;
    font-family: var(--head);
    font-weight: 700;
    font-size: 20px;
    color: var(--acc-t);
    font-variant-numeric: tabular-nums;
  }
  .js .lr__key {
    padding-bottom: 28px;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .js .lr {
    --base: 26px;
    --card: calc(80vw + 12px);
    --key: calc(80vw + 12px);
    --gap: 12px;
    --pad: 16px;
    --snap-m: 16px;
    --road-h: 66px;
    --sky-min: 340px;
    --trucks-h: 17%;
    --lane-h: 10px;
  }
  /* on a phone a stop is a whole card at the left gutter with the next one
   * peeking, so only the cards snap and the road between them runs free */
  .js .lr__scroll {
    scroll-snap-type: x proximity;
  }
  .js .mp[data-stop],
  .js .lr__today {
    scroll-snap-align: none;
  }
  .js .lr-c {
    bottom: 16px;
    max-height: calc(100% - 32px);
  }
  .js .lr-c--key.has-art {
    top: 16px;
  }
  .js .lr-c::after {
    height: 16px;
  }
  .js .lr-c__in {
    padding: 16px 16px 18px;
  }
  .js .lr-c__h {
    font-size: 19px;
  }
  .js .lr-c--key .lr-c__h {
    font-size: 21px;
  }
  .js .lr-c__b p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
  }
  .js .lr-c__src {
    margin-top: 10px;
  }
  .js .lr-c__go {
    margin-top: 10px;
  }
  .js .lr-c--key .lr-c__yr {
    font-size: clamp(40px, 6vh, 64px);
  }
  .js .mp.mp--ch b {
    font-size: 13px;
  }
  .js .lr__line {
    top: 16px;
  }
  .js .mp {
    top: 16px;
  }
  .js .mp b {
    top: 12px;
    font-size: 0;
  }
  .js .mp--5 b {
    font-size: 15px;
  }
  .js .mp--10 b,
  .js .mp--now b {
    font-size: 26px;
  }
  .js .lr__today {
    top: 11px;
  }
  .js .lr-row__make {
    font-size: 9px;
    padding: 2px 6px 2px 4px;
  }
  .js .lr__trucks {
    padding: 8px 0 10px;
  }
  .js .lr__trucks-in {
    gap: 3px;
  }
  .js .lr__ctl {
    gap: 10px;
    padding: 8px 12px;
  }
  .js .lr__btn {
    width: 38px;
    height: 38px;
  }
  .js .lr-scrub__eras em {
    display: none;
  }
}

/* a county page the hero map cannot draw, linked under it (pages.mjs stateCounties) */
.smap__more {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--steel);
}

/* the home routes map's button to the county map (pages.mjs home) */
.hmap__btn {
  margin-top: 14px;
  align-self: flex-start;
}

/* the free guide form (layout.mjs door): the terms box, and the SMS option that
 * opens its phone field and consent on the tick, by CSS alone */
.sf__terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 16px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg);
  cursor: pointer;
}

.sf__terms input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--ink);
}

.sf__terms a {
  color: inherit;
}






/* ---- the nav, minimal (layout.mjs header, site.js part 1), 28 October late ----
 * Tyler: "our navigation is just going to be the logo, a search icon, and the
 * hamburger, always." This block is last on purpose and outranks the older header
 * rules above (the centred three part bar, its shrink on scroll and its link
 * rows), which no longer have markup to style. The bar is fixed, so main carries
 * the top padding and nothing shifts when it slides. Three grounds:
 *   white pages  white bar, light signature, ink icons
 *   over a hero  clear, dark signature, white icons (.top--over)
 *   solid        black with a hairline, dark signature (.is-solid once the hero
 *                has passed, and whenever a sheet is open)
 * The slide is translateY(-100%), 320ms on cubic-bezier(0.16, 1, 0.3, 1). */
:root {
  --top-h: 68px;
  --top-vis: 68px;
}

@media (max-width: 1179px) {
  :root {
    --top-h: 64px;
    --top-vis: 64px;
  }
}

@media (max-width: 699px) {
  :root {
    --top-h: 56px;
    --top-vis: 56px;
  }
}

header.top[data-top] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--top-h);
  --bar-bg: rgba(255, 255, 255, 0.97);
  --bar-fg: var(--ink);
  --bar-line: var(--rule);
  --bar-btn: color-mix(in srgb, var(--on) 22%, transparent);
}

header.top--over[data-top] {
  --bar-bg: transparent;
  --bar-fg: var(--on);
  --bar-line: transparent;
  --bar-btn: color-mix(in srgb, var(--on) 32%, transparent);
}

header.top--over.is-solid[data-top],
header.top.is-menu[data-top],
header.top.is-search[data-top] {
  --bar-bg: var(--sfc);
  --bar-fg: var(--on);
  --bar-line: color-mix(in srgb, var(--on) 12%, transparent);
  --bar-btn: color-mix(in srgb, var(--on) 28%, transparent);
}

header.top[data-top] .top__bar {
  height: var(--top-h);
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-line);
  box-shadow: none;
  color: var(--bar-fg);
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s linear, border-color 0.2s linear;
}

header.top.is-hidden[data-top]:not(.is-menu):not(.is-search) .top__bar {
  transform: translateY(-100%);
}

header.top[data-top] .top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  transform: none;
}

header.top[data-top] .brand {
  grid-column: auto;
  justify-self: auto;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo--sig {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.sig {
  display: block;
  flex: none;
}

header.top[data-top] .logo {
  transform: none;
}

header.top[data-top] .sig {
  height: 30px;
  width: calc(30px * 1642 / 292);
}

header.top[data-top] .sig--dark,
header.top--over[data-top] .sig--light,
header.top.is-menu[data-top] .sig--light,
header.top.is-search[data-top] .sig--light {
  display: none;
}

header.top--over[data-top] .sig--dark,
header.top.is-menu[data-top] .sig--dark,
header.top.is-search[data-top] .sig--dark {
  display: block;
}

.top__acts {
  display: flex;
  align-items: center;
  gap: 8px;
}

header.top[data-top] .top__search,
header.top[data-top] .menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bar-btn);
  border-radius: var(--r1);
  background: transparent;
  color: var(--bar-fg);
  cursor: pointer;
}

.si__x {
  display: none;
}

header.top.is-search[data-top] .si__glass {
  display: none;
}

header.top.is-search[data-top] .si__x {
  display: inline;
}

main {
  padding-top: var(--top-h);
}

.has-over main {
  padding-top: 0;
}

.has-over main > :first-child {
  margin-top: 0;
}

/* the two sheets, black, under the bar, which stays above them as their close */
div.menusheet,
div.searchsheet {
  display: none;
}

div.menusheet[data-open='true'],
div.searchsheet[data-open='true'] {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) 48px;
  background: var(--sfc);
  color: var(--on);
}

.sheet__spacer {
  height: var(--top-h);
}

.menusheet__in,
.searchsheet__in {
  max-width: var(--sheet);
  margin: 0 auto;
}

.searchsheet__in {
  max-width: 860px;
  padding-top: clamp(20px, 8vh, 96px);
}

.searchsheet__k {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc-t);
}

.searchsheet__hint {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--on-m);
}

div.menusheet .menusheet__search {
  margin: 20px 0 8px;
}

div.menusheet .menusheet__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

div.menusheet .menusheet__nav a.sheet__link {
  position: relative;
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on) 12%, transparent);
  color: var(--on);
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-decoration: none;
  background: none;
}

div.menusheet .menusheet__nav a.sheet__link--sub {
  padding: 12px 0 12px 16px;
  font-family: var(--text);
  font-weight: 500;
  font-size: clamp(17px, 2.4vw, 22px);
  letter-spacing: 0;
  color: var(--on-m);
  border-left: 3px solid var(--lime);
}

div.menusheet .menusheet__nav a.sheet__link[aria-current='page'] {
  color: var(--acc-t);
}

div.menusheet .menusheet__nav a.sheet__link[aria-current='page']:not(.sheet__link--sub) {
  border-left: 0;
  padding-left: 0;
  box-shadow: none;
}

.menusheet__sig {
  margin: 40px 0 0;
}

.menusheet__sig .sig {
  height: 34px;
  width: calc(34px * 1642 / 292);
}

/* the footer signature, large */
.logo--foot .sig {
  height: 48px;
  width: calc(48px * 1642 / 292);
}

@media (min-width: 900px) {
  /* a desk: the links in two columns, a lime underline that draws on hover */
  div.menusheet .menusheet__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
  }
  div.menusheet .menusheet__nav a.sheet__link:not(.sheet__link--sub)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  div.menusheet .menusheet__nav a.sheet__link:hover::after,
  div.menusheet .menusheet__nav a.sheet__link:focus-visible::after {
    transform: scaleX(1);
  }
}

@media (max-width: 699px) {
  header.top[data-top] .sig {
    height: 22px;
    width: calc(22px * 1642 / 292);
  }
  header.top[data-top] .top__search,
  header.top[data-top] .menu-btn {
    width: 40px;
    height: 40px;
  }
  .logo--foot .sig {
    height: 36px;
    width: calc(36px * 1642 / 292);
  }
}

@media (prefers-reduced-motion: reduce) {
  header.top[data-top] .top__bar {
    transition: none;
  }
  div.menusheet .menusheet__nav a.sheet__link::after {
    transition: none;
  }
}

/* neonburro's rail from 768 up (see --gutter at the top) */
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}

/* the desk signature a little larger, Tyler 28 October late, about 36px */
@media (min-width: 700px) {
  header.top[data-top] .sig {
    height: 36px;
    width: calc(36px * 1642 / 292);
  }
}

/* ---- the makers' marks (pages.mjs home) ----
 * one colour, no boxes, the same optical height, eight across on a desk and two
 * rows of four on a phone, 70 percent at rest and full on hover, never lime. A
 * logo file is painted as a mask in currentColor so its own colours never show. */
.mlogos {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: 24px clamp(16px, 3vw, 48px);
  margin: 8px 0 0;
}

.mlogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  color: var(--fg);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.2s linear;
}

.mlogo:hover,
.mlogo:focus-visible {
  opacity: 1;
}

.mlogo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.mlogo__mark,
.mlogo__img {
  display: block;
  width: 100%;
  height: var(--mh, 36px);
  object-fit: contain;
}

/* the name in text always stands with the logo (Ion's legal note), small under it */
.mlogo__name--with {
  font-family: var(--text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.mlogo__mark {
  background: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}

.mlogo__name {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.band--black .mlogo,
.band--ink .mlogo {
  color: #cfd9c8;
}

.mlogos__tm {
  margin: 18px auto 0;
  max-width: 40em;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--steel);
}

.fam__ph {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r1);
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .mlogos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 14px;
  }
  .mlogo {
    height: 52px;
  }
  .mlogo__name {
    font-size: 16px;
  }
}

/* ---- the free guide (layout.mjs guideBanner, guideDialog, guideForm) ----
 * a slim strip, not a band: one line and the lime button, on paper under the
 * home hero and above every footer. The dialog is native, small, white, with an X */
.btn--lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.btn--lime:hover,
.btn--lime:focus-visible {
  background: var(--lime-2);
  border-color: var(--lime-2);
  color: var(--ink);
}

.gband {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.gband__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.gband__t {
  margin: 0;
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
}

.gdialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r3);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 24px 64px rgba(13, 36, 25, 0.35);
}

.gdialog::backdrop {
  background: rgba(13, 36, 25, 0.62);
}

.gdialog__in {
  position: relative;
  padding: 26px 24px 24px;
}

.gdialog__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

.gdialog .h3 {
  margin: 8px 0 0;
}

.gdialog__sub {
  margin: 8px 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel);
}

.gform .field {
  margin-bottom: 12px;
}

.gform .btn {
  width: 100%;
  justify-content: center;
}

.gdialog__done p {
  color: var(--steel);
}

.sf__guide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}

.sf__guide input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--ink);
}

.field__opt {
  font-weight: 400;
  color: var(--steel);
  font-size: 13px;
}

@media (max-width: 560px) {
  .gband__in {
    flex-direction: column;
    align-items: flex-start;
  }
}

.foot__tm {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--on-m);
}

/* the guide's copy and its one quiet price line (layout.mjs guideForm, PRICE_TEXT) */
.gband__txt {
  display: grid;
  gap: 2px;
}

.gband__s {
  margin: 0;
  font-size: 14px;
  color: var(--steel);
}

.gdialog__body {
  margin: -8px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
}

.gform .sf__about {
  margin: 4px 0 4px;
}

.gform__price {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

.gform__price a {
  color: inherit;
}

.ntf__price {
  margin: 0 0 12px;
  font-family: var(--head);
  font-size: 28px;
  color: var(--fg);
}

/* a county page whose finding rests on state law says so (pages.mjs countyPage) */
.cbasis {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--steel);
}

/* the guide's optional notices box, quieter than the required one, and the money
 * line under the report's button (layout.mjs GUIDE_BOXES, reportForm) */
.sf__guide--quiet {
  margin: -6px 0 14px;
  font-weight: 400;
  font-size: 14.5px;
}

.gform__terms {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}

/* the wordmark, the site's name in tracked capitals in the header and the menu
 * until a real logo comes (layout.mjs wordmark, site.json name) */
.wordmark {
  display: inline-block;
  font-family: var(--head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}

header.top[data-top] .brand {
  color: var(--bar-fg);
  text-decoration: none;
}

.menusheet__sig .wordmark {
  font-size: 24px;
  color: var(--on);
}

@media (max-width: 699px) {
  .wordmark {
    font-size: 15px;
  }
}

/* ---------- the dark theme, 29 October (docs/FAMILY.md) ----------
 * Tyler: "I like clean. I like contrast, so I like dark and light themes." The
 * page follows the visitor's system setting and the switch in the footer
 * (theme.js) can hold either one. The black bands, the hero, the footer and the
 * sheets are black in both themes; only the light bands turn. Type stays near
 * white on near black, body text over 7 to 1 and labels over 4.5 to 1. The
 * values are written twice, once for the switch and once for the system
 * setting, because CSS has no other way to say "dark unless told light". If one
 * moves, move the other. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b0d0c;
  --fg: #f2f4f0;
  --paper: #141716;
  --rule: #2a2f2c;
  --steel: #a3aba6;
  --sfc: #0b0d0c;
  --acc-t: #a8bf46;
  --sfc-2: #141716;
  --on: #f2f4f0;
  --on-m: #a3aba6;
  --on-r: #2a2f2c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0b0d0c;
    --fg: #f2f4f0;
    --paper: #141716;
    --rule: #2a2f2c;
    --steel: #a3aba6;
    --sfc: #0b0d0c;
    --acc-t: #a8bf46;
    --sfc-2: #141716;
    --on: #f2f4f0;
    --on-m: #a3aba6;
    --on-r: #2a2f2c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

/* the theme switch, three quiet words in the footer note */
.themesw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  font: 500 13px/1 var(--text);
  color: var(--on-m);
}
.themesw__k {
  margin-right: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}
.themesw button {
  font: inherit;
  color: var(--on-m);
  background: none;
  border: 1px solid var(--on-r);
  border-radius: var(--r1);
  padding: 7px 11px;
  cursor: pointer;
}
.themesw button[aria-pressed='true'] {
  color: var(--on);
  border-color: var(--lime);
}
.themesw button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* a form that is not open yet (layout.mjs SOON), Warbleur's review of 29 October:
 * no mail can be sent tonight, so the free guide and the report say they open
 * soon and point to the state pages. Quiet, the page's own ground and ink. */
.gsoon {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.gsoon p {
  margin: 0;
}
.gsoon__t {
  font: 600 20px/1.3 var(--head);
  color: var(--fg);
}

/* ---------- THE FLAT PASS, 29 October (Tyler's design rules) ----------
 * Tyler, word for word: "I don't like containers behind product images. I don't
 * like text in containers. I like to go wide on desktop ... good margins and always
 * mobile-enhanced." So, on every page of the guide:
 *   a truck render sits straight on the page ground: no tile, panel, rounded box or
 *   tinted square behind it (.truck, .truck__img, .fin__img, .mini);
 *   text is grouped by type, spacing and a hairline, never a card, a filled panel or
 *   a bordered box (.card, .source and the rest below). Full bleed bands that change
 *   the page ground stay, they are not containers;
 *   forms are the one exception and sit on white with light accents in both themes
 *   (Tyler's standing rule, forms are clean and white): .plate keeps the light
 *   tokens even in dark;
 *   the sheet is the studio's, 1680 wide and left aligned, never centred, with the
 *   20 and 40 gutters it already had. Reading text keeps its own measure.
 * The hairline takes the colour of the text around it, so it reads on a white band
 * and on a black one alike. This block overrides the rules above on purpose; to
 * undo the pass, delete it. Lyra's colours and faces land after this. */
.sheet {
  margin-left: 0;
  margin-right: 0;
}
.truck,
.band--paper .truck,
.truck__img,
.fin__img,
.mini,
.band--paper .mini,
.band:not(.band--paper) .makecard,
.makecard,
.hero__photo,
.split__media {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.truck__img,
.fin__img {
  padding-left: 0;
  padding-right: 0;
}
.card,
.band:not(.band--paper):not(.band--ink) .card,
.band--ink .card,
.factcard,
.band:not(.band--paper) .figcard,
.figcard,
.usecard,
.cpanel,
.stc,
.lane-panel,
.srcs,
.ocard,
.band:not(.band--paper).own .ocard,
.source,
.mapcard,
.hmap__county {
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.plate {
  --bg: #ffffff;
  --fg: #0d2419;
  --paper: #ffffff;
  --rule: #cfd9c8;
  --steel: #4c6052;
  color-scheme: light;
  background: #ffffff;
  color: #0d2419;
}

/* the top bar on an inner page, dark theme: its own tokens (--bar-*) never turned
 * with the page, so it stayed white on a black page. The clear bar over the home
 * hero (.top--over) is left alone; once solid it is already night. */
:root[data-theme='dark'] header.top[data-top]:not(.top--over) {
  --bar-bg: rgba(11, 13, 12, 0.97);
  --bar-fg: var(--on);
  --bar-line: var(--on-r);
  --bar-btn: color-mix(in srgb, var(--on) 22%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) header.top[data-top]:not(.top--over) {
    --bar-bg: rgba(11, 13, 12, 0.97);
    --bar-fg: var(--on);
    --bar-line: var(--on-r);
    --bar-btn: color-mix(in srgb, var(--on) 22%, transparent);
  }
}

/* Lyra's slogan above the guide's title, quiet, the accent text on the dark band */
.hero3__slogan {
  margin: 0 0 14px;
  font: 600 13px/1.3 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-2);
}

/* ---------- the news (news.mjs), text only ----------
 * No cards and no boxes: a post is a date, a title and a line, parted by a
 * hairline; a post page reads at the house measure with its sources numbered. */
.news {
  padding: calc(var(--top-h) + clamp(28px, 4vw, 56px)) 0 clamp(48px, 6vw, 88px);
}
.news__list {
  max-width: 900px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.news__list > li {
  padding: 20px 0 22px;
  border-top: 1px solid var(--rule);
}
.news__meta {
  margin: 0 0 6px;
  font: 600 12px/1.4 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.news__t {
  margin: 0;
  font: 700 clamp(20px, 2.2vw, 28px) / 1.2 var(--head);
}
.news__t a {
  color: var(--fg);
  text-decoration: none;
}
.news__t a:hover {
  text-decoration: underline;
}
.news__dek,
.news__on {
  margin: 8px 0 0;
  max-width: 40em;
  color: var(--steel);
}
.news__note,
.news__read {
  max-width: 40em;
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--steel);
}
.news__h {
  max-width: 22em;
}
.news__body {
  max-width: 40em;
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.65;
}
.news__body sup a,
.news__src a {
  color: var(--fg);
}
.news__sh {
  margin: 40px 0 10px;
  font: 700 20px/1.2 var(--head);
}
.news__src {
  max-width: 48em;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
}
.news__src li {
  margin: 0 0 8px;
}
.news__back {
  margin-top: 28px;
  font-weight: 600;
}
.news__list--short {
  margin-top: 8px;
}
.news__list--short > li {
  padding: 12px 0;
}
.news-county {
  margin: 0;
  line-height: 1.8;
}
.news-county .label {
  margin-right: 10px;
}

/* ---------- THE RICH HOME, 30 October (pages.mjs home) ----------
 * Tyler: "I want every section to be very rich ... Mini Truck Guide will get better
 * and better." Nine full bands on the 1680 sheet, generous, each its own ground in
 * turn (light, white, deep green), no containers anywhere: steps, factors and checks
 * are type and hairlines, a truck crop sits straight on the band. Each band ends
 * with one short link (.hend). The dark bands (.band--ink) take white type and the
 * lime olive accent text; the light ones the theme's ink. */
.hsec {
  padding: clamp(64px, 8vw, 128px) 0;
}
.hsec__head {
  max-width: 760px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.hsec__head .h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.hsec__head .lede {
  max-width: 660px;
}
.hend {
  margin: clamp(28px, 3vw, 40px) 0 0;
  font-weight: 600;
}
.band--ink .hsec__head .lede,
.band--ink .hend .arrow {
  color: var(--on);
}
.hroad .lanebox {
  max-width: 1400px;
}
/* the six buying steps: big numerals, three across on a desk */
.hsteps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--fg);
}
@media (min-width: 760px) {
  .hsteps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }
}
@media (min-width: 1100px) {
  .hsteps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 56px;
  }
}
.hstep {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.hstep__n {
  display: block;
  margin-bottom: 14px;
  font: 700 clamp(40px, 4vw, 64px) / 1 var(--head);
  letter-spacing: -0.03em;
  color: var(--acc-t);
}
.hstep .h3 {
  margin: 0 0 8px;
}
.hstep p {
  max-width: 34em;
  margin: 0 0 12px;
  color: var(--steel);
}
/* the fair deal factors, rows parted by a rule, beside the heading on a desk */
.hsplit {
  display: grid;
  gap: 32px;
}
@media (min-width: 1100px) {
  .hsplit {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: start;
  }
  .hsplit--pic {
    align-items: center;
  }
}
.hfactors {
  margin: 0;
  border-top: 2px solid var(--fg);
}
.hfactors > div {
  display: grid;
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .hfactors > div {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}
.hfactors dt {
  font: 700 19px/1.3 var(--head);
}
.hfactors dd {
  margin: 0;
  color: var(--steel);
}
/* quality: each check beside a crop of a catalog render, straight on the band */
.hquality {
  display: grid;
  gap: 40px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .hquality {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .hquality {
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
  }
}
.hquality li {
  display: grid;
  gap: 14px;
  align-content: start;
}
.qcrop {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.qcrop img {
  position: absolute;
  max-width: none;
  height: auto;
}
.hquality .h3 {
  margin: 0 0 6px;
  padding-top: 14px;
  border-top: 2px solid var(--lime);
}
.hquality p {
  margin: 0;
  color: var(--steel);
}
/* the makers as big type */
.hmakers {
  display: grid;
  gap: 0;
  margin-bottom: 40px;
  border-top: 2px solid var(--fg);
}
@media (min-width: 700px) {
  .hmakers {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }
}
@media (min-width: 1100px) {
  .hmakers {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hmk {
  display: grid;
  gap: 4px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
}
.hmk__m {
  font: 700 clamp(32px, 3.4vw, 52px) / 1 var(--head);
  letter-spacing: -0.03em;
}
.hmk:hover .hmk__m {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
.hmk__n {
  font-weight: 600;
}
.hmk__l {
  font-size: 14px;
  color: var(--steel);
}
/* upgrades, the picture straight on the band */
.hup__pic {
  margin: 0;
}
.hup__pic img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}
.hnews {
  max-width: 1100px;
}
/* the book, its cover drawn in Mini Truck Roadbook's own colours until Lyra's lands */
.hbook__cover {
  display: grid;
  align-content: space-between;
  width: min(100%, 340px);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  padding: 28px 26px;
  border-radius: 6px 14px 14px 6px;
  background: #211811;
  color: #fff5e5;
  box-shadow: inset 10px 0 0 rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.45);
}
.hbook__top {
  font: 700 15px/1 var(--head);
}
.hbook__t {
  font: 700 clamp(30px, 3.4vw, 42px) / 1.04 var(--head);
  letter-spacing: -0.02em;
}
.hbook__ed {
  padding-top: 14px;
  border-top: 4px solid #f18a64;
  font-size: 13px;
  color: #d5c2ab;
}

/* ---------- the logo, Lyra's transparent v14, 29 October ----------
 * layout.mjs wordmark() puts both tones in the page and the theme picks one: the
 * dark ink logo-light on the white surfaces of the light theme, the light ink
 * logo-dark on the near black of the dark one. Since no surface stays dark in the
 * light theme (--sfc above), the bar, the sheets and the footer all follow it. 36px
 * tall on a desk and 28 on a phone, scaled by height (the coordinator, 29 October);
 * each lockup is cut to what it draws (shelf.mjs), so the height is the drawing's. */
.lgo {
  display: inline-flex;
  align-items: center;
}
.lgo img {
  display: block;
  height: 36px;
  width: auto;
}
/* scoped as .lgo .lgo__l, to outrank ".lgo img" just above */
.lgo .lgo__l {
  display: block;
}
.lgo .lgo__d {
  display: none;
}
:root[data-theme='dark'] .lgo .lgo__l {
  display: none;
}
:root[data-theme='dark'] .lgo .lgo__d {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .lgo .lgo__l {
    display: none;
  }
  :root:not([data-theme='light']) .lgo .lgo__d {
    display: block;
  }
}
.menusheet__sig .lgo img {
  height: 44px;
}
.foot .lgo img {
  height: 40px;
}
@media (max-width: 699px) {
  .lgo img {
    height: 28px;
  }
  .foot .lgo img {
    height: 34px;
  }
}

/* the book band with Mini Truck Roadbook's real cover (pages.mjs home): the
 * picture alone, no drawn ground, no frame, its own proportion */
.hbook__cover--art {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hbook__cover--art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- THE HOME, CLEAN, 29 October (pages.mjs home) ----------
 * Tyler: "I don't like the green background. We got to clean this up." Every band
 * reads the surface tokens at the top of this file, so the light theme is white and
 * a near white paper in turn and the dark theme near black and its panel, never
 * green. In order: the hero on white, the road map on paper, the six steps on white,
 * the five checks on paper, the makers on white in both themes (their own logos,
 * some black, are never recoloured), the fair deal on paper, upgrades on white, news
 * on paper, the book on white and contact on paper. One spacing between bands, one
 * rule weight (1px: lime olive where a list starts, the theme's rule between rows),
 * and headings balanced so no line ends on one word. */
.hsec,
.hdoor {
  padding: clamp(64px, 7vw, 112px) 0;
}
.hsec {
  background: var(--sfc);
}
.hsec--p {
  background: var(--sfc-2);
}
.hsec .h2,
.hsec .h3,
.hero3__h,
.hfactors dt {
  text-wrap: balance;
}
.hsec__head .label {
  color: var(--on-m);
}
.hsteps,
.hfactors,
.hmakers {
  border-top: 1px solid var(--lime);
}
.hstep,
.hfactors > div,
.hmk {
  border-bottom: 1px solid var(--rule);
}
/* the numerals: lime olive on the near black; on white the lime reads 2.1 to 1, so
 * the light theme draws them in Lyra's accent text for light grounds (#3c5915, 8.1
 * to 1, src/data/sites/guide.json theme.light.accent_text) */
.hstep__n {
  color: #3c5915;
}
:root[data-theme='dark'] .hstep__n {
  color: var(--acc-t);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hstep__n {
    color: var(--acc-t);
  }
}
/* the hero's search on white: a hairline and a soft shadow, not the old black one */
.hero3 .search__bar {
  box-shadow: 0 0 0 1px var(--on-r), 0 14px 36px rgba(23, 41, 31, 0.1);
}
.hero3 .search__bar:focus-within {
  box-shadow: 0 0 0 4px var(--lime), 0 14px 36px rgba(23, 41, 31, 0.1);
}
/* popular, plain links parted by the rounded square, the squares muted grey */
.hero3__pop {
  display: block;
  margin: 22px 0 0;
  text-align: center;
  font: 500 14px/2 var(--text);
  color: var(--on-m);
}
.hero3__poph {
  margin-right: 12px;
  font: 600 11px/1 var(--text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-m);
}
.poplink {
  color: var(--on);
  text-decoration: none;
  white-space: nowrap;
}
.poplink:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero3__pop .sq,
.fams__row .sq {
  background: currentColor;
  opacity: 0.45;
}
/* +114 generations beside the faces, a text link and not a pill */
.av__more {
  margin-left: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--on);
  font: 600 13px/1 var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--on-r);
}
.av__more:hover {
  color: var(--on);
  text-decoration-color: currentColor;
}
/* the five checks: one truck, one scale, 4 to 3, straight on the band */
.hquality {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}
.hquality li {
  gap: 16px;
}
.qpic {
  margin: 0;
}
.qpic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.hquality .h3 {
  padding-top: 14px;
  border-top: 1px solid var(--lime);
}
@media (max-width: 1099px) {
  .hquality {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 40%);
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    scrollbar-width: thin;
  }
  .hquality li {
    scroll-snap-align: start;
  }
}
@media (max-width: 599px) {
  .hquality {
    grid-auto-columns: 78%;
  }
}
/* the makers on white in both themes, with their own logos */
.hmakes {
  --sfc: #ffffff;
  --acc-t: #3c5915;
  --on: #17291f;
  --on-m: #4c6052;
  --on-r: #d9ded6;
  --bg: #ffffff;
  --fg: #17291f;
  --rule: #d9ded6;
  --steel: #4c6052;
  background: #ffffff;
  color: #17291f;
}
.hmk {
  gap: 6px;
  padding: 26px 0 28px;
}
.hmk__logo {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 12px;
}
.hmk__logo img {
  display: block;
  height: calc(var(--lh) * 1px);
  width: auto;
}
.hmk__m {
  font-size: clamp(24px, 2.1vw, 32px);
}
@media (max-width: 699px) {
  .hmk__logo {
    height: 36px;
  }
  .hmk__logo img {
    height: calc(var(--lh) * 0.8px);
  }
}
/* the engines, plain text parted by the rounded square: the code in mono, the maker
 * muted beside it, left on the sheet like every other row */
.hmakes .fams {
  display: block;
  margin-top: 40px;
}
.hmakes .fams .label {
  margin: 0 0 10px;
}
.fams__row {
  display: block;
  font: 400 15px/2 var(--text);
  color: var(--steel);
}
.fams .fam,
.fams .fam:hover {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  white-space: nowrap;
  color: var(--fg);
  text-decoration: none;
}
.fams .fam b {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
}
.fams .fam span {
  color: var(--steel);
}
.fams .fam:hover b {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hmakes .mlogos__tm {
  margin: 18px 0 0;
  text-align: left;
  font-size: 13px;
  color: var(--steel);
}
/* Lyra's slogan over the title: lime olive on the near black, her light ground
 * accent text on white, where lime would read 2.1 to 1 */
.hero3__slogan {
  color: #3c5915;
}
:root[data-theme='dark'] .hero3__slogan {
  color: var(--acc-t);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero3__slogan {
    color: var(--acc-t);
  }
}
/* the makers two across on a phone, so eight are four rows and not eight */
@media (max-width: 699px) {
  .hmakers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}
/* the footer on the panel, closing the page */
.foot {
  background: var(--sfc-2);
  border-top: 1px solid var(--on-r);
}

/* ---------- no text in containers, 29 October ----------
 * Tyler through the coordinator: "no text in containers, and a visible list is
 * parted by small rounded squares, never commas or boxes." Every row of chips on
 * the guide is plain text links parted by the house's rounded square (pages.mjs SQ,
 * .sq near the top of this file), the square muted grey and never lime: the make
 * list on the trucks page, the areas on a state and a county page and the areas
 * index, a Tailgate post's links, the Tailgate's categories and the state
 * directory's filters. A filter is still a button, its pressed state a thin lime
 * rule under the word. Real form controls (inputs, selects, the contact form's
 * boxes and the theme switch) keep their own shape. */
.chips,
.tg-post__chips,
.tg__cats {
  display: block;
  font: 500 15px/2 var(--text);
  color: var(--steel);
}
.chips .sq,
.tg-post__chips .sq,
.tg__cats .sq,
.dir-tools .sq,
.newsstrip .sq {
  background: currentColor;
  opacity: 0.45;
}
.chips .chip,
.tg-post__chips .chip,
.band--ink .chip {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  white-space: nowrap;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}
.chips a.chip:hover,
.tg-post__chips a.chip:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.chips .chip--quiet {
  color: var(--steel);
}
/* factory colours: the colour square leads each name, no box around it */
.chips span.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  white-space: nowrap;
}
.tg__cat {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 600;
  color: var(--on);
}
.tg__tag {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-weight: 700;
}
.newsstrip__k {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-weight: 700;
}
.lanechip,
.band--black .lanechip:not(.lanechip--on),
.band--ink .lanechip:not(.lanechip--on) {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--on-m);
}
.lanechip--on {
  padding: 0 0 2px;
  border: 0;
  background: none;
  color: var(--on);
  box-shadow: inset 0 -2px 0 var(--lime);
}
.dir-tools {
  gap: 4px 10px;
}
.dir-tools button.pill {
  min-height: 38px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--steel);
}
.dir-tools button.pill[aria-pressed='true'] {
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--lime);
}
.rmap__chip,
.rmap__chip[aria-pressed='true'] {
  min-height: 38px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
}
/* the state cards in the directory and on a region: a row on a hairline, no box */
.stc,
.stc:hover {
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none;
}
.stc:hover .stc__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hmakes .fams .label {
  text-align: left;
}

/* the Colorado news row on its state page (pages.mjs statePage): a plain row on the
 * page ground with a thin lime rule under it, never a lime band (the coordinator,
 * 29 October, the no green and no lime grounds rule) */
.newsstrip {
  justify-content: flex-start;
  text-align: left;
  padding: 12px var(--gutter);
  background: none;
  color: var(--fg);
  font-weight: 500;
  border-bottom: 1px solid var(--lime);
}
@media (min-width: 768px) {
  .newsstrip {
    padding-left: max(var(--gutter), calc((100vw - var(--sheet)) / 2 + var(--gutter)));
  }
}
.newsstrip .newsstrip__k {
  font: 600 12px/1 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-t);
}
.newsstrip:hover .newsstrip__t {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hend--two {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
/* the long book link keeps its chevron at the end of its last line */
.hend--two a.arrow:first-child {
  display: block;
  max-width: 34em;
}
.hend--two a.arrow:first-child::after {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 0.1em;
}

/* Upgrades in <State>, Ion's block from the book (pages.mjs stateUpgrades), read at
 * the house measure */
.upg p {
  max-width: 660px;
  margin: 0 0 14px;
  line-height: 1.6;
}
.upg b {
  font-weight: 700;
}
.upg__law {
  white-space: nowrap;
}

/* ---- the meadow plate under the home hero, Lyra's v20 (pages.mjs meadowPlate) ----
 * One wide picture at its true exposure, daylight in the light theme and blue
 * hour in the dark, never dimmed and never under text. Wide on a desk, closer
 * on a phone so the truck stays the subject. */
.hplate {
  margin: 0;
  background: var(--sfc);
  line-height: 0;
}
.hplate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-height: 760px;
  object-fit: cover;
  object-position: 50% 94%;
}
.hplate__dusk {
  display: none !important;
}
:root[data-theme='dark'] .hplate__day {
  display: none !important;
}
:root[data-theme='dark'] .hplate__dusk {
  display: block !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hplate__day {
    display: none !important;
  }
  :root:not([data-theme='light']) .hplate__dusk {
    display: block !important;
  }
}
@media (max-width: 760px) {
  .hplate img {
    aspect-ratio: 4 / 3;
    object-position: 62% 80%;
  }
}

/* ---- the county finder, the home's second band (pages.mjs countyFinder) ----
 * Every county as one quiet picture, a grey mask the theme colours, so one file
 * serves both themes. On a desk the map fills the right and the directory sits
 * on the left in a panel; on a phone the map is a short strip above it. */
.hfind {
  position: relative;
  overflow: hidden;
  background: var(--sfc);
  padding: clamp(56px, 7vw, 104px) 0;
  border-top: 1px solid var(--rule);
}
.hfind__map {
  position: absolute;
  top: 50%;
  right: -4%;
  width: min(68%, 1080px);
  aspect-ratio: 975 / 610;
  transform: translateY(-50%);
  background: var(--steel);
  opacity: 0.55;
  -webkit-mask: url('/img/county-mask-1600.png') center / contain no-repeat;
  mask: url('/img/county-mask-1600.png') center / contain no-repeat;
  pointer-events: none;
}
.hfind__in {
  position: relative;
  display: grid;
  gap: 28px;
  max-width: var(--sheet);
}
.hfind__head {
  max-width: 440px;
}
.hfind__head .h2 {
  margin: 10px 0 12px;
}
.hfind__form {
  width: min(100%, 460px);
  padding: 24px 24px 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2, 14px);
  box-shadow: var(--shadow);
}
.hfind__form select:disabled,
.hfind__form input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hfind__where {
  min-height: 1.4em;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--fg);
}
.hfind__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.hfind__acts .btn {
  min-height: 48px;
}
.hfind__loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: 600 15px/1 var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--acc-t, currentColor);
  cursor: pointer;
}
.hfind__loc:disabled {
  opacity: 0.55;
  cursor: progress;
}
@media (max-width: 860px) {
  .hfind {
    padding-top: 28px;
  }
  .hfind__map {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0 auto 8px;
    transform: none;
    -webkit-mask-image: url('/img/county-mask-1000.png');
    mask-image: url('/img/county-mask-1000.png');
  }
  .hfind__form {
    padding: 20px 18px 16px;
  }
}