/*
 * Homepage 2026 — page-home-2026.php
 *
 * Everything is scoped under .rg-home so nothing here can reach the rest of the
 * site. Type uses only the live roles: Graphik Condensed for display, Matter for
 * body, MatterMono for overlines, subheads, buttons and values. No new roles.
 *
 * The theme forces the family on body h1..h5 with !important, which is why the
 * display headings are real heading tags and only their size is set here.
 */

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

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

	--gutter: 48px;

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

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

.rg-home img { display: block; max-width: 100%; height: auto; }
/* The theme sets font-family on every <a>, so anything inside a link needs the
   face said again — a specified value beats an inherited one. */
.rg-home a { color: inherit; font-family: inherit; line-height: inherit; }
.rg-home :focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }

.rg-home .rg-wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.rg-home .rg-sec { padding-block: 128px; }
.rg-home .rg-rule { border: 0; border-top: 1px solid var(--ink-line); margin: 0; }

/* ---- Type roles ---- */
.rg-home .rg-disp {
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .86;
	letter-spacing: -.005em;
	margin: 0;
	text-wrap: balance;
	font-size: 132px;
}
.rg-home .rg-label {
	display: block;
	font: 400 15px/1.5 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
}
.rg-home .rg-subhead { font: 500 22px/1.3 var(--mono-med); margin: 20px 0 0; }
.rg-home .rg-dek { margin: 0; max-width: 52ch; font: 400 18px/1.5 var(--body); color: var(--cream-2); }

.rg-home .rg-more,
.rg-home .rg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border-radius: 99px;
	font: 500 18px/1 var(--mono-med);
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.rg-home .rg-btn { background: var(--cream); color: var(--ink); }
.rg-home .rg-more { min-height: 44px; padding: 0 24px; box-shadow: inset 0 0 0 1px currentColor; }
.rg-home .rg-more:hover { background: var(--cream); color: var(--ink); }
.rg-home .rg-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.rg-home .rg-status { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; }
.rg-home .rg-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-d); flex: none; }
.rg-home .rg-status[data-state="open"] i { background: var(--open); box-shadow: 0 0 0 4px rgb(159 179 106 / .18); }
.rg-home .rg-status[data-state="soon"] i { background: var(--amber); box-shadow: 0 0 0 4px rgb(214 162 88 / .2); }
.rg-home .rg-status[data-state="appt"] i { background: var(--tan); }

/* The metric row: small mono label over a MatterMono Bold value, as the calendar sets stats. */
.rg-home .rg-metrics { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0; padding-top: 16px; border-top: 1px solid var(--ink-line); }
.rg-home .rg-metrics > div { display: grid; gap: 2px; }
.rg-home .rg-metrics dt { font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-d); }
.rg-home .rg-metrics dd { margin: 0; font: 500 22px/1.2 var(--mono-med); letter-spacing: .01em; text-transform: uppercase; }
/* AiRO is a brand, not a word: keep its own casing inside the all-caps row. */
.rg-home .rg-brand { text-transform: none; }

/* ---- Hero ---- */
.rg-home .rg-hero { position: relative; min-height: 800px; display: flex; overflow: hidden; }
.rg-home .rg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rg-home .rg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / .72) 100%);
}
.rg-home .rg-hero-copy { position: relative; z-index: 2; width: 100%; align-self: end; padding-block: 120px 64px; }
.rg-home .rg-hero-title { font-size: 168px; margin-top: 16px; }
.rg-home .rg-hero-title.is-long { font-size: 120px; }
.rg-home .rg-hero-title.is-xlong { font-size: 92px; }
.rg-home .rg-hero-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-top: 28px; }

