/*
 * FRONT ROW — the composition of Design: PROMINENT, over AnyMag's own markup.
 *
 * The reference is the approved prototype "PROMINENT Front Row"
 * (docs/anymag/design/concept-front-row/src.html; the owner's decision of
 * 2026-10-03). Its class names are quoted beside the rules that reproduce
 * them. The split is AnyMag's: `.magcover` fixed at the owner's Cover Width,
 * `.magcontent` beside it, one column below 961px. This file loads after
 * prominent.css (AnyMag's furniture in the magazine's voice) and carries:
 *
 *   1 Shared parts — kicker, text link, photograph, card, section head
 *   2 The spread — the page's fields, the header row
 *   3 The lookbook cover (inc/prominent/plates.php, prominent.js)
 *   4 The front page (inc/prominent/front.php)
 *   5 The archives (inc/prominent/magazine.php)
 *   6 The story (inc/prominent/story.php)
 *   7 The black leaf — the menu panel and the footer
 *   8 Search
 *   9 Arrival
 *  10 Phone and tablet
 *
 * Every colour is a token from prominent-tokens.css; the menu and the footer
 * redefine the tokens rather than repeat the rules. No @container, no :has(),
 * no nesting: the page cache's CSSTidy deletes or mangles them.
 */

/* 1 ─ Shared parts ────────────────────────────────────────────────────── */

/* Overlay state is driven by AnyMag's existing menu/search opening classes. */
html.fr-overlay-open,
html.fr-overlay-open body.prominent {
	overflow: hidden;
}

body.prominent {
	font-weight: 400;
	letter-spacing: 0;
}

body.prominent h1,
body.prominent h2,
body.prominent h3,
body.prominent h4 {
	font-stretch: var(--display-stretch);
	letter-spacing: -.012em;
}

/* The prototype's `.kicker.lab`: small capitals, the section first. */
body.prominent .fr-kick {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

/* A link in a kicker is 12px type with a 44px box. The kicker is a flex
   row, so the padding would take room; the negative margin gives it back and
   the word stays on the line with its neighbours. */
body.prominent .fr-kick a {
	margin: -15px 0;
	padding: 15px 0;
	color: inherit;
	text-decoration: none;
}

body.prominent .fr-kick a:hover,
body.prominent .fr-kick a:focus-visible {
	color: var(--ink);
}

/* `.tl` — a link that acts: small capitals on a hairline that withdraws
   when pointed at, an arrow that steps forward. */
body.prominent .fr-tl {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tap);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
}

body.prominent .fr-tl::after {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform-origin: right;
	transition: transform .5s var(--ease-io);
}

body.prominent .fr-tl:hover::after,
body.prominent .fr-tl:focus-visible::after {
	transform: scaleX(0);
}

body.prominent .fr-ico {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform .4s var(--ease);
}

body.prominent .fr-tl:hover .fr-ico,
body.prominent .fr-tl:focus-visible .fr-ico {
	transform: translateX(5px);
}

/* `.u` — a headline's underline draws in under the pointer. */
body.prominent .fr-u {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 0 1px;
	transition: background-size .5s var(--ease-io);
}

body.prominent a:hover .fr-u,
body.prominent a:focus-visible .fr-u {
	background-size: 100% 1px;
}

/* `.ph` — a photograph in its frame; it leans in under the pointer. */
body.prominent .fr-ph {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--paper-2);
}

body.prominent .fr-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 1.4s var(--ease), filter .6s;
}

body.prominent a:hover .fr-ph img,
body.prominent a:focus-visible .fr-ph img {
	transform: scale(1.04);
}

/* `.card` — a photograph, the kicker, the headline. */
body.prominent .fr-card {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

body.prominent .fr-card .fr-ph {
	aspect-ratio: 3 / 4;
}

body.prominent .fr-card .fr-kick {
	margin: 16px 0 8px;
}

body.prominent .fr-card__h {
	display: block;
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(26px, 2.2vw, 36px);
	font-weight: 400;
	font-stretch: var(--display-stretch);
	line-height: 1.02;
	letter-spacing: -.012em;
	text-wrap: balance;
}

body.prominent .fr-card__h em,
body.prominent .fr-head__t em,
body.prominent .fr-lead__h em,
body.prominent .fr-story__h em {
	font-style: italic;
}

/* `.sec` and `.sec-head`: a section opens on its title in Didone. */
body.prominent .fr-sec {
	padding-top: var(--sec-y);
}

body.prominent .fr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 36px;
}

body.prominent .fr-head__t {
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--ink);
	border: 0;
	font-family: var(--font-display);
	font-size: clamp(56px, 6.4vw, 112px);
	font-weight: 400;
	font-stretch: var(--display-stretch);
	line-height: .9;
	letter-spacing: -.012em;
	text-transform: none;
}

body.prominent .fr-sub {
	max-width: 30em;
	margin: -16px 0 28px;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.5;
}

body.prominent .fr-more {
	margin: 20px 0 0;
}

body.prominent .fr-dek {
	max-width: 30em;
	margin: 28px 0 22px;
	color: var(--ink);
	font-family: var(--font-text);
	font-size: clamp(18px, 1.35vw, 21px);
	font-style: normal;
	line-height: 1.5;
}

/* The round control (`.round`): the strip's arrows. */
body.prominent .fr-round {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--rule-2);
	cursor: pointer;
	transition: background-color .25s, color .25s, box-shadow .25s;
}

body.prominent .fr-round:hover,
body.prominent .fr-round:focus-visible {
	color: var(--paper);
	background: var(--ink);
	box-shadow: none;
}

/* At an end of the strip the arrow is dimmed and does nothing, but keeps its
   focus (prominent.js sets aria-disabled, never disabled). */
body.prominent .fr-round[aria-disabled="true"] {
	opacity: .3;
	cursor: default;
}

body.prominent .fr-round[aria-disabled="true"]:hover {
	color: var(--ink);
	background: none;
	box-shadow: inset 0 0 0 1px var(--rule-2);
}

body.prominent .fr-round svg {
	width: 18px;
	height: 18px;
}

/* 2 ─ The spread ──────────────────────────────────────────────────────── */

/* The page opens one breath under the header row on every route, as every
   prototype view does (`.lead`, `.desk-head`, `.story-open`). */
body.prominent.home,
body.prominent.single-post,
body.prominent.blog,
body.prominent.archive,
body.prominent.search {
	--pm-top: clamp(48px, 6vw, 96px);
}

/* The header row (the prototype's `.bar`): the page's own white, no glass
   and no hairline; the sections in small capitals, Search as a word. */
@media only screen and (min-width: 961px) {
	body.prominent .site-wrapper:not(.f-width) .magheader {
		background: var(--paper);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 0;
	}
}

body.prominent .pm-top a {
	padding: 12px 0;
	border-bottom: 0;
	font-weight: 500;
	line-height: 1.3;
	text-underline-offset: 6px;
}

body.prominent .pm-top a[aria-current] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Header navigation keeps the compact editorial row. Appearance now sits
   beside Search/Menu, as requested in the production continuation. */
@media only screen and (min-width: 961px) {
	body.prominent .pm-top {
		gap: 16px;
	}

	body.prominent #content-header {
		gap: 16px;
	}
}

/* The row fades only where it is cut (prominent.js marks it): at the end
   while there is more to the right, at the start once it has scrolled. */
body.prominent .pm-top:not(.is-over) {
	-webkit-mask-image: none;
	mask-image: none;
}

body.prominent .pm-top.is-over:not(.is-start):not(.is-end) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

body.prominent .pm-top.is-over.is-end:not(.is-start) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px);
	mask-image: linear-gradient(90deg, transparent 0, #000 28px);
}

/* A static front page without a Featured Image gets AnyMag's one-column
   wrapper AND the cover (inc/headers.php): on the spread the page stands
   beside the cover, as on every other route, never under it. --cover-w is
   the owner's Cover Width; `fr-front-cover` on <body> says the front page is
   a static page showing the cover (inc/prominent/design.php) — `.home` alone
   is also the latest-posts front page, which has no such cover. */
@media only screen and (min-width: 961px) {
	body.prominent.fr-front-cover .f-width > .magcover ~ .magcontent {
		width: calc(100% - var(--cover-w, 50%));
	}

	body.prominent.fr-front-cover .f-width > .magheader {
		position: fixed;
		z-index: 30;
		top: 0;
		right: 0;
		width: calc(100% - var(--cover-w, 50%));
		background: var(--paper);
	}

	body.prominent.fr-front-cover .f-width #content-header {
		width: 100%;
		padding: 0 var(--pad) 0 var(--gut);
	}

	body.prominent.fr-front-cover .f-width #main-area {
		max-width: none;
		margin: 0;
		padding: calc(var(--header-h) + var(--pm-top, 0px)) var(--pad) 0 var(--gut);
	}

	body.prominent.fr-front-cover .f-width #footer.pm-foot {
		max-width: none;
		margin: clamp(96px, 10vw, 160px) 0 0;
	}
}

