/*
Theme Name: BentangJawa
Theme URI: 
Author: Bentang Jelajah Nusantara
Author URI: 
Description: The theme for bentangjawa.cc, an unsupported ultra cycling race across Java. Forked from Zino and rebuilt on the palette and typefaces the race results boards use.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.0
Version: 2.30.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bentangjawa
Tags: one-column, block-patterns, custom-colors, custom-logo, editor-style, featured-images, full-site-editing, translation-ready, wide-blocks

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong {
	font-weight: 600;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
  width: auto;
}

.wp-block-site-title a,
.wp-block-query-pagination-numbers a,
.wp-block-post-excerpt a {
  text-decoration: inherit;
}

.wp-block-navigation ul,
.wp-block-navigation ul li,
.wp-block-navigation ul li a {
  color: inherit;
}

.wp-block-navigation ul.wp-block-navigation-submenu {
  padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
  align-items: flex-start;
  width: 100%;
  gap: 30px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
  display: flex;
  position: absolute;
  top: 10px;
  right: 0;
  width: auto;
  height: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle:where([aria-expanded="true"]) + .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  position: static;
  padding-top: 0;
}

.wp-block-comment-author-name a,
.wp-block-comment-date a {
    text-decoration: inherit;
    color: inherit;
}

.page .wp-block-template-part,
.single .wp-block-template-part,
.archive .wp-block-template-part {
  margin-top: 0;
}

footer.wp-block-template-part {
    margin-top: 0;
}

footer ul li a {
  text-decoration: inherit;
  color: inherit;
}

.wp-block-query ul li.wp-block-post + li.wp-block-post {
  margin-top: 6rem;
}

.wp-block-query ul.is-flex-container li.wp-block-post + li.wp-block-post,
.wp-block-query ul.is-layout-grid li.wp-block-post + li.wp-block-post {
  margin-top: 0;
}

nav.wp-block-query-pagination {
  margin-top: 6rem;
}

.entry-content .wp-block-image {
  margin: 1em 0;
}



button,
.wp-block-search__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  font-family: inherit;
  font-size: inherit;
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 5px;
  background: var(--wp--preset--color--black);
  line-height: 1;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #949494;
  border-radius: 5px;
  padding: calc(.667em + 2px);
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
  outline: 1px solid #949494;
}

/* Navigation */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong {
	font-weight: 600;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
  width: auto;
}

.wp-block-site-title a,
.wp-block-query-pagination-numbers a,
.wp-block-post-excerpt a {
  text-decoration: inherit;
}

.wp-block-navigation ul,
.wp-block-navigation ul li,
.wp-block-navigation ul li a {
  color: inherit;
}

.wp-block-navigation ul.wp-block-navigation-submenu {
  padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
  align-items: flex-start;
  width: 100%;
  gap: 30px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
  display: flex;
  position: absolute;
  top: 10px;
  right: 0;
  width: auto;
  height: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle:where([aria-expanded="true"]) + .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  position: static;
  padding-top: 0;
}

.wp-block-comment-author-name a,
.wp-block-comment-date a {
    text-decoration: inherit;
    color: inherit;
}

.page .wp-block-template-part,
.single .wp-block-template-part,
.archive .wp-block-template-part {
  margin-top: 0;
}

footer.wp-block-template-part {
    margin-top: 0;
}

footer ul li a {
  text-decoration: inherit;
  color: inherit;
}

.wp-block-query ul li.wp-block-post + li.wp-block-post {
  margin-top: 6rem;
}

.wp-block-query ul.is-flex-container li.wp-block-post + li.wp-block-post,
.wp-block-query ul.is-layout-grid li.wp-block-post + li.wp-block-post {
  margin-top: 0;
}

nav.wp-block-query-pagination {
  margin-top: 6rem;
}

.entry-content .wp-block-image {
  margin: 1em 0;
}



button,
.wp-block-search__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  font-family: inherit;
  font-size: inherit;
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 5px;
  background: var(--wp--preset--color--black);
  line-height: 1;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #949494;
  border-radius: 5px;
  padding: calc(.667em + 2px);
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
  outline: 1px solid #949494;
}

/* Navigation */
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
    padding-left: 0 !important;
	font-size: var(--wp--preset--font-size--medium)
}

.wp-block-navigation__submenu-container .wp-block-navigation-link{
	font-size: .95em !important
}

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon {
    margin-left: -0.25em !important;
    margin-top: 0 !important;
}

/* Steelytoe */
.steelytoeNavigation{display:none !important;}

/* Polylang
#
# EN and ID set as type rather than two flag bitmaps. Dimming the inactive
# language was the obvious way to separate them and it does not survive
# measurement: bone on teal is 5.72:1 at full strength and 4.14:1 by 78%
# opacity, so anything visibly dimmer than 85% fails AA. Both stay at full
# strength and the yellow rule marks which one you are reading. */
.polylang_langswitcher {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-item {
	display: flex;
	list-style: none;
	padding: 0;
}

.lang-item + .lang-item {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(156, 195, 182, 0.45);
}

.lang-item a {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--bone);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.15s ease;
}

.lang-item.current-lang a {
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--yellow);
}

.lang-item a:hover,
.lang-item a:focus-visible {
	border-bottom-color: var(--wp--preset--color--yellow);
}

/* Polylang marks a language with no translation of the current page. Until the
   Indonesian side is filled in, that link lands on the Indonesian home page
   rather than on this page - worth showing honestly rather than hiding. */
.lang-item.no-translation a {
	font-style: italic;
}

/*--------------------------------------------------------------
# Masthead and footer
#
# The chrome that carries the brand. Everything here is expressed through the
# theme.json presets, so the colours stay tied to the same values the results
# boards use rather than being restated as hex in a second place.
--------------------------------------------------------------*/

/* The signature of the canvas: a band across the very top, in the same warm
   three the results boards carry.

   One run of each colour rather than a repeat. At an 18px cadence the band read
   as texture - a barcode you stop seeing after the first visit - and on a phone
   it degenerated into a smear. Three thirds edge to edge read as a flag
   instead: the same three colours, but each one large enough to be a colour.

   Teal is not among them, deliberately. The masthead directly beneath is teal,
   so a teal segment would sit on its own ground and punch a gap in the band.

   Hard stops, not blends - the colour changes at the third and stays changed.
   Percentages so the thirds hold at every width. */
.bj-stripe {
	height: 14px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--yellow) 0 33.3333%,
		var(--wp--preset--color--coral) 33.3333% 66.6667%,
		var(--wp--preset--color--red) 66.6667% 100%);
}

/* The site title renders as a paragraph at level 0, so the core/paragraph ink
   rule lands on it at equal specificity and wins on order - navy on teal, which
   is 1.9:1 and effectively invisible. Scoping to the masthead settles it. */
.bj-masthead .wp-block-site-title,
.bj-masthead .wp-block-site-title a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.bj-masthead .wp-block-site-title a:hover {
	color: var(--wp--preset--color--yellow);
}

/* ---------------------------------------------------------------
   Primary navigation
 
   Six sections across, one of which - Races - opens a wide panel with a
   column and a sentence per event. Built on details/summary, so the whole
   thing opens and closes with no script at all; nav.js only adds the
   manners. The breakpoint below is the one nav.js also watches.
   --------------------------------------------------------------- */

.bj-nav {
	position: relative;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
}

.bj-nav-drawer > summary {
	display: none;
}

.bj-nav-groups {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* Marker off: the disclosure arrow is drawn as a chevron on the label. */
.bj-nav summary {
	list-style: none;
	cursor: pointer;
}

.bj-nav summary::-webkit-details-marker {
	display: none;
}

/* Section labels take the mono treatment the results boards use for every
   label: small, uppercase, widely tracked. */
.bj-nav-group > summary {
	color: var(--wp--preset--color--bone);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.bj-nav-group > summary::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.6em;
	vertical-align: 0.15em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.65;
	transition: transform 0.15s ease;
}

.bj-nav-group[open] > summary::after {
	transform: rotate(-135deg);
	opacity: 1;
}

/* Hover is a yellow rule rather than yellow text. Yellow on teal is 4.31:1,
   under AA for labels this size; the bone label stays at 5.72:1 and the brand
   colour does its work as a 2px underline, where 3:1 is the bar. */
.bj-nav-group > summary:hover,
.bj-nav-group > summary:focus-visible,
.bj-nav-group[open] > summary {
	border-bottom-color: var(--wp--preset--color--yellow);
}

/* Panels drop onto paper rather than staying teal-on-teal, so a nested item
   reads as its own surface. */
.bj-nav-panel {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
}

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

/* Mono is the chrome voice here - it belongs to the bar's labels, not to the
   page names inside a panel. Set in Plex Mono, "Finisher Eligibility" is both
   wider and slower to read than the thing it names deserves. */
.bj-nav-panel a {
	display: block;
	font-family: var(--wp--preset--font-family--archivo);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	font-weight: 500;
	line-height: 1.35;
	padding: 7px 18px;
}

.bj-nav-panel a:hover,
.bj-nav-panel a:focus-visible {
	background-color: var(--wp--preset--color--paper-hi);
	color: var(--wp--preset--color--teal);
}

.bj-nav-panel a[aria-current="page"] {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--teal);
}

/* The one line the old block submenu could not carry: who a section applies
   to. Rules and FAQ govern Bentang Jawa and Kelana alike, and saying so in
   the menu is cheaper than the reader finding out on the page. */
