@charset "UTF-8";

/* Zapadoceska miniliga - public web styles.
   Brand: navy #04132b, red #c21610, white; Barlow for DIN Next of the artwork.

   Four bands: 1. tokens and fonts, 2. chrome, 3. components, 4. league.
   No build step - production runs no Node. */

/* ==========================================================================
   1. Tokens and fonts
   ========================================================================== */

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

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

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

@font-face {
	font-family: Barlow;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/barlow-500-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--navy: #04132b;
	--red: #c21610;

	/* Surfaces and text inside the white content sheet. */
	--surface: #fff;
	--surface-alt: #f2f4f8;
	--line: #dce1ea;
	--ink: #1a2740;
	--ink-muted: #5d6880;

	/* Percentages of white rather than fixed greys, so they hold if the navy
	   is ever retuned. */
	--on-navy: #fff;
	--on-navy-muted: rgba(255, 255, 255, 0.72);
	--on-navy-line: rgba(255, 255, 255, 0.16);

	--container: 1200px;
	/* How wide a line of running text may get: 52rem at 1.125rem is about 102
	   characters, above the 45-75 of the literature and deliberately so. It is a
	   measure, never a page width - the sheet stays at --container on every page. */
	--measure: 52rem;
	--gap: 1.5rem;
	--radius: 6px;

	/* Only 400 and 500 are shipped as woff2; anything heavier is synthesised. */
	--weight-strong: 500;
}

* {
	box-sizing: border-box;
}

/* Reserved whether or not the page scrolls, so a short page and a long one
   are the same width. nav.js depends on it: it measures the header before
   <main> is parsed, when the document is still one screen tall. */
html {
	scrollbar-gutter: stable;
}

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-height: 100vh;
	background: var(--navy);
	color: var(--on-navy);
	font-family: Barlow, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	/* Long compound words and pasted URLs must not push the page sideways. */
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
}

/* Outline in the current text colour: white on the chrome, navy on the sheet. */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   2. Chrome - header, nav, container, main, footer
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Clipped rather than display:none - a hidden element is skipped by assistive
   technology too. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.site-header {
	/* A stacking context of its own: the category dropdown hangs across the
	   header's bottom border and must paint over it. */
	position: relative;
	z-index: 30;
	border-bottom: 3px solid var(--red);
	background: var(--navy);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 0.75rem;
}

.site-logo {
	display: block;
	flex: none;
	line-height: 0;
}

.site-logo img {
	width: clamp(48px, 9vw, 68px);
	height: auto;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	padding: 0.45rem 0.7rem;
	border-bottom: 2px solid transparent;
	color: var(--on-navy);
	font-size: 1.05rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	border-bottom-color: var(--on-navy-line);
}

.site-nav .is-active {
	border-bottom-color: var(--red);
}

/* --- category dropdown ----------------------------------------------------
   Opens on :hover and on :focus-within, so it works from the keyboard with no
   script. The parent is the positioning context. */

.site-nav__item--parent {
	position: relative;
}

/* Prefixed with .site-nav so it outranks the generic `.site-nav ul` flex row
   above, which would otherwise keep the panel open. */
.site-nav .site-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 12.5rem;
	padding: 0.35rem 0;
	border: 1px solid var(--on-navy-line);
	border-top: 2px solid var(--red);
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--navy);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.site-nav__item--parent:hover .site-nav__dropdown,
.site-nav__item--parent:focus-within .site-nav__dropdown {
	display: flex;
}