/* 3 ─ The lookbook cover ──────────────────────────────────────────────── */

/* The owner's photograph is the first picture (AnyMag's .cover-image, z 1,
   under the owner's overlay, z 2). Over them: the two photographs the cover
   turns to (z 3), the shade (z 4), AnyMag's cover widgets (z 7, prominent.css)
   and the caption (z 6); the header with the logotype and the trigger stays
   on top (z 11). */
body.prominent .fr-photo {
	position: absolute;
	z-index: 3;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

body.prominent .fr-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s var(--ease);
}

body.prominent .fr-photo__img:not([src]) {
	visibility: hidden;
}

body.prominent .fr-photo__img.is-on {
	opacity: 1;
	animation: fr-drift 12s var(--ease) both;
}

body.prominent .fr-cut .fr-photo__img {
	transition-duration: .28s;
}

@keyframes fr-drift {
	from {
		transform: scale(1.09);
	}

	to {
		transform: scale(1);
	}
}

/* `.cover__shade`: the head darkened for the logotype and the trigger. The
   caption carries its own backing (.fr-cap::before), the height of the
   caption itself, so white type on any photograph — a white wall included —
   stands on at least 58% black, which clears 4.5:1 for the 12px lines. White
   type on a photograph is white in both editions. */
body.prominent .fr-shade {
	position: absolute;
	z-index: 4;
	inset: 0;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, 0) 180px);
	pointer-events: none;
}

body.prominent .fr-cap {
	position: absolute;
	z-index: 6;
	right: var(--pad);
	bottom: 36px;
	left: var(--pad);
	color: var(--on-photo);
	pointer-events: none;
}

/* Full strength over the caption's own box, fading only in the 120px above
   it — a backing that fades where the type is, is no backing. */
body.prominent .fr-cap::before {
	position: absolute;
	z-index: -1;
	top: -120px;
	right: calc(-1 * var(--pad));
	bottom: -36px;
	left: calc(-1 * var(--pad));
	background-image: linear-gradient(to top, rgba(0, 0, 0, .58) 0, rgba(0, 0, 0, .58) calc(100% - 120px), rgba(0, 0, 0, 0) 100%);
	content: "";
}

body.prominent .fr-cap__lab {
	margin: 0 0 12px;
	color: var(--on-photo);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .fr-cap__lab:empty {
	display: none;
}

/* `.cover__word`: one name — the house, the designer, the place, the
   collection — in italic Didone. */
body.prominent .fr-cap__word {
	max-width: 13ch;
	margin: 0;
	color: var(--on-photo);
	font-family: var(--font-display);
	font-size: clamp(48px, 5.3vw, 88px);
	font-style: italic;
	font-weight: 400;
	font-stretch: 70%;
	line-height: .96;
	letter-spacing: -.01em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

body.prominent .fr-cap__word[hidden],
body.prominent .fr-cap__head {
	display: none;
}

/* The word is set by its length, as the concept's cover sets it: a name
   large, a phrase smaller, a whole headline smaller again (on a phone the
   cover carries the headline instead, section 10). */
@media only screen and (min-width: 961px) {
	body.prominent .fr-cap__word[data-len="s"] {
		font-size: clamp(64px, 6.6vw, 112px);
	}

	body.prominent .fr-cap__word[data-len="m"] {
		font-size: clamp(52px, 5vw, 84px);
	}

	body.prominent .fr-cap__word[data-len="l"] {
		font-size: clamp(40px, 3.6vw, 60px);
	}
}

body.prominent .fr-cap__open {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tap);
	margin-top: 16px;
	color: var(--on-photo);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	pointer-events: auto;
}

body.prominent .fr-cap__open::after {
	position: absolute;
	right: 0;
	bottom: 12px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform-origin: right;
	transition: transform .5s var(--ease-io);
}

body.prominent .fr-cap__open:hover,
body.prominent .fr-cap__open:focus-visible {
	color: var(--on-photo);
}

body.prominent .fr-cap__open:hover::after,
body.prominent .fr-cap__open:focus-visible::after {
	transform: scaleX(0);
}

body.prominent .fr-cap__open svg {
	transition: transform .4s var(--ease);
}

body.prominent .fr-cap__open:hover svg {
	transform: translateX(5px);
}

body.prominent .fr-cap.is-enter .fr-cap__word,
body.prominent .fr-cap.is-enter .fr-cap__lab {
	animation: fr-lift .9s var(--ease) both;
}

@keyframes fr-lift {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

/* The reading ring around AnyMag's round trigger on a story
   (prominent.js, initReading). It stands on the photograph. */
body.prominent .fr-ring {
	position: absolute;
	top: -4px;
	left: -4px;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	transform: rotate(-90deg);
	pointer-events: none;
}

body.prominent .fr-ring circle {
	fill: none;
	stroke: var(--on-photo);
	stroke-width: 1.5;
	transition: stroke-dashoffset .2s linear;
}

body.prominent .nav-open .fr-ring {
	opacity: 0;
}

/* 4 ─ The front page ──────────────────────────────────────────────────── */

body.prominent .fr-front {
	margin: 0;
}

/* The page's own title on the front page is for assistive technology only
   (content-page.php prints it as screen-reader text); its own text, when the
   owner writes one, closes the page. An empty one prints nothing visible. */
body.prominent.home .pm-about {
	margin-top: var(--sec-y);
}

/* `.lead` */
body.prominent .fr-lead__h {
	margin: 22px 0 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(54px, 6vw, 108px);
	font-weight: 400;
	font-stretch: var(--display-stretch-xl);
	line-height: .94;
	letter-spacing: -.012em;
	text-transform: none;
	text-wrap: balance;
}

body.prominent .fr-lead__h a {
	color: inherit;
	text-decoration: none;
}

/* `.edit`: two photographs, the second set lower. */
body.prominent .fr-edit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 28px;
	padding-top: clamp(64px, 7vw, 112px);
}

body.prominent .fr-edit .fr-card:nth-child(2) {
	margin-top: clamp(64px, 9vw, 150px);
}

/* `.coll` — the collections: designer, season, collection. */
body.prominent .fr-seasons {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
}

body.prominent .fr-seasons[hidden] {
	display: none;
}

body.prominent .fr-seasons button,
body.prominent .fr-tabs a {
	min-height: var(--tap);
	padding: 0;
	color: var(--ink-2);
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	transition: color .2s;
}

body.prominent .fr-seasons button:hover,
body.prominent .fr-tabs a:hover,
body.prominent .fr-tabs a:focus-visible {
	color: var(--ink);
}

body.prominent .fr-seasons button[aria-pressed="true"],
body.prominent .fr-tabs a[aria-current="page"] {
	color: var(--ink);
	text-decoration: underline;
}

body.prominent .fr-coll__list {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--rule);
	list-style: none;
}

body.prominent .fr-coll__list li {
	margin: 0;
	list-style: none;
}

body.prominent .fr-coll__list li[hidden] {
	display: none;
}

body.prominent .fr-coll__list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 2px 20px;
	padding: 16px 0 18px;
	color: var(--ink);
	border-top: 1px solid var(--rule);
	text-decoration: none;
}

body.prominent .fr-coll__d {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(32px, 3.2vw, 54px);
	font-stretch: 70%;
	font-weight: 400;
	line-height: 1;
	transition: transform .5s var(--ease);
}

body.prominent .fr-coll__t {
	display: block;
	grid-column: 1;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-size: clamp(18px, 1.4vw, 23px);
	font-style: italic;
	font-stretch: var(--display-stretch-s);
	font-weight: 400;
	line-height: 1.2;
	transition: transform .5s var(--ease) .03s, color .3s;
}

body.prominent .fr-coll__s {
	grid-row: 1;
	grid-column: 2;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	white-space: nowrap;
}

body.prominent .fr-coll__pic {
	display: none;
}

body.prominent .fr-coll__list a:hover .fr-coll__d,
body.prominent .fr-coll__list a:focus-visible .fr-coll__d {
	font-style: italic;
	transform: translateX(14px);
}

body.prominent .fr-coll__list a:hover .fr-coll__t,
body.prominent .fr-coll__list a:focus-visible .fr-coll__t {
	color: var(--ink);
	transform: translateX(14px);
}

/* `.quotes` — in conversation. The portrait is grey until the quotation is
   the one being read or pointed at. */
body.prominent .fr-talk__list {
	display: grid;
	gap: clamp(64px, 7vw, 112px);
}

/* The figure is the grid: the portrait beside the quotation and, under the
   quotation, its figcaption — the figure's own last child, so the speaker
   names the quotation. */
body.prominent .fr-quote {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: 0 24px;
	margin: 0;
}

body.prominent .fr-quote .fr-ph {
	grid-row: 1 / span 2;
	grid-column: 1;
	aspect-ratio: 4 / 5;
}

body.prominent .fr-quote blockquote,
body.prominent .fr-quote figcaption {
	grid-column: 2;
}

