/* Roguestorm Beats - the website's stylesheet.
 *
 * Every colour here is a variable from theme.css, which tools/site_build.gd
 * writes from the game's own palette (the look named in web/site.json), so
 * the page re-inks itself with the game. Nothing in this file names a colour.
 */

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

html {
	color-scheme: dark;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-x: hidden;
}

/* the manuscript ruling under everything, a hairline of blue light */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		repeating-linear-gradient(to bottom, transparent 0 95px, var(--line-faint) 95px 96px),
		radial-gradient(1200px 600px at 20% -10%, var(--violet-glow), transparent 70%),
		radial-gradient(900px 500px at 90% 110%, var(--blue-glow), transparent 70%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

p { margin: 0 0 1em; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	padding: 0.5rem 1rem; background: var(--accent); color: var(--knockout);
	font-weight: 700; border-radius: 4px;
}
.skip:focus { top: 1rem; }

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* --- the letterform ----------------------------------------------------- */
/* headings set in the game's own face arrive as SVG files (see
   tools/site/wordmark_svg.gd); the alt text carries the words */
.mark { display: block; margin: 0 0 0.6em; }
.mark img { height: clamp(34px, 2.4rem + 1.6vw, 64px); width: auto; }
.mark.center { text-align: center; }
.mark.center img { margin-inline: auto; }

/* --- header ------------------------------------------------------------- */
.top {
	position: sticky; top: 0; z-index: 50;
	background: var(--glass);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--line-soft);
}
.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.nav a {
	color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem;
	letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5rem 0.7rem;
	border-radius: 6px; opacity: 0.82;
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; background: var(--panel-soft); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
	.nav-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border: 1px solid var(--line-soft);
		background: transparent; color: var(--text); border-radius: 8px; cursor: pointer;
	}
	.nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; padding: 0.6rem 1rem 1rem;
		background: var(--panel); border-bottom: 1px solid var(--line-soft);
	}
	.nav.open { display: flex; }
	.top .cta { display: none; }
}

/* --- buttons ------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.8rem 1.5rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
	font-size: 0.95rem; text-decoration: none; color: var(--text); cursor: pointer;
	background: var(--panel); border: 1px solid var(--line-soft);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--panel-soft); color: var(--text); }
.btn.primary { background: var(--accent); color: var(--knockout); border-color: transparent; box-shadow: 0 0 24px var(--accent-glow); }
.btn.primary:hover { box-shadow: 0 0 36px var(--accent-glow); }
/* The one button the whole site is trying to get pressed. A ring of the game's
   own layer colours turns behind it, and once every six seconds the glow swells
   and falls - enough to catch an eye that has stopped scanning, not enough to
   sit there flashing.

   The ring is a background layer and not a pseudo-element, because .btn clips
   itself to a chamfer with clip-path and a clip-path clips its descendants too:
   a ring drawn around the button would simply be cut off. Painting the conic
   gradient to the border-box and the fill to the padding-box keeps the chamfer
   and colours its edge. The padding gives back the pixel the wider border takes,
   so the button still measures what the ones beside it measure.

   Both animations are six seconds, so the swell lands as the ring comes round.
   The reduced-motion rule at the top of this file stops both; the border stays
   colourful, it just stops turning. */
