/*
	yaikes – site styles
	Mobile-first. Incident pages loosely follow Wikipedia: the title and
	incident write-up, a quick facts infobox in a right-hand column (wide
	screens), and a list of sources at the bottom.
*/

/* ==========================================================================
	Fonts
	IBM Plex, self-hosted from /assets/fonts (SIL Open Font License, see
	LICENSE.txt there). Only the "Latin1" subset is included: basic Latin,
	accented Western European letters, curly quotes, dashes, and common symbols.
	Characters outside that range fall back to the system fonts in the stacks
	below. font-display: swap shows text immediately in a fallback font while
	the files load.
	========================================================================== */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/IBMPlexSans-Italic-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* Titles only use the Medium weight of the serif */
@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/IBMPlexSerif-Medium-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* ==========================================================================
	Design tokens
	========================================================================== */

:root {
	/* Brand palette (the only three brand colors) */
	--brand-yellow: #FCF573;
	--brand-ink: #292537;
	--brand-paper: #F8F7FF;

	/* Semantic colors (light theme). Derived tints are chosen for WCAG AA contrast. */
	--color-bg: var(--brand-paper);
	--color-text: var(--brand-ink);
	--color-muted: #57536a;
	--color-border: #d9d6e8;
	--color-surface: #efedfa;
	--color-link: var(--brand-ink);
	--color-highlight-bg: var(--brand-yellow);
	--color-highlight-text: var(--brand-ink);
	--color-focus: var(--brand-ink);

	/* The header and footer are always dark, in both themes */
	--color-chrome-bg: var(--brand-ink);
	--color-chrome-text: var(--brand-paper);
	--color-chrome-accent: var(--brand-yellow);

	/* Typography: self-hosted IBM Plex (see Fonts above), with system fallbacks */
	--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-serif: "IBM Plex Serif", Georgia, "Times New Roman", Times, serif;
	--font-weight-heading: 500;
	--font-size-small: 0.875rem;
	--font-size-base: 1.0625rem;
	--font-size-hero: 2rem;
	--font-size-h1: 2rem;
	--font-size-h2: 1.5rem;
	--font-size-h3: 1.2rem;
	--line-height: 1.6;

	/* Spacing scale */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-s: 0.75rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2.5rem;
	--space-2xl: 4rem;
	--space-3xl: 7rem;

	/* Layout */
	--width-content: 50rem;
	--width-infobox: 18rem;
	--gap-columns: var(--space-xl);
	/* Exactly fits an incident page's text column, gap, and quick facts box, plus
		side padding. The header, hero, page, and footer all share this width, so
		their edges line up. */
	--width-page: calc(var(--width-content) + var(--gap-columns) + var(--width-infobox) + 2 * var(--space-m));
	--radius: 0.25rem;

	color-scheme: light dark;
}

/* Dark theme: swap paper and ink, and use yellow for links */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: var(--brand-ink);
		--color-text: var(--brand-paper);
		--color-muted: #c9c5da;
		--color-border: #4a4560;
		--color-surface: #332e45;
		--color-link: var(--brand-yellow);
		--color-focus: var(--brand-yellow);
	}
}

@media (min-width: 48rem) {
	:root {
		--font-size-hero: 3rem;
		--font-size-h1: 2.5rem;
		--font-size-h2: 1.75rem;
	}
}

/* ==========================================================================
	Base
	========================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	/* Long words and URLs wrap instead of causing horizontal scrolling */
	overflow-wrap: break-word;
	/* Keeps the footer at the bottom on short pages */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

h1,
h2,
h3 {
	font-family: var(--font-serif);
	font-weight: var(--font-weight-heading);
	line-height: 1.25;
	margin: var(--space-l) 0 var(--space-s);
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
	font-family: var(--font-sans);
	font-weight: 700;
}

p,
ul,
ol,
dl {
	margin: 0 0 var(--space-m);
}

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

a:hover {
	background: var(--color-highlight-bg);
	color: var(--color-highlight-text);
	text-decoration-thickness: 2px;
}

/* Strong, high-contrast focus ring (WCAG 2.2 focus appearance) */
:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--brand-yellow);
	color: var(--brand-ink);
}

/* Hides text visually but keeps it for screen readers, e.g. "(opens in new tab)" */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
	Skip link
	========================================================================== */

.skip-link {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 10;
	padding: var(--space-xs) var(--space-m);
	background: var(--brand-yellow);
	color: var(--brand-ink);
	font-weight: 700;
	border-radius: var(--radius);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
	outline-color: var(--brand-paper);
}

/* ==========================================================================
	Site header and footer (always dark)
	========================================================================== */

.site-header,
.site-footer {
	--color-link: var(--color-chrome-text);
	--color-focus: var(--color-chrome-accent);
	background: var(--color-chrome-bg);
	color: var(--color-chrome-text);
}