.site-nav__dropdown a {
	padding: 0.5rem 0.9rem;
	border-bottom: 0;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus-visible {
	background: rgba(255, 255, 255, 0.07);
}

.site-nav__dropdown .is-active {
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Narrow screens have no hover, so the dropdowns are off here; once the row
   will not fit at all, the collapse band further down takes over. */
@media (max-width: 720px) {
	.site-nav {
		width: 100%;
	}

	.site-nav__list > li > a {
		display: inline-block;
	}

	.site-nav .site-nav__dropdown,
	.site-nav .site-nav__item--parent:hover .site-nav__dropdown,
	.site-nav .site-nav__item--parent:focus-within .site-nav__dropdown {
		/* Listed with the :hover/:focus-within forms too: those outrank a bare
		   descendant selector, and on iOS the first tap counts as hover. */
		display: none;
	}
}

/* --- collapsing the row when it does not fit -------------------------------
   Deliberately no breakpoint: how many items the menu has is editorial and
   their width depends on a font that arrives after the first paint, so
   res/js/nav.js measures the real row and sets .site-nav--collapsible.
   Without the script the row simply wraps, as it always did. */

.site-nav__toggle {
	/* Hidden to agree with the [hidden] the markup ships with; only the script
	   turns it on. */
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.45rem 0.7rem;
	border: 0;
	background: none;
	color: var(--on-navy);
	font: inherit;
	font-size: 1.05rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.site-nav--collapsible .site-nav__toggle {
	display: flex;
	/* The nav is what bounds the label; without this the button takes its
	   content's width and the ellipsis never engages. */
	max-width: 100%;
}

.site-nav__toggle-current {
	/* A long category title would otherwise wrap the button onto a second line
	   and make the collapsed header taller than the row it replaced. */
	min-width: 0;
	flex: 0 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--on-navy-muted);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.site-nav__toggle-icon {
	position: relative;
	flex: none;
	width: 1.15rem;
	height: 2px;
	background: currentColor;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.site-nav__toggle-icon::before {
	top: -6px;
}

.site-nav__toggle-icon::after {
	top: 6px;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
	background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before,
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
	top: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
	transform: rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
	transform: rotate(-45deg);
}

/* The 720px block drops the nav onto a row of its own; both of the script
   states take that back, so the header is one row either way. Later in the
   file and just as specific, which is what makes them win. */
.site-nav--inline {
	width: auto;
}

/* flex-basis: 0 is load-bearing. Sized from its content, a nav carrying a long
   category title escapes to a line of its own and the ellipsis never engages. */
.site-nav--collapsible {
	display: flex;
	justify-content: flex-end;
	flex: 1 1 0;
	min-width: 0;
}

/* The list becomes a panel under the whole header; .site-header is already
   position: relative for the dropdown.

   visibility rather than display: the panel still has to be measurable for the
   script, and visibility: hidden keeps the links out of the tab order anyway. */
.site-nav--collapsible .site-nav__list {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 20;
	visibility: hidden;
	/* block, not the flex column the row uses: a height-capped column flex box
	   inherits flex-wrap and starts a SECOND column instead of scrolling. */
	display: block;
	border-top: 3px solid var(--red);
	padding: 0.4rem clamp(1rem, 4vw, 2rem) 0.9rem;
	background: var(--navy);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	/* The dvh line repeats the vh one for iOS; a browser that does not know the
	   unit keeps the line above. */
	max-height: calc(100vh - 100%);
	max-height: calc(100dvh - 100%);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.site-nav--open .site-nav__list {
	visibility: visible;
}

.site-nav--collapsible .site-nav__list > li > a {
	display: block;
	padding: 0.6rem 0;
	border-bottom: 0;
}

.site-nav--collapsible .site-nav__list > li > .is-active {
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Re-listing the :hover and :focus-within forms is the defence documented
   above: the desktop show rules outrank a bare descendant selector. */
.site-nav--collapsible .site-nav__dropdown,
.site-nav--collapsible .site-nav__item--parent:hover .site-nav__dropdown,
.site-nav--collapsible .site-nav__item--parent:focus-within .site-nav__dropdown {
	position: static;
	display: block;
	min-width: 0;
	margin-bottom: 0.35rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.site-nav--collapsible .site-nav__dropdown a {
	padding: 0.35rem 0 0.35rem 1rem;
	color: var(--on-navy-muted);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: none;
	white-space: normal;
}

.site-nav--collapsible .site-nav__dropdown .is-active {
	color: var(--on-navy);
}

/* flex: 1 keeps the sheet filling the viewport on short pages, so the footer
   never floats mid-screen. */
.site-main {
	flex: 1;
	margin-block: 1.75rem 2.5rem;
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- breadcrumbs ----------------------------------------------------------
   The trail above every page but the homepage. Quiet: it is furniture, and the
   page title under it is what the visitor came to read. */
.breadcrumbs {
	margin-bottom: 1.75rem;
	padding-bottom: 0.7rem;
	/* Barely there: the trail and the page are two things, and a rule dark
	   enough to be noticed would be a third. */
	border-bottom: 1px solid rgba(4, 19, 43, 0.07);
	color: var(--ink-muted);
	font-size: 0.85rem;
}

/* The trail sits nearer the top edge of the sheet than a heading does: it is
   furniture, and the page proper should start where the eye looks for it. */
.site-main:has(.breadcrumbs) {
	padding-block-start: clamp(1rem, 2.5vw, 1.5rem);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	/* The trail is one line of reading, so a crumb that does not fit wraps as a
	   whole rather than breaking a club name in half. */
	min-width: 0;
}

/* Escaped rather than typed, so the file stays ASCII; aria-hidden by being a
   pseudo-element, which no screen reader announces. */
.breadcrumbs__item + .breadcrumbs__item::before {
	content: '\203A';
	color: var(--line);
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

/* Sized in em so the house tracks the text, and dropped off the baseline it
   would otherwise rest its floor on: centred on the capitals beside it. */
.breadcrumbs__icon {
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.19em;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

/* The page itself, which is not a link. It carries the trail's only full ink,
   so the line reads as a path ending where the visitor is standing. */
.breadcrumbs__current {
	color: var(--ink);
	/* Clipped rather than wrapped: the trail is one line of furniture, and the
	   pages with a long name of their own leave it off the trail entirely. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The page's own name, which the heading under the trail prints again. There is
   room for it on a tablet and up; on a phone it is a second line of trail for
   a sentence the reader is about to see anyway. The BreadcrumbList keeps it at
   every width — the trail is complete, this is only what is drawn. */
@media (max-width: 720px) {
	.breadcrumbs__item--record {
		display: none;
	}
}

/* The article is capped to the measure and centred, so its trail is too -
   otherwise the line starts a long way left of the text it belongs to. */
.page-article .breadcrumbs {
	max-width: var(--measure);
	margin-inline: auto;
}

.page-title,
.site-main > h1 {
	margin: 0 0 1.5rem;
	color: var(--navy);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: var(--weight-strong);
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.page-title::after,
.site-main > h1::after {
	content: '';
	display: block;
	width: 3rem;
	margin-top: 0.6rem;
	border-top: 3px solid var(--red);
}

.site-footer {
	padding-block: 1.25rem 2rem;
	border-top: 1px solid var(--on-navy-line);
	color: var(--on-navy-muted);
	font-size: 0.9rem;
}

.site-footer p {
	margin: 0;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
}

.site-footer__links a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--on-navy);
}

/* ==========================================================================
   3. Components
   ========================================================================== */

/* --- homepage feature area ------------------------------------------------
   One hero beside a stacked column of three compact cards. The minmax(0, ...)
   tracks let a long headline shrink its column instead of widening the grid. */

.article-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}

.article-grid__aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (max-width: 900px) {
	.article-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- hero article ---------------------------------------------------------  */

.article-hero {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--on-navy);
}

.article-hero__media {
	display: block;
	background: var(--navy);
}

.article-hero__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.article-hero__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem clamp(1rem, 3vw, 1.6rem) 1.5rem;
}

.article-hero__meta,
.article-card__meta,
.article-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.article-hero__rubric {
	padding: 0.15rem 0.55rem;
	border-radius: 3px;
	background: var(--red);
	color: #fff;
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.article-hero__date {
	color: var(--on-navy-muted);
}

.article-hero__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.6vw, 1.95rem);
	font-weight: var(--weight-strong);
	line-height: 1.2;
}

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

.article-hero__link:hover,
.article-hero__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-hero__teaser {
	margin: 0;
	color: var(--on-navy-muted);
	line-height: 1.6;
}

/* --- article cards --------------------------------------------------------  */

.article-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.article-card__media {
	display: block;
	background: var(--surface-alt);
}

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

.article-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.45rem;
	/* Without this a long unbroken word in a grid/flex child can widen the row. */
	min-width: 0;
	padding: 0.9rem 1rem 1rem;
}

.article-card__meta {
	color: var(--ink-muted);
}

.article-card__rubric {
	color: var(--red);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.article-card__rubric:hover,
.article-card__rubric:focus-visible {
	text-decoration: underline;
}

.article-card__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: var(--weight-strong);
	line-height: 1.25;
}

.article-card__link {
	color: var(--navy);
	text-decoration: none;
}

.article-card__link:hover,
.article-card__link:focus-visible {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-card__teaser {
	margin: 0;
	color: var(--ink-muted);
	line-height: 1.6;
}

.article-card--compact {
	flex-direction: row;
}

.article-card--compact .article-card__media {
	flex: 0 0 clamp(88px, 28%, 128px);
	align-self: stretch;
	min-height: 88px;
}

.article-card--compact .article-card__image {
	height: 100%;
	aspect-ratio: auto;
}

.article-card--compact .article-card__body {
	padding: 0.7rem 0.9rem 0.8rem;
}

.article-card--compact .article-card__title {
	font-size: 1.02rem;
}

/* --- article listing ------------------------------------------------------  */

.article-list {
	display: grid;
	gap: 1rem;
}

.article-list__item {
	flex-direction: row;
}

.article-list__item .article-card__media {
	flex: 0 0 clamp(140px, 26%, 240px);
	align-self: stretch;
}

.article-list__item .article-card__image {
	height: 100%;
	aspect-ratio: auto;
}

.article-list__item .article-card__body {
	padding: 1rem 1.15rem 1.1rem;
}

@media (max-width: 620px) {
	.article-list__item {
		flex-direction: column;
	}

	.article-list__item .article-card__media {
		flex: none;
	}

	.article-list__item .article-card__image {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.article-list__empty,
.contacts-empty,
.contact-section__empty {
	margin: 0;
	color: var(--ink-muted);
}

/* --- rubric nav -----------------------------------------------------------  */

.rubric-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.25rem;
	margin-block: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.rubric-nav__label {
	color: var(--ink-muted);
	font-size: 0.85rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.rubric-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rubric-nav__link {
	display: block;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--navy);
	font-weight: var(--weight-strong);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.rubric-nav__link:hover,
.rubric-nav__link:focus-visible {
	border-color: var(--red);
	color: var(--red);
}

.rubric-nav__link--active,
.rubric-nav__link--active:hover {
	border-color: var(--red);
	background: var(--red);
	color: #fff;
}

/* --- homepage results strip -----------------------------------------------
   Cards of played tournaments, newest on the right where the band opens.
   Whole cards only, however wide the screen. res/js/strip.js reveals the
   arrows and fetches the next batch as the left end is reached. */

.home-results {
	margin-block: 2rem 1.5rem;
}

.home-results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.6rem;
}

.home-results__title {
	margin: 0;
	color: var(--navy);
	font-size: 0.9rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.home-results__all {
	color: var(--red);
	font-size: 0.82rem;
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.home-results__all:hover,
.home-results__all:focus-visible {
	text-decoration: underline;
}

/* The arrows live in the gutter, so they cost the band no width. */
.home-results__band {
	position: relative;
}

.home-results__track {
	display: flex;
	gap: var(--gap);
	justify-content: flex-start;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.home-results__track:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* The scrollbar goes only once the arrows are there to replace it - without
   the script it is the only way a mouse can move the band. */
.home-results--arrows .home-results__track {
	scrollbar-width: none;
}

.home-results--arrows .home-results__track::-webkit-scrollbar {
	display: none;
}

.home-results__arrow {
	display: flex;
	/* Load-bearing beside display:flex, which otherwise wins over the browser own
	   [hidden] rule and shows the chevrons on a page whose script never arrived. */
	position: absolute;
	top: 50%;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-muted);
	font-size: 1.6rem;
	line-height: 1;
	transform: translateY(-50%);
	cursor: pointer;
}

.home-results__arrow[hidden] {
	display: none;
}

.home-results__arrow--older {
	left: calc((clamp(1rem, 4vw, 2rem) + 1.25rem) / -2);
}

.home-results__arrow--newer {
	right: calc((clamp(1rem, 4vw, 2rem) + 1.25rem) / -2);
}

.home-results__arrow:hover:not(:disabled),
.home-results__arrow:focus-visible {
	color: var(--red);
}

/* Disabled at an end, not hidden: a control that disappears makes the band
   jump under the cursor mid-click. */
.home-results__arrow:disabled {
	color: #dfe3ea;
	cursor: default;
}

.result-card {
	display: flex;
	flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
	flex-direction: column;
	min-width: 0;
	padding: 0.15rem 0.7rem 0.35rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
	/* Load-bearing: the cards carry .visually-hidden labels, which are absolutely
	   positioned. Without a positioned ancestor the last one sits off the side of
	   the document, which the page then scrolls to reach. */
	position: relative;
	scroll-snap-align: start;
}

.result-card__when {
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
	align-items: baseline;
	gap: 0.15rem 0.45rem;
	margin: 0;
	padding: 0.5rem 0 0.2rem;
	font-size: 0.88rem;
	line-height: 1.35;
	overflow-wrap: normal;
	text-align: center;
}

.result-card__round {
	grid-column: 1;
	color: var(--ink-muted);
	font-size: 0.78rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.result-card__date {
	grid-column: 2;
	color: var(--navy);
	font-weight: var(--weight-strong);
}

.result-card__host {
	grid-column: 3;
	color: var(--navy);
	font-weight: var(--weight-strong);
	text-align: right;
}

/* No time column: everything on this strip has been played, so the middle
   always carries the score. */
.result-card .game {
	grid-template-columns: minmax(3.2rem, 1fr) 3rem minmax(3.2rem, 1fr);
	padding-inline: 0;
	font-size: 0.82rem;
}

.result-card .game__score {
	min-width: 2.4rem;
	text-align: center;
}

.result-card .tournament__games {
	padding-inline: 0;
}

.result-card .game .team-logo {
	width: 16px;
	height: 16px;
}

.result-card .game .team-logo--placeholder {
	font-size: 0.46rem;
}

.result-card .game__team {
	gap: 0.25rem;
}

@media (max-width: 900px) {
	.result-card {
		flex-basis: calc((100% - var(--gap)) / 2);
	}
}

@media (max-width: 560px) {
	.result-card {
		flex-basis: 100%;
	}

	.home-results__arrow {
		display: none;
	}
}

/* --- homepage schedule row ------------------------------------------------
   One box per league category, each the schedule page own tournament card.
   auto-fit rather than a row of four: how many categories a season is played
   in is the admin to decide. */

.home-schedule {
	margin-bottom: 2rem;
}

.home-schedule__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-schedule__item {
	display: flex;
}

.home-schedule__item > .tournament {
	flex: 1;
}

.home-schedule__link {
	color: inherit;
	text-decoration: none;
}

.home-schedule__link:hover,
.home-schedule__link:focus-visible {
	text-decoration: underline;
}

/* Equal outer tracks are what actually centres the day; min-content is their
   floor so a club name wraps between its words rather than being cut through. */
.home-schedule__when {
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
	align-items: baseline;
	gap: 0.15rem 0.45rem;
	margin: 0;
	padding: 0.65rem 0.7rem 0;
	font-size: 0.88rem;
	line-height: 1.35;
	overflow-wrap: normal;
	text-align: center;
}

.home-schedule__round {
	color: var(--ink-muted);
	font-size: 0.78rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.home-schedule__unset {
	color: var(--ink-muted);
}

.home-schedule__host {
	color: var(--navy);
	font-weight: var(--weight-strong);
	text-align: right;
}

.home-schedule .tournament__note {
	text-align: center;
}

.home-schedule__heading {
	margin: 0;
	padding: 0.4rem 0.85rem 0;
	color: var(--navy);
	font-size: 0.9rem;
	font-weight: var(--weight-strong);
	line-height: 1.35;
}

.tournament--tentative .home-schedule__host,
.tournament--tentative .home-schedule__heading {
	color: var(--ink-muted);
}

/* Three columns, not the schedule page four: the middle one says whatever the
   game has to say - the result once played, the face-off time until then. */
/* Same fixed middle track as the schedule page: the rows of one box have to
   line up under each other. */
.home-schedule .game {
	grid-template-columns: minmax(3.2rem, 1fr) 3rem minmax(3.2rem, 1fr);
	padding-inline: 0;
	font-size: 0.82rem;
}

.home-schedule .game__score,
.home-schedule .game__time,
.home-schedule .game__versus {
	min-width: 2.4rem;
	text-align: center;
}

.home-schedule .game__score,
.home-schedule .game__versus {
	font-size: 0.88rem;
}

.home-schedule .game--played .game__score {
	font-size: 0.98rem;
}

.home-schedule .game .team-logo {
	width: 16px;
	height: 16px;
}

.home-schedule .game .team-logo--placeholder {
	font-size: 0.46rem;
}

.home-schedule .game__team {
	gap: 0.25rem;
}

/* --- pager ----------------------------------------------------------------  */

.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.pager__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pager__link,
.pager__gap,
.pager__prev,
.pager__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	min-height: 2.4rem;
	padding: 0 0.7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--navy);
	text-decoration: none;
}

.pager__link:hover,
.pager__prev:hover,
.pager__next:hover,
.pager__link:focus-visible,
.pager__prev:focus-visible,
.pager__next:focus-visible {
	border-color: var(--red);
	color: var(--red);
}

.pager__link--current,
.pager__link--current:hover {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.pager__gap {
	border-color: transparent;
	color: var(--ink-muted);
}

/* --- article detail -------------------------------------------------------
   The article is capped once, on the wrapper, so the meta line, the headline,
   the photo and the body all begin and end on the same two edges. Capping the
   blocks separately is how an article ends up with a ragged left edge. */

.draft-note,
.article-detail {
	max-width: var(--measure);
	margin-inline: auto;
}

.article-detail__meta {
	color: var(--ink-muted);
}

.article-detail__rubric {
	color: var(--red);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.article-detail__author::before {
	content: '· ';
}

.article-detail__title {
	margin: 0.6rem 0 0;
	color: var(--navy);
	font-size: clamp(1.7rem, 4.5vw, 2.5rem);
	font-weight: var(--weight-strong);
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.article-detail__title::after {
	content: '';
	display: block;
	width: 3rem;
	margin-top: 0.8rem;
	border-top: 3px solid var(--red);
}

.article-detail__figure {
	margin: 1.75rem 0 0;
}

/* Uploads are scaled to fit a box and never cropped, so a standing photo stops
   at a screenful instead of pushing the article below the fold. */
.article-detail__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 36rem;
	margin-inline: auto;
	border-radius: var(--radius);
}

.article-detail__lead {
	margin: 1.75rem 0 0;
	color: var(--navy);
	font-size: 1.3rem;
	font-weight: var(--weight-strong);
	line-height: 1.5;
}

/* Editor HTML wherever it is printed: an article and a category rules text
   come out of the same Quill editor, so one block typesets both. */
.rich-text {
	font-size: 1.125rem;
	line-height: 1.7;
}

.article-detail__body {
	margin-top: 1.5rem;
}

.system,
.legal {
	max-width: var(--measure);
	margin-inline: auto;
}

.system__body,
.legal__body {
	margin-top: 1.5rem;
}

.legal__revised {
	margin: 0.35rem 0 0;
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.legal__body h2 {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.legal__body h3 {
	margin-top: 1.75rem;
	color: var(--ink-muted);
}

.rich-text > :first-child {
	margin-top: 0;
}

.rich-text a {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rich-text p,
.rich-text ul,
.rich-text ol,
.rich-text blockquote {
	margin: 0 0 1rem;
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
	margin: 1.8rem 0 0.6rem;
	color: var(--navy);
	font-weight: var(--weight-strong);
	line-height: 1.25;
}

.rich-text h2 {
	font-size: 1.6rem;
}

.rich-text h3 {
	font-size: 1.3rem;
}

.rich-text ul,
.rich-text ol {
	padding-left: 1.4rem;
}

/* Quill writes a plain <ul><li> for a bulleted list; the attribute turns up
   only on a pasted checklist, which lands inside an <ol> and would otherwise
   be numbered. */
.rich-text li[data-list='bullet'] {
	list-style-type: disc;
}

.rich-text blockquote {
	padding-left: 1rem;
	border-left: 3px solid var(--red);
	color: var(--ink-muted);
}

.rich-text img {
	height: auto;
	border-radius: var(--radius);
}

/* A pasted table must scroll, never widen the page. <iframe> and <video> need
   no rules here - EditorHtml removes both. */
.rich-text table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

.article-detail__back {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.article-detail__back-link {
	color: var(--red);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.article-detail__back-link::before {
	content: '← ';
}

.article-detail__back-link:hover,
.article-detail__back-link:focus-visible {
	text-decoration: underline;
}

/* --- editor shortcut ------------------------------------------------------
   The "upravit" link an editor sees on the page they are reading. A visitor is
   never served this markup at all (see App\Web\View\EditLink). */

.edit-link {
	margin-left: auto;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
	color: var(--ink-muted);
	font-size: 0.75rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.edit-link:hover,
.edit-link:focus-visible {
	border-color: var(--red);
	color: var(--red);
}

.edit-link__icon {
	font-size: 0.9em;
}

.draft-note {
	/* margin-block, not a `margin` shorthand: the shorthand would reset the
	   margin-inline: auto that centres it. */
	margin-block: 0 1.5rem;
	padding: 0.7rem 1rem;
	border-left: 4px solid var(--red);
	border-radius: var(--radius);
	background: var(--surface-alt);
	color: var(--ink-muted);
	font-size: 0.9rem;
}

/* --- contacts -------------------------------------------------------------
   One table per section, four columns wide; below 720px it folds to two and
   the club and the function move under the name. */

.contacts {
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
}

.contact-section__title {
	margin: 0 0 0.85rem;
	padding-left: 0.65rem;
	border-left: 4px solid var(--red);
	color: var(--navy);
	font-size: 1.2rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.contact-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* Fixed layout with the widths declared once: the sections are separate
   tables, so an automatic layout would step the columns sideways from one
   section to the next. It stops at 41rem so the scroll it causes can never
   begin above 720px, where the folded layout has taken over. */
.contact-table {
	width: 100%;
	min-width: 41rem;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.contact-table__head--name {
	width: 20%;
}

.contact-table__head--contact {
	width: 24%;
}

.contact-table__head--club {
	width: 24%;
}

.contact-table__head--job {
	width: 32%;
}

.contact-table__head {
	padding: 0.55rem 0.85rem;
	background: var(--navy);
	color: var(--on-navy);
	font-size: 0.78rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.contact-cell {
	padding: 0.55rem 0.85rem;
	border-top: 1px solid var(--line);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.contact-row:nth-child(even) .contact-cell {
	background: var(--surface-alt);
}

.contact-cell--name {
	color: var(--navy);
	font-weight: var(--weight-strong);
}

.contact-cell--club,
.contact-cell--job {
	color: var(--ink-muted);
}

/* The club and the function are carried twice, once in a column and once
   inside the name cell; exactly one of the two forms is ever on screen. */
.contact-cell__meta {
	display: none;
}

.contact-phone,
.contact-mail {
	display: block;
}

.contact-phone {
	white-space: nowrap;
}

.contact-phone a,
.contact-mail a {
	color: var(--red);
	text-decoration: none;
}

.contact-phone a:hover,
.contact-mail a:hover,
.contact-phone a:focus-visible,
.contact-mail a:focus-visible {
	text-decoration: underline;
}

/* Narrow screens fold the table in half: four columns break every cell into
   ragged lines on a 360px phone. Screen only - the print rules below still
   expect the four columns. */
@media screen and (max-width: 720px) {
	.contact-table {
		min-width: 0;
	}

	.contact-table__head--name,
	.contact-table__head--contact {
		width: 50%;
	}

	.contact-table__head--club,
	.contact-table__head--job,
	.contact-cell--club,
	.contact-cell--job {
		display: none;
	}

	.contact-table__head,
	.contact-cell {
		padding-inline: 0.6rem;
	}

	.contact-cell__meta {
		display: block;
		font-size: 0.85rem;
		font-weight: 400;
	}

	.contact-cell__meta--club {
		color: var(--ink);
	}

	.contact-cell__meta--job {
		color: var(--ink-muted);
	}

	/* The links carry the cell block padding themselves, so a thumb worth of
	   height does not drop the number a line below the name. A browser without
	   :has() gets the number a few pixels low. */
	.contact-cell--contact:has(a) {
		padding-block: 0;
	}

	/* Block rather than inline-block: an inline-block is sized shrink-to-fit from
	   intrinsic widths, where overflow-wrap does not apply, so a long address
	   would measure past the cell instead of wrapping inside it. */
	.contact-phone a,
	.contact-mail a {
		display: block;
		padding-block: 0.6rem;
		text-decoration: underline;
	}

	.contact-phone + .contact-mail {
		border-top: 1px solid var(--line);
	}
}

/* --- 404 ------------------------------------------------------------------  */

.notfound {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: clamp(1rem, 6vw, 3rem);
	text-align: center;
}

.notfound__code {
	margin: 0;
	color: var(--red);
	font-size: clamp(3.5rem, 16vw, 7rem);
	font-weight: var(--weight-strong);
	letter-spacing: 0.04em;
	line-height: 1;
}

.notfound__title {
	margin: 0.5rem 0 0;
	color: var(--navy);
	font-size: clamp(1.4rem, 5vw, 2rem);
	font-weight: var(--weight-strong);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.notfound__text {
	margin: 1rem 0 0;
	color: var(--ink-muted);
}

.notfound__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.notfound__link {
	display: block;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--navy);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.notfound__link:hover,
.notfound__link:focus-visible {
	border-color: var(--red);
	color: var(--red);
}

/* ==========================================================================
   4. League - schedule and category menu
   ==========================================================================
   The category schedule after the league posters: one band per round, a navy
   badge on the left, one card per tournament on the right. A card lights up
   once its host has fixed the day and stays muted until then.

   The category dropdown lives with the nav in band 2, where the rules it
   overrides are. */

/* --- page head: kicker, title, stat strip ---------------------------------
   Shared by every category page: the same furniture over different bodies. */

.page-head {
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.page-head__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	margin: 0 0 0.4rem;
	color: var(--red);
	font-size: 0.85rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.page-head__title {
	margin-bottom: 0;
}

/* small-caps leaves digits at full height and shrinks only the letters, so the
   number stands out with no extra markup. */
.page-head__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.page-head__stat {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
	color: var(--navy);
	font-size: 1.05rem;
	font-weight: var(--weight-strong);
	font-variant-caps: small-caps;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	line-height: 1.3;
}

/* The kicker and, at the far end of its line, the way out of the schedule and
   into the subscription. space-between rather than a float: when the two no
   longer fit on one line the link wraps under the kicker instead of overlapping
   it, and on the narrowest screens it has shrunk to its icon by then anyway. */
.page-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.2rem 1rem;
}

.page-head__calendar {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--red);
	font-size: 0.95rem;
	font-weight: var(--weight-strong);
	text-decoration: none;
	white-space: nowrap;
}

.page-head__calendar:hover,
.page-head__calendar:focus-visible {
	text-decoration: underline;
}

/* The glyph sits on the text's baseline rather than on the flex line's, or it
   rides a third of a line above the words beside it. */
.page-head__calendar-icon {
	flex: none;
	margin-bottom: -0.15em;
}

.schedule__empty,
.rosters__empty,
.standings__empty,
.sheet__empty,
.round__empty,
.tournament__empty {
	margin: 0;
	color: var(--ink-muted);
}

/* --- rounds ---------------------------------------------------------------
   A round is a grid row: [badge | cards]. The badge sticks while the cards
   scroll past, so a round with two rows of cards never loses its number. */

.schedule__rounds {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.round {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.round__badge {
	position: sticky;
	top: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem 0.75rem 1.1rem;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--on-navy);
	text-align: center;
}

.round__name {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	font-weight: var(--weight-strong);
	line-height: 1;
}

.round__kicker {
	color: var(--on-navy-muted);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.round__number {
	margin-top: 0.15rem;
	font-size: 3.4rem;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.round__name--titled {
	font-size: 1.3rem;
	letter-spacing: 0.05em;
	line-height: 1.15;
	text-transform: uppercase;
}

.round__window {
	margin: 0.6rem 0 0;
	color: var(--on-navy-muted);
	font-size: 0.85rem;
	line-height: 1.35;
}

.round__window--confirmed {
	color: #fff;
	font-weight: var(--weight-strong);
}

.round--no-standings .round__badge {
	background: var(--red);
}

.round--no-standings .round__kicker,
.round--no-standings .round__window {
	color: rgba(255, 255, 255, 0.82);
}

.round__empty {
	align-self: center;
}

.round__tournaments {
	display: grid;
	/* auto-fit, not auto-fill: a round with one or two tournaments stretches its
	   cards instead of leaving empty tracks. 19rem is the narrowest a card goes
	   before club names break. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- tournament card ------------------------------------------------------  */

.tournament {
	display: flex;
	flex-direction: column;
	/* A grid item defaults to min-width:auto; without 0 a long club name could
	   widen the card past its column. */
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
}

.tournament__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--navy);
	color: var(--on-navy);
}

.tournament__title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.tournament__date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	margin: 0;
	padding: 0.65rem 0.85rem 0;
	font-size: 0.95rem;
	line-height: 1.35;
}

.tournament__date-text {
	color: var(--navy);
	font-weight: var(--weight-strong);
}

.tournament__note {
	margin: 0.4rem 0 0;
	padding: 0 0.85rem;
	color: var(--ink-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}

.tournament__empty {
	padding: 0.65rem 0.85rem 0.9rem;
	font-size: 0.9rem;
}

.tournament__teams {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0.7rem 0.85rem 0.9rem;
	list-style: none;
}

.tournament__team {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--navy);
	font-weight: var(--weight-strong);
	line-height: 1.25;
}

.tournament__team-name {
	min-width: 0;
}

/* Tentative steps the whole card back - dashed border, greyed strip, muted
   text - so a parent sees at a glance which days are settled. */
.tournament--tentative {
	border-style: dashed;
	border-color: #c3cad6;
	background: #f7f8fa;
	color: var(--ink-muted);
}

.tournament--tentative .tournament__head {
	background: #4d5a73;
	color: rgba(255, 255, 255, 0.88);
}

.tournament--tentative .tournament__date-text {
	color: var(--ink-muted);
	font-weight: 400;
}

.tournament--tentative .tournament__team,
.tournament--tentative .game__team-name {
	color: var(--ink-muted);
}

.tournament--tentative .team-logo__img {
	opacity: 0.7;
}

/* --- club logos -----------------------------------------------------------  */

.team-logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	/* Inline in a table cell it would otherwise sit on the baseline and ride
	   above the club name beside it. */
	vertical-align: middle;
}

.team-logo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.team-logo--placeholder {
	border: 1px solid var(--line);
	color: var(--navy);
	font-size: 0.62rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
}

.tournament__head .team-logo {
	width: 28px;
	height: 28px;
}

.game .team-logo {
	width: 22px;
	height: 22px;
}

/* --- games ----------------------------------------------------------------
   time | home | score | away, the sides mirrored around the score as on a
   scoreboard. The team tracks are minmax(0, 1fr) so a long club name wraps
   inside its track instead of pushing the score aside. */

.tournament__games {
	display: flex;
	flex-direction: column;
	margin: 0.55rem 0 0;
	padding: 0 0.5rem 0.55rem;
	list-style: none;
}

.game {
	display: grid;
	/* Every row is its own grid, so the tracks line up between rows only if they
	   are told a width: sized to content, a row with no time would pull the whole
	   line across. */
	grid-template-columns: 2.3rem minmax(4.5rem, 1fr) 3.2rem minmax(4.5rem, 1fr);
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.25rem;
	border-top: 1px solid var(--line);
	font-size: 0.86rem;
	line-height: 1.25;
}

.game:first-child {
	border-top: 0;
}

.game__time {
	color: var(--ink-muted);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.game__time-unset {
	color: #b6bdca;
}

.game__team {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.game__team--home {
	flex-direction: row-reverse;
	justify-content: flex-start;
	text-align: right;
}

.game__team-name {
	min-width: 0;
	color: var(--navy);
	font-weight: var(--weight-strong);
	/* Short names are single words: never split one mid-word. What still does not
	   fit is clipped, and the full name is in the title attribute. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.game__score,
.game__versus {
	min-width: 2.5rem;
	color: #98a1b3;
	font-size: 0.95rem;
	font-weight: var(--weight-strong);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
}

.game--played .game__score {
	color: var(--navy);
	font-size: 1.05rem;
}

/* --- team sheets ----------------------------------------------------------
   One card per team, laid out like the tournament cards. The players are a
   two-column grid: numbers in a fixed column, names beside them. */

.rosters__teams {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	/* Sheets differ wildly in length, so each card keeps its own height instead
	   of being stretched to the tallest in its row. */
	align-items: start;
	gap: 1rem;
}

.sheet {
	display: flex;
	flex-direction: column;
	/* A grid item defaults to min-width:auto; without 0 a long club name could
	   widen the card past its column. */
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
}

.sheet__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--navy);
	color: var(--on-navy);
}

.sheet__head .team-logo {
	width: 28px;
	height: 28px;
}

.sheet__name {
	margin: 0;
	font-size: 0.92rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.sheet__empty {
	margin: 0;
	padding: 0.75rem 0.85rem;
	font-size: 0.9rem;
	font-style: italic;
}

.sheet__players {
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
}

.player {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 0.5rem;
	padding: 0.3rem 0.85rem;
}

.player + .player {
	border-top: 1px solid var(--line);
}

.player__number {
	color: var(--ink-muted);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-strong);
	text-align: right;
}

.player__name {
	overflow-wrap: break-word;
	color: inherit;
	text-decoration: none;
}

.player__name:hover,
.player__name:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

.player__post {
	color: var(--red);
	font-size: 0.7rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.player--goalie .player__name {
	font-weight: var(--weight-strong);
}

/* --- standings ------------------------------------------------------------
   A real table. It scrolls inside its own box on a phone rather than
   shrinking the numbers past reading. */

.standings__scroll {
	overflow-x: auto;
}

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

.table-standings th,
.table-standings td {
	padding: 0.5rem 0.4rem;
	border-bottom: 1px solid var(--line);
	text-align: center;
	white-space: nowrap;
}

.table-standings thead th {
	border-bottom: 2px solid var(--navy);
	color: var(--navy);
	font-size: 0.8rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.04em;
}

.table-standings tbody tr:hover {
	background: var(--surface-alt);
}

.col-rank {
	width: 3ch;
	color: var(--ink-muted);
}

/* Scoped to the table: ".table-standings th" is more specific than a bare
   class, so an unqualified rule here loses to the centred default above. */
.table-standings .col-team {
	text-align: left;
	white-space: normal;
}

.table-standings tbody .col-team {
	font-weight: var(--weight-strong);
}

.table-standings .col-rank {
	text-align: right;
}

.col-team__name,
.col-team__short {
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* One of the two club names is always hidden, so the cell never shows the
   club twice. */
.col-team__short {
	display: none;
}

.col-num {
	width: 4ch;
}

.col-points {
	color: var(--navy);
	font-weight: var(--weight-strong);
}

.table-standings thead .col-points {
	border-bottom-color: var(--red);
}

.col-diff {
	color: var(--ink-muted);
}

.is-unplayed {
	color: var(--ink-muted);
}

.standings__note {
	margin: 1rem 0 0;
	color: var(--ink-muted);
	font-size: 0.9rem;
}

/* --- statistics -----------------------------------------------------------
   The scoring and team tables are the standings table with different columns,
   so they reuse it whole. The team filter is a row of links, not a control:
   the choice is in the URL and nothing depends on a script. Filter and sort
   share one address - a column keeps the team, the filter keeps the column. */

.team-filter {
	margin: 0 0 1.25rem;
}

.team-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.team-filter__item a,
.team-filter__item strong {
	display: block;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.3;
	white-space: nowrap;
}

.team-filter__item a {
	color: var(--ink-muted);
	text-decoration: none;
}

.team-filter__item a:hover,
.team-filter__item a:focus-visible {
	border-color: var(--navy);
	color: var(--navy);
}

.team-filter__item--current strong {
	border-color: var(--navy);
	background: var(--navy);
	color: var(--on-navy);
	font-weight: var(--weight-strong);
}

.table-standings .col-player {
	text-align: left;
	white-space: normal;
}

.table-standings tbody .col-player {
	font-weight: var(--weight-strong);
}

/* A column of blue underlines down a table of numbers would read as a list of
   places to go rather than as the table it is, so a name is the ink of its
   row until the pointer is on it. */
.table-standings .col-player a {
	color: inherit;
	text-decoration: none;
}

.table-standings .col-player a:hover,
.table-standings .col-player a:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

.col-player__year {
	margin-left: 0.5rem;
	color: var(--ink-muted);
	font-size: 0.8rem;
	font-weight: 400;
}

.col-player__post {
	margin-left: 0.5rem;
	color: var(--red);
	font-size: 0.7rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.col-per {
	width: 5.5ch;
	color: var(--ink-muted);
}

.table-standings .col-scorer {
	width: 1%;
	text-align: left;
	font-size: 0.85rem;
	color: var(--ink-muted);
}

/* The head row is the sort: every label is a link to the table in that column
   order, and has to look like a heading until the pointer is on it. */
.col-sort {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
	color: inherit;
	text-decoration: none;
}

.col-sort:hover,
.col-sort:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

.table-standings thead .is-sorted {
	border-bottom-color: var(--red);
	color: var(--red);
}

/* The triangle is in the markup, not in CSS content, so it survives a printed
   page. */
.col-sort__arrow {
	font-size: 0.7em;
	line-height: 1;
}

.scoring__note,
.team-stats__note {
	margin: 1rem 0 0;
	max-width: var(--measure);
	color: var(--ink-muted);
	font-size: 0.9rem;
}

/* --- player page ----------------------------------------------------------
   A child page carries what a team sheet carries and nothing more. */

.player-page__subtitle {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.player-teams {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.player-team {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.7rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
}

.player-team--current {
	border-color: var(--navy);
}

.player-team__name {
	font-weight: var(--weight-strong);
}

.player-team__name a {
	color: inherit;
	text-decoration: none;
}

.player-team__name a:hover,
.player-team__name a:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

.player-team__where {
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.player-team__number {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-strong);
}

.player-team__post--past {
	color: var(--ink-muted);
}

.player-team__post {
	color: var(--red);
	font-size: 0.7rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.player-team__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.9rem;
	width: 100%;
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

.player-stat abbr {
	color: var(--ink-muted);
	font-size: 0.8rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.player-totals {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.7rem;
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.player-totals .player-team__stats {
	width: auto;
	color: var(--ink);
}

/* --- game sheet -----------------------------------------------------------
   The score in the schedule and the results strip links here, so it is drawn
   as a link. The page puts the result at the top and the two sides under it. */

.game__sheet {
	color: inherit;
	text-decoration-color: var(--line);
	text-underline-offset: 0.2em;
}

.game__sheet:hover,
.game__sheet:focus-visible {
	color: var(--red);
	text-decoration-color: currentcolor;
}

.result-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	margin: 0 0 0.25rem;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
}

.result-line__side {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	flex: 1 1 12rem;
}

.result-line__side--away {
	flex-direction: row-reverse;
	text-align: right;
}

.result-line__team {
	font-weight: var(--weight-strong);
}

/* One of the two club names is always hidden; which one depends on how much
   room the line has. */
.result-line__short {
	display: none;
}

.result-line__score {
	font-size: clamp(1.8rem, 6vw, 2.6rem);
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-strong);
	line-height: 1;
	color: var(--navy);
	white-space: nowrap;
}

.result-line__colon {
	margin-inline: 0.15em;
	color: var(--ink-muted);
}

/* On a phone the three parts become a scoreboard. The two sides are given the
   same width (flex: 1 1 0) rather than their content, so the score sits in
   the middle of the band and not wherever two names of different lengths
   leave it. The club drops to its short name, which is what fits under a crest. */
@media (max-width: 620px) {
	.result-line {
		flex-wrap: nowrap;
		gap: 0.5rem;
		padding: 1rem 0.75rem;
	}

	.result-line__side,
	.result-line__side--away {
		flex: 1 1 0;
		flex-direction: column;
		gap: 0.45rem;
		text-align: center;
	}

	.result-line__name {
		display: none;
	}

	.result-line__short {
		display: inline;
	}

	.result-line__team {
		font-size: 0.9rem;
		line-height: 1.25;
	}

	.result-line .team-logo {
		width: 44px;
		height: 44px;
	}

	.result-line .team-logo--placeholder {
		font-size: 0.85rem;
	}

	.result-line__score {
		flex: 0 0 auto;
	}
}

.result-line__note,
.game-page__note {
	margin: 0 0 1.25rem;
	text-align: center;
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.game-page__empty {
	margin: 1.5rem auto;
	max-width: var(--measure);
	color: var(--ink-muted);
}

/* Two sides side by side while there is room; stacked is the phone layout and
   the fallback. */
.gsheets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}

.gsheet {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	padding: 0.85rem 1rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
}

/* Side by side, the two sheets have to line up in rows: a visitor asks who was
   in the box of the whole game, not of one team, and the home lineup is often
   a name longer. So .gsheets lays out the six blocks the template always
   prints, each card spans all six, and a subgrid hands its children the same
   lines. Each card keeps its border and background, which display: contents
   would have cost.

   The team name comes off the card here - the score line prints both names a
   finger width above. Clipped rather than display: none, because a screen
   reader still needs it and an absolutely positioned item is skipped by
   auto-placement, so the six rows stay six.

   Without subgrid the declaration is dropped and the card falls back to a
   plain grid of its own. */
@media (min-width: 40rem) {
	.gsheets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(6, auto);
	}

	.gsheet {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.gsheet__team {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* With the name gone the card would open on a bare strip of its own
	   background; the first navy band rises through the padding instead. Named
	   through .gsheets to outrank the stacked layout margin further down. */
	.gsheets .gsheet__head:first-of-type {
		margin-top: -0.85rem;
	}
}

.gsheet__team {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

/* Written out rather than borrowed from .sheet__head, so a change to the team
   sheets cannot silently restyle this page. */
.gsheet__head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.85rem -1rem 0.5rem;
	padding: 0.45rem 1rem;
	background: var(--navy);
	color: var(--on-navy);
	font-size: 0.8rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gsheet__head:first-of-type {
	margin-top: 0.25rem;
}

.gsheet__sum {
	margin-left: auto;
	color: var(--on-navy-muted);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
}

.gsheet__none {
	margin: 0;
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.gsheet__goals,
.gsheet__penalties,
.gsheet__lineup {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsheet__goal,
.gsheet__penalty {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--line);
}

.gsheet__goal:last-child,
.gsheet__penalty:last-child {
	border-bottom: 0;
}

/* A fixed, right-aligned track so "1:00" and "30:48" put their names in the
   same column, even when half the rows have no time at all. */
.gsheet__time {
	min-width: 4.5ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
	font-size: 0.85rem;
}

.gsheet__who {
	font-weight: var(--weight-strong);
}

.gsheet__assists,
.gsheet__reason,
.gsheet__length,
.gsheet__note {
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.gsheet__unknown {
	color: var(--ink-muted);
}

/* Every name on the sheet is a link, which left unstyled is browser blue and
   then purple - three colours the site does not own, on its densest text. */
.gsheet__who a,
.gsheet__assists a,
.gsheet__player a {
	color: inherit;
	text-decoration: none;
}

.gsheet__who a:hover,
.gsheet__assists a:hover,
.gsheet__player a:hover,
.gsheet__who a:focus-visible,
.gsheet__assists a:focus-visible,
.gsheet__player a:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

/* Packed to the top: both sheets share a row now, so the shorter lineup sits
   in a box sized for the longer one and would otherwise space itself out. */
.gsheet__lineup {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	align-content: start;
	gap: 0.1rem 0.75rem;
}

.gsheet__player {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	min-width: 0;
	font-size: 0.92rem;
}

.gsheet__number {
	min-width: 2.2ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
	font-size: 0.85rem;
}

.gsheet__post {
	color: var(--red);
	font-size: 0.7rem;
	font-weight: var(--weight-strong);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gsheet__player--goalie a {
	font-weight: var(--weight-strong);
}

.game-page__back {
	margin: 1.5rem 0 0;
	font-size: 0.9rem;
}

.game-page__back a {
	color: var(--red);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.game-page__back a:hover,
.game-page__back a:focus-visible {
	text-decoration: underline;
}

/* --- calendar subscription -------------------------------------------------
   Not a table of anything: a page of instructions, read top to bottom once and
   then never again. Hence the numbered steps, one row of buttons wide enough
   for a thumb, and the by-hand instructions folded into <details> so the page
   stays short for everyone the buttons worked for. */

.calendar-lead {
	margin: 1rem 0 0;
	max-width: var(--measure);
	font-size: 1.05rem;
}

.calendar-step {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 1px solid var(--line);
}

.calendar-step__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
	font-size: 1.3rem;
}

/* Tabular figures and a fixed size, so 1, 2 and 3 are the same circle. */
.calendar-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: var(--navy);
	color: var(--on-navy);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.calendar-step__lead {
	margin: 0 0 1rem;
	max-width: var(--measure);
	color: var(--ink-muted);
}

.calendar-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.calendar-button {
	display: block;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	color: var(--navy);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

/* The two that cover almost every phone: filled, so the choice is between them
   and the rest is for the people who know they need it. */
.calendar-button--main {
	background: var(--navy);
	color: var(--on-navy);
}

.calendar-button:hover,
.calendar-button:focus-visible {
	border-color: var(--red);
	background: var(--red);
	color: #fff;
}

.calendar-button__note {
	font-weight: 400;
	opacity: 0.8;
}

.calendar-address__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--ink-muted);
	font-size: 0.9rem;
}

.calendar-address__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The address is long and nobody reads it; what matters is that it can be
   selected in one gesture, hence the whole field being one. */
.calendar-address__input {
	flex: 1 1 18rem;
	min-width: 0;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.95rem;
}

.calendar-address__copy {
	padding: 0.6rem 1rem;
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	background: none;
	color: var(--navy);
	font: inherit;
	font-weight: var(--weight-strong);
	cursor: pointer;
}

.calendar-address__copy:hover,
.calendar-address__copy:focus-visible {
	background: var(--navy);
	color: var(--on-navy);
}

.calendar-address__copy.is-done {
	border-color: var(--red);
	background: var(--red);
	color: #fff;
}

.calendar-how {
	margin-top: 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.calendar-how__summary {
	padding: 0.7rem 0.9rem;
	color: var(--navy);
	font-weight: var(--weight-strong);
	cursor: pointer;
}

.calendar-how__body {
	padding: 0 0.9rem 0.3rem;
	max-width: var(--measure);
}

.calendar-how__body ol {
	padding-left: 1.2rem;
}

.calendar-how__body li {
	margin-bottom: 0.4rem;
}

.calendar-preview {
	margin: 0;
	padding: 0;
	max-width: var(--measure);
	list-style: none;
}

.calendar-preview__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.8rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--line);
}

.calendar-preview__day {
	flex: 0 0 11rem;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* The same distinction the schedule makes with a dashed card: a date nobody has
   confirmed is printed in the grey the rest of the unconfirmed is printed in. */
.calendar-preview__item--tentative .calendar-preview__summary {
	color: var(--ink-muted);
}

.calendar-notes {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 1px solid var(--line);
}

.calendar-notes__list {
	margin: 0;
	padding-left: 1.2rem;
	max-width: var(--measure);
	color: var(--ink-muted);
}

.calendar-notes__list li {
	margin-bottom: 0.5rem;
}

.calendar-notes__back {
	margin: 1.5rem 0 0;
	font-size: 0.9rem;
}

.calendar-notes__back a {
	color: var(--red);
	font-weight: var(--weight-strong);
	text-decoration: none;
}

.calendar-notes__back a:hover,
.calendar-notes__back a:focus-visible {
	text-decoration: underline;
}

/* --- narrow screens -------------------------------------------------------
   The band stacks: the badge becomes a strip over the cards, cards fall to one
   column via auto-fill, game rows keep the three columns in smaller type. */

@media (max-width: 720px) {
	/* The label is what does not fit beside the kicker, so it goes — hidden the way
	   the rest of the site hides text, not with display:none, because a link whose
	   only content is a decorative glyph has nothing left for a screen reader to
	   announce. The title attribute explains it to everyone else. */
	.page-head__calendar-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* A target a thumb can hit, once the words beside it are gone: the glyph grows a
	   little and the padding around it does the rest. */
	.page-head__calendar {
		padding: 0.4rem;
		margin: -0.4rem;
	}

	.page-head__calendar-icon {
		width: 18px;
		height: 18px;
	}

	/* And it stays beside the kicker rather than wrapping under it: the kicker needs
	   two lines at this width, and a lone glyph on a third line above the title reads
	   as something left over. nowrap plus a shrinkable kicker keeps the icon at the
	   right end of the first line, which is where it was on the wide screen. */
	.page-head__row {
		flex-wrap: nowrap;
		gap: 0.6rem;
	}

	.page-head__row .page-head__kicker {
		min-width: 0;
	}

	/* The day and what happens on it stop being two columns and become two lines. */
	.calendar-preview__day {
		flex-basis: 100%;
	}

	.col-team__name {
		display: none;
	}

	.col-team__short {
		display: inline;
	}

	/* And then nothing in the table wraps: the name column is the one the reader
	   tracks along, and a row three lines tall pushes the numbers it is compared
	   with out of the eye. The table already scrolls sideways inside its own box. */
	.table-standings .col-team,
	.table-standings .col-player {
		white-space: nowrap;
	}

	.table-standings th,
	.table-standings td {
		padding: 0.45rem 0.3rem;
	}

	.table-team-stats .col-scorer {
		display: none;
	}

	/* Filtered to one club, the team column repeats that club in every row - and
	   the club is already in the title, the filter and the address. The unfiltered
	   table keeps the column. */
	.table-scoring--one-team .col-team {
		display: none;
	}

	.team-filter__item a,
	.team-filter__item strong {
		padding: 0.25rem 0.6rem;
		font-size: 0.8rem;
	}

	.round {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.round__badge {
		/* Static on phones: a sticky strip would cover too much of the screen. */
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.25rem 0.75rem;
		padding: 0.55rem 0.9rem;
		text-align: left;
	}

	.round__name {
		flex-direction: row;
		align-items: baseline;
		gap: 0.5rem;
	}

	.round__number {
		margin-top: 0;
		font-size: 2rem;
	}

	.round__name--titled {
		font-size: 1.15rem;
	}

	.round__window {
		margin: 0 0 0 auto;
	}
}

@media (max-width: 420px) {
	.game {
		grid-template-columns: 2.1rem minmax(0, 1fr) 3.2rem minmax(0, 1fr);
		gap: 0.3rem;
		padding-inline: 0.15rem;
		font-size: 0.82rem;
	}

	.game__score,
	.game__versus {
		min-width: 2.5rem;
	}

	.game .team-logo {
		width: 20px;
		height: 20px;
	}

	.tournament__title {
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   Print
   ==========================================================================
   Browsers drop background colours when printing: flip to dark-on-white and
   drop the navigation furniture. */

@media print {
	body {
		display: block;
		background: #fff;
		color: var(--navy);
	}

	.site-header,
	.site-nav,
	.breadcrumbs,
	.rubric-nav,
	.pager,
	.article-detail__back,
	.site-footer {
		display: none;
	}

	.site-main {
		margin: 0;
		padding: 0;
		max-width: none;
		border-radius: 0;
	}

	.article-hero,
	.article-card {
		border: 1px solid rgba(4, 19, 43, 0.4);
		background: none;
		color: var(--navy);
	}

	.article-hero__date,
	.article-hero__teaser {
		color: var(--navy);
	}

	.article-hero__rubric {
		background: none;
		color: var(--red);
	}

	.contact-table__head {
		background: none;
		color: var(--navy);
		border-bottom: 2px solid var(--navy);
	}

	.contact-table-wrap {
		overflow: visible;
	}

	.category::before {
		background: var(--navy);
	}

	.category + .category {
		border-color: rgba(4, 19, 43, 0.4);
	}

	/* The navy badge and the card strips become outlines, since printers drop
	   backgrounds anyway. */
	.round,
	.tournament {
		break-inside: avoid;
	}

	.round__badge,
	.tournament__head {
		background: none;
		color: var(--navy);
	}

	.round__badge {
		border: 1px solid var(--navy);
	}

	.round--no-standings .round__badge {
		border-color: var(--red);
		color: var(--red);
	}

	.round__kicker,
	.round__window,
	.round--no-standings .round__kicker,
	.round--no-standings .round__window {
		color: inherit;
	}

	.tournament,
	.tournament--tentative {
		border: 1px solid rgba(4, 19, 43, 0.4);
		background: none;
	}

	.tournament--tentative {
		border-style: dashed;
	}

	.tournament__head {
		border-bottom: 1px solid var(--navy);
	}

	.page-head__stat {
		background: none;
	}

	/* The chosen team is white on navy on screen. A printer drops the navy and
	   keeps the white, which would print it in invisible ink. */
	.team-filter__item--current strong {
		background: none;
		border-color: var(--navy);
		color: var(--navy);
		font-weight: var(--weight-strong);
	}

	.col-sort {
		color: var(--navy);
		text-decoration: none;
	}

	.table-standings thead .is-sorted,
	.table-standings thead .is-sorted .col-sort {
		color: var(--red);
	}
}