@property --spin {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
@keyframes hot-spin { to { --spin: 360deg; } }
/* Flat for most of the cycle, then one quick swell and a slower fall. filter
   applies after the clip-path, so the glow takes the chamfer's own shape. */
@keyframes hot-surge {
	0%, 76%, 100% { filter: brightness(1) drop-shadow(0 0 2px var(--drop-glow)); }
	85% { filter: brightness(1.1) drop-shadow(0 0 26px var(--drop-glow)); }
}
.btn.hot {
	color: var(--knockout);
	border: 2px solid transparent;
	padding: calc(0.8rem - 1px) calc(1.5rem - 1px);
	background:
		linear-gradient(var(--drop), var(--drop)) padding-box,
		conic-gradient(from var(--spin, 0deg),
			var(--accent), var(--info), var(--accent-alt), var(--violet),
			var(--pink), var(--drop), var(--danger), var(--orange),
			var(--gold), var(--accent)) border-box;
	box-shadow: 0 0 24px var(--drop-glow);
	animation: hot-spin 6s linear infinite, hot-surge 6s ease-in-out infinite;
}
.btn.hot:hover { box-shadow: 0 0 36px var(--drop-glow); }
.btn.ghost { background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn-row.center { justify-content: center; }

/* --- hero --------------------------------------------------------------- */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: min(86vh, 860px); display: grid; align-items: end;
	padding: 6rem 0 4rem;
}
.hero-art { position: absolute; inset: 0; z-index: -2; }
/* Narrow screens are served the portrait cut of the key art - the DJ alone -
   so it is centred and dimmed only from below, under the words. The dimming
   holds off entirely until 34%, which is clear of her face, then comes up
   quickly: the words start around 38% and the lit deck behind them is the
   brightest thing in the picture. Holding it off that long leaves her better
   lit than an even fade would, and still clears 6:1 behind the lede. */
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom,
		var(--scrim-0) 0%, var(--scrim-0) 34%, var(--scrim-70) 60%, var(--bg) 100%);
}
.hero-inner { max-width: 720px; }
/* Wide enough for the whole poster: the words sit where its own name sits,
   right of the DJ and over the rings, so she stays in the picture beside
   them and the art is steered left and dimmed towards them. */