.site-header__inner,
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s) var(--space-l);
	max-width: var(--width-page);
	margin: 0 auto;
	padding: var(--space-s) var(--space-m);
}

.site-logo {
	display: inline-block;
	line-height: 0;
	border-radius: var(--radius);
}

.site-logo:hover {
	background: transparent;
}

.site-logo img {
	display: block;
	width: auto;
	height: 3rem;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	/* Cancels the last link's side padding so its text lines up with the page edge */
	margin: 0 calc(-1 * var(--space-xs)) 0 0;
	padding: 0;
	list-style: none;
}

/* Plain nav links: underline only on hover or keyboard focus, no highlight.
	The current page keeps aria-current for screen readers but isn't styled. */
.site-nav a {
	display: inline-block;
	padding: var(--space-2xs) var(--space-xs);
	border-radius: var(--radius);
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	background: transparent;
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.site-footer {
	margin-top: var(--space-xl);
	font-size: var(--font-size-small);
}

.site-footer p {
	margin: 0;
}

/* ==========================================================================
	Page layout
	========================================================================== */

.page {
	width: 100%;
	max-width: var(--width-page);
	margin: 0 auto;
	padding: var(--space-m);
}

/* Simple text pages (About, Act, 404) */
.prose {
	max-width: var(--width-content);
}

/* About page: the newsletter tile sits under the text on small screens, and in
	a right-hand column on wide screens, lined up with the top of the title */
.about-sidebar {
	margin-top: var(--space-l);
}

@media (min-width: 64rem) {
	.about {
		display: grid;
		grid-template-columns: minmax(0, var(--width-content)) 22rem;
		column-gap: var(--gap-columns);
		align-items: start;
	}

	.about-sidebar {
		margin-top: calc(var(--space-l) + var(--space-xs));
	}
}

/* ==========================================================================
	Tiles (Act page, and the newsletter tile on About)
	On the Act page, one column on phones, two from 40rem, three from 64rem. Some tiles span two
	columns, depending on the layout, so every row is filled with no gaps:
	- .tile--wide spans two columns from 40rem up
	- .tile--wide-md spans two columns only in the two-column layout
	- .tile--wide-lg spans two columns only in the three-column layout
	========================================================================== */

.action-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	margin-top: var(--space-l);
}

@media (min-width: 40rem) {
	.action-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tile--wide {
		grid-column: span 2;
	}
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
	.tile--wide-md {
		grid-column: span 2;
	}
}

@media (min-width: 64rem) {
	.action-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tile--wide-lg {
		grid-column: span 2;
	}
}

.tile {
	padding: var(--space-m) var(--space-m) var(--space-l);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.tile h2 {
	margin-top: 0;
	font-size: 1.5rem;
	line-height: 1.3;
	text-wrap: balance;
}

.tile > :last-child {
	margin-bottom: 0;
}

/* Lists of outbound links: no bullets, a little space between items */
.action-links {
	padding: 0;
	list-style: none;
}

.action-links li {
	margin-bottom: var(--space-xs);
}

/* Link lists that flow into as many columns as fit (countries, share links) */
.action-links--columns {
	--column-min: 12rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-min)), 1fr));
	column-gap: var(--space-m);
}

/* Narrower columns for short link text, like the share links */
.action-links--narrow {
	--column-min: 7rem;
}

/* Flag emojis come from the system emoji font. (Windows has no flag emojis,
	so it shows the two-letter country code instead.) */
.flag {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ==========================================================================
	Video list (Learn More tile)
	Thumbnail on top, title and channel underneath, in as many columns as fit.
	The whole thumbnail and title are one link.
	========================================================================== */

.video-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.video a {
	display: block;
	border-radius: var(--radius);
	text-decoration: none;
}

/* Only the title gets the yellow hover highlight, not the image */
.video a:hover {
	background: transparent;
}

.video__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.video__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.video a:hover .video__title {
	background: var(--color-highlight-bg);
	color: var(--color-highlight-text);
	text-decoration-thickness: 2px;
}

.video__byline {
	display: block;
	color: var(--color-muted);
	font-size: var(--font-size-small);
}

/* ==========================================================================
	Newsletter form (Act page)
	========================================================================== */

/* The top margin collapses with the heading's smaller bottom margin, so the
	gap under the heading is exactly --space-l */
.newsletter-form {
	display: grid;
	gap: var(--space-m);
	margin-top: var(--space-l);
}

/* An input with its button beside it. The input takes the remaining width. */
.form-inline {
	display: flex;
	gap: var(--space-xs);
}

.form-inline .form-input {
	flex: 1;
	min-width: 0;
}

/* The border uses the muted text color for 3:1 contrast (WCAG non-text contrast) */
.form-input {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-muted);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
}