.bj-nav-note {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 8px 18px 9px;
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

/* The events panel. Its columns are the point of the whole restructure: a
   name alone tells a first-time reader nothing about Kelana or Graventure. */
.bj-nav-cols {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
}

.bj-nav-col-h {
	margin: 0 0 0.25em;
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--teal);
}

.bj-nav-col-d {
	margin: 0 0 0.75em;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	max-width: 28ch;
}

.bj-nav-col ul {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 4px;
}

.bj-nav-col a {
	padding-left: 0;
	padding-right: 8px;
}

.bj-nav-col a:hover,
.bj-nav-col a:focus-visible {
	background-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Wide: a bar with panels hanging off it ------------------------------ */

@media (min-width: 1024px) {

	.bj-nav-panel {
		position: absolute;
		top: calc(100% + 14px);
		right: 0;
		z-index: 40;
		/* Sized to the longest label rather than to a guess, so "What
		   Unsupported Means" stays on one line; capped so it cannot run off a
		   narrow window. */
		width: max-content;
		min-width: 220px;
		max-width: min(340px, calc(100vw - 3rem));
		padding: 6px 0;
		border-radius: 3px;
		box-shadow: 0 18px 40px -24px rgba(32, 47, 80, 0.55);
	}

	/* Narrow panels anchor to their own section and open leftward, so the
	   rightmost section cannot push the panel off the edge of the window. */
	.bj-nav-group {
		position: relative;
	}

	/* The wide panel is the exception: it anchors to the nav itself, which is
	   the only box in the masthead guaranteed to be as wide as the panel needs.
	   Anchoring it to its own summary would hang it off a six-character word. */
	.bj-nav-group.is-wide {
		position: static;
	}

	.bj-nav-panel-wide {
		width: min(760px, calc(100vw - 3rem));
		/* Undo the narrow panels' cap, which would otherwise clamp three
		   columns into 340px. */
		max-width: none;
		padding: 0;
	}

	.bj-nav-cols {
		grid-template-columns: repeat(3, 1fr);
	}

	.bj-nav-col + .bj-nav-col {
		border-left: 1px solid var(--wp--preset--color--rule);
		padding-left: var(--wp--preset--spacing--40);
	}
}

/* --- Narrow: a drawer ---------------------------------------------------- */

@media (max-width: 1023px) {

	.bj-nav-drawer > summary {
		display: flex;
		align-items: center;
		gap: 0.6em;
		color: var(--wp--preset--color--bone);
		font-size: var(--wp--preset--font-size--x-small);
		text-transform: uppercase;
		letter-spacing: 0.14em;
		font-weight: 600;
		padding: 6px 0;
	}

	.bj-nav-burger {
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}

	.bj-nav-drawer[open] .bj-nav-burger {
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}

	/* The drawer's contents have to span the masthead, not the width of the
	   word "Menu" that opens them - so the containing block moves up to the
	   masthead for as long as the drawer is in use. Left in normal flow it
	   renders as a 238px column wedged into the corner the button sits in. */
	.bj-masthead {
		position: relative;
	}

	.bj-nav {
		position: static;
	}

	.bj-nav-groups {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		margin-top: 0;
		background-color: var(--wp--preset--color--teal);
		padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		box-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.6);
		border-top: 1px solid rgba(156, 195, 182, 0.35);
	}

	.bj-nav-group {
		border-bottom: 1px solid rgba(156, 195, 182, 0.35);
	}

	.bj-nav-group > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 2px;
		border-bottom: 0;
	}

	.bj-nav-group > summary::after {
		margin-left: auto;
	}

	/* Not yellow text: yellow on teal is 4.31:1, under AA at this size, and the
	   same trap the bar's hover rule avoids. The open section is marked with a
	   yellow edge instead - a 3:1 bar for a 3:1 job - and the chevron has
	   already turned. */
	.bj-nav-group[open] > summary {
		border-bottom: 0;
		box-shadow: inset 3px 0 0 var(--wp--preset--color--yellow);
		padding-left: 12px;
	}

	.bj-nav-panel {
		border-width: 1px 0 0;
		margin: 0 0 14px;
		padding: 4px 0;
	}

	.bj-nav-panel a {
		padding: 9px 14px;
	}

	.bj-nav-panel-wide {
		padding: 0;
	}

	.bj-nav-cols {
		gap: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--30) 14px var(--wp--preset--spacing--40);
	}

	.bj-nav-col + .bj-nav-col {
		border-top: 1px solid var(--wp--preset--color--rule);
		padding-top: var(--wp--preset--spacing--30);
	}

	.bj-nav-col a {
		padding: 7px 0;
	}
}

/* On a phone the masthead was spending three stacked rows - wordmark, then the
   menu button, then the language toggle - on chrome, before a word of the page
   showed. Shrinking the wordmark buys enough room to put all three on one line
   and hands the height back to the content. */
@media (max-width: 767px) {

	.bj-nav-wrap {
		gap: var(--wp--preset--spacing--30);
	}

	.bj-masthead .bj-brand {
		gap: 0.55rem;
	}

	.bj-masthead .bj-site-mark img {
		width: 38px;
		height: 38px;
	}

	.bj-masthead .wp-block-site-title {
		font-size: 1.05rem;
	}

	.bj-nav-drawer > summary {
		letter-spacing: 0.1em;
	}
}

/* The mark is a theme file, not a site-logo block, so it carries none of
   core's block styling and needs its own. line-height 0 because an inline
   image otherwise sits on a text baseline and adds a few pixels of descender
   space beneath itself, which is enough to knock it out of line with the
   wordmark beside it. */
.bj-site-mark {
	line-height: 0;
}

.bj-site-mark img {
	display: block;
	width: 54px;
	height: 54px;
}

.bj-masthead .polylang_langswitcher {
	padding: 0;
	margin: 0;
}

/* Footer, following the boards: ink ground, teal-soft links, yellow on hover. */
.bj-footer .bj-footmark {
	color: var(--wp--preset--color--bone);
}

.bj-footmark {
	line-height: 1;
	margin-bottom: 0.4em;
}

/* The footer group sets its text to ink-soft, but the paragraph block inside
   carries the theme's default paragraph ink from styles.blocks - which on an
   ink ground is invisible, and was hiding the whole "organised by" line while
   leaving its link readable. Paragraphs in here follow the footer. */
.bj-footer p {
	color: var(--wp--preset--color--ink-soft);
}

/* Stated in full rather than leaning on block attributes: these headings are
   generated now, so there is no block markup to carry the colour and face, and
   inheriting the default paragraph ink put them at 1:1 on the ink footer. The
   selector needs both classes to outrank the rule above. */
.bj-footer .bj-foot-head {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--teal-soft);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	margin-bottom: 0.6em;
}

.bj-footer a {
	color: var(--wp--preset--color--teal-soft);
	text-decoration: none;
	border-bottom: 1px solid rgba(156, 195, 182, 0.4);
}

.bj-footer a:hover,
.bj-footer a:focus-visible {
	color: var(--wp--preset--color--yellow);
	border-bottom-color: var(--wp--preset--color--yellow);
}

/* The footer nav is generated from the same tree as the header, so the two
   cannot drift apart and the Indonesian footer stops sending readers to
   English pages. Six short columns rather than two long sentences of links:
   a list scans, a run of names separated by dots does not. */
/* The measure goes on the paragraphs, not the group. A max-width on a child
   of a constrained layout meets core's margin-left/right:auto !important and
   centres the whole block, which put the wordmark in the middle of the footer. */
.bj-foot-brand > p {
	max-width: 46ch;
}

.bj-foot-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

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

.bj-foot-nav li {
	margin-bottom: 0.4em;
}

.bj-foot-nav a {
	font-size: var(--wp--preset--font-size--small);
	border-bottom: 0;
}

.bj-foot-nav a:hover,
.bj-foot-nav a:focus-visible {
	border-bottom: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bj-foot-rule {
	opacity: 0.24;
	border: none;
	height: 1px;
}

.bj-copyright {
	letter-spacing: 0.06em;
	margin: 0;
}

/*--------------------------------------------------------------
# Hero
#
# The front page opening over the road photograph. No visible title and no
# facts strip: the eyebrow, the lede and the two buttons carry it, and the
# rest of the frame is given to the road. Both were removed deliberately -
# git has them at df2b815 if they are wanted back.
--------------------------------------------------------------*/

/* The h1 is present for the document outline and for anyone arriving by
   screen reader, and shown to no one. Core defines .screen-reader-text, but
   the failure mode if it ever stops being emitted is a 100px title appearing
   in the middle of the hero, so this does not lean on it. */
.bj-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bj-hero {
	margin-block-start: 0;
	/* Tall, so the road has somewhere to be. Content sits at the top under the
	   padding and the remaining height is photograph. No flex here: as flex
	   items the children stop stretching and constrained layout's auto side
	   margins then centre each one, which quietly centres a left-aligned hero. */
	min-height: clamp(560px, 86vh, 900px);
	padding-top: clamp(56px, 9vh, 104px) !important;
	padding-bottom: clamp(40px, 6vh, 72px) !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 62%;
	/* The overlay holds at 0.92 through the top 45%, where all the text is,
	   then clears quickly. Below that nothing has to stay legible, so the
	   photograph can come up to near full strength at the bottom. */
	background-image:
		linear-gradient(to bottom,
			rgba(14, 99, 87, 0.95) 0%,
			rgba(14, 99, 87, 0.92) 45%,
			rgba(14, 99, 87, 0.55) 62%,
			rgba(14, 99, 87, 0.22) 80%,
			rgba(14, 99, 87, 0.10) 100%),
		url(assets/images/hero-road-1400.jpg);
}

@media (min-width: 900px) {
	.bj-hero {
		background-image:
			linear-gradient(to bottom,
				rgba(14, 99, 87, 0.95) 0%,
				rgba(14, 99, 87, 0.92) 45%,
				rgba(14, 99, 87, 0.55) 62%,
				rgba(14, 99, 87, 0.22) 80%,
				rgba(14, 99, 87, 0.10) 100%),
			url(assets/images/hero-road-2400.jpg);
	}
}

.bj-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 600;
	margin: 0 0 0.9em;
}

