/* Guide pages (/<city>/<guide>/), written by rides/guides.py. */
.guide { padding-block: 32px 24px; }
.guide h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.guide .lede { max-width: 62ch; }
.guide section { margin-block: 48px; }
.guide h3 { font-family: var(--display); font-size: 1.25rem; margin: 0 0 6px; }
.crumbs { display: block; font-size: .875rem; color: var(--muted); }
.crumbs a { display: inline; min-height: 0; font-weight: 400; }
.crumbs a { color: var(--muted); }
.small { font-size: .8125rem; color: var(--muted); }
.guide-table-wrap { overflow-x: auto; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--paper); }
.guide-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.guide-table th, .guide-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.guide-table th:first-child { text-align: left; white-space: normal; min-width: 10ch; }
.guide-table thead th { font-size: .8125rem; color: var(--muted); font-weight: 600; white-space: normal; vertical-align: bottom; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
.guide-rides { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.guide-ride { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px; background: var(--paper); border: 1.5px solid var(--rule); border-radius: 12px; }
.guide-art { display: flex; flex-direction: column; gap: 6px; }
.guide-n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--chip); font: 600 .875rem/1 var(--body); vertical-align: .15em; }
.guide-meta { color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.guide-why { margin: 0 0 8px; padding-left: 1.1em; }
.guide-stops, .guide-links { margin-bottom: 4px; }
.guide-how ul, .guide-before ul, .guide-more ul { padding-left: 1.25em; }
.guide-how li, .guide-before li, .guide-more li { margin-bottom: 6px; max-width: 65ch; }
.guide-faq h3 { margin-top: 20px; }
.thumb-route { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--chip); border-radius: 8px; }
.thumb-route path { fill: none; stroke: var(--lake); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.thumb-route circle { fill: var(--ink, var(--text)); }
.thumb-profile { display: block; width: 100%; height: 48px; }
.thumb-profile .g0 { fill: var(--g0); } .thumb-profile .g1 { fill: var(--g1); } .thumb-profile .g2 { fill: var(--g2); }
.thumb-profile .g3 { fill: var(--g3); } .thumb-profile .g4 { fill: var(--g4); } .thumb-profile .g5 { fill: var(--g5); }
.see-guides { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--chip); font-size: .9375rem; }
.see-guides a { font-weight: 600; }
@media (max-width: 640px) {
  .guide-ride { grid-template-columns: 1fr; }
  .guide-art { max-width: 320px; }
}