:root {
  --bg: #f7f6f2; --surface: #ffffff; --ink: #1d231f; --muted: #5d665f; --line: #dcdcd4;
  --brand: #1f5f4a; --brand-ink: #ffffff; --accent: #b4532a;
  --t-verified: #1e7a4c; --t-placed: #3b6fb6; --t-interpolated: #2a8a9a; --t-suggested: #a8791f; --t-ordered: #7a5bb0; --t-crag: #9a8a52; --t-unlocated: #9a9a9a;
  --ok: #1e7a4c; --warn: #9a6a00; --stop: #b3261e;
  --warn-bg: #fff4d6; --stop-bg: #fde7e4; --ok-bg: #e3f3e9;
  --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Page headings only (h1, h2). It used to also set the wordmark, list names and small
     uppercase labels, which put three families in one list row and a serif reversed out of
     the header. Note that `ui-serif` resolves differently on every OS, so this is a voice,
     not a typeface -- fine for a heading, wrong for a wordmark. */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", "Georgia", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121513; --surface: #1b201c; --ink: #e8ece8; --muted: #a2aba4; --line: #2e3530;
    --brand: #5cb896; --brand-ink: #0d1a14; --accent: #e08a5c;
    --t-verified: #5cc48c; --t-placed: #7aa7e8; --t-interpolated: #6cc7d6; --t-suggested: #d9a94f; --t-ordered: #b397e6; --t-crag: #cdbb7c; --t-unlocated: #8a8a8a;
    --ok: #5cc48c; --warn: #e2b34a; --stop: #f08a80; --warn-bg: #2e2712; --stop-bg: #3a1a17; --ok-bg: #16301f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121513; --surface: #1b201c; --ink: #e8ece8; --muted: #a2aba4; --line: #2e3530;
  --brand: #5cb896; --brand-ink: #0d1a14; --accent: #e08a5c;
  --t-verified: #5cc48c; --t-placed: #7aa7e8; --t-interpolated: #6cc7d6; --t-suggested: #d9a94f; --t-ordered: #b397e6; --t-crag: #cdbb7c; --t-unlocated: #8a8a8a;
  --ok: #5cc48c; --warn: #e2b34a; --stop: #f08a80; --warn-bg: #2e2712; --stop-bg: #3a1a17; --ok-bg: #16301f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 16px/1.5 var(--font-body); overflow-x: hidden;
  /* A little paper grain so flat colour doesn't read as a flat screen. */
  background-color: var(--bg);
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E'); }
a { color: var(--brand); }
h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.15; margin: .2em 0 .3em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin: 1.2em 0 .5em; }
.small { font-size: .88rem; } .muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px; z-index: 10; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  background: var(--brand) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 90%22%3E%3Cpath d=%22M-10,88 Q10,30 55,24 Q95,19 118,55 Q128,75 150,80 Q185,86 232,60%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.10%22 stroke-width=%222%22/%3E%3Cpath d=%22M-10,70 Q15,22 55,17 Q92,13 112,45 Q122,64 150,68 Q185,73 232,50%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.14%22 stroke-width=%222%22/%3E%3Cpath d=%22M-10,52 Q18,15 55,11 Q88,7 106,34 Q116,52 150,55 Q182,58 232,40%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.18%22 stroke-width=%222%22/%3E%3C/svg%3E') right top / 340px no-repeat;
  color: var(--brand-ink); position: sticky; top: 0; z-index: 5; }
.top a { color: var(--brand-ink); text-decoration: none; }
/* The wordmark is the body sans, not the display serif, and the whole title bar is therefore
   one family. Three reasons, in the order they bite:

   `--font-display` starts at `ui-serif`, which is not a typeface -- it is New York on macOS,
   Palatino Linotype or Georgia on Windows, something else again elsewhere. The one piece of
   type that IS the identity should not change per visitor.

   Reversed out of the dark green, an old-style serif is at its weakest: its thin strokes thin
   further against a dark ground, so at 19px the wordmark read soft beside the crisp sans nav
   links 4px smaller than it. Two families that close in size in a 56px bar read as
   unresolved rather than deliberate.

   Sans at 700 carries the reverse better than serif at 600, and the slight negative tracking
   is what keeps it reading as a mark rather than as a sentence. */
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -.01em; min-height: 44px; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { padding: 10px 10px; border-radius: 8px; font-size: .95rem; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a:hover { background: rgba(255,255,255,.14); }
.top nav a { white-space: nowrap; }
@media (max-width: 480px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .top { padding: 6px 10px; gap: 6px; }
  /* Six items no longer fit on one line on any common phone: measured at 397px of nav in a
     360px viewport, which put the whole PAGE into horizontal scroll. Wrap to a second line
     rather than clip or scroll -- a nav item you cannot see is a nav item you do not have. */
  /* One row, always: a two-row sticky header was eating 88px, a tenth of the screen, on
     every page. Not everything fits, so the items that live in every footer hide here.

     Selected by HREF, not by position. This was `nth-child(6)`, with a comment saying it hid
     "How sure?" -- and the day /access was inserted before it, it silently began hiding
     "My ticks" instead, while "How sure?" reappeared. A positional rule describes the menu
     at the moment it was written; an href rule says what it means and survives a new item.

     `justify-content: flex-start` so the row starts at Search, the primary action. With
     flex-end the overflow scrolled Search off the left edge, out of sight on every phone. */
  .top nav { flex-wrap: nowrap; gap: 0; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  /* 6px/.85rem, not 8/.9: measured, the wider spacing clipped "Access" at 360px and
     340px, which are common phones. */
  .top nav a { padding: 0 6px; font-size: .85rem; min-height: 44px; }
  /* Five items is what fits. Both of these are in the footer, so nothing becomes
     unreachable -- /ticks was nav-only until this rule needed it, and a tick list a phone
     cannot reach is the wrong thing to lose, since ticks live on the phone. */
  .top nav a[href="/methods"], .top nav a[href="/ticks"] { display: none; }
  .brand { font-size: 1rem; }
}
/* Tap targets: 44px is the floor for anything a thumb hits at a crag. */
.tile, .small-btn { min-height: 44px; }
nav.sort a { display: inline-block; padding: 10px 4px; }
.crumbs a { display: inline-block; padding: 8px 2px; }
.maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
@media (max-width: 600px) {
  .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner { display: none; }
}
.medot { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(26,115,232,.35), 0 0 0 1px rgba(0,0,0,.3); }
/* The route card's distance readout is mono once it holds a number; its idle instruction is prose. */
.dist.idle { font-family: inherit; font-size: .95rem; font-weight: 400; color: var(--muted); }
/* Wide tables scroll sideways; say so with a fade at the right edge, and keep a sun window on one line. */
.table-scroll { background: linear-gradient(to left, var(--bg) 0, transparent 20px) right center / 20px 100% no-repeat; }
.table-scroll td.sun { white-space: nowrap; }
@media (max-width: 600px) { .table-scroll td.rock, .table-scroll th.rock { display: none; } }
/* Crag page on a phone: map, then the routes, then the guidebook cards -- the list a
   climber came for was four screens down behind a histogram and two book cards. */
@media (max-width: 899px) {
  .crag-left { display: contents; }          /* its children become the grid's items... */
  .crag-left > #map { order: 1; }            /* ...so order them by their real parent, not .split */
  .split > section.routes { order: 2; }
  .crag-left > .card.guidebook { order: 3; }
}
/* On a results page the search form folds up behind "Edit search"; open by default otherwise. */
.search-edit > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; list-style: none; }
.search-edit > summary::-webkit-details-marker { display: none; }
.search-edit > summary::before { content: "\25B8"; margin-right: 8px; }
.search-edit[open] > summary::before { content: "\25BE"; }
.search-edit:not([open]) > summary { border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; width: max-content; }

main { max-width: 1200px; margin: 0 auto; padding: 8px 16px 32px; }
.foot { max-width: 1200px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.foot-support { font-size: .95rem; color: var(--ink); margin-bottom: 12px; }
.foot-support a { font-weight: 650; }

.hero { padding: 0 0 4px; }
/* The home page's hero, tightened 2026-09-29. It used to run 516px on a phone and 449px on a
   desktop before you reached the search box; the numbers are in the commit. The h1 is set
   smaller HERE only: at clamp(...2.2rem) the slogan was the loudest thing on a page whose
   point is the measured stuff underneath it. */
.hero > h1 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 .3em; }
.hero > .lede { font-size: .95rem; margin: 0 0 8px; }
.hero-start { margin: 0 0 8px; }
.hero-start > .actions { margin: 0 0 6px; }
/* Six entry points as a grid of short questions, not a paragraph: prose is read in order,
   navigation is scanned. Two columns on a phone, one packed row from tablet up. 40px rows,
   the same target as .crumbs/.top nav links -- these are read at home, not thumbed at a crag,
   so they don't take the 44px floor. */
.entry-points { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.entry-points a { display: flex; align-items: center; min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .85rem; line-height: 1.25; color: var(--ink); text-decoration: none; }
.entry-points a:hover { background: var(--bg); border-color: var(--brand); }
.entry-points a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (min-width: 700px) {
  .entry-points { display: flex; flex-wrap: wrap; }
  .hero-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .hero-start > .actions { margin: 0; }
}
.hero-art { display: block; width: 100%; height: auto; max-height: 140px; margin-bottom: 10px; }
@media (min-width: 700px) { .hero-art { max-height: 180px; } }
:root[data-theme="dark"] .hero-art { opacity: .85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-art { opacity: .85; } }
.lede { color: var(--muted); font-size: 1.05rem; margin-top: 0; }
.search { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); }
.search input[type=search] { width: 100%; font-size: 1.1rem; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-height: 48px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.field { display: inline-flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--muted); }
.field.grow { display: flex; }
.field select, .field input { font-size: 1rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); min-height: 44px; }
fieldset.chips-in { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-toggle { position: relative; }
.chip-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-toggle span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); font-size: .92rem; }
.chip-toggle input:checked + span { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.chip-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.ticked { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.small { min-height: 32px; padding: 0 10px; font-size: .85rem; }
.unlock-note { border-left: 3px solid var(--brand); padding-left: 10px; margin: 10px 0 4px; }
.conflict-note { border-left: 3px solid var(--warn); padding-left: 10px; margin: 10px 0 4px; }
.photo-list { list-style: none; margin: 0 0 10px; padding: 0; }
.photo-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
@keyframes tick-pop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
.btn.tick-pop { animation: tick-pop .4s ease; }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 36px 20px; color: var(--muted); }
.empty-state img { display: block; }
.empty-state p { margin: 0; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.split { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .split > .map { position: sticky; top: 72px; }
  /* The home page's left column holds the map and, under it, the collection. The column
     itself sticks rather than the map, so scrolling the results keeps both in view. */
  .split > .home-left { position: sticky; top: 72px; } }
.map { position: relative; height: 360px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
@media (min-width: 900px) { .map { height: 560px; } .map.small-map { height: 380px; } }
.map.small-map { height: 280px; }
.find .map { margin-top: 12px; }

.route-list, .crag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--line); }
.route-row, .crag-list li { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.route-row > a, .crag-list a { display: flex; align-items: baseline; gap: 10px; padding: 12px 6px 8px; text-decoration: none; color: var(--ink); min-height: 44px;
  transition: background-color .1s; }
.route-row > a:hover, .crag-list a:hover { background: var(--bg); }
.crag-list a { flex-direction: column; gap: 0; padding-bottom: 12px; }
/* Route and crag names in a list are the body sans too. A crag-page row was carrying THREE
   families at once -- serif name, sans metadata, mono grade -- and the grade is the one that
   earns its own: it is tabular and it is the number you scan for. Two families in a row, with
   the serif kept for page headings, where it is large and dark-on-light and actually works. */
.rname { font-family: var(--font-body); font-weight: 650; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.grade { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent);
  white-space: nowrap; letter-spacing: -.02em; }
.grade.big { font-size: .75em; margin-left: 6px; }
.seq { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--bg);
  border: 1px solid var(--line); font-size: .8rem; font-family: var(--font-mono); font-weight: 700; }
.rmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 6px 10px; font-size: .85rem; }
.route-list.compact .route-row > a { padding-bottom: 12px; }
/* Wall headings inside the route list. A big cliff is several walls and an order only means
   anything along one of them, so the list says where each run starts. Sticky so the wall you
   are reading stays named on a 2,212-route page. */
