/*
Theme Name: Pedalan
Theme URI: https://pedalan.com/
Author: JP Caparas
Author URI: https://jpcaparas.com/
Description: A Philippine cycling portal and ride-entry desk in the colors of the Pedalan brand: white ground, deep navy, gold, and the red and blue of the Philippine flag. Built for riders of every age, with large type, strong contrast and big tap targets. Pairs with the Pedalan Core plugin, which owns events, routes, legends and entries.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pedalan
Tags: blog, news, custom-menu, custom-logo, custom-header, featured-images, translation-ready, accessibility-ready

Motion rule: this stylesheet declares no transitions, animations or keyframes.
Every moving thing is driven from assets/js/pedalan.js so it can be switched
off in one place for readers who ask for reduced motion.
*/

/* ---------------------------------------------------------------------------
   Fonts (self-hosted, SIL Open Font License; see assets/fonts)
--------------------------------------------------------------------------- */

@font-face {
	font-family: "Playfair Display Variable";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair Display Variable";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/playfair-display-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Playfair Display Variable";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair Display Variable";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4 Variable";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4 Variable";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4 Variable";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4 Variable";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Tokens
--------------------------------------------------------------------------- */

:root {
	/* One light theme by design. "only" also opts out of a browser's forced
	   dark mode, which repaints the page but not every drawing on it. */
	color-scheme: only light;

	/* Each colour has one job. Navy: text and action. Gold: ornament and
	   display type. Red and blue: the flag brush strokes only, plus red for errors. */
	--navy: #0d2149;
	--navy-deep: #081631;
	--ink: #16223d;
	--ink-soft: #45506b;
	--gold: #a17618;
	--gold-text: #7a570c;
	--gold-on-navy: #e3c36d;
	--red: #ce1126;
	--red-text: #a50d1e;
	--blue: #0038a8;
	--green-text: #17603a;
	--paper: #ffffff;
	--paper-warm: #fbf7ed;
	--rule: #dfd4b8;
	--rule-soft: #ece5d2;

	--font-display: "Playfair Display Variable", "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Source Serif 4 Variable", "Source Serif 4", Georgia, "Times New Roman", serif;

	--text-s: 1rem;
	--text-m: 1.1875rem;
	--text-l: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
	--text-xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
	--text-2xl: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);
	--text-3xl: clamp(2.75rem, 1.6rem + 5.8vw, 5.5rem);

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

	--wrap: 76rem;
	--wrap-narrow: 46rem;
	--gutter: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
	--tap: 3.25rem;
	--radius: 0.25rem;
}

/* The "Larger text" switch in the footer scales every rem-based size. */
html.text-large {
	font-size: 118.75%;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

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

/* Components that set their own display would otherwise show while hidden. */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-m);
	line-height: 1.65;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-2);
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.12;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-2xl);
	font-style: italic;
}

h2 {
	font-size: var(--text-xl);
	font-style: italic;
}

h3 {
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.25;
}

h4 {
	font-size: var(--text-m);
	font-weight: 700;
	line-height: 1.3;
}

p,
ul,
ol,
dl,
table,
figure,
blockquote {
	margin: 0 0 var(--space-3);
}

ul,
ol {
	padding-left: 1.4em;
}

li + li {
	margin-top: 0.35em;
}

a {
	color: var(--navy);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--gold);
}

a:hover {
	color: var(--blue);
	text-decoration-color: currentColor;
	text-decoration-thickness: 0.12em;
}

:focus-visible {
	outline: 0.1875rem solid var(--blue);
	outline-offset: 0.1875rem;
	border-radius: 0.125rem;
}

.on-navy :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--gold-on-navy);
}

strong,
b {
	font-weight: 700;
}

hr {
	height: 0;
	margin: var(--space-5) auto;
	border: 0;
	border-top: 1px solid var(--rule);
}

blockquote {
	margin-inline: 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-3);
	border-left: 0.1875rem solid var(--gold);
	color: var(--navy);
	font-size: var(--text-l);
	font-style: italic;
}

blockquote cite {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-s);
	font-style: normal;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums lining-nums;
}

th,
td {
	padding: 0.75rem 0.875rem;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

thead th {
	border-bottom: 0.125rem solid var(--navy);
	color: var(--navy);
	font-weight: 700;
}

code,
kbd,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--space-2);
	background: var(--paper-warm);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.875rem 1.25rem;
	clip: auto;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	white-space: normal;
}

/* ---------------------------------------------------------------------------
   Layout
--------------------------------------------------------------------------- */

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

.wrap--narrow {
	width: min(100% - 2 * var(--gutter), var(--wrap-narrow));
}

.section {
	padding-block: var(--space-6);
}

.section--warm {
	background: var(--paper-warm);
}

.section--navy {
	background: var(--navy);
	color: #fff;
}

.section--navy h2,
.section--navy h3 {
	color: #fff;
}

.section--navy a {
	color: #fff;
	text-decoration-color: var(--gold-on-navy);
}

.section--navy a:hover {
	color: var(--gold-on-navy);
}