body.prominent .fr-quote .fr-ph img {
	filter: grayscale(1);
}

body.prominent .fr-quote:hover .fr-ph img,
body.prominent .fr-quote:focus-within .fr-ph img,
body.prominent .fr-quote.is-current .fr-ph img {
	filter: none;
}

body.prominent .fr-quote blockquote {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	quotes: none;
}

body.prominent .fr-quote blockquote::before,
body.prominent .fr-quote blockquote::after {
	content: none;
}

body.prominent .fr-quote blockquote p {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(34px, 3.3vw, 56px);
	font-style: italic;
	font-weight: 400;
	font-stretch: 76%;
	line-height: 1.04;
	letter-spacing: -.01em;
	text-indent: -.42em;
	text-wrap: balance;
}

body.prominent .fr-quote figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	margin-top: 18px;
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	/* AnyMag centres every figcaption; a role that wraps on a phone was
	   centred under the quotation's ragged-right column. */
	text-align: start;
}

body.prominent .fr-quote figcaption b {
	font-weight: 600;
}

body.prominent .fr-quote figcaption span {
	color: var(--ink-2);
}

/* `.strip` — front row: a strip of shows you drag. */
body.prominent .fr-strip-nav {
	display: flex;
	gap: 8px;
}

body.prominent .fr-strip-nav[hidden] {
	display: none;
}

body.prominent .fr-strip-wrap {
	position: relative;
	margin-right: calc(-1 * var(--pad));
}

body.prominent .fr-strip {
	display: grid;
	grid-auto-columns: clamp(220px, 21vw, 320px);
	grid-auto-flow: column;
	gap: 20px;
	padding-right: var(--pad);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
}

body.prominent .fr-strip::-webkit-scrollbar {
	display: none;
}

body.prominent .fr-strip.is-drag {
	cursor: grabbing;
	scroll-snap-type: none;
}

body.prominent .fr-strip.is-drag a {
	pointer-events: none;
}

body.prominent .fr-strip .fr-card {
	scroll-snap-align: start;
}

body.prominent .fr-strip .fr-card .fr-ph {
	aspect-ratio: 2 / 3;
}

body.prominent .fr-strip .fr-card__h {
	font-size: clamp(21px, 1.6vw, 26px);
}

/* `.jewels` — the edit by subject. */
body.prominent .fr-subject__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 24px;
}

body.prominent .fr-subject__grid .fr-ph {
	aspect-ratio: 16 / 10;
}

body.prominent .fr-subject__grid .fr-card__h {
	font-size: clamp(22px, 1.8vw, 30px);
}

/* `.rows` — Culture. */
body.prominent .fr-rows,
body.prominent .fr-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.prominent .fr-rows li,
body.prominent .fr-list li {
	margin: 0;
	list-style: none;
}

body.prominent .fr-row {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	align-items: center;
	gap: 22px;
	padding: 20px 0;
	color: var(--ink);
	border-top: 1px solid var(--rule);
	text-decoration: none;
}

body.prominent .fr-row .fr-ph {
	aspect-ratio: 3 / 2;
}

body.prominent .fr-row__tx {
	display: block;
	min-width: 0;
}

body.prominent .fr-row .fr-kick {
	margin-bottom: 6px;
}

body.prominent .fr-row__h {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(22px, 1.8vw, 30px);
	font-stretch: var(--display-stretch);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.012em;
	text-wrap: balance;
}

/* `.tabs` and `.list` — Latest. */
body.prominent .fr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}

body.prominent .fr-tabs a {
	display: inline-flex;
	align-items: center;
}

body.prominent .fr-li {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 6px 22px;
	padding: 18px 0;
	color: var(--ink);
	border-top: 1px solid var(--rule);
	text-decoration: none;
}

