/*
 * LVRL block styles.
 *
 * Tokens only. Every colour, length and radius resolves to a theme.json preset or custom
 * property — the sole exception is the club colour, which arrives as an inline custom
 * property because seventeen clubs each with their own brand colour is data, not design.
 *
 * Layout is the fluid grid. Components size themselves with container queries so the same
 * card is correct in a full-width band and in a narrow rail.
 */

/* -------------------------------------------------------------------------
 * Shared
 * ---------------------------------------------------------------------- */

.lvrl-section__title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: var(--wp--custom--leading--snug);
	color: var(--wp--preset--color--grey-100);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.lvrl-empty {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grey-550);
	background: var(--wp--preset--color--grey-800);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--60);
	margin: 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Card
 *
 * The shell every panel in the content zone is built on. Elevation on a light ground is
 * carried by surface and border rather than shadow, per the design system: white on the
 * near-white ground, with a subtle rule around it.
 *
 * It fills the height of the grid cell it is given, so cards sitting side by side on the
 * fluid grid finish on the same line without any of them being told a height.
 * ---------------------------------------------------------------------- */

.lvrl-card {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	align-content: start;
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
	block-size: 100%;
	min-width: 0;
}

/*
 * The header is the padded band the row sits in, and it carries the full-width rule that
 * separates the header from the card's contents. The row inside it is inset from the card's
 * edges; the rule beneath is not. Two boundaries, so two elements.
 */
/*
 * The padded band the chip row sits in, and nothing more.
 *
 * It used to carry a full-width rule beneath it as well. With the chip row bordered on all four
 * sides that rule was the header's boundary drawn a second time, a few millimetres below the
 * first — and two lines saying the same thing read as a mistake rather than as emphasis.
 */
.lvrl-card__head {
	padding: var(--wp--preset--spacing--60);
	min-width: 0;
}

/*
 * One bordered row of three cells: the label, the space beside it, and whatever closes the
 * row. Declared as three tracks rather than pushed apart, so a card with nothing to close the
 * row leaves the trailing track empty instead of letting the label drift across the header.
 *
 * The dividers are borders on the cells themselves, the way the navigation bar draws its own,
 * so there is no element in the markup carrying no meaning. The rule is the one that draws
 * every other edge on the card — a card divided by its own edge colour reads as one object.
 */
.lvrl-card__chip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: stretch;
	border: var(--wp--custom--border--subtle);
	min-width: 0;
}

/*
 * The same filled chip carries the card's label and the competition on a hero slide. One rule
 * with two consumers rather than two rules that have to be kept in step. What differs between
 * them is the corners, and that is stated below rather than left to a modifier neither of them
 * would have carried.
 */
.lvrl-card__label,
.lvrl-hero__comp {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
	gap: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: var(--wp--custom--leading--snug);
	min-width: 0;
}

/*
 * The hero chip keeps its corners. It floats on a photograph with nothing to align to, and a
 * square block on an image reads as a crop rather than a label.
 */
.lvrl-hero__comp {
	border-radius: var(--wp--custom--radius--default);
}

/*
 * The card chip has none. It is a cell of a divided row and its edges are the row's edges —
 * rounding them would leave the fill short of the rule on three sides and draw the boundary
 * twice. The same reasoning the scoreboard's state block is built on.
 */
.lvrl-card__label {
	grid-column: 1;
	padding-inline: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--30);
	border-inline-end: var(--wp--custom--border--subtle);
}

.lvrl-card__label-text {
	white-space: nowrap;
	min-width: 0;
}

/* Sized against the text it sits beside, like the labels on the scoreboard card. */
.lvrl-card__icon {
	block-size: var(--wp--preset--spacing--40);
	inline-size: var(--wp--preset--spacing--40);
	aspect-ratio: 1;
}

/*
 * The cell that closes the row, and the mark leads the label in it the way the chip's does —
 * the row reads left to right as one object rather than as two cells built to different rules.
 */
.lvrl-card__action {
	grid-column: 3;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
	gap: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--30);
	border-inline-start: var(--wp--custom--border--subtle);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	white-space: nowrap;
	min-width: 0;
}

.lvrl-card__action:hover,
.lvrl-card__action:focus-visible {
	color: var(--wp--preset--color--grey-100);
	text-decoration: underline;
}

/* The region a card's contents sit in, so the header keeps its own padding at the top. */
.lvrl-card__body {
	padding: var(--wp--preset--spacing--60);
	min-width: 0;
}

/*
 * The competition and the time an article carries. Defined once and used by every component
 * that lists an article, so a headline in the Latest panel and one in the card row beneath it
 * cannot end up labelled differently.
 *
 * These three rules were deleted along with the dark-mode block they happened to sit beside,
 * and nothing errored — the eyebrow and the timestamp simply fell back to the page's body size
 * and body colour, which is why the timestamp arrived larger than the headline it closes.
 */
.lvrl-eyebrow {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--grey-550);
	min-width: 0;
}

/*
 * The timestamp takes the accent, and it is the one place the brand colour appears in an
 * article card.
 *
 * When the text hierarchy went to three grey steps the eyebrow and the timestamp both went with
 * it, and the accent left the cards entirely — recorded at the time as a side effect wanting a
 * deliberate decision rather than a choice anyone had made. This is that decision. The eyebrow
 * stays grey: two accent marks in one card would be the colour used for emphasis on the two
 * least emphatic things in it.
 *
 * It measures 5.66 on the card's white and passes AA for text at this size.
 */
