/*
 * Base — type roles, shared furniture, the grain, motion policy, and the
 * responsive behaviour of the spread.
 *
 * The tokens and the split itself are in critical.css, inlined in the head.
 * This file assumes them.
 */

/* ---------- Type roles ---------- */

h1, h2, h3, h4, h5, h6,
.plate__title,
.card__title,
.story__standfirst,
.contents__name {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "opsz" 40;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .4em;
	line-height: 1.03;
	letter-spacing: -.014em;
	text-wrap: balance;
}

p {
	margin: 0 0 1.1em;
}

/*
 * Rubrics and labels: Jost 300, caps, wide. `--label-track` is a setting, so an
 * editor can loosen or tighten the whole layer without touching a rule.
 *
 * The register is shared; the size is not. This rule used to set one size for
 * all ten, which put the rubric naming a story's section, the filter you press
 * to sort the index and the mark on an advertisement at the same weight in the
 * page. They are three different jobs and now read as three.
 */
.card__rubric,
.entry__rubric,
.rail__label,
.footer__label,
.index__filter,
.index__view,
.acts__item,
.plate__rule,
.chapter-head__all,
.ad__mark {
	font-family: var(--sans);
	font-weight: 300;
	letter-spacing: var(--label-track, .3em);
	text-transform: uppercase;
	line-height: 1.5;
}

/*
 * A label that HEADS a block of the magazine.
 *
 * Not a label that tags one item inside a block: `.card__rubric` and
 * `.entry__rubric` were put here first and the index came back reading rubric
 * first — "FASHION & BEAUTY" at 15.52px with .3em of tracking sat above its own
 * story title and outweighed it, and every row's tag matched the month heading
 * that was supposed to be leading the whole run. A tag is subordinate to the
 * thing it tags; it is below.
 */
.footer__label {
	font-size: var(--label-lead);
}

/* What the reader presses, what tags an item, and who did the work. */
.card__rubric,
.entry__rubric,
.rail__label,
.index__filter,
.index__view,
.acts__item,
.chapter-head__all {
	font-size: var(--label);
}

/* The page's own marks. */
.plate__rule,
.ad__mark {
	font-size: var(--label-fine);
}

/* Italic is always Bodoni, and set larger to meet Jost's x-height. */
.story__copy em,
.story__copy i,
.card__title em,
.plate__standfirst {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1em;
}

/*
 * ---------- THE FOUR ACTIONS — §1.8/§14 ----------
 *
 * One button language across the whole magazine: the cover's call to action,
 * Search, Subscribe, a form's submit, load more, pagination, the menu's close,
 * and every secondary action. Four roles and no fifth:
 *
 *   .action              SECONDARY — an uppercase label on a rule. The default,
 *                        and what an editorial page mostly wants: it does not
 *                        shout, and it sits in a column of type without
 *                        becoming furniture.
 *   .action--solid       PRIMARY — the same label on the magazine's own ink.
 *                        One per view, at most: the thing the page is for.
 *   .action--text        TEXT — the same label, no rule and no ground. For an
 *                        action inside other matter, where a rule would read as
 *                        a second underline: "View all 231 results", a "back to
 *                        the section" line, a dismissal.
 *   .action--icon        ICON — a 44px target holding a glyph and nothing else,
 *                        for a control whose meaning is its mark: a close, a
 *                        step through a gallery, a magnifying glass.
 *
 * They share the register, the tracking, the target and the movement. What
 * differs between them is exactly one thing each — the ground, the rule, the
 * shape — so a reader who has learnt one has learnt all four.
 */
.action {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 12px 0;
	font-family: var(--sans);
	font-size: var(--label);
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	border-bottom: var(--hair) solid var(--rule-2);
	border-radius: var(--edge);
	transition: color var(--move), border-color var(--move);
}

.action--solid {
	padding: 13px 22px;
	min-height: 46px;
	background: var(--ink);
	/*
	 * `--on-ink`, not `--paper`.
	 *
	 * The button's ground is `--ink`, so its type has to be whatever is legible
	 * on `--ink` — and that is not the page's paper wherever `--ink` has been
	 * rebound. On the plate `--ink` is white and `--paper` is ivory: 1.00:1, a
	 * solid white chip with no words on it. The plate has declared `--on-ink`
	 * for exactly this since it was written; this rule was still asking for the
	 * paper. `--paper` stays as the fallback for any surface that has not
	 * declared one.
	 */
	color: var(--on-ink, var(--paper));
	border-bottom: 0;
	transition: background-color var(--move), color var(--move);
}