/* ---- The Bike Shop index ---- */
.rg-home .rg-studio-head { margin-bottom: 52px; }
.rg-home .rg-studio { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.rg-home .rg-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-line); }
.rg-home .rg-index li { border-bottom: 1px solid var(--ink-line); }
.rg-home .rg-index button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: block; padding: 18px 0 16px; }
.rg-home .rg-index button:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }
.rg-home .rg-nm {
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 72px;
	line-height: .9;
	color: #5b5852;
	transition: color .25s ease;
}
.rg-home .rg-index li[data-on] .rg-nm { color: var(--cream); }
.rg-home .rg-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1); }
.rg-home .rg-desc > div { overflow: hidden; }
.rg-home .rg-desc > div > :last-child { margin-bottom: 20px; }
.rg-home .rg-desc .rg-ctas { margin-top: 0; }
.rg-home .rg-desc p { margin: 4px 0 20px; max-width: 44ch; color: var(--cream-2); font: 400 20px/1.4 var(--body); }
.rg-home .rg-index li:not([data-on]) .rg-desc { visibility: hidden; }
.rg-home .rg-index li[data-on] .rg-desc { grid-template-rows: 1fr; }
.rg-home .rg-m-img { display: none; }

.rg-home .rg-frame { position: relative; margin: 0; min-height: 560px; overflow: hidden; background: var(--ink-2); }
.rg-home .rg-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.rg-home .rg-frame img.on { opacity: 1; }
.rg-home .rg-frame figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 40px 18px 16px;
	background: linear-gradient(transparent, rgb(0 0 0 / .55));
	font: 500 15px/1.4 var(--mono-med);
	letter-spacing: .14em;
}
.rg-home .rg-studio-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; }
.rg-home .rg-shop-btn { margin-left: auto; }

/* ---- Regroup Fit: cream ground, led by the film ---- */
.rg-home .rg-fit { background: var(--cream); color: var(--ink); }
.rg-home .rg-fit .rg-label,
.rg-home .rg-fit .rg-subhead { color: var(--ink); }
.rg-home .rg-fit-head { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; }
.rg-home .rg-fit-head h2 { margin-top: 16px; }
.rg-home .rg-fit-intro { margin: 0; font: 400 20px/1.4 var(--body); max-width: 42ch; }

.rg-home .rg-fit-film { position: relative; margin: 56px 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); }
.rg-home .rg-fit-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-home .rg-fit-film figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 72px 0 22px;
	background: linear-gradient(transparent, rgb(0 0 0 / .55));
	font: 500 15px/1.4 var(--mono-med);
	letter-spacing: .14em;
	color: var(--cream);
}
.rg-home .rg-fit-film figcaption .rg-wrap { display: block; }
.rg-home .rg-cue {
	position: absolute;
	top: 22px;
	right: max(var(--gutter), calc(50% - 720px + var(--gutter)));
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 16px;
	border-radius: 99px;
	background: rgb(0 0 0 / .42);
	color: var(--cream);
	font: 500 13px/1 var(--mono-med);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.rg-home .rg-cue i { width: 7px; height: 7px; border-radius: 50%; background: var(--cream); flex: none; }
.rg-home .rg-fit-film.playing .rg-cue i { background: var(--open); }

.rg-home .rg-fit-line { margin: 52px 0 0; max-width: 46ch; font: 600 30px/1.3 var(--body-semi); letter-spacing: -.01em; text-wrap: pretty; }
.rg-home .rg-fit-line em { font-style: normal; color: var(--olive); }
.rg-home .rg-fit-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 48px; margin-top: 36px; }
.rg-home .rg-fit .rg-metrics { border-top-color: rgb(28 28 27 / .22); flex: 1 1 520px; }
.rg-home .rg-fit .rg-metrics dt { color: #7a7977; }
.rg-home .rg-fit .rg-metrics dd { color: var(--ink); font-family: var(--mono); font-weight: 400; }
.rg-home .rg-fit .rg-btn { background: var(--ink); color: var(--cream); }
/* The buttons align to the bottom of the metric row, which leaves their middle
   sitting above the middle of the values beside them — a 48px button against a
   26px line. Half that difference brings the two centres together. */
.rg-home .rg-fit-foot .rg-ctas { margin-bottom: calc((48px - 26px) / -2); }

/* ---- Café ---- */
.rg-home .rg-cafe { display: grid; grid-template-columns: 7fr 5fr; gap: 104px; align-items: center; }
.rg-home .rg-cafe .rg-frame { aspect-ratio: 4 / 5; min-height: 0; }
.rg-home .rg-sentence { font: 400 38px/1.3 var(--body); letter-spacing: -.005em; margin: 36px 0 0; text-wrap: pretty; }
.rg-home .rg-chip {
	font-size: inherit;
	display: inline-block;
	vertical-align: -.12em;
	width: 2.2em;
	height: .92em;
	border-radius: 99px;
	overflow: hidden;
	margin: 0 .08em;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--ink-2);
	opacity: .85;
	transition: box-shadow .2s, opacity .2s;
}
/* The chip is a ~110x45 letterbox and these photographs put a small subject in a
   lot of negative space, so a plain cover crop gives a pill full of table. Zoom
   into the middle, where the subject is. A per-image focal point would be better
   and is worth adding if a photograph ever sits well off-centre. */