.lvrl-time {
	font-size: var(--wp--preset--font-size--caption);
	font-style: italic;
	color: var(--wp--preset--color--accent);
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Joined unit — the hero and the Latest panel as one card
 *
 * Layout ladder:
 *   Element   mobile   tablet and up
 *   Card      12       12
 *   Hero      12       8
 *   Latest    12       4
 *
 * This is a nested fluid grid like every other region, taking the grid's flush variant. The
 * panels are eight columns and four, declared as spans on the grid the same way every other
 * layout on the page declares them — the only thing particular to a joined unit is that its
 * gutter is zero, and that is the grid's variant to give rather than something a component
 * arranges for itself.
 *
 * The component contributes the surface and nothing else. Layout belongs to the grid; a card
 * that laid out its own panels would be solving a layout problem outside the layout system.
 * ---------------------------------------------------------------------- */

.lvrl-joined {
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

/*
 * The panels give up their own chrome. One surface, one border, one radius — anything a panel
 * kept for itself would draw a line where the join is supposed to be.
 */
.lvrl-joined .lvrl-card {
	background: none;
	border: 0;
	border-radius: 0;
	block-size: 100%;
}

/* -------------------------------------------------------------------------
 * Hero carousel
 *
 * Layout ladder:
 *   Element    mobile                tablet                desktop
 *   Card       12 columns            12 columns            6 columns
 *   Image      full bleed            full bleed            full bleed
 *   Overlay    bottom, padded        bottom, padded        bottom, padded
 *   Dots       bottom centre         bottom centre         bottom centre
 *
 * One cell holds every slide, so the card is as tall as its tallest slide and does not
 * change height as it advances. The image carries the aspect ratio, which is what gives the
 * card an intrinsic height without a single length being declared — the row it sits in then
 * stretches the Latest and Ladder cards beside it to match.
 * ---------------------------------------------------------------------- */

.lvrl-hero {
	position: relative;
	display: block;
	container-type: inline-size;
}

.lvrl-hero__viewport {
	display: grid;
	block-size: 100%;
	min-width: 0;
}

/*
 * Every slide occupies the same cell of the viewport grid. A slide that is not showing keeps
 * its box — it is only made invisible — so the card cannot resize under the reader as the
 * carousel advances.
 *
 * The slide is itself a single-cell grid, and the image and the overlay both sit in that cell.
 *
 * They used to be absolutely positioned, which meant neither of them contributed any height
 * and the slide was sized entirely by an aspect ratio declared on itself. On a wide card that
 * is harmless, because the ratio gives more height than the words need. On a phone the card is
 * the full width of the screen, so the ratio produced a box shorter than the headline and the
 * standfirst together — and with both out of flow there was nothing to push the box taller, so
 * overflow: hidden cut the words off. The image was not breaking the content; the content had
 * been given no way to ask for room.
 *
 * In one cell the row resolves to whichever is taller, the image at its ratio or the overlay at
 * its content. The ratio still governs everywhere it is the larger of the two, and the words
 * are never cropped anywhere it is not.
 */
.lvrl-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	block-size: 100%;
	min-width: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out),
		visibility var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out);
}

.lvrl-hero__slide.is-current {
	opacity: 1;
	visibility: visible;
}

/* The image carries the ratio, so it is what asks the row for a height rather than the slide
   declaring one the contents cannot argue with. */
.lvrl-hero__image {
	grid-area: stack;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--wp--preset--color--grey-800);
}

/*
 * The whole overlay is the link, so the target is the story rather than a phrase at the end
 * of it.
 *
 * It carries the scrim itself rather than the slide drawing one behind it. A scrim on the
 * slide has to be given a height, and any height chosen is right at one width and wrong at
 * another — a fixed share of a tall phone card leaves the last lines sitting on bare
 * photograph. Drawn on the overlay it is exactly as tall as the words it exists to make
 * readable, at every width, with nothing to keep in step.
 *
 * Colour comes from the charcoal token mixed with transparency rather than a hand-written
 * rgba, so the gradient is the same black as the rest of the site and moves with it. The top
 * padding is what gives the fade room to reach transparent above the first line.
 */
.lvrl-hero__link {
	grid-area: stack;
	align-self: end;
	position: relative;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--90);
	padding-block-end: var(--wp--preset--spacing--90);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	min-width: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--grey-000) 94%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--grey-000) 72%, transparent) 55%,
		transparent 100%
	);
}

.lvrl-hero__meta {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
	min-width: 0;
}

.lvrl-hero__date {
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--grey-700);
}

/*
 * Mobile-first, like every other tier in this project. The base is the phone — where the card
 * is the full width of the screen and a display-size headline would fill it and leave the
 * standfirst nowhere to go — and the larger size layers on from mobile up.
 */
.lvrl-hero__title {
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--white);
	margin: 0;
	max-inline-size: var(--wp--custom--measure--prose);
	min-width: 0;
}

.lvrl-hero__excerpt {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--grey-700);
	margin: 0;
	max-inline-size: var(--wp--custom--measure--prose);
	min-width: 0;
}

.lvrl-hero__cta {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	min-width: 0;
}

.lvrl-hero__cta-icon {
	block-size: var(--wp--preset--spacing--50);
	inline-size: var(--wp--preset--spacing--50);
	aspect-ratio: 1;
}

.lvrl-hero__link:hover .lvrl-hero__cta-text,
.lvrl-hero__link:focus-visible .lvrl-hero__cta-text {
	text-decoration: underline;
}

/*
 * Pagination.
 *
 * The mark is a dot but the control is the button around it, so the target is the full
 * 2.5rem square rather than the 0.75rem circle a reader can see. Drawing the dot as a pseudo
 * element is what separates the two.
 */
.lvrl-hero__dots {
	position: absolute;
	z-index: var(--wp--custom--z--raised);
	inset-inline: 0;
	inset-block-end: var(--wp--preset--spacing--20);
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.lvrl-hero__dot {
	display: grid;
	place-items: center;
	inline-size: var(--wp--preset--spacing--80);
	block-size: var(--wp--preset--spacing--80);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.lvrl-hero__dot::before {
	content: "";
	inline-size: var(--wp--preset--spacing--30);
	block-size: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

.lvrl-hero__dot:hover::before {
	background: var(--wp--preset--color--white);
}

.lvrl-hero__dot.is-current::before {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* An empty hero is a card with a message in it, not a hole where a card was. */
.lvrl-hero--empty {
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--60);
}

/* From mobile up there is room for the lead size and the air around it. */
@container (min-width: 480px) {
	.lvrl-hero__title {
		font-size: var(--wp--preset--font-size--section-title);
	}

	.lvrl-hero__link {
		padding: var(--wp--preset--spacing--60);
		padding-block-start: var(--wp--preset--spacing--100);
		padding-block-end: var(--wp--preset--spacing--100);
	}
}

/* -------------------------------------------------------------------------
 * Match card
 * ---------------------------------------------------------------------- */

.lvrl-match {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--default);
	text-decoration: none;
	color: inherit;
	min-width: 0;
	transition: border-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard);
}

.lvrl-match:hover {
	border-color: var(--wp--preset--color--grey-500);
}

.lvrl-match__status {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--grey-550);
}

.lvrl-match--live .lvrl-match__status {
	color: var(--wp--preset--color--accent);
}

.lvrl-match__venue {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--grey-550);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lvrl-side {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;

	/* The club's own colour, supplied per record. */
	border-left: 2px solid var(--club-colour, transparent);
	padding-left: var(--wp--preset--spacing--30);
}

.lvrl-side__crest {
	inline-size: var(--wp--preset--spacing--80);
	block-size: var(--wp--preset--spacing--80);
	object-fit: contain;
}

.lvrl-side__name {
	font-weight: 700;
	color: var(--wp--preset--color--grey-100);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lvrl-side__score {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--card-title);
	color: var(--wp--preset--color--grey-100);
}

.lvrl-side--bye .lvrl-side__name {
	color: var(--wp--preset--color--grey-550);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Scoreboard
 * ---------------------------------------------------------------------- */

.lvrl-scoreboard {
	container-type: inline-size;
	min-width: 0;
}

.lvrl-scoreboard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.lvrl-scoreboard__round {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--grey-100);
}

