/* ─────────────────────────────────────────────────────────────────────────────
   site.css - the public site's one stylesheet.

   Replaces the Tailwind CDN script, which built the styles in the visitor's
   browser on every page load: a third-party script on the page that takes a
   payment, a flash of unstyled page while it ran, and nothing at all if it was
   blocked. This is plain CSS served from our own domain, cached by its content
   hash (sfbAsset in config.php).

   Accessibility targets, which every rule here is written to:
   - Text contrast at least 4.5:1 (7:1 for body text) against the page and the
     cards; borders and focus rings at least 3:1 (WCAG 1.4.3, 1.4.11).
   - One visible focus ring for everything that can take focus (2.4.7, 2.4.11).
   - Targets at least 44px tall for anything tapped (2.5.5 / 2.5.8).
   - Text that reflows at 320px wide and survives 200% zoom and user spacing
     overrides: no fixed heights on anything holding text (1.4.4, 1.4.10, 1.4.12).
   - Motion stops for prefers-reduced-motion (2.3.3), and Windows High Contrast
     (forced-colors) keeps borders and focus visible.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
	color-scheme: dark;

	--page:        #05070a;
	--surface:     rgba(15, 23, 42, .78);   /* cards over the starfield   */
	--surface-2:   #1e293b;                 /* fields, secondary buttons  */
	--surface-3:   #334155;                 /* their hover                */
	--line:        #1e293b;                 /* dividers (decorative)      */
	--line-strong: #64748b;                 /* field borders: 3.9:1       */

	--text:        #e2e8f0;                 /* 15.6:1 on the page         */
	--text-strong: #ffffff;
	--text-body:   #cbd5e1;                 /* 13.0:1                     */
	--text-muted:  #94a3b8;                 /*  7.6:1                     */

	--accent:       #a5b4fc;                /* links: 10.1:1              */
	--accent-hover: #c7d2fe;
	--accent-strong:#4f46e5;                /* primary button: white 6.3:1 */
	--accent-strong-hover: #4338ca;
	--focus:        #818cf8;                /* 6.8:1 on the page          */

	--good:        #6ee7b7;
	--good-strong: #047857;                 /* white 5.5:1                */
	--good-strong-hover: #065f46;
	--warn:        #fcd34d;
	--bad:         #fca5a5;
	--bad-bg:      rgba(239, 68, 68, .12);
	--bad-line:    rgba(248, 113, 113, .55);

	--radius:    .75rem;
	--radius-lg: 1rem;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--page);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
}

h1, h2, h3 { color: var(--text-strong); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }

code {
	font-family: var(--mono);
	font-size: .9em;
	background: rgba(148, 163, 184, .15);
	padding: .1rem .35rem;
	border-radius: .25rem;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* The hidden attribute must win over any display a component sets. */
[hidden] { display: none !important; }

/* Hidden but read aloud. */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Spam trap: off-screen, out of the tab order and the accessibility tree. */
.gatekeeper { position: absolute; left: -9999px; top: -9999px; opacity: 0; }

/* One focus ring for everything. */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: .35rem;
}
/* Error boxes take focus from script so they're read out; the ring there would
   only be noise, as the box is already as visible as anything on the page. */
.alert:focus { outline: none; }