.action--text {
	padding: 12px 0;
	border-bottom: 0;
}

.action--icon {
	display: inline-grid;
	place-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	line-height: 0;
	border-bottom: 0;
}

/* ---------- The byline and the stamp ---------- */

/*
 * §9. The line every magazine prints under a headline, set as one.
 *
 * The name takes the reading face at reading size, because that is the thing a
 * reader is looking for; the stamp under it takes the furniture face at label
 * size, because a date is furniture. Two registers, one block — the same
 * decision as the menu panel's two columns.
 *
 * Shared, not in story.css: the plate prints one too.
 */
.byline {
	margin: 0 0 20px;
}

.byline__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .4em;
	margin: 0;
	font-family: var(--serif);
	font-size: 1.05rem;
	line-height: 1.3;
}

.byline--lede .byline__who {
	font-size: clamp(1.05rem, 1.6cqi, 1.2rem);
}

/*
 * "By" is not the byline; the name is. It is set small and quiet so the eye
 * lands on the person, which is how a printed byline reads and why the word is
 * never the same weight as the name beside it.
 */
.byline__by {
	font-family: var(--sans);
	font-size: var(--label-fine);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.byline__name {
	font-style: italic;
}

/*
 * 44px on the link, and the reason is the same one the rail gives: this is not
 * a link set inline in a sentence, it is a control whose whole content is the
 * link, so the project's floor applies rather than WCAG's 24px.
 */
a.byline__name {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .28em;
	transition: color var(--move);
}

@media (hover: hover) and (pointer: fine) {
	a.byline__name:hover {
		color: var(--acc);
	}
}

a.byline__name:focus-visible {
	color: var(--acc);
}

.byline__when {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 20px;
	margin: 0;
	color: var(--ink-3);
}

.byline__stamp {
	font-family: var(--sans);
	font-size: var(--label-fine);
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* ---------- The credit rail ---------- */

/* Shared: the cover plate sets one too, so it cannot live in story.css. */

.rail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 34px;
	margin: 0 0 22px;
	padding: 14px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.rail__field {
	min-width: 0;
}

.rail__label {
	margin: 0;
	color: var(--ink-3);
}

.rail__value {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1rem;
}

/*
 * The two fields that lead somewhere.
 *
 * The rail printed the author's name and the section as dead strings — the one
 * piece of metadata a reader most wants to follow, and no way to follow it.
 * They are links now, held to the 44px this project asks of a control rather
 * than the 24px WCAG asks at AA: the check in live.mjs exempts a link set
 * inline in a sentence, and a <dd> whose entire content is the link is not
 * that. The same shape as .author__link, which solved the same problem.
 */
.rail__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .28em;
}

@media (hover: hover) and (pointer: fine) {
	.rail__link:hover {
		color: var(--acc);
	}
}

.rail__link:focus-visible {
	color: var(--acc);
}

/* ---------- Paper grain ---------- */

/*
 * PAPER GRAIN FALLS ON THE PAPER. IT DOES NOT FALL ON THE PHOTOGRAPH.
 *
 * This was one overlay on `.site` at `z-index: 55` — over everything, including
 * the cover's photograph — with `mix-blend-mode: multiply` in the Ivory edition
 * and `screen` in Noir. Three things follow, and the third is why it moved.
 *
 * 1. IT IS A VEIL OVER THE COVER, which is the thing the owner asked to have
 *    removed in 1.6.0 and which was removed from `.plate__frame::after` then.
 *    It was still here.
 *
 * 2. IT CHANGES THE PHOTOGRAPH BY EDITION. `screen` lightens and `multiply`
 *    darkens, so the same cover is two different pictures in the two editions.
 *    The brief is explicit that the site's Light/Dark sets the UI and the
 *    COVER's palette follows the photograph — a picture that changes with the
 *    switch makes that impossible to honour.
 *
 * 3. IT MADE EVERY TONE MEASUREMENT WRONG, and by a lot. Measured at 1512 with
 *    the same file, the same box, the same `object-fit` and the same
 *    `object-position`, once as the plate and once as a reference copy laid over
 *    the other page in the same screenshot:
 *
 *      plate 0.1075   reference 0.0782
 *      plate 0.1780   reference 0.1436
 *      plate 0.1113   reference 0.0821
 *      plate 0.0369   reference 0.0190
 *
 *    The sampler reads the file, so it was right about the file and wrong about
 *    the page — and the gap was nearly closed with a calibration constant before
 *    `elementsFromPoint` named the element responsible. A coefficient standing in
 *    for a blend mode is exactly the kind of number that fits one photograph and
 *    breaks the next.
 *
 * So the grain is on the two paper surfaces instead: the reading page, and the
 * plate's own sheet BEHIND the plate. A plate carrying a photograph covers that
 * sheet and the picture is printed untouched; a bare plate is the magazine's own
 * paper and still has its texture. A 400-byte data URI rather than a request,
 * and `pointer-events: none` so it never intercepts a click — §14.8.
 */
.prom-page::after,
.plate-page::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--grain);
	mix-blend-mode: var(--grain-blend);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*
 * On the reading page it sits over the column, as it always did. On the plate it
 * sits UNDER it: `.plate.is-on` is `z-index: 3`, so a photographic plate covers
 * this and a bare one does not.
 */