/* The lede sits inside a plain flow group rather than taking a max-width as a
   direct child of the hero. Constrained layout gives any direct child whose
   max-width is narrower than contentSize auto side margins, and forcing those
   to zero pins the lede to the hero's padding edge while its siblings stay
   centred in the 1240px column - which lines up at 1280px and is 350px out at
   2000px. The wrapper is the column; the measure is applied inside it. */
.bj-lede-wrap {
	margin-top: 0.9em;
}

.bj-hero .bj-lede {
	max-width: 46ch;
	margin: 0;
	line-height: 1.6;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* The ghost button has no fill, so its outline is the only thing carrying it.
   Bone on the overlay clears the 3:1 bar for a non-text boundary. */
.bj-btn-ghost .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--bone);
	background-color: transparent;
}

.bj-btn-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--teal);
}

.bj-cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 14px 22px;
	border-radius: 2px;
}

/*--------------------------------------------------------------
# Results index
#
# The landing page at /results/. Built as one row per edition rather than a
# column of year buttons: the row carries the numbers that make an edition
# worth opening - who started, who was classified, how fast the quickest of
# them went - so the page is readable on its own and not merely a menu.
--------------------------------------------------------------*/

/* Set here as well as on the hero's block attributes so the same class works
   when it is emitted as plain markup from a pattern. */
/* core/paragraph sets a colour on `p` directly, which beats the bone inherited
   from the group - the same trap the site title fell into. Raw-markup
   paragraphs on a dark band have to say it themselves. */
.bj-eyebrow {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.bj-results-head .bj-eyebrow {
	color: var(--wp--preset--color--bone);
}

.bj-results-title {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: clamp(40px, 6.5vw, 74px);
	line-height: 0.96;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--bone);
	margin: 0;
}

/* The page's own copy, editable in WordPress rather than baked into the theme,
   which also lets Polylang translate it. */
.bj-results-head .wp-block-post-content p {
	max-width: 58ch;
	margin: 1em 0 0;
	color: var(--wp--preset--color--bone);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

/* Keys are bone rather than teal-soft: teal-soft on teal is 3.70:1 and these
   labels are 9px. Size, tracking and weight carry the hierarchy instead. */
.bj-tally {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--teal-soft);
	border-radius: 2px;
}

.bj-tally li {
	flex: 1 1 auto;
	min-width: 140px;
	padding: 12px 16px;
	border-right: 1px solid rgba(156, 195, 182, 0.4);
}

.bj-tally li:last-child { border-right: none; }

/* Wrapped onto a phone the strip stops lining up: flex sizes each row to its
   own content, so the dividers land at a different x on every row. A grid
   gives every row the same two columns, and the borders then have to follow
   the grid rather than the source order. */
@media (max-width: 700px) {

	.bj-tally {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.bj-tally li {
		min-width: 0;
		border-right: 1px solid rgba(156, 195, 182, 0.4);
		border-bottom: 1px solid rgba(156, 195, 182, 0.4);
	}

	.bj-tally li:nth-child(2n) { border-right: none; }

	.bj-tally li:nth-last-child(-n+2) { border-bottom: none; }
}

.bj-tally .k {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.bj-tally .v {
	display: block;
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	margin-top: 3px;
}

.bj-tally .n {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	opacity: 0.8;
	margin-top: 2px;
}

/* One row per edition. */
.bj-editions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: none;
}

/* Every track is sized from the viewport, never from the row's own content.
   `auto` tracks made each card measure itself, so a row with 65 and 45 in it
   laid its columns out differently from one with 194 and 141 - correct per
   card, and visibly ragged down the page. Fixed tracks make the six rows read
   as one table. */
.bj-ed-link {
	display: grid;
	grid-template-columns:
		clamp(84px, 7.5vw, 112px)
		minmax(0, 1fr)
		clamp(150px, 15vw, 186px)
		clamp(140px, 15vw, 194px)
		24px;
	align-items: center;
	gap: clamp(14px, 2.5vw, 30px);
	padding: 18px clamp(16px, 2.4vw, 26px);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 3px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bj-ed-link:hover,
.bj-ed-link:focus-visible {
	border-color: var(--wp--preset--color--teal);
	transform: translateY(-1px);
	box-shadow: 0 3px 0 0 var(--wp--preset--color--teal);
}

/* Tabular figures: Zilla Slab's proportional numerals make 2021 and 2026
   different widths, which on the narrow layout - where the year sits in an
   auto track - moved the date beside it by a few pixels per row. It is also
   simply what a column of years wants. */
.bj-ed-year {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--teal);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.bj-ed-date {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

.bj-ed-spec {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin-top: 3px;
	font-variant-numeric: tabular-nums;
}

/* The two figures get a column each rather than sitting in a flex row that
   shrinks to fit them, so STARTED lines up with STARTED and 65 sits under 194
   instead of beside where 194 happened to end. */
.bj-ed-nums {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(8px, 1.4vw, 16px);
}

.bj-ed-num b {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bj-ed-num i {
	display: block;
	font-style: normal;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 4px;
}

.bj-ed-fast {
	text-align: right;
	min-width: 0;
}

.bj-ed-fast-t {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bj-ed-fast-n {
	display: block;
	font-size: 11px;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	margin-top: 3px;
}

.bj-ed-go {
	font-size: 20px;
	color: var(--wp--preset--color--teal);
	text-align: right;
}

/* The way through to the recap. It sits directly under the six editions and
   reads as the seventh thing in the list rather than as a footnote, because it
   is the page most people arriving at this index are actually looking for. */
.bj-results-more {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.bj-results-all {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--teal);
	padding-bottom: 1px;
}

.bj-results-all:hover,
.bj-results-all:focus-visible {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper-hi);
}

.bj-results-all-n {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.bj-results-foot {
	margin: clamp(26px, 4vw, 40px) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Below the row layout's comfortable width the grid becomes two columns: the
   year stays with the route, and the numbers wrap underneath rather than
   being squeezed into slivers. */
@media (max-width: 860px) {
	.bj-ed-link {
		grid-template-columns: clamp(72px, 18vw, 96px) 1fr;
		gap: 6px 18px;
		padding: 16px 18px;
	}
	.bj-ed-where { grid-column: 2; }
	.bj-ed-nums  { grid-column: 1 / -1; margin-top: 8px; }
	.bj-ed-fast  { grid-column: 1 / -1; text-align: left; }
	.bj-ed-fast-t { display: inline; }
	.bj-ed-fast-n { display: inline; margin-left: 8px; }
	.bj-ed-go    { display: none; }
}

/*--------------------------------------------------------------
# Notes
#
# The small signposts that sit above and below a long page - the FAQ opens
# with one pointing at the rules and closes with one pointing at the crew.
# Design lives here; the words live in the page, where they can be edited and
# where Polylang can translate them.
--------------------------------------------------------------*/

.bj-note {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--teal);
	border-radius: 3px;
	padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
	margin-block: clamp(20px, 3vw, 32px);
}

.bj-note p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.bj-note-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-bottom: 0.6em !important;
}

/* The closing note is the one that asks for something, so it carries the
   yellow rather than repeating the teal of the opener. */
.bj-note-end {
	border-left-color: var(--wp--preset--color--yellow);
}

.bj-note-end .bj-note-k {
	color: var(--wp--preset--color--ink);
}

/*--------------------------------------------------------------
# FAQ — open plan
#
# No accordions. The answers here run to about two sentences each, so hiding
# one behind a click costs a decision and saves almost nothing; all 33 sit on
# the page under eight section headings, and the rail carries anyone who came
# for a single answer. Nothing here needs JavaScript.
--------------------------------------------------------------*/

@media (min-width: 900px) {
	.bj-faq {
		display: grid;
		grid-template-columns: 208px minmax(0, 1fr);
		column-gap: clamp(30px, 4vw, 56px);
		align-items: start;
	}
}

.bj-faq-rail {
	margin: clamp(22px, 3vw, 30px) 0;
}

@media (min-width: 900px) {

	.bj-faq-rail {
		position: sticky;
		/* Logged in, WordPress fixes its admin bar over the top of the page and
		   publishes the height as this variable. Sticking at a bare 24px tucks
		   the rail's first line behind it. */
		top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
		margin-top: 0;
	}
}

.bj-faq-rail-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 10px;
}

.bj-faq-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

@media (min-width: 900px) {
	.bj-faq-rail ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 2px;
	}
}

.bj-faq-rail a {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	padding: 7px 10px;
}

@media (min-width: 900px) {
	.bj-faq-rail a {
		background-color: transparent;
		border: none;
		border-left: 2px solid var(--wp--preset--color--rule);
		border-radius: 0;
		padding: 6px 0 6px 12px;
	}
}

.bj-faq-rail a:hover,
.bj-faq-rail a:focus-visible {
	color: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	background-color: var(--wp--preset--color--paper-hi);
}

@media (min-width: 900px) {
	.bj-faq-rail a:hover,
	.bj-faq-rail a:focus-visible { background-color: transparent; }
}

/* Where you are. Chips on a phone fill; the desktop rail is a list of left
   edges, so there the edge is what lights up. */
.bj-faq-rail a.is-here {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
}

@media (min-width: 900px) {

	.bj-faq-rail a.is-here {
		color: var(--wp--preset--color--teal);
		background-color: transparent;
		border-left-color: var(--wp--preset--color--teal);
	}
}

/* A section heading is a rule across the column, the way the boards separate
   one classification from the next. */
.bj-faq-sec {
	font-size: var(--wp--preset--font-size--max-36) !important;
	margin: clamp(40px, 5vw, 60px) 0 0 !important;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	scroll-margin-top: 20px;
}

.bj-faq-sec:first-of-type { margin-top: clamp(20px, 3vw, 28px) !important; }

/* The rail focuses the heading so a keyboard reader lands on it. A heading is
   not a control, and the browser's default ring around one reads as a
   selection box - the same artefact the rules rail had. */
.bj-faq-sec:focus,
.bj-faq-sec:focus-visible {
	outline: none;
}

/* Where you landed. :target covers a link followed from outside; .is-landed is
   the rail's own clicks, which record the position with replaceState and so
   never move :target. */
.bj-faq-sec:target,
.bj-faq-sec.is-landed {
	border-bottom-color: var(--wp--preset--color--teal);
	background-color: var(--wp--preset--color--paper-hi);
	box-shadow: -12px 0 0 var(--wp--preset--color--paper-hi), 12px 0 0 var(--wp--preset--color--paper-hi);
}

.bj-faq-q {
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 26px 0 0 !important;
}

/* The answer sits directly under its question, separated from the next pair by
   a hairline rather than by whitespace alone - 33 of these need a rhythm. */
.bj-faq-q + p,
.bj-faq-q + ul,
.bj-faq-q + ol {
	margin-top: 7px;
}

.bj-faq .wp-block-post-content > p,
.bj-faq > p {
	max-width: 68ch;
}

.bj-faq-q ~ p:last-of-type { margin-bottom: 0; }

/*--------------------------------------------------------------
# Contact routes
#
# One address, four doors. The page asks what the message is about before it
# offers a button, so the subject line arrives written and the crew's single
# inbox sorts itself. The address is never printed - each button is a mailto
# with its subject already filled in.
--------------------------------------------------------------*/

.bj-routes {
	display: grid;
	gap: 10px;
	margin: clamp(24px, 4vw, 36px) 0 0;
}

.bj-route {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--teal);
	border-radius: 3px;
	padding: clamp(16px, 2.4vw, 22px) clamp(17px, 2.6vw, 24px);
}

.bj-route-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 9px !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 7px !important;
}