.section__head {
	max-width: 44rem;
	margin-bottom: var(--space-5);
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.section__head p {
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: var(--text-l);
	line-height: 1.5;
}

.section--navy .section__head p {
	color: #dbe2f1;
}

.section__more {
	margin: var(--space-5) 0 0;
}

/* The poster's divider: a hairline with a short heavier stroke at its centre. */
.ornament {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: min(100%, 22rem);
	margin: var(--space-3) auto;
	color: var(--gold);
}

.ornament::before,
.ornament::after {
	content: "";
	flex: 1;
	border-top: 1px solid currentColor;
}

.ornament span:empty {
	width: 2.5rem;
	border-top: 0.1875rem solid currentColor;
}

.ornament span:not(:empty) {
	color: var(--gold-text);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.ornament--left {
	margin-inline: 0;
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */

.button,
button,
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: var(--tap);
	padding: 0.75rem 1.5rem;
	border: 0.125rem solid var(--navy);
	border-radius: var(--radius);
	background: var(--navy);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	border-color: var(--navy-deep);
	background: var(--navy-deep);
	color: #fff;
}

.button--large {
	min-height: 3.75rem;
	padding-inline: 2rem;
	font-size: var(--text-l);
}

.button--quiet {
	background: var(--paper);
	color: var(--navy);
}

.button--quiet:hover {
	background: var(--paper-warm);
	color: var(--navy);
}

.button--on-navy {
	border-color: #fff;
	background: #fff;
	color: var(--navy);
}

.button--on-navy:hover {
	border-color: var(--gold-on-navy);
	background: var(--gold-on-navy);
	color: var(--navy-deep);
}

.button[disabled],
button[disabled] {
	border-color: var(--ink-soft);
	background: var(--ink-soft);
	cursor: progress;
}

.button svg {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap);
	font-weight: 700;
}

.arrow-link svg {
	flex: none;
	width: 1.1em;
	height: 1.1em;
}

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

.site-header.is-raised {
	box-shadow: 0 0.25rem 1rem rgb(13 33 73 / 10%);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: 4.5rem;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--tap);
	color: var(--navy);
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-style: italic;
	font-weight: 900;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.site-brand:hover {
	color: var(--navy);
}

.site-brand svg {
	flex: none;
	width: 2.75rem;
	height: auto;
	color: var(--gold);
}

.site-brand .custom-logo {
	width: auto;
	max-height: 3rem;
}

.tool-button {
	min-height: var(--tap);
	padding: 0.5rem 0.875rem;
	border: 0.125rem solid var(--navy);
	background: var(--paper);
	color: var(--navy);
	font-size: var(--text-s);
}

.tool-button:hover {
	background: var(--paper-warm);
	color: var(--navy);
	border-color: var(--navy);
}

/* On the footer's navy: the "Larger text" switch, filled and ticked while it is on. */
.tool-button--on-navy {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

.tool-button--on-navy:hover {
	border-color: var(--gold-on-navy);
	background: transparent;
	color: var(--gold-on-navy);
}

.tool-button--on-navy[aria-pressed="true"] {
	border-color: #fff;
	background: #fff;
	color: var(--navy);
}

.tool-button--on-navy[aria-pressed="true"]:hover {
	border-color: var(--gold-on-navy);
	background: var(--gold-on-navy);
	color: var(--navy-deep);
}

.tool-button__icon {
	display: inline-flex;
}

.tool-button__icon--on,
.tool-button[aria-pressed="true"] .tool-button__icon--off {
	display: none;
}

.tool-button[aria-pressed="true"] .tool-button__icon--on {
	display: inline-flex;
}

.nav-toggle__icon {
	display: inline-flex;
}

.nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	display: inline-flex;
}

.tool-button svg {
	width: 1.375rem;
	height: 1.375rem;
}

.site-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	margin: 0;
}

.site-nav a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}

.site-nav a:hover {
	color: var(--blue);
}

.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_parent > a {
	box-shadow: inset 0 -0.1875rem 0 var(--gold);
}

.site-nav .menu-item--action > a {
	justify-content: center;
	margin-block: 0.5rem;
	padding-inline: 1.25rem;
	border-radius: var(--radius);
	background: var(--navy);
	color: #fff;
	box-shadow: none;
}

.site-nav .menu-item--action > a:hover {
	background: var(--navy-deep);
	color: #fff;
}

/* Small screens: the menu is a full-width panel under the bar. Without
   JavaScript it simply stays open. */
@media (max-width: 61.99rem) {
	.site-nav {
		border-top: 1px solid var(--rule);
		padding-block: var(--space-1) var(--space-2);
	}

	.js .site-nav {
		display: none;
		overflow: hidden;
	}

	.js .site-nav.is-open {
		display: block;
	}

	.site-nav a {
		padding-inline: 0.25rem;
		border-bottom: 1px solid var(--rule-soft);
		font-size: var(--text-l);
	}

	.site-nav .current-menu-item > a,
	.site-nav .current-menu-ancestor > a,
	.site-nav .current_page_parent > a {
		box-shadow: inset 0.25rem 0 0 var(--gold);
		padding-left: 1rem;
	}

	.site-nav .menu-item--action > a {
		margin-top: var(--space-2);
		border-bottom: 0;
	}

	.site-nav .sub-menu a {
		padding-left: 1.5rem;
		font-size: var(--text-m);
	}
}

@media (min-width: 62rem) {
	.site-header__bar {
		min-height: 5rem;
	}

	.nav-toggle {
		display: none;
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
	}

	.site-header__bar {
		flex: none;
		order: 0;
	}

	.site-header__inner > .site-nav {
		order: 1;
		margin-left: auto;
	}

	.site-nav > ul,
	.site-nav > div > ul {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 0.2rem + 1.4vw, 1.875rem);
	}

	.site-nav li {
		position: relative;
	}

	.site-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -1rem;
		min-width: 14rem;
		padding: 0.5rem 1rem;
		border: 1px solid var(--rule);
		background: var(--paper);
		box-shadow: 0 0.5rem 1.5rem rgb(13 33 73 / 12%);
	}

	.site-nav li:hover > .sub-menu,
	.site-nav li:focus-within > .sub-menu {
		display: block;
	}
}

@media (max-width: 26rem) {
	.site-brand {
		font-size: 1.5rem;
	}

	.site-brand svg {
		width: 2.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Poster pieces: title, laurels, brush strokes, date banner, route line
--------------------------------------------------------------------------- */

.poster-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-style: italic;
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.poster-title__lead {
	color: var(--navy);
}

.poster-title__minor {
	font-size: 0.58em;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.poster-title__main {
	display: block;
	color: var(--gold);
	font-size: 1.06em;
}

.poster-title--small {
	font-size: var(--text-2xl);
}

.brush {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}

.date-banner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0;
	padding: 0.625rem clamp(1.5rem, 1rem + 3vw, 3rem);
	background: var(--navy);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	clip-path: polygon(0.875rem 0, 100% 0, calc(100% - 0.875rem) 100%, 0 100%);
	box-shadow: inset 0 0.3125rem 0 var(--navy), inset 0 0.4375rem 0 var(--gold-on-navy), inset 0 -0.3125rem 0 var(--navy), inset 0 -0.4375rem 0 var(--gold-on-navy);
}

.date-banner-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--gold);
}

.date-banner-row::before,
.date-banner-row::after {
	content: "";
	flex: 1;
	max-width: 9rem;
	border-top: 0.125rem solid currentColor;
}