/*
 * `absolute`, not `fixed`. A fixed overlay is positioned against the VIEWPORT
 * however deep in the tree it is declared, so `.prom-page::after` covered the
 * plate as surely as `.site::after` did — measured identical to the digit, which
 * is what said the first move had not moved anything.
 */
.prom-page::after {
	z-index: 55;
}

.plate-page::after {
	z-index: 0;
}

/* ---------- Motion ---------- */

/*
 * Photographs lift on hover, and only where hovering is a real thing. Ungated
 * :hover latches on touch: a tapped coverline stays "current" after the reader
 * has scrolled somewhere else, which is exactly the state the design uses to
 * say where you are (11-motion-review.md, Part 2 §6).
 */
@media (hover: hover) and (pointer: fine) {
	.card:hover .card__frame img,
	.entry:hover .entry__frame img,
	.frame:hover img {
		transform: scale(1.028);
	}

	.card:hover .card__title,
	.entry:hover .entry__title {
		color: var(--acc);
	}

	.action:hover {
		color: var(--acc);
		border-color: var(--acc);
	}

	.action--solid:hover {
		background: var(--acc);
		color: var(--acc-ink);
	}

	.page-top__list a:hover,
	.page-top__search:hover {
		color: var(--ink);
	}
}

.card__frame img,
.entry__frame img,
.frame img {
	transition: transform .8s cubic-bezier(.2, .7, .15, 1);
}

/*
 * Reduced motion means fewer and gentler animations, not none.
 *
 * Killing every transition turns the 600ms plate crossfade into a hard cut of
 * half the viewport — 97% of the left half changing in one frame, which is more
 * jarring than the motion it replaced. Movement goes; opacity and colour stay,
 * because they carry meaning and cost nothing.
 * 11-motion-review.md, Part 1 and Part 2 §6.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.coverlines__mask > * {
		transform: none !important;
	}

	.card__frame img,
	.entry__frame img,
	.frame img {
		transition: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.card:hover .card__frame img,
		.entry:hover .entry__frame img,
		.frame:hover img {
			transform: none;
		}
	}

	.quote-float {
		transform: none !important;
	}
}

/* ---------- Pressed ---------- */

/*
 * A press has to be visible where hovering is not.
 *
 * The hover block above is gated on (hover: hover) and (pointer: fine), which
 * is right — an ungated :hover latches on touch and leaves a tapped coverline
 * reading as "current" long after the reader has gone elsewhere. But nothing
 * replaced it for a finger. Measured on a touch-emulating Chromium holding a
 * touchStart on each control in turn: 0 of 34 controls changed a single painted
 * property. On a phone the theme acknowledged a tap only by navigating.
 *
 * (That measurement lied twice before it told the truth. The first run credited
 * five controls with a pressed state: preventing the default on click stopped
 * the navigation but not the theme's own handlers, so probing the mode toggle
 * flipped the edition and every control measured afterwards came back
 * "changed". A control that changes because a different control was pressed is
 * not a pressed state.)
 *
 * The vocabulary is the one hover already speaks — the accent — so a mouse and
 * a finger say the same thing instead of inventing a second language. Three
 * declarations and nothing else: a wash of accent under the control, the accent
 * on the label it carries, and a dip on the photograph, which is the only part
 * of a card a thumb is actually covering. No scale, no shadow, no ripple: a
 * magazine does not bounce, and none of the three can shift the layout.
 *
 * Instant on the way down, unhurried on the way back. The controls carry
 * transition: color .2s, and 200ms of fade is late enough that a press reads as
 * lag; the release keeps the fade because that one is a fade, not a reply.
 */
