/* Robbie Crow - typography, colour and footer
 * ---------------------------------------------------------------
 * Palette lifted from his own LinkedIn brand card: near-black ground,
 * deep aubergine/plum surface, cream text, warm gold accent, and the
 * four-line rainbow rule under his tagline. Design target is WCAG 2.2
 * AAA (not content) - every text/background pairing below is computed
 * to >= 7:1 (normal text) rather than eyeballed against AA. Jonny,
 * 2026-09-14.
 *
 * Fonts: Poppins for headings - matched directly against his own
 * LinkedIn content card (rounded, geometric, single-story 'a', soft
 * terminals - that's Poppins, not a generic UI sans) - paired with
 * Public Sans for body text, the US Web Design System's typeface,
 * built specifically for legibility. Jonny, 2026-09-14 ("look at the
 * content card again for a better font match").
 *
 * Light/Dark/System via light-dark() + a footer switcher - same
 * mechanism as r80/send-data/every-send, not reinvented here: color-
 * scheme drives light-dark() by default ("System"), and the switcher
 * only ever sets color-scheme directly on :root.light/:root.dark to
 * override it - every var below already follows from that with no
 * other CSS needed.
 */

:root {
	color-scheme: light dark;
	/* Dark --bg is the actual plum, sampled directly from the pixels of
	   his card (#3A103A - the dominant colour across the whole card
	   body, checked all the way down through the tagline row), not a
	   guess. Previously the page background stayed near-black
	   everywhere and this plum was never actually applied anywhere -
	   Jonny, 2026-09-14 ("hard to see the plum isn't black"). The
	   near-black in his screenshot turned out to be the phone app's own
	   chrome outside the card, not part of the card's own design - so
	   one flat plum background throughout, not a separate black band. */
	--bg: light-dark(#FAF6F0, #3A103A);
	--text: light-dark(#241B26, #F5EDE1);
	--text-muted: light-dark(#55495B, #C9BBCB);
	/* Purple in light mode, gold in dark - Jonny, 2026-09-14 ("gold/
	   purple swap on light/dark mode for the tagline text"). Dark gold
	   re-sampled from his bold text (avg #F3BC56, not a guess) rather
	   than the earlier estimate. Both clear AAA on their own ground:
	   plum 12.75:1 on the light bg, gold 9.23:1 on the real dark plum. */
	--accent: light-dark(#4B1A44, #F3BC56);
	--border: light-dark(#DCD0BC, #5A2953);
	--focus: light-dark(#4B1A44, #F3BC56);

	--font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Explicit overrides for the footer's Light/Dark/System switch -
   setting color-scheme directly (rather than "light dark") is all
   light-dark() needs to stop following the OS and pick one side for
   good. "System" is just neither class present. */
:root.light { color-scheme: light; }
:root.dark { color-scheme: dark; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
	color: var(--text);
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin: 1.4em 0 0.5em; }

p { max-width: 65ch; margin: 0 0 1.2em; }

a {
	color: var(--accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 0.15em; }

/* AAA focus appearance (2.4.13): a solid, high-contrast outline with
   real offset, not a thin 1px default browser ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible + label {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0.5rem;
	z-index: 100;
	background: var(--bg);
	color: var(--text);
	padding: 0.6rem 1rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

.wrap {
	max-width: 60rem;
	margin: 0 auto;
	padding-inline: 1.25rem;
}

/* --- header ---------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--border);
}
.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 1.25rem;
}
.site-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.35rem;
	color: var(--text);
	text-decoration: none;
}
.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.site-nav a {
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	/* comfortably clears the AAA 44x44 target size (2.5.5) via padding,
	   not just line-height */
	padding: 0.6rem 0.1rem;
}
.site-nav a:hover { color: var(--accent); }

.page-title-wrap { padding-top: 2.5rem; }
.page-title { margin-bottom: 0; }

/* --- main content ------------------------------------------------ */

main#content {
	display: block;
	max-width: 60rem;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 3.5rem;
}

.tagline {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent);
	font-size: 1.1rem;
}

.summary { color: var(--text-muted); font-size: 1.1rem; }

.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list-item {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--border);
}
.blog-list-item h2 { margin-top: 0; }
.post-date { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 0.5em; }

/* --- footer: the four-line rainbow rule + tagline, an homage to his
   LinkedIn brand card's own footer strip -------------------------- */

.site-footer {
	margin-top: 3rem;
	border-top: 1px solid var(--border);
}

/* Four thin lines with real gaps between them, not touching bands -
   Jonny, 2026-09-14: "they are thinner and have space between them."
   Colours re-sampled directly from the pixels of his own card rather
   than guessed at, closest real match to each of the four hues.
   Transparent gaps let the page background show through, kept the
   same in both themes since it's a fixed brand mark, not theme-
   reactive text. */
.rainbow-bar {
	height: 14px;
	background: linear-gradient(
		to bottom,
		#4E7F7F 0 2px, transparent 2px 4px,
		#8AA047 4px 6px, transparent 6px 8px,
		#C66142 8px 10px, transparent 10px 12px,
		#CEA255 12px 14px
	);
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1.5rem;
}

.footer-tagline {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--text);
}
/* Only the last word of each phrase turns gold ("work", "fair",
   "last") - Jonny, 2026-09-14. */
.footer-tagline strong { color: var(--accent); font-weight: 700; }

.footer-name {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.95rem;
}

.edit-link {
	text-align: center;
	padding-bottom: 1.5rem;
	font-size: 0.9rem;
}

/* Theme switcher: Light / Dark / System - same plain-link visual
   language as r80's footer switcher. Hidden until main.js confirms JS
   is actually running (adds .js to <html>) - a switcher that doesn't
   do anything without JS shouldn't be shown at all. */
.theme-switcher { display: none; border: 0; padding: 0; margin: 1rem 0 0; }
html.js .theme-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.85rem;
}
.theme-switcher legend { padding: 0; color: var(--text-muted); }
.theme-switcher input { position: absolute; opacity: 0; pointer-events: none; }
.theme-switcher label {
	cursor: pointer;
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--border);
}
.theme-switcher label:not(:last-of-type)::after {
	content: "/";
	text-decoration: none;
	color: var(--text-muted);
	margin-left: 0.5rem;
}
.theme-switcher input:checked + label {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 480px) {
	main#content { padding-top: 1.75rem; }
	.footer-inner { flex-direction: column; align-items: flex-start; }
}