/*
 * One column, then two, then four. Intrinsic sizing rather than breakpoints, so the rail
 * fits however many cards the available width honestly allows.
 */
.lvrl-scoreboard__rail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

@container (min-width: 480px) {
	.lvrl-scoreboard__rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 1024px) {
	.lvrl-scoreboard__rail {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Ladder
 * ---------------------------------------------------------------------- */

.lvrl-ladder {
	container-type: inline-size;
	min-width: 0;
}

.lvrl-ladder__grid {
	display: grid;
	min-width: 0;
}

/*
 * Every row is a grid rather than a table row, so a long club name cannot force the
 * component wider than its column. A fraction has no minimum, which is what makes that
 * true.
 */
/*
 * The table is a nested fluid grid, and there is one track declaration for all of it.
 *
 * .akuma-grid supplies twelve fractional columns; every row takes all twelve and adopts them
 * with subgrid, so no row owns a track and no two rows can disagree about where a column sits.
 * The header standing over its own columns is a property of the construction rather than
 * something maintained — which is what it needed to be, having drifted twice.
 *
 * Flush, because the columns of a table are not regions of a page: a gutter between them would
 * put air where the dividers and the finals band need continuity. That is the grid's variant to
 * give, not a gap of the component's own choosing.
 *
 * No lengths anywhere. The tracks are fractions of whatever the card has been given, so the
 * table is correct in a three-column rail and across a landing page with no variant of it.
 */
.lvrl-ladder__grid {
	min-width: 0;
}

.lvrl-ladder__row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;

	/*
	 * Stretch, not centre. A cell that centres in its row is only as tall as its own text, so
	 * anything drawn on it — a divider on its edge, a background behind it — stops short of the
	 * row and reads as a mark floating in the middle of one. Every cell is the full height of
	 * the row and centres its own contents instead, which is the same construction the
	 * navigation bar's full-height dividers are built on.
	 *
	 * The block padding therefore belongs to the cells and not to the row. A row that padded
	 * itself would put that space outside the cells, where a divider and a background cannot
	 * reach it.
	 */
	align-items: stretch;
	font-size: var(--wp--preset--font-size--caption);
	border-bottom: var(--wp--custom--border--subtle);
	min-width: 0;
}

/*
 * Every cell centres what is in it, in both axes.
 *
 * The figures were right-aligned and the rank and club were left-aligned, so no two columns in
 * the table agreed on where their contents sat. A ladder is read down its columns, and a column
 * that is centred is one the eye can follow without finding its edge first.
 */
.lvrl-ladder__row > * {
	display: grid;
	place-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	min-width: 0;
}

/*
 * The layout ladder, and it is the whole of what decides which columns are drawn.
 *
 * Every tier sums to twelve exactly, so a column that is off gives its width back to the rest
 * rather than leaving an empty track where it used to be. The spans are cut against what the
 * cells actually hold — the difference carries four characters and takes two columns until
 * there is width enough for one, and the club gives width back as the figures arrive.
 *
 *   Column   base   mobile   tablet
 *   POS       2       1        1
 *   Club      6       5        4
 *   P         2       1        1
 *   W         —       1        1
 *   L         —       1        1
 *   D         —       —        1
 *   B         —       —        1
 *   PD        —       2        1
 *   PTS       2       1        1
 *   total    12      12       12
 *
 * Declared as custom properties on the column's own class rather than as utility classes: the
 * utilities exist because template markup cannot set a custom property, and a stylesheet can.
 * One declaration per column, read by the header cell and by every figure beneath it, which is
 * what makes them one column rather than two that have to be kept in step.
 */
.lvrl-ladder__col--pos    { --span: 2; --span-mobile: 1; }
.lvrl-ladder__col--club   { --span: 6; --span-mobile: 5; --span-tablet: 4; }
.lvrl-ladder__col--played { --span: 2; --span-mobile: 1; }
.lvrl-ladder__col--won    { --span-mobile: 1; }
.lvrl-ladder__col--lost   { --span-mobile: 1; }
.lvrl-ladder__col--drawn  { --span-tablet: 1; }
.lvrl-ladder__col--byes   { --span-tablet: 1; }
.lvrl-ladder__col--diff   { --span-mobile: 2; --span-tablet: 1; }
.lvrl-ladder__col--points { --span: 2; --span-mobile: 1; }

/*
 * Off at the narrowest, and each group returns at the width that can hold it. Written as child
 * selectors so they outrank the cell rule above whatever the order in this file — a bare class
 * ties with it at one class each and loses on source order, which is the fault that once handed
 * every hidden header cell its display back and stacked the row.
 */
.lvrl-ladder__row > .lvrl-ladder__col--won,
.lvrl-ladder__row > .lvrl-ladder__col--lost,
.lvrl-ladder__row > .lvrl-ladder__col--drawn,
.lvrl-ladder__row > .lvrl-ladder__col--byes,
.lvrl-ladder__row > .lvrl-ladder__col--diff {
	display: none;
}

/*
 * The documented breakpoints, not lengths chosen for this component. The grid document names
 * five and records them as the only hardcoded lengths permitted in the project.
 */
@container (min-width: 480px) {
	.lvrl-ladder__row > .lvrl-ladder__col--won,
	.lvrl-ladder__row > .lvrl-ladder__col--lost,
	.lvrl-ladder__row > .lvrl-ladder__col--diff {
		display: grid;
	}
}

@container (min-width: 768px) {
	.lvrl-ladder__row > .lvrl-ladder__col--drawn,
	.lvrl-ladder__row > .lvrl-ladder__col--byes {
		display: grid;
	}
}

.lvrl-ladder__row--head {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--grey-550);
	border-block: var(--wp--custom--border--subtle);
}

/*
 * The header is a divided row of cells, the treatment the card's own chip carries and the one
 * the navigation bar draws its dividers with — a border on the item rather than an element in
 * the markup holding a line.
 *
 * Every cell takes a leading rule and the last one closes the row, so the header has a divider
 * between each pair of columns and an edge at each end. The rules run the full height of the
 * row because the cells do.
 *
 * The header alone. The table below it has no vertical rules at all: a ladder is read across a
 * row and then down a column, and ruling every cell would draw a boundary around each figure
 * when the only boundary that means anything is between one column and the next.
 */
.lvrl-ladder__row--head > * {
	padding-block: var(--wp--preset--spacing--20);
	border-inline-start: var(--wp--custom--border--subtle);
}

.lvrl-ladder__row--head > *:last-child {
	border-inline-end: var(--wp--custom--border--subtle);
}

/*
 * The club is the one column that reads as a name rather than a figure, so it is the one column
 * that is not centred. A centred name moves its first letter every time the club changes, and a
 * list of seventeen of them is read down its leading edge.
 *
 * The header cell takes the same treatment, which is what the shared class is for — the label
 * and the names beneath it are one column and cannot be aligned separately.
 */