.form-input::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-choices {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* The two audience options form one segmented control: always side by side,
	with no gap. The radio buttons are visually hidden, so the boxes themselves
	show which option is chosen. */
.form-choices__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Each option is a bordered box; the whole box is the clickable label */
.form-choice {
	position: relative;
	padding: var(--space-s);
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	font-size: var(--font-size-small);
	cursor: pointer;
	/* The unchosen option is faded. */
	opacity: 0.5;
}

/* Round only the outer corners, and overlap the shared middle border */
.form-choice:first-child {
	border-radius: var(--radius) 0 0 var(--radius);
}

.form-choice:last-child {
	margin-left: -1px;
	border-radius: 0 var(--radius) var(--radius) 0;
}

@media (prefers-reduced-motion: no-preference) {
	.form-choice {
		transition: opacity 0.15s ease;
	}
}

.form-choice:hover {
	opacity: 1;
}

/* The chosen option is fully opaque with a darker border. z-index keeps its
	border on top of the shared middle edge. */
.form-choice:has(input:checked) {
	z-index: 1;
	border-color: var(--color-text);
	opacity: 1;
}

/* The radio itself is hidden but still focusable, so the box shows the focus ring */
.form-choice:has(input:focus-visible) {
	z-index: 2;
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.form-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
	Home page hero
	========================================================================== */

/* Same dark background as the header, so the two read as one block */
.hero {
	background: var(--brand-ink);
	color: var(--brand-paper);
	text-align: center;
}

.hero__inner {
	max-width: var(--width-page);
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-m);
}

.hero h1 {
	max-width: 18em;
	margin: 0 auto;
	font-size: var(--font-size-hero);
	line-height: 1.15;
}

@media (min-width: 48rem) {
	.hero__inner {
		padding-top: var(--space-2xl);
		padding-bottom: var(--space-3xl);
	}
}

/* ==========================================================================
	Home page incident cards
	A grid of tiles that fills as many columns as fit (one on phones, up to
	three on wide screens). Each card is a single link, so the whole tile is
	clickable and gets the hover/focus effect.
	========================================================================== */

.incident-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-m);
	margin: var(--space-l) 0 0;
	padding: 0;
	list-style: none;
}

/* Lets each card stretch to the height of the tallest card in its row */
.incident-list li {
	display: grid;
}

.incident-card {
	display: block;
	min-height: 8rem;
	padding: var(--space-m) var(--space-m) var(--space-l);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.incident-card {
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}
}

/* Whole-card highlight in brand yellow. Focus also keeps the global outline. */
.incident-card:hover,
.incident-card:focus-visible {
	background: var(--color-highlight-bg);
	border-color: var(--color-highlight-text);
	color: var(--color-highlight-text);
	text-decoration: none;
}

.incident-card__title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.3;
	text-wrap: balance;
}

/* Descriptions are cut off after three lines on regular cards */
.incident-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: var(--space-xs) 0 0;
	color: var(--color-muted);
	font-size: var(--font-size-small);
}

/* Muted text would be too faint on the yellow highlight */
.incident-card:hover .incident-card__description,
.incident-card:focus-visible .incident-card__description {
	color: inherit;
}

/* "New" tag on the newest incident. It flips to ink when the card turns
	yellow, so it stays visible. */
.incident-card__tag {
	display: inline-block;
	margin-bottom: var(--space-xs);
	padding: 0 var(--space-xs);
	border-radius: var(--radius);
	background: var(--brand-yellow);
	color: var(--brand-ink);
	font-size: var(--font-size-small);
	font-weight: 700;
}

.incident-card:hover .incident-card__tag,
.incident-card:focus-visible .incident-card__tag {
	background: var(--brand-ink);
	color: var(--brand-yellow);
}

/* The newest incident spans two columns once the grid has room for two,
	with a bigger title and the full description */
@media (min-width: 40rem) {
	.incident-list__featured {
		grid-column: span 2;
	}
}

.incident-card--featured {
	padding: var(--space-l);
}

.incident-card--featured .incident-card__title {
	font-size: var(--font-size-h2);
}

.incident-card--featured .incident-card__description {
	display: block;
	max-width: 40em;
	margin-top: var(--space-s);
	font-size: var(--font-size-base);
}

/* ==========================================================================
	Incident page
	Small screens: title, quick facts, then the write-up, stacked.
	Wide screens: title and write-up on the left, quick facts in a right column.
	========================================================================== */

.incident-header {
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-l);
}

.incident-header h1 {
	margin-bottom: var(--space-s);
}

/* Section headings get a rule underneath, Wikipedia-style */
.incident-body h2 {
	padding-bottom: var(--space-2xs);
	border-bottom: 1px solid var(--color-border);
	margin-top: var(--space-xl);
}

.incident-body > p:first-child {
	margin-top: 0;
}

/* Lists get a smaller indent than the browser default */
.incident-body ul,
.incident-body ol {
	padding-left: var(--space-l);
}

