/*
	anabhoga.com

	One page, no JavaScript, three ideas:

	1. The page is the photograph, continued. Its background is a gradient built
	   from colours sampled out of the cover itself (see tokens.css), running sky
	   at the top to deep water at the bottom. Because the colour just outside the
	   artwork equals the colour just inside it, the plate has no visible edge at
	   any viewport width, and the page below it carries straight on down.
	2. Nothing has an attack. Every transition here is long and eased, which is
	   also the rule the music follows.
	3. The artwork is never overprinted. It carries its own wordmark; the page
	   sets nothing on top of it.
*/

/* ---------------------------------------------------------------- reset -- */

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

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

body,
h1, h2, p, figure, blockquote { margin: 0; }

img { display: block; max-inline-size: 100%; height: auto; }

/* --------------------------------------------------------------- layout -- */

:root {
	color-scheme: dark;

	--measure: 34rem;
	--gutter: clamp(1.25rem, 6vw, 3.5rem);
	--step: clamp(4.5rem, 13vh, 9rem);
	--hero-pad: clamp(1.5rem, 7vh, 5rem);

	/* The typeset wordmark over the hero. The supplied artwork carries its own
	   lettering, macron and all, so this is off. If a future cover arrives
	   without it, set this to `block`. */
	--hero-wordmark: none;

	--serif: 'EB Garamond', Georgia, 'Times New Roman', Times, serif;
	--display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	--slow: 700ms cubic-bezier(0.33, 0, 0.2, 1);
}

body {
	font-family: var(--serif);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.72;
	color: var(--paper);

	/*
		The page picks up where the photograph stops, and then stays there. The
		descent happens inside the picture; continuing it down the document meant
		a second gradient that had to line up with the bottom of the artwork, and
		it cannot - the document's height is not the artwork's. One still field,
		the exact colour the water ends on.
	*/
	background-color: var(--deep);

	min-height: 100svh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
	Grain. The cover is a grainy photograph and the page continues it, so the page
	has to have a surface too. Fixed rather than scrolling, because grain belongs
	to the print and not to the thing being printed.
*/
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: url('grain.png');
	background-repeat: repeat;
	background-size: 96px 96px;
	opacity: 0.045;
	mix-blend-mode: overlay;
}

.visually-hidden {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; white-space: nowrap;
	clip-path: inset(50%);
}

/* ----------------------------------------------------------------- hero -- */

.hero {
	padding: var(--hero-pad) var(--gutter) 0;

	/*
		Sky above the artwork, water below it, with the switch exactly at the top
		edge of the plate - which the gradient below then covers. Both halves are
		sampled from the picture, so both edges of it meet a colour identical to
		the one inside.
	*/
	background-image: linear-gradient(
		to bottom,
		var(--sky) 0,
		var(--sky) var(--hero-pad),
		var(--deep) var(--hero-pad)
	);
}

.plate {
	position: relative;
	inline-size: min(100%, 40rem);
	margin-inline: auto;
	/* No frame, no shadow, no radius. A shadow would announce an edge, which is
	   the one thing this layout exists to avoid. */
	animation: surface 1600ms cubic-bezier(0.33, 0, 0.2, 1) both;
}

/*
	The backdrop, full-bleed and exactly as tall as the image: the same five
	sampled bands in the same order, so the colour beside any row of the
	photograph is that row's own average. The artwork keeps a clean, hard edge;
	this is what stops that edge reading as a frame around it.
*/
.plate::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	transform: translateX(-50%);
	background-image: linear-gradient(
		to bottom,
		var(--sky) 0,
		var(--haze) 27%,
		var(--fog) 47%,
		var(--water) 68%,
		var(--deep) 100%
	);
	z-index: -1;
}

.plate img {
	inline-size: 100%;
}

@keyframes surface {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/*
	The typeset wordmark, off by default. The artwork carries its own - macron and
	all, which is where the macron belongs - so nothing is set over or under it.
	If a cover ever arrives without lettering, flip --hero-wordmark to block.
*/
.hero .wordmark-typeset {
	display: var(--hero-wordmark);
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(2rem, 8vw, 4rem);
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-align: center;
	color: var(--paper);
	margin-block-start: clamp(2rem, 6vh, 3.5rem);
}

.standfirst {
	inline-size: min(100%, var(--measure));
	margin: clamp(2.5rem, 8vh, 5rem) auto 0;
	text-align: center;
	text-wrap: balance;
}

.lede {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.4375rem, 1.05rem + 1.9vw, 2.25rem);
	line-height: 1.32;
	letter-spacing: 0.02em;
	color: var(--paper);
}


/* ----------------------------------------------------------------- lines -- */

/*
	Three lines, not a paragraph. They are set in the display face, a size below
	the line under the cover, and far enough apart that the eye finishes one
	before it finds the next. The measure is narrower than the rest of the page
	The breaks are written in, not balanced. Balancing picks the evenest break,
	which here was "caught the / wind" and "in the room, and /" - a line of verse
	breaks where the sense does. The longest half is 38 characters and still fits
	on one line at 390px, so the written breaks hold all the way down.
*/

main {
	/* The gutter sits outside the measure, so 30rem is what the text actually
	   gets rather than what the box is. */
	inline-size: min(100%, calc(30rem + 2 * var(--gutter)));
	margin-inline: auto;
	padding: var(--step) var(--gutter) 0;
	text-align: center;
}

main p {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.1875rem, 1rem + 1vw, 1.5rem);
	line-height: 1.5;
	letter-spacing: 0.012em;
	color: var(--paper);
}

main p + p { margin-block-start: 2.6em; }

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

footer {
	inline-size: min(100%, var(--measure));
	margin-inline: auto;
	padding: var(--step) var(--gutter) clamp(4rem, 12vh, 7rem);
	text-align: center;
}


.contact { font-size: 1.0625em; }

.elsewhere {
	margin-block-start: 0.75em;
	color: var(--muted);
}

.elsewhere a { margin-inline: 0.35em; }

.note {
	margin-block-start: 3.5em;
	font-size: 0.875em;
	line-height: 1.7;
	color: var(--muted);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- links -- */

a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid color-mix(in oklab, currentColor 32%, transparent);
	padding-block-end: 0.12em;
	transition: color var(--slow), border-color var(--slow);
}

a:hover,
a:focus-visible {
	color: var(--paper);
	border-block-end-color: color-mix(in oklab, currentColor 70%, transparent);
}

a:focus-visible {
	outline: 1px solid var(--paper);
	outline-offset: 0.35em;
	border-block-end-color: transparent;
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

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

@media print {
	body { background: #fff; color: #000; }
	.plate { animation: none; }
	a { border: 0; }
}