.lvrl-ladder__row > .lvrl-ladder__col--club {
	justify-content: start;
	text-align: start;
}

/*
 * The header's Club cell is inset by the width of the stripe the rows carry, so the label stands
 * over the crest rather than over the stripe. Written as the sum of the two tokens involved
 * rather than the single step that happens to equal it today, because it is a relationship
 * between two measurements and not a value of its own.
 */
.lvrl-ladder__row--head > .lvrl-ladder__col--club {
	padding-inline-start: calc(var(--wp--preset--spacing--10) + var(--wp--preset--spacing--20));
}

.lvrl-ladder__pos {
	color: var(--wp--preset--color--grey-550);
	font-size: var(--wp--preset--font-size--caption);
}

/*
 * The club is the one column that reads as a name rather than a figure, so it is the one column
 * that is not centred. A centred name moves its first letter every time the club changes, and a
 * list of seventeen of them is read down its leading edge.
 *
 * The header cell takes the same treatment, which is what the shared class is for — the label
 * and the names beneath it are one column and cannot be aligned separately.
 */
.lvrl-ladder__row > .lvrl-ladder__col--club {
	justify-content: start;
	text-align: start;
}

/*
 * The header's Club cell is inset by the width of the stripe the rows carry, so the label stands
 * over the crest rather than over the stripe. Written as the sum of the two tokens involved
 * rather than the single step that happens to equal it today, because it is a relationship
 * between two measurements and not a value of its own.
 */
.lvrl-ladder__row--head > .lvrl-ladder__col--club {
	padding-inline-start: calc(var(--wp--preset--spacing--10) + var(--wp--preset--spacing--20));
}

/*
 * The crest and the name, with the name given a track that can shrink. An auto track's minimum
 * is its content, and a name set to nowrap has no smaller content to fall back to — so it would
 * push the cell wider than its column rather than truncating inside it.
 */
.lvrl-ladder__club {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;

	/*
	 * The club's own colour, supplied per record, on the cell's leading edge.
	 *
	 * It is a spacing token rather than an optical inset now. At two pixels it was a hairline
	 * doing the work of an identifier — the design system allows 1px and 2px as optical insets
	 * only, and a stripe that carries a club's brand colour is not an optical inset. At a
	 * spacing step it is a band the eye can name a club by before it reads the name.
	 */
	border-left: var(--wp--preset--spacing--20) solid var(--club-colour, transparent);
}

.lvrl-ladder__club a {
	color: var(--wp--preset--color--grey-100);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lvrl-ladder__club a:hover {
	color: var(--wp--preset--color--accent);
}

.lvrl-ladder__crest {
	inline-size: var(--wp--preset--spacing--50);
	block-size: var(--wp--preset--spacing--50);
	object-fit: contain;
}

.lvrl-ladder__num {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--grey-400);
}

.lvrl-ladder__pts {
	font-weight: 700;
	color: var(--wp--preset--color--grey-100);
}

/*
 * As a card the ladder is inset from the card's edges, and the last row gives up its rule so
 * the table finishes on the card's own border rather than a line just above it.
 *
 * The table fills the card. It had been a stack of content-sized rows packed at the top, so a
 * card made taller by whatever sits beside it on the grid finished with a band of empty white
 * under the last club — the table looked like it had stopped rather than ended.
 *
 * The rows share whatever height the card has: each is at least its own contents and takes an
 * equal part of anything left over. No height is declared anywhere, so the card that is short
 * enough to need it expands its rows and the card that is not leaves them at their contents.
 * The row already centres what is in it, so the space arrives as room around each club rather
 * than as a gap at the bottom.
 */
.lvrl-ladder--card .lvrl-ladder__grid {
	margin-inline: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	grid-auto-rows: minmax(min-content, 1fr);
}

.lvrl-ladder--card .lvrl-ladder__row:last-child {
	border-block-end: 0;
}

.lvrl-ladder--card .lvrl-empty {
	margin: var(--wp--preset--spacing--40);
}

/*
 * The finals band.
 *
 * The rank cell alone, for every place inside the cut. A ladder is read down its first column
 * to find a club's position, so that column is where the answer to "are we in it" already
 * lives — tinting the whole row would say the same thing across seven columns that are not
 * being asked the question.
 *
 * grey-900 is the ground the page itself is drawn on, and it is the lightest step the ramp
 * carries. On the card's white it is the quietest mark available that is still a mark, which
 * is what a standing that changes every week should be: findable, and not competing with the
 * figures that produced it.
 *
 * The cells stretch to their rows, so eight of them stacked read as one band rather than as
 * eight tinted boxes. Where the band stops is the cut; nothing else draws it.
 */
.lvrl-ladder__row.is-finals .lvrl-ladder__pos {
	background: var(--wp--preset--color--grey-900);
}

/* -------------------------------------------------------------------------
 * Fixtures
 * ---------------------------------------------------------------------- */

.lvrl-fixtures {
	container-type: inline-size;
	min-width: 0;
}

.lvrl-fixtures__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Article teasers
 * ---------------------------------------------------------------------- */

.lvrl-articles {
	container-type: inline-size;
	min-width: 0;
}

.lvrl-articles__list {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	min-width: 0;
}

.lvrl-teaser {
	min-width: 0;
}

.lvrl-teaser__link {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.lvrl-teaser__image {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--default);
	background: var(--wp--preset--color--grey-800);
}

.lvrl-teaser__eyebrow {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--grey-550);
	margin-bottom: var(--wp--preset--spacing--10);
}

.lvrl-teaser__title {
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: var(--wp--custom--leading--snug);
	color: var(--wp--preset--color--grey-100);
	margin: 0;
}

.lvrl-teaser__link:hover .lvrl-teaser__title {
	color: var(--wp--preset--color--accent);
}

.lvrl-teaser__excerpt {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--grey-400);
	margin: 0;
	max-inline-size: var(--wp--custom--measure--prose);
}

/* The feature teaser is the page's largest element and leads with its image. */
.lvrl-teaser--feature .lvrl-teaser__title {
	font-size: var(--wp--preset--font-size--page-title);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: -0.018em;
}

/* Supporting teasers run as a list with a smaller image beside the title. */
@container (min-width: 480px) {
	.lvrl-articles:not(.lvrl-articles--feature) .lvrl-teaser__link {
		grid-template-columns: minmax(0, 1fr) 2fr;
		align-items: start;
	}
}

/* -------------------------------------------------------------------------
 * Article rows — the Latest panel
 *
 * Layout ladder:
 *   Element   mobile              tablet            desktop
 *   Card      12 columns          6 columns         3 columns
 *   Row       image then text     image then text   image then text
 *
 * The thumbnail is a fraction rather than a size, so it is a third of whatever the panel is
 * given and the row is correct in a three-column rail and in a full-width one with no variant
 * of it. Nothing here declares a width.
 * ---------------------------------------------------------------------- */