.site :is(a, button, summary, input[type="submit"]):active {
	transition-duration: 0s;
}

/*
 * A film over the ground, not a new ground.
 *
 * Written as background-color first, and the search form's submit button went
 * from an opaque rgb(242, 236, 227) to a 16% wash — the press took the button's
 * paper away and let the page show through it. A gradient of one colour
 * composites over whatever background the control already has, so a bare link
 * and a filled button both get the same film and neither loses anything.
 */
.site :is(a, button, summary, input[type="submit"]):not(.action--solid):active {
	background-image: linear-gradient(
		color-mix(in oklab, var(--acc) 16%, transparent),
		color-mix(in oklab, var(--acc) 16%, transparent)
	);
}

/*
 * A filled control gets a film of its own ink, because an accent film on a
 * ground that is already accent says nothing.
 *
 * Written as `var(--ink)` first, which was wrong in the one place it mattered:
 * the plate's call to action is white on a dark plate, and on the plate --ink
 * IS the near-white, so an 18% film of it over white changed 0 of 17,464
 * pixels. The computed style moved and nothing was drawn. currentColor is the
 * colour that control's own label is set in, so it contrasts with that
 * control's own ground by construction, wherever the control has been put.
 */
.site :is(a, button, summary, input[type="submit"]).action--solid:active {
	background-image: linear-gradient(
		color-mix(in oklab, currentColor 18%, transparent),
		color-mix(in oklab, currentColor 18%, transparent)
	);
}

/*
 * The label, wherever a control keeps it. A wash behind a frame that a
 * photograph covers completely is a computed style, not a visible answer.
 */
.site :is(a, button, summary):active :is(.card__title, .entry__title, .coverline__head, .contents__name, .month__label) {
	color: var(--acc);
}

/*
 * A photograph, or a mark, dips under the thumb.
 *
 * `img` alone was not enough for the publication's own logotype: where no file
 * has been uploaded the mark is an inline `<svg>` wordmark, not an `<img>`, and
 * it fills its link — so the accent film went behind an element that covers the
 * link completely and nothing was drawn. Measured by verify.mjs through W3TC's
 * CSSTidy on the 404 view: ".brand__home 0%/0", a control that acknowledges a
 * thumb only by navigating. The wordmark takes the same dip the photograph does.
 */
.site :is(a, button):active img,
.site :is(a, button):active .brand__wordmark {
	opacity: .86;
}

/*
 * The platform's own tap flash, in the theme's colours rather than the
 * browser's grey. Declared, not measured: no headless browser paints it.
 */
.site :is(a, button, summary, input[type="submit"]) {
	-webkit-tap-highlight-color: color-mix(in oklab, var(--acc) 24%, transparent);
}

/* ---------- The spread as it narrows ---------- */

/*
 * Every breakpoint is a media query.
 *
 * They were container queries on .site, which is exactly the viewport's width,
 * so the two selected the same thing — but only one survives the trip to a live
 * server. W3TC ships CSSTidy as a minification option and CSSTidy deletes every
 * @container block and its contents: measured on this theme, 15 rules in, 0
 * out. A layout that disappears when somebody ticks a box in a caching plugin
 * is not a layout. The plate's height queries went the same way.
 */
/*
 * There was a breakpoint here that tightened the gutters and hid the season
 * stamp below 1120px. It was written as `@container site (…) { :root { … } }`,
 * and `:root` is an ancestor of the container — a container query only ever
 * styles descendants — so it had never once applied. Converting the file to
 * media queries brought it to life, and it immediately broke the mirrored
 * margins of §4: the page's gutters are a share of the spread and the plate's
 * are a share of the half, so retuning one without the other put 62.7px inside
 * the plate against 49.3px inside the page.
 *
 * It is gone rather than repaired. Every measurement this theme has ever passed
 * was taken with it dead, so removing it is the only change here that alters
 * nothing.
 */