/* ---------------------------------------------------------------------------
   Home hero
--------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--paper);
	text-align: center;
}

.hero__brush {
	position: absolute;
	z-index: 0;
	width: clamp(13rem, 34vw, 30rem);
}

.hero__brush--top {
	top: -1.5rem;
	left: -3rem;
}

.hero__brush--bottom {
	right: -3rem;
	bottom: -1rem;
	z-index: 2;
	transform: rotate(180deg);
}

.hero__route {
	display: none;
	position: absolute;
	top: 34%;
	right: max(1rem, calc(50% - 41rem));
	z-index: 0;
	width: 8.5rem;
	height: auto;
	color: var(--gold);
}

.hero__inner {
	position: relative;
	z-index: 1;
	padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hero__crest {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0 auto var(--space-2);
	color: var(--gold);
}

.hero__crest::before,
.hero__crest::after {
	content: "";
	width: clamp(2.5rem, 12vw, 7rem);
	border-top: 0.125rem solid currentColor;
}

.hero__crest svg {
	width: clamp(4.5rem, 3rem + 6vw, 7rem);
	height: auto;
	overflow: visible;
}

.hero__title-row {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.hero__laurel {
	display: none;
	width: clamp(4.5rem, 9vw, 7.5rem);
	height: auto;
	color: var(--gold);
}

.hero__laurel--right {
	transform: scaleX(-1);
}

.hero__underline {
	width: min(72%, 30rem);
	margin: 0.375rem auto 0;
}

.hero__tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
}

.hero__tagline::before,
.hero__tagline::after {
	content: "";
	flex: 0 1 4.5rem;
	border-top: 1px solid var(--gold);
}

.hero__lede {
	max-width: 40rem;
	margin: var(--space-3) auto 0;
	font-size: var(--text-l);
	line-height: 1.5;
}

.hero__when {
	margin-top: var(--space-4);
}

.hero__where {
	margin: var(--space-2) 0 0;
	color: var(--navy);
	font-size: var(--text-l);
	font-weight: 600;
}

.hero__actions {
	justify-content: center;
	margin-top: var(--space-4);
}

.hero__note {
	margin: var(--space-2) 0 0;
	color: var(--ink-soft);
}

.hero__scene {
	position: relative;
	z-index: 1;
	margin: var(--space-4) 0 0;
}

.hero__scene > [role="img"] {
	max-width: 112rem;
	margin-inline: auto;
}

/* The drawing keeps its riders in frame at every width: scene.svg slices from the bottom centre. */
.hero__scene svg {
	display: block;
	width: 100%;
	height: clamp(15rem, 46vw, 38rem);
}

.scene-control {
	position: absolute;
	top: 0;
	right: var(--gutter);
	min-height: 2.75rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--navy);
	font: inherit;
	font-size: var(--text-s);
	font-weight: 600;
	cursor: pointer;
}

.scene-control:hover {
	background: var(--paper-warm);
}

.hero--plain .hero__inner {
	padding-bottom: var(--space-6);
}

@media (min-width: 48rem) {
	.hero__title-row {
		grid-template-columns: auto minmax(0, auto) auto;
	}

	.hero__laurel {
		display: block;
	}
}

@media (min-width: 75rem) {
	.hero__route {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
   Countdown
--------------------------------------------------------------------------- */

.countdown {
	margin: var(--space-4) auto 0;
}

.countdown__static {
	margin: 0;
	color: var(--navy);
	font-size: var(--text-l);
}

.countdown__static strong {
	font-family: var(--font-display);
	font-size: 1.5em;
	font-weight: 800;
}

.countdown__units {
	display: inline-grid;
	grid-template-columns: repeat(4, minmax(4.25rem, 6.5rem));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--rule);
}

.countdown__units li {
	margin: 0;
	padding: 0.75rem 0.25rem;
}

.countdown__units li + li {
	border-left: 1px solid var(--rule);
}

.countdown__number {
	display: block;
	overflow: hidden;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums lining-nums;
}

.countdown__number span {
	display: block;
}

.countdown__label {
	display: block;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

/* ---------------------------------------------------------------------------
   Fact lists (event essentials, route numbers)
--------------------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	border-top: 0.125rem solid var(--navy);
}

.facts__item {
	display: grid;
	grid-template-columns: minmax(7.5rem, 30%) 1fr;
	gap: var(--space-2);
	padding: 1rem 0;
	border-bottom: 1px solid var(--rule);
}

.facts dt {
	color: var(--ink-soft);
	font-weight: 600;
}

.facts dd {
	margin: 0;
	color: var(--navy);
	font-size: var(--text-l);
	font-weight: 600;
	line-height: 1.35;
}

.facts dd small {
	display: block;
	margin-top: 0.125rem;
	color: var(--ink);
	font-size: var(--text-m);
	font-weight: 400;
}

.facts dd a {
	font-weight: 700;
}

.section--navy .facts {
	border-top-color: var(--gold-on-navy);
}

@media (min-width: 48rem) {
	.facts--grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-5);
	}
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0;
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
	border-block: 0.125rem solid var(--navy);
}

.stat-row li {
	margin: 0;
	padding: 1rem 1rem 1rem 0;
}

.stat-row__value {
	display: block;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
}

.stat-row__label {
	display: block;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

.status {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border: 0.125rem solid currentColor;
	border-radius: var(--radius);
	font-size: var(--text-s);
	font-weight: 700;
	line-height: 1.3;
}

.status--open {
	color: var(--green-text);
}

.status--closed {
	color: var(--ink-soft);
}

.status--alert {
	color: var(--red-text);
}

/* ---------------------------------------------------------------------------
   Split layouts
--------------------------------------------------------------------------- */

.split {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 62rem) {
	.split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: start;
		gap: clamp(3rem, 6vw, 5.5rem);
	}

	.split--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.split--aside {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
	}

	.split__rail {
		align-self: stretch;
	}

	.split__sticky {
		position: sticky;
		top: 7rem;
	}
}

.flow > * + * {
	margin-top: var(--space-5);
}

.poster-frame {
	margin: 0;
	padding: 0.625rem;
	border: 1px solid var(--rule);
	background: var(--paper);
	box-shadow: 0 1.25rem 2.5rem rgb(13 33 73 / 14%);
}

.poster-frame img {
	width: 100%;
}

.poster-frame figcaption {
	padding: 0.625rem 0.25rem 0.125rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

/* ---------------------------------------------------------------------------
   Steps (real, ordered instructions)
--------------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	position: relative;
	margin: 0;
	padding-left: 4.25rem;
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0.125rem solid var(--gold);
	border-radius: 50%;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: lining-nums;
}

.steps h3 {
	margin-bottom: 0.25rem;
}

.steps p {
	margin: 0;
}

@media (min-width: 62rem) {
	.steps--row {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}
}

/* ---------------------------------------------------------------------------
   Roll of honor
--------------------------------------------------------------------------- */

.honor-roll {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgb(227 195 109 / 55%);
}

.honor-roll li {
	margin: 0;
	border-bottom: 1px solid rgb(227 195 109 / 55%);
}

.honor-roll a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.25rem var(--space-2);
	min-height: 5rem;
	padding: 1rem 0;
	text-decoration: none;
}

.honor-roll__name {
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
}

.honor-roll__honor {
	grid-column: 1;
	color: var(--gold-on-navy);
	font-size: var(--text-m);
	line-height: 1.35;
}

.honor-roll svg {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--gold-on-navy);
}

