/* Flexoki color palette, light-dark() so one declaration covers both
   themes: https://stephango.com/flexoki. Orange is the site's primary
   accent (600 on paper, 400 on black — Flexoki's own light/dark pairing). */
:root {
	color-scheme: light dark;
	--bg: light-dark(#FFFCF0, #100F0F);
	--bg-2: light-dark(#F2F0E5, #1C1B1A);
	--ui: light-dark(#E6E4D9, #282726);
	--ui-2: light-dark(#DAD8CE, #343331);
	--tx: light-dark(#100F0F, #E6E4D9);
	--tx-2: light-dark(#6F6E69, #9F9D96);
	--primary: light-dark(#BC5215, #DA702C);
	--primary-ink: light-dark(#FFFCF0, #100F0F);
	/* Flexoki's own purple swatch, same light-dark() pairing as primary -
	   marks a poem still in copyright, no text here yet. Red was tried
	   first but sits too close to the site's own orange to tell apart
	   at a glance (Jonny, 2026-09-13: "the red and orange are too
	   similar"); purple reads as "protected/restricted" without red's
	   "something's broken" alarm, and isn't already spoken for by any
	   other role on the site. */
	--copyright: light-dark(#5E409D, #8B7EC8);
	/* Flexoki's own green swatch - marks a "read it elsewhere" link
	   specifically, on a pending poem's own page: a real, findable
	   source exists to go and get the text from, distinct from the
	   purple used everywhere else for "still pending", which doesn't
	   say whether one does. Jonny, 2026-09-13: "turn the links on the
	   Poem page green and I'll grab them myself." */
	--available: light-dark(#66800B, #879A39);
}
/* 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 - every var
   above is already keyed off color-scheme, so nothing else has to
   change. "System" is just neither class present - the :root rule above
   already does the right thing with zero extra CSS. */
: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(--tx);
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	line-height: 1.6;
}
a { color: var(--primary); }
a:hover { opacity: 0.8; }

/* Section / Container / Row / Column — the same grid this studio uses
   everywhere else, copied from jdh's own main.css so poem sites share
   one structure. */
.section { width: 100%; padding: 2rem 0; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
/* Less vertical padding around every section on a small screen, where
   that space is scarcer and reads as more empty than generous. Jonny,
   2026-09-12 ("on mobile the gap between title and date is too big"),
   found here since the header's own bottom padding is half of that gap
   on every page, not just poems. */
@media (max-width: 480px) {
	.section { padding: 1rem 0; }
}
.row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; }
.col { padding: 0 0.75rem; width: 100%; }
@media (min-width: 768px) {
	.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

.btn {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	border: 1px solid var(--primary);
	background: transparent;
	color: var(--primary);
	cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn:hover { opacity: 0.85; }
.btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }

#topnav { font-size: 0.9rem; color: var(--tx-2); }
#topnav a { color: var(--tx-2); }
hr { border: none; border-top: 1px solid var(--ui-2); margin: 1rem 0; }
#headline {
	/* The browser's own default h1 margin (21px top and bottom here)
	   was stacking invisibly on top of the header section's own
	   deliberate bottom padding, adding unaccounted space between the
	   title and whatever comes next on every single page - not just
	   poems. Zeroed so all spacing here is the padding actually chosen,
	   not browser defaults plus it. Jonny, 2026-09-12 ("not close
	   enough to the H1" - found while checking why). */
	margin: 0;
}
#headline a { color: var(--tx-2); text-decoration: none; }


/* Footer: deliberately roomy - "too much" padding on purpose, so the
   theme switch sits well clear of a poem's last line rather than
   crowding it. Jonny, 2026-09-12. */
#site-footer {
	padding-block: 5rem;
	border-top: 1px solid var(--ui-2);
}

.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;
}

/* Colour theme switcher - Light / Dark / System. Restyled as plain
   text links rather than an app-style segmented pill, after reading
   Adrian Roselli's own site: his picker is a "Theme:" label plus three
   bare links (Light / Dark / Unset), no button chrome at all - a
   quieter, more editorial treatment that suits a poetry site better
   than a settings-panel control, and it's the same three-state design
   this already was underneath (still real radios, still fully
   keyboard and screen-reader operable - only the skin changed). The
   "/" between options echoes the breadcrumb's own separator up in the
   header, tying the two together. Jonny, 2026-09-13 ("how might we
   make that more classy").
   https://adrianroselli.com/ (see its own footer)
   Hidden with no JS (the html.js class is only added once main.js
   runs), since the :root { color-scheme: light dark } default in the
   CSS above already gets "System" right with zero JS. */
.theme-switcher { display: none; border: 0; padding: 0; margin: 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(--tx-2);
}
.theme-switcher input { position: absolute; opacity: 0; pointer-events: none; }
.theme-switcher label {
	cursor: pointer;
	color: var(--tx);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--ui-2);
}
.theme-switcher label:not(:last-of-type)::after {
	content: "/";
	text-decoration: none;
	color: var(--tx-2);
	margin-left: 0.5rem;
}
.theme-switcher input:checked + label {
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}
.theme-switcher input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

.poem-index { list-style: none; padding: 0; margin: 0; }
.poem-index-item {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--ui-2);
	font-size: 1.1rem;
}
.poem-index-item a { text-decoration: none; }
.poem-index-item a:hover { text-decoration: underline; }
.poem-index-author { color: var(--tx-2); font-style: italic; margin-left: 0.5rem; }


/* Skip link: WCAG 2.4.1 Bypass Blocks. Visually hidden until it
   receives keyboard focus (Tab from the very top of the page), then
   sits above everything else so it's genuinely usable, not just
   present. Jonny, 2026-09-12 (WCAG check). */
.skip-link {
	position: absolute;
	top: -100%;
	left: 0.5rem;
	z-index: 100;
	background: var(--bg);
	color: var(--tx);
	padding: 0.6rem 1rem;
	border: 1px solid var(--ui-2);
	border-radius: 4px;
	text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

/* Home page epigraph - the Clive James line the whole project takes
   its cue from. Left-aligned like everything else on the site rather
   than centred, just larger and set in italic to carry its own
   weight as a statement rather than body copy. Jonny, 2026-09-13. */
.home-epigraph {
	margin: 0;
	max-width: 34em;
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.5;
}
/* A lot lot bigger on desktop (Jonny, 2026-09-15) - max-width switches
   to a fixed rem value here rather than staying em-based, since at
   this size 34em would balloon past the container itself (em is
   relative to this element's own font-size, which just tripled). */
@media (min-width: 768px) {
	.home-epigraph {
		font-size: clamp(3rem, 2rem + 3vw, 4rem);
		max-width: 44rem;
	}
	.home-epigraph cite { font-size: 1.5rem; }
}
.home-epigraph p {
	margin: 0 0 1rem;
	/* Balances the line lengths across wraps rather than leaving an
	   orphaned short line - matters more here than most text on the
	   site since this is the one line meant to be read as a single
	   composed statement. Jonny, 2026-09-13. */
	text-wrap: balance;
}
.home-epigraph cite {
	display: block;
	font-size: 1rem;
	font-style: normal;
	color: var(--tx-2);
}