/*
 * BSBC — homepage and 404 styles.
 *
 * Loaded SECOND, after /styles.css, by exactly two pages: /index.html (the
 * placeholder homepage) and /404.html. Both are a single centred card, so
 * this file is deliberately small — the tokens, the reset, the base
 * typography, the logo lockup and `.eyebrow` all come from the site file, and
 * only the centring and the card itself live here.
 *
 * ORDER MATTERS: link /styles.css BEFORE this file. The `body` rule below
 * adds the centring to the site file's `body` rather than restating it, so on
 * its own this file does not describe a whole page.
 *
 * `.card` here is these two pages' one centred card. The dashboard has an
 * unrelated `.card` of its own (its chart panel) in /dashboard/dashboard.css.
 * The two never load together, which is precisely why they are in separate
 * feature files — keep it that way rather than renaming either.
 *
 * When the real homepage arrives, build it on top of the site file and this
 * one rather than starting a third stylesheet. A future /tickets/tickets.css
 * follows the same pattern.
 *
 *   1. Page frame     centring the card in the viewport
 *   2. The card
 *   3. The link, styled as a button
 *   4. The foot note
 *
 * 2026-09-22: a second `.btn` (Ticketing) landed below the dashboard's — see
 * §3 for the one rule that added and its own note on why it lives here
 * rather than in /styles.css.
 */

/* ── 1. Page frame ─────────────────────────────────────────────────────── */
/* Adds to the site file's `body`; everything else about the page's type and
   colour is already set there. */
body {
	/* Centre a single card in the viewport. min-height rather than height so a
	   taller card scrolls instead of being clipped on a short screen. */
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* ── 2. The card ───────────────────────────────────────────────────────── */
.card {
	width: 100%;
	max-width: 460px;
	background: var(--panel);
	border: 1px solid var(--rule);
	padding: 38px 34px 30px;
	text-align: center;
}
/* The brand rule bleeds to the card's edges, hence the negative margins
   matching the padding above. */
.card .brandrule {
	height: 4px;
	background: var(--brand);
	margin: -38px -34px 28px;
}

/* `cardlogo`, not `logo`: /styles.css (loaded before this file) has a `.logo`
   component of its own — the header's logo-with-fallback wrapper — and a
   shared class name would let its rules reach this <img>. Renamed 2026-09-21
   when the two stylesheets started loading together. */
.card img.cardlogo {
	width: 110px;
	height: auto;
	margin: 0 auto 22px;
	display: block;
}

.card h1 {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.015em;
	margin: 6px 0 8px;
}

.card p {
	font-size: 13.5px;
	color: var(--muted);
	margin: 0 0 26px;
}

/* ── 3. The link, styled as a button ───────────────────────────────────── */
/* An <a>, not a <button>: it navigates, so it should be a link — which means
   it opens in a new tab on middle-click and is announced correctly to screen
   readers. Looking like a button is purely visual. */
.btn {
	display: block;
	width: 100%;
	padding: 12px;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background 0.15s;
}
.btn:hover,
.btn:focus-visible {
	background: var(--slate);
}
.btn:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}
/* Two buttons now stack here (the scorecard, then Ticketing) — `.btn` itself
   carries no margin (a single button needed none), so the gap between two
   goes on the adjacent-sibling pair rather than on `.btn` generally, which
   would also push the FIRST button away from the intro paragraph above it. */
.btn + .btn {
	margin-top: 10px;
}
/* The one-line note under the Ticketing button — smaller and quieter than
   `.card p` (that paragraph introduces the whole card; this note qualifies
   one button) but still sentence case, not a tracked-out label. */
.btnnote {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--faint);
	line-height: 1.5;
}

/* ── 4. The foot note ──────────────────────────────────────────────────── */
.foot {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
	line-height: 1.6;
}