.honor-roll a:hover .honor-roll__name {
	color: var(--gold-on-navy);
}

@media (min-width: 48rem) {
	.honor-roll {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-5);
	}
}

.laurel-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.laurel-heading svg {
	flex: none;
	width: 2.75rem;
	height: auto;
	color: var(--gold-on-navy);
}

.laurel-heading svg:last-child {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
   Lists of things: events, routes, articles, legends
--------------------------------------------------------------------------- */

.listing {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 0.125rem solid var(--navy);
}

.listing > li {
	margin: 0;
	border-bottom: 1px solid var(--rule);
}

.event-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3) 0;
}

.date-block {
	display: grid;
	place-items: center;
	width: 5.25rem;
	padding: 0.625rem 0.25rem;
	background: var(--navy);
	color: #fff;
	line-height: 1.1;
	text-align: center;
	font-variant-numeric: lining-nums;
}

.date-block__month {
	color: var(--gold-on-navy);
	font-size: var(--text-s);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.date-block__day {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 800;
}

.date-block__year {
	font-size: var(--text-s);
}

.event-row h3 {
	margin-bottom: 0.25rem;
	font-size: var(--text-xl);
	font-style: italic;
	font-weight: 800;
}

.event-row h3 a,
.route-row h3 a,
.article-card h3 a,
.legend-card h3 a {
	text-decoration: none;
}

.event-row h3 a:hover,
.route-row h3 a:hover,
.article-card h3 a:hover,
.legend-card h3 a:hover {
	text-decoration: underline;
}

.event-row p {
	margin: 0 0 0.375rem;
}

.meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	color: var(--ink-soft);
	list-style: none;
}

.meta-line li {
	margin: 0;
}

.meta-line strong {
	color: var(--navy);
}

.route-row {
	display: grid;
	gap: var(--space-1) var(--space-4);
	padding: var(--space-3) 0;
}

.route-row h3 {
	margin-bottom: 0.25rem;
	font-size: var(--text-xl);
	font-style: italic;
	font-weight: 800;
}

.route-row p {
	margin: 0;
}

.route-row__numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--navy);
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

.route-row__numbers li {
	margin: 0;
}

.route-row__numbers span {
	color: var(--ink-soft);
	font-weight: 400;
}

@media (min-width: 62rem) {
	.route-row {
		grid-template-columns: minmax(0, 1fr) minmax(15rem, auto);
		align-items: center;
	}

	.route-row__numbers {
		justify-content: flex-end;
	}
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--space-5) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-grid > li {
	margin: 0;
}

.article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: var(--space-2);
	border-top: 0.125rem solid var(--navy);
}

.article-card__image {
	display: block;
	margin-bottom: var(--space-2);
}

.article-card__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.article-card__kicker {
	margin: 0 0 0.375rem;
	color: var(--gold-text);
	font-size: var(--text-s);
	font-weight: 700;
}

.article-card__kicker a {
	color: inherit;
	text-decoration: none;
}

.article-card h3 {
	margin-bottom: 0.5rem;
	font-size: var(--text-l);
	font-weight: 800;
}

.article-card p {
	margin: 0 0 var(--space-2);
}

.article-card .arrow-link {
	margin-top: auto;
}

.legend-card {
	padding: var(--space-3) 0;
}

.legend-card h3 {
	margin-bottom: 0.25rem;
	font-size: var(--text-xl);
	font-style: italic;
	font-weight: 800;
}

.legend-card p {
	margin: 0;
}

.legend-card__honor {
	color: var(--gold-text);
	font-weight: 700;
}

.term-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.term-list li {
	margin: 0;
}

.term-list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.25rem 1rem;
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
}

.term-list a:hover,
.term-list a[aria-current="page"] {
	background: var(--navy);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Page headers and long-form content
--------------------------------------------------------------------------- */

.page-head {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--space-4);
}

.page-head__brush {
	position: absolute;
	top: -1.25rem;
	right: -3.5rem;
	z-index: 0;
	width: clamp(11rem, 26vw, 22rem);
	transform: scaleX(-1);
}

.page-head .wrap {
	position: relative;
	z-index: 1;
}

.page-head__kicker {
	margin: 0 0 var(--space-1);
	color: var(--gold-text);
	font-weight: 700;
}

.page-head__kicker a {
	color: inherit;
}

.page-head h1 {
	max-width: 22ch;
	margin-bottom: 0;
}

/* A news headline is a full sentence, so it gets a longer line and a smaller size than a page name. */
.single-post .page-head h1 {
	max-width: 30ch;
	line-height: 1.15;
	text-wrap: balance;
}

.page-head__lede {
	max-width: 42rem;
	margin: var(--space-2) 0 0;
	font-size: var(--text-l);
	line-height: 1.5;
}

.page-head__meta {
	margin-top: var(--space-2);
}

.entry-content {
	font-size: var(--text-m);
}

.entry-content > * {
	max-width: var(--wrap-narrow);
}

