/*
Theme Name: Vodka
Description: The Kalemon theme. Every page opens on a charcoal cover.
Version: 1.0
Text Domain: vodka
Requires PHP: 8.1
*/

/* One idea: the charcoal cover. It runs on from the header, holds each page's title, and a story's
   photograph straddles its edge onto paper. Below it everything keeps a central axis, ruled like a paper. */

@layer base, chrome, story, front, pages, rooms, print;

@font-face { font-family: "Vodka Text"; src: url(assets/fonts/serif-core.woff2) format("woff2"); font-weight: 400 800; font-style: normal; unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2116, U+2212, U+058F; font-display: swap; }
@font-face { font-family: "Vodka Text"; src: url(assets/fonts/serif-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; unicode-range: U+0041-005A, U+0061-007A, U+00C0-00FF, U+0152-0153, U+0178; font-display: swap; }
@font-face { font-family: "Vodka Text"; src: url(assets/fonts/serif-cyr.woff2) format("woff2"); font-weight: 400 800; font-style: normal; unicode-range: U+0401, U+0404, U+0406, U+0407, U+0410-044F, U+0451, U+0454, U+0456, U+0457, U+0490, U+0491; font-display: swap; }
@font-face { font-family: "Vodka Text"; src: url(assets/fonts/serif-italic-core.woff2) format("woff2"); font-weight: 400 500; font-style: italic; unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2116, U+2212, U+058F; font-display: swap; }
@font-face { font-family: "Vodka Text"; src: url(assets/fonts/serif-italic-latin.woff2) format("woff2"); font-weight: 400 500; font-style: italic; unicode-range: U+0041-005A, U+0061-007A, U+00C0-00FF, U+0152-0153, U+0178; font-display: swap; }
@font-face { font-family: "Vodka Text"; src: url(assets/fonts/serif-italic-cyr.woff2) format("woff2"); font-weight: 400 500; font-style: italic; unicode-range: U+0401, U+0404, U+0406, U+0407, U+0410-044F, U+0451, U+0454, U+0456, U+0457, U+0490, U+0491; font-display: swap; }
@font-face { font-family: "Vodka Label"; src: url(assets/fonts/sans-core.woff2) format("woff2"); font-weight: 400 800; unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2116, U+2212, U+058F, U+0049, U+0056, U+0058; font-display: swap; }
@font-face { font-family: "Vodka Label"; src: url(assets/fonts/sans-latin.woff2) format("woff2"); font-weight: 400 800; unicode-range: U+0041-0048, U+004A-0055, U+0057, U+0059-005A, U+0061-007A, U+00C0-00FF, U+0152-0153, U+0178; font-display: swap; }
@font-face { font-family: "Vodka Label"; src: url(assets/fonts/sans-cyr.woff2) format("woff2"); font-weight: 400 800; unicode-range: U+0401, U+0404, U+0406, U+0407, U+0410-044F, U+0451, U+0454, U+0456, U+0457, U+0490, U+0491; font-display: swap; }
@font-face { font-family: "Vodka Armenian"; src: url(assets/fonts/arm-serif.woff2) format("woff2"); font-weight: 400 800; size-adjust: 103%; unicode-range: U+0531-0556, U+0559-055F, U+0561-0587, U+0589, U+058A, U+FB13-FB17; font-display: swap; }
@font-face { font-family: "Vodka Armenian Sans"; src: url(assets/fonts/arm-sans.woff2) format("woff2"); font-weight: 400 800; unicode-range: U+0531-0556, U+0559-055F, U+0561-0587, U+0589, U+058A, U+FB13-FB17; font-display: swap; }
@font-face { font-family: "Vodka Mini"; src: url(assets/fonts/mini-ru.woff2) format("woff2"); font-weight: 400 800; unicode-range: U+0045, U+0046, U+0049, U+0061, U+0062, U+0063, U+0065, U+0067, U+0068, U+0069, U+006B, U+006C, U+006D, U+006E, U+006F, U+0072, U+0073, U+0074, U+0420, U+0438, U+0439, U+043A, U+0441, U+0443; font-display: swap; }
@font-face { font-family: "Vodka Mini"; src: url(assets/fonts/mini-hy.woff2) format("woff2"); font-weight: 400 800; unicode-range: U+0540, U+0561, U+0565, U+0575, U+0576, U+0580; font-display: swap; }

@layer base {
	:root {
		--paper: #fff;
		--ink: #141414;
		--soft: #5f5f5f;
		--line: #d9d6d0;
		--band: #1d1d1d;
		--band-ink: #f4f2ec;
		--band-soft: #b4b1a8;
		--red: #c8201a;
		--m: clamp(20px, 4vw, 48px);
		--page: 1240px;
		--wide: 1120px;
		--col: 42rem;
		--serif: "Vodka Text", "Vodka Armenian", Georgia, serif;
		--sans: "Vodka Label", "Vodka Armenian Sans", "Arial Narrow", Arial, sans-serif;
		--stitch: linear-gradient(90deg, currentColor 45%, transparent 45%) 0 0 / 9px 4px round;
		--dots: linear-gradient(90deg, currentColor 34%, transparent 34%) 0 0 / 5px 1px round;
		--tc: min(100vw - 2 * var(--m), 62rem);
		--k: 1;
	}
	:root:lang(hy), [lang="hy"] { --k: 0.86; }
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body {
		margin: 0;
		background: var(--paper);
		color: var(--ink);
		font: 400 clamp(1.0625rem, 0.96rem + 0.42vw, 1.25rem) / 1.6 var(--serif);
		font-synthesis: none;
		font-optical-sizing: auto;
		font-variant-numeric: lining-nums;
		overflow-wrap: break-word;
		overflow-x: clip;
	}
	[lang="hy"] { line-height: 1.65; }
	img { display: block; max-width: 100%; height: auto; }
	a { color: inherit; }
	h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
	ul, ol { list-style: none; }
	.swirl { display: block; width: 2em; height: auto; flex: none; }
	.langs a, .editions a, .foot-social a { font-family: "Vodka Mini", var(--sans); }
	.editions { font: 400 0.9375rem/1.4 var(--sans); font-stretch: 75%; text-align: center; }
	.editions a { font-weight: 700; text-underline-offset: 0.25em; }

	/* The small red flag, cut square: the section's name, always tracked and upright. */
	.flag {
		display: inline-block;
		font: 700 0.75rem/1 var(--sans);
		font-stretch: 75%;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		text-decoration: none;
		color: #fff;
		background: var(--red);
		padding: 0.42em 0.7em 0.4em;
	}
	[lang="hy"] .flag, :root:lang(hy) .flag { text-transform: none; letter-spacing: 0.02em; font-size: 0.8125rem; }

	.title {
		font: 800 calc(var(--k) * min(var(--step, 11.4vw), calc(var(--tc) / (var(--w, 8) * 0.72)))) / 1.02 var(--serif);
		letter-spacing: -0.018em;
		text-wrap: balance;
	}
	.title[data-step="s"] { --step: 14vw; }
	.title[data-step="m"] { --step: 11vw; }
	.title[data-step="l"] { --step: 8.8vw; }
	[lang="hy"] .title, :root:lang(hy) .title { letter-spacing: 0; line-height: 1.12; }
	@media (min-width: 640px) {
		.title[data-step="s"] { --step: 7.5rem; }
		.title[data-step="m"] { --step: 6.25rem; }
		.title[data-step="l"] { --step: 4.5rem; }
	}

	.button {
		display: inline-block;
		font: 700 0.875rem/1 var(--sans);
		font-stretch: 75%;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		background: var(--red);
		color: #fff;
		text-decoration: none;
		padding: 0.9rem 1.25rem;
	}
	.button:hover { background: #a81813; }
	[lang="hy"] .button, :root:lang(hy) .button { text-transform: none; letter-spacing: 0.01em; }

	.rule-head {
		font: 700 0.875rem/1 var(--sans);
		font-stretch: 75%;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		padding-block: 0.9rem;
		border-block-start: 3px solid var(--ink);
	}
	[lang="hy"] .rule-head, :root:lang(hy) .rule-head { text-transform: none; }

	/* Cards: the same shape every time, so the grid reads before the pictures do. */
	.entry-pic { position: relative; margin-block-end: 0.9rem; }
	.entry-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
	.entry-pic .flag { position: absolute; inset-block-start: 0; inset-inline-start: 0; }
	.entry-title { font: 700 1.5rem/1.14 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
	[lang="hy"] .entry-title, :root:lang(hy) .entry-title { letter-spacing: 0; line-height: 1.25; font-size: 1.3125rem; }
	.entry-title a { text-decoration: none; }
	.entry-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
	.entry-text { margin-block-start: 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
	.entry-date { margin-block-start: 0.7rem; padding-block-start: 0.55rem; border-block-start: 1px solid var(--line); font: 400 0.8125rem/1.2 var(--sans); font-stretch: 75%; color: var(--soft); }

	.grid-3 { display: grid; gap: 2.75rem 2rem; }
	@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
	@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
}

@layer chrome {
	.mast {
		position: relative;
		background: var(--band);
		color: var(--band-ink);
		font: 400 0.875rem/1 var(--sans);
		font-stretch: 75%;
		letter-spacing: 0.02em;
	}
	.mast-in {
		max-width: var(--page);
		margin-inline: auto;
		padding-inline: var(--m);
		display: flex;
		align-items: center;
		gap: 1.25rem;
		min-height: 56px;
	}
	.mast a { text-decoration: none; }
	.mast-name { display: inline-flex; align-items: center; gap: 0.5rem; margin-inline-end: auto; font: 800 1.1875rem/1 var(--serif); letter-spacing: -0.005em; }
	.mast-name .swirl { width: 2.1em; }
	.home .mast-name span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.mast-wide { display: none; }
	.support { background: var(--red); color: #fff; font-weight: 700; padding: 0.55rem 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8125rem; }
	[lang="hy"] .support, :root:lang(hy) .support { text-transform: none; }
	.support:hover { background: #a81813; }
	.menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: 0.5rem 0; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8125rem; }
	.menu summary::-webkit-details-marker { display: none; }
	.menu[open] nav { position: absolute; inset: 56px 0 auto; z-index: 5; background: var(--band); padding: 0.5rem var(--m) 1.5rem; }
	.menu li { min-height: 44px; display: flex; align-items: center; gap: 0.4rem; font-size: 1.0625rem; }
	.menu li span { color: var(--band-soft); }
	.strong { font-weight: 700; }
	.langs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
	.langs a { font-weight: 700; opacity: 0.72; }
	.langs [aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
	.menu .langs { margin-block-start: 0.5rem; min-height: 44px; align-items: center; font-size: 1.0625rem; }
	@media (min-width: 900px) {
		.mast-in { min-height: 64px; gap: 1.75rem; }
		.mast-phone, .menu { display: none; }
		.mast-wide { display: flex; align-items: center; gap: 1.75rem; }
		.mast-wide > a:not(.support):hover { text-decoration: underline; text-underline-offset: 0.3em; }
	}

	.sections { border-block-end: 1px solid var(--line); }
	.sections ul {
		max-width: var(--page);
		margin-inline: auto;
		padding: 0.9rem var(--m);
		display: flex;
		flex-wrap: nowrap;
		gap: 1.5rem;
		overflow-x: auto;
		scrollbar-width: none;
		font: 700 0.8125rem/1 var(--sans);
		font-stretch: 75%;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	[lang="hy"] .sections ul, :root:lang(hy) .sections ul { text-transform: none; letter-spacing: 0.01em; font-size: 0.875rem; }
	.sections a { text-decoration: none; }
	.sections a:hover, .sections [aria-current] { color: var(--red); }
	@media (min-width: 1000px) { .sections ul { justify-content: center; } }

	/* The back cover. */
	.foot {
		margin-block-start: 5rem;
		background: var(--band);
		color: var(--band-ink);
		font-size: 1rem;
		line-height: 1.5;
		font-family: var(--sans);
		font-stretch: 75%;
	}
	.foot-in { max-width: var(--page); margin-inline: auto; padding: 2.75rem var(--m) 3rem; display: grid; gap: 1.5rem; }
	.foot a { text-decoration: none; }
	.foot a:hover { text-decoration: underline; }
	.foot-line { display: flex; align-items: center; gap: 0.75rem; font: 700 1.25rem/1.2 var(--serif); text-wrap: balance; }
	.foot-line .swirl { width: 3rem; }
	.foot-cols { display: grid; gap: 1.5rem; }
	.foot-cols > div { display: grid; gap: 0.5rem; align-content: start; }
	.foot-run { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; align-content: start; }
	.foot-run span { opacity: 0.65; font-size: 0.875em; }
	.foot-small { font-size: 0.875rem; opacity: 0.7; max-width: 40rem; }
	@media (min-width: 900px) { .foot-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 3rem; } }
}

@layer story {
	/* The cover. */
	.band { background: var(--band); color: var(--band-ink); text-align: center; padding: clamp(1.5rem, 4vw, 3rem) var(--m) 0; display: grid; justify-items: center; gap: 1rem; }
	.band .title { max-width: 62rem; margin-block-end: 0.15em; }
	.byline { font: 400 1rem/1.35 var(--sans); font-stretch: 75%; letter-spacing: 0.015em; }
	.byline a { text-decoration-color: rgb(255 255 255 / 0.45); text-underline-offset: 0.22em; }
	.byline a:hover { text-decoration-color: currentColor; }
	.dateline { font: 400 0.875rem/1.3 var(--sans); font-stretch: 75%; color: var(--band-soft); }
	.band-page { padding-block-end: clamp(2.5rem, 6vw, 4.5rem); }
	.cover { --over: clamp(3.5rem, 22vw, 20rem); }
	.cover .band { padding-block-end: calc(var(--over) + 2rem); }
	.cover-pic { position: relative; margin-block-start: calc(-1 * var(--over)); }
	.cover-pic img { width: 100%; max-width: var(--wide); margin-inline: auto; }
	.cover-tall .cover-pic img { width: auto; max-height: 92svh; }
	.cover-pic figcaption { max-width: var(--wide); margin-inline: auto; }
	figcaption { font: 400 0.875rem/1.35 var(--sans); font-stretch: 75%; color: var(--soft); padding: 0.6rem var(--m) 0; text-align: center; }

	.lede { max-width: 50rem; margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding-inline: var(--m); text-align: center; display: grid; gap: 1.75rem; }
	.stand { font-style: italic; font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.625rem); line-height: 1.42; text-wrap: balance; }
	[lang="hy"] .stand { font-style: normal; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); line-height: 1.55; }
	.time span { white-space: nowrap; }
	.time { display: flex; align-items: center; justify-content: center; gap: 0.9rem; font: 400 0.875rem/1 var(--sans); font-stretch: 75%; color: var(--soft); }
	.time::before, .time::after { content: ""; flex: 0 1 7rem; min-width: 1.5rem; height: 1px; background: var(--dots); }

	/* The body keeps the axis; pictures open out from it on both sides. */
	.body, .after {
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--m), 1fr)
			[wide-start] minmax(0, calc((var(--wide) - var(--col)) / 2))
			[col-start] minmax(0, var(--col)) [col-end]
			minmax(0, calc((var(--wide) - var(--col)) / 2)) [wide-end]
			minmax(var(--m), 1fr) [full-end];
	}
	@media (max-width: 899px) {
		.body, .after { grid-template-columns: [full-start] var(--m) [wide-start col-start] minmax(0, 1fr) [col-end wide-end] var(--m) [full-end]; }
	}
	.body { margin-block-start: clamp(2.5rem, 5vw, 3.75rem); }
	.body > *, .after > * { grid-column: col; }
	.body > p, .body > ul, .body > ol { margin-block-end: 0.95em; text-wrap: pretty; hyphens: auto; }
	.body > ul, .body > ol { padding-inline-start: 1.25em; list-style: revert; }
	.body a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
	@media (min-width: 900px) { .body > p { hyphens: manual; } }

	.has-cap .body > p:first-of-type:not(.said):not(.asked)::first-letter { -webkit-initial-letter: 3; initial-letter: 3; font-weight: 800; margin-inline-end: 0.5rem; }
	@media (min-width: 900px) {
		.has-cap .body > p:first-of-type:not(.said):not(.asked)::first-letter { -webkit-initial-letter: 5; initial-letter: 5; margin-inline-end: 0.8rem; }
	}
	@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
		.has-cap .body > p:first-of-type:not(.said):not(.asked)::first-letter { float: left; font-size: 3.6em; line-height: 0.82; padding-inline-end: 0.08em; }
	}

	.body > p.said { margin-block-end: 0; }
	.body > p.said:not(:has(+ p.said)) { margin-block-end: 0.95em; }
	/* Speech starts on the text edge like any line, so the dash reads as the first step of a ladder. */
	.body > p.asked { font: 700 1.0625em/1.3 var(--sans); font-stretch: 75%; margin-block: 2.2em 0.45em; }
	.body > p.asked + p.asked { margin-block-start: 0.6em; } /* one turn in two paragraphs stays one turn */

	/* Chapters open under a heavy rule, the way a paper opens a new department. */
	.body h2, .body h3 { font-family: var(--sans); font-stretch: 75%; text-wrap: balance; }
	.body h2 {
		font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
		font-weight: 800;
		line-height: 1.12;
		margin-block: 3em 0.8em;
		padding-block-start: 0.7em;
		border-block-start: 4px solid var(--ink);
		scroll-margin-block-start: 1rem;
	}
	.body > h2:first-child { margin-block-start: 0.5rem; }
	/* A chapter the writer numbered opens like a chapter: its word small, a Roman numeral large, the title in the display serif. */
	.body > h2[data-n], .body > h2[data-kind] {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.15em;
		text-align: center;
		font: 800 clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem)/1.1 var(--serif);
		font-stretch: 100%;
		letter-spacing: -0.015em;
		border: 0;
		padding: 0;
		margin-block: 4.5rem 1.75rem;
	}
	[lang="hy"] .body > h2[data-n], [lang="hy"] .body > h2[data-kind] { letter-spacing: 0; line-height: 1.2; }
	.body > h2[data-n]::before {
		content: attr(data-word) "\00a0" attr(data-n);
		order: -2;
		font: 700 0.8125rem/1 var(--sans);
		font-stretch: 75%;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		padding-block-start: 1.1rem;
		border-block-start: 4px solid;
		border-image: var(--stitch) 0 0 0 0 / 4px 0 0 0 stretch;
		min-width: 4.5rem;
		white-space: nowrap;
		margin-block-end: 0.35rem;
	}
	[lang="hy"] .body > h2[data-n]::before { text-transform: none; letter-spacing: 0.06em; }
	.body > h2[data-roman]::before { content: attr(data-word); }
	.body > h2[data-roman]::after {
		content: attr(data-n);
		order: -1;
		font: 800 clamp(4rem, 2.5rem + 6vw, 7.5rem)/0.9 var(--serif);
		letter-spacing: -0.02em;
		margin-block-end: 0.3rem;
	}
	.body > h2[data-kind]::before { content: ""; order: -1; width: 45px; height: 4px; background: var(--stitch); margin-block-end: 1rem; }
	.body > h2[data-kind] { font-style: italic; font-weight: 700; }
	[lang="hy"] .body > h2[data-kind] { font-style: normal; }
	.body > h2[data-n] + p:not(.said):not(.asked)::first-letter, .body > h2[data-kind] + p:not(.said):not(.asked)::first-letter { -webkit-initial-letter: 3; initial-letter: 3; font-weight: 800; margin-inline-end: 0.5rem; }
	.body h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; margin-block: 2em 0.5em; }
	.body > hr { border: 0; color: inherit; width: 45px; height: 4px; margin-block: 2.75em; justify-self: center; background: var(--stitch); }

	/* A line the writer set apart gets the room it asked for. */
	.body > blockquote {
		grid-column: col;
		margin-block: 2.5rem;
		padding-block: 1.5rem;
		border-block: 1px solid var(--ink);
		font-size: 1.3em;
		line-height: 1.35;
		font-style: italic;
		text-align: center;
		text-wrap: balance;
	}
	[lang="hy"] .body > blockquote { font-style: normal; font-weight: 600; }
	.body > blockquote p + p { margin-block-start: 0.75em; }
	.body > blockquote.verse { font-size: 1em; border: 0; padding: 0; white-space: pre-line; text-wrap: wrap; }
	[lang="hy"] .body > blockquote.verse { font-weight: 400; }

	/* Pictures. */
	.body > figure { grid-column: full; margin-block: 2.5rem; }
	.body figure img { width: 100%; }
	.body > .pics { display: grid; gap: 0.5rem; }
	@media (min-width: 640px) {
		.body > .pics { grid-template-columns: 1fr 1fr; align-items: start; }
	}
	@media (min-width: 900px) {
		.body > figure.pic[data-fit="wide"], .body > .pics { grid-column: wide; margin-block: 3.5rem; }
		.body > figure.pic[data-fit="text"] { grid-column: col; }
		.body > figure.pic[data-fit="tall"] { grid-column: wide; margin-block: 3.5rem; }
		.body > figure.pic[data-fit="tall"] img { width: auto; max-height: 90svh; margin-inline: auto; }
	}
	.body > figure.pic[data-fit="small"] { grid-column: col; }
	.body > figure.pic[data-fit="small"] img { width: auto; max-width: min(100%, 14rem); margin-inline: auto; }
	.body > figure.pic[data-on="dark"] { background: var(--band); padding: 1rem; }
	.body > .embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

	.body > .sign { margin-block-start: 1.75rem; }
	.sign { display: flex; justify-content: flex-end; align-items: flex-end; gap: 0.75rem; font: 400 0.875rem/1.35 var(--sans); font-stretch: 75%; text-align: end; }
	.sign .swirl { width: 3.25rem; }

	/* The ending. */
	.after { margin-block-start: 3rem; row-gap: 2rem; }
	.follow, .appeal { padding-inline-start: 1rem; border-inline-start: 3px solid var(--red); }
	.follow p + p, .appeal p + p { margin-block-start: 0.75em; }
	.follow .label, .appeal .label { font: 700 0.875rem/1.3 var(--sans); font-stretch: 75%; color: var(--red); margin-block-end: 0.5rem; }

	.after > .box { grid-column: wide; border: 3px dashed var(--ink); display: grid; }
	.box-ask { background: var(--band); color: var(--band-ink); padding: clamp(1.75rem, 3.5vw, 3rem); display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
	.box-ask p { font-size: 1rem; line-height: 1.6; color: var(--band-ink); }
	.box-line { font: 700 1.1875rem/1.3 var(--serif); }
	[lang="hy"] .box-line { font-style: normal; }
	.box-ask h2 { font: 800 clamp(2rem, 1.5rem + 2vw, 3.25rem)/1.05 var(--serif); letter-spacing: -0.015em; }
	[lang="hy"] .box-ask h2 { letter-spacing: 0; line-height: 1.15; }
	.box-why { padding: clamp(1.75rem, 3.5vw, 3rem); display: grid; gap: 1rem; align-content: start; font-size: 1rem; line-height: 1.6; }
	@media (min-width: 720px) { .after > .box { grid-template-columns: 1fr 1fr; } }

	.next { max-width: var(--page); margin: 4.5rem auto 0; padding-inline: var(--m); }
	.next .grid-3 { margin-block-start: 0.75rem; }
}