body.prominent .fr-li__date,
body.prominent .fr-li__m {
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

body.prominent .fr-li__m {
	white-space: nowrap;
}

body.prominent .fr-li__h {
	font-family: var(--font-display);
	font-size: clamp(22px, 1.75vw, 29px);
	font-stretch: var(--display-stretch);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.012em;
	text-wrap: balance;
}

body.prominent .fr-li__pic {
	display: none;
}

/* The prototype's `.list-foot`: how many of how many, and the way on. */
body.prominent .fr-list-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 18px;
	color: var(--ink-2);
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .fr-list-foot[hidden],
body.prominent .fr-list-foot [hidden],
body.prominent .fr-empty[hidden] {
	display: none;
}

body.prominent .fr-list-foot .fr-tl {
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}

body.prominent .fr-tabs button {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0;
	color: var(--ink-2);
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	transition: color .2s;
}

body.prominent .fr-tabs button:hover,
body.prominent .fr-tabs button:focus-visible,
body.prominent .fr-tabs button[aria-pressed="true"] {
	color: var(--ink);
}

body.prominent .fr-tabs button[aria-pressed="true"] {
	text-decoration: underline;
}

/* The prototype's `.empty`: a sentence in Didone, the fact, the way on. */
body.prominent .fr-empty {
	padding: 32px 0;
	border-top: 1px solid var(--rule);
}

body.prominent .fr-empty__h {
	margin: 0 0 10px;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 400;
	font-stretch: 72%;
	line-height: 1.04;
}

body.prominent .fr-empty p {
	max-width: 32em;
	margin: 0 0 8px;
	color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
	body.prominent .fr-list li.is-in {
		animation: fr-li-in .6s var(--ease) both;
	}
}

@keyframes fr-li-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* 5 ─ The archives ────────────────────────────────────────────────────── */

/* `.desk-head`: the count, the section's name in the largest Didone, the
   owner's description; then the desks as tabs. */
body.prominent .fr-idx-head {
	display: block;
}

body.prominent .fr-idx-head__n {
	margin: 0;
}

body.prominent .fr-idx-head__t {
	width: auto;
	margin: 14px 0 0;
	padding: 0;
	color: var(--ink);
	border: 0;
	font-family: var(--font-display);
	font-size: clamp(80px, 10vw, 180px);
	font-weight: 400;
	font-stretch: 66%;
	line-height: .86;
	letter-spacing: -.012em;
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

body.prominent .fr-idx-head__t em {
	font-style: italic;
}

body.prominent .fr-idx-head + .fr-tabs {
	margin-top: 28px;
}

/* `.grid2`: the stories two by two, staggered. AnyMag's grid classes stay on
   the list (Design: Original reads them); here the list is this grid, and
   Load More appends to it. */
body.prominent .blog-posts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 56px 28px;
	margin: 0;
	padding-top: 56px;
}

body.prominent .blog-posts > .fr-ent {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

body.prominent .blog-posts > .fr-ent:nth-child(4n + 2) {
	margin-top: 80px;
}

body.prominent .blog-posts > .fr-ent:nth-child(4n + 3) {
	margin-top: -40px;
}

body.prominent .blog-posts > :not(.fr-ent) {
	grid-column: 1 / -1;
}

/* 6 ─ The story ───────────────────────────────────────────────────────── */

body.prominent .fr-story-open {
	margin: 0;
	padding: 0;
}

body.prominent .fr-story-open__kick {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
}

body.prominent .fr-story-open__kick .fr-kick {
	display: inline-flex;
}

body.prominent .fr-story__h,
body.prominent.single-post .post-entry .fr-story__h {
	width: auto;
	max-width: none;
	margin: 22px 0 0;
	padding: 0;
	color: var(--ink);
	border: 0;
	font-family: var(--font-display);
	font-size: clamp(50px, 5.3vw, 96px) !important;
	font-weight: 400;
	font-stretch: var(--display-stretch-xl);
	line-height: .95;
	letter-spacing: -.012em;
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}

/* `.credits`: Words · Photographs · share, between two hairlines. */
body.prominent .fr-credits {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: end;
	gap: 10px 36px;
	margin: 8px 0 44px;
	padding: 22px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

body.prominent .fr-dek + .fr-credits {
	margin-top: 0;
}

body.prominent .fr-credits dl {
	margin: 0;
}

body.prominent .fr-credits dt {
	margin: 0 0 4px;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

/* As the prototype's `.credits dd`: the label voice at 15px, semibold. */
body.prominent .fr-credits dd {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	/* The concept's `dd` inherits the 12px label's tracking (.84px), so at
	   15px it is .056em, not the label's .07em. */
	letter-spacing: .056em;
	text-transform: uppercase;
}

/* The author's name is a 44px target on its own line's height. */
body.prominent .fr-credits dd a {
	display: inline-block;
	margin: -12px 0;
	padding: 12px 0;
	color: inherit;
	text-decoration: none;
}

body.prominent .fr-credits dd a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Share as words (`.share`). */
body.prominent .fr-credits .pm-acts {
	display: flex;
	flex-wrap: wrap;
	grid-column: -2;
	justify-self: end;
	gap: 0 16px;
}

body.prominent .fr-credits .pm-icon {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0;
	color: var(--ink-2);
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

body.prominent .fr-credits .pm-icon[hidden] {
	display: none;
}

body.prominent .fr-credits .pm-icon:hover,
body.prominent .fr-credits .pm-icon:focus-visible,
body.prominent .fr-credits .pm-icon.is-done {
	color: var(--ink);
}

/* `.copy` — the reading column. */
body.prominent .fr-copy {
	max-width: 35em;
	font-family: var(--font-text);
	font-size: 18.5px;
	line-height: 1.72;
}

body.prominent .fr-copy p,
body.prominent .fr-copy li {
	font-weight: 400;
}

body.prominent .fr-copy > * + * {
	margin-top: 1.1em;
}

/* The story's opening heading is its standfirst (`.lead-p`). */
body.prominent .fr-copy > h2:first-child {
	margin: 0 0 1.3em;
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	line-height: 1.5;
	letter-spacing: 0;
}

body.prominent .fr-copy > h2:first-child::before,
body.prominent .fr-copy h2::before {
	content: none;
}

body.prominent .fr-copy h2 {
	margin-top: 1.6em;
	font-family: var(--font-display);
	font-size: clamp(32px, 2.6vw, 42px);
	font-style: normal;
	font-stretch: 74%;
	line-height: 1.02;
	letter-spacing: normal;
}

body.prominent .fr-copy h3,
body.prominent .fr-copy h4 {
	margin-top: 1.6em;
	font-stretch: 76%;
}

/* The interview question (`.q`): italic Didone, no letter before it. */
body.prominent .fr-copy .is-style-pm-question {
	margin-top: 1.8em;
	font-family: var(--font-display);
	font-size: 26px;
	font-style: italic;
	font-stretch: 82%;
	line-height: 1.2;
}

body.prominent .fr-copy .is-style-pm-question::before {
	content: none;
}

body.prominent .fr-copy a {
	text-decoration-color: var(--rule-2);
}

body.prominent .fr-copy a:hover {
	color: var(--ink);
	text-decoration-color: var(--ink);
}

/* Quotations (`.copy blockquote`, `.pull`): italic Didone hung on its
   opening mark, no rules. Embeds keep their own blockquote (prominent.css). */
body.prominent .fr-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed),
body.prominent .fr-copy .wp-block-quote,
body.prominent .fr-copy .wp-block-pullquote {
	margin: 1.6em 0;
	padding: 0;
	border: 0;
}

body.prominent .fr-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed) p {
	font-size: 30px;
	font-stretch: var(--display-stretch-s);
	line-height: 1.16;
	text-indent: -.4em;
}

body.prominent .fr-copy .wp-block-pullquote {
	margin: 1.4em 0 1.6em;
}

body.prominent .fr-copy .wp-block-pullquote p {
	font-size: clamp(44px, 4vw, 66px);
	font-stretch: 74%;
	line-height: 1.02;
	text-indent: -.42em;
}

body.prominent .fr-copy figcaption,
body.prominent .fr-copy .wp-element-caption {
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-style: normal;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .fr-copy blockquote cite,
body.prominent .fr-copy .wp-block-pullquote cite {
	color: var(--ink-2);
	font-weight: 500;
}

@media only screen and (min-width: 961px) {
	body.prominent .site-wrapper:not(.f-width) .fr-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed),
	body.prominent .site-wrapper:not(.f-width) .fr-copy .wp-block-pullquote {
		margin-left: 0;
		padding-left: 0;
	}
}

/* `.story-end`: the tags, the author, More from PROMINENT, the next story. */
body.prominent .fr-tags {
	margin-top: 48px;
}

body.prominent .fr-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 64px 0 0;
	padding: 22px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

body.prominent .fr-author .author-content {
	display: flex;
	flex: 1 1 100%;
	box-sizing: border-box;
	width: auto;
	border-left: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	text-align: left;
}

body.prominent .fr-author__nm {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	font-stretch: 76%;
	line-height: 1.1;
}

body.prominent .fr-author p {
	flex: 1 1 100%;
	order: 2;
	max-width: 30em;
	margin: 0;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.5;
}

body.prominent .fr-also .fr-head__t {
	font-size: clamp(44px, 4.4vw, 76px);
}

/* AnyMag floats its related posts; here they are a section in the flow, and
   nothing after them stands beside a float. */
body.prominent .fr-also {
	float: none;
	width: auto;
	margin-bottom: 0;
	padding-top: 88px;
}

body.prominent .fr-also__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

body.prominent .fr-also__grid .fr-card__h {
	font-size: 22px;
}

body.prominent .fr-next {
	display: block;
	clear: both;
	margin: var(--sec-y) 0 0;
	padding: 0;
	overflow: visible;
	border: 0;
}

body.prominent .fr-next__a {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

body.prominent .fr-next__a + .fr-next__a {
	margin-top: 48px;
}

/* AnyMag sizes and greys every span in .post-navigation (style.css,
   custom-css.php); here the spans are the kicker and the headline. */
body.prominent .post-navigation.fr-next span {
	color: inherit;
	font-size: inherit;
}

body.prominent .post-navigation.fr-next .fr-kick {
	margin: 0 0 14px;
	color: var(--ink-2);
	font-size: var(--t-lbl);
	line-height: 1.3;
}

body.prominent .fr-next__a .fr-ph {
	aspect-ratio: 16 / 10;
}

body.prominent .post-navigation.fr-next .fr-next__h {
	display: block;
	margin-top: 20px;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(40px, 4.2vw, 72px);
	font-stretch: var(--display-stretch);
	line-height: .96;
	letter-spacing: -.012em;
	text-wrap: balance;
}

/* FR5 retains both AnyMag directions; Next keeps the concept's photograph. */
body.prominent .fr-prev {
	display: block;
	max-width: 28em;
	min-height: var(--tap);
	margin-bottom: 32px;
	padding-bottom: 24px;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}

body.prominent .post-navigation.fr-next .fr-prev__h {
	display: block;
	font-family: var(--font-display);
	font-size: 28px;
	font-stretch: var(--display-stretch);
	line-height: 1.08;
	text-wrap: balance;
}

/* The way into the comments, after Next: one line. WordPress's form waits
   behind "Leave a comment" (#respond, reached by its own link, a reply link
   or a return after posting); the concept's story ends with Next. */
body.prominent .fr-cmts {
	margin-top: 64px;
}

body.prominent .pm-cmts ~ .post-comments #respond:not(:target) {
	display: none;
}

body.prominent .pm-cmts ~ .post-comments .comment #respond {
	display: block;
}

/* 7 ─ The black leaf — the menu panel and the footer ──────────────────── */

/* The leaf redefines the tokens, so every rule inside it — prominent.css's
   included — turns with it. Black by day and by night. */
body.prominent .nav-panel,
body.prominent #footer.pm-foot {
	--paper: var(--leaf);
	--paper-2: var(--leaf-2);
	--paper-3: var(--leaf-3);
	--ink: var(--leaf-ink);
	--ink-2: var(--leaf-ink-2);
	--ink-3: var(--leaf-ink-3);
	--rule: var(--leaf-rule);
	--rule-2: var(--leaf-rule-2);
	--accent: var(--leaf-ink);
	--acc: var(--leaf-ink);
	--on-accent: var(--leaf);
	--focus: var(--leaf-ink);
	color: var(--ink);
	background-color: var(--leaf);
	color-scheme: dark;
}

/* On the leaf the logotype is the file drawn for a dark ground (the pair,
   inc/prominent/logos.php), in both editions. */
body.prominent .nav-panel .anymag-logo--light,
body.prominent #footer .anymag-logo--light {
	display: none;
}

body.prominent .nav-panel .anymag-logo--dark,
body.prominent #footer .anymag-logo--dark {
	display: inline-block;
}

/* The menu (`.menu`): a black curtain that falls over the cover column, the
   desks in Didone, italic and stepped forward under the pointer. AnyMag's
   trigger, panel, sub-menu toggles and scroll rail are untouched. */
body.prominent .nav-panel {
	width: 100%;
	opacity: 1;
	clip-path: inset(0 0 100% 0);
	transition: clip-path .8s var(--ease-io), visibility 0s linear .8s;
}

body.prominent .nav-open .nav-panel {
	clip-path: inset(0 0 0 0);
	transition: clip-path .8s var(--ease-io), visibility 0s linear 0s;
}

body.prominent .nav-open .top-menu-button {
	color: var(--leaf);
	background: var(--leaf-ink);
}

/* inline-flex: the section's count (inc/prominent/menu.php) stands at the
   top of the word, as the prototype sets it. */
body.prominent #nav-wrapper .nav-menu li a {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	min-height: var(--tap);
	color: var(--ink);
	background-image: none;
	font-size: clamp(48px, 6vw, 104px);
	font-weight: 400;
	font-stretch: 70%;
	line-height: 1;
	transition: transform .5s var(--ease), color .2s;
}

