/* RoverTech 2026 — the redesigned home page (inc/redesign.php, redesign-home.php).
   Direction: cinematic and restrained, in the manner of aerospace sites. Black, the brand
   white #F4EFE6 and warm greys; the brand blue #1E3AFF only as a precise accent. Every model
   is a full-screen photograph with its text on the dark side. Layout: one 12-column grid at
   1280px. Motion is slow and quiet and stops for people who ask for reduced motion.
   The only stylesheet of the page: main.css and normalize.css are not loaded with it. */

:root {
	--bg: #000;
	--surface: #0a0a09;
	--line: rgb(244 239 230 / .14);
	--border: rgb(244 239 230 / .26);
	--text: #f4efe6; /* brand white */
	--dim: #c9c4bb;
	--muted: #8e8a83; /* 6:1 on black */
	--accent: #1e3aff; /* brand blue: a signal, never small text on black. Solid points (markers, the
	                      label squares, the plus signs), the leading edge of the heading blocks, the
	                      contact icons, and every control on hover */
	--display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--wrap: 1280px;
	--gutter: clamp(16px, 4vw, 48px);
	--gap: 24px;
	--header-h: 72px;
	--section: clamp(72px, 9vw, 128px);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--wp-admin: 0px; /* the WordPress admin bar of signed-in editors, see the end of the file */
	color-scheme: dark;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* anchors stop under the fixed header; models add the height of the lineup index */
	scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--wp-admin));
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 15px/1.7 var(--mono);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
abbr[title] { text-decoration: none; cursor: help; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--text); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
	position: fixed; left: 16px; top: -80px; z-index: 100;
	padding: 12px 16px; background: var(--text); color: var(--bg);
	font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Type and controls ---------- */

.display {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .005em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* The white block: in a two-line heading it carries the second line, in a one-line heading
   everything after the first word. The words stay white; a copy of them, dark on the brand white
   (::after, from data-text), lies exactly over them and is revealed from the left when the heading
   comes into view, so the letters turn dark as the block passes. Without motion or script the
   block simply stands complete. Oswald: caps .81em, the breve of Й and the dots of Ї reach about
   1.08em, so the top padding leaves room above the capitals. */
.hl {
	position: relative; isolation: isolate;
	display: inline-block;
	padding: .15em .16em .13em;
	line-height: 1;
	white-space: nowrap;
}
/* on its own line the block hangs its side padding to the left: its letters stand under the line above */
.hl-line { display: block; width: fit-content; margin: .08em 0 0 -.16em; }
.hl::after {
	content: attr(data-text);
	content: attr(data-text) / "";
	position: absolute; inset: 0;
	padding: inherit;
	background: var(--text); color: var(--bg);
	clip-path: inset(0 0 0 0);
	transition: clip-path 1s cubic-bezier(.77, 0, .175, 1);
	pointer-events: none;
}
/* a thin blue edge leads the white block across and fades out when it arrives */
.hl::before {
	content: ''; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
	width: .07em; background: var(--accent);
	opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.js .hl:not(.is-in)::after { clip-path: inset(0 100% 0 0); }
	.hl.is-in::before { animation: hl-edge 1s cubic-bezier(.77, 0, .175, 1) both; }
	.hero-title .hl.is-in:not(.is-again)::before { animation-delay: .85s; }
}
/* a block that has left the screen resets without motion, ready to paint in again (proto.js) */
.hl.is-reset::after { transition: none; }
@keyframes hl-edge {
	0% { left: 0; opacity: 1; }
	90% { opacity: 1; }
	100% { left: calc(100% - .07em); opacity: 0; }
}

/* Buttons: a thin outline on a dark glass; brand blue fill on hover */
.btn {
	display: inline-flex; align-items: center; gap: 16px;
	min-height: 52px; padding: 0 24px;
	background: rgb(0 0 0 / .32); border: 1px solid rgb(244 239 230 / .55); color: var(--text);
	font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s, color .3s, border-color .3s;
}
.btn svg, .more svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--text); }
.btn:hover svg { transform: translateX(4px); }

/* ---------- Header: over the hero, solid black once the page moves ---------- */

.site-header {
	position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin)); left: 0; right: 0; z-index: 50;
	border-bottom: 1px solid transparent;
	transition: background-color .4s, border-color .4s;
}
.site-header.is-scrolled { background: var(--bg); border-bottom-color: var(--line); }
.header-row {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	min-height: var(--header-h);
}
/* the wordmark sits low in the logo: 6px up puts its baseline on the menu's baseline */
.logo { position: relative; top: -6px; }
.logo img { width: 148px; }
.nav { display: flex; align-items: center; gap: 44px; }
.nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.nav-list { gap: 36px; }
.nav a {
	position: relative; display: block;
	color: var(--dim);
	font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
	text-decoration: none;
	transition: color .2s;
}
.nav a:hover { color: var(--text); }
.nav-list a { padding: 10px 0; }
/* hover: a brand blue block wipes in from the left behind the word, the way the heading blocks paint
   in; it reaches 12px past the letters on both sides (the right edge minus the trailing letter-space) */
