/* Homepage layout. Components and tokens come from site.css / tokens.css. */

/* ---------- Hero: dark stage, the tagline (its red panel comes up on hover), copy beside the three screens, a little under one viewport tall ---------- */
/* The stage lights up on load: the deck's red corner glow (the same gradient as
   .section--deep) grows out of the bottom-right corner and brightens. Then it
   breathes, slowly, for as long as the hero is on screen (owner, 2026-10-27):
   dims a little and draws back toward the corner, 9s a breath. Opacity and
   transform only, on one layer behind the content; paused off screen (app.js). */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--fr-black-0);
	display: grid;
	align-content: center;
	/* 84svh, not 100: with the hero down to a tagline and a button, a full
	   viewport left ~180px of black above and below (owner: reduce the gap) */
	min-height: calc(84svh - var(--nav-h));
	padding: clamp(40px, 5vw, 72px) 0;
	/* 3D screens project past their box; clip so they never widen the page */
	overflow-x: clip;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(55% 65% at 100% 100%, var(--fr-glow-dark), transparent 72%);
	transform-origin: 100% 100%;
	animation:
		hero-light-up 2.2s var(--ease) 0.15s both,
		hero-glow-breathe 4.5s ease-in-out 2.35s infinite alternate;
	pointer-events: none;
}
.hero.is-offscreen::before {
	animation-play-state: paused;
}
@keyframes hero-light-up {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	45% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
/* starts where the light-up ends, so the hand-over doesn't jump */
@keyframes hero-glow-breathe {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0.55;
		transform: scale(0.9);
	}
}
.matchday {
	overflow-x: clip;
}
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-7);
	align-items: center;
}
/* The tagline (owner, 2026-10-27): plain on the dark stage at rest, white
   headline and a keyword-red claim. On hover its panel fades in behind it, in
   the site's red (the buttons' red), and turns toward the pointer like the
   screens (js/depth.js); the claim goes to ink so it reads on the red. The
   panel is shifted left by its own padding, so at rest the words line up with
   the eyebrow and copy, and its inner width is what it was as an always-on
   panel. Its own perspective(), since nothing around it is 3D. Touch screens
   never show the panel. */
.hero__tag {
	--tag-pad-x: clamp(20px, 2.4vw, 36px);
	--tag-pad-y: clamp(16px, 1.8vw, 24px);
	position: relative;
	margin: var(--s-4) var(--tag-pad-x) var(--s-4) calc(-1 * var(--tag-pad-x));
	padding: var(--tag-pad-y) var(--tag-pad-x) calc(var(--tag-pad-y) + 4px);
	border-radius: var(--r-panel);
	transform: perspective(var(--persp)) var(--card-t);
	transition:
		background-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.hero__tag:hover {
		background-color: var(--fr-btn);
		box-shadow: var(--shadow-depth);
	}
	.hero__tag:hover .hl {
		color: var(--fr-ink-on-coral);
	}
}
/* the headline rides a touch further than the panel, like a card's label */
.hero__tag[data-hover] .hero__title {
	translate: calc(var(--card-px) * var(--hover-inner-shift)) calc(var(--card-py) * var(--hover-inner-shift));
}
.hero__title {
	margin: var(--s-5) 0 var(--s-5);
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.hero__tag .hero__title {
	margin: 0;
	/* sized so "<30 seconds" holds one line inside the panel */
	font-size: clamp(2.375rem, 1.3rem + 3.5vw, 4.5rem);
	line-height: 1;
	color: #ffffff;
}
.hero__tag .hl {
	color: var(--fr-tally);
	transition: color var(--dur) var(--ease);
}
/* the claim sits on its own line under "From Live to Social" */
.hero__claim {
	display: block;
	white-space: nowrap;
}
.hero__sub {
	font-size: var(--t-h3);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.hero__copy .lead {
	font-size: 1.125rem;
	max-width: 32em;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-5);
	margin-top: var(--s-6);
}
/* the screens never outgrow the first screen: height is about 0.6 x width */
.hero__visual {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: max(320px, calc((100svh - var(--nav-h) - 180px) / 0.62));
	justify-self: end;
}

.hero__meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s-4);
	margin-top: var(--s-2);
	color: var(--fr-text-3);
}
.hero__toggle {
	flex: none;
}