body.prominent #nav-wrapper .nav-menu li a:hover,
body.prominent #nav-wrapper .nav-menu li a:focus-visible,
body.prominent #nav-wrapper .nav-menu li.current-menu-item > a,
body.prominent #nav-wrapper .nav-menu li.current-menu-ancestor > a {
	color: var(--ink);
	font-style: italic;
	text-decoration: none;
	transform: translateX(16px);
}

body.prominent #nav-wrapper .nav-menu li {
	margin-bottom: .06em;
}

body.prominent .nav-panel .menu-main-container > ul > li {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .5s, transform .8s var(--ease);
}

body.prominent .nav-open .nav-panel .menu-main-container > ul > li {
	opacity: 1;
	transform: none;
	transition-delay: .3s;
}

body.prominent .nav-open .nav-panel .menu-main-container > ul > li:nth-child(2) {
	transition-delay: .345s;
}

body.prominent .nav-open .nav-panel .menu-main-container > ul > li:nth-child(3) {
	transition-delay: .39s;
}

body.prominent .nav-open .nav-panel .menu-main-container > ul > li:nth-child(4) {
	transition-delay: .435s;
}

body.prominent .nav-open .nav-panel .menu-main-container > ul > li:nth-child(5) {
	transition-delay: .48s;
}

body.prominent .nav-open .nav-panel .menu-main-container > ul > li:nth-child(n + 6) {
	transition-delay: .525s;
}

/* Light / Dark / Auto as words (the prototype's `.seg`): the one in force
   underlined, the others at the leaf's second ink. */
body.prominent .nav-panel .appearance-inline,
body.prominent #footer .appearance-inline {
	gap: 0 22px;
}

body.prominent .nav-panel .appearance-inline__option,
body.prominent #footer .appearance-inline__option {
	padding: 0;
	color: var(--ink-2);
	background: none;
	border: 0;
	font-weight: 500;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

body.prominent .nav-panel .appearance-inline__option:hover,
body.prominent .nav-panel .appearance-inline__option:focus-visible,
body.prominent #footer .appearance-inline__option:hover,
body.prominent #footer .appearance-inline__option:focus-visible {
	color: var(--ink);
}

/* A word that acts is still a 44px target (the season filter, share, Light /
   Dark / Auto): the box is widened round the word, never the word spaced. */
body.prominent .nav-panel .appearance-inline__option,
body.prominent #footer .appearance-inline__option,
body.prominent .fr-seasons button,
body.prominent .fr-credits .pm-icon {
	min-width: var(--tap);
	justify-content: center;
	text-align: center;
}

body.prominent .nav-panel .appearance-inline__option[aria-pressed="true"],
body.prominent #footer .appearance-inline__option[aria-pressed="true"] {
	color: var(--ink);
	background: none;
	text-decoration: underline;
}

body.prominent .nav-panel .appearance-inline__option svg,
body.prominent #footer .appearance-inline__option svg {
	display: none;
}

body.prominent #nav-wrapper .nav-menu li a .fr-mcount {
	padding-top: 1em;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-style: normal;
	font-weight: 500;
	font-stretch: 100%;
	line-height: 1;
	letter-spacing: var(--track-label);
}

/* The column beside the list (the prototype's `.mside`): the section's
   photograph, a line about it, a search field, the magazine's pages and
   Light / Dark / Auto. AnyMag's own Search link and appearance row inside
   the rail give way to it. */
body.prominent .nav-panel .menu-search {
	display: none;
}

body.prominent .fr-maside {
	display: grid;
	align-content: start;
	gap: 28px;
	min-height: 0;
}

/* A definite height, so the grid row is the photograph's: with only a
   max-height the row was sized shorter than the picture and the note under
   it lost its first line. */
body.prominent .fr-mpic {
	position: relative;
	justify-self: start;
	overflow: hidden;
	width: auto;
	max-width: 100%;
	height: 52vh;
	aspect-ratio: 4 / 5;
	background: var(--paper-2);
}

body.prominent .fr-mpic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}

body.prominent .fr-mpic img.is-on {
	opacity: 1;
	transform: none;
}

body.prominent .fr-mnote {
	max-width: 30em;
	min-height: 48px;
	margin: 0;
	color: var(--ink-2);
	font-family: var(--font-text);
	font-size: 15px;
	line-height: 1.6;
}

body.prominent .fr-mnote[hidden] {
	display: none;
}

body.prominent .fr-mnote b {
	color: var(--ink);
	font-weight: 600;
}

body.prominent .fr-msearch {
	display: flex;
	border-bottom: 1px solid var(--rule-2);
}

body.prominent .fr-msearch input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	margin: 0;
	padding: 0;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	font-stretch: 80%;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

body.prominent .fr-msearch input::placeholder {
	color: var(--ink-2);
	font-style: italic;
	opacity: 1;
}

body.prominent .fr-msearch input:focus {
	outline: none;
}

body.prominent .fr-msearch:focus-within {
	border-bottom-color: var(--ink);
}

body.prominent .fr-msearch button {
	display: grid;
	place-items: center;
	width: var(--tap);
	min-height: var(--tap);
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}

body.prominent .fr-msearch svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

body.prominent .fr-mlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
}

body.prominent .fr-mlinks a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	text-underline-offset: 6px;
}

body.prominent .fr-mlinks a:hover,
body.prominent .fr-mlinks a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* The curtain is the whole window, as the prototype's is: the column that
   holds it rises over the right-hand page and the header's controls while
   it is open; on the spread the panel lays the list and the column side by
   side. */
body.prominent .nav-open > .magcover,
body.prominent .nav-open > .magheader {
	z-index: 40;
}

@media only screen and (min-width: 961px) {
	body.prominent .nav-panel,
	body.prominent .nav-open .nav-panel,
	body.prominent .nav-open #site-header .nav-panel {
		position: fixed;
		inset: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
		grid-template-rows: auto minmax(0, 1fr);
		column-gap: clamp(32px, 5vw, 96px);
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		padding: 0 var(--pad);
	}

	/* The prototype's `.panel-top`: the logotype beside the close mark. */
	body.prominent .nav-panel .nav-header {
		grid-column: 1 / -1;
		height: 76px;
	}

	body.prominent .nav-panel #nav-wrapper {
		grid-column: 1;
		grid-row: 2;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: 8px 0 0;
	}

	body.prominent .nav-panel .fr-maside {
		grid-column: 2;
		grid-row: 2;
		overflow-y: auto;
		padding: 8px 0 24px;
	}

	body.prominent #nav-wrapper .nav-menu li {
		margin-bottom: 0;
	}
}

/* Below the spread the curtain is one column that scrolls as a whole: the
   list, then the line, the field, the pages and the appearance; no
   photograph (the cover already is one). */
@media only screen and (max-width: 960px) {
	body.prominent .nav-panel {
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.prominent .nav-panel #nav-wrapper {
		flex: none;
		width: auto;
		max-height: none;
		margin-right: 0;
		margin-left: 0;
		padding-right: var(--pad);
		padding-left: var(--pad);
	}

	body.prominent .nav-panel .fr-maside {
		flex: none;
		padding: 36px var(--pad) 48px;
	}

	body.prominent .fr-mpic,
	body.prominent .nav-panel .simplebar-track {
		display: none;
	}
}

/* The footer (`.foot`): black, the desks in Didone with their counts. */
body.prominent #footer.pm-foot {
	margin-top: clamp(96px, 10vw, 160px);
	padding: 64px var(--pad) 36px;
	border-top: 0;
}

body.prominent .pm-foot__cols {
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 40px;
}

body.prominent .pm-foot__cols p {
	max-width: 22em;
	color: var(--ink-2);
	font-family: var(--font-text);
	font-size: 15px;
	font-style: normal;
	line-height: 1.6;
}

body.prominent .pm-foot__cols .pm-lbl {
	margin-bottom: 14px;
	color: var(--ink-2);
	font-weight: 500;
	line-height: 1.3;
}

/* Each link is a 44px target on the concept's 35px rhythm (its 34px link
   on a list line): the next one overlaps the last nine pixels of the one
   before, which hold no type. */
body.prominent .pm-foot__cols a {
	display: flex;
	box-sizing: border-box;
	align-items: baseline;
	gap: 8px;
	min-height: 44px;
	margin: 0 0 -9px;
	padding: 6px 0 0;
	color: var(--ink) !important;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	font-stretch: 78%;
	line-height: 1.1;
	letter-spacing: 0;
}

body.prominent .pm-foot__cols a:hover,
body.prominent .pm-foot__cols a:focus-visible {
	color: var(--ink) !important;
	font-style: italic;
}

body.prominent .pm-foot__cols small {
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--track-label);
}

body.prominent .pm-foot__logo {
	width: 220px;
	margin: 0 0 18px;
}

/* The footer's links are Didone words; Light / Dark / Auto keeps the label
   voice it has in the menu, under its own label. */
body.prominent .pm-foot__cols .pm-foot__app {
	margin-top: 28px;
}