.entry-content > .alignwide,
.entry-content > table,
.entry-content > .wp-block-table {
	max-width: 62rem;
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content h2 {
	margin-top: var(--space-5);
}

.entry-content h3 {
	margin-top: var(--space-4);
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content li {
	padding-left: 0.25em;
}

.entry-content ul li::marker {
	color: var(--gold);
}

.entry-content .lede,
.entry-content .has-large-font-size {
	color: var(--navy);
	font-size: var(--text-l) !important;
	line-height: 1.5;
}

.entry-content img {
	border-radius: 0;
}

.entry-content figcaption,
.wp-caption-text {
	margin-top: 0.5rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

.wp-block-table {
	overflow-x: auto;
}

.table-scroll {
	overflow-x: auto;
	margin-bottom: var(--space-3);
}

.table-scroll table {
	min-width: 26rem;
	margin: 0;
}

.alignleft {
	float: left;
	margin: 0.375rem var(--space-3) var(--space-2) 0;
}

.alignright {
	float: right;
	margin: 0.375rem 0 var(--space-2) var(--space-3);
}

.aligncenter {
	margin-inline: auto;
}

.featured-image {
	margin: 0 0 var(--space-4);
}

.featured-image img {
	width: 100%;
	max-height: 34rem;
	object-fit: cover;
}

.note {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--rule);
	background: var(--paper-warm);
}

.note > :last-child {
	margin-bottom: 0;
}

.note h2,
.note h3 {
	font-size: var(--text-l);
	font-style: normal;
}

.sources {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--rule);
	font-size: var(--text-s);
}

.sources h2 {
	font-size: var(--text-l);
	font-style: normal;
}

.sources ol {
	margin-bottom: 0;
}

.sources a {
	overflow-wrap: anywhere;
}

.post-nav {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--rule);
}

.post-nav a {
	display: block;
	min-height: var(--tap);
	font-weight: 700;
}

.post-nav span {
	display: block;
	color: var(--ink-soft);
	font-size: var(--text-s);
	font-weight: 400;
}

@media (min-width: 48rem) {
	.post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.post-nav__next {
		text-align: right;
	}
}

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-5);
}

.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 0.875rem;
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;
}

.page-numbers.current,
a.page-numbers:hover {
	background: var(--navy);
	color: #fff;
}

.page-numbers.dots {
	border-color: transparent;
}

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */

label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--navy);
	font-weight: 700;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	border: 0.125rem solid var(--navy);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	line-height: 1.4;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

select {
	appearance: none;
	padding-right: 3rem;
	background-image: url("assets/img/chevron-down.svg");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline-offset: 0.125rem;
}

.field {
	margin-bottom: var(--space-3);
}

.field__optional {
	color: var(--ink-soft);
	font-weight: 400;
}

.field__help {
	margin: 0 0 0.5rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
	line-height: 1.45;
}

.field__error {
	margin: 0.5rem 0 0;
	color: var(--red-text);
	font-weight: 700;
}

.field__error:empty {
	display: none;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
	border-color: var(--red-text);
	box-shadow: inset 0.3125rem 0 0 var(--red-text);
}

.field--check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.875rem;
	align-items: start;
}

.field--check input[type="checkbox"] {
	width: 1.75rem;
	height: 1.75rem;
	margin: 0.125rem 0 0;
	accent-color: var(--navy);
}

.field--check label {
	margin: 0;
	font-weight: 400;
	color: var(--ink);
}

.field--check .field__error {
	grid-column: 2;
}

/* Honeypot: off-screen for people, present for bots. */
.field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-grid {
	display: grid;
	gap: 0 var(--space-3);
}

@media (min-width: 48rem) {
	.form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.form-grid .field--full {
		grid-column: 1 / -1;
	}
}

.form-message {
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3);
	border: 0.125rem solid var(--red-text);
	color: var(--red-text);
	font-weight: 700;
}

.form-message[hidden] {
	display: none;
}

.form-desk {
	padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
	border: 0.125rem solid var(--navy);
	background: var(--paper);
}

.form-desk > h2 {
	margin-bottom: var(--space-1);
}

/* A second form on the same page, such as "Ask the organizer" under the entry
   desk, steps back so the entry desk stays the main thing. */
.form-desk--quiet {
	border: 1px solid var(--rule);
}

.form-desk__intro {
	margin-bottom: var(--space-3);
}

.form-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
}

.form-submit .button {
	width: 100%;
}

@media (min-width: 36rem) {
	.form-submit .button {
		width: auto;
	}
}

.form-receipt {
	text-align: center;
}

.form-receipt__message {
	max-width: 34rem;
	margin: 0 auto var(--space-3);
	color: var(--navy);
	font-size: var(--text-l);
	font-weight: 700;
}

.form-receipt > :last-child {
	margin-bottom: 0;
}

.form-receipt__label {
	margin: 0;
	color: var(--ink-soft);
}

.form-receipt__reference {
	margin: 0 0 var(--space-3);
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
}

.form-receipt ol {
	max-width: 34rem;
	margin-inline: auto;
	text-align: left;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 36rem;
}

.search-form label {
	flex: 1 1 14rem;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Size chart
--------------------------------------------------------------------------- */

.size-chart {
	display: grid;
	gap: var(--space-4);
}

.size-chart caption {
	padding-bottom: 0.5rem;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 700;
	text-align: left;
}

.size-chart th[scope="row"] {
	color: var(--navy);
	font-weight: 700;
}

.size-chart td,
.size-chart th {
	padding-inline: 0.5rem;
}

.size-chart .table-scroll table {
	min-width: 0;
}

@media (min-width: 48rem) {
	.size-chart {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

/* ---------------------------------------------------------------------------
   Contact strip
--------------------------------------------------------------------------- */

.contact-card {
	padding: var(--space-3);
	border: 1px solid var(--rule);
	background: var(--paper);
}

.contact-card h2,
.contact-card h3 {
	font-size: var(--text-l);
	font-style: normal;
}

.contact-card__name {
	margin: 0;
	color: var(--navy);
	font-size: var(--text-l);
	font-weight: 700;
}

.contact-card__role {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
}

.contact-card .button {
	flex: 1 1 100%;
}

.contact-card > :last-child {
	margin-bottom: 0;
}

.contact-card + .contact-card,
.split__rail > * + * {
	margin-top: var(--space-3);
}

.phone-number {
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}

/* Phones: the two things a rider wants are always one thumb away. */
.action-bar {
	display: none;
}

@media (max-width: 47.99rem) {
	.has-action-bar {
		padding-bottom: 5rem;
	}

	.action-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--rule);
		background: var(--paper);
		box-shadow: 0 -0.25rem 1rem rgb(13 33 73 / 12%);
	}

	.action-bar .button {
		padding-inline: 0.5rem;
		font-size: var(--text-s);
	}
}

/* ---------------------------------------------------------------------------
   Share. As printed, a plain row of links at the end of the page. Once
   pedalan.js adds .is-floating, one round button in the lower right corner
   with the links in a panel above it.
--------------------------------------------------------------------------- */

.share {
	padding-block: var(--space-4);
	border-top: 1px solid var(--rule);
}

.share__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--space-3);
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