/* ---------- 02 Wall: a curved 3D multiviewer that settles flat as you scroll ---------- */
.wallsec {
	overflow: hidden;
	/* recorded matches follows on the same black, so a short gap */
	padding-bottom: var(--s-8);
}
.wall {
	perspective: var(--persp);
	perspective-origin: 50% 20%;
	padding: 0 var(--gutter);
	--wall-rx: 20deg;
	--wall-s: 0.92;
}
.wall__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 1400px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform-origin: 50% 0;
	transform: rotateX(var(--wall-rx)) scale(var(--wall-s));
}
.wall__tile {
	margin: 0;
	aspect-ratio: 16 / 9;
	box-shadow: var(--shadow-depth);
}
/* outer columns swing toward the viewer around their inner edge: a concave wall */
/* the card turn (--card-t, hover) is wrapped in half-width shifts so it pivots
   on the tile's own centre, not on the edge the tile swings from */
.wall__tile:nth-child(4n + 1) {
	transform-origin: right center;
	transform: rotateY(16deg) translateX(-50%) var(--card-t) translateX(50%);
}
.wall__tile:nth-child(4n + 2) {
	transform-origin: right center;
	transform: rotateY(5deg) translateX(-50%) var(--card-t) translateX(50%);
}
.wall__tile:nth-child(4n + 3) {
	transform-origin: left center;
	transform: rotateY(-5deg) translateX(50%) var(--card-t) translateX(-50%);
}
.wall__tile:nth-child(4n) {
	transform-origin: left center;
	transform: rotateY(-16deg) translateX(50%) var(--card-t) translateX(-50%);
}
.wall__tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: var(--r-chip);
	background: #ffffff;
	color: var(--fr-ink-1);
	font-family: var(--font-label);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}
.wall__tag--goal {
	background: var(--fr-tally-deep);
	color: #ffffff;
}
.wall__tag--goal .tally-dot,
.wall__tag--goal .tally-dot::after {
	background: #ffffff;
	border-color: #ffffff;
}
.wall__tag--cam {
	background: rgba(8, 9, 10, 0.82);
	color: var(--fr-text-1);
	border-left-color: transparent;
}
.wall.is-live .wall__tag {
	opacity: 1;
	transform: none;
}
.wall.is-live .wall__tile:nth-child(2) .wall__tag {
	transition-delay: 300ms;
}
.wall.is-live .wall__tile:nth-child(3) .wall__tag {
	transition-delay: 700ms;
}
.wall.is-live .wall__tile:nth-child(5) .wall__tag {
	transition-delay: 1000ms;
}
.wall.is-live .wall__tile:nth-child(6) .wall__tag {
	transition-delay: 1300ms;
}
.wall.is-live .wall__tile:nth-child(7) .wall__tag {
	transition-delay: 1600ms;
}
.wall__note {
	margin: var(--s-6) 0 0;
	color: var(--fr-text-3);
}