/*
 * Below 780 the spread becomes a sequence: the plate is a full-height opening,
 * the fold a sticky strip, the page everything after it. `overflow-x: hidden`
 * on .site is what stops the bleed elements scrolling the document sideways —
 * measured overflow at 1000px and at every phone width in the prototype
 * (10-ui-quality-report.md, responsive).
 */
/*
 * The furniture of the narrow layout. Its structure — which element scrolls,
 * and whether the viewport can be scrolled at all — is in `critical.css`, and
 * is inlined, because a phone that never receives this file must still get a
 * page it can read. See the block there for what happened when it did not.
 *
 * A media query, not a container query. This restyles children of `.site`, and
 * `.site` is the container — an element is never its own container, so an
 * earlier version of this block was silently dead in its entirety and the
 * spread stayed two columns wide on a phone.
 *
 * The condition is copied from `critical.css` verbatim, pointer clauses and
 * all, and has to stay that way: that file's copy of it is what makes the
 * header fixed and reserves the cover's height for it. If the two disagree
 * about when the halves stack, one layout gets the other's furniture — which
 * is how an iPad in portrait once got the stacked cover with the spread's
 * navigation on it. The explanation lives there.
 */
@media (max-width: 1120px), (pointer: coarse), (pointer: none), (hover: none) {
	/*
	 * The fold is the spread's, and only the spread's.
	 *
	 * This block used to turn it into a horizontal bar: `position: sticky` at
	 * `top: var(--bar-h)`, carrying the issue line and the reading hairline. The
	 * bar above it was `position: fixed` and slid away on scroll; this did not.
	 * So on every phone, past the cover, the issue line hung 61px down the
	 * screen with live body copy above it and more sliding underneath —
	 * measured at 390x844 and 412x915, on the About page and on an article, at
	 * every scroll position past the cover.
	 *
	 * The two rows are one element now, in the header, and this one is gone
	 * rather than repositioned. An offset would have been correct at the moment
	 * it was measured and wrong the moment the bar moved; there is nothing left
	 * here to come apart.
	 *
	 * `display: none`, not `visibility: hidden`: the element is 100% of the
	 * document's height and would otherwise keep taking that height, and its
	 * two children would stay in the accessibility tree beside the header's
	 * copies of the same two things.
	 */
	.fold {
		display: none;
	}

}

/* ---------- Advertising ---------- */

.ad {
	display: block;
	margin: var(--seam-block) 0;
	padding: 12px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	contain: content;
}

.ad__mark {
	display: block;
	margin-bottom: 8px;
	color: var(--ink-3);
}

.ad__creative {
	min-height: var(--ad-h, 250px);
	max-height: var(--ad-h, 250px);
	overflow: hidden;
}

@media (max-width: 800px) {
	.ad--desktop-only {
		display: none;
	}
}

/* ---------- Pagination and small print ---------- */

/*
 * Pagination was a row of bare links at .68rem in the body colour: on a real
 * archive it read as a line of stray characters, and there was no telling which
 * page you were on. Numbers are targets now — bordered, 44px, with the current
 * one filled.
 */
.wp-block-query-pagination,
.pagination,
.navigation {
	margin: var(--seam-block) 0;
	padding: 0 var(--pad) 0 var(--gut);
}

.pagination .nav-links,
.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pagination .page-numbers,
.navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 12px;
	font-family: var(--sans);
	font-size: var(--label);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--ink-2);
	border: var(--hair) solid var(--rule);
	border-radius: var(--edge);
	transition: color var(--move-quick), border-color var(--move-quick), background-color var(--move-quick);
}

/*
 * `--on-ink`, not `--paper` — the same correction `.action--solid` carries and
 * for the same reason: the current page's chip is filled with `--ink`, and on
 * any surface that has rebound `--ink` the page's own paper is not what reads
 * on it. Two controls filled the same way must resolve their type the same way.
 */
.pagination .page-numbers.current,
.navigation .page-numbers.current {
	color: var(--on-ink, var(--paper));
	background: var(--ink);
	border-color: var(--ink);
	font-weight: 500;
}

/* The ellipsis is not a control and should not look like one. */
.pagination .page-numbers.dots,
.navigation .page-numbers.dots {
	border-color: transparent;
	color: var(--ink-3);
	min-width: 24px;
	padding: 0 4px;
}