.share__heading {
	margin: 0;
	color: var(--navy);
	font-weight: 700;
}

.share__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.share__list li {
	margin: 0;
}

/* "Copy link" is a button and the rest are links; they are made to look alike. */
.share__choice,
.share__choice:hover {
	border: 0;
	background: none;
}

.share__choice {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.625rem;
	min-height: var(--tap);
	padding: 0;
	color: var(--navy);
	font-size: inherit;
	font-weight: 700;
	text-align: left;
}

.share__choice:hover {
	color: var(--blue);
}

.share__choice svg {
	flex: none;
}

/* --share-bar is the height of the Enter and Call bar while it is pinned, measured by pedalan.js. */
.share.is-floating {
	--share-bottom: calc(var(--space-2) + var(--share-bar, 0px));

	position: fixed;
	right: var(--space-2);
	bottom: var(--share-bottom);
	z-index: 30;
	padding: 0;
	border: 0;
}

/* Stepped aside it is unseen and cannot be tapped, but stays in the tab order; focus brings it back. */
.share.is-floating:not(.is-shown) {
	opacity: 0;
	pointer-events: none;
}

/* The white ring keeps the navy button apart from a navy band or a dark photograph. */
.share__toggle {
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0.25rem 1rem rgb(13 33 73 / 25%);
}

.share__toggle:hover {
	border-color: #fff;
}

/* A white band under the focus ring, so the ring shows on any ground. */
.share__toggle:focus-visible {
	border-radius: 50%;
	box-shadow: 0 0 0 0.1875rem #fff;
}

.share__icon {
	display: inline-flex;
}

.share__icon--close,
.share__toggle[aria-expanded="true"] .share__icon--open {
	display: none;
}

.share__toggle[aria-expanded="true"] .share__icon--close {
	display: inline-flex;
}

/* The panel never grows tall enough to reach the header and its progress line. */
.share.is-floating .share__panel {
	display: block;
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.5rem);
	width: max-content;
	min-width: 14rem;
	max-width: calc(100vw - 2 * var(--space-2));
	max-height: calc(100vh - var(--share-bottom) - var(--tap) - 6.5rem);
	max-height: calc(100dvh - var(--share-bottom) - var(--tap) - 6.5rem);
	margin: 0;
	padding: 0.5rem;
	overflow-y: auto;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: 0 0.5rem 1.5rem rgb(13 33 73 / 12%);
}

.share.is-floating .share__heading {
	padding: 0.5rem 0.75rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

.share.is-floating .share__list {
	display: block;
}

.share.is-floating .share__choice {
	display: flex;
	width: 100%;
	padding-inline: 0.75rem;
	border-radius: var(--radius);
	text-decoration: none;
}

.share.is-floating .share__choice:hover {
	background: var(--paper-warm);
}

@media (min-width: 48rem) {
	.share.is-floating {
		--share-bottom: calc(var(--space-3) + var(--share-bar, 0px));

		right: var(--space-3);
	}
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-6) var(--space-4);
	background: var(--navy);
	color: #dbe2f1;
}

.site-footer a {
	color: #fff;
	text-decoration-color: var(--gold-on-navy);
}

.site-footer a:hover {
	color: var(--gold-on-navy);
}

.site-footer h2 {
	margin-bottom: var(--space-2);
	color: var(--gold-on-navy);
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-style: normal;
	font-weight: 700;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-5);
}

.site-footer__brand {
	margin: 0 0 var(--space-2);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-style: italic;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.site-footer__meaning {
	max-width: 26rem;
	margin: 0;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--space-4);
}

.site-footer li {
	margin: 0;
	break-inside: avoid;
}

.site-footer li a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.site-footer__phone {
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 800;
	line-height: 1.2;
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid rgb(227 195 109 / 45%);
	font-size: var(--text-s);
}

.site-footer__base p {
	margin: 0;
}

/* The switch does nothing without pedalan.js, so it is not offered without it. */
.site-footer__tools {
	display: none;
	flex: 1 0 100%;
}

.js .site-footer__tools {
	display: block;
}

@media (min-width: 48rem) {
	.site-footer__grid {
		grid-template-columns: 1.1fr 1.3fr 1.1fr;
	}

	.site-footer__tools {
		flex: none;
	}
}

/* ---------------------------------------------------------------------------
   Comments (off by default; styled so they are usable if switched on)
--------------------------------------------------------------------------- */

.comments {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
}

.comment-list {
	padding: 0;
	list-style: none;
}

.comment-list .children {
	list-style: none;
}

.comment-body {
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--rule);
}

.comment-form p {
	margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Reading progress: pedalan.js rides the bicycle along the header's lower edge
--------------------------------------------------------------------------- */

.site-header__inner {
	position: relative;
	z-index: 1;
}

.ride-progress {
	display: none;
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	height: 1.5rem;
	pointer-events: none;
}

.js .ride-progress {
	display: block;
}

.ride-progress__line {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 0.1875rem;
	background: var(--gold);
	transform-origin: 0 50%;
	scale: 0 1;
}

.ride-progress__rider {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.875rem;
	color: var(--navy);
	line-height: 0;
}

.ride-progress__rider svg {
	display: block;
	width: 100%;
	overflow: visible;
}

/* ---------------------------------------------------------------------------
   Jersey size finder: pedalan.js draws the shirt to the chosen measurements
--------------------------------------------------------------------------- */

.size-finder {
	display: grid;
	align-items: center;
	gap: var(--space-3);
	margin-block: var(--space-3) var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--rule);
	background: var(--paper-warm);
}

.size-finder__reading {
	margin: var(--space-2) 0;
	color: var(--navy);
	font-size: var(--text-l);
	font-weight: 600;
	line-height: 1.35;
}

.size-finder__figure svg {
	display: block;
	width: 100%;
	max-width: 26rem;
	margin-inline: auto;
}