body.prominent .pm-foot__cols .appearance-inline__option {
	margin: 0;
	padding: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-stretch: 100%;
	line-height: 1;
}

body.prominent .pm-foot__bottom {
	margin-top: 48px;
	padding: 20px 0 0;
	color: var(--ink-2);
	border-top-color: var(--rule);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
}

body.prominent .pm-foot__bottom a {
	color: var(--ink-2) !important;
}

body.prominent .pm-foot__bottom a:hover {
	color: var(--ink) !important;
}

/* 8 ─ Search ──────────────────────────────────────────────────────────── */

/* The prototype's `.search`: a white page, not AnyMag's centred box — the
   field a large Didone line on a hairline, a label over it, words to try
   under it, and results as the reader types (inc/prominent/search.php). */
body.prominent .fr-search {
	overflow-y: auto;
	text-align: left;
	background: var(--paper);
	overscroll-behavior: contain;
}

body.prominent .fr-search::before {
	display: none;
}

body.prominent .fr-search .searchform {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 92px var(--pad) 72px;
	font-size: inherit;
	text-align: left;
	transform: none;
}

body.prominent .fr-search .searchform form {
	position: relative;
	box-shadow: none;
}

body.prominent .fr-search__lab {
	display: block;
	margin: 0 0 6px;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .fr-search .search-field {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: 4px 0 12px;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 84px);
	font-weight: 400;
	font-stretch: 72%;
	line-height: 1.08;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}

/* The browser's own clear mark is not part of the line. */
body.prominent .fr-search .search-field::-webkit-search-cancel-button,
body.prominent .fr-msearch input::-webkit-search-cancel-button {
	display: none;
	-webkit-appearance: none;
}

body.prominent .fr-search .search-field::placeholder {
	color: var(--ink-2);
	font-style: italic;
	opacity: 1;
}

body.prominent .fr-search .search-field:focus,
body.prominent .fr-search .search-field:focus-visible {
	outline: none;
	border-bottom-color: var(--ink);
}

/* AnyMag hides an empty paragraph (`p:empty`); the count's line is kept,
   as the concept's is, so the words to try do not move when it fills. */
body.prominent .fr-search__count,
body.prominent .fr-search__count:empty {
	display: block;
	min-height: 20px;
	margin: 14px 0 6px;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .fr-res,
body.prominent .fr-res li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.prominent .fr-res a {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 14px 6px;
	color: var(--ink);
	border-top: 1px solid var(--rule);
	text-decoration: none;
}

body.prominent .fr-res a:hover,
body.prominent .fr-res a[aria-selected="true"] {
	background: var(--paper-2);
}

body.prominent .fr-res__ph {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--paper-2);
}