.rg-home .rg-chip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.85); transform-origin: center 46%; }
/* The room is the one establishing shot in the set — it is already wide, and
   zooming it turns a cafe into a close-up of a table. */
.rg-home .rg-chip[data-show="room"] img { transform: scale(1.05); }
.rg-home .rg-chip:hover,
.rg-home .rg-chip:focus-visible,
.rg-home .rg-chip[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--cream); }
.rg-home .rg-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tan); }
.rg-home .rg-chip:focus-visible { outline: none; }
/* Phones: the photograph opens inside the sentence, where the tap happened. */
.rg-home .rg-inline-photo { display: block; position: relative; margin: 14px 0 16px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); animation: rg-open .35s cubic-bezier(.2,.7,.2,1); }
.rg-home .rg-inline-photo img { width: 100%; height: 100%; object-fit: cover; }
.rg-home .rg-inline-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .55)); font: 500 14px/1.4 var(--mono-med); letter-spacing: .14em; }
@keyframes rg-open { from { opacity: 0; transform: translateY(-6px); } }
.rg-home .rg-cafe-foot { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.rg-home .rg-links { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-left: auto; }

/* ---- Featured build ---- */
.rg-home .rg-feature { background: var(--cream); color: var(--ink); }
.rg-home .rg-feature .rg-label { color: var(--ink); }
.rg-home .rg-fhead { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; }
.rg-home .rg-fhead h2 { color: var(--olive); margin-top: 16px; }
.rg-home .rg-fintro { margin: 0; font: 400 20px/1.4 var(--body); max-width: 40ch; }
.rg-home .rg-fgrid { display: grid; grid-template-columns: 8fr 4fr; grid-template-rows: 1fr 1fr; gap: 16px; margin-top: 56px; height: 760px; }
.rg-home .rg-fgrid figure { margin: 0; overflow: hidden; background: var(--cream-2); }
.rg-home .rg-fgrid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.rg-home .rg-fgrid figure:hover img { transform: scale(1.03); }
.rg-home .rg-f-lead { grid-row: 1 / 3; }
/* Not every story carries three usable photographs. */
.rg-home .rg-fgrid[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: auto; height: 620px; }
.rg-home .rg-fgrid[data-count="1"] .rg-f-lead { grid-row: auto; }
.rg-home .rg-fgrid[data-count="2"] { grid-template-rows: auto; height: 620px; }
.rg-home .rg-fgrid[data-count="2"] .rg-f-lead,
.rg-home .rg-fgrid[data-count="2"] .rg-f-d { grid-row: auto; }
.rg-home .rg-fbody { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; margin-top: 64px; align-items: start; }
.rg-home .rg-feature .rg-btn { background: var(--ink); color: var(--cream); }
.rg-home .rg-spec-h { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: 1; color: var(--olive); }
.rg-home .rg-spec { margin: 24px 0 0; border-top: 1px solid var(--ink); }
.rg-home .rg-spec > div { padding: 18px 0 20px; border-bottom: 1px solid var(--ink); }
.rg-home .rg-spec dt { font: 400 15px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7a7977; }
.rg-home .rg-spec dd { margin: 10px 0 0; font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; color: var(--ink); }

/* ---- Rides ---- */
.rg-home .rg-rides-head { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; }
.rg-home .rg-rides-head h2 { margin-top: 16px; }
.rg-home .rg-rides-head h2.long { font-size: 96px; }
.rg-home .rg-rides-head h2.xlong { font-size: 76px; }
.rg-home .rg-where { font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; color: var(--muted-d); margin: 12px 0 0; }
.rg-home .rg-rides .rg-ctas { margin-top: 28px; }

/* ---- The Regroup Review ---- */
.rg-home .rg-jhead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.rg-home .rg-journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rg-home .rg-story { text-decoration: none; position: relative; display: block; overflow: hidden; }
.rg-home .rg-im { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-2); }
.rg-home .rg-im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .78) 100%); }
.rg-home .rg-story img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.rg-home .rg-story:hover img { transform: scale(1.04); }
.rg-home .rg-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: grid; gap: 8px; }
.rg-home .rg-tag { font: 400 16px/1.3 var(--body); text-transform: uppercase; }
.rg-home .rg-txt h3 { font: 700 32px/1.1 var(--body-semi) !important; margin: 0; text-wrap: balance; }