/* ---------- 04 Match day: 3D pitch + match log ---------- */
.matchday__grid {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
	gap: var(--s-7);
	align-items: start;
	margin-bottom: var(--s-8);
}
.pitch-stage {
	position: relative;
	aspect-ratio: 16 / 8.4;
	perspective: var(--persp);
	perspective-origin: 50% 0%;
	--pitch-rx: 56deg;
}
.pitch {
	position: absolute;
	left: 7%;
	right: 7%;
	top: 8%;
	aspect-ratio: 105 / 68;
	transform-style: preserve-3d;
	transform-origin: 50% 40%;
	transform: rotateX(calc(var(--pitch-rx) + var(--tilt-x))) rotateZ(calc(var(--tilt-y) * -1));
	transition: transform var(--dur-slow) var(--ease);
	/* mown stripes in two studio blacks; the pitch stays monochrome, like a telestrator */
	background: repeating-linear-gradient(
		90deg,
		var(--fr-black-2) 0,
		var(--fr-black-2) 9.0909%,
		var(--fr-black-1) 9.0909%,
		var(--fr-black-1) 18.1818%
	);
	box-shadow: var(--shadow-depth);
}
/* the pitch has a thickness: a front face folded down from its near edge */
.pitch::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 18px;
	background: var(--fr-black-0);
	border-top: 1px solid var(--fr-line-strong);
	transform-origin: top center;
	transform: rotateX(-90deg);
}
.pitch__lines,
.pitch__trail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.pitch__lines {
	fill: none;
	stroke: rgba(243, 243, 241, 0.4);
	stroke-width: 3;
}
.pitch__lines .dot {
	fill: rgba(243, 243, 241, 0.5);
	stroke: none;
}
.pitch__lines .goal {
	stroke: rgba(243, 243, 241, 0.7);
}
.pitch__trail path {
	fill: none;
	stroke: var(--fr-text-1);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: var(--trail-len, 700);
	stroke-dashoffset: var(--trail-len, 700);
	transition: stroke-dashoffset 1.4s var(--ease);
}
.pitch.is-goal .pitch__trail path {
	stroke-dashoffset: 0;
}

/* Pins stand up off the pitch: .pin__up undoes the pitch tilt so the flag faces the camera */
.pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}
.pin__base {
	position: absolute;
	left: -9px;
	top: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--fr-text-2);
	opacity: 0;
	transform: scale(0.3);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}
.pin__up {
	position: absolute;
	left: 0;
	bottom: 0;
	transform-origin: bottom center;
	transform: rotateX(calc((var(--pitch-rx) + var(--tilt-x)) * -1));
	transform-style: preserve-3d;
}
.pin__grow {
	--fx: -50%; /* horizontal anchor of the flag over its stem */
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(var(--fx)) scaleY(0);
	transform-origin: bottom center;
	transition: transform 420ms var(--ease);
}
.pin__flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 4px 8px 3px;
	background: var(--fr-paper);
	color: var(--fr-ink-1);
	font-family: var(--font-label);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.6);
}
.pin__stem {
	width: 1px;
	height: 48px;
	background: var(--fr-text-2);
}
.pin.is-on .pin__base {
	opacity: 1;
	transform: none;
}
.pin.is-on .pin__grow {
	transform: translateX(var(--fx)) scaleY(1);
}
.pin--goal .pin__flag {
	background: var(--fr-tally);
	color: var(--fr-tally-ink);
}
.pin--goal .pin__flag .tally-dot {
	background: var(--fr-tally-ink);
}
.pin--goal .pin__flag .tally-dot::after {
	border-color: var(--fr-tally-ink);
}
.pin--goal .pin__base {
	border-color: var(--fr-tally);
}
.pin--goal .pin__stem {
	height: 72px;
	background: var(--fr-tally);
}

/* Match clock under the pitch */
.clock {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-5);
}
.clock__min {
	color: var(--fr-text-1);
	font-size: var(--t-small);
}
.clock__bar {
	position: relative;
	height: 2px;
	background: var(--fr-line-strong);
}
.clock__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--fr-text-1);
}
.clock__tick {
	position: absolute;
	left: var(--at);
	top: -5px;
	width: 1px;
	height: 12px;
	background: var(--fr-text-3);
}
.clock__tick--goal {
	background: var(--fr-tally);
}

/* Match log */
.log {
	border-top: 1px solid var(--fr-line-strong);
}
.log__head {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: var(--s-3) 0;
	color: var(--fr-text-3);
	border-bottom: 1px solid var(--fr-line);
}
.log__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.log__list li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--s-2);
	padding: 9px 0;
	border-bottom: 1px solid var(--fr-line);
	font-size: var(--t-small);
	color: var(--fr-text-3);
	transition: color var(--dur) var(--ease);
}
.log__list li > span:last-child {
	display: grid;
	gap: 2px;
}
.log__list em {
	font-style: normal;
	font-family: var(--font-label);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fr-text-3);
}
.log__list li.is-on {
	color: var(--fr-text-1);
}
.log__list li.is-goal.is-on {
	font-weight: 600;
}
.log__list li.is-goal.is-on em {
	color: var(--fr-text-2);
}