.nav-list a, .lang a:not([aria-current]) { isolation: isolate; }
.nav-list a::after, .lang a:not([aria-current])::after {
	content: ''; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: -12px; right: calc(-12px + .16em);
	background: var(--accent);
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-list a:hover::after, .lang a:not([aria-current]):hover::after { transform: scaleX(1); }
/* the section the page belongs to («Новини» on the news) keeps the block */
.nav-list a[aria-current] { color: var(--text); }
.nav-list a[aria-current]::after { transform: scaleX(1); }
.lang { align-items: center; }
/* 16px around the slash: the hover block of a language (12px past its letters) never touches it */
.lang li + li::before { content: '/'; margin: 0 16px; color: var(--muted); font: 500 12px/1 var(--mono); }
.lang a { display: inline; padding: 10px 0; color: var(--muted); }
.lang a[aria-current="page"] { color: var(--text); }
.burger { display: none; }

@media (max-width: 767.98px) {
	.header-row { flex-wrap: wrap; }
	.js .header-row { flex-wrap: nowrap; }
	.js .burger {
		display: flex; flex-direction: column; justify-content: center; gap: 6px;
		width: 44px; height: 44px; padding: 0 11px;
		background: none; border: 1px solid var(--border); cursor: pointer;
		transition: background-color .25s, border-color .25s;
	}
	/* brand blue on hover, like every other control; on touch screens while pressed (a tap leaves no hover) */
	.js .burger:active { background: var(--accent); border-color: var(--accent); }
	@media (hover: hover) {
		.js .burger:hover { background: var(--accent); border-color: var(--accent); }
	}
	.burger span { display: block; height: 1.5px; background: var(--text); transition: transform .25s; }
	.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
	.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
	.js .nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 24px;
		padding: 8px var(--gutter) 28px;
		background: var(--bg); border-bottom: 1px solid var(--line);
	}
	.js .site-header[data-open] { background: var(--bg); }
	.js .site-header[data-open] .nav { display: flex; }
	.js .nav-list { flex-direction: column; gap: 0; }
	.js .nav-list a { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
	.js .nav-list a::after, .js .lang a::after { display: none; }
}

/* ---------- Hero: the slogan over the lineup, the full first screen ---------- */

.hero {
	position: relative; overflow: clip;
	display: flex; flex-direction: column;
	min-height: 100svh;
	padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(28px, 6vh, 72px));
	padding-bottom: clamp(20px, 3vh, 36px);
}
/* «Robots for the», the widest line, measures 7.1em: this size keeps every line whole */
.hero-title { font-size: clamp(44px, 6.4vw, 104px); line-height: .94; }
.hero-title .line { display: block; overflow: hidden; padding: .1em .2em; margin: -.1em -.2em; }
/* the first reveal waits for the lines to rise; later ones start at once */
.hero-title .hl:not(.is-again)::after { transition-delay: .85s; }
.hero-title .line > span { display: block; animation: line-up 1.2s var(--ease) both; }
.hero-title .line + .line > span { animation-delay: .1s; }

@keyframes line-up { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }

.stage { position: relative; margin-top: auto; padding-top: clamp(16px, 3vh, 40px); }
.stage-frame { position: relative; width: min(100%, 1600px); margin-inline: auto; }
.stage-img { width: 100%; animation: stage-in 2.2s .1s var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: scale(1.04); } }

/* Machines on the picture: the whole machine answers the pointer. Hover draws corner marks
   around it and lights its point; a click leads to the model */
.spots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.spot {
	position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h);
	color: var(--text); text-decoration: none;
}
.spot::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	--c: rgb(244 239 230 / .7);
	background:
		linear-gradient(var(--c), var(--c)) left top / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) left top / 1px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 1px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 1px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 1px 16px no-repeat;
	opacity: 0; transform: scale(1.03);
	transition: opacity .3s, transform .4s var(--ease);
}
.spot:hover::before, .spot:focus-visible::before { opacity: 1; transform: none; }
.spot:focus-visible { outline: none; }
.spot-pin {
	position: absolute; left: var(--px); top: var(--py);
	width: 40px; height: 40px; margin: -20px 0 0 -20px;
	animation: fade-in .8s calc(1.2s + var(--n) * .08s) both;
}
.spot-dot {
	position: absolute; inset: 16px; border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 5px rgb(0 0 0 / .4);
	transition: background-color .25s, transform .3s var(--ease);
}
.spot-dot::after {
	content: ''; position: absolute; inset: -7px; border-radius: 50%;
	border: 1px solid rgb(244 239 230 / .7);
	transition: border-color .25s;
}
.spot-label {
	position: absolute; left: 50%; bottom: calc(100% - 4px);
	padding: 6px 9px; white-space: nowrap;
	background: rgb(0 0 0 / .72); border: 1px solid var(--border);
	font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
	opacity: 0; transform: translate(-50%, 4px);
	transition: opacity .25s, transform .3s var(--ease), border-color .25s;
}
.spot:hover .spot-label, .spot:focus-visible .spot-label { opacity: 1; transform: translate(-50%, 0); background: var(--accent); border-color: var(--accent); }
.spot:hover .spot-dot, .spot:focus-visible .spot-dot { background: var(--text); transform: scale(1.2); }
.spot:hover .spot-dot::after, .spot:focus-visible .spot-dot::after { border-color: var(--text); }