.lvrl-articles--rows {
	container-type: inline-size;
}

.lvrl-articles__rows {
	display: grid;
	align-content: start;
	min-width: 0;
}

/*
 * The rule belongs to the row rather than being drawn between rows, and the last one gives
 * it up — so the list ends on the card's own edge instead of a line floating above it.
 */
.lvrl-row {
	border-block-end: var(--wp--custom--border--subtle);
	min-width: 0;
}

.lvrl-row:last-child {
	border-block-end: 0;
}

.lvrl-row__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: start;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.lvrl-row__image {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--default);
	background: var(--wp--preset--color--grey-800);
}

.lvrl-row__body {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}

/*
 * Regular, not bold. Inter ships here as 400 and 700 only — there is no 600 in the theme, and
 * asking for one would either synthesise a weight or fall back to 400 anyway. A headline in a
 * card is already distinguished by its size and its position; setting it at the weight the
 * body runs at is what stops a panel of four of them reading as four separate shouts.
 *
 * A step below the card's own label. Both had been at small, so the panel's title and the four
 * headlines under it were the same size and the header stopped reading as a header. The card
 * says what it is once; the stories are what is inside it.
 */
.lvrl-row__title {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--grey-100);
	margin: 0;
	min-width: 0;
}

.lvrl-row__link:hover .lvrl-row__title,
.lvrl-row__link:focus-visible .lvrl-row__title {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Article cards
 *
 * Layout ladder:
 *   Element   mobile        tablet       desktop
 *   Card      12 columns    6 columns    4 columns
 *   Image     full bleed    full bleed   full bleed
 *
 * The image runs to the card's edges, so the card carries no padding of its own and the body
 * pads its own contents — the same construction the scoreboard match card uses.
 * ---------------------------------------------------------------------- */

.lvrl-acards {
	min-width: 0;
}

.lvrl-acard {
	grid-template-rows: minmax(0, 1fr);
}

.lvrl-acard__link {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	align-content: start;
	text-decoration: none;
	color: inherit;
	block-size: 100%;
	min-width: 0;
}

.lvrl-acard__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--wp--preset--color--grey-800);
}

.lvrl-acard__body {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60);
	min-width: 0;
}

/* Regular, for the same reason the Latest headlines are. */
.lvrl-acard__title {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--grey-100);
	margin: 0;
	min-width: 0;
}

/* The timestamp closes the card, set off from the headline rather than stacked against it. */
.lvrl-acard__body .lvrl-time {
	margin-block-start: var(--wp--preset--spacing--30);
}

.lvrl-acard__link:hover .lvrl-acard__title,
.lvrl-acard__link:focus-visible .lvrl-acard__title {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Top bar
 *
 * Layout ladder:
 *   Element   mobile                       tablet                  laptop and up
 *   Logo      start                        start                   track 1, auto
 *   Search    inside the opened panel      inside the panel        track 2, 1fr, centred
 *   Menu      stacked in the panel         stacked in the panel    track 3, auto
 *   Socials   inside the panel             inside the panel        track 4, auto
 *   Toggle    visible                      visible                 hidden
 *
 * Four zones from laptop up. Three take exactly the width their contents need; the search
 * track takes everything left over and centres the field inside it, so the air between the
 * zones is produced by the layout rather than declared as a gap. Nothing is positioned
 * against anything else, so no zone drifts when another one changes.
 *
 * Declared tracks, not leftover space. Dividers are drawn as inline borders on the items
 * themselves rather than as separate elements, so there is no markup carrying no meaning.
 * ---------------------------------------------------------------------- */

.lvrl-bar {
	background: var(--wp--preset--color--grey-000);

	/*
	 * The query container is the bar, not the nav. An element cannot respond to its own
	 * container query, so the nav's own layout has to be resolved from its parent.
	 */
	container-type: inline-size;

	/*
	 * No shadow. The design system carries elevation on surface and border rather than on a
	 * cast shadow, and this bar was the one place on the site that departed from it — the last
	 * shadow anywhere, left over from before that rule was settled. The scoreboard band already
	 * closes the bar with a hairline, so the boundary was being drawn twice: once as a line and
	 * once as a gradient beneath it.
	 */
	position: relative;
	z-index: var(--wp--custom--z--sticky);
}

.lvrl-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--60);
	border-block-end: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	min-width: 0;
}

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

/*
 * The two line-height: 1 declarations in the bar are not leading and take no token.
 *
 * A leading token is a reading rhythm — the space between lines of a paragraph. These are
 * single-line controls whose height is produced by their own padding, and a value of exactly 1
 * is what collapses the line box to the glyphs so the padding is the whole measurement. Giving
 * them the tightest leading token would change the height of every cell in the navigation bar
 * to serve a consistency that is only nominal. Recorded as an exception in the design system
 * rather than left as a stray value.
 */
.lvrl-nav__brand {
	display: block;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	line-height: 1;
	padding-block: var(--wp--preset--spacing--30);
	min-width: 0;
}

.lvrl-nav__logo {
	display: block;
	block-size: var(--wp--custom--brand--logo-height);
	inline-size: auto;
	object-fit: contain;
}

.lvrl-nav__wordmark {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--section-title);
	letter-spacing: -0.02em;
}

/* Search ----------------------------------------------------------------- */

/*
 * An inset field, not an outline.
 *
 * It carried no fill at all, so it sat on the bar's own charcoal and the only thing marking it
 * out was a hairline the same colour as every other hairline on the bar — a field that had to
 * be looked for rather than seen. A control that accepts typing is the one thing up here that
 * has to read as a surface rather than a boundary.
 *
 * grey-200 is the step the hairline itself is drawn in, so the fill is the boundary colour
 * rather than a new value: the field reads as the bar recessed, not as a panel laid on it. The
 * border stays because it is what lightens on focus.
 */
.lvrl-nav__search {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--grey-200);
	border: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	border-radius: var(--wp--custom--radius--pill);
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	min-width: 0;
}

.lvrl-nav__search-icon {
	inline-size: var(--wp--preset--spacing--50);
	block-size: var(--wp--preset--spacing--50);
	aspect-ratio: 1;
	color: var(--wp--preset--color--white);
	flex: none;
}

.lvrl-nav__search-input {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	min-width: 0;
	inline-size: 100%;
}

.lvrl-nav__search-input::placeholder {
	color: var(--wp--preset--color--grey-500);
	opacity: 1;
}

.lvrl-nav__search-input:focus {
	outline: none;
}

.lvrl-nav__search:focus-within {
	border-color: var(--wp--preset--color--grey-400);
}

/* Toggle ----------------------------------------------------------------- */

