/*
 * Routes — page-routes.php
 *
 * Scoped under .rg-routes so nothing here reaches the rest of the site. Type
 * uses only the live roles: Graphik Condensed for display, Matter for body,
 * MatterMono for overlines, values and buttons.
 */

.rg-routes {
	--ink: #1c1c1b;
	--ink-2: #262624;
	--ink-3: #201f1e;
	--ink-line: #3a3936;
	--cream: #f6f3ee;
	--cream-2: #ebe6dd;
	--tan: #a88a6d;
	--olive: #7d8447;
	--muted-d: #a19c93;
	--amber: #d6a258;

	--display: 'Graphik Condensed Web', sans-serif;
	--body: 'MatterRegular', sans-serif;
	--mono: 'MatterMonoRegular', monospace;
	--mono-med: 'MatterMonoMedium', monospace;

	--gutter: 48px;

	background: var(--ink);
	color: var(--cream);
	overflow: clip;
}

.rg-routes *,
.rg-routes *::before,
.rg-routes *::after { box-sizing: border-box; }
/* The theme sets font-family on every <a> (the system stack), and a specified
   value beats an inherited one however the parent is styled — so a heading
   whose text is a link comes out in the wrong face unless this is said. */
.rg-routes a { color: inherit; font-family: inherit; line-height: inherit; }
.rg-routes :focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
.rg-routes .rg-wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }

.rg-routes .rg-label {
	display: block;
	font: 400 15px/1.5 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
}
.rg-routes .rg-disp {
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .86;
	letter-spacing: -.005em;
	margin: 14px 0 0;
	font-size: 104px;
	text-wrap: balance;
}

/* ---- Head ---- */
.rg-routes .rg-rt-head { padding-block: 88px 44px; }
.rg-routes .rg-rt-dek { margin: 22px 0 0; max-width: 62ch; font: 400 19px/1.6 var(--body); color: var(--cream-2); }
.rg-routes .rg-rt-facts {
	display: flex; flex-wrap: wrap; gap: 14px 44px;
	margin: 32px 0 0; padding: 20px 0 0;
	border-top: 1px solid var(--ink-line);
	list-style: none;
}
.rg-routes .rg-rt-facts li { display: grid; gap: 3px; }
.rg-routes .rg-rt-facts b { font: 500 26px/1.1 var(--mono-med); }
.rg-routes .rg-rt-facts span { font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.rg-routes .rg-rt-empty { padding-block: 60px; color: var(--muted-d); }

/* ---- Filters ---- */
.rg-routes .rg-rt-filters { position: sticky; top: 96px; z-index: 4; background: var(--ink-3); border-block: 1px solid var(--ink-line); }
.rg-routes .rg-rt-filters-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; padding-block: 14px; }
.rg-routes .rg-rt-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rg-routes .rg-rt-group > span:first-child {
	font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted-d); margin-right: 6px; white-space: nowrap;
}
.rg-routes .rg-rt-group button {
	font: 500 12px/1 var(--mono-med); letter-spacing: .1em; text-transform: uppercase;
	color: var(--cream-2); white-space: nowrap; background: none;
	border: 1px solid var(--ink-line); border-radius: 99px;
	height: 36px; padding: 0 15px; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.rg-routes .rg-rt-group button:hover { border-color: var(--muted-d); }
.rg-routes .rg-rt-group button[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.rg-routes .rg-rt-range { flex: 1 1 260px; max-width: 420px; }
.rg-routes .rg-rt-slider { flex: 1 1 auto; display: flex; align-items: center; }
/* The theme gives every input a 1px box, range included. */
.rg-routes .rg-rt-slider input[type="range"] {
	appearance: none; -webkit-appearance: none;
	width: 100%; height: 36px; margin: 0; padding: 0; cursor: pointer;
	background: none; border: 0; border-radius: 0; color: inherit;
}
.rg-routes .rg-rt-slider input:focus { outline: none; }
.rg-routes .rg-rt-slider input:focus-visible { outline: 2px solid var(--tan); outline-offset: 4px; border-radius: 99px; }
.rg-routes .rg-rt-slider input::-webkit-slider-runnable-track {
	height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--cream) 0 var(--fill, 100%), var(--ink-line) var(--fill, 100%) 100%);
}
.rg-routes .rg-rt-slider input::-webkit-slider-thumb {
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px; margin-top: -8px; border: 0; border-radius: 50%;
	background: var(--cream); transition: transform .12s;
}
.rg-routes .rg-rt-slider input:active::-webkit-slider-thumb { transform: scale(1.15); }
.rg-routes .rg-rt-slider input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--ink-line); }
.rg-routes .rg-rt-slider input::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--cream); }
.rg-routes .rg-rt-slider input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--cream); }
.rg-routes .rg-rt-val {
	font: 500 12px/1 var(--mono-med); letter-spacing: .1em; text-transform: uppercase;
	color: var(--cream); white-space: nowrap; min-width: 9ch; text-align: right;
}
.rg-routes .rg-rt-val.is-any { color: var(--muted-d); }