.wall-head { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 1; }
/* Small uppercase is the one setting an old-style serif handles worst: its lowercase is
   where the character lives, and at .9rem in caps it is just narrow. Sans, tracked out. */
.wall-head h3 { margin: 0; padding: 10px 6px 8px; font-size: .9rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); font-family: var(--font-body); font-weight: 650; }
.wall-head:first-child { border-top: 0; }
.crag-name { color: var(--muted); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .8rem; }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.stop { border-color: var(--stop); color: var(--stop); }
.chip.ok-chip { border-color: var(--ok); color: var(--ok); }
/* Color-coded live GPS accuracy during a survey capture (route.html's pin button and the
   /survey tool): an at-a-glance read in bright sun, where an exact metre count is harder to
   parse than a color. Thresholds match the MAX_ACC=25 capture() itself uses. */
.acc-good { color: var(--ok); font-weight: 700; }
.acc-ok { color: var(--warn); font-weight: 700; }
.acc-bad { color: var(--stop); font-weight: 700; }
.chip.src { font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; }

.tier { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.tier .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.tier-verified { color: var(--t-verified); } .tier-placed { color: var(--t-placed); } .tier-ordered { color: var(--t-ordered); }
.tier-interpolated { color: var(--t-interpolated); } .tier-suggested { color: var(--t-suggested); }
.tier-crag { color: var(--t-crag); } .tier-unlocated { color: var(--t-unlocated); }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); gap: 2px; }
.bar .seg { background: currentColor; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; box-shadow: var(--shadow); }
.card.support { border-left: 4px solid var(--accent); }
.card.support .actions { margin-bottom: 2px; }
.card h2 { margin-top: 0; }
.where { display: flex; gap: 14px; align-items: center; margin: 8px 0; }
.compass { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--line); position: relative; flex: none; background: var(--bg); }
.needle { position: absolute; left: 50%; top: 8px; width: 0; height: 0; margin-left: -8px; border: 8px solid transparent;
  border-bottom: 28px solid var(--accent); transform-origin: 8px 28px; opacity: .25; transition: transform .3s; }
.needle.on { opacity: 1; }
.dist { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
.neighbours { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: .92rem; }
.neighbours li:last-child { text-align: right; }
.neighbours .this { padding: 6px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); text-align: center; }
@media (max-width: 520px) { .neighbours { grid-template-columns: 1fr; } .neighbours li:last-child { text-align: left; } }
.topo { margin: 12px 0; } .topo-wrap { position: relative; }

/* topo -- photo topos (cragfinder/topos.py). Kept between these markers: the standalone
   export (scripts/topos_export.py) copies the block verbatim into a self-contained page. */
.topo-fig { margin: 14px 0; }
.topo-fig .topo-wrap { position: relative; }
.topo-wrap img { width: 100%; height: auto; display: block; border-radius: 8px; }
.topo-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.topo-line polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
/* A black halo under a coloured line, so it reads on pale granite AND in shadow -- one
   colour cannot do both, and a wall photograph has both in it. */