.lvrl-nav__toggle {
	justify-self: end;
	inline-size: var(--wp--preset--spacing--90);
	block-size: var(--wp--preset--spacing--90);
	display: grid;
	place-items: center;
	background: none;
	border: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	border-radius: var(--wp--custom--radius--default);
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

/* Sizing lives with the other marks, below, so the cascade resolves in the obvious order. */

/* Panel, menu and items --------------------------------------------------- */

.lvrl-nav__panel {
	grid-column: 1 / -1;
	display: none;
	min-width: 0;
}

.lvrl-nav.is-open .lvrl-nav__panel {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
}

.lvrl-nav__menu,
.lvrl-nav__social {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.lvrl-nav__link {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--nav);
	line-height: 1;
	min-width: 0;
	transition:
		background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
		color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

/*
 * The whole cell fills, not the text. The link is the only child of its item and takes the
 * item's full width and height, so its background paints the cell exactly — inside the
 * hairline, which is drawn on the item rather than the link. Nothing needs to know the cell's
 * size for this to line up.
 *
 * The mark stays white with the label because both take currentColor, so a filled cell reads
 * as one object rather than a label on a red ground with an icon left behind it.
 *
 * The current page fills too. It is the same statement as hover — this cell is the one in
 * play — and red text was the treatment being replaced, so leaving it on the current item
 * would keep the thing that was wrong.
 */
.lvrl-nav__link:hover,
.lvrl-nav__link:focus-visible,
.lvrl-nav__link.is-current {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.lvrl-nav__label {
	min-width: 0;
	white-space: nowrap;
}

/*
 * Width follows each mark's own ratio; height is what is declared.
 *
 * The two kinds are no longer matched on it. A badge is a dense, filled shape and an interface
 * mark is an open line drawing, so the same height does not read as the same size — the line
 * marks sat visibly larger than the badges beside them. They come down a step, which is the
 * optical correction the shared height had been preventing rather than providing.
 */
.lvrl-nav__badge,
.lvrl-nav__icon {
	inline-size: auto;
	object-fit: contain;
	flex: none;
}

.lvrl-nav__badge {
	block-size: var(--wp--preset--spacing--70);
}

.lvrl-nav__icon {
	block-size: var(--wp--preset--spacing--60);
}

.lvrl-nav__badge--vector,
.lvrl-nav__icon {
	aspect-ratio: 1;
}

/*
 * Stroke weight is set here rather than left on each file, so one token governs every drawn
 * mark in the bar. CSS beats the presentation attribute, so the source files stay as their
 * library published them.
 */
/*
 * Every inlined mark on the site is drawn at one weight, and this is the only place that
 * weight is set.
 *
 * A stroke scales with the shape it is drawn on, so a single stroke-width produces a
 * different line at every icon size — the same token was rendering 1.5px on a 2rem nav mark,
 * 1.25px on a chevron and 0.75px on a label icon. Nothing was inconsistent in the CSS; the
 * geometry was doing it. Detaching the stroke from the scale is what makes the token mean the
 * line weight on screen rather than a ratio of whatever it lands on.
 *
 * Set on the shapes rather than the root, because vector-effect does not inherit.
 */
.lvrl-nav__icon,
.lvrl-nav__search-icon,
.lvrl-strip__label-icon,
.lvrl-strip__chevron,
.lvrl-card__icon,
.lvrl-hero__cta-icon {
	stroke-width: var(--wp--custom--icon--stroke);
}

.lvrl-nav__icon *,
.lvrl-nav__search-icon *,
.lvrl-strip__label-icon *,
.lvrl-strip__chevron *,
.lvrl-card__icon *,
.lvrl-hero__cta-icon * {
	vector-effect: non-scaling-stroke;
}

/*
 * The hamburger states its own height rather than inheriting the menu marks'.
 *
 * It was a step below them and is now level with them, because they came down and it did not.
 * Left explicit rather than deleted as a duplicate: the two are the same size by coincidence
 * today, and a rule that reads as redundant is the one that silently follows the next change to
 * something it was never meant to track.
 */
.lvrl-nav__icon--toggle {
	block-size: var(--wp--preset--spacing--60);
}

/* Social ------------------------------------------------------------------ */

/*
 * These sit at the weight of the dividers rather than the weight of the links. Five ways off
 * the site have the weakest claim on attention of anything on the bar, so at rest they are
 * drawn in the same grey as the hairlines around them — present, findable, and asking for
 * nothing. The accent is held back for hover, where it still belongs to them but only once
 * someone has gone looking.
 *
 * They are deliberately below the contrast a control would normally hold. Each carries its
 * name as an accessible label and takes the accent on focus as well as hover, so the keyboard
 * path is louder than the resting state, not quieter.
 */
.lvrl-nav__social-link {
	display: grid;
	place-items: center;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--20);
	color: var(--wp--custom--hairline--color);
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

.lvrl-nav__social-link:hover,
.lvrl-nav__social-link:focus-visible {
	color: var(--wp--preset--color--accent);
}

/*
 * Two steps below the menu marks. These are a way out of the site, not a way through it, and
 * they should read as a footnote at the end of the bar rather than a sixth navigation item.
 * The padding above carries the tap target the mark itself no longer provides, and is tighter
 * across than down so the five read as one cluster rather than five separate links.
 */
.lvrl-nav__social-icon {
	inline-size: var(--wp--preset--spacing--40);
	block-size: var(--wp--preset--spacing--40);
	aspect-ratio: 1;
}

/* Scoreboard band --------------------------------------------------------- */

/*
 * Sits directly beneath the bar, one row tall and empty for now. It carries its own
 * hairline so the two bands read as a pair rather than one block.
 */
.lvrl-bar__scoreboard {
	min-block-size: var(--wp--custom--bar--scoreboard-height);
	background: var(--wp--preset--color--grey-100);
	border-block-end: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
}

/* -------------------------------------------------------------------------
 * Scoreboard strip
 *
 * Layout ladder:
 *   Element   mobile                        tablet              laptop and up
 *   Badge     leading cell, fixed           leading cell        leading cell
 *   Round     under the badge               under the badge     under the badge
 *   Matches   cards, scrolled sideways      cards, scrolled     equal share, no scroll
 *   Arrows    trailing cell, fixed          trailing cell       trailing cell
 *
 * Three tracks. The badge and the arrows take the width they need, the rail takes what is
 * left. Inside the rail the matches are auto columns: a card width below laptop, where
 * scrolling sideways is how a round is meant to be read, and an equal fraction from laptop
 * up, where the whole round fits and nothing should scroll. One declaration changes between
 * the two — the rail is the same grid in both.
 * ---------------------------------------------------------------------- */

/*
 * Two arrangements, and the phone gets the one written first.
 *
 * On a phone the badge and the arrows are fixed furniture either side of the rail, so they
 * take width the match can never use — a card is left with a third of a small screen and the
 * strip becomes a row of clipped words that scrolls past faster than it can be read. Stacking
 * them puts the whole screen under one card.
 */
.lvrl-strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	min-block-size: var(--wp--custom--bar--scoreboard-height);
	min-width: 0;
}

/* Badge and round --------------------------------------------------------- */

.lvrl-strip__brand {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
	gap: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
}

.lvrl-strip__badge {
	block-size: var(--wp--preset--spacing--70);
	inline-size: auto;
	object-fit: contain;
}

.lvrl-strip__round {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	color: var(--wp--preset--color--grey-700);
	white-space: nowrap;
}

/* Rail -------------------------------------------------------------------- */

/*
 * Scrolling sideways is the design below laptop, not a failure of it — a round is eight
 * matches and they are cards to be moved through. The scrollbar itself is hidden because the
 * partial card at the edge already says there is more, and a bar this shallow cannot spare
 * the height a scrollbar would take from the cards.
 */
.lvrl-strip__rail {
	display: grid;
	grid-auto-flow: column;

	/*
	 * One card, the full width of the strip. Snapping is what makes it one at a time rather
	 * than a band that happens to be scrollable: a swipe lands on a match instead of halfway
	 * between two, so there is never a partial card claiming to be readable.
	 */
	grid-column: 1 / -1;
	grid-auto-columns: 100%;
	scroll-snap-type: inline mandatory;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	min-width: 0;
}

.lvrl-strip__rail::-webkit-scrollbar {
	display: none;
}

.lvrl-strip__empty {
	align-self: center;
	margin: 0;
	padding-inline: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--nav);
	color: var(--wp--preset--color--grey-500);
}

/* Match cell -------------------------------------------------------------- */

/*
 * Three sections, each divided by the same hairline the bar is drawn with: when and state,
 * then the contest, then where. The rows are declared on the card rather than left to auto
 * placement so the middle takes the slack — a card with no venue keeps the same three-part
 * shape as one beside it that has all three.
 *
 * The card itself carries no padding. The state block runs to the card's edges, and padding
 * here would hold it off them; each section pads its own contents instead.
 */
.lvrl-strip__match {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	border-inline-start: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	min-width: 0;
	scroll-snap-align: start;
	transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

/* Sections ---------------------------------------------------------------- */

.lvrl-strip__head,
.lvrl-strip__body,
.lvrl-strip__foot {
	min-width: 0;
}

.lvrl-strip__head,
.lvrl-strip__body {
	border-block-end: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
}

/*
 * Kickoff takes the width it needs and the state closes the row. Declared as tracks rather
 * than pushed apart, so a scheduled match leaves the trailing track empty instead of letting
 * the kickoff drift across the section.
 */
.lvrl-strip__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
}

.lvrl-strip__body {
	display: grid;
	align-content: center;
	gap: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
}

.lvrl-strip__foot {
	display: grid;
	align-content: center;
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
}

.lvrl-strip__match:hover,
.lvrl-strip__match:focus-visible {
	background-color: var(--wp--preset--color--grey-200);
}

/*
 * Kickoff and venue are labels inside their section, not boxes of their own. The section's
 * own hairline already separates them from everything else, so an outline around the text as
 * well would be the same boundary drawn twice.
 */
/*
 * Set at micro, a step below the club names in the middle of the card.
 *
 * All three lines had been at nav, so the ground and the kickoff were the same size as the
 * teams playing — three facts of different weight reading as one. The contest is what the card
 * is for; when and where qualify it. Dropping the two qualifiers is what puts the result back
 * at the top of the card's own hierarchy, and it takes height out of every card in the bar
 * without a single length being declared.
 */
.lvrl-strip__when,
.lvrl-strip__venue {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--grey-500);
	min-width: 0;
}