.jersey__body {
	fill: var(--paper);
	stroke: var(--navy);
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.jersey__rule {
	fill: none;
	stroke: var(--gold-text);
	stroke-width: 2;
	stroke-linecap: round;
}

.jersey__label {
	fill: var(--navy);
	font-family: var(--font-body);
	font-size: 19px;
	font-weight: 700;
}

@media (min-width: 48rem) {
	.size-finder {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		padding: var(--space-4);
	}
}

/* ---------------------------------------------------------------------------
   Tour timeline: a plain list of tours, with a chart above it when scripted
--------------------------------------------------------------------------- */

.timeline__stage {
	margin-bottom: var(--space-4);
}

/* Dragging sideways moves through the years; dragging up or down still scrolls the page. */
.timeline__figure {
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
}

.timeline__figure svg {
	display: block;
}

.timeline-figure__road {
	stroke: var(--navy);
	stroke-width: 2;
}

.timeline-figure__tick {
	stroke: var(--ink-soft);
	stroke-opacity: 0.7;
}

.timeline-figure__decade {
	fill: var(--ink-soft);
	font-family: var(--font-body);
	font-size: 15px;
	font-variant-numeric: lining-nums tabular-nums;
}

/* The bars are the chart's data, so they keep 3:1 against white and warm paper. */
.timeline-figure__era {
	fill: var(--gold);
}

.timeline-figure__era.is-current {
	fill: var(--navy);
}

.timeline-figure__cursor {
	stroke: var(--gold);
	stroke-width: 2;
}

.timeline-figure__rider {
	color: var(--navy);
}

.timeline__control {
	display: grid;
	gap: 0.25rem;
	margin-top: var(--space-2);
}

.timeline__control input[type="range"] {
	width: 100%;
	min-height: var(--tap);
	margin: 0;
	accent-color: var(--navy);
}

/* Two lines are reserved so the list below does not jump as tour names come and go. */
.timeline__year {
	display: block;
	min-height: 2.4em;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: lining-nums tabular-nums;
}

.timeline__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.timeline__era {
	display: grid;
	gap: 0.25rem var(--space-3);
	margin: 0;
	padding: var(--space-3) var(--space-2);
	border-bottom: 1px solid var(--rule);
}

.timeline__era.is-current {
	background: var(--paper-warm);
}

.timeline__years {
	margin: 0;
	color: var(--gold-text);
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: lining-nums tabular-nums;
}

.timeline__era h3 {
	margin: 0;
	font-size: var(--text-l);
}

.timeline__era > p:last-child {
	margin: 0;
}

@media (min-width: 48rem) {
	.timeline__era {
		grid-template-columns: 11rem 1fr;
	}

	.timeline__years {
		grid-row: 1 / span 2;
	}
}

/* ---------------------------------------------------------------------------
   News: story cards, the home page carousel, and the story page
--------------------------------------------------------------------------- */

.section--flush-top {
	padding-top: 0;
}

.section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	max-width: none;
}

.news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.news-card__image {
	display: block;
	margin-bottom: var(--space-2);
	background: var(--rule-soft);
}

.news-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.news-card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
	margin: 0 0 0.25rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

.news-card__meta a {
	padding-block: 0.375rem;
	color: var(--gold-text);
	font-weight: 700;
	text-decoration: none;
}

.news-card__meta a:hover {
	text-decoration: underline;
}

.news-card h2,
.news-card h3 {
	margin-bottom: 0.5rem;
	font-size: var(--text-l);
	font-style: normal;
	font-weight: 800;
	line-height: 1.25;
}

.news-card h2 a,
.news-card h3 a {
	text-decoration: none;
}

.news-card h2 a:hover,
.news-card h3 a:hover {
	text-decoration: underline;
}

.news-card p {
	margin: 0 0 var(--space-1);
}

.news-card .arrow-link {
	margin-top: auto;
}

/* The newest story, set large at the top of the news page. */
.news-card--lead {
	height: auto;
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--rule);
}

.news-card--lead h2 {
	font-size: var(--text-xl);
}

.news-card--lead p {
	font-size: var(--text-m);
}

@media (min-width: 62rem) {
	.news-card--lead {
		display: grid;
		grid-template-columns: 3fr 2fr;
		align-items: center;
		gap: var(--space-5);
	}

	.news-card--lead .news-card__image {
		margin-bottom: 0;
	}

	.news-card--lead .arrow-link {
		margin-top: 0;
	}
}

/* The row scrolls sideways by itself. The padding keeps focus rings inside the scroll box. */
.carousel__track {
	position: relative;
	display: flex;
	gap: var(--space-4);
	margin: -0.375rem;
	padding: 0.375rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0.375rem;
	overscroll-behavior-x: contain;
}

.carousel__track > li {
	flex: 0 0 clamp(16rem, 84%, 22rem);
	margin: 0;
	scroll-snap-align: start;
}

/* Once pedalan.js has added the buttons and the rail, the scrollbar would say the same thing twice. */
.carousel--scripted .carousel__track {
	scrollbar-width: none;
}

.carousel--scripted .carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel__controls {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-4);
}

.carousel__rail {
	position: relative;
	grid-column: 1 / -1;
	height: 1.75rem;
	border-bottom: 1px solid var(--rule);
}

.carousel__rail-fill {
	position: absolute;
	bottom: -0.125rem;
	left: 0;
	width: 100%;
	height: 0.1875rem;
	background: var(--gold);
	transform-origin: 0 50%;
	scale: 0 1;
}

.carousel__wheel {
	position: absolute;
	bottom: 0.0625rem;
	left: 0;
	width: 1.625rem;
	height: 1.625rem;
	overflow: visible;
	color: var(--navy);
}

.carousel__count {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-s);
	font-variant-numeric: tabular-nums;
}

.carousel__buttons {
	display: flex;
	gap: 0.5rem;
}

.carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0.125rem solid var(--navy);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--navy);
	cursor: pointer;
}

.carousel__button:hover {
	background: var(--navy);
	color: #fff;
}

.carousel__button[aria-disabled="true"] {
	border-color: var(--rule);
	background: transparent;
	color: var(--ink-soft);
	cursor: default;
}

.carousel__button svg {
	width: 1.5rem;
	height: 1.5rem;
}

@media (min-width: 48rem) {
	.carousel__controls {
		grid-template-columns: 1fr auto auto;
	}

	.carousel__rail {
		grid-column: auto;
	}
}

.story-photo figcaption {
	margin-top: 0.5rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
	line-height: 1.5;
}

.story-photo__credit a {
	color: inherit;
}

.key-points {
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--rule);
	border-top: 0.1875rem solid var(--navy);
	background: var(--paper-warm);
}

.key-points h2 {
	margin-bottom: var(--space-1);
	color: var(--gold-text);
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-style: normal;
	font-weight: 700;
}

.key-points ul {
	margin: 0;
	padding-left: 1.25rem;
	font-size: var(--text-m);
}

.key-points li + li {
	margin-top: 0.5rem;
}

.key-points li::marker {
	color: var(--gold);
}