@layer front {
	.masthead { background: var(--band); color: var(--band-ink); padding: clamp(0.5rem, 2vw, 1.5rem) var(--m) 0; }
	.masthead-name { display: flex; align-items: center; justify-content: center; gap: 0.18em; font: 800 calc(var(--k) * clamp(3.75rem, 2.2rem + 9vw, 9.5rem))/1 var(--serif); letter-spacing: -0.03em; }
	[lang="hy"] .masthead-name, :root:lang(hy) .masthead-name { letter-spacing: -0.005em; }
	.masthead-name .swirl { width: 1.05em; }
	@media (max-width: 639px) {
		.masthead-name { font-size: calc(var(--k) * 17vw); }
		.masthead-name .swirl { display: none; }
	}
	.masthead-line { max-width: calc(var(--page) - 2 * var(--m)); margin: clamp(0.75rem, 2vw, 1.5rem) auto 0; padding-block: 0.8rem; border-block-start: 1px solid rgb(255 255 255 / 0.28); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
	.masthead-tag { font-style: italic; font-size: 1.0625rem; line-height: 1.2; }
	[lang="hy"] .masthead-tag, :root:lang(hy) .masthead-tag { font-style: normal; }
	.masthead-count { font: 400 0.875rem/1.2 var(--sans); font-stretch: 75%; color: var(--band-soft); }

	/* The lead between two columns. */
	.top { max-width: var(--page); margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding-inline: var(--m); display: grid; gap: 2.5rem; }
	.lead { display: flex; flex-direction: column; align-items: center; text-align: center; order: -1; }
	.lead-pic { align-self: stretch; }
	.lead-pic { display: block; margin-inline: calc(-1 * var(--m)); }
	.lead-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
	.lead .flag { position: relative; margin-block-start: -0.75em; align-self: start; justify-self: center; }
	.lead-title { font: 800 calc(var(--k) * clamp(2.5rem, 1.6rem + 2.6vw, 4rem))/1.03 var(--serif); letter-spacing: -0.018em; margin-block-start: 1rem; text-wrap: balance; }
	[lang="hy"] .lead-title, :root:lang(hy) .lead-title { letter-spacing: 0; line-height: 1.14; }
	.lead-title a { text-decoration: none; }
	.lead-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.1em; }
	.lead-text { margin-block-start: 0.85rem; font-style: italic; font-size: 1.125rem; line-height: 1.45; max-width: 36rem; text-wrap: balance; }
	[lang="hy"] .lead-text, :root:lang(hy) .lead-text { font-style: normal; }
	.lead .entry-date { border: 0; }
	.top-side { display: grid; gap: 2.5rem; align-content: start; }
	@media (min-width: 640px) and (max-width: 1099px) { .top-side { grid-template-columns: 1fr 1fr; gap: 2rem; } }
	@media (min-width: 640px) { .lead-pic { margin-inline: 0; } }
	@media (min-width: 1100px) {
		.top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: 0; }
		.top > * { padding-inline: 1.5rem; }
		.top > *:first-child { padding-inline-start: 0; border-inline-end: 1px solid var(--line); }
		.top > *:last-child { padding-inline-end: 0; border-inline-start: 1px solid var(--line); }
		.lead { order: 0; }
		.top .entry-title { font-size: 1.3125rem; }
		.top .entry-text { -webkit-line-clamp: 4; line-clamp: 4; }
	}

	.run { max-width: var(--page); margin: 3.5rem auto 0; padding: 2.5rem var(--m) 0; }
	.run::before { content: ""; display: block; height: 3px; background: var(--ink); margin-block: -2.5rem 2.5rem; }
	.panel { background: var(--band); color: var(--band-ink); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: center; justify-items: start; outline: 3px dashed var(--band); outline-offset: 5px; }
	.panel h2 { font: 800 clamp(2rem, 1.6rem + 1.4vw, 2.875rem)/1.04 var(--serif); letter-spacing: -0.015em; }
	[lang="hy"] .panel h2, :root:lang(hy) .panel h2 { letter-spacing: 0; line-height: 1.16; }
	.panel p { font-size: 1rem; line-height: 1.5; }

	/* The table of contents. */
	.index { max-width: var(--page); margin: 5rem auto 0; padding-inline: var(--m); display: grid; gap: 3.5rem; }
	.index-head { text-align: center; display: grid; gap: 0.4rem; margin-block-end: -1rem; }
	.index-head h2 { font: 800 calc(var(--k) * clamp(3rem, 2rem + 4vw, 5.5rem))/1 var(--serif); letter-spacing: -0.025em; }
	[lang="hy"] .index-head h2, :root:lang(hy) .index-head h2 { letter-spacing: 0; }
	.index-head p { font: italic 400 1.125rem/1.3 var(--serif); color: var(--soft); }
	.index-head .index-random { font: 700 0.8125rem/1 var(--sans); font-stretch: 75%; letter-spacing: 0.09em; text-transform: uppercase; font-style: normal; margin-block-start: 0.6rem; }
	[lang="hy"] .index-head .index-random { text-transform: none; letter-spacing: 0.02em; }
	.index-random a { color: var(--red); text-decoration: none; }
	.index-random a:hover { text-decoration: underline; }

	/* The door into a special project. */
	.door { display: grid; justify-items: center; text-align: center; gap: 0.9rem; max-width: var(--page); margin: 4rem auto 0; padding: clamp(2.5rem, 6vw, 4.5rem) var(--m); background: radial-gradient(ellipse 70% 60% at 50% 0%, #3b3a37 0%, #121212 72%); color: var(--band-ink); text-decoration: none; }
	.door-kick { font: 700 0.8125rem/1 var(--sans); font-stretch: 75%; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); }
	[lang="hy"] .door-kick { letter-spacing: 0.06em; text-transform: none; }
	.door-name { font: 800 calc(var(--k) * clamp(4rem, 2rem + 9vw, 9rem))/0.92 var(--serif); letter-spacing: -0.03em; }
	[lang="hy"] .door-name { letter-spacing: 0; line-height: 1.05; }
	.door-line { font: 400 1rem/1.3 var(--sans); font-stretch: 75%; color: var(--band-soft); }
	.door-text { max-width: 40rem; font-style: italic; font-size: 1.125rem; line-height: 1.55; text-wrap: balance; }
	[lang="hy"] .door-text { font-style: normal; }
	.door-go { font: 700 0.875rem/1 var(--sans); font-stretch: 75%; letter-spacing: 0.09em; text-transform: uppercase; border-block-end: 2px solid var(--red); padding-block-end: 0.35rem; margin-block-start: 0.5rem; }
	[lang="hy"] .door-go { text-transform: none; letter-spacing: 0.02em; }
	.door:hover .door-go { color: #fff; }
	.section .door { margin-block-start: 2.5rem; }
	[lang="hy"] .index-head p, :root:lang(hy) .index-head p { font-style: normal; }
	.year { border-block-start: 3px solid var(--ink); }
	.year-n { font: 800 calc(1 * clamp(3rem, 2rem + 4vw, 6rem))/1 var(--serif); letter-spacing: -0.02em; padding-block: 0.75rem; }
	.year li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.25rem 1.25rem; padding-block: 0.7rem; border-block-start: 1px solid var(--line); }
	.year li a { font: 700 clamp(1.375rem, 1.1rem + 1.1vw, 2rem)/1.14 var(--serif); letter-spacing: -0.01em; text-decoration: none; text-wrap: balance; }
	[lang="hy"] .year li a, :root:lang(hy) .year li a { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); letter-spacing: 0; line-height: 1.25; }
	.year li a:hover { color: var(--red); }
	.year time { font: 400 0.875rem/1 var(--sans); font-stretch: 75%; color: var(--soft); }
	.index-s { display: none; }
	@media (min-width: 900px) {
		.year { display: grid; grid-template-columns: 11rem minmax(0, 1fr); }
		.year-n { font-size: 3.5rem; }
		.year li { grid-template-columns: minmax(0, 1fr) 11rem 3rem; }
		.index-s { display: block; font: 400 0.875rem/1 var(--sans); font-stretch: 75%; color: var(--soft); }
		.year time { text-align: end; }
	}

	/* A section: the rows. */
	.rows { max-width: 64rem; margin: 2.5rem auto 0; padding-inline: var(--m); display: grid; }
	.rows > li { padding-block: 2rem; border-block-start: 1px solid var(--line); }
	.rows > li:first-child { border: 0; padding-block-start: 0; }
	@media (min-width: 760px) {
		.rows .entry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: 2.25rem; }
		.rows .entry-pic { grid-row: 1 / span 3; margin: 0; }
		.rows .entry-title { font-size: 2rem; }
		.rows .entry-text { font-size: 1.0625rem; -webkit-line-clamp: 6; line-clamp: 6; }
		.rows .entry-date { align-self: end; }
	}
	.rows .entry-pic .flag { display: none; }
	.section .index { margin-block-start: 4rem; }
}