/* A third track for the zone. Declared rather than left to auto flow so the label sits with
   the time and cannot be pushed off by a long one. */
.lvrl-strip__when {
	grid-template-columns: auto auto auto;
	justify-content: start;
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
}

/*
 * A step down from the time it qualifies. The zone is the same for every match on the strip,
 * so it is the least informative thing in the label — it needs to be legible to anyone who
 * wonders and invisible to everyone who does not.
 */
.lvrl-strip__tz {
	color: var(--wp--preset--color--grey-400);
	white-space: nowrap;
}

/*
 * One line each, and no ellipsis. Below desktop the card is sized by its own contents, so
 * there is nothing to cut off — truncation returns at desktop, where every card takes an
 * equal share and something has to give.
 */
.lvrl-strip__when-text,
.lvrl-strip__venue-text {
	white-space: nowrap;
	min-width: 0;
}

/*
 * The state is solid, and it is the only solid thing on the card. Everything else here is a
 * line or a piece of text on the same charcoal, so a filled block reads instantly as the one
 * fact that has been settled — this match is over.
 *
 * It runs to the card's edges rather than sitting inside a margin. That is why the card holds
 * no padding of its own: a block that stops short of the divider reads as a label that has
 * been placed on the card, and one that meets it reads as part of the card's construction.
 */
.lvrl-strip__state {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	align-content: center;
	justify-content: start;
	gap: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	white-space: nowrap;
}

/*
 * Three states, one block.
 *
 * Position, size, padding, type and mark placement are the block's; only the fill and the
 * mark change between them, so the three read as one control reporting three things rather
 * than three components that happen to sit in the same corner.
 *
 * Green for a match in progress rather than red, because red is the site's accent and is
 * already doing other work up here — a game being played has to be separable from a game
 * that has finished at a glance, and colour is the only thing separating them.
 *
 * Grey for a match that has not started. It is the quietest of the three deliberately: a
 * fixture that has not kicked off is the one state on the bar carrying no news, and it takes
 * the step the hairlines are drawn in so it reads as part of the card's construction rather
 * than as an announcement. A bye takes the same treatment for the same reason.
 */
.lvrl-strip__state--live {
	background-color: var(--wp--preset--color--live);
}

.lvrl-strip__state--upcoming,
.lvrl-strip__state--bye {
	background-color: var(--wp--preset--color--grey-200);
	color: var(--wp--preset--color--grey-700);
}

/*
 * Sized against the text it sits beside rather than against the icon scale, because it belongs
 * to the label and not to the row of marks along the bar. It moved down a step with the type it
 * qualifies — an icon that keeps its size while its label shrinks stops being a mark beside a
 * word and becomes a mark with a word next to it.
 */
.lvrl-strip__label-icon {
	block-size: var(--wp--preset--spacing--20);
	inline-size: var(--wp--preset--spacing--20);
	aspect-ratio: 1;
}

/* Sides ------------------------------------------------------------------- */