.rg-routes .rg-rt-select { position: relative; display: flex; align-items: center; }
.rg-routes .rg-rt-select select {
	appearance: none; -webkit-appearance: none;
	font: 500 12px/1 var(--mono-med); letter-spacing: .1em; text-transform: uppercase;
	color: var(--cream-2); background: none; border: 1px solid var(--ink-line);
	border-radius: 99px; height: 36px; padding: 0 34px 0 15px; cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.rg-routes .rg-rt-select select:hover { border-color: var(--muted-d); }
.rg-routes .rg-rt-select select.is-on { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.rg-routes .rg-rt-select option { background: var(--ink-2); color: var(--cream); text-transform: none; letter-spacing: 0; }
.rg-routes .rg-rt-caret { position: absolute; right: 14px; pointer-events: none; font-size: 10px; line-height: 1; color: var(--muted-d); }
.rg-routes .rg-rt-select select.is-on + .rg-rt-caret { color: var(--ink); }

.rg-routes .rg-rt-count {
	margin: 0 0 0 auto; white-space: nowrap;
	font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d);
}
.rg-routes .rg-rt-count b { font-family: var(--mono-med); font-weight: 500; color: var(--cream); }

/* ---- Rows ---- */
.rg-routes .rg-rt-rows { list-style: none; margin: 0; padding: 0; }
.rg-routes .rg-rt-row {
	display: grid; grid-template-columns: 168px 1fr 190px;
	gap: 34px; align-items: center;
	padding-block: 30px; border-bottom: 1px solid var(--ink-line);
}
.rg-routes .rg-rt-row[hidden] { display: none; }

.rg-routes .rg-rt-map { width: 100%; aspect-ratio: 1; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-line); }
.rg-routes .rg-map { display: block; width: 100%; height: 100%; }
.rg-routes .rg-map path,
.rg-routes .rg-map use { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rg-routes .rg-map .base { stroke: var(--tan); transition: stroke .2s; }
.rg-routes .rg-map .over { stroke: var(--cream); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease-out; }
.rg-routes .rg-map .start { fill: var(--olive); }
/* The line draws itself the first time you meet it, and then it has drawn
   itself — it doesn't rewind when the pointer leaves and redraw on the way
   back. js/routes.js sets the class once. */
.rg-routes .rg-rt-row.is-drawn .rg-map .over { stroke-dashoffset: 0; }

.rg-routes .rg-rt-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .92; margin: 0; font-size: 40px; }
.rg-routes .rg-rt-name a { text-decoration: none; font-family: var(--display); font-weight: 800; }
.rg-routes .rg-rt-blurb { margin: 10px 0 0; max-width: 54ch; font: 400 16px/1.55 var(--body); color: var(--cream-2); }
.rg-routes .rg-rt-meta {
	display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0;
	font: 400 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d);
}
.rg-routes .rg-rt-terr { color: var(--olive); }
.rg-routes .rg-rt-terr.is-gravel { color: var(--amber); }
.rg-routes .rg-rt-plan {
	display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0;
	font: 500 13px/1.5 var(--mono-med); letter-spacing: .04em; color: var(--cream-2);
}
.rg-routes .rg-rt-est { color: var(--muted-d); font-family: var(--mono); font-weight: 400; }
.rg-routes .rg-rt-water { margin: 8px 0 0; max-width: 52ch; font: 400 15px/1.5 var(--body); color: var(--tan); }
.rg-routes .rg-rt-water::before { content: '— '; }
.rg-routes .rg-rt-hist { margin: 10px 0 0; font: 400 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #7d7a74; }

.rg-routes .rg-rt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; grid-column: 2; grid-row: 2; }
.rg-routes .rg-rt-body { grid-column: 2; grid-row: 1; }
.rg-routes .rg-rt-map { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.rg-routes .rg-rt-stats { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.rg-routes .rg-rt-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 18px; border-radius: 99px; text-decoration: none;
	font: 500 12px/1 var(--mono-med); letter-spacing: .1em; text-transform: uppercase;
	color: var(--cream-2); box-shadow: inset 0 0 0 1px var(--ink-line);
	transition: background .15s, color .15s, box-shadow .15s;
}
.rg-routes .rg-rt-btn:hover { background: var(--cream); color: var(--ink); box-shadow: none; }
/* .is-primary comes after the :hover rule at the same specificity, so it has
   to say the hover colour again or the label disappears into the fill. */
.rg-routes .rg-rt-btn.is-primary { color: var(--cream); box-shadow: inset 0 0 0 1px var(--tan); }
.rg-routes .rg-rt-btn.is-primary:hover { color: var(--ink); box-shadow: none; }
.rg-routes .rg-rt-btn.is-solid { background: var(--cream); color: var(--ink); box-shadow: none; }
.rg-routes .rg-rt-btn.is-solid:hover { background: var(--cream-2); }

.rg-routes .rg-rt-stats { display: flex; flex-direction: column; gap: 12px; margin: 0; text-align: right; }
.rg-routes .rg-rt-stats > div { display: grid; gap: 2px; }
.rg-routes .rg-rt-stats dt { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
.rg-routes .rg-rt-stats dd { margin: 0; font: 500 19px/1.1 var(--mono-med); letter-spacing: .01em; }

.rg-routes .rg-rt-none { padding-block: 48px; color: var(--muted-d); font: 400 16px/1.6 var(--body); }

/* ---- Close ---- */
.rg-routes .rg-rt-close { padding-block: 72px 96px; margin-top: 8px; border-top: 1px solid var(--ink-line); }
.rg-routes .rg-rt-close-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; }
.rg-routes .rg-rt-close h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .9; margin: 12px 0 0; font-size: 58px; }
.rg-routes .rg-rt-close p { margin: 0; max-width: 46ch; color: var(--cream-2); }
.rg-routes .rg-rt-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 900px) {
	.rg-routes { --gutter: 20px; }
	.rg-routes .rg-disp { font-size: 46px; }
	.rg-routes .rg-rt-head { padding-block: 44px 28px; }
	.rg-routes .rg-rt-dek { font-size: 17px; }
	.rg-routes .rg-rt-facts { gap: 12px 28px; }
	.rg-routes .rg-rt-facts b { font-size: 22px; }

	/* Sticky, this is four rows of controls pinned under a header that is
	   already sticky — most of a phone screen spent on chrome. On a phone the
	   filters sit where they are and scroll away like everything else. */
	.rg-routes .rg-rt-filters { position: static; top: auto; }
	.rg-routes .rg-rt-filters-in { gap: 10px 20px; padding-block: 12px; }
	.rg-routes .rg-rt-group { min-height: 36px; }
	.rg-routes .rg-rt-count { margin-top: 2px; }
	.rg-routes .rg-rt-group { flex: 1 1 100%; }
	.rg-routes .rg-rt-range { max-width: none; }
	.rg-routes .rg-rt-sel .rg-rt-select,
	.rg-routes .rg-rt-sel select { flex: 1 1 auto; width: 100%; }
	.rg-routes .rg-rt-count { margin-left: 0; flex: 1 1 100%; }

	/* On a phone the right-hand column has to become the bottom of the row, and
	   it was saying everything twice on the way: "Plan for 4h" under the meta
	   and PLAN FOR 4H in the numbers, the surface grade twice over. The numbers
	   keep the job; the sentence version goes. */
	.rg-routes .rg-rt-row { grid-template-columns: 96px 1fr; gap: 14px 18px; align-items: start; padding-block: 24px; }
	.rg-routes .rg-rt-map { grid-column: 1; grid-row: 1; }
	.rg-routes .rg-rt-body { grid-column: 2; grid-row: 1; }
	.rg-routes .rg-rt-name { font-size: 28px; }
	.rg-routes .rg-rt-plan { display: none; }
	.rg-routes .rg-rt-fpm { display: none; }
	/* The numbers and the buttons line up with the text above them rather than
	   running back under the map — the map is a margin, not a column of its own. */
	.rg-routes .rg-rt-stats { grid-column: 2; grid-row: 2; flex-direction: row; gap: 26px; text-align: left; align-self: start; }
	.rg-routes .rg-rt-stats dd { font-size: 17px; }
	.rg-routes .rg-rt-acts { grid-column: 2; grid-row: 3; flex-wrap: nowrap; margin-top: 4px; }
	.rg-routes .rg-rt-btn { flex: 1 1 0; padding: 0 12px; }
	.rg-routes .rg-rt-btn { flex: 1 1 auto; }

	.rg-routes .rg-rt-close { padding-block: 48px 64px; }
	.rg-routes .rg-rt-close-in { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	.rg-routes .rg-rt-close h2 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.rg-routes .rg-map .over,
	.rg-routes .rg-rt-btn,
	.rg-routes .rg-rt-slider input::-webkit-slider-thumb { transition: none; }
}