@layer pages {
	.words-body { max-width: calc(var(--col) + 2 * var(--m)); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-inline: var(--m); }
	.words-body > p, .words-body > ul { margin-block-end: 0.95em; text-wrap: pretty; }
	.words-body > h2 { font: 800 clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem)/1.12 var(--sans); font-stretch: 75%; margin-block: 3rem 0.8rem; padding-block-start: 0.7em; border-block-start: 4px solid var(--ink); }
	.kal-last { font: 800 calc(var(--k) * clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem))/1.05 var(--serif); letter-spacing: -0.018em; margin-block: 3.5rem 2rem; text-align: center; text-wrap: balance; }
	.numbers {
		display: grid;
		margin-block: 3.5rem;
		border-block: 3px solid var(--ink);
		font-family: var(--sans);
		font-stretch: 75%;
	}
	.numbers p { padding: 1.25rem 0; text-align: center; font-size: 1rem; line-height: 1.2; border-block-start: 1px solid var(--line); }
	.numbers p:first-child { border: 0; }
	.numbers b { display: block; font: 800 clamp(5.5rem, 3rem + 8vw, 9rem)/0.98 var(--serif); letter-spacing: -0.03em; margin-block-end: 0.12em; }
	@media (min-width: 640px) {
		.numbers { grid-template-columns: repeat(3, 1fr); }
		.numbers p { border-block-start: 0; border-inline-start: 1px solid var(--line); }
	}
	@media (min-width: 1100px) { .numbers { margin-inline: -13rem; } }
	.ask { border: 3px dashed var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); margin-block-end: 2.5rem; display: grid; gap: 1rem; justify-items: center; text-align: center; font-size: 1.25em; }
	.words-body > .sign { margin-block-start: 1.75rem; }
}