.lvrl-strip__side {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.lvrl-strip__crest {
	block-size: var(--wp--preset--spacing--50);
	inline-size: var(--wp--preset--spacing--50);
	object-fit: contain;
}

/*
 * The name stays on one line and never wraps. Every cell in the row is the same height, and a
 * wrapped name would make one card taller than the band — so the band would grow to fit
 * whichever club name happened to land in the narrowest card.
 */
.lvrl-strip__team {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	color: var(--wp--preset--color--grey-700);
	white-space: nowrap;
	min-width: 0;
}

.lvrl-strip__score {
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	color: var(--wp--preset--color--grey-700);
}

/* The result is the fact the strip exists to carry, so the winner is the only thing on the
   card set in bold and full white. */
.lvrl-strip__side.is-winner .lvrl-strip__team,
.lvrl-strip__side.is-winner .lvrl-strip__score {
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.lvrl-strip__match--bye .lvrl-strip__side {
	grid-template-columns: auto minmax(0, 1fr);
}

/* Venue ------------------------------------------------------------------- */

/*
 * The venue closes the card, answering the last question it leaves — when, who, what
 * happened, where.
 *
 * It is inset from the dividers rather than running the full width. The card's own inline
 * padding is what produces that inset, so the gap either side is the same measurement as the
 * space around everything else on the card and cannot drift out of step with it. Nothing here
 * declares a width.
 */
/* The venue takes its layout from the shared label rule above; the section it sits in supplies
   the padding and the divider. */

/* Round arrows ------------------------------------------------------------ */

.lvrl-strip__nav {
	display: flex;
	align-items: center;
	justify-content: end;
	padding-inline: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
}

.lvrl-strip__arrow {
	display: grid;
	place-items: center;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--30);
	background: none;
	border: 0;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

.lvrl-strip__arrow:hover,
.lvrl-strip__arrow:focus-visible {
	color: var(--wp--preset--color--accent);
}

/*
 * Disabled rather than removed at the ends of what has been imported, so the control does not
 * move under the pointer when a reader reaches the first or last round.
 */
.lvrl-strip__arrow[disabled] {
	color: var(--wp--preset--color--grey-300);
	cursor: default;
}

.lvrl-strip__chevron {
	block-size: var(--wp--preset--spacing--50);
	inline-size: var(--wp--preset--spacing--50);
	aspect-ratio: 1;
}

/* The strip dims while a round is in flight, so a slow network reads as loading rather than
   as a control that did nothing. */
.lvrl-strip[aria-busy="true"] {
	opacity: 0.6;
}

/* From laptop the bar is one row: logo, search, then the item and social cells. */
@container (min-width: 1024px) {
	/*
	 * Stretch, not centre. The dividers are borders on the items, so an item only draws a
	 * rule as tall as it is — centring the tracks leaves each border floating in the middle
	 * of the bar with a gap above and below it. Stretching makes every track the full height
	 * of the row, which is what makes the rules run top to bottom. Each track then centres
	 * its own contents.
	 */
	.lvrl-nav {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-items: stretch;
		padding-inline: 0;
	}

	.lvrl-nav__brand {
		display: grid;
		align-content: center;
		padding-inline: var(--wp--preset--spacing--60);
	}

	/*
	 * Centred in its own track, not anchored to the logo. The track is the only flexible
	 * one in the bar, so it absorbs whatever the three fixed zones leave — centring the
	 * field inside it puts clear air on both sides at every width, which is what separates
	 * the four zones from each other without a single fixed gap.
	 *
	 * The field still takes the full track below its ceiling, so it narrows with the bar
	 * rather than overflowing it.
	 */
	.lvrl-nav__search {
		inline-size: 100%;
		max-inline-size: var(--wp--custom--bar--search-width);
		justify-self: center;
		align-self: center;
	}

	.lvrl-nav__toggle {
		display: none;
	}

	/*
	 * The panel dissolves so its children become items of the bar's grid directly. That is
	 * what lets one set of markup serve both the stacked and the inline arrangement without
	 * duplicating it — a nested layout resolved by the grid rather than by more markup.
	 */
	.lvrl-nav__panel {
		display: contents;
	}

	.lvrl-nav__menu,
	.lvrl-nav__social {
		flex-direction: row;
		align-items: stretch;
	}

	/*
	 * Dividers are borders on the items themselves. Every item carries a leading hairline
	 * and the social group carries one too, which produces a rule between every cell and
	 * none at the ends without a single empty element.
	 */
	.lvrl-nav__item,
	.lvrl-nav__social {
		border-inline-start: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	}

	/* The item is a shell for its link; the link does the spacing and carries the height. */
	.lvrl-nav__item {
		display: flex;
	}

	.lvrl-nav__link {
		align-content: center;
		padding-block: 0;
		padding-inline: var(--wp--preset--spacing--70);
	}

	.lvrl-nav__social {
		align-items: center;
		padding-inline: var(--wp--preset--spacing--40);
	}

}

/*
 * The whole round fits, so every match takes an equal share and nothing scrolls. This is the
 * single declaration that separates the two arrangements — the rail is the same grid at every
 * width, and the cards were never given a fixed size to override.
 *
 * Desktop rather than laptop, and the difference is not pedantry: a round is eight matches,
 * so at 1024px an equal share is about 107px a card once the badge and arrows are taken out,
 * which is not enough to hold a club name and a score without truncating both. The strip
 * keeps scrolling through the laptop range, where scrolling is honest, and only spreads once
 * there is width worth spreading across.
 */
/*
 * From tablet the badge and arrows go back to flanking the rail, and the cards go back to
 * being sized by their contents. There is enough width here for furniture either side of a
 * card without the card losing what it needs.
 */
@container (min-width: 768px) {
	.lvrl-strip {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.lvrl-strip__brand {
		grid-auto-flow: row;
		justify-content: center;
		justify-items: center;
		align-content: center;
		gap: var(--wp--preset--spacing--10);
		padding-block: 0;
		border-block-end: 0;
		border-inline-end: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	}

	.lvrl-strip__nav {
		padding-inline: 0;
		border-block-end: 0;
		border-inline-start: var(--wp--custom--hairline--width) solid var(--wp--custom--hairline--color);
	}

	.lvrl-strip__rail {
		grid-column: auto;
		grid-auto-columns: minmax(var(--wp--custom--bar--match-width), max-content);
		scroll-snap-type: none;
	}
}

@container (min-width: 1280px) {
	.lvrl-strip__rail {
		grid-auto-columns: minmax(0, 1fr);
		overflow-x: visible;
	}

	/*
	 * Truncation belongs to this arrangement alone. An equal share is a width the content did
	 * not choose, so something has to give when a ground name is longer than its column —
	 * whereas below desktop the column is whatever the content needs and nothing is cut.
	 */
	.lvrl-strip__venue {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.lvrl-strip__when-text,
	.lvrl-strip__venue-text,
	.lvrl-strip__team {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}