/*
 * kernreaktor.ch — hand-written stylesheet.
 *
 * Mirrors the design the site actually had (WordPress Twenty Twenty with the club's
 * customiser settings): Inter for headings and UI, a serif for body copy, centred entry
 * headers, and the accent pink the site adopted in 2018. The colour values below are the
 * ones recovered from the archived inline CSS.
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--accent: #e22658;
	--accent-hover: #b81c46;
	--ink: #000;
	--ink-secondary: #6d6d6d;
	--rule: #dbdbdb;
	--paper: #fff;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
	--serif: 'Hoefler Text', Garamond, 'Times New Roman', Georgia, serif;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

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

a:hover,
a:focus {
	color: var(--accent-hover);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 2rem 0;
}

figcaption {
	margin-top: 0.5rem;
	color: var(--ink-secondary);
	font-family: var(--sans);
	font-size: 0.8125rem;
}

.wrap {
	max-width: 38rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10;
	padding: 0.75rem 1rem;
	background: var(--paper);
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
}

/* --- masthead ----------------------------------------------------------- */

.site-header {
	padding: 3.5rem 0 2rem;
	text-align: center;
}

.site-title {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(2rem, 7vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.site-title a {
	color: var(--ink);
	text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--accent);
}

.site-description {
	margin: 0.75rem 0 0;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink-secondary);
}

/* --- navigation --------------------------------------------------------- */

.site-nav {
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	padding: 0.875rem 0;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a[aria-current='page'] {
	color: var(--accent);
}

/* --- archive heading ---------------------------------------------------- */

.archive-header {
	padding: 3rem 0 0;
	text-align: center;
}

.archive-title {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.archive-title .kicker {
	color: var(--accent);
}

/* --- entries ------------------------------------------------------------ */

.entry {
	padding: 3rem 0;
}

.entry + .entry {
	border-top: 1px solid var(--rule);
}

.entry-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.entry-categories {
	margin: 0 0 0.75rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.entry-categories a {
	text-decoration: none;
}

.entry-categories a:hover,
.entry-categories a:focus {
	text-decoration: underline;
}

.entry-title {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(1.625rem, 5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.entry-title a {
	color: var(--ink);
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--accent);
}

.post-meta {
	margin: 1rem 0 0;
	color: var(--ink-secondary);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
}

.post-meta a {
	color: inherit;
}

.post-meta .sep {
	opacity: 0.6;
}

/* --- entry content ------------------------------------------------------ */

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin: 0 0 1.5rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin: 2.5rem 0 1rem;
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.entry-content h2 {
	font-size: 1.5rem;
}

.entry-content h3 {
	font-size: 1.25rem;
}

.entry-content h4 {
	font-size: 1.0625rem;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content li {
	margin-bottom: 0.4rem;
}

.entry-content blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--accent);
	font-style: italic;
}

.entry-content hr {
	height: 0;
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

.entry-content table {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.entry-content td,
.entry-content th {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.entry-content iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Twenty Twenty let images break out of the measure; keep that. */
.entry-content .wp-block-image,
.entry-content .alignwide,
.entry-content .wp-block-gallery {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	text-align: center;
}

.entry-content .wp-block-image img,
.entry-content .alignwide img {
	max-width: min(58rem, calc(100vw - 3rem));
}

/* --- pagination --------------------------------------------------------- */

.pagination {
	padding: 2rem 0 4rem;
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
}

.pagination .wrap {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.pagination .next:only-child {
	margin-left: auto;
}

/* --- helpers the extractor emits ---------------------------------------- */

.is-centered {
	text-align: center;
}

.is-right {
	text-align: right;
}

/* --- footer ------------------------------------------------------------- */

.site-footer {
	margin-top: 3rem;
	padding: 3rem 0 2.5rem;
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--ink-secondary);
}

.impressum p {
	margin: 0 0 0.75rem;
}

.impressum a {
	color: var(--ink);
}

.site-info {
	margin: 1.5rem 0 0;
	font-size: 0.75rem;
}

/* --- print -------------------------------------------------------------- */

@media print {
	.site-nav,
	.skip-link,
	.pagination {
		display: none;
	}

	body {
		color: #000;
		font-size: 11pt;
	}

	.entry-content .wp-block-image,
	.entry-content .alignwide {
		margin-left: 0;
		margin-right: 0;
	}

	a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-size: 0.75em;
		word-break: break-all;
	}
}