body.prominent .fr-res__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.prominent .fr-res__kick {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .fr-res b {
	display: block;
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: 25px;
	font-weight: 400;
	font-stretch: 76%;
	line-height: 1.08;
}

body.prominent .fr-res mark {
	color: inherit;
	background: none;
	font-style: italic;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

body.prominent .fr-search__try {
	margin-top: 22px;
}

body.prominent .fr-search__try[hidden],
body.prominent .fr-search__none[hidden] {
	display: none;
}

body.prominent .fr-try {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin-top: 8px;
}

body.prominent .fr-try button,
body.prominent .fr-try a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font-family: var(--font-display);
	font-size: 26px;
	font-style: italic;
	font-stretch: 80%;
	line-height: 1.6;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

body.prominent .fr-try button:hover,
body.prominent .fr-try a:hover,
body.prominent .fr-try button:focus-visible,
body.prominent .fr-try a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

body.prominent .fr-search__none {
	padding: 32px 0;
}

body.prominent .fr-search__none-h {
	margin: 0 0 10px;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 400;
	font-stretch: 72%;
	line-height: 1.04;
}

body.prominent .fr-search__none p {
	max-width: 32em;
	margin: 0 0 8px;
	color: var(--ink-2);
}

/* The close mark as the prototype's: a disc in ink, top right, centred in
   its 76px `.panel-top` (15px down), where the menu's close also stands. */
body.prominent .fr-search .btn-close-search {
	position: fixed;
	z-index: 2;
	top: 15px;
	right: var(--pad);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--paper);
	background: var(--ink);
	border-radius: 50%;
}

body.prominent .fr-search .btn-close-search .close-icon {
	width: 14px;
	height: 14px;
	color: var(--paper);
}

/* 9 ─ Arrival ─────────────────────────────────────────────────────────── */

/* The headline rises word by word through its own mask (`.w`); the dek, the
   link and the credits follow. A reader who asked for less motion sees the
   page as it ends. */
/* The mask reaches a little past each word, so an italic's overhang is
   never cut; it clips only where the words rise. */
body.prominent .fr-w {
	display: inline-block;
	margin: 0 -.14em -.08em;
	padding: 0 .14em .08em;
	vertical-align: top;
}

body.prominent .fr-w > span {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	body.prominent .fr-arrive .fr-w {
		overflow: hidden;
	}

	body.prominent .fr-arrive .fr-w > span {
		animation: fr-rise 1.1s var(--ease) both;
		animation-delay: calc(var(--i, 0) * 28ms + .1s);
	}

	body.prominent .fr-arrive .fr-dek,
	body.prominent .fr-arrive > .fr-tl,
	body.prominent .fr-arrive .fr-credits,
	body.prominent .fr-arrive + .fr-tabs {
		animation: fr-fade .9s var(--ease) .55s both;
	}
}

@keyframes fr-rise {
	from {
		transform: translateY(105%);
	}
}

@keyframes fr-fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* 10 ─ Phone and tablet ───────────────────────────────────────────────── */

@media only screen and (min-width: 961px) and (max-width: 1180px) {
	body.prominent .fr-also__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body.prominent .fr-also__grid .fr-card:nth-child(3) {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 22px;
		align-items: start;
	}

	body.prominent .fr-also__grid .fr-card:nth-child(3) .fr-ph {
		grid-row: 1 / span 2;
	}

	body.prominent .fr-also__grid .fr-card:nth-child(3) .fr-kick {
		margin-top: 0;
	}

	body.prominent .fr-credits {
		grid-template-columns: auto auto;
	}

	body.prominent .fr-credits .pm-acts {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* Below 961px AnyMag's split collapses: the cover is the top of the page.
   It is ONE size on every route that has one — the front page, the index, a
   section, a story — as it is in the prototype and in AnyMag itself (the
   owner, 2026-10-07: "one size for everything"; a PLATE-era rule had made it
   a 359px band on the index and the sections). It carries a story's
   headline, as a magazine cover does: on a story its own (the page's
   heading stays for assistive technology and is not drawn twice); on the
   front page and the index the cover story's; on a section the story whose
   photograph it stands on, with the way into it, as the prototype's desk
   does — the section's own head stays drawn under it. The cover
   does not follow the reader here (prominent.js). AnyMag caps it at 736px
   below 415px; max-height is named so the cap is this one. */
@media only screen and (max-width: 960px) {
	body.prominent .magcover {
		height: 88vh;
		height: 88svh;
		min-height: 560px;
		max-height: 860px;
	}

	body.prominent .fr-cap {
		bottom: 28px;
	}

	body.prominent .fr-cap__word {
		font-size: clamp(38px, 10.6vw, 56px);
	}

	body.prominent .fr-cap--head .fr-cap__word {
		display: none;
	}

	body.prominent .fr-cap--head .fr-cap__head {
		display: block;
		margin: 0;
		color: var(--on-photo);
		font-family: var(--font-display);
		font-size: clamp(38px, 10.6vw, 56px);
		font-weight: 400;
		font-stretch: var(--display-stretch-xl);
		line-height: .98;
		letter-spacing: -.01em;
		text-wrap: balance;
		overflow-wrap: break-word;
	}

	body.prominent .fr-cap__head em {
		font-style: italic;
	}

	/* A cover that names its page rather than a story (a section on the
	   owner's own image, an index with no cover story) is the owner's
	   photograph alone here: the page's head, directly under it, names the
	   page, and is not drawn twice. A story whose title the owner hid keeps
	   its label and its subject. */
	body.prominent:not(.single-post) .fr-cap:not(.fr-cap--head) {
		display: none;
	}

	/* The page's own headline is drawn only where the cover does not carry
	   it: a story or a front page with no cover keeps it on the page. */
	body.prominent .magcover ~ .magcontent .fr-front .fr-lead__h,
	body.prominent.single-post .magcover ~ .magcontent .post-entry .fr-story__h {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The lead's headline is a link: tabbed to, it is drawn, so the focus
	   is never on something invisible. */
	body.prominent .magcover ~ .magcontent .fr-front .fr-lead__h:focus-within {
		position: static !important;
		width: auto;
		height: auto;
		margin: 22px 0 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	/* As the concept's phone (`.lead .dek, .story-open .dek { margin-top:
	   0 }`): the kicker's line is the only gap above the standfirst. */
	body.prominent.fr-front-cover .fr-lead .fr-dek,
	body.prominent.single-post .fr-story-open .fr-dek {
		margin-top: 0;
	}

	/* The page's first breath on a phone: 28px where a cover stands above
	   the page; on a one-column route (a story or page with no Featured
	   Image, a search, a tag, a 404) AnyMag's header stands over the top of
	   the page itself, so the page starts below it. */
	body.prominent #main-area,
	body.prominent.home #main-area,
	body.prominent .f-width #main-area,
	body.prominent.single-post .f-width #main-area,
	body.prominent.page .f-width #main-area,
	body.prominent.home .f-width #main-area,
	body.prominent.home.page .f-width #main-area {
		padding-top: calc(var(--header-h) + 28px);
	}

	body.prominent .site-wrapper:not(.f-width) #main-area,
	body.prominent .f-width > .magcover ~ .magcontent #main-area {
		padding-top: 28px;
	}

	/* AnyMag sets the page 40-60px under the cover on a phone; the page's
	   first breath is the 28px above. */
	body.prominent .magcontent .container {
		margin-top: 0;
	}

	/* The controls on the cover photograph carry the disc on every route,
	   the front page's one-column wrapper included. */
	body.prominent.fr-front-cover .f-width .right-search a.search,
	body.prominent.fr-front-cover .f-width .header-icon .hidden-sidebar-button {
		color: var(--disc-ink);
		background: var(--disc);
	}

	body.prominent .fr-edit {
		gap: 16px;
		padding-top: 56px;
	}

	body.prominent .fr-edit .fr-card:nth-child(2) {
		margin-top: 64px;
	}

	body.prominent .fr-card__h {
		font-size: 23px;
	}

	body.prominent .fr-sec {
		padding-top: 88px;
	}

	body.prominent .fr-head__t {
		font-size: clamp(52px, 15vw, 72px);
	}

	body.prominent .fr-coll__list a {
		grid-template-columns: minmax(0, 1fr) 64px;
		gap: 4px 16px;
	}

	body.prominent .fr-coll__s {
		grid-row: 3;
		grid-column: 1;
	}

	body.prominent .fr-coll__pic,
	body.prominent .fr-li__pic {
		display: block;
		grid-row: 1 / span 3;
		grid-column: 2;
		align-self: start;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		background: var(--paper-2);
	}

	body.prominent .fr-coll__pic img,
	body.prominent .fr-li__pic img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.prominent .fr-coll__d {
		font-size: 34px;
	}

	body.prominent .fr-coll__list a:hover .fr-coll__d,
	body.prominent .fr-coll__list a:hover .fr-coll__t {
		transform: none;
	}

	body.prominent .fr-quote {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 0 16px;
	}

	body.prominent .fr-quote .fr-ph img {
		filter: none;
	}

	body.prominent .fr-quote blockquote p {
		font-size: clamp(30px, 8.4vw, 40px);
	}

	body.prominent .fr-strip {
		grid-auto-columns: 68vw;
		gap: 14px;
	}

	body.prominent .fr-strip-nav {
		display: none !important;
	}

	body.prominent .fr-subject__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	body.prominent .fr-row {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 16px;
	}

	body.prominent .fr-li {
		grid-template-columns: minmax(0, 1fr) 72px;
		gap: 4px 16px;
	}

	body.prominent .fr-li__date {
		grid-row: 1;
		grid-column: 1;
	}

	body.prominent .fr-li__h {
		grid-row: 2;
		grid-column: 1;
		font-size: 24px;
	}

	body.prominent .fr-li__m {
		grid-row: 3;
		grid-column: 1;
	}

	body.prominent .fr-idx-head__t {
		font-size: clamp(72px, 22vw, 120px);
	}

	body.prominent .blog-posts {
		gap: 32px 14px;
	}

	body.prominent .blog-posts > .fr-ent:nth-child(4n + 2) {
		margin-top: 48px;
	}

	body.prominent .blog-posts > .fr-ent:nth-child(4n + 3) {
		margin-top: -24px;
	}

	body.prominent .fr-credits {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body.prominent .fr-credits .pm-acts {
		grid-column: 1 / -1;
		justify-self: start;
	}

	body.prominent .fr-copy {
		font-size: 18px;
	}

	body.prominent .fr-copy > h2:first-child {
		font-size: 20px;
	}

	body.prominent .fr-copy .wp-block-pullquote p {
		font-size: clamp(36px, 10vw, 48px);
	}

	body.prominent .fr-also__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body.prominent .fr-also__grid .fr-card:nth-child(3) {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 16px;
		align-items: start;
	}

	body.prominent .fr-also__grid .fr-card:nth-child(3) .fr-ph {
		grid-row: 1 / span 2;
	}

	body.prominent .fr-also__grid .fr-card:nth-child(3) .fr-kick {
		margin-top: 0;
	}

	body.prominent .pm-foot__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body.prominent .pm-foot__cols > div:first-child {
		grid-column: 1 / -1;
	}

	/* Three 44px words in half a phone: the boxes keep their width and the
	   space between them closes, so the row stays one row. */
	body.prominent #footer .appearance-inline {
		gap: 0 6px;
	}

	/* AnyMag's responsive.css sets the menu at 22px !important below 480px;
	   only another !important reaches it. The concept's `.mdesks a` is
	   clamp(48px, 6vw, 104px): 48px on every phone. */
	body.prominent #nav-wrapper .nav-menu li a {
		font-size: clamp(48px, 6vw, 104px) !important;
	}
}

/* 11 ─ The chrome, as the concept draws it ──────────────────────────── */

/* Reader controls at the top right of the window, on every route and at every
   width (the concept's `.controls`): Search and the menu. They are printed
   in the right page's header (#top-bar-right, inc/headers/header-right.php)
   but fixed to the window, so the header's band can slide away while they
   stay. The cover carries the logotype alone. */
body.prominent #top-bar-right {
	position: fixed;
	z-index: 45;
	top: 10px;
	right: var(--pad);
	display: flex;
	gap: 6px;
	align-items: center;
	pointer-events: auto;
	/* AnyMag animates `all` here: the controls' visibility must change at
	   once, or Escape hands focus back to a trigger that is still hidden. */
	transition: none;
}

/* WordPress's editor toolbar is fixed on desktop and scrolls away on phones.
   initBar follows its visible bottom, so the reader controls and overlay
   close buttons remain reachable without leaving a gap after it scrolls off. */
body.prominent.admin-bar {
	--fr-admin-offset: var(--wp-admin--admin-bar--height, 32px);
}

body.prominent.admin-bar .site-wrapper:not(.f-width) .magheader,
body.prominent.admin-bar.fr-front-cover .f-width > .magheader,
body.prominent.admin-bar .fr-bar-logo {
	top: var(--fr-admin-offset);
}

body.prominent.admin-bar #top-bar-right {
	top: calc(var(--fr-admin-offset) + 10px);
}

body.prominent.admin-bar .nav-open #cover-header .top-menu-button,
body.prominent.admin-bar .nav-open #site-header .top-menu-button,
body.prominent.admin-bar .fr-search .btn-close-search {
	top: calc(var(--fr-admin-offset) + 15px);
}

body.prominent.admin-bar .nav-panel,
body.prominent.admin-bar .nav-open .nav-panel,
body.prominent.admin-bar .nav-open #site-header .nav-panel,
body.prominent.admin-bar .fr-search {
	top: var(--fr-admin-offset);
	height: calc(100% - var(--fr-admin-offset));
}

@media only screen and (max-width: 960px) {
	body.prominent.admin-bar .magheader,
	body.prominent.admin-bar .f-width .magheader {
		top: var(--fr-admin-offset);
	}

	body.prominent.admin-bar #top-bar-right {
		top: calc(var(--fr-admin-offset) + 14px);
	}
}

body.prominent .nav-open #top-bar-right {
	visibility: hidden;
}

/* Search: a paper pill with the glass and the word (`.ctl-search`). */
body.prominent #top-bar-right .right-search a.search {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: var(--tap);
	padding: 0 12px;
	color: var(--ink);
	background: var(--paper);
	border-radius: 22px;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
}

body.prominent #top-bar-right .right-search a.search:hover,
body.prominent #top-bar-right .right-search a.search:focus-visible {
	color: var(--ink);
	background: var(--paper-2);
	text-decoration: none;
}

body.prominent .fr-icon {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

/* The menu: a black disc with two bars (`.trigger`), the reading ring
   around it on a story. */
body.prominent .top-menu-button.fr-trigger {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--paper);
	background: var(--ink);
	border-radius: 50%;
	transition: transform .3s var(--ease);
}

body.prominent .top-menu-button.fr-trigger:hover {
	transform: scale(1.06);
}

body.prominent .top-menu-button.fr-trigger:active {
	transform: scale(.96);
}

/* The link is the whole disc, so the disc is the target. */
body.prominent .fr-trigger a.open-hidden-menu {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: inherit;
	border-radius: 50%;
}