@layer rooms {
	/* The story's place in a special, over its title. */
	.special-kick { font: 700 0.8125rem/1.2 var(--sans); font-stretch: 75%; letter-spacing: 0.09em; text-transform: uppercase; color: var(--band-ink); text-decoration: none; border-block: 1px solid rgb(255 255 255 / 0.35); padding-block: 0.45em; }
	[lang="hy"] .special-kick { text-transform: none; letter-spacing: 0.02em; }
	.special-kick:hover { color: #fff; border-color: #fff; }
	.after > .next-room { grid-column: wide; display: grid; gap: 0.35rem; text-align: center; text-decoration: none; padding: 1.75rem 1rem; background: var(--band); color: var(--band-ink); }
	.next-room span { font: 700 0.8125rem/1.2 var(--sans); font-stretch: 75%; letter-spacing: 0.09em; text-transform: uppercase; color: var(--band-soft); }
	.next-room strong { font: 800 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1.08 var(--serif); letter-spacing: -0.015em; }
	.next-room:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
	.next-section { display: grid; gap: 0.5rem; text-align: center; text-decoration: none; width: min(var(--page) - 2 * var(--m), 100% - 2 * var(--m)); margin: 4.5rem auto; padding: clamp(2.25rem, 5vw, 3.75rem) 1rem; background: var(--band); color: var(--band-ink); }
	.next-section strong { font-size: min(clamp(2.25rem, 1.5rem + 3vw, 4rem), (100vw - 5rem) / (var(--w, 8) * 0.85)); }

	/* The darkroom: a photographer's contact sheet. */
	.darkroom { background: #0f0f0f; color: var(--band-ink); }
	.darkroom .band { background: #0f0f0f; }
	.darkroom .flag { display: inline-block; }
	.sheet { max-width: 1400px; margin-inline: auto; padding: 1rem var(--m) 4rem; display: grid; gap: 3rem; }
	.strip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-block: 0.75rem; border-block-start: 1px solid rgb(255 255 255 / 0.2); font: 700 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1.15 var(--serif); }
	.strip-head a { text-decoration: none; }
	.strip-head a:hover { text-decoration: underline; }
	.strip-head time { font: 400 0.8125rem/1 var(--sans); font-stretch: 75%; color: var(--band-soft); }
	.frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.4rem 0.5rem; }
	.frames li { position: relative; }
	.frames img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid #1d1d1d; outline: 1px solid #2c2c2c; filter: saturate(0.92); transition: filter 0.2s; }
	.frames a:hover img { filter: none; }
	.edge { position: absolute; inset: auto auto -1.15rem 0.15rem; font: 700 0.6875rem/1 var(--sans); font-stretch: 75%; letter-spacing: 0.08em; color: #e8a33c; }
	.ring { position: absolute; inset: -14% -9%; width: 118%; height: 128%; color: #e5281d; pointer-events: none; transform: rotate(-3deg); }
	@media (min-width: 900px) { .frames { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
	.darkroom + .foot { margin-block-start: 0; }
}

@layer print {
	@media print {
		.mast, .foot, .box, .sections, .next, .editions { display: none !important; }
		body { font-size: 11pt; color: #000; background: #fff; }
		.band { background: none; color: #000; padding-block-end: 1rem !important; }
		.cover-pic { margin: 0; }
		.body, .after { display: block; margin: 0 2cm; }
		.cover-pic img { max-height: 10cm; width: auto; }
		figure { break-inside: avoid; }
		h1, h2, h3 { break-after: avoid; }
		a { text-decoration: none; }
	}
}