/* A little breathing room between list items, which are often long */
.incident-body li {
	margin-bottom: var(--space-xs);
}

@media (min-width: 64rem) {
	.incident {
		display: grid;
		grid-template-columns: minmax(0, var(--width-content)) var(--width-infobox);
		grid-template-areas:
			"header facts"
			"body facts";
		grid-template-rows: auto 1fr;
		column-gap: var(--gap-columns);
	}

	.incident-header {
		grid-area: header;
	}

	.incident-body {
		grid-area: body;
	}

	/* Quick facts plus the Share and Take Action buttons. The column stretches
		the full height of the article, so the buttons have room to stick. */
	.incident-sidebar {
		grid-area: facts;
		/* Lines the top of the box up with the top of the title text */
		margin-top: calc(var(--space-l) + var(--space-xs));
	}

	/* The buttons stay in view while the article scrolls past */
	.incident-actions {
		position: sticky;
		top: var(--space-m);
	}
}

/* ==========================================================================
	Share and Take Action buttons (under the quick facts)
	========================================================================== */

.incident-sidebar {
	margin-bottom: var(--space-l);
}

.incident-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-s);
}

/* Shared by <button> and <a>, so links and buttons look the same.
	Same background as the Quick Facts box, yellow on hover, focus, and press. */
.button {
	flex: 1 1 8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Comfortably above the WCAG 2.2 minimum target size */
	min-height: 2.75rem;
	padding: var(--space-xs) var(--space-m);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/* A solid button for the main action of a form: ink on light pages, paper on
	dark ones, and yellow on hover or focus like other buttons */
.button--primary {
	flex: none;
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-bg);
	font-size: var(--font-size-small);
}

/* The hidden attribute must win over display: inline-flex above */
.button[hidden] {
	display: none;
}

.button:hover,
.button:focus-visible,
.button:active {
	background: var(--color-highlight-bg);
	border-color: var(--color-highlight-text);
	color: var(--color-highlight-text);
	text-decoration: none;
}

/* ==========================================================================
	Infobox (quick facts)
	========================================================================== */

.infobox {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin: 0;
	font-size: var(--font-size-small);
	overflow: hidden;
}

.infobox__title {
	margin: 0;
	padding: var(--space-xs) var(--space-s);
	background: var(--brand-yellow);
	color: var(--brand-ink);
	font-family: var(--font-serif);
	font-size: 1.2rem;
	text-align: center;
}

.infobox__list {
	margin: 0;
	padding: var(--space-xs) var(--space-s);
}

/* Each fact is a label/value pair laid out in two columns */
.infobox__row {
	display: grid;
	grid-template-columns: minmax(6rem, 40%) 1fr;
	gap: var(--space-s);
	padding: var(--space-xs) 0;
	border-top: 1px solid var(--color-border);
}

.infobox__row:first-child {
	border-top: 0;
}

.infobox__row dt {
	font-weight: 700;
}

.infobox__row dd {
	margin: 0;
}

/* ==========================================================================
	Print
	========================================================================== */

@media print {
	:root {
		--color-bg: #fff;
		--color-text: #000;
		--color-muted: #333;
		--color-border: #999;
		--color-surface: #fff;
		--color-link: #000;
	}

	body {
		font-size: 11pt;
		display: block;
	}

	/* Hide navigation, buttons, forms, and other screen-only chrome */
	.skip-link,
	.site-header,
	.incident-actions,
	#newsletter {
		display: none !important;
	}

	/* Keep the license notice, in plain black and white */
	.site-footer {
		--color-link: #000;
		background: none;
		color: #000;
		border-top: 1px solid var(--color-border);
	}

	.site-footer__inner {
		padding: var(--space-s) 0 0;
	}

	.page {
		max-width: none;
		padding: 0;
	}

	.hero {
		background: none;
		color: #000;
	}

	.hero__inner {
		padding: 0 0 var(--space-l);
	}

	/* Stack the infobox above the write-up on paper */
	.incident {
		display: block;
	}

	.incident-sidebar {
		margin-top: 0;
	}

	.infobox__title {
		background: none;
		border-bottom: 1px solid var(--color-border);
	}

	h2,
	h3 {
		break-after: avoid;
	}

	/* The About page's sidebar only holds the newsletter, which is hidden,
		so drop its column */
	.about {
		display: block;
	}

	/* Act page tiles print as plain stacked boxes */
	.action-grid {
		display: block;
	}

	.tile {
		margin-bottom: var(--space-m);
	}

	.infobox,
	.incident-body li,
	.tile {
		break-inside: avoid;
	}

	/* Print the full address of external links */
	.incident-body a[href^="http"]::after,
	.prose a[href^="http"]::after,
	.tile a[href^="http"]::after {
		content: " <" attr(href) ">";
		word-break: break-all;
	}
}