/*
 * Change the text color here (background image: see index.html).
 * Pick a color that reads well on the image.
 */
:root {
	--text-color: #ff0000;
}

/*
 * Tinos: free Times New Roman clone with identical widths, so line breaks match.
 * Only downloaded where Times New Roman isn't installed (Android, Linux).
 */
@font-face {
	font-family: 'Tinos';
	font-display: swap;
	src: url('fonts/tinos.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	margin: 0;
	padding: 0 16px;
	font: 17px/1.15 'Times New Roman', Tinos, serif;
	color: var(--text-color);
	text-align: center;
}

/* Text sits low: free space split 5:1 above/below on mobile, 7:1 on desktop, per artboards */
body::before {
	content: '';
	flex: 5;
}

body::after {
	content: '';
	flex: 1;
}

.background {
	--length: 100lvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: var(--length);
	object-fit: cover;
}

/*
 * iOS 26 Safari paints only scrolled content behind its status bar and floating toolbar.
 * The page starts scrolled past a top pad (script in index.html), so the image's top sits
 * behind the status bar; overshooting the large viewport reaches the screen bottom.
 * Hidden overflow still allows that script scroll, but blocks the user's.
 */
@supports (-webkit-touch-callout: none) {
	:root {
		--status-bar-pad: 100px;
	}

	html,
	body {
		overflow: hidden;
	}

	body {
		margin-top: var(--status-bar-pad);
	}

	.background {
		--length: calc(100lvh + var(--status-bar-pad) + 100px);
		position: absolute;
	}
}

/*
 * Landscape screens: rotate the portrait image 90° to fill the width, per mock.
 * Delete this block when using a landscape image.
 */
@media (orientation: landscape) {
	/* Rotate about the top-left corner, then shift right: covers 100vw × --length */
	.background {
		width: var(--length);
		height: 100vw;
		transform-origin: top left;
		transform: translateX(100vw) rotate(90deg);
	}
}

/* One blank line between blocks */
main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1lh;
}

h1,
p {
	margin: 0;
}

h1 {
	font-size: 1.2em;
	font-weight: normal;
}

/* Line length tuned to reproduce the mock's line breaks */
p {
	max-width: 17.2em;
}

a {
	color: inherit;
	text-decoration: none;
}

@media (min-width: 768px) {
	body {
		font-size: 20px;
	}

	body::before {
		flex: 7;
	}

	p {
		max-width: 24.7em;
	}
}