/* ---------- Trusted by: light sheet, heading + category line over the logo strip ---------- */
.trusted {
	padding: clamp(56px, 6vw, 88px) 0;
}
.trusted__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4) var(--s-7);
	margin-bottom: var(--s-6);
}

/* ---------- 03 Recorded: follows the wall on the same black, so no second band of padding ---------- */
.wallsec + #recorded {
	padding-top: 0;
}
#recorded .feature__grid {
	align-items: start;
}

/* ---------- 02b More sports: the phones arc under the wall ---------- */
.more-sports {
	margin-top: var(--s-9);
}
.more-sports__head {
	display: grid;
	justify-items: start;
	gap: var(--s-4);
	max-width: 720px;
	margin-bottom: var(--s-6);
}
.more-sports__head .body-2 {
	max-width: 36em;
}

/* ---------- 05 Live: copy beside the Sherpa scene, scene gets the wider column ---------- */
.feature--sherpa .feature__grid {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* ---------- 08 Who: titles link to the category pages ---------- */
.who__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--fr-line-strong);
	transition: border-color var(--dur-fast) var(--ease);
}
.who__link:hover {
	border-color: var(--fr-text-1);
}

/* ---------- Feature rows ---------- */
/* even split: keeps feature body text at ~60 characters a line */
.feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: center;
}
.feature--flip .feature__copy {
	order: 2;
}
.feature__lede {
	margin: var(--s-5) 0 var(--s-6);
	max-width: 36em; /* ≈70 characters at 16px */
}
.facts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fr-line);
}
.facts li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--fr-line);
	font-size: 0.9375rem;
}
.feature__media {
	margin: 0;
}
.feature__media--sherpa {
	aspect-ratio: 1600 / 1312;
}

/* Key moments panel (illustration) */
.moments {
	background: var(--fr-black-2);
	border: 1px solid var(--fr-line);
	border-radius: var(--r-panel);
	padding: var(--s-5);
}
.moments__head {
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	padding-bottom: var(--s-4);
	margin-bottom: var(--s-3);
	border-bottom: 1px solid var(--fr-line);
	color: var(--fr-text-2);
}
.moments__head > span:first-child {
	white-space: nowrap;
}
.moments__count {
	color: var(--fr-text-3);
	text-align: right;
}
.moments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-1);
}
.moment {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	gap: var(--s-4);
	align-items: center;
	padding: var(--s-3);
	border: 1px solid transparent;
	border-radius: var(--r-card);
}
.moment.is-active {
	background: var(--fr-black-3);
	border-color: var(--fr-line-strong);
}
.moment img,
.moment video {
	width: 120px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-frame);
	background: var(--fr-black-0);
}
.moment__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.moment__tc {
	color: var(--fr-text-3);
}
.moment__title {
	font-weight: 600;
	line-height: 1.3;
}
.moment__fmt {
	color: var(--fr-text-3);
	white-space: nowrap;
}

/* Signal-flow panel */
.router {
	background: var(--fr-black-1);
	border: 1px solid var(--fr-line);
	border-radius: var(--r-panel);
	padding: var(--s-6);
}
.router__in {
	display: grid;
	justify-items: start;
	gap: var(--s-2);
	padding-bottom: var(--s-5);
}
.router__name {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	font-weight: var(--display-weight);
	font-size: var(--t-h3);
	letter-spacing: -0.015em;
}
.router__spec {
	color: var(--fr-text-3);
}
.router__outs {
	list-style: none;
	margin: 0 0 0 12px;
	padding: 0;
	border-left: 1px solid var(--fr-line-strong);
}
.router__outs li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-3) 0 var(--s-3) var(--s-7);
	border-bottom: 1px solid var(--fr-line);
}
.router__outs li:last-child {
	border-bottom: 0;
}
.router__outs li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 28px;
	height: 1px;
	background: var(--fr-line-strong);
}
.router__outs li::after {
	content: '';
	position: absolute;
	left: 28px;
	top: calc(50% - 2.5px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--fr-text-2);
}
.router__outs .mono {
	color: var(--fr-text-3);
}