.bj-route-t {
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 5px !important;
}

.bj-route-d {
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 0 0 14px !important;
	max-width: 60ch;
}

/* The button is the only way to the address, so it has to look like the action
   it is rather than like a link that happens to be there. */
.bj-route .wp-block-button__link,
.bj-contact-fallback button {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 12px 18px;
	border-radius: 2px;
	border: 1.5px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
}

.bj-route .wp-block-button__link:hover,
.bj-route .wp-block-button__link:focus-visible,
.bj-contact-fallback button:hover,
.bj-contact-fallback button:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

/* A mailto is a dead end for anyone reading mail in a browser tab: the click
   does nothing and there is no address on screen to fall back to. This gives
   them one, without printing it for everyone else. */
.bj-contact-fallback {
	margin: clamp(20px, 3vw, 28px) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bj-contact-fallback button {
	font-size: 10px;
	padding: 9px 13px;
	background-color: transparent;
}

.bj-contact-out {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	color: var(--wp--preset--color--ink);
	word-break: break-all;
}

/*--------------------------------------------------------------
# Home page
#
# Four blocks below the hero, each answering a different question: how far
# (the map), what it asks of you, what it costs (the record), whether you
# could (entry). What they replaced was a full-width YouTube embed and one
# button off the site - git has it at 89c6018 if it is wanted back.
--------------------------------------------------------------*/

/* Sections are separated by air and a hairline rather than by boxes. The page
   ground is bone; adding cards to it would make a home page out of a set of
   panels, which is the look the rest of the site avoids. */
.bj-home-sec {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}

.bj-home-sec > h2 {
	margin-top: 0;
}

/* The eyebrow above each section heading, in the boards' label voice. */
.bj-home-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
	margin: 0 0 0.5em;
}

/* A row of destinations at the foot of a section. Not buttons: four buttons in
   a row reads as a form, and these are places to go, not actions to take. */
.bj-home-go {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin-top: 1.4em;
}

/* Underlined in teal, not yellow. Yellow on teal in the masthead is 4.31:1
   and does its job; yellow on bone is 1.33:1 and simply is not there - which
   would leave these links distinguished from the text around them by colour
   alone. */
.bj-home-go a {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--teal);
	padding-bottom: 1px;
	white-space: nowrap;
}

/* nowrap keeps a two-word destination from splitting, which is right until the
   destination is longer than the screen: "Talk to us about partnering" wants
   285px and a 320px phone offers 244px, and the surplus took the whole page
   sideways. Below the phone breakpoint the link is allowed to wrap - which
   changes nothing for the labels that already fit, because a label that fits
   has nowhere to wrap. */
@media (max-width: 639px) {

	.bj-home-go a {
		white-space: normal;
	}
}

.bj-home-go a:hover,
.bj-home-go a:focus-visible {
	background-color: var(--wp--preset--color--paper-hi);
	border-bottom-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

/* ---------- The route map ---------- */

/* Sits on the content measure with everything else. It was full-bleed at
   first, on the reasoning that the point of the map is length - but at 2.9:1
   and the full width of a desktop window it dwarfs the sections either side of
   it, and the page reads as a map with some text attached. */
.bj-map {
	margin-top: var(--wp--preset--spacing--60);
}

.bj-map img {
	display: block;
	width: 100%;
	height: auto;
	/* The artwork is flattened onto bone rather than carrying an alpha channel,
	   which costs 60K instead of 300K. This keeps the two in agreement if the
	   page ground is ever changed. */
	background-color: var(--wp--preset--color--bone);
}

.bj-map figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.4em 1.2em;
	margin-top: var(--wp--preset--spacing--30);
}

.bj-map-route {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.bj-map-facts {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- The record ---------- */

.bj-record {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin: var(--wp--preset--spacing--40) 0;
	font-variant-numeric: tabular-nums;
}

.bj-stat {
	display: flex;
	flex-direction: column;
}

.bj-stat-v {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: clamp(2rem, 6vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--teal);
}

.bj-stat-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.55em;
}

/* ---------- Films ---------- */

/* Two up on a phone, three across from tablet width. Left to auto-fit at the
   820px measure, five films land as four and a stray; three and two reads as a
   deliberate arrangement and gives each card enough width for its title. */
.bj-films {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
}

@media (min-width: 700px) {

	.bj-films {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bj-film {
	text-decoration: none;
	color: inherit;
	display: block;
}

.bj-film-shot {
	position: relative;
	display: block;
	margin-bottom: 0.7em;
	background-color: var(--wp--preset--color--ink);
}

.bj-film-shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.15s ease;
}

/* A play mark, so a still reads as a film rather than as a photograph - which
   matters here because it is the only still on the page. */
.bj-film-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: rgba(32, 47, 80, 0.78);
	border: 2px solid var(--wp--preset--color--bone);
	transition: background-color 0.15s ease;
}

.bj-film-play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--wp--preset--color--bone);
}

.bj-film:hover .bj-film-play,
.bj-film:focus-visible .bj-film-play {
	background-color: var(--wp--preset--color--teal);
}

.bj-film:hover .bj-film-shot img {
	opacity: 0.86;
}

.bj-film-year {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-muted);
}

.bj-film-title {
	display: block;
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.15;
	margin-top: 0.15em;
	color: var(--wp--preset--color--ink);
}

.bj-film:hover .bj-film-title,
.bj-film:focus-visible .bj-film-title {
	color: var(--wp--preset--color--teal);
}

.bj-film-sub {
	display: block;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.2em;
}

/* ---------- Sponsors ---------- */

/* Quiet on purpose. This is the most visited page on the site, so the logos
   are worth carrying here - but a home page that shouts about its sponsors is
   a home page about its sponsors. */
.bj-sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin: var(--wp--preset--spacing--50) 0 0;
}

/* The logos are lazy and sized by max-height with both dimensions auto, so
   before the bytes arrive the browser has nothing to reserve and gives the row
   no height at all - then the page below it jumps when they land. width and
   height attributes do not help here, because neither dimension is definite in
   the CSS for the aspect ratio to work against. Reserving the row on the link
   does: 52px is what the tallest logo is allowed to be, so the space the row
   ends up needing is the space it had all along. */
.bj-sponsor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(52px * var(--bj-logo-scale, 1));
	line-height: 0;
}

/* The logos are served pre-trimmed to their own ink (see inc/home.php), so
   bounding them by both edges puts every mark at a comparable optical weight
   without distorting any of them. A common fixed height cannot: the artwork
   fills between 10% and 97% of its supplied canvas, and Cyclopedia's wordmark
   came out five pixels tall. */