/* Wide screens: every marker carries its name, like callouts on a drawing */
@media (min-width: 1200px) and (hover: hover) {
	.spot-label { opacity: 1; transform: translate(-50%, 0); }
}

/* Phones: the picture is too small for six markers, and the hero is as tall as its content */
@media (max-width: 767.98px) {
	.hero { min-height: 0; }
	.spots { display: none; }
}
/* Upright tablets and windows: a full-height hero would leave a void between the slogan and the
   picture, so the hero keeps to its content there too */
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
	.hero { min-height: 0; }
}

/* While the hero scrolls away the picture recedes in place */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.stage-frame { animation: recede linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
	}
}
@keyframes recede { to { transform: scale(.95); opacity: .4; } }

/* ---------- Proof: four figures, then the forces the machines serve with ---------- */

/* no rules of its own: the figures' hairline opens the band, space closes it */
.proof { padding-block: clamp(48px, 6vw, 88px); }
/* The figures follow the models' spec rows: a hairline above, no rules between columns, the label in
   mono on top and the figure with its unit on one baseline at the bottom. Two figures, half the
   row each: they scale with the row (container units on .figures), one size in both cells */
.figures {
	container-type: inline-size;
	--fig: 12cqi;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: 1px;
	margin: 0;
	background: var(--line);  /* shows through the 1px row gaps: the rules between rows; no rules between columns */
	border-top: 1px solid var(--border);
}
.figure {
	display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
	min-width: 0; padding: 18px 20px 22px;
	background: var(--bg);
}
/* the first column starts on the page edge, like the spec rows */
.figure:nth-child(odd) { padding-left: 0; }
.figure dt { color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; }
.figure dd { display: flex; align-items: baseline; gap: 0 .5em; margin: 0; white-space: nowrap; }
.figure b { font: 700 clamp(44px, var(--fig), 96px)/.9 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.figure .plus { margin-left: .04em; color: var(--accent); font-size: .5em; vertical-align: .72em; }
/* «~4000»: the tilde in the plus sign's blue, centred on the figures */
.figure .approx { margin-right: .05em; color: var(--accent); font-size: .6em; vertical-align: .3em; }
.figure-unit { color: var(--dim); font: 400 13px/1.1 var(--mono); letter-spacing: .02em; }

/* desktop: the first cell starts on the page edge like the spec rows; the second figure starts on
   the fifth column of the units below */
@media (min-width: 1100px) {
	.figures { --fig: 7.5cqi; }
	.figure, .figure:nth-child(odd) { padding: 18px 24px 0; }
	.figure:first-child { padding-left: 0; }
}

@media (max-width: 559.98px) {
	.figure { padding: 14px 12px 16px; }
	.figure:nth-child(odd) { padding-left: 0; }
	.figure dt { letter-spacing: .06em; }
	/* phones: the unit takes its own line under the figure in every cell, so a row stays level */
	.figure dd { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.proof-units { margin-top: clamp(32px, 4vw, 48px); }
.proof-label { margin: 0; color: var(--muted); font: 500 12px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* a small blue square marks the section labels */
.proof-units > .proof-label::before, .about-label::before {
	content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 12px;
	background: var(--accent); vertical-align: .08em;
}
.units {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: 1px;
	margin: 14px 0 0; padding: 0; list-style: none;
	background: var(--line);
	border-top: 1px solid var(--border);
}
/* «Нацгвардії», the longest name, measures 5.37em: cell padding and size keep it inside */
.units li {
	display: flex; align-items: center;
	padding: 16px 14px;
	background: var(--bg);
	font: 700 18px/1 var(--display); letter-spacing: .03em; text-transform: uppercase;
}
.units li:nth-child(odd) { padding-left: 0; }
/* The units light up one after another, grey to white, when the band comes into view */
@media (prefers-reduced-motion: no-preference) {
	.js .proof:not(.is-lit) .units li { color: var(--muted); }
	.proof.is-lit .units li { animation: lit .9s var(--ease) both; }
	.proof.is-lit .units li:nth-child(2) { animation-delay: .1s; }
	.proof.is-lit .units li:nth-child(3) { animation-delay: .2s; }
	.proof.is-lit .units li:nth-child(4) { animation-delay: .3s; }
	.proof.is-lit .units li:nth-child(5) { animation-delay: .4s; }
	.proof.is-lit .units li:nth-child(6) { animation-delay: .5s; }
	.proof.is-lit .units li:nth-child(7) { animation-delay: .6s; }
	.proof.is-lit .units li:nth-child(8) { animation-delay: .7s; }
}
@keyframes lit { from { color: var(--muted); } to { color: var(--text); } }

@media (min-width: 560px) {
	.units { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.units li:nth-child(odd) { padding-left: 14px; }
	.units li:nth-child(4n + 1) { padding-left: 0; }
}

@media (min-width: 1100px) {
	.units { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.units li { font-size: clamp(15px, 1.35vw, 19px); }
	.units li:nth-child(4n + 1) { padding-left: 14px; }
	.units li:first-child { padding-left: 0; }
}

/* ---------- About ---------- */

.about { padding-block: var(--section); }
.about-grid { display: grid; gap: 20px; }
.about-label { margin: 0; color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.about-lead { max-width: 46ch; margin: 0; font: 400 clamp(19px, 2vw, 28px)/1.5 var(--mono); }
.about-lead strong { font-weight: 700; }
.about-sub { max-width: 58ch; margin: 28px 0 0; color: var(--dim); font-size: 17px; }

@media (min-width: 1024px) {
	/* baseline alignment: the label sits on the baseline of the lead's first line in every browser */
	.about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
	.about-label { grid-column: 1 / span 3; }
	.about-text { grid-column: 4 / -1; }
}

/* ---------- Sections ---------- */

/* sections part by space alone; the rules belong to the tables inside them. Where a section follows
   another, the space between them is one section padding, not two (the lineup ends on its last
   photograph, so the section after it keeps its own) */
.section { padding-block: var(--section); }
.section:not(.lineup) + .section, .about + .section { padding-top: 0; }
.proof + .about { padding-top: max(0px, calc(var(--section) - clamp(48px, 6vw, 88px))); }
.section-head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
	margin-bottom: clamp(32px, 4vw, 56px);
}
/* 14em: long titles break into two balanced lines */
/* sized so the longest block, «Роботизовані комплекси» (12.3em with its padding), always fits the screen */
.section-title { font-size: clamp(26px, calc((100vw - 2 * var(--gutter)) / 12.4), 56px); }

/* ---------- Lineup: a sticky index over full-screen models ---------- */

.lineup { padding-bottom: 0; }
.lineup-nav {
	position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--wp-admin)); z-index: 40;
	background: var(--bg);
	border-bottom: 1px solid var(--line);  /* no top rule: stuck under the header it would double the header's */
}
.lineup-nav-row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lineup-link {
	display: flex; align-items: baseline;
	min-width: 0; padding: 18px 16px 17px;
	color: var(--muted); text-decoration: none;
	transition: color .25s, background-color .25s;
}
.lineup-link:first-child { padding-left: 0; }
.tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(13px, 1.3vw, 18px)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.lineup-link:hover { color: var(--text); }
.lineup-link[aria-current="true"] { color: var(--text); }
.lineup-link:focus-visible { outline-offset: -3px; }
/* tablets: six names in a row need narrower cells, «Міні ударний» stays whole at 768px */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.lineup-link { padding-inline: 12px; }
	.lineup-link:first-child { padding-left: 0; }
}

@media (max-width: 767.98px) {
	/* the row runs edge to edge and scrolls sideways; its first name starts on the page gutter */
	.lineup-nav-row { display: flex; width: 100%; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
	.lineup-nav-row::-webkit-scrollbar { display: none; }
	.lineup-link { flex: 0 0 auto; padding-inline: 16px; }
	.lineup-link:first-child { padding-left: 0; }
}

/* A model: its photographs fill the screen, the text stands on the dark side */
.product {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: max(660px, calc(100svh - var(--header-h) - var(--nav-h, 54px)));
	/* a model's top edge stops right under the header and the index (proto.js measures --nav-h) */
	scroll-margin-top: var(--nav-h, 54px);
	view-timeline: --model block;
}
.product-media { position: absolute; inset: 0; z-index: -1; }
.product-media::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .74) 34%, rgb(0 0 0 / .22) 60%, rgb(0 0 0 / 0) 78%),
		linear-gradient(0deg, #000 0%, rgb(0 0 0 / .72) 20%, rgb(0 0 0 / 0) 48%),
		linear-gradient(180deg, rgb(0 0 0 / .6) 0%, rgb(0 0 0 / 0) 20%);
}
.product-inner { position: relative; padding-block: 128px 40px; pointer-events: none; }
.product-body, .specs { pointer-events: auto; }
.product-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 600px; }
/* «Змій міні ударний» with its block measures 9.0em: the size steps down only where it would not fit */
.product-title { font-size: min(clamp(40px, 4.4vw, 64px), calc((100vw - 2 * var(--gutter)) / 9.2)); }
.product-desc { max-width: 58ch; margin: 0; color: var(--dim); text-shadow: 0 1px 16px rgb(0 0 0 / .6); }
.product .btn { margin-top: 8px; }

/* Specs: one row of six under a hairline, no rules between columns. Every spec spans two rows of the
   list, its label and its value (a subgrid): the values of a row start on one line whatever the length
   of the labels, and a value with a second line («Starlink» over «та інші») hangs below it */
.specs {
	display: grid; grid-template-columns: repeat(var(--tracks, 6), minmax(0, 1fr));
	margin: 56px 0 0;
	border-top: 1px solid var(--border);
}
.spec { grid-row: span 2; grid-column: span var(--sd, 1); display: grid; grid-template-rows: subgrid; row-gap: 16px; padding: 16px 20px 0; }
.spec:first-child { padding-left: 0; }
/* room for two label lines in every cell: the values stand where the 104px cells put them */
.spec dt { min-height: 2.9em; color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.spec dd { display: flex; flex-wrap: wrap; align-items: baseline; align-self: start; align-content: flex-start; margin: 0; }
.spec dd > * + * { margin-left: .4em; }
/* an invisible strut of the figure size: words, prefixes and units share the figures' baseline */
.spec dd::before { content: '\200b'; font: 700 clamp(28px, 2.7vw, 40px)/1 var(--display); }
.spec .unit { color: var(--dim); font: 400 13px/1.1 var(--mono); }
.spec b { color: var(--text); font: 700 clamp(28px, 2.7vw, 40px)/1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.spec .plus { margin-left: .04em; color: var(--accent); font-size: .7em; vertical-align: .55em; }

/* The photographs: a full-screen carousel behind the text */
.carousel { position: relative; height: 100%; background: var(--surface); }
.carousel-track {
	display: flex; height: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: -3px; }
.slide {
	position: relative; flex: 0 0 100%; margin: 0; overflow: hidden;
	background: var(--surface);
	scroll-snap-align: start; scroll-snap-stop: always;
}
.slide > img, .slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* a slow push-in as the model scrolls into view */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.slide > img { animation: push-in linear both; animation-timeline: --model; animation-range: entry 0% cover 50%; }
		/* the text rises on its own position: complete as soon as it is fully on screen, at any height */
		.product-body { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
}
@keyframes push-in { from { transform: scale(1.1); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

.yt { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: var(--surface); color: var(--text); cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play {
	position: absolute; left: 66%; top: 46%;
	display: grid; place-items: center;
	width: 84px; height: 84px; border-radius: 50%;
	background: rgb(0 0 0 / .35); border: 1px solid var(--text);
	transform: translate(-50%, -50%);
	transition: background-color .3s, transform .3s var(--ease);
}
.yt-play::before {
	content: ''; margin-left: 5px;
	border-style: solid; border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--text);
	transition: border-color .3s;
}
.yt:hover .yt-play { background: var(--accent); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.yt:focus-visible { outline-offset: -6px; }

/* Counter and arrows: top right of the model, on their own dark glass */
.carousel-ui {
	position: absolute; top: 28px; right: max(var(--gutter), (100% - var(--wrap)) / 2);
	display: flex; align-items: center; gap: 8px;
}
/* the counter sits on the same dark glass as the arrows: readable over sky and over sand */
.carousel-count {
	height: 44px; margin: 0; padding: 0 14px; white-space: nowrap;
	background: rgb(0 0 0 / .45); border: 1px solid var(--border);
	/* a 42px line inside the 1px borders centres the figures in the 44px box */
	color: var(--dim); font: 500 12px/42px var(--mono); letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
.carousel-count .current { color: var(--text); }
.carousel-nav { display: flex; gap: 8px; }
.carousel-btn {
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	background: rgb(0 0 0 / .45); border: 1px solid var(--border); color: var(--text);
	cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s, opacity .25s;
}
.carousel-btn svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.carousel-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.carousel-btn:disabled { opacity: .35; cursor: default; }

/* Tablets and phones: the photographs on top, the text and the specs under them */
@media (max-width: 1023.98px) {
	.product { display: block; min-height: 0; overflow: visible; padding-bottom: 64px; }
	.product-media { position: relative; inset: auto; z-index: auto; }
	.product-media .carousel-track { height: auto; aspect-ratio: 4 / 3; }
	.product-media::after { background: linear-gradient(0deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 30%); }
	.carousel-ui { top: auto; bottom: 14px; left: var(--gutter); right: var(--gutter); justify-content: space-between; }
	.product-inner { padding-block: 28px 0; pointer-events: auto; }
	.product-body { max-width: none; }
	.product .btn { align-self: stretch; justify-content: space-between; }
	.yt-play { left: 50%; top: 50%; }
	/* under the photo the specs stand on black: an open grid like the figures, a rule between rows from the 1px row gaps */
	.specs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: 1px; margin-top: 40px; background: var(--line); }
	.spec, .spec:first-child { padding: 14px 14px 16px; background: var(--bg); }
	.spec { grid-column: span var(--st, 1); }
	/* the cells that start a row (computed by the generator) stand on the page edge */
	.spec[data-c1~="t"] { padding-left: 0; }
}

@media (max-width: 559.98px) {
	.specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.spec { grid-column: span var(--sp, 1); }
	.spec[data-c1~="t"] { padding-left: 14px; }
	.spec[data-c1~="p"] { padding-left: 0; }
	.spec dt { letter-spacing: .05em; overflow-wrap: anywhere; }
}

/* ---------- News and certificates ---------- */

.news-grid { display: grid; gap: 40px var(--gap); }
.card a { display: flex; flex-direction: column; gap: 22px; height: 100%; text-decoration: none; }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .4s; }
.card a:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex: 1; flex-direction: column; gap: 14px; }
.card-date { margin: 0; color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.card-title { margin: 0; font: 700 22px/1.22 var(--display); text-wrap: balance; }
.more {
	display: inline-flex; align-items: center; gap: 12px;
	margin-top: auto; padding-top: 6px;
	color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
	transition: color .25s;
}
.card a:hover .more { color: var(--text); }
.card a:hover .more svg { transform: translateX(4px); stroke: var(--accent); stroke-width: 2; }

@media (min-width: 768px) {
	.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Certificates without previews: each document is a cell of an open grid like the figures and the
   contacts. Its number stands at figure size like a spec plate, the model and the document under it,
   the button opens the scan in the viewer. The numbers scale with their column (container units on
   .docs): «2355-61-019-1954» measures 7.9em and stays on one line. A rule above each row, drawn by
   the cells themselves, so a free slot in the last row stays black, with no rule around it */
.docs {
	container-type: inline-size;
	display: grid; grid-template-columns: minmax(0, 1fr);
	margin: 0; padding: 0; list-style: none;
	border-top: 1px solid var(--border);
}
.doc {
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 24px 0 32px;
}
.doc + .doc { border-top: 1px solid var(--line); }
.doc-label { margin: 0; color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; }
.doc-number {
	margin: 18px 0 0;
	font: 700 min(48px, calc(11.2cqi - 2px))/1 var(--display); letter-spacing: .01em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.doc-model { margin: 14px 0 0; font: 500 15px/1.4 var(--mono); }
.doc-kind { flex: 1; max-width: 46ch; margin: 4px 0 0; color: var(--dim); font-size: 14px; line-height: 1.6; }
.doc .btn { margin-top: 24px; min-height: 46px; padding: 0 20px; }

/* tablets: two a row, the first column on the page edge */
@media (min-width: 680px) {
	.docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.doc { padding: 26px 28px 34px; }
	.doc + .doc { border-top: 0; }
	.doc:nth-child(n + 3) { border-top: 1px solid var(--line); }
	.doc:nth-child(odd) { padding-left: 0; }
	.doc-number { font-size: min(56px, calc(6.2cqi - 7px)); }
}

/* desktop: three a row */
@media (min-width: 1024px) {
	.docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.doc:nth-child(n + 3) { border-top: 0; }
	.doc:nth-child(n + 4) { border-top: 1px solid var(--line); }
	.doc:nth-child(odd) { padding-left: 28px; }
	.doc:nth-child(3n + 1) { padding-left: 0; }
	.doc-number { font-size: min(48px, calc(4.1cqi - 7px)); }
}

/* ---------- Partners: two slow rows in opposite directions ---------- */

.partners-section { padding-bottom: var(--section); }
.marquee {
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.wrap + .marquee { border-top: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 90s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 100s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { flex: none; width: clamp(170px, 17vw, 250px); padding: 10px 16px; border-right: 1px solid var(--line); }
/* Logos are white on black: lighten drops the black into the page */
.marquee-track img { width: 100%; mix-blend-mode: lighten; opacity: .62; transition: opacity .3s; }
.marquee-track li:hover img { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Contacts: the photograph with the title, then the directions ---------- */

.contacts-hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: flex-end;
	min-height: min(78svh, 760px);
	padding-block: 160px clamp(40px, 5vw, 72px);
	view-timeline: --cta block;
}
.contacts-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* black at the top and at the bottom, so the photograph opens out of the partners and closes into the directions */
.contacts-hero::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, #000 0%, rgb(0 0 0 / .3) 30%, rgb(0 0 0 / .5) 64%, #000 100%),
		linear-gradient(90deg, rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .15) 72%);
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.contacts-bg { animation: push-in linear both; animation-timeline: --cta; animation-range: entry 0% cover 60%; }
	}
}
/* the #contacts anchor: the title stops a little under the header, the directions follow on screen */
.contacts-head { display: grid; gap: 28px; scroll-margin-top: clamp(24px, 4vw, 48px); }
.contacts-title { font-size: clamp(44px, 6vw, 96px); }
.contacts-intro { max-width: 46ch; }
.contacts-sub { margin: 0 0 14px; font: 700 clamp(18px, 1.6vw, 22px)/1.25 var(--display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.contacts-lead { margin: 0; color: var(--dim); text-wrap: balance; }

@media (min-width: 1024px) {
	.contacts-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
	.contacts-title { grid-column: 1 / span 7; }
	.contacts-intro { grid-column: 9 / -1; }
}

.contacts-body { padding-block: clamp(8px, 2vw, 24px) var(--section); }

/* Directions and notes: one open grid like the figures and the specs. A hairline above, the 1px row
   gaps draw the rules between rows, none between columns; the first column starts on the page edge;
   the notes row shares the cards' columns */
.contact-cards, .contact-notes {
	--cell: 28px; /* from one column to the text of the next */
	display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 1px;
	margin: 0; padding: 0; list-style: none;
	background: var(--line);
}
.contact-cards { border-top: 1px solid var(--border); }
.contact-notes { border-top: 1px solid var(--line); }
/* a note reads like a direction: icon, title and text on one left edge */
.contact-card, .contact-note {
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 32px 0 34px;
	background: var(--bg);
}
.contact-icon { display: block; width: 28px; height: 28px; color: var(--accent); }
.contact-icon svg { display: block; width: 100%; height: 100%; stroke-width: 1.8; }
.contact-title { margin: 22px 0 0; font: 700 22px/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.contact-title a { text-decoration: none; }
/* a linked title carries the arrow of the footer links, so it reads as a link on touch screens too */
.contact-title a::after { content: '↗'; margin-left: .45em; color: var(--muted); font: 400 .72em/1 var(--mono); transition: color .2s; }
.contact-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.contact-title a:hover::after { color: var(--text); }
.contact-text { max-width: 46ch; margin: 12px 0 0; color: var(--dim); font-size: 14px; line-height: 1.65; }
/* the address in plain text, easy to select and copy; the button writes the letter */
.contact-card .contact-text { flex: 1; }
.contact-email { margin: 24px 0 0; font: 500 14px/1.4 var(--mono); letter-spacing: .02em; user-select: all; }
.contact-card .btn { margin-top: 20px; min-height: 46px; padding: 0 20px; }
/* the code under its text: 37 modules with the quiet zone, 4px each, crisp on every screen */
.contact-qr { display: block; margin-top: 28px; }
.contact-qr img { width: 148px; height: 148px; }

@media (min-width: 680px) {
	.contact-cards, .contact-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact-card, .contact-note { padding-inline: var(--cell); }
	.contact-card:nth-child(odd), .contact-note:nth-child(odd) { padding-left: 0; }
}

/* desktop: three directions a row. The support note spans the last two columns: its text keeps to
   the second, the code stands in the third on the left edge of the direction above it (two equal
   tracks with a gap of both cell paddings and the rule fall exactly on the cards' columns) */
@media (min-width: 1100px) {
	.contact-cards, .contact-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.contact-card:nth-child(odd) { padding-left: var(--cell); }
	.contact-card:nth-child(3n + 1) { padding-left: 0; }
	.contact-note:nth-child(2) {
		grid-column: span 2;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--cell) + 1px); align-items: start;
	}
	.contact-note:nth-child(2) .contact-qr { margin-top: 0; }
}

/* ---------- Footer ---------- */

.site-footer { padding-block: 40px 32px; border-top: 1px solid var(--line); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.socials { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0; padding: 0; list-style: none; }
.socials a {
	color: var(--dim);
	font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
	text-decoration: none;
	transition: color .2s;
}
.socials a::after { content: '↗'; margin-left: .5em; color: var(--muted); transition: color .2s; }
.socials a:hover, .socials a:hover::after { color: var(--text); }
.footer-cert img { width: 112px; }
.footer-bottom {
	margin: 32px auto 0;
	color: var(--muted);
	font: 400 12px/1.4 var(--mono); letter-spacing: .08em;
}

/* ---------- Lightbox ---------- */

.lightbox {
	max-width: min(94vw, 1600px); max-height: 92vh; padding: 0;
	background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.lightbox::backdrop { background: rgb(0 0 0 / .9); }
.lightbox[open] { animation: fade-up .4s var(--ease); }
.lightbox img { max-height: calc(92vh - 2px); object-fit: contain; }
/* a PDF: a white sheet in the shape of a landscape A4 page (841 × 595 pt), as large as the screen allows,
   appears at once; PDF.js draws the page into it. Pages of a longer document scroll inside the viewer */
.lightbox.is-pdf { width: min(94vw, 1400px, calc((92vh - 2px) * 1.414)); }
.lightbox-pages { display: grid; gap: 2px; min-height: calc(min(94vw, 1400px, (92vh - 2px) * 1.414) / 1.414); background: #fff; }
.lightbox-pages[hidden] { display: none; }
.lightbox-pages canvas { display: block; width: 100%; height: auto; }
.lightbox-close {
	position: absolute; top: 10px; right: 10px;
	width: 44px; height: 44px;
	background: rgb(0 0 0 / .6); border: 1px solid var(--border); color: var(--text);
	font: 300 26px/1 var(--mono); cursor: pointer;
	transition: background-color .25s, color .25s;
}
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); }
/* phones: the document fills the width, so the close button stands above it instead of over its text */
@media (max-width: 767.98px) {
	.lightbox { overflow: visible; }
	.lightbox-close { top: auto; bottom: calc(100% + 12px); right: -1px; }
}

/* ---------- Reduced motion: everything still, partners scroll by hand ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
	.marquee { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
	.marquee-track [aria-hidden="true"] { display: none; }
}

/* ---------- News: the list and the posts (redesign-news.php, redesign-post.php) ---------- */

/* Pages without a hero open with room for the fixed header, then the title */
.page-head, .post-head { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(40px, 8vh, 104px)); }
.page-head { padding-bottom: clamp(32px, 4vw, 56px); }
.page-title { font-size: clamp(44px, 6vw, 96px); }

.news-archive { padding-bottom: var(--section); }
.card-lead + .news-grid { margin-top: clamp(56px, 7vw, 96px); }

/* The latest post leads the list: its picture large, its title in the display face; on desktop
   the text stands beside the picture, on the line of its bottom edge */
.card-lead a { gap: 26px; }
.card-lead .card-media { aspect-ratio: 16 / 9; }
.card-lead .card-title { font-size: clamp(28px, 3vw, 46px); line-height: 1.06; text-transform: uppercase; }
@media (min-width: 1024px) {
	.card-lead a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
	.card-lead .card-media { grid-column: 1 / span 7; }
	.card-lead .card-body { grid-column: 9 / -1; padding-bottom: 4px; }
}

/* Pages: square numbers like the carousel buttons, the current one in white, blue on hover */
.pager { margin-top: clamp(56px, 7vw, 96px); }
.pager ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-width: 48px; height: 48px; padding: 0 16px;
	border: 1px solid var(--border); color: var(--dim);
	font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
	transition: background-color .25s, border-color .25s, color .25s;
}
.pager a.page-numbers:hover { background: var(--accent); border-color: var(--accent); color: var(--text); }
.pager .current { background: var(--text); border-color: var(--text); color: var(--bg); }
.pager .dots { border-color: transparent; }
.pager svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.news-empty { margin: 0; color: var(--dim); }

/* A post: the way back and the date, the title, the picture across the page, the text in a column
   of reading width; on desktop the date stands beside the title and the text starts on the fourth
   column, like the «Про нас» text on the home page */
.post-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
	margin: 0 0 24px;
	color: var(--muted); font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.post-back { display: inline-flex; align-items: center; gap: 10px; color: var(--dim); text-decoration: none; transition: color .2s; }
.post-back svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease); }
.post-back:hover { color: var(--text); }
.post-back:hover svg { transform: translateX(-4px); }
.post-title { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.04; }

.post-cover { margin-top: clamp(40px, 5vw, 72px); margin-bottom: 0; overflow: hidden; background: var(--surface); }
.post-cover img { width: 100%; max-height: 82svh; object-fit: cover; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.post-cover img { animation: push-in linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
	}
}

.post-body { padding-top: clamp(40px, 5vw, 72px); }
.post-foot { padding-top: clamp(24px, 3vw, 40px); }

@media (min-width: 1024px) {
	.post-head, .post-body, .post-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
	.post-head { align-items: baseline; }
	.post-meta { grid-column: 1 / span 3; flex-direction: column; align-items: flex-start; margin: 0; }
	.post-title { grid-column: 4 / -1; }
	.post-content { grid-column: 4 / span 7; }
	.post-foot .btn { grid-column: 4 / span 9; justify-self: start; }
}

/* The text of a post, as the editor writes it: the first paragraph leads in white, links keep the
   text white and turn their underline blue, lists take the blue squares of the section labels */
.post-content { max-width: 68ch; color: var(--dim); font-size: 16px; line-height: 1.75; }
.post-content > :first-child { margin-top: 0; }
.post-content > :last-child { margin-bottom: 0; }
.post-content p, .post-content ul, .post-content ol, .post-content blockquote, .post-content table { margin: 0 0 1.4em; }
.post-content > p:first-child { color: var(--text); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; }
.post-content strong, .post-content b { color: var(--text); font-weight: 700; }
.post-content a {
	color: var(--text);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--border);
	transition: text-decoration-color .2s;
}
.post-content a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.post-content h2, .post-content h3, .post-content h4 {
	margin: 2em 0 .7em;
	color: var(--text); font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: .01em;
	text-transform: uppercase; text-wrap: balance;
}
.post-content h2 { font-size: clamp(24px, 2.2vw, 32px); }
.post-content h3 { font-size: clamp(20px, 1.8vw, 26px); }
.post-content h4 { font-size: 18px; }
.post-content img, .post-content video { display: block; width: 100%; height: auto; }
.post-content p:has(> img:only-child), .post-content figure, .post-content .wp-caption { margin-block: 2em; }
.post-content figure { margin-inline: 0; }
.post-content .wp-caption { width: auto !important; max-width: 100%; }
.post-content figcaption, .post-content .wp-caption-text { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: .02em; }
.post-content iframe, .post-content embed, .post-content object { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 2em 0; border: 0; }
.post-content ul { padding: 0; list-style: none; }
.post-content ul > li { position: relative; padding-left: 24px; }
.post-content ul > li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--accent); }
.post-content li + li { margin-top: .5em; }
.post-content ol { padding-left: 1.6em; }
.post-content ol > li::marker { color: var(--muted); font-weight: 500; }
.post-content blockquote { padding-left: 24px; border-left: 2px solid var(--accent); color: var(--text); font-size: clamp(17px, 1.45vw, 20px); }
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content hr { margin: 3em 0; border: 0; border-top: 1px solid var(--line); }
.post-content .alignleft, .post-content .alignright { float: none; }
.post-content .aligncenter { margin-inline: auto; }
.post-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.post-content th, .post-content td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* ---------- WordPress ---------- */

/* Signed-in editors see the admin bar above the page: 32px, 46px on narrow screens. On phones WordPress
   lets it scroll away, which would leave a gap above the fixed header, so here it stays in place */
:root:has(body.admin-bar) { --wp-admin: 32px; }
@media (max-width: 782px) {
	:root:has(body.admin-bar) { --wp-admin: 46px; }
}
body.admin-bar #wpadminbar { position: fixed; }