/* ---------- 06 Sports ---------- */
.sports__more {
	margin: var(--s-7) 0 0;
}

/* ---------- 07 Who ---------- */
.who__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-6);
}
.who__list li {
	border-top: 1px solid var(--fr-line-strong);
	padding-top: var(--s-5);
}
.who__list h3 {
	margin-bottom: var(--s-3);
}
.who__list .body-2 {
	font-size: 0.9375rem;
}

/* ---------- CTA: coral, like the deck's cover ---------- */
.cta__inner {
	display: grid;
	justify-items: start;
	gap: var(--s-5);
}
.cta__inner h2 {
	max-width: 14ch;
}
.cta__inner .btn {
	margin-top: var(--s-3);
}

/* ---------- Footer ---------- */
.footer {
	background: var(--fr-black-0);
	border-top: 1px solid var(--fr-line);
	padding: var(--s-8) 0 var(--s-6);
}
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--s-6);
}
.footer__brand img {
	height: 16px;
	width: auto;
	margin-bottom: var(--s-4);
}
.footer__brand .body-2 {
	font-size: var(--t-small);
}
.footer__col {
	display: grid;
	align-content: start;
	gap: var(--s-3);
}
.footer__col .mono {
	margin: 0 0 var(--s-1);
	color: var(--fr-text-3);
}
.footer__col .footer__sub {
	margin-top: var(--s-4);
}
.footer__col a {
	color: var(--fr-text-2);
	text-decoration: none;
	font-size: var(--t-small);
}
.footer__col a:hover {
	color: var(--fr-text-1);
}
.footer__base {
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--fr-line);
	color: var(--fr-text-3);
}
.footer__base a {
	color: var(--fr-text-3);
	text-decoration: none;
}
.footer__base a:hover {
	color: var(--fr-text-1);
}

@media (prefers-reduced-motion: reduce) {
	/* the stage is simply lit */
	.hero::before {
		animation: none;
	}
	.pitch,
	.pin__grow,
	.pin__base,
	.pitch__trail path,
	.wall__tag {
		transition: none;
	}
	/* depth stays, movement goes: the wall holds a gentle fixed tilt */
	.wall {
		--wall-rx: 8deg;
		--wall-s: 0.97;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.hero__grid,
	.feature__grid,
	.feature--flip .feature__grid,
	.feature--sherpa .feature__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-7);
	}
	.feature--flip .feature__copy {
		order: 0;
	}
	.who__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--s-7);
	}
	.matchday__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.log__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-5);
	}
	.footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	/* phones: four feeds in two columns, a gentler curve */
	.wall__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.wall__tile:nth-child(n + 5) {
		display: none;
	}
	.wall__tile:nth-child(odd) {
		transform-origin: right center;
		transform: rotateY(8deg) translateX(-50%) var(--card-t) translateX(50%);
	}
	.wall__tile:nth-child(even) {
		transform-origin: left center;
		transform: rotateY(-8deg) translateX(50%) var(--card-t) translateX(-50%);
	}
	.wall__tag {
		left: 6px;
		bottom: 6px;
		padding: 3px 6px;
		font-size: 9px;
	}
	.pitch-stage {
		aspect-ratio: 16 / 10;
		--pitch-rx: 50deg;
	}
	.pitch {
		left: 4%;
		right: 4%;
	}
	.pin__flag {
		font-size: 8.5px;
		padding: 2px 5px;
	}
	/* phones: pins show the minute only; the match log below names each event */
	.pin__name {
		display: none;
	}
	.pin--goal .pin__grow {
		--fx: -84%;
	}
	.pin__stem {
		height: 26px;
	}
	.pin--goal .pin__stem {
		height: 40px;
	}
	.log__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.moment {
		grid-template-columns: 88px minmax(0, 1fr);
	}
	.moment img {
		width: 88px;
	}
	.moment__fmt {
		display: none;
	}
	.moment__title {
		font-size: 0.9375rem;
	}
	.router {
		padding: var(--s-5);
	}
	.who__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer__base {
		flex-direction: column;
	}
}