.pagination .prev,
.pagination .next,
.navigation .prev,
.navigation .next {
	gap: 8px;
	padding: 0 18px;
	font-size: var(--label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink);
	border-color: var(--rule-2);
}

.pagination .prev::before,
.navigation .prev::before {
	content: "←";
	font-size: var(--label);
}

.pagination .next::after,
.navigation .next::after {
	content: "→";
	font-size: var(--label);
}

@media (hover: hover) and (pointer: fine) {
	.pagination a.page-numbers:hover,
	.navigation a.page-numbers:hover {
		color: var(--ink);
		border-color: var(--ink);
	}
}

/* ---------- The header stack: locking, anchors and the static option ---------- */

/*
 * The width the scrollbar was taking, given back as padding while the menu
 * holds the document still.
 *
 * menu.js measures it and writes `--scrollbar-gap`; on a phone, and on any
 * platform with overlay scrollbars, it measures 0 and this adds nothing. The
 * class is what stops the rule applying at any other moment.
 */
html.is-locked {
	padding-right: var(--scrollbar-gap, 0px);
}

/*
 * An in-page link must not land under the header.
 *
 * `scroll-padding-top` is the browser's own answer and it costs nothing: a
 * jump to a heading, a skip link, and the browser restoring a position on
 * reload all stop the same distance below the fixed stack. Without it every
 * anchor on a phone put its target's first line behind the bar — and the
 * theme's own skip link is an in-page link.
 *
 * `--bar-h` is only declared where the header is fixed, so the fallback is the
 * spread's answer: nothing is fixed there, and nothing needs padding.
 */
html {
	scroll-padding-top: var(--bar-h, 0px);
}

/*
 * The bar the owner asked not to follow them.
 *
 * `position: static` rather than a class on the body: the setting prints an
 * attribute on the element itself, so what the CSS reads and what PHP wrote
 * cannot drift. The page then starts at the top of the document, so the
 * reservation the cover makes for a fixed bar has to go too.
 */
@media (max-width: 1120px), (pointer: coarse), (pointer: none), (hover: none) {
	.page-top[data-sticky="off"] {
		position: static;
	}

	/*
	 * With the bar in the flow, the plate has to stop leaving room for it — and
	 * take back the height, or the cover would be a screen minus a bar tall
	 * with a bar above it, and the two would not add up to a screen.
	 *
	 * A class on <body>, not `:has()` on `.site`. This theme has been caught
	 * twice by CSSTidy — which W3 Total Cache runs over these files — deleting
	 * selectors it could not parse: every `@container` block went, and a
	 * `not (…)` media query was mangled. `:has()` is newer than either. A class
	 * PHP wrote cannot be minified away. See Setup\body_classes().
	 */
	body.header-static .site {
		--bar-h: 0px;
	}
}

.page-top[data-sticky="off"] {
	position: static;
}

/* ---------- The motion switches ---------- */

/*
 * The owner's two switches, and what they are not.
 *
 * They are NOT a substitute for `prefers-reduced-motion`. That block above runs
 * whatever these say, because a reader's operating system outranks a
 * publication's preference. These are for a magazine that has decided against
 * movement for everybody.
 *
 * `no-motion` removes the movement and keeps opacity and colour, for exactly
 * the reason the reduced-motion block does: killing every transition turns the
 * 600ms plate crossfade into a hard cut of half the viewport, which is more
 * jarring than what it replaced.
 *
 * `no-enhanced-motion` leaves entrances alone and stops what is tied to the
 * scroll — the reading hairline, the foil rotating, the plate following the
 * chapters. Those are the three that do work on every frame, so they are the
 * three worth being able to switch off on their own.
 */
body.no-motion *,
body.no-motion *::before,
body.no-motion *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
}

body.no-motion .coverlines__mask > * {
	transform: none !important;
}

body.no-motion .card__frame img,
body.no-motion .entry__frame img,
body.no-motion .frame img,
body.no-motion .page-top {
	transition: none;
}

/* The bar still leaves and returns; it simply does it in one frame. */
body.no-motion .page-top.is-away {
	transition: none;
}

body.no-enhanced-motion .fold__read,
body.no-enhanced-motion .page-top__read {
	display: none;
}