.term-list--filed {
	margin: var(--space-5) 0 0;
}

/* ---------------------------------------------------------------------------
   Curator portrait
--------------------------------------------------------------------------- */

.portrait {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}

.portrait img {
	flex: none;
	width: 7rem;
	height: 7rem;
	padding: 0.375rem;
	border: 1px solid var(--rule);
	background: var(--paper);
	box-shadow: 0 0.75rem 1.5rem rgb(13 33 73 / 14%);
}

.portrait figcaption {
	color: var(--ink-soft);
}

.portrait figcaption strong {
	display: block;
	color: var(--navy);
	font-size: var(--text-l);
}

@media (min-width: 40rem) {
	.portrait {
		float: right;
		display: block;
		width: 14rem;
		margin: 0.375rem 0 var(--space-3) var(--space-4);
	}

	.portrait img {
		width: 100%;
		height: auto;
		padding: 0.625rem;
	}

	.portrait figcaption {
		margin-top: 0.75rem;
	}
}

/* ---------------------------------------------------------------------------
   Brand page
--------------------------------------------------------------------------- */

.brand__kit-note {
	max-width: 44rem;
	margin: var(--space-2) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-s);
}

.brand-nav {
	margin-top: var(--space-4);
	border-block: 1px solid var(--rule);
}

.brand-nav ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.brand-nav li {
	margin: 0;
}

.brand-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-weight: 600;
}

.brand-section {
	padding-top: var(--space-5);
}

.brand-section + .brand-section {
	margin-top: var(--space-5);
	border-top: 1px solid var(--rule);
}

.brand-section__text {
	max-width: 44rem;
	margin-bottom: var(--space-3);
}

.brand-section__text > :last-child {
	margin-bottom: 0;
}

.brand-section .table-scroll {
	max-width: 34rem;
	margin-bottom: 0;
}

.brand-section--terms .entry-content {
	max-width: var(--wrap-narrow);
}

.brand-specimen {
	display: grid;
	place-items: center;
	margin-bottom: var(--space-3);
	padding: clamp(2rem, 1rem + 6vw, 5rem) var(--space-3);
	border: 1px solid var(--rule);
	background: var(--paper);
}

.brand-specimen img {
	width: min(100%, 30rem);
	height: auto;
}

@media (min-width: 60rem) {
	.brand-section--lead {
		display: grid;
		grid-template-columns: 3fr 2fr;
		gap: var(--space-5);
		align-items: center;
	}

	.brand-section--lead .brand-specimen,
	.brand-section--lead .brand-section__text {
		margin-bottom: 0;
	}
}

.brand-tiles,
.swatches {
	display: grid;
	gap: var(--space-4) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.brand-tiles {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.swatches {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.brand-tile,
.swatch {
	margin: 0;
}

/* The download links sit on one line across a row of tiles whose
   descriptions wrap to different heights. */
.brand-tile {
	display: flex;
	flex-direction: column;
}

.brand-tile__ground {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--rule);
}

.brand-tile__ground--paper {
	background: var(--paper);
}

.brand-tile__ground--navy {
	border-color: var(--navy);
	background: var(--navy);
}

.brand-tile__ground img {
	height: auto;
}

.brand-tile__ground--logo img,
.brand-tile__ground--wordmark img {
	width: 72%;
}

.brand-tile__ground--horizontal img {
	width: 86%;
}

.brand-tile__ground--symbol img {
	width: 40%;
}

.brand-tile h3 {
	margin: var(--space-2) 0 0.25rem;
	font-size: var(--text-l);
}

.brand-tile p {
	margin: 0;
}

.brand-tile .brand-tile__files {
	display: flex;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: 0.25rem;
}

.brand-tile__files a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: var(--tap);
	font-weight: 700;
}

.brand-tile__files svg {
	flex: none;
	width: 1.125em;
	height: 1.125em;
}

/* The last row holds the value and its Copy button, so they line up across
   swatches whose descriptions wrap to different heights. */
.swatch {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto 1fr auto;
	align-items: center;
	column-gap: var(--space-2);
}

.swatch__chip,
.swatch strong,
.swatch__use {
	grid-column: 1 / -1;
}

.swatch__chip {
	height: 5.5rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--rule);
}

.swatch strong {
	color: var(--navy);
	font-size: var(--text-l);
}

.swatch__use {
	align-self: start;
	margin-bottom: 0.5rem;
	color: var(--ink-soft);
	font-size: var(--text-s);
	line-height: 1.45;
}

.swatch__copy,
.swatch__copy:hover {
	min-height: 2.75rem;
	padding: 0.375rem 0.875rem;
	color: var(--navy);
	font-size: var(--text-s);
}

.swatch__copy {
	background: var(--paper);
}

.swatch__copy:hover {
	background: var(--paper-warm);
}

.type-specimens {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 48rem) {
	.type-specimens {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

.type-specimen {
	padding-top: var(--space-3);
	border-top: 0.125rem solid var(--navy);
}

.type-specimen > :last-child {
	margin-bottom: 0;
}

.type-specimen__sample {
	margin: 0 0 var(--space-3);
	color: var(--navy);
	font-size: var(--text-l);
	line-height: 1.5;
}

.type-specimen__sample--display {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
}

.name-forms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.name-form {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--text-l);
	font-weight: 600;
}

.name-form svg {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

.name-form--right {
	color: var(--green-text);
}

.name-form--wrong {
	color: var(--red-text);
}

.name-form__text {
	color: var(--ink);
}

.name-form--wrong .name-form__text {
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Motion staging. pedalan.js adds .motion-ready before first paint and takes
   the hero pieces from here; nothing below animates by itself.
--------------------------------------------------------------------------- */

.motion-ready [data-stage],
.motion-ready [data-motion="brush"] {
	opacity: 0;
}

/* Wheels and route stops turn and grow about their own centres, not the drawing's corner. */
[data-wheel],
[data-route-stop] {
	transform-box: fill-box;
	transform-origin: center;
}

[data-stage="unfurl"] {
	transform-origin: 50% 100%;
}

/* ---------------------------------------------------------------------------
   Print: an entry receipt or event page should print cleanly
--------------------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.action-bar,
	.share,
	.hero__brush,
	.page-head__brush,
	.button-row,
	.post-nav,
	.carousel__controls {
		display: none !important;
	}

	body {
		font-size: 12pt;
	}

	.motion-ready [data-stage] {
		opacity: 1;
	}
}