/* AnyMag's rule for its three bar spans reaches this span too. */
body.prominent .fr-trigger a.open-hidden-menu .fr-bars {
	position: relative;
	top: auto;
	left: auto;
	display: block;
	width: 16px;
	height: 7px;
	margin: 0;
	border: 0;
	transition: none;
}

body.prominent .fr-bars::before,
body.prominent .fr-bars::after {
	position: absolute;
	right: 0;
	left: 0;
	height: 1.5px;
	background: currentColor;
	content: "";
}

body.prominent .fr-bars::before {
	top: 0;
}

body.prominent .fr-bars::after {
	bottom: 0;
}

body.prominent .fr-trigger .fr-ring circle {
	stroke: var(--ink);
}

/* AnyMag's own trigger stands beside its panel, in the cover's or the
   page's header; closed, it gives way to the disc above; open, it is the
   curtain's close at the top right (`.close`). */
body.prominent #cover-header .top-menu-button,
body.prominent #site-header .top-menu-button {
	display: none;
}

body.prominent .nav-open #cover-header .top-menu-button,
body.prominent .nav-open #site-header .top-menu-button {
	position: fixed;
	z-index: 5;
	top: 15px;
	right: var(--pad);
	left: auto;
	display: flex;
	width: 46px;
	height: 46px;
	margin: 0;
	color: var(--leaf);
	background: var(--leaf-ink);
	transition: transform .4s var(--ease);
}

body.prominent .nav-open #cover-header .top-menu-button:hover,
body.prominent .nav-open #site-header .top-menu-button:hover {
	transform: rotate(90deg);
}

/* The curtain's head: the logotype at the left of a 76px band (in flow,
   and never shrunk by the column under it). */
body.prominent .nav-panel .nav-header {
	display: flex;
	flex: none;
	align-items: center;
	height: 76px;
	margin: 0;
	padding: 0;
}

body.prominent .nav-panel .nav-header .appearance-inline {
	margin: 0 64px 0 auto;
}

body.prominent .nav-panel .menu-logo {
	position: static;
}

/* The logotype of the bar a phone shows once the cover has gone. */
body.prominent .fr-bar-logo {
	display: none;
}

@media only screen and (min-width: 961px) {
	/* The band under the desks slides away while the reader goes down the
	   page and returns when they go back up (`.bar.is-hidden`); the
	   controls are fixed to the window and stay. A static front page with
	   the cover (`fr-front-cover`) has the split too, in AnyMag's one-column
	   wrapper, and its band goes the same way. */
	body.prominent .site-wrapper:not(.f-width) .magheader,
	body.prominent.fr-front-cover .f-width > .magheader {
		background: none;
	}

	body.prominent .site-wrapper:not(.f-width) .magheader::before,
	body.prominent.fr-front-cover .f-width > .magheader::before {
		position: absolute;
		z-index: -1;
		inset: 0;
		background: var(--paper);
		content: "";
		transition: transform .5s var(--ease-io);
	}

	body.prominent .site-wrapper:not(.f-width) .magheader .pm-top,
	body.prominent.fr-front-cover .f-width > .magheader .pm-top {
		transition: transform .5s var(--ease-io);
	}

	body.prominent .site-wrapper:not(.f-width) .magheader.fr-bar-hidden::before,
	body.prominent.fr-front-cover .f-width > .magheader.fr-bar-hidden::before {
		transform: translateY(-100%);
	}

	body.prominent .site-wrapper:not(.f-width) .magheader.fr-bar-hidden .pm-top,
	body.prominent.fr-front-cover .f-width > .magheader.fr-bar-hidden .pm-top {
		transform: translateY(calc(-1 * var(--header-h)));
	}

	body.prominent #content-header,
	body.prominent .f-width #content-header,
	body.prominent.fr-front-cover .f-width #content-header {
		padding-right: calc(var(--pad) + 220px);
	}

	/* The cover's logotype stands where the concept's does: 32px down, at
	   the page's margin when the owner sets it left (AnyMag's Logo
	   Position), centred when they set it so; its width is AnyMag's Logo
	   Width. No trigger stands beside it any more. */
	body.prominent #cover-header {
		padding: 32px var(--pad) 0;
	}

	body.prominent .cover-logo.logo-left {
		margin-left: 0;
	}
}

@media only screen and (min-width: 961px) and (max-width: 1180px) {
	body.prominent #content-header,
	body.prominent .f-width #content-header,
	body.prominent.fr-front-cover .f-width #content-header {
		padding-right: calc(var(--pad) + 180px);
	}

	body.prominent #top-bar-right .right-search a.search {
		justify-content: center;
		width: var(--tap);
		padding: 0;
	}

	body.prominent #top-bar-right .right-search a.search .pm-word {
		display: none;
	}
}

@media only screen and (max-width: 960px) {
	body.prominent #top-bar-right {
		top: 14px;
		right: 14px;
	}

	body.prominent .magheader.fr-controls-hidden #top-bar-right {
		visibility: hidden;
		transform: translateY(calc(-100% - 20px));
		pointer-events: none;
	}

	body.prominent #top-bar-right .appearance__toggle {
		color: #0b0b0b;
		background: rgba(255, 255, 255, .92);
	}

	body.prominent #top-bar-right .right-search a.search {
		justify-content: center;
		width: var(--tap);
		padding: 0;
		color: #0b0b0b;
		background: rgba(255, 255, 255, .92);
		border-radius: 50%;
	}

	body.prominent #top-bar-right .right-search a.search:hover,
	body.prominent #top-bar-right .right-search a.search:focus-visible {
		color: #0b0b0b;
		background: #fff;
	}

	body.prominent #top-bar-right .right-search a.search .pm-word {
		display: none;
	}

	/* Below the spread the header is a band fixed to the top of the window
	   that arrives once the cover has scrolled away (`.bar.is-shown`) and
	   slides off while the reader goes down; on a route with no cover it is
	   there from the start. */
	body.prominent .magheader,
	body.prominent .site-wrapper:not(.f-width) .magheader,
	body.prominent .f-width .magheader {
		position: fixed;
		z-index: 30;
		top: 0;
		right: 0;
		left: 0;
		width: auto;
		height: var(--header-h);
		padding: 0;
		background: none;
		border: 0;
	}

	body.prominent .magheader::before {
		position: absolute;
		inset: 0;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		content: "";
		transform: translateY(-101%);
		transition: transform .5s var(--ease-io);
	}

	body.prominent .fr-bar-logo {
		position: fixed;
		top: 0;
		left: var(--pad);
		display: flex;
		align-items: center;
		width: 128px;
		height: var(--header-h);
		transform: translateY(-101%);
		transition: transform .5s var(--ease-io);
		pointer-events: auto;
	}

	body.prominent .fr-bar-logo img,
	body.prominent .fr-bar-logo .anymag-logo--type {
		width: 100%;
		height: auto;
	}

	body.prominent .magheader.fr-bar-shown::before,
	body.prominent .magheader.fr-bar-shown .fr-bar-logo {
		transform: none;
	}

	body.prominent .magheader.fr-bar-shown.fr-bar-hidden::before,
	body.prominent .magheader.fr-bar-shown.fr-bar-hidden .fr-bar-logo {
		transform: translateY(-101%);
	}

	/* The page's own logotype on a route with no cover is the bar's. */
	body.prominent #site-header .top-logo {
		display: none;
	}

	/* The curtain below the spread: the head at the page's margin, the
	   desks 8px under it (`.menu__grid`). */
	body.prominent .nav-panel .nav-header {
		flex-wrap: wrap;
		height: auto;
		min-height: 76px;
		padding: 18px var(--pad) 8px;
	}

	body.prominent .nav-panel .nav-header .appearance-inline {
		flex-basis: 100%;
		margin: 4px 0 0;
	}

	body.prominent .nav-panel #nav-wrapper {
		margin-top: 0;
		padding-top: 8px;
	}

	/* The cover's logotype on a phone: the concept's, 160px at the page's
	   margin, 22px down, clear of the two controls. AnyMag's Logo Width is a
	   share of the cover COLUMN and sizes the mark on the spread; below it
	   the cover is the whole screen and the share would mean something
	   else. */
	body.prominent #cover-header,
	body.prominent .f-width #cover-header {
		padding: 22px var(--pad) 0;
	}

	body.prominent .cover-logo,
	body.prominent .cover-logo:not(.logo-left),
	body.prominent .cover-logo.logo-left {
		left: auto;
		width: 160px;
		max-width: calc(100% - 120px);
		margin: 0;
		padding: 0;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* The curtain loses its fall, never its clip: the clip is what hides the
	   closed panel (a descendant's own `visibility: visible` beats the
	   panel's `hidden`), so `clip-path: none` here painted the closed menu
	   over the cover on every page. */
	body.prominent .nav-panel,
	body.prominent .nav-open .nav-panel {
		transition: none;
	}

	body.prominent .nav-panel .menu-main-container > ul > li {
		opacity: 1;
		transform: none;
	}
}