/* Skip link: off-screen until it takes focus. */
.skip-link {
	position: absolute; left: .5rem; top: -4rem; z-index: 50;
	padding: .7rem 1.1rem; border-radius: .6rem;
	background: var(--accent-strong); color: #fff; font-weight: 700; font-size: .875rem;
	text-decoration: none;
	transition: top .15s ease-in-out;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* The animated sky behind every page. Decorative. */
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ── Header and navigation ────────────────────────────────────────────────── */

.site-header {
	position: sticky; top: 0; z-index: 30;
	background: rgba(5, 7, 10, .85);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner {
	max-width: 64rem; margin: 0 auto; padding: .5rem 1rem;
	min-height: 4rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand {
	display: flex; align-items: center; gap: .6rem; flex: none;
	color: var(--text-strong); text-decoration: none;
	font-weight: 800; letter-spacing: -.01em; font-size: .9rem;
}
.brand:hover { color: var(--accent-hover); }
/* The Plough beside the wordmark. Below ~30px its handle stars merge. */
.sfb-mark { width: 34px; height: 34px; flex: none; }

.nav-link {
	display: block;
	padding: .55rem .75rem;
	border: 1px solid transparent;
	border-radius: .6rem;
	color: var(--text-body);
	font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.nav-link:hover { color: var(--text-strong); background: rgba(30, 41, 59, .6); }
/* The current page: a border and a tint, not colour alone. */
.nav-link[aria-current="page"] {
	color: var(--text-strong);
	background: rgba(99, 102, 241, .16);
	border-color: rgba(129, 140, 248, .6);
}

.nav { display: none; align-items: center; gap: .25rem; }

/* Mobile menu: a <details>, so it opens with no script at all. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu__toggle {
	display: flex; align-items: center; gap: .5rem;
	min-height: 44px; padding: .5rem .85rem;
	border: 1px solid var(--line-strong); border-radius: .6rem;
	color: var(--text);
	font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	cursor: pointer;
}
.menu__toggle:hover { background: rgba(30, 41, 59, .6); }
.menu__panel {
	position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40;
	min-width: 13rem;
	display: grid; gap: .25rem; padding: .5rem;
	background: rgba(8, 11, 18, .98);
	border: 1px solid var(--surface-3);
	border-radius: .85rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.menu__panel .nav-link { padding: .8rem .75rem; }

@media (min-width: 48rem) {
	.site-header__inner { padding: .5rem 1.5rem; }
	.brand { font-size: 1rem; }
	.sfb-mark { width: 38px; height: 38px; }
	.nav { display: flex; }
	.menu { display: none; }
}

/* ── Page frame ───────────────────────────────────────────────────────────── */

.site-main {
	position: relative; z-index: 20;
	flex: 1;
	width: 100%;
	margin: 0 auto;
	padding: 2rem 1rem;
	max-width: 48rem;
}
.site-main--wide { max-width: 72rem; }
@media (min-width: 48rem) { .site-main { padding: 3rem 1.5rem; } }

.page-title { font-size: 1.875rem; font-weight: 800; margin-bottom: 2rem; }
@media (min-width: 48rem) { .page-title { font-size: 2.25rem; } }

.intro { text-align: center; margin-bottom: 2.5rem; }
.intro .page-title { margin-bottom: 1rem; }
.intro__headline {
	max-width: 42rem; margin: 0 auto .75rem;
	color: var(--accent); font-size: 1.125rem; font-weight: 600;
}
.intro__sub { max-width: 42rem; margin: 0 auto; color: var(--text-body); }
@media (min-width: 48rem) {
	.intro { margin-bottom: 3rem; }
	.intro .page-title { font-size: 3rem; }
	.intro__headline { font-size: 1.25rem; }
}

/* Content on one side, the thing you act on on the other. On a phone the
   aside comes first, because it holds the facts and the action. */
.two-col { display: grid; gap: 2rem; align-items: start; }
.two-col__main, .two-col__aside { min-width: 0; }
.two-col__aside { order: 1; }
.two-col__main  { order: 2; }
@media (min-width: 64rem) {
	.two-col { grid-template-columns: 3fr 2fr; gap: 2.5rem; }
	.two-col__main  { order: 1; }
	.two-col__aside { order: 2; position: sticky; top: 5.5rem; }
}

.narrow { max-width: 28rem; margin-left: auto; margin-right: auto; }
.narrow-md { max-width: 36rem; margin-left: auto; margin-right: auto; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	overflow: hidden;
}
.card__section { padding: 1.25rem 1.5rem; }
.card__section + .card__section { border-top: 1px solid var(--line); }
.card__section--tint { background: rgba(30, 41, 59, .35); }
.card--pad { padding: 1.5rem; }
@media (min-width: 48rem) { .card--roomy { padding: 2rem; } }
.card--good { border-color: rgba(52, 211, 153, .4); }
.card--warn { border-color: rgba(251, 191, 36, .4); }

/* Small upper-case label above a value. 12px rather than the old 10px. */
.eyebrow {
	color: var(--text-muted);
	font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow--accent { color: var(--accent); }

.card-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }

.facts > div + div { margin-top: .85rem; }
.facts dd { color: var(--text-strong); font-weight: 600; font-size: .9375rem; line-height: 1.4; margin-top: .15rem; }
.facts dd a { display: inline-block; margin-top: .15rem; font-size: .875rem; font-weight: 400; }
.price { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; }
.price-note { color: var(--text-muted); font-size: .8125rem; font-weight: 400; }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.badge {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .3rem .8rem; border-radius: 999px;
	font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	border: 1px solid;
}
.badge--bad  { color: var(--bad);  background: var(--bad-bg); border-color: var(--bad-line); }
.badge--warn { color: var(--warn); background: rgba(245, 158, 11, .1); border-color: rgba(251, 191, 36, .45); }
.badge__dot { position: relative; width: .5rem; height: .5rem; flex: none; }
.badge__dot::before, .badge__dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: #f59e0b;
}
.badge__dot::before { animation: ping 1.2s cubic-bezier(0, 0, .2, 1) infinite; opacity: .75; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.alert {
	margin-bottom: 1rem;
	padding: .75rem 1rem;
	border: 1px solid var(--bad-line);
	border-radius: var(--radius);
	background: var(--bad-bg);
	color: var(--bad);
	font-size: .9375rem;
}
.success { color: var(--good); font-weight: 600; }
.error-text { color: var(--bad); font-size: .9375rem; }
.error-text:empty { display: none; }
.error-text a { color: inherit; font-weight: 700; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form > * + * { margin-top: 1rem; }
.form-note { color: var(--text-muted); font-size: .875rem; }

.field { display: block; }
.field__label { display: block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 600; color: var(--text); }
.field__input {
	display: block; width: 100%;
	min-height: 48px;
	padding: .75rem .9rem;
	background: var(--surface-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--text-strong);
}
.field__input::placeholder { color: var(--text-muted); opacity: 1; }
textarea.field__input { resize: vertical; min-height: 8rem; }

/* Quantity: − [n] + */
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.qty {
	display: inline-flex; align-items: stretch;
	background: #020617;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	overflow: hidden;
}
.qty__btn {
	min-width: 48px; min-height: 48px;
	background: transparent; border: 0;
	color: var(--text); font-size: 1.25rem; font-weight: 700;
}
.qty__btn:hover { background: var(--surface-2); color: var(--text-strong); }
.qty__input {
	width: 3rem; border: 0; background: transparent;
	color: var(--text-strong); text-align: center; font-weight: 700;
	-moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.total { text-align: right; }
.total__value { color: var(--good); font-size: 1.25rem; font-weight: 700; }

.inline-form { display: flex; flex-direction: column; gap: .5rem; }
.inline-form .field { flex: 1; }
@media (min-width: 30rem) {
	.inline-form { flex-direction: row; align-items: flex-end; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px;
	padding: .75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-weight: 700; text-align: center; text-decoration: none; line-height: 1.3;
	color: #fff;
	transition: background-color .15s;
}
.btn:hover { color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--large { min-height: 56px; padding: 1rem 1.5rem; }
.btn--tall  { min-height: 60px; padding: 1rem 1.25rem; border-radius: var(--radius-lg); flex-direction: column; gap: .15rem; }
.btn__sub   { font-size: .875rem; font-weight: 400; }

.btn--primary   { background: var(--accent-strong); box-shadow: 0 10px 24px rgba(79, 70, 229, .22); }
.btn--primary:hover { background: var(--accent-strong-hover); }
.btn--good      { background: var(--good-strong); }
.btn--good:hover { background: var(--good-strong-hover); }
.btn--secondary { background: var(--surface-2); border-color: var(--surface-3); }
.btn--secondary:hover { background: var(--surface-3); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn--primary:disabled:hover { background: var(--accent-strong); }

.button-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }

/* "Dates don't suit?" and similar disclosures. */
.disclosure { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.disclosure > summary {
	cursor: pointer; color: var(--accent);
	min-height: 44px; display: flex; align-items: center;
}
.disclosure > summary:hover { color: var(--accent-hover); }
.disclosure > div { margin-top: .75rem; }

/* ── Content from the page editor (Markdown) ──────────────────────────────── */

.prose { color: var(--text-body); }
.prose p { margin-bottom: 1rem; }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .75rem; }
.prose h3 { font-size: 1rem; font-weight: 700; color: var(--accent); margin: 1.5rem 0 .5rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding: 0; }
.prose li + li { margin-top: .5rem; }
/* The telescope bullet, drawn as a pseudo-element so it keeps its colour and
   a wrapped line lines up with the text, not the marker. */
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 1.6rem; }
.prose ul > li::before { content: "🔭"; position: absolute; left: 0; top: 0; font-size: .95em; }
.prose ol { list-style: decimal; padding-left: 1.4rem; }
.prose ol > li::marker { color: var(--accent); }
.prose blockquote {
	margin: 0 0 1rem; padding-left: 1rem;
	border-left: 2px solid rgba(99, 102, 241, .6);
	font-style: italic; color: var(--text-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose--small { font-size: .9375rem; }
/* Centred intro text, but a list is read down its left edge. */
.center .prose ul, .center .prose ol { text-align: left; display: inline-block; }

.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.tiny  { font-size: .8125rem; }
.placeholder-note { color: var(--text-muted); font-style: italic; }
.also { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.also ul { list-style: none; padding: 0; margin: .75rem 0 0; font-size: .9375rem; }
.also li + li { margin-top: .5rem; }

address { font-style: normal; color: var(--text-body); line-height: 1.7; font-size: .9375rem; }
.venue-name { font-size: 1.125rem; font-weight: 700; margin: .5rem 0; color: var(--text-strong); }
.venue-name a { color: var(--text-strong); text-decoration-color: rgba(129, 140, 248, .7); }

/* ── Status, checkout, the links page ─────────────────────────────────────── */

.big-emoji { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.status-title { font-size: 1.875rem; font-weight: 700; margin-bottom: .75rem; }
.status-title--good { color: var(--good); }
.status-title--warn { color: var(--warn); }
.status-text { color: var(--text-body); margin-bottom: 1.5rem; }

.checkout-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.checkout-sum { color: var(--text-muted); font-size: .9375rem; margin-bottom: 1.5rem; }
.checkout-sum .price { font-size: inherit; color: var(--good); }
#payment-element { margin-bottom: 1.5rem; }

.verdict { font-size: 1.25rem; font-weight: 700; color: var(--text-strong); }
.verdict--go    { color: var(--good); }
.verdict--maybe { color: var(--warn); }
.verdict--no    { color: var(--bad); }

.plain-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.plain-list li + li { margin-top: .5rem; }

.link-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; padding-top: .75rem; font-size: .9375rem; }
.link-row a { color: var(--text-body); padding: .5rem .25rem; }
.link-row a:hover { color: var(--text-strong); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
	position: relative; z-index: 20;
	margin-top: 2rem;
	border-top: 1px solid var(--line);
}
.site-footer__inner {
	max-width: 72rem; margin: 0 auto; padding: 2rem 1rem;
	text-align: center;
	display: grid; gap: .75rem;
}
.social-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 1.5rem; }
.social-links a {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 44px;
	color: var(--text-muted); font-size: .875rem; text-decoration: none;
}
.social-links a:hover { color: var(--text-strong); text-decoration: underline; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1rem; font-size: .8125rem; }
.footer-nav a { color: var(--text-muted); display: inline-block; padding: .55rem .15rem; }
.footer-nav a:hover { color: var(--text); }
.footer-copy { color: var(--text-muted); font-size: .8125rem; }

/* ── Policy pages ─────────────────────────────────────────────────────────── */

.legal { padding: 3rem 1rem; display: block; }
.legal main, .legal footer { max-width: 42rem; margin: 0 auto; }
.legal .back-link { display: inline-block; margin-bottom: 2rem; font-size: .9375rem; padding: .5rem 0; }
.legal h1 { font-size: 1.875rem; font-weight: 800; margin-bottom: .5rem; }
.legal article { color: var(--text-body); }
.legal article > * + * { margin-top: 2.5rem; }
.legal section > * + * { margin-top: 1rem; }
.legal h2 { font-size: 1.25rem; font-weight: 700; }
.legal h3 { font-size: 1rem; font-weight: 600; color: var(--text); }
.legal strong { color: var(--text-strong); }
.legal ul { padding-left: 1.25rem; }
.legal ul li + li { margin-top: .5rem; }
.legal ul li::marker { color: var(--accent); }
.legal .updated { color: var(--text-muted); font-size: .875rem; }
.legal .basis { color: var(--accent); font-weight: 500; }
.legal .callout {
	padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius);
	background: rgba(15, 23, 42, .5); font-size: .9375rem;
}
.legal .callout > * + * { margin-top: .25rem; }
.legal .callout--action { border-color: var(--surface-3); background: rgba(15, 23, 42, .6); padding: 1rem; }
.legal .callout--action > * + * { margin-top: .75rem; }
.legal footer {
	margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line);
	text-align: center; color: var(--text-muted); font-size: .8125rem;
}
.legal footer a { color: var(--text-muted); }
.legal footer a:hover { color: var(--text); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
.table-wrap th { background: #0f172a; color: var(--text); font-weight: 600; padding: .75rem 1rem; }
.table-wrap td { padding: .75rem 1rem; vertical-align: top; border-top: 1px solid var(--line); }
.table-wrap td:first-child code, .mono { font-family: var(--mono); font-size: .8125rem; background: none; padding: 0; }

/* ── Spacing and layout helpers ───────────────────────────────────────────
   Last, so they win over the component rules above at equal specificity. */

.stack > * + * { margin-top: .75rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.center { text-align: center; }
.gap-below { margin-bottom: 1.25rem; }
.gap-above { margin-top: 1rem; }
.gap-above-lg { margin-top: 1.5rem; }
.tight { margin-bottom: .25rem; }

/* ── Motion and contrast preferences ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.card, .btn, .field__input, .qty, .badge, .alert, .nav-link[aria-current="page"], .menu__toggle {
		border: 1px solid CanvasText;
	}
	.badge__dot::before, .badge__dot::after { background: CanvasText; }
	:focus-visible { outline-color: Highlight; }
}