.topo-line .halo { stroke: #000; stroke-opacity: .55; stroke-width: 6px; }
.topo-line .ink { stroke: var(--topo-ink); stroke-width: 2.5px; }
.topo-line .mark { fill: #fff; stroke: #000; stroke-width: 1.5px; }
.topo-line .mark-anchor { fill: var(--topo-ink); }
.topo-lbl { position: absolute; transform: translate(-50%, -50%); min-width: 26px; height: 26px;
  padding: 0 5px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 system-ui, sans-serif; color: #111; background: var(--topo-ink);
  border: 2px solid #111; box-shadow: 0 0 0 2px rgba(255,255,255,.9); text-decoration: none; }
.topo-lbl:hover, .topo-lbl:focus { color: #111; }
/* Okabe-Ito: distinguishable with any common colour blindness. The NUMBER identifies the
   route, never the colour -- the palette only keeps neighbouring lines apart. */
.c0 { --topo-ink: #e69f00 } .c1 { --topo-ink: #56b4e9 } .c2 { --topo-ink: #f0e442 }
.c3 { --topo-ink: #d55e00 } .c4 { --topo-ink: #009e73 } .c5 { --topo-ink: #cc79a7 }
.topo-line.is-dim, .topo-lbl.is-dim { opacity: .35; }
.topo-line.is-hot .ink { stroke-width: 4px; }
.topo-lbl.is-hot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #111; }
.route-row.is-hot { background: rgba(240, 228, 66, .22); }
.topo-zoom { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
dialog.topo-full { max-width: 100vw; width: 100vw; max-height: 100vh; border: 0; padding: 0; background: #111; }
dialog.topo-full .topo-fig { margin: 0; }
dialog.topo-full figcaption { padding: 8px 12px; color: #ddd; }
@media print { .topo-lbl, .topo-line { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .topo-zoom { display: none; } }
/* end topo */
.topo img { width: 100%; height: auto; display: block; border-radius: 8px; }
.topo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.topo polyline { fill: none; stroke: #ffd400; stroke-width: .008; stroke-linejoin: round; filter: drop-shadow(0 0 .004px #000); }

.conditions { margin: 14px 0; }
.cond-grid { display: grid; gap: 10px; }
@media (min-width: 700px) { .cond-grid { grid-template-columns: 1fr 1fr; } }
.cond { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.cond-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.verdict { font-weight: 600; } .v-ok { color: var(--ok); } .v-warn { color: var(--warn); } .v-stop { color: var(--stop); }
.days { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .85rem; margin-top: 6px; }
.banner { padding: 10px 14px; border-radius: var(--radius); margin: 8px 0; }
.banner.warn { background: var(--warn-bg); } .banner.stop { background: var(--stop-bg); border: 1px solid var(--stop); }
#offline-banner { margin: 0; border-radius: 0; text-align: center; }
.stale-note { color: var(--warn); font-weight: 600; }
.crumbs { font-size: .88rem; margin-top: 8px; } .crumbs a { color: var(--muted); }
.page-h { margin-bottom: 8px; }

/* /beginners: written for someone who doesn't know the jargon yet. One narrow column for
   the whole page rather than prose in a 1200px shell, room to breathe between points, and no
   boxes -- the boxed-card look that suits a dense crag page reads as a wall of text when the
   text is what you came for. */
.narrow { max-width: 660px; margin: 0 auto; }
.narrow h2 { margin: 32px 0 10px; font-size: 1.3rem; line-height: 1.3; }
.narrow p { line-height: 1.6; }
.narrow ul { padding-left: 1.1em; margin: 10px 0; }
.narrow li { line-height: 1.6; margin-bottom: 12px; }
.narrow table { font-size: .95rem; }
.narrow td.tag { white-space: nowrap; }

/* /books: a shelf, not a grid. One book per row reads like a bibliography, which is what it
   is, and leaves room for the two buy links to sit side by side without a card each. */
.shelf { list-style: none; padding: 0; margin: 18px 0; }
.shelf > li { padding: 14px 0; border-top: 1px solid var(--line); }
.bk-title { margin: 0 0 2px; }
.bk-meta, .bk-covers { margin: 0 0 2px; }
.bk-own { color: var(--ok); font-weight: 600; }
.bk-buy { margin: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.buy-note { margin: 6px 0; }
.shop-card { margin: 16px 0 4px; }
details.more { margin: 24px 0; }
details.more > summary { cursor: pointer; padding: 10px 0; font-weight: 650; color: var(--accent); }
details.more[open] > summary { margin-bottom: 4px; }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--surface); border-radius: var(--radius); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .92rem; }
th.num, td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Every one of these selectors is prefixed with `.maplibregl-popup` for specificity, and it
   is load-bearing rather than tidy. `maplibre-gl.css` is linked AFTER `app.css`, and its own
   `.maplibregl-popup-content { background: #fff }` is a single class -- the same specificity
   as ours was, so source order decided it and MapLibre won.

   In light mode nobody noticed: white on white background is what we wanted anyway. In DARK
   mode every popup on the site drew --ink (#e8ece8) on #fff, a contrast ratio of 1.19 to 1,
   which is text you cannot read. It affected crag popups as much as the geology one; it
   surfaced now only because the geology popup gave someone a reason to tap the map in the
   dark. Measured before and after, both themes. */
.maplibregl-popup .maplibregl-popup-content { background: var(--surface); color: var(--ink); border-radius: 8px;
  font: 14px/1.4 system-ui, sans-serif; padding: 12px 14px; box-shadow: var(--shadow); }
.maplibregl-popup .maplibregl-popup-content a { font-weight: 650; }
.maplibregl-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.maplibregl-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
.maplibregl-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.maplibregl-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
/* The close button inherits MapLibre's dark colour too. */
.maplibregl-popup .maplibregl-popup-close-button { color: var(--ink); }
.crag-popup { display: flex; flex-direction: column; gap: 3px; }
.crag-popup .rname { font-size: 1.02rem; text-decoration: none; color: var(--ink); }
.crag-popup .rname:hover { color: var(--brand); }
.crag-popup > a.small { color: var(--brand); font-weight: 650; margin-top: 2px; }
.stars { color: #b07d00; font-weight: 650; font-size: .85rem; white-space: nowrap; }
:root[data-theme="dark"] .stars { color: #e2b34a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stars { color: #e2b34a; } }
.sort { margin: -4px 0 8px; } .sort a[aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }
.small-btn { min-height: 44px; padding: 0 10px; font-size: .88rem; font-weight: 600; }
.rep-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.rep { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--line); background: var(--bg); }
.rep.sev-stop { border-left-color: var(--stop); } .rep.sev-warn { border-left-color: var(--warn); }
.rep.sev-ok { border-left-color: var(--ok); }
.rep-votes { display: flex; gap: 6px; }
.rep-add summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.rep-add .chips-in { display: flex; flex-wrap: wrap; gap: 6px; }
.sos { padding: 10px 12px; border-radius: 8px; background: var(--stop-bg); margin-bottom: 8px; }
.sos-coords { display: block; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0; }
.facts-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.facts-dl dt { color: var(--muted); } .facts-dl dd { margin: 0; }
/* On a phone the label column is max-content, so "Climbing permit" takes ~180px of a 390px
   screen and a long value wraps into the ~190px left over -- measured at 7 lines for one
   Jeffco rule. Stacking below 560px gives the value the full width. */
@media (max-width: 560px) {
  .facts-dl { grid-template-columns: 1fr; gap: 2px; }
  .facts-dl dt { margin-top: 8px; font-size: .92em; }
  .facts-dl dt:first-child { margin-top: 0; }
}
.plan-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.plan-card ul { margin: 6px 0 0; padding-left: 18px; }
.why { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip.caution { border-color: var(--warn); color: var(--warn); }

/* Climber photo uploads */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); display: block; }
.photo-form { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-form p { flex-basis: 100%; margin: 4px 0 0; }
.photo-form label.btn { cursor: pointer; }
.photo-ok { color: var(--ok, #1a7f37); }
.photo-bad { color: var(--warn-fg, #b3261e); }

/* Deep cuts: archival items (historic sheets, photographs, pages). Hotlinked from the holding
   institution, so absent offline; the caption is the record and stays.

   A gallery matte rather than the page background, in both themes: a century-old photochrom
   on white looks like a broken image, and cropping one to fill a tile throws away the part
   the photographer framed. So every picture is CONTAINED on a dark ground, at whatever shape
   it happens to be, with a blurred copy of itself filling the rest of the frame. */
:root { --matte: #15181a; --matte-edge: rgba(0,0,0,.55); }

.archive-item { margin: 10px 0; }
.archive-frame { display: block; position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--matte); border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 18px 40px -24px rgba(0,0,0,.9), var(--shadow); }
.archive-frame img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.archive-item figcaption { margin-top: 8px; line-height: 1.45; }

/* The carousel. Photographs ride past as cards floating above the page: the one in the middle
   is lifted and lit, its neighbours sit back, smaller and dimmed, half in frame so it reads as
   a run of pictures rather than one picture at a time.

   The card itself carries a dark ground and the photograph is CONTAINED on it, never cropped
   to fill: a century-old stereograph is a shape the photographer chose. */
.lantern { margin: 6px 0 2px; }
.lantern-stage { position: relative; overflow: hidden; padding: 18px 0 26px; }
.lantern-track { display: flex; align-items: center; gap: 0;
  transition: transform .75s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.lantern-slide { flex: 0 0 78%; max-width: 560px; margin: 0; padding: 0 10px; box-sizing: border-box;
  transition: transform .75s cubic-bezier(.22, .61, .36, 1), opacity .6s ease, filter .6s ease;
  transform: scale(.86); opacity: .6; filter: saturate(.75); }
.lantern-slide.is-on { transform: scale(1); opacity: 1; filter: none; }

.lantern-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px;
  overflow: hidden; background: var(--matte); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 22px -10px rgba(0,0,0,.35);
  transition: box-shadow .6s ease; }
.lantern-slide.is-on .lantern-card {
  box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 26px 50px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.lantern-card:focus-visible { outline: 3px solid var(--accent, #2f7d5b); outline-offset: 3px; }

.lantern-back { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover;
  filter: blur(26px) saturate(1.2) brightness(.45); }
/* Absolute, so its height is the card's and `max-height` has something definite to resolve
   against. As a flow or grid item the percentage is dropped and a portrait photograph grows
   out of the frame, which is exactly what happened. */
.lantern-img { position: absolute; inset: 12px; margin: auto; display: block;
  max-width: calc(100% - 24px); max-height: calc(100% - 24px); width: auto; height: auto;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35); }

/* Without the script this is a plain column of cards: nothing stacked, nothing hidden. */
.lantern:not(.is-live) .lantern-track { display: grid; gap: 14px; transform: none; }
.lantern:not(.is-live) .lantern-slide { flex: none; max-width: none; transform: none; opacity: 1;
  filter: none; padding: 0; }
.lantern:not(.is-live) .lantern-cap { display: block; }

.lantern-bar { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lantern-btn { min-width: 34px; min-height: 34px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1rem; line-height: 1;
  box-shadow: var(--shadow); }
.lantern-btn:hover { border-color: var(--muted); }
.lantern-play { margin-left: auto; font-size: .72rem; letter-spacing: 1px; }
.lantern-dots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lantern-dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--muted); background: transparent; }
.lantern-dot[aria-current="true"] { background: var(--ink); border-color: var(--ink); }

.lantern-caps { margin-top: 10px; line-height: 1.45; }
.lantern.is-live .lantern-cap { display: none; }
.lantern.is-live .lantern-cap.is-on { display: block; }

@media (max-width: 560px) { .lantern-slide { flex-basis: 88%; } .lantern-card { aspect-ratio: 3 / 2; } }
/* Sliding is motion that starts on its own, so it does not start at all here; the controls
   stay, so every photograph is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .lantern-track, .lantern-slide, .lantern-card { transition: none; }
}
/* Auto-advance is motion that starts on its own, so it does not start at all here. The
   controls stay, so the whole set is still reachable. */

/* Map legend. The colour ramp carries the magnitude, so it needs decoding somewhere -- and a
   symbol layer on the map itself would need a glyph server this site deliberately doesn't use.
   Top-left, under the map's toggle buttons: at bottom-left it covered the Esri/USGS
   attribution, which has to stay legible.

   `top` clears the whole button stack, which is three deep (Topo, Geology, Access) at 10px,
   52px and 94px, each 36px high. At the old 56px the legend's own box sat ON TOP of Geology
   and Access and swallowed their clicks -- measured in a browser, not guessed: the legend
   ran y=866..961 while Geology was y=862..898. Geology had been unclickable on desktop since
   the legend landed; the third button is only what made it obvious. Adding a fourth button
   means moving this again. */
/* The page's side gutters, on wide screens only: 34 Colorado skylines, stacked, north at the
   top -- the Unknown Pleasures arrangement, John's idea, applied to this site's own data.

   Every line is a MEASUREMENT, not a drawing. cragfinder/horizon.py records the angle of the
   horizon around each crag: 72 rays, every 5 degrees, out to 3 km. The peaks in a line are
   the ridges that actually shade that crag, which is why the same numbers drive the
   sun-and-shade guides. So the decoration is a fact about the places this site is about,
   which is the standard everything else on the page is held to -- and the reason the
   original hero illustration had to go was that it was the one thing on the page that wasn't.

   Ordered by latitude so the strip is a transect down the state rather than an arbitrary
   pile. Each profile is normalised within itself, so a flat crag reads flat and a cirque
   reads tall instead of every line being stretched to the same height.

   Regenerate with scripts/make_gutter_art.py, which writes the data URI back into this file.
   Two motifs preceded it and are in the history: iso-contours of a Golden Gate Canyon
   photograph, and the bedding of a Colorado National Monument one.

   It lives in `background`, not an element, so it sits behind everything and cannot be
   reached by a pointer or a screen reader. `background-attachment: fixed` holds it still
   while the page scrolls, and `auto 100vh` sizes it to the viewport so it never repeats and
   there is no seam to hide.

   Only from 1500px: `main` is 1200px wide, so below that the gutters are narrower than the
   150px tile and the art would slide under the content. One mid grey serves both themes --
   it reads against the light paper and the near-black page alike -- so only the opacity
   changes, and there is no second file to keep in step. */
:root { --rock-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='320' viewBox='0 0 130 320' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%238a8d88' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.0,5.0 9.6,5.3 11.2,5.8 12.8,6.4 14.4,6.9 16.0,7.2 17.6,7.5 19.2,7.7 20.8,7.9 22.5,8.1 24.1,8.1 25.7,8.2 27.3,8.2 28.9,8.1 30.5,8.1 32.1,7.9 33.7,7.5 35.3,7.1 36.9,6.9 38.5,6.7 40.1,6.4 41.7,6.2 43.3,6.2 44.9,6.2 46.5,6.2 48.1,6.2 49.7,6.8 51.4,7.3 53.0,7.8 54.6,7.7 56.2,8.3 57.8,8.8 59.4,9.4 61.0,9.6 62.6,9.7 64.2,9.8 65.8,9.8 67.4,9.8 69.0,9.8 70.6,9.9 72.2,9.8 73.8,9.6 75.4,9.5 77.0,9.5 78.6,9.2 80.3,8.8 81.9,8.2 83.5,7.7 85.1,7.2 86.7,6.9 88.3,6.8 89.9,7.0 91.5,7.2 93.1,7.6 94.7,7.8 96.3,7.5 97.9,6.9 99.5,5.7 101.1,4.6 102.7,2.9 104.3,1.8 105.9,1.5 107.5,2.0 109.2,2.3 110.8,2.1 112.4,1.9 114.0,2.2 115.6,2.5 117.2,2.8 118.8,3.2 120.4,3.7 122.0,4.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,12.4 9.6,12.4 11.2,12.0 12.8,11.2 14.4,10.5 16.0,10.4 17.6,10.6 19.2,10.9 20.8,10.6 22.5,10.6 24.1,10.5 25.7,10.8 27.3,10.8 28.9,10.9 30.5,11.3 32.1,11.7 33.7,12.5 35.3,13.0 36.9,13.7 38.5,14.0 40.1,14.1 41.7,15.3 43.3,16.6 44.9,18.1 46.5,18.4 48.1,18.6 49.7,18.5 51.4,18.4 53.0,18.2 54.6,18.0 56.2,17.6 57.8,17.2 59.4,17.0 61.0,17.0 62.6,17.2 64.2,17.5 65.8,17.7 67.4,18.1 69.0,18.2 70.6,18.3 72.2,18.3 73.8,18.4 75.4,18.6 77.0,18.7 78.6,18.5 80.3,18.4 81.9,18.4 83.5,18.5 85.1,18.7 86.7,18.9 88.3,19.0 89.9,19.0 91.5,18.8 93.1,18.5 94.7,18.3 96.3,18.2 97.9,18.1 99.5,18.1 101.1,17.9 102.7,18.0 104.3,18.1 105.9,18.5 107.5,18.7 109.2,18.5 110.8,18.2 112.4,17.8 114.0,17.0 115.6,16.1 117.2,14.4 118.8,13.4 120.4,12.4 122.0,12.4' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,19.6 9.6,19.6 11.2,19.6 12.8,19.5 14.4,19.3 16.0,19.6 17.6,20.1 19.2,20.5 20.8,20.6 22.5,20.6 24.1,20.6 25.7,20.6 27.3,20.8 28.9,21.0 30.5,21.6 32.1,22.0 33.7,23.6 35.3,25.4 36.9,27.1 38.5,27.9 40.1,28.0 41.7,28.2 43.3,28.2 44.9,28.2 46.5,28.2 48.1,28.2 49.7,28.2 51.4,28.2 53.0,28.2 54.6,28.2 56.2,28.2 57.8,28.2 59.4,28.2 61.0,28.2 62.6,28.2 64.2,28.2 65.8,28.2 67.4,28.2 69.0,28.2 70.6,28.2 72.2,28.2 73.8,28.2 75.4,28.2 77.0,28.2 78.6,28.2 80.3,28.2 81.9,28.2 83.5,28.1 85.1,28.1 86.7,28.0 88.3,27.2 89.9,26.4 91.5,25.6 93.1,25.6 94.7,25.6 96.3,25.6 97.9,25.6 99.5,26.0 101.1,26.4 102.7,25.1 104.3,23.4 105.9,21.8 107.5,21.8 109.2,21.8 110.8,21.8 112.4,21.8 114.0,21.9 115.6,21.9 117.2,21.2 118.8,20.4 120.4,19.6 122.0,19.6' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,30.0 9.6,30.0 11.2,30.0 12.8,30.5 14.4,31.0 16.0,31.0 17.6,30.5 19.2,29.9 20.8,29.9 22.5,29.9 24.1,29.9 25.7,29.9 27.3,30.7 28.9,31.4 30.5,33.8 32.1,35.6 33.7,37.3 35.3,37.3 36.9,37.3 38.5,37.3 40.1,37.3 41.7,37.3 43.3,37.1 44.9,37.0 46.5,36.7 48.1,36.6 49.7,36.4 51.4,36.5 53.0,36.2 54.6,35.8 56.2,35.5 57.8,35.6 59.4,35.8 61.0,35.6 62.6,35.3 64.2,34.6 65.8,34.2 67.4,34.2 69.0,34.8 70.6,35.5 72.2,36.0 73.8,36.5 75.4,36.9 77.0,37.2 78.6,37.3 80.3,37.3 81.9,37.3 83.5,37.3 85.1,37.3 86.7,37.3 88.3,36.4 89.9,35.5 91.5,34.6 93.1,34.6 94.7,34.6 96.3,34.4 97.9,34.2 99.5,32.2 101.1,30.3 102.7,28.4 104.3,28.3 105.9,28.3 107.5,28.3 109.2,28.3 110.8,28.3 112.4,28.3 114.0,29.1 115.6,29.9 117.2,30.4 118.8,30.2 120.4,30.0 122.0,30.0' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,44.0 9.6,44.1 11.2,44.2 12.8,44.4 14.4,44.6 16.0,44.3 17.6,43.9 19.2,43.5 20.8,43.5 22.5,43.5 24.1,43.5 25.7,43.5 27.3,42.7 28.9,42.0 30.5,40.7 32.1,40.2 33.7,39.6 35.3,39.6 36.9,39.6 38.5,39.6 40.1,39.6 41.7,39.0 43.3,38.4 44.9,38.5 46.5,39.3 48.1,40.0 49.7,40.0 51.4,39.9 53.0,39.9 54.6,39.8 56.2,39.0 57.8,38.2 59.4,38.3 61.0,39.2 62.6,40.1 64.2,40.1 65.8,40.1 67.4,40.1 69.0,40.1 70.6,41.2 72.2,42.2 73.8,43.5 75.4,44.0 77.0,44.7 78.6,45.2 80.3,45.2 81.9,45.2 83.5,45.2 85.1,45.2 86.7,45.3 88.3,45.4 89.9,45.6 91.5,45.8 93.1,46.1 94.7,46.3 96.3,46.3 97.9,46.2 99.5,46.0 101.1,45.8 102.7,45.7 104.3,45.5 105.9,45.4 107.5,45.3 109.2,45.2 110.8,45.0 112.4,44.7 114.0,44.6 115.6,44.5 117.2,44.6 118.8,44.5 120.4,44.3 122.0,44.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,47.8 9.6,47.8 11.2,47.8 12.8,48.4 14.4,48.9 16.0,49.7 17.6,50.0 19.2,50.2 20.8,50.5 22.5,51.1 24.1,51.7 25.7,51.9 27.3,52.5 28.9,53.1 30.5,53.7 32.1,53.7 33.7,54.3 35.3,54.8 36.9,55.4 38.5,55.1 40.1,54.8 41.7,54.3 43.3,53.9 44.9,53.5 46.5,53.2 48.1,53.0 49.7,53.0 51.4,53.0 53.0,53.1 54.6,53.0 56.2,52.8 57.8,52.8 59.4,52.8 61.0,52.8 62.6,52.9 64.2,52.9 65.8,53.0 67.4,53.1 69.0,53.2 70.6,53.4 72.2,53.5 73.8,53.7 75.4,53.7 77.0,53.6 78.6,53.3 80.3,53.1 81.9,53.0 83.5,52.9 85.1,52.8 86.7,52.6 88.3,51.3 89.9,50.0 91.5,48.8 93.1,48.8 94.7,48.8 96.3,48.7 97.9,48.6 99.5,47.8 101.1,47.2 102.7,46.8 104.3,47.1 105.9,47.4 107.5,47.5 109.2,47.5 110.8,47.6 112.4,47.5 114.0,47.2 115.6,46.8 117.2,46.9 118.8,47.4 120.4,47.8 122.0,47.8' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,56.4 9.6,56.4 11.2,56.4 12.8,56.2 14.4,56.1 16.0,56.5 17.6,57.1 19.2,57.7 20.8,57.7 22.5,57.7 24.1,57.7 25.7,57.7 27.3,57.0 28.9,56.3 30.5,56.4 32.1,57.3 33.7,58.2 35.3,58.2 36.9,58.2 38.5,58.2 40.1,58.2 41.7,59.3 43.3,60.3 44.9,62.3 46.5,63.2 48.1,64.1 49.7,64.2 51.4,64.4 53.0,64.5 54.6,64.1 56.2,63.6 57.8,63.1 59.4,62.6 61.0,62.0 62.6,61.3 64.2,61.0 65.8,60.9 67.4,60.9 69.0,60.8 70.6,60.7 72.2,60.7 73.8,60.9 75.4,61.1 77.0,61.4 78.6,61.7 80.3,62.0 81.9,62.1 83.5,62.2 85.1,62.4 86.7,62.6 88.3,62.8 89.9,62.8 91.5,62.9 93.1,62.7 94.7,62.5 96.3,62.2 97.9,62.0 99.5,61.7 101.1,61.7 102.7,61.3 104.3,61.1 105.9,60.9 107.5,60.5 109.2,59.9 110.8,59.4 112.4,59.1 114.0,58.7 115.6,58.2 117.2,57.3 118.8,56.8 120.4,56.4 122.0,56.4' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,69.4 9.6,69.4 11.2,69.4 12.8,70.8 14.4,72.2 16.0,73.6 17.6,73.6 19.2,73.6 20.8,73.6 22.5,73.6 24.1,73.6 25.7,73.6 27.3,73.6 28.9,73.6 30.5,73.6 32.1,73.6 33.7,73.6 35.3,73.6 36.9,73.6 38.5,73.6 40.1,73.6 41.7,73.6 43.3,73.6 44.9,73.6 46.5,73.6 48.1,73.6 49.7,73.6 51.4,73.6 53.0,73.6 54.6,73.6 56.2,73.6 57.8,73.5 59.4,73.2 61.0,73.2 62.6,72.9 64.2,73.0 65.8,73.1 67.4,73.5 69.0,73.6 70.6,73.6 72.2,73.6 73.8,73.1 75.4,72.6 77.0,72.0 78.6,72.0 80.3,72.0 81.9,72.0 83.5,72.0 85.1,72.6 86.7,73.1 88.3,73.6 89.9,73.6 91.5,73.6 93.1,73.6 94.7,73.6 96.3,73.6 97.9,73.6 99.5,72.6 101.1,71.5 102.7,70.0 104.3,69.7 105.9,69.3 107.5,69.3 109.2,68.9 110.8,68.6 112.4,68.2 114.0,67.0 115.6,65.8 117.2,65.4 118.8,66.2 120.4,67.7 122.0,68.1' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,75.3 9.6,75.1 11.2,74.8 12.8,74.5 14.4,74.3 16.0,74.6 17.6,75.3 19.2,76.0 20.8,76.7 22.5,78.2 24.1,79.9 25.7,81.3 27.3,81.7 28.9,82.2 30.5,82.5 32.1,82.5 33.7,82.1 35.3,81.6 36.9,81.1 38.5,80.6 40.1,80.1 41.7,79.6 43.3,79.1 44.9,78.3 46.5,77.5 48.1,77.0 49.7,76.7 51.4,76.0 53.0,75.3 54.6,74.9 56.2,74.6 57.8,74.3 59.4,73.9 61.0,73.8 62.6,74.3 64.2,74.8 65.8,75.3 67.4,75.7 69.0,76.2 70.6,76.7 72.2,76.8 73.8,77.0 75.4,77.2 77.0,77.5 78.6,77.7 80.3,77.9 81.9,78.3 83.5,79.0 85.1,79.7 86.7,80.4 88.3,79.7 89.9,78.8 91.5,77.5 93.1,77.3 94.7,76.5 96.3,75.7 97.9,74.7 99.5,74.4 101.1,74.3 102.7,74.2 104.3,74.2 105.9,74.3 107.5,74.5 109.2,74.9 110.8,75.2 112.4,75.6 114.0,75.9 115.6,76.0 117.2,76.1 118.8,76.0 120.4,75.9 122.0,75.9' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,87.7 9.6,87.5 11.2,86.5 12.8,85.3 14.4,84.2 16.0,83.7 17.6,84.1 19.2,84.2 20.8,83.9 22.5,84.1 24.1,85.2 25.7,86.8 27.3,87.7 28.9,88.6 30.5,89.5 32.1,90.4 33.7,90.6 35.3,90.9 36.9,91.1 38.5,91.5 40.1,91.4 41.7,90.9 43.3,90.3 44.9,90.5 46.5,91.1 48.1,91.7 49.7,91.8 51.4,91.8 53.0,91.8 54.6,91.8 56.2,91.8 57.8,91.8 59.4,91.8 61.0,91.8 62.6,91.8 64.2,91.8 65.8,91.8 67.4,91.6 69.0,91.2 70.6,90.5 72.2,90.0 73.8,89.8 75.4,89.6 77.0,89.1 78.6,88.9 80.3,89.0 81.9,89.6 83.5,90.1 85.1,90.4 86.7,90.6 88.3,90.3 89.9,89.5 91.5,88.1 93.1,87.1 94.7,86.4 96.3,86.4 97.9,86.7 99.5,87.5 101.1,88.6 102.7,88.5 104.3,87.9 105.9,86.9 107.5,86.9 109.2,86.9 110.8,86.8 112.4,86.5 114.0,85.9 115.6,85.7 117.2,85.8 118.8,86.5 120.4,87.2 122.0,87.6' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,91.9 9.6,91.9 11.2,91.9 12.8,92.1 14.4,92.2 16.0,93.0 17.6,93.6 19.2,94.3 20.8,94.3 22.5,94.3 24.1,94.3 25.7,94.3 27.3,93.9 28.9,93.5 30.5,94.0 32.1,94.9 33.7,96.2 35.3,96.6 36.9,97.1 38.5,97.1 40.1,97.1 41.7,98.4 43.3,99.6 44.9,100.9 46.5,100.9 48.1,100.9 49.7,100.9 51.4,100.9 53.0,100.9 54.6,100.9 56.2,100.9 57.8,100.9 59.4,100.9 61.0,100.9 62.6,100.9 64.2,100.9 65.8,100.9 67.4,100.9 69.0,100.9 70.6,100.9 72.2,100.9 73.8,100.8 75.4,100.7 77.0,100.6 78.6,100.5 80.3,100.4 81.9,100.6 83.5,100.8 85.1,100.9 86.7,100.8 88.3,100.7 89.9,100.4 91.5,100.3 93.1,100.2 94.7,100.4 96.3,100.7 97.9,100.8 99.5,100.3 101.1,99.8 102.7,98.1 104.3,96.8 105.9,95.5 107.5,95.5 109.2,95.2 110.8,94.9 112.4,94.6 114.0,93.8 115.6,93.0 117.2,92.1 118.8,92.0 120.4,91.9 122.0,91.9' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,101.6 9.6,101.6 11.2,101.6 12.8,101.9 14.4,102.2 16.0,102.9 17.6,103.4 19.2,103.9 20.8,104.1 22.5,104.8 24.1,105.5 25.7,106.0 27.3,106.5 28.9,107.4 30.5,108.5 32.1,109.2 33.7,109.6 35.3,109.8 36.9,109.9 38.5,109.8 40.1,109.6 41.7,109.4 43.3,109.3 44.9,109.1 46.5,108.9 48.1,108.7 49.7,108.3 51.4,107.8 53.0,107.3 54.6,106.8 56.2,106.4 57.8,106.2 59.4,106.2 61.0,106.3 62.6,106.3 64.2,106.4 65.8,106.7 67.4,107.0 69.0,107.3 70.6,107.5 72.2,107.6 73.8,107.8 75.4,107.9 77.0,108.3 78.6,108.5 80.3,108.5 81.9,108.3 83.5,108.0 85.1,107.8 86.7,107.5 88.3,107.0 89.9,106.6 91.5,106.3 93.1,106.3 94.7,106.3 96.3,105.6 97.9,104.8 99.5,103.3 101.1,102.6 102.7,102.0 104.3,102.3 105.9,102.5 107.5,102.5 109.2,102.2 110.8,102.0 112.4,101.8 114.0,101.5 115.6,101.3 117.2,101.2 118.8,101.4 120.4,101.6 122.0,101.6' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,113.2 9.6,113.2 11.2,113.2 12.8,114.3 14.4,115.8 16.0,117.6 17.6,118.4 19.2,118.8 20.8,118.9 22.5,119.0 24.1,118.8 25.7,118.7 27.3,118.5 28.9,118.3 30.5,118.0 32.1,117.7 33.7,117.3 35.3,116.8 36.9,116.1 38.5,115.6 40.1,115.1 41.7,115.2 43.3,115.1 44.9,115.2 46.5,115.0 48.1,114.9 49.7,114.7 51.4,114.7 53.0,114.8 54.6,115.0 56.2,115.1 57.8,115.2 59.4,115.4 61.0,115.6 62.6,115.7 64.2,115.8 65.8,115.8 67.4,116.0 69.0,116.4 70.6,116.9 72.2,117.3 73.8,117.7 75.4,118.1 77.0,118.3 78.6,118.5 80.3,118.2 81.9,118.0 83.5,117.5 85.1,116.6 86.7,115.7 88.3,114.0 89.9,113.2 91.5,112.3 93.1,112.3 94.7,112.3 96.3,112.3 97.9,112.3 99.5,111.6 101.1,110.8 102.7,110.5 104.3,111.0 105.9,111.4 107.5,111.5 109.2,111.5 110.8,111.5 112.4,111.5 114.0,111.1 115.6,110.7 117.2,111.3 118.8,112.3 120.4,113.2 122.0,113.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,126.8 9.6,127.2 11.2,127.7 12.8,127.8 14.4,127.3 16.0,127.0 17.6,127.1 19.2,127.5 20.8,127.5 22.5,126.8 24.1,125.7 25.7,124.8 27.3,124.1 28.9,123.7 30.5,123.5 32.1,123.3 33.7,123.1 35.3,123.0 36.9,122.8 38.5,122.9 40.1,123.2 41.7,123.4 43.3,123.4 44.9,123.1 46.5,123.1 48.1,123.0 49.7,123.2 51.4,122.9 53.0,122.7 54.6,122.2 56.2,121.2 57.8,120.2 59.4,119.6 61.0,120.1 62.6,120.6 64.2,120.6 65.8,120.6 67.4,120.6 69.0,120.6 70.6,122.0 72.2,123.4 73.8,125.7 75.4,126.3 77.0,126.8 78.6,126.1 80.3,125.7 81.9,125.2 83.5,124.9 85.1,124.7 86.7,124.7 88.3,124.8 89.9,124.9 91.5,124.8 93.1,124.6 94.7,124.1 96.3,123.7 97.9,123.3 99.5,122.9 101.1,122.6 102.7,122.7 104.3,123.2 105.9,123.6 107.5,124.0 109.2,124.2 110.8,124.3 112.4,124.4 114.0,124.7 115.6,124.9 117.2,125.1 118.8,125.4 120.4,125.7 122.0,125.9' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,128.3 9.6,128.3 11.2,128.3 12.8,128.4 14.4,128.6 16.0,129.7 17.6,130.8 19.2,131.9 20.8,132.0 22.5,132.1 24.1,132.1 25.7,132.1 27.3,132.8 28.9,133.5 30.5,134.1 32.1,134.0 33.7,134.0 35.3,134.3 36.9,134.6 38.5,134.9 40.1,135.1 41.7,135.3 43.3,135.6 44.9,135.9 46.5,136.4 48.1,136.7 49.7,136.9 51.4,137.0 53.0,137.1 54.6,137.2 56.2,137.1 57.8,137.0 59.4,136.8 61.0,136.6 62.6,136.5 64.2,136.3 65.8,136.0 67.4,135.9 69.0,135.8 70.6,135.8 72.2,135.7 73.8,135.6 75.4,135.4 77.0,135.4 78.6,135.4 80.3,135.4 81.9,135.4 83.5,135.4 85.1,135.5 86.7,135.6 88.3,133.7 89.9,131.8 91.5,129.8 93.1,129.8 94.7,129.8 96.3,129.8 97.9,129.8 99.5,129.4 101.1,129.1 102.7,128.9 104.3,129.0 105.9,129.2 107.5,129.2 109.2,129.2 110.8,129.2 112.4,129.2 114.0,128.9 115.6,128.6 117.2,128.3 118.8,128.3 120.4,128.3 122.0,128.3' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,141.0 9.6,141.5 11.2,141.9 12.8,143.3 14.4,144.1 16.0,145.4 17.6,145.9 19.2,146.4 20.8,146.4 22.5,146.3 24.1,146.3 25.7,146.3 27.3,146.3 28.9,146.4 30.5,146.4 32.1,146.4 33.7,146.4 35.3,146.4 36.9,146.4 38.5,146.4 40.1,146.4 41.7,146.4 43.3,146.4 44.9,146.4 46.5,146.4 48.1,146.4 49.7,146.4 51.4,146.4 53.0,146.3 54.6,146.2 56.2,146.0 57.8,145.9 59.4,146.0 61.0,146.1 62.6,146.2 64.2,146.0 65.8,145.5 67.4,145.0 69.0,144.6 70.6,144.2 72.2,144.1 73.8,144.0 75.4,143.9 77.0,143.8 78.6,143.8 80.3,143.6 81.9,143.2 83.5,142.7 85.1,142.2 86.7,141.6 88.3,141.2 89.9,141.0 91.5,141.2 93.1,141.3 94.7,141.1 96.3,140.8 97.9,140.1 99.5,139.1 101.1,138.3 102.7,137.6 104.3,137.5 105.9,137.4 107.5,137.8 109.2,137.9 110.8,138.1 112.4,137.7 114.0,137.6 115.6,137.5 117.2,137.8 118.8,138.1 120.4,139.3 122.0,139.7' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,150.4 9.6,150.6 11.2,151.1 12.8,151.8 14.4,152.7 16.0,153.5 17.6,154.1 19.2,154.6 20.8,155.0 22.5,155.3 24.1,155.5 25.7,155.5 27.3,155.5 28.9,155.5 30.5,155.5 32.1,155.5 33.7,155.5 35.3,155.5 36.9,155.1 38.5,154.6 40.1,153.7 41.7,152.8 43.3,151.8 44.9,150.9 46.5,150.0 48.1,149.1 49.7,148.4 51.4,147.7 53.0,147.4 54.6,147.2 56.2,146.9 57.8,146.7 59.4,146.7 61.0,147.0 62.6,147.3 64.2,147.5 65.8,147.5 67.4,147.3 69.0,147.2 70.6,147.2 72.2,147.3 73.8,147.6 75.4,147.8 77.0,147.9 78.6,147.9 80.3,147.9 81.9,148.1 83.5,148.3 85.1,148.8 86.7,149.4 88.3,150.2 89.9,151.0 91.5,151.8 93.1,152.9 94.7,154.2 96.3,154.9 97.9,154.9 99.5,154.6 101.1,154.0 102.7,153.6 104.3,153.0 105.9,152.5 107.5,152.3 109.2,152.4 110.8,152.3 112.4,152.0 114.0,151.7 115.6,151.3 117.2,150.9 118.8,150.7 120.4,150.6 122.0,150.5' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,156.0 9.6,156.0 11.2,156.0 12.8,155.9 14.4,155.7 16.0,156.6 17.6,157.7 19.2,158.7 20.8,158.7 22.5,158.7 24.1,158.7 25.7,158.7 27.3,158.3 28.9,157.9 30.5,159.3 32.1,161.1 33.7,163.3 35.3,163.6 36.9,164.0 38.5,164.0 40.1,164.0 41.7,164.2 43.3,164.2 44.9,164.1 46.5,163.7 48.1,163.2 49.7,162.6 51.4,162.3 53.0,162.5 54.6,162.9 56.2,163.1 57.8,163.2 59.4,163.2 61.0,163.2 62.6,163.4 64.2,163.7 65.8,164.0 67.4,164.2 69.0,164.2 70.6,164.2 72.2,163.9 73.8,163.0 75.4,162.1 77.0,161.5 78.6,161.4 80.3,160.9 81.9,160.4 83.5,160.0 85.1,159.6 86.7,159.1 88.3,158.6 89.9,158.5 91.5,158.4 93.1,158.4 94.7,158.4 96.3,158.4 97.9,158.4 99.5,158.4 101.1,158.4 102.7,158.6 104.3,158.8 105.9,159.1 107.5,159.1 109.2,159.0 110.8,158.9 112.4,158.9 114.0,158.3 115.6,157.7 117.2,156.8 118.8,156.4 120.4,156.0 122.0,156.0' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,167.9 9.6,167.8 11.2,167.7 12.8,166.9 14.4,166.2 16.0,165.7 17.6,166.0 19.2,166.2 20.8,165.9 22.5,165.9 24.1,165.8 25.7,165.9 27.3,165.5 28.9,165.1 30.5,165.2 32.1,165.9 33.7,166.5 35.3,166.5 36.9,166.5 38.5,166.5 40.1,166.5 41.7,166.9 43.3,167.8 44.9,169.1 46.5,170.3 48.1,171.1 49.7,171.5 51.4,171.5 53.0,171.5 54.6,171.5 56.2,172.2 57.8,172.9 59.4,173.6 61.0,173.6 62.6,173.6 64.2,173.6 65.8,173.6 67.4,173.6 69.0,173.6 70.6,173.6 72.2,173.0 73.8,172.0 75.4,170.6 77.0,169.5 78.6,168.7 80.3,168.2 81.9,168.0 83.5,167.9 85.1,168.0 86.7,167.9 88.3,167.7 89.9,167.7 91.5,168.0 93.1,168.7 94.7,169.5 96.3,170.0 97.9,170.1 99.5,169.6 101.1,169.1 102.7,168.8 104.3,168.7 105.9,168.8 107.5,168.9 109.2,168.6 110.8,168.3 112.4,168.0 114.0,167.9 115.6,168.0 117.2,167.8 118.8,167.8 120.4,167.8 122.0,167.8' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,177.9 9.6,177.9 11.2,177.9 12.8,179.5 14.4,181.1 16.0,182.7 17.6,182.6 19.2,182.7 20.8,182.7 22.5,182.7 24.1,182.7 25.7,182.7 27.3,182.7 28.9,182.7 30.5,182.6 32.1,182.6 33.7,182.6 35.3,182.6 36.9,182.5 38.5,182.4 40.1,182.4 41.7,182.5 43.3,182.5 44.9,182.6 46.5,182.7 48.1,182.7 49.7,182.6 51.4,182.6 53.0,182.7 54.6,182.7 56.2,182.7 57.8,182.7 59.4,182.7 61.0,182.7 62.6,182.6 64.2,182.6 65.8,182.7 67.4,182.7 69.0,182.7 70.6,182.7 72.2,182.7 73.8,182.7 75.4,182.7 77.0,182.7 78.6,182.7 80.3,182.7 81.9,182.7 83.5,182.7 85.1,182.7 86.7,182.6 88.3,182.7 89.9,182.7 91.5,182.7 93.1,182.7 94.7,182.6 96.3,182.6 97.9,182.6 99.5,182.7 101.1,182.7 102.7,181.3 104.3,179.8 105.9,178.4 107.5,178.3 109.2,178.1 110.8,177.9 112.4,177.7 114.0,176.4 115.6,175.0 117.2,175.1 118.8,176.5 120.4,177.9 122.0,177.9' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,184.2 9.6,184.2 11.2,184.2 12.8,183.9 14.4,183.6 16.0,184.0 17.6,184.7 19.2,185.4 20.8,185.4 22.5,185.4 24.1,185.4 25.7,185.4 27.3,186.0 28.9,186.5 30.5,187.4 32.1,187.8 33.7,188.2 35.3,188.3 36.9,188.4 38.5,188.6 40.1,188.7 41.7,189.3 43.3,190.0 44.9,190.8 46.5,191.4 48.1,191.6 49.7,191.8 51.4,191.8 53.0,191.8 54.6,191.8 56.2,191.8 57.8,191.8 59.4,191.8 61.0,191.8 62.6,191.8 64.2,191.6 65.8,191.4 67.4,190.9 69.0,190.6 70.6,190.3 72.2,190.1 73.8,190.0 75.4,189.8 77.0,189.9 78.6,189.9 80.3,189.8 81.9,189.5 83.5,189.2 85.1,189.0 86.7,188.8 88.3,188.8 89.9,188.7 91.5,188.3 93.1,188.0 94.7,187.7 96.3,187.1 97.9,186.6 99.5,185.6 101.1,185.1 102.7,184.5 104.3,184.3 105.9,184.2 107.5,184.5 109.2,184.4 110.8,184.3 112.4,183.9 114.0,183.5 115.6,183.2 117.2,183.3 118.8,183.7 120.4,184.2 122.0,184.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,193.8 9.6,193.8 11.2,193.8 12.8,194.4 14.4,195.1 16.0,196.3 17.6,197.0 19.2,197.7 20.8,197.9 22.5,197.9 24.1,197.9 25.7,197.9 27.3,198.9 28.9,199.9 30.5,200.8 32.1,200.8 33.7,200.8 35.3,200.7 36.9,200.6 38.5,200.5 40.1,200.4 41.7,200.5 43.3,200.4 44.9,200.4 46.5,200.3 48.1,200.3 49.7,200.1 51.4,200.0 53.0,200.1 54.6,200.2 56.2,200.3 57.8,200.4 59.4,200.4 61.0,200.5 62.6,200.6 64.2,200.7 65.8,200.7 67.4,200.7 69.0,200.8 70.6,200.8 72.2,200.8 73.8,200.8 75.4,200.8 77.0,200.8 78.6,200.8 80.3,200.6 81.9,200.3 83.5,199.7 85.1,199.0 86.7,198.3 88.3,197.2 89.9,196.4 91.5,195.4 93.1,195.0 94.7,194.6 96.3,194.1 97.9,193.6 99.5,192.9 101.1,192.6 102.7,192.1 104.3,192.0 105.9,191.9 107.5,192.0 109.2,192.0 110.8,192.1 112.4,192.1 114.0,192.1 115.6,192.1 117.2,192.4 118.8,192.7 120.4,193.2 122.0,193.4' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,201.0 9.6,201.0 11.2,201.0 12.8,201.8 14.4,202.5 16.0,204.4 17.6,205.4 19.2,206.5 20.8,206.5 22.5,206.5 24.1,206.5 25.7,206.5 27.3,207.5 28.9,208.6 30.5,209.8 32.1,209.9 33.7,210.0 35.3,210.0 36.9,210.0 38.5,210.0 40.1,210.0 41.7,210.0 43.3,210.0 44.9,210.0 46.5,210.0 48.1,210.0 49.7,210.0 51.4,210.0 53.0,210.0 54.6,210.0 56.2,210.0 57.8,210.0 59.4,210.0 61.0,210.0 62.6,210.0 64.2,210.0 65.8,210.0 67.4,210.0 69.0,210.0 70.6,210.0 72.2,210.0 73.8,210.0 75.4,210.0 77.0,210.0 78.6,210.0 80.3,209.8 81.9,209.7 83.5,209.5 85.1,209.3 86.7,209.0 88.3,208.5 89.9,208.1 91.5,207.9 93.1,207.7 94.7,207.5 96.3,207.3 97.9,207.3 99.5,206.4 101.1,205.5 102.7,204.4 104.3,204.2 105.9,203.9 107.5,203.9 109.2,203.8 110.8,203.7 112.4,203.6 114.0,202.7 115.6,201.9 117.2,201.0 118.8,201.0 120.4,201.0 122.0,201.0' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,210.5 9.6,210.5 11.2,210.5 12.8,210.4 14.4,210.2 16.0,210.5 17.6,210.9 19.2,211.3 20.8,211.3 22.5,211.3 24.1,211.3 25.7,211.3 27.3,211.1 28.9,210.8 30.5,211.2 32.1,211.9 33.7,212.8 35.3,213.1 36.9,213.3 38.5,213.3 40.1,213.3 41.7,214.7 43.3,216.2 44.9,217.9 46.5,218.4 48.1,218.8 49.7,218.9 51.4,218.8 53.0,218.4 54.6,217.9 56.2,217.5 57.8,217.3 59.4,217.2 61.0,217.0 62.6,216.7 64.2,216.4 65.8,216.2 67.4,216.0 69.0,215.9 70.6,215.9 72.2,215.9 73.8,216.0 75.4,216.1 77.0,216.3 78.6,216.5 80.3,216.8 81.9,217.2 83.5,217.8 85.1,218.3 86.7,218.6 88.3,218.9 89.9,219.0 91.5,219.1 93.1,219.1 94.7,219.1 96.3,219.0 97.9,218.6 99.5,217.9 101.1,217.0 102.7,216.1 104.3,215.5 105.9,215.1 107.5,215.0 109.2,214.5 110.8,214.0 112.4,213.4 114.0,212.6 115.6,211.8 117.2,211.0 118.8,210.8 120.4,210.5 122.0,210.5' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,228.2 9.6,228.2 11.2,228.2 12.8,228.2 14.4,228.2 16.0,228.1 17.6,228.1 19.2,228.0 20.8,228.0 22.5,227.9 24.1,226.4 25.7,224.6 27.3,222.9 28.9,222.7 30.5,224.6 32.1,226.4 33.7,228.2 35.3,228.2 36.9,228.2 38.5,228.2 40.1,228.2 41.7,228.1 43.3,228.0 44.9,227.8 46.5,227.9 48.1,227.8 49.7,227.4 51.4,226.4 53.0,225.5 54.6,224.6 56.2,223.9 57.8,223.3 59.4,222.3 61.0,221.1 62.6,220.1 64.2,220.0 65.8,219.9 67.4,219.9 69.0,219.4 70.6,219.6 72.2,219.9 73.8,220.8 75.4,221.4 77.0,222.0 78.6,222.2 80.3,222.1 81.9,221.8 83.5,221.5 85.1,221.7 86.7,221.8 88.3,221.6 89.9,221.3 91.5,221.2 93.1,221.3 94.7,221.8 96.3,222.7 97.9,223.3 99.5,223.4 101.1,223.5 102.7,223.8 104.3,224.2 105.9,224.5 107.5,224.8 109.2,225.6 110.8,226.3 112.4,226.7 114.0,226.6 115.6,226.5 117.2,227.0 118.8,227.6 120.4,228.2 122.0,228.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,228.8 9.6,228.8 11.2,228.8 12.8,228.9 14.4,229.0 16.0,230.2 17.6,231.3 19.2,232.3 20.8,232.3 22.5,232.3 24.1,232.3 25.7,232.3 27.3,234.0 28.9,235.6 30.5,237.2 32.1,237.1 33.7,237.1 35.3,237.2 36.9,237.2 38.5,237.1 40.1,236.9 41.7,236.8 43.3,236.8 44.9,236.8 46.5,236.8 48.1,236.8 49.7,236.8 51.4,236.8 53.0,236.6 54.6,236.4 56.2,236.4 57.8,236.3 59.4,236.3 61.0,236.2 62.6,236.1 64.2,236.1 65.8,236.0 67.4,235.9 69.0,235.8 70.6,235.7 72.2,235.7 73.8,235.9 75.4,236.2 77.0,236.4 78.6,236.5 80.3,236.7 81.9,236.6 83.5,236.4 85.1,235.4 86.7,234.5 88.3,232.3 89.9,230.9 91.5,229.6 93.1,229.6 94.7,229.6 96.3,229.6 97.9,229.6 99.5,229.3 101.1,229.0 102.7,228.9 104.3,229.2 105.9,229.4 107.5,229.4 109.2,229.4 110.8,229.4 112.4,229.4 114.0,229.0 115.6,228.7 117.2,228.4 118.8,228.6 120.4,228.8 122.0,228.8' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,244.4 9.6,244.8 11.2,245.2 12.8,245.6 14.4,245.5 16.0,245.4 17.6,245.3 19.2,245.1 20.8,245.1 22.5,245.2 24.1,245.2 25.7,244.9 27.3,244.6 28.9,244.3 30.5,244.2 32.1,244.0 33.7,243.9 35.3,243.8 36.9,243.7 38.5,243.4 40.1,242.9 41.7,242.2 43.3,241.5 44.9,240.9 46.5,240.1 48.1,239.5 49.7,238.5 51.4,238.1 53.0,237.6 54.6,238.2 56.2,238.4 57.8,238.7 59.4,238.5 61.0,238.5 62.6,238.3 64.2,238.3 65.8,238.5 67.4,239.0 69.0,239.6 70.6,240.0 72.2,240.4 73.8,240.6 75.4,240.8 77.0,241.1 78.6,241.6 80.3,242.3 81.9,243.1 83.5,244.0 85.1,245.0 86.7,245.8 88.3,246.1 89.9,245.9 91.5,245.4 93.1,244.9 94.7,243.9 96.3,243.0 97.9,241.7 99.5,240.8 101.1,239.7 102.7,239.4 104.3,239.2 105.9,239.4 107.5,239.5 109.2,239.3 110.8,239.0 112.4,239.3 114.0,239.7 115.6,240.3 117.2,240.9 118.8,241.6 120.4,242.6 122.0,242.8' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,247.7 9.6,247.6 11.2,247.2 12.8,246.9 14.4,246.6 16.0,247.0 17.6,247.6 19.2,248.2 20.8,249.6 22.5,251.1 24.1,252.7 25.7,252.9 27.3,253.6 28.9,254.3 30.5,255.0 32.1,255.0 33.7,255.1 35.3,255.2 36.9,255.3 38.5,255.0 40.1,254.6 41.7,253.5 43.3,252.8 44.9,250.6 46.5,249.1 48.1,247.6 49.7,247.2 51.4,247.5 53.0,247.8 54.6,249.1 56.2,250.2 57.8,251.1 59.4,252.3 61.0,253.1 62.6,254.0 64.2,254.2 65.8,254.4 67.4,254.5 69.0,254.8 70.6,254.9 72.2,255.0 73.8,255.1 75.4,255.1 77.0,255.1 78.6,255.1 80.3,255.1 81.9,255.1 83.5,255.1 85.1,254.9 86.7,254.6 88.3,254.5 89.9,254.4 91.5,254.3 93.1,254.1 94.7,253.9 96.3,253.8 97.9,253.6 99.5,253.5 101.1,253.4 102.7,253.2 104.3,253.2 105.9,253.1 107.5,253.1 109.2,253.1 110.8,253.3 112.4,253.5 114.0,253.6 115.6,253.4 117.2,252.3 118.8,250.8 120.4,249.1 122.0,248.4' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,261.5 9.6,261.7 11.2,262.0 12.8,262.2 14.4,262.3 16.0,262.6 17.6,263.1 19.2,263.6 20.8,263.9 22.5,264.2 24.1,264.5 25.7,264.5 27.3,264.5 28.9,264.5 30.5,264.5 32.1,264.5 33.7,264.5 35.3,264.5 36.9,264.5 38.5,264.5 40.1,264.5 41.7,264.5 43.3,264.5 44.9,264.5 46.5,264.5 48.1,264.5 49.7,264.2 51.4,263.6 53.0,262.9 54.6,262.4 56.2,262.2 57.8,262.1 59.4,262.1 61.0,261.9 62.6,261.8 64.2,261.6 65.8,261.4 67.4,261.2 69.0,260.8 70.6,260.4 72.2,260.2 73.8,260.2 75.4,260.3 77.0,260.5 78.6,260.6 80.3,260.4 81.9,260.2 83.5,260.0 85.1,259.2 86.7,258.4 88.3,256.9 89.9,256.2 91.5,255.5 93.1,255.5 94.7,255.5 96.3,255.5 97.9,255.5 99.5,255.6 101.1,255.7 102.7,256.0 104.3,256.1 105.9,256.2 107.5,256.2 109.2,256.2 110.8,256.2 112.4,256.2 114.0,257.9 115.6,259.5 117.2,261.1 118.8,261.0 120.4,261.1 122.0,261.1' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,272.9 9.6,272.8 11.2,272.6 12.8,272.5 14.4,272.4 16.0,272.4 17.6,272.3 19.2,272.3 20.8,272.0 22.5,271.7 24.1,271.5 25.7,271.5 27.3,271.7 28.9,271.8 30.5,271.9 32.1,271.9 33.7,271.8 35.3,271.8 36.9,272.0 38.5,272.2 40.1,272.5 41.7,272.5 43.3,272.5 44.9,272.4 46.5,272.4 48.1,272.4 49.7,272.5 51.4,272.6 53.0,272.7 54.6,272.4 56.2,271.9 57.8,271.1 59.4,270.1 61.0,269.4 62.6,268.8 64.2,268.7 65.8,268.6 67.4,268.2 69.0,267.8 70.6,266.9 72.2,266.3 73.8,265.6 75.4,265.3 77.0,265.0 78.6,265.0 80.3,265.0 81.9,265.0 83.5,265.0 85.1,264.9 86.7,264.8 88.3,264.8 89.9,265.0 91.5,265.1 93.1,265.1 94.7,265.1 96.3,265.1 97.9,265.1 99.5,266.1 101.1,267.1 102.7,268.9 104.3,269.7 105.9,270.4 107.5,270.5 109.2,271.0 110.8,271.4 112.4,271.8 114.0,272.3 115.6,272.9 117.2,273.4 118.8,273.4 120.4,273.2 122.0,273.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,282.6 9.6,282.6 11.2,282.6 12.8,279.9 14.4,277.1 16.0,274.2 17.6,273.9 19.2,273.7 20.8,273.7 22.5,273.7 24.1,273.7 25.7,273.7 27.3,276.5 28.9,279.3 30.5,282.2 32.1,282.4 33.7,282.6 35.3,282.7 36.9,282.6 38.5,282.4 40.1,282.3 41.7,282.4 43.3,282.5 44.9,282.6 46.5,282.4 48.1,282.3 49.7,282.3 51.4,282.0 53.0,281.6 54.6,281.0 56.2,280.7 57.8,280.7 59.4,281.1 61.0,281.4 62.6,281.5 64.2,281.5 65.8,281.5 67.4,281.4 69.0,281.4 70.6,281.3 72.2,281.3 73.8,281.2 75.4,281.2 77.0,281.1 78.6,281.1 80.3,281.1 81.9,281.1 83.5,281.2 85.1,281.4 86.7,281.6 88.3,281.8 89.9,281.9 91.5,282.0 93.1,281.9 94.7,281.5 96.3,281.1 97.9,280.7 99.5,280.1 101.1,279.6 102.7,279.1 104.3,279.1 105.9,279.0 107.5,279.4 109.2,280.1 110.8,280.5 112.4,280.8 114.0,280.7 115.6,280.9 117.2,281.3 118.8,281.9 120.4,282.4 122.0,282.6' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,291.0 9.6,290.7 11.2,289.9 12.8,289.2 14.4,288.8 16.0,288.6 17.6,288.6 19.2,288.4 20.8,288.3 22.5,287.8 24.1,287.4 25.7,286.7 27.3,286.3 28.9,286.1 30.5,286.2 32.1,286.2 33.7,285.6 35.3,284.9 36.9,284.1 38.5,283.6 40.1,283.1 41.7,283.1 43.3,283.6 44.9,284.2 46.5,284.7 48.1,284.6 49.7,284.3 51.4,284.1 53.0,284.1 54.6,283.8 56.2,283.5 57.8,283.4 59.4,283.6 61.0,283.8 62.6,284.0 64.2,284.3 65.8,284.6 67.4,284.7 69.0,284.6 70.6,284.6 72.2,284.5 73.8,284.7 75.4,284.8 77.0,284.8 78.6,284.6 80.3,284.4 81.9,284.3 83.5,284.4 85.1,284.3 86.7,284.2 88.3,284.0 89.9,284.4 91.5,284.8 93.1,285.3 94.7,285.5 96.3,285.8 97.9,286.3 99.5,286.9 101.1,287.3 102.7,287.6 104.3,287.9 105.9,288.2 107.5,288.7 109.2,289.0 110.8,289.5 112.4,289.9 114.0,290.3 115.6,290.8 117.2,291.1 118.8,291.5 120.4,291.7 122.0,291.8' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,295.7 9.6,295.3 11.2,294.5 12.8,293.7 14.4,293.3 16.0,293.0 17.6,292.8 19.2,292.7 20.8,292.5 22.5,292.4 24.1,292.2 25.7,292.1 27.3,292.1 28.9,292.1 30.5,292.1 32.1,292.2 33.7,292.4 35.3,292.7 36.9,292.9 38.5,293.3 40.1,293.8 41.7,294.4 43.3,294.9 44.9,295.4 46.5,295.9 48.1,296.5 49.7,297.0 51.4,297.1 53.0,297.0 54.6,296.7 56.2,296.6 57.8,296.4 59.4,296.2 61.0,296.0 62.6,295.9 64.2,295.9 65.8,295.9 67.4,296.0 69.0,296.0 70.6,296.0 72.2,296.1 73.8,296.2 75.4,296.3 77.0,296.4 78.6,296.6 80.3,296.9 81.9,297.2 83.5,297.6 85.1,298.2 86.7,298.7 88.3,299.3 89.9,299.9 91.5,300.3 93.1,300.2 94.7,300.0 96.3,299.9 97.9,300.3 99.5,300.6 101.1,300.9 102.7,300.9 104.3,300.8 105.9,300.7 107.5,300.4 109.2,300.0 110.8,299.5 112.4,299.2 114.0,298.9 115.6,298.6 117.2,298.3 118.8,297.9 120.4,297.5 122.0,297.2' stroke-width='0.75' opacity='0.17'/%3E%3Cpath d='M8.0,301.5 9.6,301.5 11.2,301.5 12.8,301.3 14.4,301.2 16.0,301.3 17.6,301.6 19.2,301.9 20.8,301.9 22.5,301.9 24.1,301.9 25.7,301.9 27.3,301.6 28.9,301.3 30.5,302.2 32.1,303.4 33.7,305.2 35.3,305.8 36.9,306.4 38.5,306.5 40.1,306.6 41.7,307.2 43.3,307.8 44.9,308.5 46.5,308.8 48.1,309.2 49.7,309.5 51.4,309.8 53.0,309.9 54.6,309.9 56.2,309.6 57.8,309.2 59.4,308.6 61.0,308.1 62.6,307.7 64.2,307.6 65.8,307.5 67.4,307.5 69.0,307.5 70.6,307.5 72.2,307.3 73.8,307.1 75.4,306.9 77.0,306.8 78.6,306.7 80.3,306.6 81.9,306.4 83.5,306.3 85.1,306.3 86.7,306.3 88.3,306.3 89.9,306.4 91.5,306.7 93.1,307.0 94.7,307.3 96.3,307.7 97.9,308.0 99.5,306.9 101.1,305.7 102.7,304.1 104.3,303.9 105.9,303.6 107.5,303.6 109.2,303.6 110.8,303.6 112.4,303.6 114.0,303.2 115.6,302.9 117.2,302.2 118.8,301.8 120.4,301.5 122.0,301.5' stroke-width='0.75' opacity='0.17'/%3E%3C/g%3E%3C/svg%3E"); }
@media (min-width: 1500px) {
  body {
    background-image: var(--rock-edge), var(--rock-edge);
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100vh, auto 100vh;
    background-attachment: fixed, fixed;
  }
}

/* The toggle pills, in a row across the top-left of the map. A column of buttons walked down
   into the legend's box and had its clicks swallowed; a row also covers less of the map. */
.map-pills { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.map-pill { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow); display: inline-flex; align-items: center; }
.map-pill:hover { border-color: var(--ink); }
.map-pill[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Bigger map: fills the viewport in place rather than opening a new page, so the overlay,
   the zoom and the position all carry over. `position: fixed` so it escapes the column the
   map normally sits in -- on a crag page that column is about half the width. */
.map.map-big { position: fixed; inset: 0; z-index: 60; height: auto; width: auto;
  border-radius: 0; border: 0; }
/* The page behind must not scroll under the expanded map: on a phone a stray swipe otherwise
   scrolls the document while the map appears to stay still. */
body.map-is-big { overflow: hidden; }
/* The sticky site header has to go while the map is expanded. It sits 64px tall across the
   top, exactly where the pills are, and although the map paints above it the HEADER still
   takes the clicks: elementFromPoint over the "Smaller" button returned HEADER.top, so the
   one control that gets you back out was unreachable. Reproduced in Chromium and WebKit at
   1024x768, 1280x500 and 1440x700; phones were unaffected, which is why it survived review.
   Hiding it is also just right for a full-screen map, and Escape still works. */
body.map-is-big header.top { display: none; }
/* Full screen, the key comes inside the map: below it, it is off the screen entirely, which
   left the one overlay that needs explaining -- geology -- with no key exactly when there is
   most room for one. Capped and scrollable so a long key cannot cover the map it explains. */
.map.map-big .map-key { position: absolute; left: 10px; bottom: 10px; z-index: 3; margin: 0;
  max-width: 320px; max-height: min(60vh, 520px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; box-shadow: var(--shadow); }
/* On a phone the map is the whole screen; a 320px panel would be most of it. */
@media (max-width: 560px) {
  .map.map-big .map-key { left: 8px; right: 8px; max-width: none; max-height: 38vh; }
}
/* Geology in a crag popup, under the counts. */
.popup-geo { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; display: grid; gap: 2px; }
/* Tapping the rock itself: the unit's name, its age, and one way to read more. The swatch is
   the polygon's own colour, so the popup, the legend and the map agree about the same unit.

   Every colour here is set explicitly. The version before this printed the description and
   the citation too, and the citation link sat inside a `.muted` block with no colour of its
   own -- so it inherited the muted grey and neither looked nor read like a link, which is
   what John saw as the shading being off. Nothing in this popup inherits its colour now. */
.geo-popup { display: grid; gap: 4px; max-width: 250px; }
.geo-head { display: flex; align-items: flex-start; gap: 7px; }
.geo-sw { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px; margin-top: 4px;
  border: 1px solid rgba(0,0,0,.28); }
.geo-name { color: var(--ink); font-size: 1rem; line-height: 1.3; }
/* The age is the second thing a climber wants, so it is ink at full strength, not muted. */
.geo-age { color: var(--ink); font-size: .84rem; opacity: .82; }
.geo-popup a.geo-more { color: var(--brand); font-weight: 650; font-size: .82rem; margin-top: 3px; }

/* The key, BELOW the map rather than floating on it. On the map it covered the pills, hid the
   terrain it described, and left no room for a real key -- which is why the geology overlay
   shipped with none at all. */
.map-key { margin: 8px 0 0; display: grid; gap: 8px; font-size: .78rem; color: var(--ink); }
.map-key .map-legend { display: grid; gap: 4px; }
.map-key.has-swatches { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  background: var(--surface); }
.map-legend b { font-size: .82rem; }
.lg-ramp { height: 9px; border-radius: 999px; max-width: 260px;
  background: linear-gradient(90deg, #fee79a, #fdc04d, #ec852c, #c7461c, #8e1f13); }
.lg-ends { display: flex; justify-content: space-between; max-width: 260px; color: var(--muted); }
.lg-note { color: var(--muted); line-height: 1.35; }
.map-legend.no-ramp .lg-ramp, .map-legend.no-ramp .lg-ends { display: none; }
/* One row per state: swatch, what it is called, and a sentence saying what it does and does
   not mean. The sentence is the point -- a colour key alone invites "green means allowed". */
.lg-swatches:empty { display: none; }
.lg-swatches { display: grid; gap: 6px; }
.lg-sw { display: grid; grid-template-columns: 14px 1fr; gap: 4px 8px; align-items: start; }
.lg-sw i { width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; border: 1px solid rgba(0,0,0,.25); }
.lg-sw b { font-size: .8rem; }
.lg-sw span { grid-column: 2; color: var(--muted); line-height: 1.35; }
.lg-head { display: block; font-size: .82rem; margin-top: 2px; }
/* The geology block sits UNDER the dot legend, because the geologic map is drawn under the
   dots and does not replace them. It needs its own heading or the density ramp above reads
   as the key to the rock colours, which it is not. */
.lg-swatches .lg-head + .lg-foot { margin-top: 2px; }
.lg-foot { margin: 0; color: var(--muted); line-height: 1.4; }
.lg-foot + .lg-foot { margin-top: 6px; }
@media (max-width: 560px) { .map-key { font-size: .74rem; } }

/* Crag grade fingerprint: a CSS-only histogram, so it costs no JavaScript and survives the
   site's strict script-src. Bars are relative to the busiest band at THIS crag -- the shape
   is the point, not a comparison between crags. */
.fingerprint .fp-say { font-size: 1.05rem; margin: 0 0 10px; }
.fp-bars { display: flex; align-items: flex-end; gap: 4px; list-style: none; margin: 0 0 14px; padding: 0; width: 100%;
  height: 96px; overflow-x: auto; }
.fp-bars li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  flex: 1 1 0; min-width: 34px; height: 100%; gap: 2px; }
.fp-bar { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--brand); opacity: .45; }
.fp-bars li.peak .fp-bar { opacity: 1; }
.fp-n { font-size: .7rem; color: var(--muted); }
.fp-g { font-size: .72rem; color: var(--ink); white-space: nowrap; }
.fp-bars li.peak .fp-g { font-weight: 700; }

/* Reporting a photo. Deliberately quiet -- it should be findable by someone looking for it,
   not an invitation. The buttons wrap on a phone, where most of these get reported. */
.photo-report { margin-top: 4px; }
.photo-report > summary { cursor: pointer; }
.photo-report .chips-in { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.photo-report .chips-in .btn { text-align: left; }

/* /about: the one free-text form. Fields stack; the honeypot is off-screen, not display:none,
   so a form-filler still sees a field to fill. */
.contact-form { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.contact-form .field textarea, .contact-form .field input { font-size: 1rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-family: inherit; }
.contact-form .btn { align-self: flex-start; }
.contact-form .nope { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.banner.ok { background: var(--ok-bg); }

/* Filter tiles (tiles.js): toggle buttons over a list on the page. Same shape as the chip
   toggles in the search form, but buttons, so a keyboard reaches them and aria-pressed says
   the state. */
.tiles { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 10px 0 12px; }
.tiles-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tiles-label { font-size: .78rem; color: var(--muted); margin-right: 2px; }
.tile { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: inherit; font: inherit; font-size: .92rem; cursor: pointer; }
.tile[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tile-clear { border-style: dashed; }

/* Grade opinions on the route page: three buttons, no default, a sentence for the tally. */
.opinion { margin: 12px 0; }
.opinion h3 { margin: 0 0 6px; }
@media (max-width: 420px) { .fp-bars li { min-width: 0; } .fp-n { display: none; } .fp-g { font-size: .6rem; } }
/* A label/meaning table that is three sentences per cell reads as stacked rows on a phone. */
@media (max-width: 600px) {
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.stack td { display: block; padding: 2px 0; }
  table.stack td.num::before { content: "Routes: "; color: var(--muted); }
}
/* The legend's filter line: what the tile bar has left on the map. A live region, so a
   screen reader hears the map change too.

   The two rules that used to sit here are gone with the floating legend: a phone-only bottom
   offset (it is no longer positioned at all), and a rule that hid the ramp and the how-to-read
   note while a filter was on, because the legend was covering a third of a 340px map. Below
   the map there is room for both, so neither has to give way to the other. */
.map-legend .lg-filter { font-size: .74rem; color: var(--ink); line-height: 1.35; }