@media (min-width: 1000px) {
	.hero { align-items: center; padding: 7rem 0 5rem; }
	.hero-inner { margin-left: auto; width: 56%; }
	.hero-art img { object-position: 22% 45%; }
	.hero::after {
		background:
			linear-gradient(to bottom, var(--scrim-0) 0%, var(--scrim-40) 50%, var(--bg) 100%),
			linear-gradient(to right, var(--scrim-0) 35%, var(--scrim-40) 100%);
	}
}
.hero .strap {
	font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; font-size: 0.8rem;
	color: var(--accent); margin-bottom: 1.2rem;
}
.hero h1 { margin: 0 0 1rem; }
.hero h1 img { width: min(100%, 760px); height: auto; filter: drop-shadow(0 12px 40px var(--drop-glow)); }
.hero .tag { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 700; letter-spacing: 0.02em; text-transform: none; margin: 0 0 0.6em; }
.hero .lede { font-size: 1.1rem; max-width: 62ch; color: var(--text-soft); }
.hero .btn-row { margin-top: 1.6rem; }
.hero .meta { margin-top: 1.4rem; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hero .meta span + span::before { content: "·"; margin: 0 0.6em; }

/* --- sections ----------------------------------------------------------- */
.section { padding: 4.5rem 0; }
.section.tight { padding: 3rem 0; }
.section-head { max-width: 72ch; margin-bottom: 2rem; }
.section-head p { font-size: 1.1rem; color: var(--text-soft); }
.section-head.center { margin-inline: auto; text-align: center; }
.more { margin-top: 1.6rem; }

.glass {
	background: var(--glass);
	border: 1px solid var(--line-soft);
	border-radius: 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* --- pillars ------------------------------------------------------------ */
.pillars { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.pillar { padding: 1.5rem; }
.pillar h3 { color: var(--accent); }
.pillar p { margin: 0; color: var(--text-soft); }
.pillar .num { display: block; font-size: 0.75rem; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 0.6rem; }

/* --- trailer ------------------------------------------------------------ */
.yt {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px;
	background: var(--knockout); border: 1px solid var(--line-soft); cursor: pointer;
	box-shadow: 0 30px 80px var(--shadow-deep);
}
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt .play {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: transparent; border: 0; cursor: pointer; color: var(--text);
}
.yt .play span {
	display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
	background: var(--drop); box-shadow: 0 0 40px var(--drop-glow);
	transition: transform 0.15s ease;
}
.yt .play:hover span { transform: scale(1.06); }
.yt .play svg { width: 36px; height: 36px; margin-left: 5px; fill: var(--knockout); }
.yt-note { margin-top: 0.8rem; font-size: 0.9rem; color: var(--muted); text-align: center; }

/* --- screenshots -------------------------------------------------------- */
.shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.shot { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--knockout); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot:hover { border-color: var(--accent); }
.shot figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 0.7rem 1rem;
	background: linear-gradient(to top, var(--scrim-80), transparent);
	font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.shot button { position: absolute; inset: 0; background: transparent; border: 0; cursor: zoom-in; }

.lightbox {
	position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
	background: var(--scrim-90); padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 1600px); max-height: 82vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px var(--shadow-deep); }
.lightbox figcaption { color: var(--text-soft); margin-top: 0.8rem; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; }
.lightbox .lb-btn {
	position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
	border-radius: 50%; border: 1px solid var(--line-soft); background: var(--glass); color: var(--text);
	font-size: 1.6rem; cursor: pointer; display: grid; place-items: center;
}
.lightbox .prev { left: 1rem; } .lightbox .next { right: 1rem; }
.lightbox .close { position: absolute; top: 1rem; right: 1rem; transform: none; }

/* --- the kit ------------------------------------------------------------ */
.layers { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.layer { display: flex; flex-direction: column; overflow: hidden; }
.layer .still { aspect-ratio: 16 / 9; background: var(--knockout); border-bottom: 1px solid var(--line-soft); }
.layer .still img { width: 100%; height: 100%; object-fit: cover; }
.layer .still.empty { display: grid; place-items: center; }
.layer .body { padding: 1.1rem 1.2rem 1.3rem; display: grid; grid-template-columns: 56px 1fr; gap: 0.9rem; align-items: start; }
.layer .icon { width: 56px; height: 56px; border-radius: 12px; background: var(--panel-soft); display: grid; place-items: center; border: 1px solid var(--line-soft); }
.layer .icon img { width: 44px; height: 44px; }
.layer h3 { margin: 0.1rem 0 0.2rem; font-size: 1.1rem; }
.layer .abbr { font-size: 0.72rem; letter-spacing: 0.28em; color: var(--layer, var(--accent)); font-weight: 800; }
.layer p { margin: 0.4rem 0 0; color: var(--text-soft); font-size: 0.98rem; }
.layer .facts { margin: 0.7rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.layer .facts b { color: var(--text-soft); font-weight: 700; }
.layer.compact .still { display: none; }
.rack { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rack .card { padding: 1rem 1.1rem; display: grid; grid-template-columns: 44px 1fr; gap: 0.8rem; align-items: start; }
.rack .card img { width: 40px; height: 40px; }
.rack h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.rack p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }

/* --- stages ------------------------------------------------------------- */
.ladder { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.ladder th, .ladder td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ladder th { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ladder td.name { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ladder td.rank { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.ladder .num { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 0.5rem; }
.pips i { width: 9px; height: 9px; border-radius: 2px; background: var(--panel-soft); border: 1px solid var(--line-soft); }
.pips i.on { background: var(--gold); border-color: transparent; }
.bills { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bill { padding: 1rem 1.1rem; }
.bill h3 { font-size: 0.95rem; margin: 0 0 0.2rem; color: var(--gold); }
.bill p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }
.bill .facts { margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rests { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rest { padding: 1.2rem 1rem; text-align: center; }
.rest .glyph { width: 96px; height: 96px; margin: 0 auto 0.6rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--rest-plate), transparent 72%); }
.rest .glyph img { width: 80px; height: 80px; }
.rest h3 { font-size: 1rem; margin: 0 0 0.2rem; color: var(--danger); }
.rest .power { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }
.rest p { margin: 0.3rem 0 0; color: var(--text-soft); font-size: 0.92rem; }
.rest .where { margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.notes { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.note { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; border-radius: 999px; }
.note img { width: 36px; height: 36px; }
.note b { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.note span { font-size: 0.8rem; color: var(--muted); }

/* --- songs -------------------------------------------------------------- */
.tracks { display: grid; gap: 0.8rem; }
.track { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; padding: 0.9rem 1.1rem; }
.track .badge { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: var(--panel-soft); border: 1px solid var(--line-soft); }
.track .badge img { width: 48px; height: 48px; }
.track h3 { margin: 0; font-size: 1.05rem; color: var(--setup, var(--text)); }
.track .vibe { margin: 0.1rem 0 0.3rem; color: var(--text-soft); font-size: 0.95rem; }
.track .meta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.track .meta b { color: var(--text-soft); }
.track .kit { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; padding: 0.22rem 0.55rem; border-radius: 6px; background: var(--panel-soft); color: var(--layer, var(--text)); border: 1px solid var(--line-soft); }

/* --- career ------------------------------------------------------------- */
.ranks { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rank-card { padding: 1rem 0.8rem; text-align: center; }
.rank-card img { width: 96px; height: 96px; margin: 0 auto 0.5rem; }
.rank-card h3 { font-size: 0.85rem; margin: 0 0 0.2rem; color: var(--gold); }
.rank-card p { margin: 0; font-size: 0.82rem; color: var(--muted); }
.rooms { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.room { overflow: hidden; }
.room img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.room .body { padding: 0.9rem 1.1rem 1.1rem; }
.room h3 { font-size: 0.95rem; margin: 0 0 0.2rem; }
.room p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.rail { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.piece { padding: 1rem 0.8rem; text-align: center; }
.piece img { width: 96px; height: 96px; margin: 0 auto 0.4rem; }
.piece h3 { font-size: 0.82rem; margin: 0 0 0.2rem; letter-spacing: 0.14em; }
.piece p { margin: 0; font-size: 0.8rem; color: var(--muted); }
.piece .cost { color: var(--gold); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; }
.tray { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tray span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tray i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-soft); }
.cast { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.member { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; padding: 1rem; }
.member img { width: 110px; border-radius: 10px; }
.member h3 { margin: 0 0 0.1rem; font-size: 1rem; }
.member .role { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.member p { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--text-soft); }

/* --- teasers on the landing page --------------------------------------- */
.teaser { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
.teaser.top { align-items: start; }
@media (min-width: 900px) {
	.teaser { grid-template-columns: 1.15fr 1fr; }
	.teaser.flip > .teaser-text { order: 2; }
}
.teaser-pic { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--knockout); box-shadow: 0 24px 60px var(--shadow-deep); }
.teaser-pic img { width: 100%; height: auto; }
.teaser-text p { color: var(--text-soft); font-size: 1.05rem; }
.mini-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: 1rem 0; }
.mini { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.mini img { width: 30px; height: 30px; }

/* --- signup ------------------------------------------------------------- */
.signup { padding: 2.5rem 1.5rem; text-align: center; }
.signup form { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }
.signup input[type="email"] {
	flex: 1 1 260px; max-width: 420px; padding: 0.85rem 1rem; font: inherit;
	color: var(--text); background: var(--knockout); border: 1px solid var(--line); border-radius: 8px;
}
.signup .fine { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--muted); }
.social { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }

/* --- press -------------------------------------------------------------- */
.sheet { display: grid; gap: 0.2rem 1.5rem; grid-template-columns: max-content 1fr; margin: 0; }
.sheet dt { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0; font-weight: 700; }
.sheet dd { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.downloads { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.download { padding: 0.9rem 1rem; }
.download img { border-radius: 8px; margin-bottom: 0.6rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.download .pic { display: block; }
/* the logo and the icon are not photographs - show the whole of them on a
   plate, rather than a 16:9 crop of their middle */
.download img.flat { object-fit: contain; background: var(--knockout); padding: 0.5rem; }
/* the whole kit, across the top of the grid */
.download.bundle { grid-column: 1 / -1; border-color: var(--accent-glow); }
.download.bundle a { font-size: 1.05rem; color: var(--accent); }
.download a { font-weight: 700; }
.download span { display: block; font-size: 0.78rem; color: var(--muted); }
.prose { max-width: 72ch; }
.prose li { margin-bottom: 0.4rem; color: var(--text-soft); }

/* --- footer ------------------------------------------------------------- */
.foot { padding: 3rem 0 2.5rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.9rem; }
.foot .wrap { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot img { height: 26px; width: auto; margin-bottom: 0.8rem; opacity: 0.9; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.35rem; }
.foot a { color: var(--text-soft); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot h4 { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--muted); margin-bottom: 0.8rem; }
.foot .fine { margin-top: 1.5rem; font-size: 0.8rem; }

.crumbs { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span::before { content: "/"; margin: 0 0.5em; }

.page-head { padding: 2.5rem 0 1rem; }
.page-head p { max-width: 72ch; font-size: 1.1rem; color: var(--text-soft); }