/* ---- Narrow ---- */
/* The header is sticky at 96px, so anything jumped to from the band needs to
   clear it rather than arrive underneath it. */
.rg-home #bike-shop,
.rg-home #fit,
.rg-home #cafe,
.rg-home #rides,
.rg-home #journal,
.rg-home #about { scroll-margin-top: 112px; }

/* ---- Who we are ----
   Two touchpoints for the same sentence: a band under the hero that orients
   someone who landed on a story, and a closing statement that carries the
   paragraph. The statement holds the h1, so it is set in the display face the
   theme forces on headings anyway. */
.rg-home .rg-intro { background: var(--ink-3); border-bottom: 1px solid var(--ink-line); }
.rg-home .rg-intro-in { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; padding-block: 30px; }
.rg-home .rg-intro-line { margin: 10px 0 0; max-width: 40ch; font: 400 22px/1.45 var(--body); letter-spacing: -.005em; }

.rg-home .rg-about-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rg-home .rg-about-links a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
	border-radius: 99px; box-shadow: inset 0 0 0 1px var(--ink-line);
	font: 400 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
	color: var(--cream-2); text-decoration: none; transition: background .2s, color .2s;
}
.rg-home .rg-about-links a:hover { background: var(--cream); color: var(--ink); box-shadow: none; }