.bj-sponsor img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(52px * var(--bj-logo-scale, 1));
	max-width: calc(150px * var(--bj-logo-scale, 1));
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

a.bj-sponsor:hover img,
a.bj-sponsor:focus-visible img {
	opacity: 1;
}

.bj-sponsors-more {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-align: center;
	margin-top: var(--wp--preset--spacing--40);
}

@media (prefers-reduced-motion: reduce) {

	.bj-film-shot img,
	.bj-film-play,
	.bj-sponsor img {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Documentary page
#
# Five films, each a still until it is pressed. The page carried five
# YouTube embeds before, which loaded five players on every visit whether
# or not anyone watched; assets/js/film-embed.js swaps the pressed one for
# a player in place. Without the script every still is still a link.
--------------------------------------------------------------*/

.bj-reels {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--60);
}

.bj-reel {
	margin: 0;
}

/* The 16:9 box is held by aspect-ratio rather than by the image, so swapping
   the still for an iframe does not move everything below it up the page. */
.bj-reel-shot {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
}

.bj-reel-shot img,
.bj-reel-shot iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.bj-reel-shot img {
	object-fit: cover;
	transition: opacity 0.15s ease;
}

a.bj-reel-shot:hover img {
	opacity: 0.86;
}

/* Larger than the home page's mark, because the target is larger. */
.bj-reel-shot .bj-film-play {
	width: 72px;
	height: 72px;
	border-width: 3px;
}

.bj-reel-shot .bj-film-play::after {
	border-width: 12px 0 12px 20px;
}

a.bj-reel-shot:hover .bj-film-play,
a.bj-reel-shot:focus-visible .bj-film-play {
	background-color: var(--wp--preset--color--teal);
}

.bj-reel figcaption {
	margin-top: var(--wp--preset--spacing--30);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.9em;
}

.bj-reel-year {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

.bj-reel-title {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

.bj-reel-sub {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
	flex: 1 1 100%;
}

@media (prefers-reduced-motion: reduce) {

	.bj-reel-shot img {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Sponsors page
#
# Eight partners as a wall of cards. What it replaced was eight
# full-width logos stacked down the page with a rule between each,
# no names and no context - a reader learned nothing and a sponsor
# got a picture.
--------------------------------------------------------------*/

/* Stepped rather than auto-filled. Left to auto-fill, a 200px minimum gives
   one column on a phone - eight cards in a single stack - and letting it go
   narrower to fix that gives five across on the desktop measure, which is too
   thin for a name like Mujiono Cycling Caps. */
.bj-partners {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

@media (min-width: 380px) {

	.bj-partners {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 700px) {

	.bj-partners {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bj-partner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.bj-partner:hover,
a.bj-partner:focus-visible {
	border-color: var(--wp--preset--color--teal);
	background-color: var(--wp--preset--color--paper-hi);
}

/* A fixed box for the mark, so eight logos of eight different shapes still
   line their names up. The logos are pre-trimmed to their own ink, so contain
   inside a common box puts them at comparable optical weight without
   stretching any of them. */
/* 64px, not the 56px the marks are allowed to reach, so that a logo carrying
   a --bj-logo-scale above 1 has somewhere to grow into. The box is one height
   for every card whatever is in it, because the names below them line up
   across a row only while it is. */
.bj-partner-mark {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 64px;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--40);
}

.bj-partner-mark img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(56px * var(--bj-logo-scale, 1));
	max-width: 100%;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

a.bj-partner:hover .bj-partner-mark img,
a.bj-partner:focus-visible .bj-partner-mark img {
	opacity: 1;
}

.bj-partner-name {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

a.bj-partner:hover .bj-partner-name,
a.bj-partner:focus-visible .bj-partner-name {
	color: var(--wp--preset--color--teal);
}

.bj-partner-role {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.4em;
}

/* The closing ask. Sponsors reading this page are the audience most likely to
   be weighing whether to join them, so the page should say how. */
.bj-partner-ask {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}

@media (prefers-reduced-motion: reduce) {

	.bj-partner,
	.bj-partner-mark img {
		transition: none;
	}
}


/*--------------------------------------------------------------
# Sponsors page - tiers and the ledger
#
# The page is organised by time now. Every card says how long that
# company has stayed, and the board below shows all six editions
# at once - which is the only way the page can say the thing most
# worth saying: five of these have been here since the first
# edition. A logo cannot say that.
--------------------------------------------------------------*/

/* Full measure, so the note inside can take a max-width without core's
   margin:auto !important centring the whole band. */
.bj-tier-head {
	margin-block-start: var(--wp--preset--spacing--70);
}

.bj-tier {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-block: 0;
	padding-bottom: 0.6em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-tier-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
	margin-block: var(--wp--preset--spacing--30) 0;
	max-width: 58ch;
}

/* The title sponsor is one company, not a grid of one. */
.bj-partners-lead {
	grid-template-columns: 1fr;
}

@media (min-width: 380px) {

	.bj-partners-lead {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 700px) {

	.bj-partners-lead {
		grid-template-columns: 1fr;
	}
}

.bj-partner-lead {
	background-color: var(--wp--preset--color--paper-hi);
	border-color: var(--wp--preset--color--teal-soft);
	padding: var(--wp--preset--spacing--50);
}

.bj-partner-lead .bj-partner-mark {
	height: 84px;
	margin-bottom: var(--wp--preset--spacing--50);
}

.bj-partner-lead .bj-partner-mark img {
	max-height: 84px;
	opacity: 1;
}

.bj-partner-lead .bj-partner-name {
	font-size: var(--wp--preset--font-size--large);
}

/* Fourteen of the twenty-two have no artwork yet. An empty mark box keeps the
   names on one line across a row, so a card without a logo reads as a card
   whose logo has not arrived rather than as a broken one. */
.bj-partner-mark.is-blank {
	height: 64px;
	border-left: 2px solid var(--wp--preset--color--rule);
}

.bj-partner-lead .bj-partner-mark.is-blank {
	height: 84px;
}

/* The line the old page could not print. */
.bj-partner-since {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: var(--wp--preset--color--teal);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

a.bj-partner:hover .bj-partner-since,
a.bj-partner:focus-visible .bj-partner-since {
	color: var(--wp--preset--color--ink);
}

.bj-partner-note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
	margin-top: var(--wp--preset--spacing--30);
	max-width: 54ch;
}

/* -- the ledger ------------------------------------------------ */

.bj-ledger-wrap {
	margin-top: var(--wp--preset--spacing--60);
}

/* Seven narrow columns next to a name is wider than a phone. It scrolls in its
   own box rather than taking the page sideways with it. */
.bj-ledger {
	margin: 0 0 var(--wp--preset--spacing--50);
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--rule);
	background-color: var(--wp--preset--color--paper);
}

.bj-ledger table {
	border-collapse: collapse;
	width: 100%;
	min-width: 460px;
	font-size: var(--wp--preset--font-size--small);
}

.bj-ledger caption {
	caption-side: top;
	text-align: left;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	background-color: var(--wp--preset--color--paper-alt);
	padding: 0.9em 1em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-ledger th,
.bj-ledger td {
	padding: 0.5em 0.7em;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-ledger thead th {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-muted);
	background-color: var(--wp--preset--color--paper-alt);
	white-space: nowrap;
}

.bj-ledger tbody tr:last-child th,
.bj-ledger tbody tr:last-child td {
	border-bottom: 0;
}

.bj-ledger .bj-led-name {
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

.bj-ledger .bj-led-name a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--teal-soft);
}

/* Same reason as the rail above: the cell's screen-reader label is absolutely
   positioned, and a cell that is not itself a containing block sends it outside
   the scrolling box. */
.bj-ledger .bj-led-y {
	position: relative;
	text-align: center;
	width: 2.6em;
	font-variant-numeric: tabular-nums;
}

.bj-ledger .bj-led-n {
	text-align: right;
	width: 2.4em;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-muted);
}

/* Shape, not colour: a title year is a star and an ordinary year is a dot, so
   the board still reads with the colour taken away or printed in grey. */
.bj-led-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal);
}

.bj-led-star {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1;
}

.bj-led-key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.7rem;
	color: var(--wp--preset--color--ink-muted);
	margin-block: 0 var(--wp--preset--spacing--50);
}

.bj-led-key span {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* -- the per-edition credit strip ------------------------------ */

.bj-strip {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
}

.bj-strip-head {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bj-strip-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Same reservation as .bj-sponsor above, at this strip's own logo height. */
.bj-strip-item {
	display: inline-flex;
	align-items: center;
	min-height: calc(32px * var(--bj-logo-scale, 1));
	text-decoration: none;
}

.bj-strip-item img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(32px * var(--bj-logo-scale, 1));
	max-width: calc(116px * var(--bj-logo-scale, 1));
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

a.bj-strip-item:hover img,
a.bj-strip-item:focus-visible img {
	opacity: 1;
}

.bj-strip-name {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-muted);
}

a.bj-strip-item:hover .bj-strip-name,
a.bj-strip-item:focus-visible .bj-strip-name {
	color: var(--wp--preset--color--teal);
}

.bj-strip-more {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: var(--wp--preset--spacing--40);
}

@media (prefers-reduced-motion: reduce) {

	.bj-strip-item img {
		transition: none;
	}
}

/* A credit line in the flow of the copy, not a logo. What a partner mostly
   wants is to be named correctly where the work shows, which costs the page
   one quiet sentence. */
.bj-credit {
	color: var(--wp--preset--color--ink-muted);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}


/*--------------------------------------------------------------
# Race Rules, Unsupported, The Risk
#
# The three pages that carry the binding parts of the race. Not
# one word of them was changed - inc/serious-pages.php rebuilds
# the structure on the way to the screen and the prose stays in
# the editor exactly as the crew left it.
#
# Rules were ten bold-italic quotations with the number arriving
# after the sentence and no way to link to any of them.
--------------------------------------------------------------*/

/* -- the rail -------------------------------------------------- */

/* Ten numbers. It costs the page no copy, which matters on a page whose
   words are frozen, and it needs no translating. */
.bj-rules-rail {
	position: sticky;
	/* Logged in, WordPress fixes its admin bar over the top 32px (46px on a
	   phone) and publishes the height as this variable. Sticking at 0 puts the
	   numbers behind it - which is what "the buttons disappear" was. The
	   fallback is what every logged-out reader gets. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 2;
	background-color: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--30);
}

.bj-rules-rail ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The number sits in a box that scrolls sideways on a phone. Its screen-reader
   label is absolutely positioned, so without a containing block here it is laid
   out against the sticky rail instead - outside the scroller, past the right
   edge of the screen, taking the whole page sideways with it. Relative keeps it
   inside the link, where the scroller can clip it. */
.bj-rules-rail a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--rule);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bj-rules-rail a:hover,
.bj-rules-rail a:focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.bj-rules-rail a.is-here {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
}

/* On a phone the ten numbers wrap to two rows and a sticky block eats an
   eighth of the screen for the whole page. One row that scrolls sideways
   instead, with targets big enough for a thumb. */
@media (max-width: 639px) {

	.bj-rules-rail ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.bj-rules-rail ul::-webkit-scrollbar {
		display: none;
	}

	.bj-rules-rail li {
		scroll-snap-align: start;
	}

	.bj-rules-rail a {
		width: 42px;
		height: 42px;
		flex: 0 0 auto;
	}
}

/* -- one rule -------------------------------------------------- */

/* The rail is sticky at the top, so a jump that puts a rule at y=0 puts its
   number underneath the rail. This is what a fragment arriving from outside -
   a shared link, a bookmark - lands on; the rail's own clicks compute the same
   clearance from the rail's real height. */
.bj-rule {
	scroll-margin-top: 4.5rem;
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: 0 var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.bj-rule:first-of-type {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.bj-rule:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* The number is a self-link, which is how a reader gets the URL for one rule
   without hunting for it. */
/* The heading is a wrapper, not a look: it takes the grid cell the anchor used
   to take and hands every typographic decision back to .bj-rule-n. */
.bj-rule-h {
	display: flex;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

.bj-rule-n {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.bj-rule-n:hover,
.bj-rule-n:focus-visible {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Upright, at reading size. Ten normative sentences in bold italic slowed
   every reader down and cost dyslexic readers the most. */
.bj-rule-t {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: clamp(1.05rem, 2.2vw, 1.22rem);
	font-weight: 500;
	font-style: normal;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	margin-block: 0;
}

.bj-rule-d {
	margin-block: var(--wp--preset--spacing--40) 0;
	padding-left: 1.15em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
}

.bj-rule-d li {
	margin-block: 0 0.45em;
}

.bj-rule-d li:last-child {
	margin-bottom: 0;
}

/* A list of one is a closing note, not a list. This is what keeps the four
   "no further explanation needed" rules reading as finished. */
.bj-rule-d.is-note {
	list-style: none;
	padding-left: 0;
	font-size: var(--wp--preset--font-size--x-small);
}

/* The rail focuses the rule so a keyboard reader lands inside it. A section is
   not a control, though, and drawing a ring around a whole rule reads as a
   selection box - which is what it looked like. */
.bj-rule:focus,
.bj-rule:focus-visible {
	outline: none;
}

/* Where you landed. :target covers a link followed from outside; .is-landed is
   the rail's own clicks, which record the position with replaceState and so
   never update :target. Same treatment either way, and visible to everyone
   rather than only to whoever holds focus. */
.bj-rule:target,
.bj-rule.is-landed {
	background-color: var(--wp--preset--color--paper-hi);
	box-shadow: -12px 0 0 var(--wp--preset--color--paper-hi), 12px 0 0 var(--wp--preset--color--paper-hi);
}

@media (min-width: 640px) {

	.bj-rule {
		grid-template-columns: 4rem 1fr;
	}
}

@media (max-width: 479px) {

	.bj-rule {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bj-rule-n {
		display: inline-block;
		margin-bottom: 0.35em;
	}
}

/* -- the two-question test ------------------------------------- */

.bj-test {
	margin-block: var(--wp--preset--spacing--60);
}

.bj-test-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bj-test-card {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	padding: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--40);
}

.bj-test-card:last-child {
	margin-bottom: 0;
}

.bj-test-q {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	margin-block: 0;
}

/* The verdict, set apart from the question rather than trailing it. */
.bj-test-a {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-muted);
	border-left: 2px solid var(--wp--preset--color--teal-soft);
	padding-left: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40) 0;
}

/* -- The Risk -------------------------------------------------- */

.bj-risk {
	margin-block: var(--wp--preset--spacing--50);
}

/* Four passages that are not equal. The page moves from what the road exposes
   you to, to what the race does not provide; weight and position carry that,
   because the labels that would say it out loud are not words on this page. */
.bj-risk-step {
	border-left: 2px solid var(--wp--preset--color--rule);
	padding-left: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.bj-risk-step > :last-child {
	margin-bottom: 0;
}

.bj-risk-step:nth-of-type(3) {
	border-left-color: var(--wp--preset--color--teal-soft);
}

/* The last thing on the page, with nothing after it. */
.bj-risk-step.is-final {
	border-left: 3px solid var(--wp--preset--color--red);
	background-color: var(--wp--preset--color--paper-hi);
	padding: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}

/* :not() keeps this off the label, which is a <p> too and was being set at the
   statement's size - a signpost the same size as the thing it signposts. */
.bj-risk-step.is-final p:not(.bj-risk-k) {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}

@media (prefers-reduced-motion: reduce) {

	.bj-rules-rail a {
		transition: none;
	}
}

/* The four signposts. Small, quiet, and above their passage rather than
   competing with it - a label on this page is a finding aid, not a headline. */
.bj-risk-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.bj-risk-step.is-final .bj-risk-k {
	color: var(--wp--preset--color--red);
}

/* -- see also -------------------------------------------------- */

/* Rule 2 and Rule 9 are the Unsupported page in miniature; Rule 10 and the
   last line of The Risk say the same thing twice. Three URLs, one body of
   law, and until now no way to get between them. */
.bj-seealso {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
}

.bj-seealso-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.bj-seealso ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bj-seealso a {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--teal);
	text-underline-offset: 3px;
}

.bj-seealso a:hover,
.bj-seealso a:focus-visible {
	color: var(--wp--preset--color--ink);
}

/*--------------------------------------------------------------
# The Race pages
#
# Race Course, Course Detail, Category and Gear - the four pages
# read while deciding, and again while packing. Between them a
# timetable, a kit list, a decision and a map, all of which
# arrived as bullet points.
--------------------------------------------------------------*/

/* -- checkpoints ----------------------------------------------- */

/* Distance is the spine and the cut-offs share a column, because reading the
   gaps between them is the only reason to open this page. */
.bj-cp {
	margin-block: var(--wp--preset--spacing--50);
	border-top: 2px solid var(--wp--preset--color--ink);
}

.bj-cp-row {
	display: grid;
	grid-template-columns: 6.5rem 1fr auto;
	gap: 2px var(--wp--preset--spacing--40);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* The label the stops used to repeat, said once, over the column it names. */
.bj-cp-head {
	padding-block: 0 0.4em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-cp-head .bj-cp-when {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	max-width: none;
}

.bj-cp-km {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--teal);
	white-space: nowrap;
}

.bj-cp-name {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

/* "Saturday, 22 August 2026, 17.30 WIB (UTC+7)" is a long string, and nowrap
   made it a single 348px word that pushed the row out of the column. It wraps
   inside its own cell instead, and the cell is capped so it cannot crowd out
   the checkpoint it belongs to. */
.bj-cp-when {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	text-align: right;
	/* Wide enough that a weekday-date-time-zone string breaks in two rather
	   than four. Capped all the same, so it cannot crowd out the checkpoint. */
	max-width: 26ch;
	justify-self: end;
}

/* A stop with no cut-off is not a missing value; it is a stop you cannot be
   late for, and it should not read as an omission. */
.bj-cp-when.is-open {
	color: var(--wp--preset--color--ink-muted);
}

.bj-cp-place,
.bj-cp-note {
	grid-column: 2 / -1;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}

.bj-cp-note {
	font-size: var(--wp--preset--font-size--x-small);
}

/* On a phone the three columns become one stack. Sharing a line with the name
   left the time about eighty pixels to render a date in, which is how it ended
   up wider than the page. */
@media (max-width: 599px) {

	.bj-cp-row {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.bj-cp-km,
	.bj-cp-name,
	.bj-cp-when,
	.bj-cp-place,
	.bj-cp-note {
		grid-column: 1;
	}

	.bj-cp-when {
		text-align: left;
		max-width: none;
		justify-self: start;
	}
}

/* -- category -------------------------------------------------- */

.bj-cats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
}

@media (min-width: 520px) {

	.bj-cats {
		grid-template-columns: 1fr 1fr;
	}
}

.bj-cat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
}

.bj-cat-lead {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.bj-cat-name {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

/* -- bicycles: three states ------------------------------------ */

/* The rule has three answers, and they differed only by the first four words
   of each sentence. Shape and edge carry it now, and the label stays, so the
   meaning never rests on colour alone. */
.bj-bikes {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

.bj-bike {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--paper);
	border-left: 3px solid var(--wp--preset--color--rule);
}

@media (min-width: 640px) {

	.bj-bike {
		grid-template-columns: 11rem 1fr;
		align-items: baseline;
	}
}

.bj-bike.is-yes { border-left-color: var(--wp--preset--color--teal); }
.bj-bike.is-maybe { border-left-color: var(--wp--preset--color--coral); }
.bj-bike.is-no { border-left-color: var(--wp--preset--color--red); }

.bj-bike-k {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
}

.bj-bike-v {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* -- the kit list ---------------------------------------------- */

.bj-kit {
	list-style: none;
	margin-block: var(--wp--preset--spacing--40) 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--wp--preset--spacing--50);
}

@media (min-width: 640px) {

	.bj-kit {
		grid-template-columns: 1fr 1fr;
	}
}

.bj-kit-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.55em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-kit-box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	/* Small, and it is the only control on the page - so it gets a real hit
	   area through the label rather than by being made enormous. */
	accent-color: var(--wp--preset--color--teal);
	position: relative;
	top: 0.28em;
}

.bj-kit-item label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	/* The label is the target; the box is just what it looks like. */
	flex: 1 1 auto;
	padding-block: 0.1em;
}

.bj-kit-box:checked + label {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--teal-soft);
}

.bj-kit-count {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-muted);
	margin-block: var(--wp--preset--spacing--40) 0;
}

.bj-kit-count.is-done {
	color: var(--wp--preset--color--teal);
}

.bj-kit-reset {
	font-family: inherit;
	font-size: inherit;
	color: var(--wp--preset--color--ink-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule-2, var(--wp--preset--color--rule));
	padding: 0 0 1px;
	cursor: pointer;
}

.bj-kit-reset:hover,
.bj-kit-reset:focus-visible {
	color: var(--wp--preset--color--teal);
	border-bottom-color: var(--wp--preset--color--teal);
}

/* The sentence that costs a rider their race, no longer the last of three
   quiet paragraphs. */
.bj-gear-warn {
	border-left: 3px solid var(--wp--preset--color--red);
	background-color: var(--wp--preset--color--paper-hi);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

/*--------------------------------------------------------------
# The Enter pages
#
# The funnel from curious to entered. The longest of them had
# six headings that were bold paragraphs, so it had no outline
# at all; the rest held timetables, outcomes and a self
# assessment inside undifferentiated prose.
--------------------------------------------------------------*/

/* -- process: numbered steps ----------------------------------- */

/* The three step headings, told apart from the two section headings around
   them. No numeral: the copy already says "Step 2", and putting a 2 in the
   margin next to it just says 2 twice. */
.bj-step {
	border-bottom-color: var(--wp--preset--color--teal) !important;
}

/* -- process: the lottery quota -------------------------------- */

/* Half these lines carry a "label: value" seam and half are sentences, so the
   ones that have a seam get a column and the rest run full width. A table
   would have meant writing labels for the lines that do not have any. */
.bj-quota {
	margin-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.bj-quota-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px var(--wp--preset--spacing--40);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
}

.bj-quota-k {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.bj-quota-v {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-muted);
	text-align: right;
	max-width: 30ch;
}

.bj-quota-row-full {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--ink-muted);
}

@media (max-width: 599px) {

	.bj-quota-row {
		grid-template-columns: 1fr;
	}

	.bj-quota-v {
		text-align: left;
		max-width: none;
	}
}

/* -- deadlines: the timeline ----------------------------------- */

.bj-tl {
	margin-block: var(--wp--preset--spacing--50);
	border-top: 2px solid var(--wp--preset--color--ink);
}

.bj-tl-row {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 2px var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-tl-when {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--teal);
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}

.bj-tl-what {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.bj-tl-note {
	grid-column: 2;
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-muted);
	margin-block: 0.3em 0 !important;
}

/* A stage whose last day has gone. Struck as well as faded, so it does not
   rest on colour, and never guessed: the page marks nothing unless every
   stage's date could be read. */
.bj-tl-row.is-past .bj-tl-when,
.bj-tl-row.is-past .bj-tl-what {
	color: var(--wp--preset--color--ink-muted);
}

.bj-tl-row.is-past .bj-tl-what {
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--rule-2, var(--wp--preset--color--rule));
}

.bj-tl-row.is-next {
	background-color: var(--wp--preset--color--paper-hi);
	box-shadow: -12px 0 0 var(--wp--preset--color--paper-hi), 12px 0 0 var(--wp--preset--color--paper-hi);
}

@media (max-width: 599px) {

	.bj-tl-row {
		grid-template-columns: 1fr;
	}

	.bj-tl-note {
		grid-column: 1;
	}
}

/* -- who can join: the three scenarios ------------------------- */

.bj-scenarios {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--60);
}

.bj-scenario {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--teal-soft);
	padding: var(--wp--preset--spacing--50);
}

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

/* -- finisher eligibility: three outcomes ---------------------- */

/* Each card names its own outcome in bold already, so the edge only has to
   say which of the three this is. */
.bj-outcomes {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

.bj-outcome {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--paper);
	border-left: 3px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.bj-outcome.is-out { border-left-color: var(--wp--preset--color--red); }
.bj-outcome.is-in { border-left-color: var(--wp--preset--color--teal); }
.bj-outcome.is-half { border-left-color: var(--wp--preset--color--coral); }

.bj-cats-3 {
	grid-template-columns: 1fr;
}

@media (min-width: 520px) {

	.bj-cats-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bj-cats-3 .bj-cat-name {
	font-size: var(--wp--preset--font-size--large);
}

/* -- dates, fee: facts inside sentences ------------------------ */

/* Nothing is moved or relabelled - assembling a schedule out of somebody
   else's sentences would be new copy - but what the writer already marked as
   important is set so it can be found without reading the paragraph. */
.bj-facts p strong,
.bj-fee p strong {
	font-family: var(--wp--preset--font-family--zilla-slab);
	font-size: 1.08em;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.bj-facts p {
	padding-left: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--wp--preset--color--rule);
	margin-bottom: var(--wp--preset--spacing--40);
}

.bj-fee ul,
.bj-submit p {
	font-size: var(--wp--preset--font-size--small);
}

.bj-fee li {
	padding-block: 0.3em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-fee li:last-child {
	border-bottom: 0;
}

/*--------------------------------------------------------------
# Print
#
# Someone reading the rules the week before the race may
# reasonably want them on paper. Without this they get the
# navigation, the footer, and a sticky rail across the page.
--------------------------------------------------------------*/

@media print {

	.bj-nav,
	.bj-rules-rail,
	.bj-seealso,
	.bj-footer,
	.bj-foot-nav,
	.bj-strip,
	.bj-sponsors {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.bj-rule {
		break-inside: avoid;
		page-break-inside: avoid;
		border-top: 1px solid #999;
	}

	.bj-rule-n,
	.bj-test-k {
		color: #000;
	}

	.bj-rule-d,
	.bj-test-a {
		color: #333;
	}

	.bj-test-card,
	.bj-risk-step,
	.bj-cp-row,
	.bj-tl-row,
	.bj-outcome,
	.bj-scenario,
	.bj-quota-row,
	.bj-kit-item,
	.bj-bike,
	.bj-cat {
		break-inside: avoid;
		page-break-inside: avoid;
		background: transparent;
	}

	/* A kit list and a timetable are the two things on this site somebody
	   actually prints. The boxes print empty, to be ticked with a pen. */
	.bj-kit-count,
	.bj-kit-reset {
		display: none !important;
	}

	.bj-kit-box {
		-webkit-appearance: none;
		appearance: none;
		border: 1px solid #000;
	}

	.bj-kit-box:checked + label {
		color: #000;
		text-decoration: none;
	}

	.bj-gear-warn {
		border-left: 3px solid #000;
		background: transparent;
	}

	.bj-risk-step.is-final {
		border-left: 3px solid #000;
		background: transparent;
	}

	/* A printed rule should carry its own URL, so a page torn out of a folder
	   still says where it came from. */
	.bj-rule-n::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		font-weight: 400;
	}
}

/* == Live Tracking ============================================== */

/* Three sentences the rider owes while the race is on. They were bullets,
   which made the one that ends a race look like the one about switching a
   device on. Numbered, because they are obligations and the reader is being
   counted against them; and the grave one is marked in red on its edge rather
   than in red type, so the warning survives a reader who cannot see the
   colour and never asks red text to carry a sentence at 4.9:1. */
.bj-duties {
	list-style: none;
	counter-reset: bj-duty;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
	padding-left: 0;
}

.bj-duty {
	counter-increment: bj-duty;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--teal);
}

.bj-duty::before {
	content: counter(bj-duty, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--wp--preset--color--teal);
}

.bj-duty.is-grave {
	background-color: var(--wp--preset--color--paper-hi);
	border-left-color: var(--wp--preset--color--red);
}

.bj-duty.is-grave::before {
	color: var(--wp--preset--color--red);
}

.bj-duty-t {
	margin: 0;
}

/* What happens to the tracker afterwards. Three sentences that were adrift
   below a horizontal rule; they are one subject and are kept together. */
.bj-return {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.bj-return > p {
	margin: 0;
}

/* The only figure on the page, and the only one that costs the reader money.
   It was the tail of a sentence in the middle of a paragraph. */
.bj-cost {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--red);
}

@media (min-width: 620px) {

	.bj-cost {
		grid-template-columns: auto 1fr;
		align-items: baseline;
		gap: var(--wp--preset--spacing--40);
	}
}

.bj-cost-fig {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

.bj-cost-t {
	margin: 0;
}

/* == The start list ============================================= */

/* The field, counted rather than claimed. The old page asserted its own size
   in a sentence typed by hand next to a table that disagreed with it; every
   figure here is derived from the same data the rows are, so the two cannot
   drift apart again. */
.bj-field {
	margin-block: var(--wp--preset--spacing--50);
}

.bj-field-split {
	display: flex;
	height: 2.6rem;
	border: 1px solid var(--wp--preset--color--rule);
}

.bj-fs {
	display: flex;
	align-items: center;
	padding: 0 0.7rem;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.bj-fs-solo {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--teal);
}

.bj-fs-pair {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--teal-soft);
}

.bj-field-figs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 1px;
	margin: 1px 0 0;
	padding: 0;
	list-style: none;
	background-color: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
}

.bj-field-figs li {
	padding: 0.7rem 0.85rem;
	background-color: var(--wp--preset--color--paper);
}

.bj-field-figs b {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.bj-field-figs span {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* -- finding a name ------------------------------------------- */

.bj-sl-ctrls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.6rem;
}

.bj-sl-q {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.5rem 0.7rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
}

.bj-sl-q:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 1px;
}

.bj-sl-pills {
	display: flex;
	gap: 0.35rem;
}

.bj-sl-pill {
	padding: 0.45rem 0.8rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
}

.bj-sl-pill[aria-pressed="true"] {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
}

.bj-sl-pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.bj-sl-count {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.7rem;
	color: var(--wp--preset--color--ink-muted);
}

/* -- the riders ------------------------------------------------ */

/* No overflow here, deliberately. overflow-x: auto computes overflow-y to
   auto as well, which makes this a scroll container - and a sticky header
   inside a scroll container sticks to that box rather than to the window, so
   it scrolled away with the table and, with an admin bar pushing its offset
   down, sat on top of the first row. The table is kept narrow enough not to
   need scrolling instead: cards below 900px, six columns above it. */
.bj-sl-scroll {
	border: 1px solid var(--wp--preset--color--rule);
}

/* Search and filters follow the reader down the page. Above the header, which
   stacks under it - the header's offset is this bar's measured height, because
   the bar wraps to two rows on a narrow window. */
.bj-sl-bar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 3;
	/* Padding, not margin: a margin here is a gap the rows show through as
	   they pass under the bar. */
	padding: 0.6rem 0 0.35rem;
	background-color: var(--wp--preset--color--bone);
}

/* Fixed layout, so the header row alone decides the columns. Under auto
   layout the team heads - one cell spanning all six - spread their width
   across every column they span, which pushed the cap column to 182px for a
   three-digit number and squeezed the names. It is also markedly cheaper to
   lay out two hundred rows this way.

   The names take whatever the other five columns leave, which is 249px in a
   820px container and 226px at the narrowest the container ever gets before
   the card layout takes over at 900px. The longest single word in the field -
   Pandunugrahadi, 98px - fits either twice over, so no name has to break
   inside a word. There is deliberately no min-width: it would need a scrolling
   wrapper to be worth anything, and a scrolling wrapper costs the sticky
   header. */
.bj-sl {
	width: 100%;
	font-size: 0.9rem;
	table-layout: fixed;
	border-collapse: collapse;
}

/* The header used to scroll away by row twenty, leaving a reader at row 120
   with five unlabelled columns. It stays, below the admin bar when there is
   one - the same offset the rules rail needed. */
.bj-sl thead th {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bj-bar-h, 4.6rem));
	z-index: 2;
	padding: 0.55rem 0.75rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--ink-muted);
	background-color: var(--wp--preset--color--paper-hi);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-sl td {
	padding: 0.5rem 0.75rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bj-sl-solos tr:nth-child(even) td {
	background-color: var(--wp--preset--color--paper-alt);
}

/* Every fixed width here is content-box, so each column costs its width plus
   the 1.5rem of cell padding. They were measured against the widest thing each
   one actually holds - a three-digit cap, "Brunei Darussalam", "Perempuan",
   the Non-competitive chip, the Instagram chip - and trimmed to that, because
   every rem they do not need is a rem the names get. */
.bj-sl-cap {
	width: 2.5rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* break-word, not anywhere: anywhere lets the browser break inside a word
   whenever it helps the line fit, which is how a rider ended up as
   "Sosrosoegon / do". This breaks a word only when the word alone cannot fit
   the column, and the min-width above means none of them has to. */
.bj-sl-name {
	font-weight: 500;
	overflow-wrap: break-word;
	word-break: normal;
}

.bj-sl-nat {
	width: 7rem;
}

.bj-sl-gen {
	width: 5.5rem;
}

.bj-sl-res {
	width: 8rem;
}

.bj-sl-lnk {
	width: 5rem;
}

/* A pair is one unit. It was 26 teams encoded as a repeated number in the
   last column; here the team is a block with its own head, and the result
   sits on the head because the team is what finished. */
.bj-sl-team {
	border-left: 3px solid var(--wp--preset--color--teal);
}

/* The cell stays a table cell. Laying it out with flex directly took it out
   of the table model, which made the browser ignore colspan and shrink the
   whole team head into the width of the cap column - the row that names a
   pair was four words wide with an empty table beside it. The flex box is an
   element inside the cell now. */
.bj-sl-teamhead td {
	padding: 0.5rem 0.75rem;
	background-color: var(--wp--preset--color--paper-hi);
}

.bj-team-h {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	align-items: center;
}

.bj-team-n {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}

/* -- links, named ---------------------------------------------- */

.bj-lnks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.bj-lnk {
	padding: 0.16rem 0.42rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--teal);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
}

.bj-lnk:hover,
.bj-lnk:focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
}

.bj-lnk:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

/* -- results --------------------------------------------------- */

.bj-res {
	display: inline-block;
	padding: 0.12rem 0.4rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.66rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.bj-res.is-classified {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--teal);
}

.bj-res.is-scratched,
.bj-res.is-dns,
.bj-res.is-dsq,
.bj-res.is-noncomp {
	color: var(--wp--preset--color--ink-muted);
	background-color: var(--wp--preset--color--paper-hi);
	border: 1px solid var(--wp--preset--color--rule);
}

/* The chip is one value in one cell. Kept in its own wrapper so the card
   layout on a phone sees a single grid item and does not stretch the chip to
   the full width of the card. */
.bj-res-w {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-self: start;
}

/* The whole chip is the way to the board that explains it. Nothing marks it
   at rest - two hundred underlined outcomes would be a page of underlines,
   and the chip already reads as something you can press - and the underline
   arrives on hover and focus, where the reader is already looking. */
.bj-res-l {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

.bj-res-l:hover .bj-res,
.bj-res-l:focus-visible .bj-res {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.bj-res-l:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.bj-res-none {
	color: var(--wp--preset--color--ink-muted);
}

/* -- on a phone the table becomes a stack of cards ------------- */

@media (max-width: 900px) {

	.bj-sl-scroll {
		overflow-x: visible;
		border: 0;
	}

	.bj-sl,
	.bj-sl tbody,
	.bj-sl tr,
	.bj-sl td {
		display: block;
		width: auto;
	}

	.bj-sl thead {
		display: none;
	}

	.bj-sl-solos tr,
	.bj-sl-team {
		margin-bottom: 0.5rem;
		border: 1px solid var(--wp--preset--color--rule);
	}

	.bj-sl-team {
		border-left-width: 3px;
	}

	.bj-sl-team .bj-sl-row + .bj-sl-row {
		border-top: 1px solid var(--wp--preset--color--rule);
	}

	.bj-sl td {
		display: grid;
		grid-template-columns: 5.5rem 1fr;
		gap: 0.75rem;
		align-items: baseline;
		padding: 0.35rem 0.7rem;
		border-bottom: 0;
	}

	.bj-sl-solos tr:nth-child(even) td {
		background-color: transparent;
	}

	.bj-sl td.is-empty {
		display: none;
	}

	.bj-sl {
		table-layout: auto;
	}

	.bj-sl td::before {
		content: attr(data-k);
		font-family: var(--wp--preset--font-family--ibm-plex-mono);
		font-size: 0.58rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink-muted);
	}

	.bj-sl-teamhead td::before {
		content: none;
	}

	.bj-sl-teamhead td {
		display: block;
	}

	.bj-res-w {
		gap: 0 0.5rem;
	}

	.bj-sl-solos tr:first-child {
		margin-top: 0;
	}
}

/* The card layout below sets display on tr and td, and an author rule beats
   the user agent's [hidden] { display: none } - so without this, filtering the
   list on a phone hid nothing at all. */
.bj-sl [hidden],
.bj-sl tbody[hidden],
.bj-sl tr[hidden] {
	display: none !important;
}

/*--------------------------------------------------------------
# Race results
--------------------------------------------------------------*/

/* The results pages wear the published boards' own stylesheet, scoped, from
   assets/css/results-board.css - so almost nothing about them is described
   here. This is only the frame the board sits in: the wrapper paints its own
   ground, and this stops the page showing through above and below it. */

.bj-rr-main {
	background-color: var(--wp--preset--color--bone);
}