/* LA Wooden Spools: the dispatch office's wall map.
   Concrete grey-blue ground, asphalt frame, freeways in strap yellow, lanes in interstate blue. */

@font-face { font-family: 'Saira Semi Condensed'; src: url('/fonts/saira-semi-condensed-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Saira Semi Condensed'; src: url('/fonts/saira-semi-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Saira Semi Condensed'; src: url('/fonts/saira-semi-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }


:root {
  /* The design section's palette */
  --bg: #c3ccd4;          /* concrete grey-blue ground */
  --surface: #e8ecef;     /* map paper */
  --text: #12161b;
  --muted: #38424d;
  --accent: #23408e;      /* interstate blue */
  --on-accent: #ffffff;
  /* Drawing colours */
  --accent-deep: #1a3170;
  --asphalt: #1d2229;
  --asphalt-2: #2a313b;
  --strap: #f0b81c;       /* ratchet strap and freeway yellow */
  --strap-deep: #b98a0c;
  --sign: #1e6a47;        /* overhead guide sign green */
  --shield-red: #b8322a;
  --sea: #b4c2cf;
  --land: #e1e6ea;
  --tint: #d6dde3;
  --rule: #a9b4be;
  --rule-strong: #6f7b87;
  --error: #9b1c1c;
  --head: 'Saira Semi Condensed', 'Arial Narrow', sans-serif;
  --body: 'Work Sans', system-ui, sans-serif;
  /* 1.25 type scale */
  --s-1: 0.8rem; --s0: 1rem; --s1: 1.25rem; --s2: 1.563rem; --s3: 1.953rem; --s4: 2.441rem; --s5: 3.052rem; --s6: 3.815rem;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --head-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.08; margin: 0 0 0.6em; letter-spacing: 0; }
h1 { font-size: clamp(var(--s4), 5.4vw, var(--s6)); font-weight: 700; }
h2 { font-size: clamp(var(--s2), 3.2vw, var(--s4)); font-weight: 700; }
h3 { font-size: var(--s1); font-weight: 600; }
p, ul, ol, table, dl { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 24px; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 60; background: var(--surface); padding: 0.5rem 1rem; }
.lead { font-size: var(--s1); line-height: 1.5; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--s-1); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ratchet strap line: the yellow tie-down across a loaded deck, with its ratchet */
hr.strap, .strap-rule { border: 0; height: 8px; margin: 0; background: var(--strap); position: relative; border-top: 2px solid var(--strap-deep); border-bottom: 2px solid var(--strap-deep); overflow: visible; }
hr.strap::after, .strap-rule::after { content: ''; position: absolute; left: clamp(16px, 12%, 180px); top: -6px; width: 34px; height: 16px; border: 3px solid var(--asphalt); background: var(--bg); }

/* Buttons: square, sign-like */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--head); font-weight: 600; font-size: var(--s1); line-height: 1; padding: 0.8rem 1.3rem; border-radius: 0; border: 2px solid var(--accent); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.btn-cta { background: var(--accent); color: var(--on-accent); }
.btn-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
.btn-line { background: transparent; color: var(--accent); }
.btn-line:hover { background: var(--accent); color: var(--on-accent); }
.btn-strap { background: var(--strap); border-color: var(--asphalt); color: var(--asphalt); }
.btn-strap:hover { background: #f6c845; color: var(--asphalt); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: ' \2192'; display: inline-block; transition: transform .15s; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Compact header: wordmark, Menu, quote button, on every screen size */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--asphalt); color: #fff; border-bottom: 4px solid var(--strap); }
.topbar-row { display: flex; align-items: center; gap: 0.6rem; min-height: var(--head-h); }
.wordmark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; margin-right: auto; min-width: 0; }
.wordmark:hover { color: #fff; }
.wordmark img { width: 36px; height: 36px; flex: none; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.wm-a { font-family: var(--head); font-weight: 700; font-size: 1.22rem; white-space: nowrap; }
.wm-b { font-size: 0.74rem; color: #b9c3cc; margin-top: 0.22rem; white-space: nowrap; }
@media (max-width: 479px) {
  .wm-b { display: none; } .wm-a { font-size: 1rem; } .wordmark { gap: 0.45rem; } .wordmark img { width: 32px; height: 32px; }
  .topbar-row { gap: 0.4rem; } .menu > summary { padding: 0.35rem 0.55rem; font-size: 1rem; gap: 0.4rem; } .head-cta { padding: 0.5rem 0.65rem; }
}
.menu { position: static; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 1.05rem; color: #fff; border: 2px solid #5b6672; padding: 0.42rem 0.8rem; min-height: 42px; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: #fff; }
.menu-bars { display: inline-block; width: 18px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-bars::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid var(--strap); }
.menu[open] .menu-bars { border-color: transparent; }
.menu[open] .menu-bars::before, .menu[open] .menu-bars::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; transform: rotate(45deg); }
.menu[open] .menu-bars::after { transform: rotate(-45deg); border-color: currentColor; }
.menu-label-open { display: none; }
.menu[open] .menu-label-open { display: inline; }
.menu[open] .menu-label-closed { display: none; }
.head-cta { font-size: 1rem; padding: 0.55rem 0.9rem; min-height: 42px; white-space: nowrap; }
@media (max-width: 479px) { .head-cta .hc-long { display: none; } }
@media (min-width: 480px) { .head-cta .hc-short { display: none; } }

/* The full menu panel, laid out like a map book's index page */
.menu-panel { position: fixed; left: 0; right: 0; top: calc(var(--head-h) + 4px); bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface) url('/img/sheet-grid.svg'); color: var(--text); border-top: 0; animation: panel-in .18s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mp-grid { display: grid; gap: 1.75rem 2rem; padding-top: 1.5rem; padding-bottom: 3rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mp-grid { grid-template-columns: repeat(4, 1fr); } .mp-areas { grid-column: span 2; grid-row: span 2; } .mp-lanes { grid-row: span 2; } }
.mp-hub h2 { font-size: var(--s2); margin: 0 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 3px solid var(--asphalt); display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.mp-hub h2 a { color: var(--text); text-decoration: none; }
.mp-hub h2 a:hover { color: var(--accent); }
.mp-hub h2 .mp-ref { font-family: var(--head); font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.mp-hub ul { list-style: none; margin: 0; padding: 0; }
.mp-hub li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0; color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--rule-strong); }
.mp-hub li a:hover { color: var(--accent); }
.mp-hub li a .mp-sq { margin-left: auto; font-family: var(--head); font-weight: 600; color: var(--muted); font-size: 0.9rem; }
.mp-counties { display: grid; gap: 0.25rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mp-counties { grid-template-columns: 1fr 1fr; } }
.mp-county { margin: 0.6rem 0 0.2rem; font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.mp-county a { color: var(--text); }
.mp-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; border-top: 3px solid var(--asphalt); padding-top: 1rem; }
body.menu-open { overflow: hidden; }

/* Breadcrumbs */
.crumbs { position: relative; z-index: 1; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin: 0 auto; padding-top: 0.9rem; padding-bottom: 0; font-size: var(--s-1); color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--rule-strong); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

/* Map-sheet head on every inner page: the grid ruled behind the H1, a ruler along the top */
.sheet { background: url('/img/sheet-grid.svg') var(--bg); background-attachment: fixed; }
.crumbs.sheet::before { content: ''; display: block; height: 10px; background: url('/img/ruler.svg') repeat-x; opacity: .7; }
.page-head { padding: 1rem 0 2.25rem; }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-bottom: 1.25rem; }
.head-rule { margin-bottom: 2.5rem; }
.ph-text { min-width: 0; }
.ph-art { margin: 1.5rem 0 0; }
.ph-art img { display: block; width: 100%; height: auto; max-width: 420px; border: 2px solid var(--asphalt); background: var(--surface); }
.ph-keymap { background: var(--sea); border: 2px solid var(--asphalt); max-width: 420px; }
.ph-keymap .basin-map { height: auto; aspect-ratio: 1.25; }
.ph-keymap figcaption { margin: 0; padding: 0.35rem 0.7rem; background: var(--asphalt); color: #fff; font-family: var(--head); font-weight: 600; font-size: 0.9rem; }
@media (min-width: 980px) { .page-head .has-art { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; align-items: center; } .ph-art { margin: 0; } }
@media (max-width: 979px) { .ph-art { max-width: 100%; } .ph-art img { max-height: 260px; width: auto; max-width: 100%; } }
.answer { font-size: var(--s1); line-height: 1.5; max-width: 66ch; margin-bottom: 0; }
.kicker { font-family: var(--head); font-weight: 600; color: var(--text); font-size: var(--s0); margin-bottom: 0.7rem; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--strap); padding: 0.15rem 0.6rem; border: 2px solid var(--asphalt); }

/* Sections and columns */
.sec { padding: 2.25rem 0; }
.sec + .sec { border-top: 2px solid var(--rule); }
.cols { display: grid; gap: var(--gap); }
.cols > * { min-width: 0; }
@media (min-width: 900px) { .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.paper { background: var(--surface); border: 2px solid var(--asphalt); padding: 1.25rem; }
figure { margin: 0 0 1.5rem; }
figcaption { font-size: var(--s-1); color: var(--muted); margin-top: 0.5rem; }
.figure-paper { background: var(--surface); border: 2px solid var(--asphalt); padding: 1rem; overflow-x: auto; }
.ill { width: 100%; height: auto; display: block; }

/* Ruled tables: freight paperwork with an asphalt heading row */
.table-wrap { position: relative; overflow-x: auto; margin-bottom: 1.5rem; border: 2px solid var(--asphalt); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; margin: 0; }
caption { text-align: left; font-family: var(--head); font-weight: 600; font-size: var(--s1); padding: 0.75rem 1rem; border-bottom: 2px solid var(--asphalt); }
th, td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-family: var(--head); font-weight: 600; background: var(--asphalt); color: #fff; border-bottom: 4px solid var(--strap); white-space: nowrap; }
tbody tr:hover { background: #f3f5f7; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.row-link { white-space: nowrap; font-weight: 600; }

/* Route shields: interstate blue and red, California green, US white */
.shield { display: inline-block; vertical-align: middle; flex: none; }
.shield .sh-body, .bm-sh .sh-body { fill: var(--accent); stroke: #fff; stroke-width: 1.2; }
.shield .sh-band, .bm-sh .sh-band { fill: var(--shield-red); }
.shield .sh-spade, .bm-sh .sh-spade { fill: var(--sign); stroke: #fff; stroke-width: 2; }
.shield .sh-us, .bm-sh .sh-us { fill: #fff; stroke: var(--text); stroke-width: 2.4; }
.shield text, .bm-sh text { font-family: var(--head); font-weight: 700; text-anchor: middle; }
.sh-num-light { fill: #fff; }
.sh-num-dark { fill: var(--text); }
.shield-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 1rem; }
.shield-row-lg .shield { width: auto; height: 46px; }

/* The basin map (all maps on the site). Sizes are CSS px times --u (sheet units per screen pixel)
   and --k (bigger marks where the map is drawn small). */
.basin-map { --k: 1; display: block; width: 100%; height: 100%; font-family: var(--head); }
@media (max-width: 1300px) { .basin-map { --k: 1.12; } }
@media (max-width: 979px) { .basin-map { --k: 1.45; } }
@media (max-width: 600px) { .basin-map { --k: 1.9; } }
.bm-land { fill: var(--land); }
.bm-out { fill: #cdd4da; }
.bm-hatch { stroke: #8d99a5; stroke-width: calc(var(--u) * 1px); }
.bm-sea { fill: var(--sea); }
.bm-shore { fill: none; stroke-linejoin: round; }
.bm-shore-3 { stroke: #bbc8d4; stroke-width: calc(var(--u) * 30px); }
.bm-shore-2 { stroke: #c3cfda; stroke-width: calc(var(--u) * 17px); }
.bm-shore-1 { stroke: #ccd7e1; stroke-width: calc(var(--u) * 7px); }
.bm-coast { fill: none; stroke: #4f5d6a; stroke-width: calc(var(--u) * 1.3px); stroke-linejoin: round; }
.bm-island { fill: var(--land); stroke: #4f5d6a; stroke-width: calc(var(--u) * 1.1px); }
.bm-range { fill: #d6dcd9; }
.bm-ridge { fill: none; stroke: #8f9a93; stroke-width: calc(var(--u) * 1px); }
.bm-county { fill: none; stroke: #5d6975; stroke-width: calc(var(--u) * 1.4px); stroke-dasharray: calc(var(--u) * 9px) calc(var(--u) * 4px) calc(var(--u) * 2px) calc(var(--u) * 4px); }
.bm-grid { fill: none; stroke: #6f7b87; stroke-opacity: .42; stroke-width: calc(var(--u) * 1px); }
.bm-square { fill: var(--strap); fill-opacity: .38; stroke: var(--strap-deep); stroke-width: calc(var(--u) * 2.5px); }
.bm-key { font-weight: 700; font-size: calc(var(--u) * var(--k) * 12px); fill: #3d4853; text-anchor: middle; }
.bm-fw-case { fill: none; stroke: var(--text); stroke-width: calc(var(--u) * 6px); stroke-linecap: round; stroke-linejoin: round; }
.bm-fw { fill: none; stroke: var(--strap); stroke-width: calc(var(--u) * 3.4px); stroke-linecap: round; stroke-linejoin: round; }
.bm-fw-case.ctx { stroke: #6f7b87; stroke-width: calc(var(--u) * 4px); }
.bm-fw.ctx { stroke: #f2d98c; stroke-width: calc(var(--u) * 2px); }
.bm-water { font-family: var(--body); font-style: italic; font-size: calc(var(--u) * var(--k) * 13px); fill: #3f5366; letter-spacing: .12em; text-anchor: middle; }
.bm-water.big { font-size: calc(var(--u) * var(--k) * 20px); letter-spacing: .3em; }
.bm-range-name { font-family: var(--body); font-style: italic; font-size: calc(var(--u) * var(--k) * 11.5px); fill: #4e5a54; letter-spacing: .06em; text-anchor: middle; paint-order: stroke; stroke: #d6dcd9; stroke-width: calc(var(--u) * 3px); }
.bm-region { font-weight: 600; font-size: calc(var(--u) * var(--k) * 12.5px); fill: #4a5561; letter-spacing: .2em; text-transform: uppercase; text-anchor: middle; paint-order: stroke; stroke: var(--land); stroke-width: calc(var(--u) * 4px); }
.bm-region.out { fill: #55606b; stroke: #cdd4da; }
.bm-region.soft { font-family: var(--body); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: .06em; font-size: calc(var(--u) * var(--k) * 11.5px); }
.bm-run-halo { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: calc(var(--u) * var(--k) * 10px); stroke-linecap: round; stroke-linejoin: round; }
.bm-run { fill: none; stroke: var(--accent); stroke-width: calc(var(--u) * var(--k) * 5px); stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s, stroke-width .15s, opacity .15s; }
.bm-lane.on .bm-run { stroke-width: calc(var(--u) * var(--k) * 7px); }
.bm-lane.on .bm-run-halo { stroke-width: calc(var(--u) * var(--k) * 13px); }
.bm-lane.off .bm-run { stroke: #6a7fb3; opacity: .45; stroke-width: calc(var(--u) * var(--k) * 3px); }
.bm-lane.off .bm-run-halo { display: none; }
a.bm-lane { cursor: pointer; }
a.bm-lane:hover .bm-run, a.bm-lane:focus-visible .bm-run { stroke: var(--accent-deep); stroke-width: calc(var(--u) * var(--k) * 8px); }
a.bm-lane:focus-visible .bm-run-halo { stroke: var(--strap); stroke-opacity: 1; }
a.bm-lane:focus { outline: none; }
.bm-lanes:has(a.bm-lane:hover) a.bm-lane:not(:hover) .bm-run { opacity: .35; }
.bm-stop { fill: #fff; stroke: var(--text); stroke-width: calc(var(--u) * 2px); r: calc(var(--u) * var(--k) * 4.2px); }
.bm-stop.on { fill: var(--strap); r: calc(var(--u) * var(--k) * 8px); stroke-width: calc(var(--u) * 3px); }
.bm-stop.dim { opacity: .55; }
.bm-name { font-weight: 600; font-size: calc(var(--u) * var(--k) * 13px); fill: var(--text); paint-order: stroke; stroke: var(--land); stroke-width: calc(var(--u) * 4px); stroke-linejoin: round; }
.bm-name.mine { font-weight: 700; }
.bm-name.on { font-weight: 700; font-size: calc(var(--u) * var(--k) * 18px); }
.bm-sh { transform: scale(calc(var(--u) * var(--k) * 0.95)); }
.bm-badge { transform: scale(calc(var(--u) * var(--k))); }
.bm-badge rect { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.bm-badge text { fill: #fff; font-weight: 700; font-size: 14px; text-anchor: middle; }
.bm-badge-link:hover .bm-badge rect { fill: var(--accent-deep); }
.bm-note { font-family: var(--body); font-size: calc(var(--u) * var(--k) * 10.5px); fill: #3d4853; text-anchor: start; paint-order: stroke; stroke: var(--land); stroke-width: calc(var(--u) * 3px); }
@media (max-width: 600px) { .bm-note { display: none; } }
.bm-sheet .bm-note { display: none; }
/* The lanes draw in, one after another, then their numbers appear */
.bm-animate .bm-run { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bm-draw 1.5s cubic-bezier(.55, 0, .25, 1) forwards; animation-delay: calc(.3s + var(--i) * .14s); }
.bm-animate.bm-has-lane .bm-lane.on .bm-run { animation-delay: .5s; animation-duration: 1.8s; }
.bm-animate.bm-has-lane .bm-lane.off .bm-run { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.bm-animate .bm-badge { opacity: 0; animation: bm-pop .35s ease-out forwards; animation-delay: calc(1.2s + var(--i) * .14s); }
.bm-animate .bm-stop.on { animation: bm-ping 1.8s ease-out 1.2s 2; }
@keyframes bm-draw { to { stroke-dashoffset: 0; } }
@keyframes bm-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-ping { 0%, 100% { stroke-width: calc(var(--u) * 3px); } 40% { stroke-width: calc(var(--u) * 9px); } }

/* Home: the map is the first screen */
.hero-map { position: relative; background: var(--sea); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "map" "slip" "key"; }
.hm-stage, .hm-over { display: contents; }
.hm-copy { grid-area: copy; background: var(--bg) url('/img/sheet-grid.svg'); padding: 1.5rem 16px 1.25rem; }
.hm-map { grid-area: map; aspect-ratio: 1.08 / 1; overflow: hidden; border-top: 2px solid var(--asphalt); border-bottom: 2px solid var(--asphalt); }
.hm-slip { grid-area: slip; margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
.hm-key { grid-area: key; background: var(--surface); border-bottom: 2px solid var(--asphalt); }
.hm-key .hm-legend { border: 0; max-width: 1200px; margin: 0 auto; padding: 0.7rem 16px; }
.hm-key-link { margin-left: auto; }
.tagline { font-family: var(--head); font-weight: 600; font-size: var(--s1); color: var(--text); margin: 0 0 0.6rem; display: inline-block; background: var(--strap); padding: 0.1rem 0.55rem; border: 2px solid var(--asphalt); }
.hero-map h1 { font-size: clamp(2.2rem, 8vw, 4rem); margin-bottom: 0.4em; max-width: 15ch; }
.hero-map .lead { margin-bottom: 0; font-size: var(--s1); }
@media (max-width: 600px) { .bm-sheet { --k: 1.55; } }
@media (min-width: 640px) and (max-width: 979px) { .hm-map { aspect-ratio: 4 / 3; } .hm-copy { padding-left: 24px; padding-right: 24px; } .hm-key .hm-legend { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 980px) {
  .hero-map { display: block; }
  .hm-stage { display: block; position: relative; height: clamp(600px, calc(100vw * 936 / 1716), 860px); max-height: calc(100vh - var(--head-h) - 52px); min-height: 600px; overflow: hidden; }
  .hm-map { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
  .hm-over { display: block; position: relative; z-index: 2; height: 100%; padding-top: clamp(1.25rem, 3.5vh, 2.75rem); pointer-events: none; }
  .hm-over > * { pointer-events: auto; }
  .hm-copy { background: none; padding: 0; max-width: min(560px, 41vw); }
  .hero-map h1 { font-size: clamp(2.3rem, 3.3vw, 3.5rem); max-width: 15ch; }
  .hero-map .lead { max-width: 38ch; font-size: 1.15rem; }
  .hm-slip { max-width: min(560px, 41vw); margin-top: 1.25rem; border: 2px solid var(--asphalt); box-shadow: 6px 6px 0 rgba(18, 22, 27, .22); }
  .hm-key { border-top: 2px solid var(--asphalt); }
}
.hm-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; padding: 0.5rem 0.8rem; list-style: none; font-size: 0.85rem; background: var(--surface); border: 2px solid var(--asphalt); }
.hm-legend li { display: flex; align-items: center; gap: 0.45rem; }
.lg { display: inline-block; flex: none; }
.lg-fw { width: 26px; height: 7px; background: var(--strap); border: 2px solid var(--text); border-radius: 4px; }
.lg-lane { width: 26px; height: 6px; background: var(--accent); box-shadow: 0 0 0 2px #fff; border-radius: 3px; }
.lg-stop { width: 11px; height: 11px; border: 2px solid var(--text); border-radius: 50%; background: #fff; }
.lg-sq { width: 16px; height: 14px; border: 1px solid #6f7b87; }

/* The short request on the map: a slip ruled like a bill of lading */
.slip { background: var(--surface); border: 2px solid var(--asphalt); box-shadow: 6px 6px 0 rgba(18, 22, 27, .22); }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0.9rem; background: var(--asphalt); color: #fff; border-bottom: 4px solid var(--strap); }
.slip-title { font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.slip-sub { font-size: 0.78rem; color: #b9c3cc; }
.slip .bol-row { border-bottom: 1px solid var(--rule-strong); }
.slip-fields { display: grid; grid-template-columns: 1fr 1fr; }
.slip-fields .bol-cell { border-bottom: 1px solid var(--rule-strong); }
.slip-fields .bol-cell:nth-child(odd) { border-right: 1px solid var(--rule-strong); }
@media (min-width: 560px) { .slip-fields { grid-template-columns: 0.8fr 1.3fr 0.9fr; } .slip-fields .bol-cell { border-right: 1px solid var(--rule-strong); } .slip-fields .bol-cell:last-child { border-right: 0; } }
@media (max-width: 559px) { .slip-fields .slip-zip { grid-column: 1 / -1; border-right: 0 !important; } }
.slip .bol-foot { padding: 0.75rem 0.9rem; gap: 0.6rem; }
.slip .bol-foot .btn { font-size: 1.1rem; padding: 0.75rem 1rem; }
@media (max-width: 559px) { .slip .bol-foot .btn { width: 100%; } }

/* Bill of lading box: the request forms */
.bol { background: var(--surface); border: 2px solid var(--asphalt); padding: 0; }
.bol-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 1rem; background: var(--asphalt); color: #fff; border-bottom: 4px solid var(--strap); }
.bol-title { font-family: var(--head); font-weight: 700; font-size: var(--s1); }
.bol-sub { font-size: var(--s-1); color: #b9c3cc; letter-spacing: 0.04em; }
.bol-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .bol-grid { grid-template-columns: 1fr 1fr; } }
.bol-cell, .bol-row { padding: 0.65rem 1rem 0.75rem; border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 560px) { .bol-grid > .bol-cell:nth-child(odd) { border-right: 1px solid var(--rule-strong); } }
.bol-address .bol-street { grid-column: 1 / -1; border-right: 0 !important; }
@media (min-width: 560px) { .bol-address .bol-street { grid-column: auto; border-right: 1px solid var(--rule-strong) !important; } }
fieldset.bol-row { margin: 0; border-left: 0; border-right: 0; border-top: 0; min-width: 0; }
fieldset.bol-row > .bol-grid { margin: 0.4rem -1rem -0.75rem; border-top: 1px solid var(--rule-strong); }
fieldset.bol-row > .bol-grid > .bol-cell:last-child, fieldset.bol-row > .bol-grid > .bol-cell:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.bol-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.3rem; padding: 0; }
.req { font-weight: 400; color: var(--accent); }
.bol input[type=text], .bol input[type=email], .bol input[type=tel], .bol input[type=number], .bol select, .bol textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: #fff; border: 1px solid var(--rule-strong); border-radius: 0; padding: 0.55rem 0.6rem; min-height: 44px; }
.bol textarea { resize: vertical; }
.bol input:hover, .bol select:hover, .bol textarea:hover { border-color: var(--text); }
.bol input:focus, .bol select:focus, .bol textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.bol select:disabled { background: var(--tint); color: var(--muted); }
[aria-invalid="true"] { border-color: var(--error) !important; box-shadow: inset 0 0 0 1px var(--error); }
.field-error { color: var(--error); font-size: 0.85rem; margin: 0.25rem 0 0; min-height: 0; }
.field-error:empty { display: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-block; padding: 0.5rem 0.85rem; border: 2px solid var(--rule-strong); background: #fff; font-weight: 500; cursor: pointer; transition: border-color .12s, background-color .12s; }
.choice input:hover + span { border-color: var(--text); }
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--accent); }
.bol-hint { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0; }
.bol-foot { padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-status { margin: 0; font-weight: 500; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.suggest { font-size: 0.9rem; margin-top: 0.4rem; }
.suggest button { font: inherit; font-size: 0.85rem; margin-left: 0.3rem; padding: 0.25rem 0.6rem; border: 1px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; }
.bol-receipt { padding-bottom: 1rem; }
.bol-receipt p { padding: 0 1rem; }
.bol-summary { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 1rem; }
.bol-summary div { padding: 0.6rem 1rem; border-bottom: 1px solid var(--rule-strong); }
.bol-summary dt { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.bol-summary dd { margin: 0; font-family: var(--head); font-weight: 600; font-size: var(--s1); }

/* The request that closes each page: a full-width dispatch desk, not a side rail */
.request { padding: 3.5rem 0 4rem; background: var(--asphalt-2) url('/img/sheet-grid.svg'); background-blend-mode: soft-light; color: #fff; border-top: 4px solid var(--strap); }
.request a { color: #fff; }
.request-wrap { display: grid; gap: 2rem; }
@media (min-width: 980px) { .request-wrap { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; } }
.request-intro h2 { font-size: clamp(var(--s3), 3.6vw, var(--s5)); }
.request-intro p { color: #dfe5ea; font-size: var(--s1); line-height: 1.5; }
.request-points { list-style: none; padding: 0; margin: 1.5rem 0 0; color: #dfe5ea; border-left: 6px solid var(--strap); }
.request-points li { padding: 0.35rem 0 0.35rem 1rem; }
.request .bol { color: var(--text); box-shadow: 8px 8px 0 rgba(0, 0, 0, .3); }
.request .bol a { color: var(--accent); }

/* Driver run sheet: the stops of a run drawn on a route line */
.runsheet { counter-reset: stop; margin: 0 0 1.75rem; padding: 0; list-style: none; position: relative; }
.runsheet li { position: relative; padding: 0 0 1.5rem 3.6rem; min-height: 2.6rem; }
.runsheet li::before { counter-increment: stop; content: counter(stop); position: absolute; left: 0; top: 0; z-index: 1; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--on-accent); background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--asphalt); }
.runsheet li::after { content: ''; position: absolute; left: calc(1.25rem - 4px); top: 1.5rem; bottom: -0.2rem; width: 8px; background: var(--strap); border-left: 2px solid var(--asphalt); border-right: 2px solid var(--asphalt); }
.runsheet li:last-child::after { display: none; }
.runsheet li:last-child { padding-bottom: 0.25rem; }
.runsheet h3 { margin: 0.35rem 0 0.25rem; }
.runsheet p { margin: 0; max-width: 62ch; }
@media (min-width: 900px) {
  .runsheet.across { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1.5rem; }
  .runsheet.across li { padding: 3.6rem 0 0; }
  .runsheet.across li::after { left: 1.25rem; right: -1.5rem; top: calc(1.25rem - 4px); bottom: auto; width: auto; height: 8px; border: 0; border-top: 2px solid var(--asphalt); border-bottom: 2px solid var(--asphalt); }
  .runsheet.across li:last-child::after { display: none; }
}
.rs-body { min-width: 0; }

/* Hub lists as a strip map: a route line, each page a stop */
.link-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0; position: relative; }
@media (min-width: 760px) { .link-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.link-list li { position: relative; padding-left: 1.9rem; }
.link-list li::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.link-list li::after { content: ''; position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -8px; background: #fff; border: 2px solid var(--asphalt); border-radius: 50%; transition: background-color .15s, transform .15s; }
.link-list li:hover::after { background: var(--strap); transform: scale(1.25); }
.link-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 1rem; padding: 0.7rem 0; text-decoration: none; color: var(--text); font-weight: 600; font-family: var(--head); font-size: 1.15rem; line-height: 1.25; border-bottom: 1px solid var(--rule); }
.link-list a:hover { color: var(--accent); }
.link-list .ll-meta { color: var(--muted); font-weight: 400; font-size: 0.92rem; font-family: var(--body); flex-basis: 100%; }
@media (min-width: 760px) { .link-list.one-col { grid-template-columns: 1fr; } }
.hub-strip li { padding-left: 2.6rem; }
.hub-strip li::before { left: 10px; width: 8px; background: var(--strap); border-left: 2px solid var(--asphalt); border-right: 2px solid var(--asphalt); }
.hub-strip li:first-child::before { top: 50%; }
.hub-strip li:last-child::before { bottom: 50%; }
.hub-strip li::after { left: 3px; width: 22px; height: 22px; margin-top: -11px; border-width: 3px; border-radius: 0; background: var(--accent); }
.hub-strip li:hover::after { background: var(--strap); transform: none; }
.hub-strip a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; font-size: 1.35rem; padding: 0.9rem 0; }
.hub-strip .ll-meta { grid-column: 1; }
.hub-strip a::after { content: '\2192'; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); font-family: var(--body); font-size: 1.4rem; transition: transform .15s; }
.hub-strip a:hover::after { transform: translateX(4px); }

/* Lanes as overhead guide signs on a gantry */
.gantry { list-style: none; margin: 0 0 1.5rem; padding: 14px 0 0; display: grid; gap: 1.1rem; border-top: 10px solid #8a949e; position: relative; }
@media (min-width: 700px) { .gantry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gantry { grid-template-columns: repeat(3, 1fr); } }
.gantry li { position: relative; }
.gantry li::before, .gantry li::after { content: ''; position: absolute; top: -14px; width: 6px; height: 14px; background: #8a949e; }
.gantry li::before { left: 22%; } .gantry li::after { right: 22%; }
.sign { display: block; height: 100%; background: var(--sign); color: #fff; text-decoration: none; padding: 0.8rem 1rem 0.9rem; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px #fff; transition: transform .15s, background-color .15s; }
a.sign:hover { color: #fff; background: #185a3b; transform: translateY(-2px); }
.sign-top { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.sign-num { margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 0.95rem; background: var(--strap); color: var(--asphalt); padding: 0.05rem 0.5rem; }
.sign-name { display: block; font-family: var(--head); font-weight: 700; font-size: 1.45rem; line-height: 1.1; }
.sign-stops { display: block; font-size: 0.9rem; color: #e3efe8; margin-top: 0.35rem; }
.sign a { color: #fff; }
.sign a:hover { color: var(--strap); }
a.sign-name { text-decoration: none; }
a.sign-name:hover { text-decoration: underline; }
.lb-stops a { color: inherit; }

/* Map panels that open lane, area and county pages */
.map-head { position: relative; background: var(--sea); border-bottom: 2px solid var(--asphalt); }
.map-head-map { height: clamp(300px, 46vw, 540px); overflow: hidden; }
@media (max-width: 600px) { .map-head-map { height: auto; aspect-ratio: 3 / 2.1; } }
.map-key { background: var(--surface); border: 2px solid var(--asphalt); }
@media (min-width: 980px) { .map-head .map-key { position: absolute; right: max(24px, calc((100vw - 1200px) / 2 + 24px)); bottom: 24px; width: 300px; box-shadow: 6px 6px 0 rgba(18, 22, 27, .22); } }
@media (max-width: 979px) { .map-head .map-key { border-width: 0 0 2px; } }
.map-key-head { background: var(--asphalt); color: #fff; padding: 0.5rem 0.9rem; border-bottom: 4px solid var(--strap); display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.map-key-head strong { font-family: var(--head); font-size: 1.5rem; line-height: 1; }
.map-key-head span { font-size: 0.8rem; color: #b9c3cc; }
.map-key dl { margin: 0; padding: 0.3rem 0.9rem 0.8rem; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.9rem; }
@media (max-width: 979px) { .map-key dl { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } }
.map-key dt { font-size: 0.8rem; color: var(--muted); font-weight: 600; padding-top: 0.45rem; }
.map-key dd { margin: 0; padding-top: 0.4rem; font-size: 0.95rem; }
.map-key .shield-row { margin: 0; }
.zips { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 0; list-style: none; }
.zips li { font-variant-numeric: tabular-nums; border: 1px solid var(--rule-strong); padding: 0 0.35rem; font-size: 0.88rem; background: #fff; }
.map-figure { background: var(--sea); border: 2px solid var(--asphalt); margin: 0 0 1.5rem; }
.map-figure .basin-map { height: auto; aspect-ratio: var(--ar, 1.25); }
.map-figure figcaption { background: var(--surface); margin: 0; padding: 0.5rem 0.9rem; border-top: 2px solid var(--asphalt); }

/* Deck diagrams */
.deck-svg { display: block; width: 100%; height: auto; min-width: 520px; }
.dk-deck { fill: #c9b590; stroke: var(--text); stroke-width: 2; }
.dk-plank { stroke: #ad9667; stroke-width: 1; }
.dk-head { fill: var(--asphalt); }
.dk-flange { fill: #c49a5c; stroke: var(--text); stroke-width: 1.4; }
.dk-drum { fill: #a77d43; stroke: var(--text); stroke-width: 1; }
.dk-arbor { fill: var(--text); }
.dk-edge { fill: #c49a5c; stroke: var(--text); stroke-width: 1.4; }
.dk-flange-line { stroke: var(--text); stroke-width: 3; }
.dk-chock { fill: var(--text); }
.dk-strap { stroke: var(--strap); stroke-width: 5; opacity: 0.95; }
.dk-dim { stroke: var(--muted); stroke-width: 1; }
.dk-text { font-family: var(--head); font-weight: 600; font-size: 14px; fill: var(--text); }
.dk-note { font-size: 12px; fill: var(--muted); }

/* Source list */
.sources { font-size: 0.88rem; color: var(--muted); border-top: 2px solid var(--rule-strong); padding-top: 1rem; margin-top: 2rem; }
.sources h2 { font-size: var(--s1); color: var(--text); }
.sources ul { padding-left: 1.1rem; }
.src-list dt { margin-top: 0.8rem; }
.src-list dd { margin: 0.15rem 0 0; color: var(--muted); }

/* FAQ */
.faq { border-top: 3px solid var(--asphalt); margin-bottom: 1.5rem; }
.faq details { border-bottom: 1px solid var(--rule-strong); }
.faq summary { cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 1.15rem; padding: 0.85rem 2.4rem 0.85rem 0; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.25rem; top: 0.65rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: var(--accent); }
.faq details[open] summary::after { content: '\2212'; background: var(--asphalt); }
.faq summary:hover { color: var(--accent); }
.faq .faq-a { padding: 0 0 1rem; max-width: 70ch; }

/* Figures in a row: plain numbers, ruled */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 2px solid var(--asphalt); background: var(--surface); margin-bottom: 1.5rem; }
.figures div { padding: 0.9rem 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.figures dt { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.figures dd { margin: 0; font-family: var(--head); font-weight: 700; font-size: var(--s2); line-height: 1.15; }

/* Map book index: county, then each area with its grid square */
.index-cols { columns: 1; column-gap: 2.5rem; margin-bottom: 1.5rem; }
@media (min-width: 700px) { .index-cols { columns: 2; } }
@media (min-width: 1000px) { .index-cols { columns: 3; } }
.index-cols ul { list-style: none; padding: 0; margin: 0 0 1.25rem; break-inside: avoid; }
.index-cols h3 { break-after: avoid; border-bottom: 3px solid var(--asphalt); padding-bottom: 0.25rem; }
.index-cols h3 a { color: var(--text); text-decoration: none; }
.index-cols li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; }
.index-cols li::after { content: ''; order: 1; flex: 1; border-bottom: 2px dotted var(--rule-strong); }
.index-cols li a { color: var(--text); text-decoration: none; }
.index-cols li a:hover { color: var(--accent); text-decoration: underline; }
.index-cols .sq { order: 2; font-family: var(--head); font-weight: 700; background: var(--asphalt); color: #fff; padding: 0 0.4rem; font-size: 0.9rem; }

/* Planner */
.planner { display: grid; gap: 1.5rem; }
.planner > * { min-width: 0; }
.planner-out [data-out="deck"] { overflow-x: auto; }
@media (min-width: 980px) { .planner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); } }
.planner-inputs .bol-cell input { max-width: 8rem; }
.planner-out { background: var(--surface); border: 2px solid var(--asphalt); padding: 1rem; }
.meter { height: 18px; border: 2px solid var(--asphalt); background: #fff; overflow: hidden; margin: 0.5rem 0 1rem; }
.meter span { display: block; height: 100%; background: var(--accent); width: 0; transition: width .25s; }
.verdict { font-family: var(--head); font-weight: 700; font-size: var(--s2); line-height: 1.2; margin: 0 0 0.5rem; }

/* Footer: asphalt, the site map by hub */
.foot { background: var(--asphalt); color: #dfe5ea; }
.foot a { color: #fff; }
.foot hr.strap::after { background: var(--asphalt); border-color: var(--strap); }
.foot-grid { display: grid; gap: 1.5rem; padding-top: 2.75rem; padding-bottom: 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.foot-brand { grid-column: 1 / -1; max-width: 46ch; }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.8fr repeat(4, 1fr); } .foot-brand { grid-column: auto; grid-row: span 2; } }
.foot-name { font-family: var(--head); font-weight: 700; font-size: var(--s2); margin-bottom: 0.2rem; color: #fff; }
.foot-tag { font-family: var(--head); font-weight: 600; color: var(--strap); }
.foot-note { font-size: 0.9rem; color: #b9c3cc; }
.foot-h { font-family: var(--head); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.4rem; padding-bottom: 0.25rem; border-bottom: 2px solid #3d4550; }
.foot-h a { text-decoration: none; }
.foot ul { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.foot li { padding: 0.15rem 0; }
.foot ul a { color: #d3dae0; text-decoration: none; }
.foot ul a:hover { color: #fff; text-decoration: underline; }
.foot-base { border-top: 1px solid #3d4550; padding-top: 1rem; padding-bottom: 1.5rem; font-size: 0.85rem; color: #b9c3cc; }

/* Home sections */
.home-sec { padding: 3.5rem 0; }
.home-sec h2 { max-width: 24ch; }
.home-sec.on-paper { background: var(--surface); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.sec-head h2 { margin: 0; }
.sec-head p { max-width: 60ch; margin: 0; }
.reel-split { display: grid; gap: 2rem; }
@media (min-width: 900px) { .reel-split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.side-by-side { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .side-by-side { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.tag { display: inline-block; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--rule-strong); padding: 0.05rem 0.4rem; color: var(--muted); }
.note { background: var(--surface); border-left: 6px solid var(--strap); padding: 0.8rem 1rem; margin: 0 0 1.5rem; }
.err-page { padding-block: 4rem; }
.h3 { font-size: var(--s1); }
.guide { max-width: 70ch; }
.guide h2 { margin-top: 2.25rem; }
.guide figure { margin: 1.5rem 0; }
.guide > .sec:first-child { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .bm-animate .bm-run { stroke-dasharray: none; stroke-dashoffset: 0; }
  .bm-animate .bm-badge { opacity: 1; }
}
@media print { .topbar, .request, .foot, .menu-panel { display: none; } }
/* Phone sheet: drop the labels that crowd the lane badges at small sizes. */
@media (max-width: 600px) { :is(.bm-sheet, .bm-basin) :is(.bm-wide, .bm-region.soft, .bm-range-name) { display: none; } }
@media (max-width: 600px) { .bm-focus { --k: 1.6; } .bm-focus :is(.bm-sh, .bm-range-name, .bm-region.soft) { display: none; } }