.rg-home .rg-about { background: var(--cream); color: var(--ink); }
.rg-home .rg-about .rg-label { color: #6f6d68; }
.rg-home .rg-about-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: end; }
.rg-home .rg-about-state { font-size: 78px; margin-top: 14px; }
.rg-home .rg-about-body { margin: 0; max-width: 50ch; font: 400 18px/1.6 var(--body); color: #3c3a36; }
.rg-home .rg-about .rg-about-links { margin-top: 22px; }
/* A tinted hairline disappears on cream — the light ground eats it. The ring
   here is the house off-black at full strength. */
.rg-home .rg-about .rg-about-links a { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rg-home .rg-about .rg-about-links a:hover { background: var(--ink); color: var(--cream); box-shadow: none; }
.rg-home .rg-about-sign {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
	font: 500 18px/1 var(--mono-med); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.rg-home .rg-about-sign .rg-ar { transition: transform .2s; }
.rg-home .rg-about-sign:hover .rg-ar { transform: translateX(5px); }

@media (max-width: 900px) {
	.rg-home { --gutter: 20px; }
	.rg-home .rg-sec { padding-block: 80px; }
	.rg-home .rg-disp { font-size: 72px; }
	/* A ride's name is whatever the club called it on Strava, which on a phone
	   is the difference between a headline and a wall. */
	.rg-home .rg-rides-head h2 { font-size: 52px; }
	.rg-home .rg-rides-head h2.long { font-size: 42px; }
	.rg-home .rg-rides-head h2.xlong { font-size: 34px; }
	.rg-home .rg-hero { min-height: 680px; }
	.rg-home .rg-hero-title { font-size: 88px; }
	.rg-home .rg-hero-title.is-long { font-size: 64px; }
	.rg-home .rg-hero-title.is-xlong { font-size: 52px; }
	.rg-home .rg-hero-copy { padding-block: 80px 32px; }
	.rg-home #bike-shop,
	.rg-home #fit,
	.rg-home #cafe,
	.rg-home #rides,
	.rg-home #journal,
	.rg-home #about { scroll-margin-top: 88px; }
	.rg-home .rg-intro-in { grid-template-columns: 1fr; gap: 20px; padding-block: 26px; }
	.rg-home .rg-intro-line { font-size: 19px; }
	.rg-home .rg-about-in { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	.rg-home .rg-about-state { font-size: 44px; }
	.rg-home .rg-about-body { font-size: 17px; }
	.rg-home .rg-hero::after { background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / .15) 34%, rgb(0 0 0 / .82) 62%, rgb(0 0 0 / .9) 100%); }
	.rg-home .rg-dek { font-size: 16px; }
	.rg-home .rg-ctas { width: 100%; }
	.rg-home .rg-hero .rg-btn { flex: 1; }
	.rg-home .rg-subhead { font-size: 18px; }

	.rg-home .rg-studio,
	.rg-home .rg-cafe,
	.rg-home .rg-fit-head,
	.rg-home .rg-fhead,
	.rg-home .rg-fbody,
	.rg-home .rg-rides-head { grid-template-columns: 1fr; }
	.rg-home .rg-studio { gap: 20px; }
	.rg-home .rg-studio-head { margin-bottom: 28px; }
	.rg-home .rg-frame { display: none; }
	.rg-home .rg-m-img { display: block; position: relative; margin: 4px 0 18px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
	.rg-home .rg-m-img img { width: 100%; height: 100%; object-fit: cover; }
	.rg-home .rg-m-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .55)); font: 500 14px/1.4 var(--mono-med); letter-spacing: .14em; }
	.rg-home .rg-nm { font-size: 52px; }
	.rg-home .rg-desc p { font-size: 17px; }
	.rg-home .rg-studio-foot,
	.rg-home .rg-cafe-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
	.rg-home .rg-shop-btn { margin-left: 0; margin-top: 14px; }
	.rg-home .rg-links { margin-left: 0; margin-top: 14px; }
	.rg-home .rg-cafe { gap: 0; }
	.rg-home .rg-cafe > div { display: contents; }
	.rg-home .rg-cafe .rg-frame { display: none; }
	.rg-home .rg-cafe-foot { order: 2; margin-top: 28px; }
	.rg-home .rg-sentence { font-size: 26px; margin-top: 24px; }

	.rg-home .rg-fit-head { gap: 20px; }
	.rg-home .rg-fit-intro { font-size: 17px; }
	.rg-home .rg-fit-film { aspect-ratio: 4 / 5; margin-top: 28px; }
	.rg-home .rg-fit-film video { object-position: 58% center; }
	.rg-home .rg-fit-film figcaption { padding: 60px 0 16px; font-size: 14px; }
	.rg-home .rg-cue { top: 16px; }
	.rg-home .rg-fit-line { margin-top: 28px; max-width: none; font-size: 22px; }
	.rg-home .rg-fit-foot { margin-top: 24px; gap: 22px; }
	.rg-home .rg-fit .rg-metrics { flex: 1 1 100%; }

	.rg-home .rg-fhead, .rg-home .rg-fbody { gap: 24px; }
	.rg-home .rg-fintro { font-size: 17px; }
	.rg-home .rg-fgrid { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 10px; margin-top: 32px; }
	.rg-home .rg-f-lead { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 5 / 4; }
	.rg-home .rg-f-d { aspect-ratio: 4 / 5; }
	.rg-home .rg-fbody { margin-top: 36px; }
	.rg-home .rg-spec-h { font-size: 32px; }

	.rg-home .rg-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
	.rg-home .rg-metrics dd { font-size: 18px; }
	.rg-home .rg-more, .rg-home .rg-btn { font-size: 15px; padding: 0 20px; white-space: nowrap; }

	.rg-home .rg-jhead { margin-bottom: 36px; }
	.rg-home .rg-journal {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 78%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
		padding-bottom: 8px;
		scrollbar-width: none;
	}
	.rg-home .rg-story { scroll-snap-align: start; }
	.rg-home .rg-txt h3 { font-size: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.rg-home *,
	.rg-home *::before,
	.rg-home *::after { animation: none !important; transition: none !important; }
}

/* ---- The routes, under the next ride ---- */
.rg-home .rg-routes-block { margin-top: 72px; }
.rg-home .rg-routes-head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.rg-home .rg-routes-head .rg-disp { font-size: 58px; margin-top: 12px; }
.rg-home .rg-routes-blurb { margin: 14px 0 0; max-width: 46ch; font: 400 17px/1.55 var(--body); color: var(--cream-2); }
.rg-home .rg-routes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.rg-home .rg-route-tile {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	aspect-ratio: 4 / 5; padding: 14px; text-decoration: none; overflow: hidden;
	background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-line);
	transition: background .25s, box-shadow .25s;
}
.rg-home .rg-route-tile:hover { background: #2c2b28; box-shadow: inset 0 0 0 1px #56544e; }
.rg-home .rg-route-tile .rg-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rg-home .rg-route-tile .rg-map path,
.rg-home .rg-route-tile .rg-map use { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rg-home .rg-route-tile .rg-map .base { stroke: var(--tan); }
.rg-home .rg-route-tile .rg-map .over { stroke: var(--cream); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease-out; }
.rg-home .rg-route-tile.is-drawn .rg-map .over { stroke-dashoffset: 0; }
.rg-home .rg-route-tile .rg-map .start { fill: var(--olive); }

.rg-home .rg-route-top { position: relative; display: flex; justify-content: space-between; gap: 10px; margin-bottom: auto; }
.rg-home .rg-route-count { font: 500 11px/1 var(--mono-med); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-2); }
.rg-home .rg-route-cat { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.rg-home .rg-route-foot { position: relative; display: block; }
.rg-home .rg-route-name {
	display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase;
	line-height: .9; font-size: 30px; text-shadow: 0 2px 14px rgb(28 28 27 / .75);
}
.rg-home .rg-route-stats {
	display: block; margin-top: 8px; font: 500 12px/1.4 var(--mono-med);
	letter-spacing: .06em; text-transform: uppercase; color: var(--cream-2);
	text-shadow: 0 2px 12px rgb(28 28 27 / .8);
}

.rg-home .rg-routes-strava {
	display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between;
	margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ink-line);
}
.rg-home .rg-routes-strava p { margin: 0; max-width: 52ch; color: var(--cream-2); }

@media (max-width: 900px) {
	.rg-home .rg-routes-block { margin-top: 48px; }
	.rg-home .rg-routes-head .rg-disp { font-size: 40px; }
	.rg-home .rg-routes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.rg-home .rg-route-name { font-size: 22px; }
	.rg-home .rg-routes-strava .rg-more { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.rg-home .rg-route-tile .rg-map .over { transition: none; }
}