/*
 * PROMINENT — AnyMag's furniture in the magazine's voice.
 *
 * Everything here is scoped to `body.prominent` (Design: PROMINENT) and
 * restyles what AnyMag already renders: the header row, the cover's
 * logotype, the menu panel, search, the hidden sidebar, the page's fields,
 * pagination, the story's copy, comments, the lightbox and the footer.
 * Nothing here moves the split: `.magcover` keeps its fixed position and the
 * owner's Cover Width, `.magcontent` keeps the rest; the collapse to one
 * column stays AnyMag's. Colour, the two typefaces and their base sizes come
 * through AnyMag's own settings (inc/prominent/design.php).
 *
 * The composition of the Front Row direction — the lookbook cover, the front
 * page, the story's opener, the archives, the black menu and footer — is in
 * front-row.css, which loads after this file. Its reference is the approved
 * prototype "PROMINENT Front Row" (docs/anymag/design/concept-front-row/).
 * No @container and no :has(): the page cache's CSSTidy deletes the first
 * and the owner's oldest supported browsers lack the second.
 *
 *   1 Base and type roles      6 The page
 *   2 The header               7 The index — pagination, nothing found
 *   3 The cover, the logotype  8 The story's copy, comments, lightbox
 *   4 The menu panel           9 The footer
 *   5 Search, sidebar         10 Phone, states
 *
 * Every size, distance and colour is a token from prominent-tokens.css.
 * `!important` appears only where AnyMag's custom-css.php prints one of its
 * own against the same property.
 */

/* 1 ─ Base and type roles ─────────────────────────────────────────────── */

body.prominent {
	color: var(--ink);
	background: var(--paper);
	font-family: var(--font-text);
	font-weight: 300;
	letter-spacing: .004em;
	text-shadow: none;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	-webkit-font-smoothing: antialiased;
}

body.prominent ::selection {
	color: var(--on-accent);
	background: var(--accent);
}

body.prominent :focus-visible {
	outline: 1px solid var(--focus);
	outline-offset: 3px;
}

body.prominent a {
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color .2s;
}

body.prominent hr,
body.prominent .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rule-2);
	background: none;
}

body.prominent h1,
body.prominent h2,
body.prominent h3,
body.prominent h4,
body.prominent h5,
body.prominent h6 {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -.004em;
	text-wrap: balance;
}

body.prominent img {
	max-width: 100%;
}

/* .lbl — the rubric: small Jost caps, one tracking, muted ink. */
body.prominent .pm-lbl {
	display: block;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .pm-lbl a {
	color: inherit;
	text-decoration: none;
}

body.prominent .pm-lbl a:hover {
	color: var(--accent);
}

/* .act — a link that acts: a word on a hairline, never a button. */
body.prominent .pm-act {
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
	color: var(--ink);
	border-bottom: 1px solid var(--rule-2);
	font-family: var(--font-ui);
	font-size: var(--t-act);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--track-act);
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}

body.prominent .pm-act:hover,
body.prominent .pm-act:focus-visible {
	color: var(--accent);
	border-color: var(--accent);
}

/* The invisible hit area every small link carries, so a 10px word is still
   a 44px control. */
body.prominent .pm-act::after,
body.prominent .pm-top a::after,
body.prominent .pm-tags a::after {
	position: absolute;
	inset: -12px -8px;
	content: "";
}

/* .im — a photograph in a frame: the frame is the composition, the picture
   fills it, and the frame's own ground is the concept's photographic
   gradient while the file arrives. */

:root[data-appearance="dark"] body.prominent .pm-copy img {
	filter: brightness(.9);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-appearance="light"]) body.prominent .pm-copy img {
		filter: brightness(.9);
	}
}

/* 2 ─ The header ──────────────────────────────────────────────────────── */

/* ONE SYSTEM. On the spread the right-hand page carries the concept's
   `.top`: the section row — The Cover · Index · the sections — and the
   utilities, on one hairline, kept in view while the page scrolls, on the
   paper at 90% so the page reads through it. Menu lives on the cover, where
   AnyMag put it. Every control is a --control box with a --stroke glyph;
   on a photograph it carries a --disc, on paper nothing. */

body.prominent .site-wrapper:not(.f-width) .magheader {
	position: fixed;
	z-index: 30;
	top: 0;
	right: 0;
	background: var(--glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rule);
}

body.prominent #content-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	box-sizing: border-box;
	width: 100%;
	height: var(--header-h);
	padding: 0 var(--pad) 0 var(--gut);
}

/* A one-column route (a section, a search, a story with no photograph):
   AnyMag floats #site-header left at the cover's width and #content-header
   right at 50%; the row keeps that half and the trigger and top logo keep
   theirs. */
body.prominent .f-width #content-header {
	width: 50%;
	padding-left: 0;
}

body.prominent .pm-top {
	display: flex;
	flex: 1;
	gap: 24px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

body.prominent .pm-top::-webkit-scrollbar {
	display: none;
}

body.prominent .pm-top a {
	position: relative;
	flex: none;
	padding: 4px 0;
	color: var(--ink-2);
	border-bottom: 1px solid transparent;
	font-family: var(--font-ui);
	font-size: var(--t-nav);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s, border-color .2s;
}

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

body.prominent .pm-top a[aria-current] {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

/* The cover's header: AnyMag's box, but tall enough for the logotype at the
   owner's Logo Width and the line under it. */
body.prominent #cover-header {
	height: auto;
	min-height: var(--header-h);
	padding: var(--s-5) 5% 0;
}

body.prominent #site-header {
	height: var(--header-h);
	padding: var(--s-5) var(--pad) 0;
}

/* The utility cluster: no pill, no plate, no fill — AnyMag's white capsule
   (#top-bar-right) is the one piece of chrome the concept has no place for. */
body.prominent #top-bar-right {
	flex: none;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: inherit;
	align-items: center;
	gap: var(--s-1);
}

body.prominent .header-social-links {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--s-1);
	margin: 0;
}

body.prominent .header-icon,
body.prominent .right-search {
	margin: 0;
	padding: 0;
}

/* One box for every control. */
body.prominent .header-social-links a,
body.prominent .right-search a.search,
body.prominent .header-icon .hidden-sidebar-button,
body.prominent .appearance__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--control);
	height: var(--control);
	margin: 0;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}

body.prominent .header-social-links a {
	color: var(--ink-2);
}

body.prominent .header-social-links a:hover,
body.prominent .header-social-links a:focus-visible,
body.prominent .right-search a.search:hover,
body.prominent .right-search a.search:focus-visible,
body.prominent .appearance__toggle:hover,
body.prominent .appearance__toggle:focus-visible,
body.prominent .header-icon .hidden-sidebar-button:hover {
	color: var(--ink);
	background: var(--paper-3);
}

/* Search is a word, as every act in the concept is: the same box height,
   a pill rather than a disc, Font Awesome's magnifier not drawn. */
body.prominent .right-search a.search {
	position: relative;
	width: auto;
	min-width: var(--control);
	padding: 0 var(--s-3);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: var(--t-nav);
	font-weight: 400;
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
}

body.prominent .right-search a.search i {
	display: none;
}

body.prominent .right-search a.search .pm-word {
	display: inline-block;
	line-height: 1.3;
}

/* The hidden sidebar's "+": AnyMag's two bars, in the current ink. */
body.prominent .hidden-sidebar-button a.open-hidden-sidebar {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	color: inherit;
}

body.prominent .hidden-sidebar-button a.open-hidden-sidebar span {
	margin-top: 0;
	border-bottom-width: var(--stroke);
	background: none !important;
}

body.prominent a.open-hidden-sidebar span.bar-1,
body.prominent a.open-hidden-sidebar span.bar-2 {
	top: 50%;
}

/* The Menu trigger: AnyMag's round button, a control of the same box and
   stroke. It stands on the cover photograph, so it carries the disc. */
body.prominent .top-menu-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--control);
	height: var(--control);
	padding: 0;
	color: var(--disc-ink);
	background: var(--disc);
	border-radius: 50%;
	transition: background-color .2s;
}

body.prominent .top-menu-button a.open-hidden-menu {
	width: 18px;
	height: 12px;
	margin: 0;
	padding: 0;
	color: inherit;
}

body.prominent .top-menu-button a.open-hidden-menu span {
	margin-top: 0;
	border-bottom-width: var(--stroke);
}

body.prominent a.open-hidden-menu span.bar-2 {
	top: 6px;
}

body.prominent a.open-hidden-menu span.bar-3 {
	bottom: 0;
}

body.prominent .nav-open a.open-hidden-menu span.bar-1,
body.prominent .nav-open a.open-hidden-menu span.bar-3 {
	top: 6px;
	bottom: auto;
}

/* On the menu panel (paper) the trigger is the close mark and loses its
   disc: a control on paper carries no ground. */
body.prominent .nav-open .top-menu-button {
	color: var(--ink);
	background: transparent;
}

/* Appearance: the same box; its list is a paper card on a hairline. */
body.prominent .appearance {
	position: relative;
}

body.prominent .appearance[hidden] {
	display: none;
}

body.prominent .appearance__current {
	display: none;
}

body.prominent .appearance[data-current="light"] .appearance__current--light,
body.prominent .appearance[data-current="dark"] .appearance__current--dark,
body.prominent .appearance[data-current="auto"] .appearance__current--auto {
	display: inline-flex;
}

body.prominent .appearance__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + var(--s-2));
	right: 0;
	min-width: 160px;
	padding: var(--s-2);
	background: var(--paper);
	border: 1px solid var(--rule-2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

body.prominent .appearance__menu[hidden] {
	display: none;
}

body.prominent .appearance__option {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	width: 100%;
	min-height: var(--tap);
	padding: 0 var(--s-3);
	color: var(--ink);
	background: none;
	border: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	letter-spacing: var(--track-label);
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

body.prominent .appearance__option:hover,
body.prominent .appearance__option:focus-visible {
	background: var(--paper-3);
}

body.prominent .appearance__option[aria-checked="true"] {
	box-shadow: inset 2px 0 0 var(--accent);
}

/* The top logo of a one-column page (tags, search, archives): beside the
   trigger, at a height the band decides. The band is --header-h tall and
   the row and Search are centred in it, so the trigger and the logo are
   too: AnyMag's `top: 0` and the cover header's 24px padding had put the
   three on three different lines (20, 32 and 46px). */
body.prominent .f-width #site-header {
	padding-top: calc((var(--header-h) - var(--control)) / 2);
}

body.prominent .top-logo {
	height: 32px;
	margin: calc((var(--header-h) - 32px) / 2) 0 0 calc(var(--control) + var(--s-4));
}

/* 3 ─ The cover and the logotype ──────────────────────────────────────── */

/* THE SPREAD. AnyMag's engine is untouched — .magcover fixed at the owner's
   Cover Width, .magcontent floated beside it; the photograph runs to the
   seam, where the white page begins. */
body.prominent .magcover {
	background: var(--paper);
}

body.prominent .magcover .cover-wrap {
	width: 100%;
	background-color: transparent;
}

body.prominent .magcover .cover-image,
body.prominent .magcover .single-post-image {
	background: linear-gradient(155deg, var(--img-a), var(--img-b));
}

/* A page or article whose cover has no photograph: the sheet, not #ffffff. */
body.prominent.single-post .cover-content,
body.prominent.page .cover-content {
	background: var(--sheet);
}

body.prominent .turn-left {
	background: var(--paper);
}

/* No fold. AnyMag paints two PNG shadows along the seam; the concept's fold
   is on the owner's list. The controls keep working under Design: Original. */
body.prominent .fold-shadow,
body.prominent .fold-shadow-left,
body.prominent .fold-shadow-right {
	display: none;
}

/* THE LOGOTYPE. AnyMag's Logo Width (custom-css.php) is the only thing that
   sizes it; here it gets no background, no frame, no plate and no filter. */
body.prominent .cover-logo img,
body.prominent .top-logo img,
body.prominent .menu-logo img,
body.prominent .footer-logo img {
	filter: none;
	background: none;
}

/* The cover column holds the lookbook (front-row.css): AnyMag's photograph
   first, the two layers and the caption over it, the header above all. */
body.prominent .magcover .cover-content {
	position: relative;
	height: 100%;
}

/* AnyMag's own foot furniture (cover widgets, the first-post arrow) stands
   above the lookbook's layers and keeps working. */
body.prominent .magcover .cover-sidebar-left,
body.prominent .magcover .cover-sidebar-right {
	z-index: 7;
}

/* The logotype pair on paper (inc/prominent/logos.php): one file per
   appearance, never a filtered one. */
body.prominent .anymag-logo--dark {
	display: none;
}

:root[data-appearance="dark"] body.prominent .anymag-logo--light {
	display: none;
}

:root[data-appearance="dark"] body.prominent .anymag-logo--dark {
	display: inline-block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-appearance="light"]) body.prominent .anymag-logo--light {
		display: none;
	}

	:root:not([data-appearance="light"]) body.prominent .anymag-logo--dark {
		display: inline-block;
	}
}

body.prominent .anymag-logo--type {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* The story's cover carries the photograph and the caption: the share acts
   and previous / next are on the page (inc/prominent/story.php),
   so AnyMag's rail of six service tiles and its arrows are not printed under
   PROMINENT (inc/covers/cover-single.php) — and not shown if they are. */
body.prominent .magcover .social-share-cover,
body.prominent .magcover .post-navigation {
	display: none;
}

/* 4 ─ The menu panel ──────────────────────────────────────────────────── */

/* KEEP BEHAVIOUR, REDESIGN PRESENTATION. AnyMag's panel, its slide, its
   sub-menu toggles and its scroll rail are untouched; the type, the ground
   and the utilities are the magazine's. */
body.prominent .nav-panel {
	color: var(--ink);
}

/* The curtain's logotype (the concept's `.panel-top .logo`): 180px wide at
   the page's margin, centred in a 76px band; the close stands at the
   right (front-row.css, section 11). */
body.prominent .menu-logo {
	width: 180px;
	height: auto;
	margin: 0;
}

body.prominent .menu-logo a,
body.prominent .menu-logo img {
	display: block;
	width: 100%;
	height: auto;
}

body.prominent #nav-wrapper {
	height: auto;
	max-height: calc(100vh - var(--header-h) - var(--s-7));
	margin: var(--header-h) auto 0;
	padding-top: var(--s-5);
}

body.prominent #nav-wrapper .nav-menu li a {
	padding: 0;
	color: var(--ink);
	background: none;
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	font-family: var(--font-display);
	font-size: var(--t-menu);
	line-height: 1.16;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: background-size .3s var(--ease), color .2s;
}

body.prominent #nav-wrapper .nav-menu li a:hover,
body.prominent #nav-wrapper .nav-menu li a:focus-visible {
	color: var(--ink);
	background-size: 100% 1px;
}

body.prominent #nav-wrapper .nav-menu li.current-menu-item > a,
body.prominent #nav-wrapper .nav-menu li.current-menu-ancestor > a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .14em;
}

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

body.prominent #nav-wrapper .sub-menu a {
	font-family: var(--font-display);
	font-style: italic;
}

body.prominent .sub-menu-toggle::after {
	color: var(--ink-3);
}

body.prominent #nav-wrapper .simplebar-track.simplebar-vertical {
	width: 1px;
	background: transparent;
}

body.prominent #nav-wrapper .simplebar-scrollbar::before {
	left: -1px;
	width: 3px;
	background: var(--rule-2);
}

/* The panel's utilities — Appearance and Search — in the rubric voice, one
   row, under a hairline. */
body.prominent .menu-search {
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
}

body.prominent .menu-search a,
body.prominent #top-search a.search {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	width: auto;
	min-height: var(--tap);
	color: var(--ink);
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .menu-search i {
	margin-right: 0;
	font-size: 13px;
}

body.prominent .appearance-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 var(--s-3);
}

body.prominent .appearance-inline[hidden] {
	display: none;
}

body.prominent .appearance-inline__option {
	display: inline-flex;
	gap: var(--s-2);
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--s-4);
	color: var(--ink);
	background: none;
	border: 1px solid var(--rule-2);
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
}

body.prominent .appearance-inline__option[aria-pressed="true"] {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}

/* 5 ─ The search and the hidden sidebar ───────────────────────────────── */

body.prominent .searchform-overlay {
	background-color: var(--paper);
}

body.prominent .searchform-overlay .search-field {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 48px);
}

body.prominent .searchform-overlay .searchform form {
	box-shadow: none;
}

body.prominent .searchform-overlay .search-button,
body.prominent .searchform-overlay p {
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .searchform-overlay .search-field:focus-visible {
	outline: 0;
	border-bottom-color: var(--accent);
}

/* AnyMag's close mark is a black SVG, which disappears on Night: drawn in
   the current ink instead. */
body.prominent .close-icon {
	position: relative;
	color: var(--ink);
	background: none;
}

body.prominent .close-icon::before,
body.prominent .close-icon::after {
	position: absolute;
	top: 50%;
	left: 15%;
	width: 70%;
	height: var(--stroke);
	background: currentColor;
	content: "";
	transform: rotate(45deg);
}

body.prominent .close-icon::after {
	transform: rotate(-45deg);
}

body.prominent #hidden-sidebar .widgets-side {
	color: var(--ink-2);
	background: var(--paper);
	border-left: 1px solid var(--rule);
}

body.prominent .sidebar .widget-title {
	padding: 0 0 var(--s-3);
	color: var(--ink);
	border-left: 0;
	border-bottom: 1px solid var(--rule-2);
	font-family: var(--font-ui);
	font-size: var(--t-lbl);
	font-weight: 400;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .sidebar .widget,
body.prominent .sidebar .widget p,
body.prominent .sidebar .widget li {
	color: var(--ink-2);
}

body.prominent .sidebar .widget a {
	color: var(--ink);
}

body.prominent .sidebar .widget a:hover {
	color: var(--accent);
}

/* AnyMag sets the Categories widget in capitals (style.css, `.cat-item a`)
   and fades it on hover; in the panel it is a list like Archives beside it,
   in the same case and the same hover. */
body.prominent .sidebar ul li.cat-item a {
	text-transform: none;
}

body.prominent .sidebar ul li.cat-item a:hover {
	opacity: 1;
}

/* 6 ─ The page ──────────────────────────────────────────────────────── */

/* THE PAGE. AnyMag's #main-area is the right-hand page: its inner field
   (at the seam) is --gut, its outer field --pad, and it starts under the
   fixed section row. One-column routes centre the same page. */
body.prominent #main-area,
body.prominent.home #main-area,
body.prominent.home.page .f-width #main-area {
	--pm-lead: var(--gut);
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 0;
	padding: calc(var(--header-h) + var(--pm-top, 0px)) var(--pad) 0 var(--pm-lead);
}

/* A route whose page does not open on a section (the story, the index, a
   section, a search) starts one section's breathing space under the row,
   as every prototype view does (its first `.sec` has `--sec-y` above it). */
body.prominent.single-post,
body.prominent.blog,
body.prominent.archive,
body.prominent.search {
	--pm-top: var(--sec-y);
}

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.page-template-page-fullwidth .f-width #main-area {
	--pm-lead: var(--pad);
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--header-h) + var(--pm-top, 0px)) var(--pad) 0;
}

body.prominent.single-post .f-width #main-area {
	max-width: 900px;
}

/* The page's own text on the front page: its title is the rubric over the
   two paragraphs, which set as a standfirst; the issue begins under them. */
body.prominent.home .post-entry .entry-title {
	width: auto;
	margin: 0 0 var(--s-4);
	padding: 0;
	color: var(--ink-2);
	border: 0;
	font-family: var(--font-ui);
	font-size: var(--t-lbl) !important;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

/* .about — the page's own text, after the issue: the note about the
   magazine, in italic Bodoni under a hairline. */
body.prominent .pm-about {
	max-width: 56ch;
	margin: var(--sec-y) 0 0;
	padding-top: var(--sec-y);
	color: var(--ink-2);
	border-top: 1px solid var(--rule);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.46;
}

body.prominent .pm-about p {
	margin: 0 0 .8em;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

body.prominent .pm-about > :last-child {
	margin-bottom: 0;
}

/* 7 ─ The index — pagination ─────────────────────────────────────────── */

body.prominent .category-box h1,
body.prominent .archive-box {
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--ink);
	border: 0;
	font-family: var(--font-display);
	font-size: var(--t-idx);
	font-weight: 400;
	line-height: .92;
	letter-spacing: 0;
	font-optical-sizing: auto;
	text-transform: none;
}

body.prominent .category-box {
	margin-bottom: 0;
	overflow: visible;
}

body.prominent .archive-box {
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--rule-2);
}

body.prominent .category-box.side-pattern h1::after,
body.prominent .section-title::before {
	display: none;
}

body.prominent .category-box h1 span,
body.prominent .archive-box span {
	color: var(--ink-3);
	font-style: italic;
	font-weight: 400;
	font-size: inherit;
	text-transform: none;
}

body.prominent .category-text,
body.prominent .category-text p {
	margin: 12px 0 0;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1rem;
	line-height: 1.46;
}

/* The list itself: AnyMag's grid classes stay on the container (so the
   Customizer's layout choices keep meaning under Design: Original), and
   under PROMINENT the container is a list. */
body.prominent .blog-posts {
	display: block;
	grid-template-columns: none;
	margin-bottom: var(--s-7);
	overflow: visible;
}

body.prominent .pm-idx-more {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 38px 0 4px;
}

/* Pagination: the owner's choice (numbers, Load More, infinite) stays
   AnyMag's; the index ends on the prototype's act — "Show earlier stories",
   centred under the list — with the page numbers in italic beside it. */
body.prominent .page-nav {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 38px 0 4px;
	font-family: var(--font-ui);
}

body.prominent .page-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 18px;
}

body.prominent .page-nav .nav-links > a,
body.prominent .page-nav .nav-links > span {
	position: relative;
	min-width: 0;
	padding: 0 0 4px;
	color: var(--ink-3);
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: .98rem;
	line-height: 1.2;
	text-decoration: none;
}

body.prominent .page-nav .nav-links > a::after {
	position: absolute;
	inset: -12px -6px;
	content: "";
}

body.prominent .page-nav .nav-links > .current {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

body.prominent .page-nav .nav-links > a:hover {
	color: var(--accent);
}

/* The two directions are acts (the prototype's `.act`). */
body.prominent .page-nav .nav-links > a.pm-pg-act,
body.prominent .page-nav .pm-act {
	color: var(--ink);
	border-bottom-color: var(--rule-2);
	font-family: var(--font-ui);
	font-style: normal;
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .pm-pg-word {
	font: inherit;
	letter-spacing: inherit;
}

body.prominent .page-nav .nav-links > a.pm-pg-act:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Nothing found: the sentence and a field; the head above has already said
   where the reader is, and its sections are the other ways out. */
body.prominent .pm-none {
	max-width: 52ch;
	margin: var(--sec-y) 0;
	padding: 0;
	text-align: left;
}

body.prominent .pm-none__line {
	margin: 0;
	text-align: left;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.46;
}

body.prominent .pm-search {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	margin-top: 24px;
}

body.prominent .pm-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--tap);
	padding: 0 0 6px;
	font-size: 1rem;
}

body.prominent .pm-search .pm-act {
	min-height: 0;
	padding: 0 0 6px;
	color: var(--ink);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule-2);
}

body.prominent .nothing-found h2 {
	text-transform: none;
	font-family: var(--font-display);
}

/* 8 ─ The story ───────────────────────────────────────────────────────── */

body.prominent .post-entry {
	float: none;
	width: 100%;
}

/* An ordinary page (About, a policy): its title as a story's headline, its
   copy as a story's copy (content-page.php gives it .pm-copy). */
body.prominent.page:not(.home) .post-entry .entry-title {
	box-sizing: border-box;
	width: auto;
	max-width: 20ch;
	margin: 0 0 var(--s-6);
	padding: 0;
	border: 0;
	font-family: var(--font-display);
	font-size: var(--t-h1) !important;
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -.014em;
	font-optical-sizing: auto;
}

/* .copy — the reading column: Jost at the concept's measure and leading;
   Bodoni for every heading, quotation, caption and emphasis. */
body.prominent .pm-copy {
	max-width: 62ch;
	color: var(--ink);
	font-size: var(--t-copy);
	line-height: var(--t-copy-lead);
}

body.prominent .pm-copy > * {
	margin-top: 0;
	margin-bottom: 0;
}

body.prominent .pm-copy > * + * {
	margin-top: 1.32em;
}

body.prominent .pm-copy > :first-child {
	margin-top: 0;
}

/* AnyMag's advertisement slot (Home / Single / Archive switches): the
   owner's image, in the rhythm, without the rounded corners. */
body.prominent .adv-image {
	margin: 0 0 var(--sec-y);
	border-radius: 0;
}

/* Under an index head the slot stands at the tabs' own distance. */
body.prominent .posts-area > .adv-image:first-child {
	margin: clamp(24px, 3.2vw, 42px) 0 0;
}

body.prominent .pm-copy p,
body.prominent .pm-copy li {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: 300;
}

body.prominent .pm-copy h2 {
	margin-top: 2em;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.75rem;
	line-height: 1.16;
	font-optical-sizing: auto;
}

body.prominent .pm-copy h2::before {
	display: block;
	width: 44px;
	height: 1px;
	margin-bottom: .75em;
	background: var(--rule-2);
	content: "";
}

body.prominent .pm-copy h3,
body.prominent .pm-copy h4 {
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.2;
}

body.prominent .pm-copy em {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.1em;
	line-height: 1;
}

body.prominent .pm-copy strong {
	font-weight: 500;
}

/* The interview question (the paragraph style "Question"): Bodoni, a size
   up, a claret italic Q before it — the prototype's `.copy .qa`. */
body.prominent .pm-copy .is-style-pm-question {
	font-family: var(--font-display);
	font-size: 1.15em;
	font-weight: 400;
	line-height: 1.32;
}

body.prominent .pm-copy .is-style-pm-question::before {
	display: inline-block;
	margin-right: .6em;
	color: var(--accent);
	font-family: var(--font-display);
	font-style: italic;
	content: "Q";
}

body.prominent .pm-copy a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--accent);
	text-underline-offset: .2em;
}

body.prominent .pm-copy a:hover {
	color: var(--accent);
}

body.prominent .pm-copy ul,
body.prominent .pm-copy ol {
	padding-left: 1.2em;
}

/* .pull — a quotation breaks out of the column, tied top and bottom with
   hairlines; on the spread it runs into the seam. Never an embed: what an
   Instagram, X or TikTok oEmbed leaves behind is a <blockquote> too, and on
   this magazine's archive every blockquote in a body is one of those. */
body.prominent .pm-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed),
body.prominent .pm-copy .wp-block-pullquote,
body.prominent .pm-copy .wp-block-quote {
	max-width: none;
	margin: 2.4em 0;
	padding: 1.2em 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-top: 1px solid var(--rule-2);
	border-bottom: 1px solid var(--rule-2);
	text-align: left;
}

body.prominent .pm-copy .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

body.prominent .pm-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed) p,
body.prominent .pm-copy .wp-block-pullquote p {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--t-quote);
	line-height: 1.14;
	font-optical-sizing: auto;
	text-wrap: balance;
}

body.prominent .pm-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed) cite,
body.prominent .pm-copy .wp-block-pullquote cite {
	display: block;
	margin-top: 16px;
	color: var(--ink-3);
	font-family: var(--font-ui);
	font-style: normal;
	font-size: var(--t-lbl-s);
	font-weight: 300;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	opacity: 1;
}

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

/* Photographs in the copy: a figure keeps the column; a wide one runs to
   both edges of the page. */
body.prominent .pm-copy figure,
body.prominent .pm-copy .wp-block-image {
	margin: 2.2em 0;
}

body.prominent .pm-copy .alignwide,
body.prominent .pm-copy .alignfull {
	width: auto;
	max-width: none;
	margin-right: calc(-1 * var(--pad));
	margin-left: calc(-1 * var(--gut));
}

/* A photograph keeps its own width (a gallery block, an inline image);
   AnyMag's `height: 100%` on every image is the one thing undone here. */
body.prominent .pm-copy img {
	max-width: 100%;
	height: auto;
}

body.prominent .pm-copy .wp-block-image img,
body.prominent .pm-copy figure.alignwide img,
body.prominent .pm-copy figure.alignfull img {
	display: block;
	width: 100%;
}

body.prominent .pm-copy figcaption,
body.prominent .pm-copy .wp-caption-text,
body.prominent .pm-copy .wp-element-caption {
	margin: 0;
	padding: 11px 0 0;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: .86rem;
	line-height: 1.42;
	text-align: left;
}

body.prominent .pm-copy .alignwide figcaption,
body.prominent .pm-copy .alignfull figcaption {
	padding-right: var(--pad);
	padding-left: var(--gut);
}

body.prominent .post-content img.is-zoomable {
	cursor: zoom-in;
}

/* .tags */
body.prominent .pm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.prominent .pm-tags a {
	position: relative;
	margin: 0;
	padding: 0 0 5px;
	color: var(--ink-2) !important;
	background: none !important;
	border-bottom: 1px solid var(--rule-2);
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: .6rem !important;
	font-weight: 300;
	letter-spacing: var(--track-icon);
	text-transform: uppercase;
	text-decoration: none;
}

body.prominent .pm-tags a:hover,
body.prominent .pm-tags a:focus-visible {
	color: var(--accent) !important;
	border-color: var(--accent);
	opacity: 1;
}

/* .author — written by. */
body.prominent .pm-author {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 24px;
	margin: clamp(26px, 3.4vw, 48px) 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--ink);
	overflow: visible;
	text-align: left;
}

body.prominent .pm-author p {
	max-width: 52ch;
	margin: 12px 0 0;
	color: var(--ink-2);
	font-style: normal;
	font-size: .94rem;
	line-height: 1.74;
}

/* Comments: WordPress's own, in the concept's voice. */
body.prominent .post-comments {
	float: none;
	width: auto;
	margin: clamp(26px, 3.4vw, 48px) 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

body.prominent .comments-title h3,
body.prominent .comments-title h3 span {
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: .95rem;
	font-weight: 400;
}

body.prominent .thecomment {
	padding: 20px 0;
	color: var(--ink-2);
	border-bottom: 1px solid var(--rule);
}

body.prominent .thecomment .author-img img {
	width: 44px;
	height: 55px;
	border-radius: 0;
	object-fit: cover;
}

body.prominent .thecomment p {
	color: var(--ink);
	font-size: .96rem;
	line-height: 1.7;
}

body.prominent .thecomment .comment-text h6.author,
body.prominent .thecomment .comment-text h6.author a {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0;
}

body.prominent .comment-text .date,
body.prominent .post-comments span.reply a {
	color: var(--ink-3);
	font-family: var(--font-ui);
	font-size: var(--t-lbl-s);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .post-comments .reply i {
	color: var(--accent);
}

body.prominent .commentform .heading,
body.prominent #respond h3,
body.prominent .comment-reply-title {
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.3rem;
	font-weight: 400;
}

body.prominent #respond h3 small a {
	color: var(--paper);
	background: var(--ink);
}

body.prominent .h-info {
	color: var(--ink-3);
	font-family: var(--font-ui);
	font-size: .8rem;
}

body.prominent input,
body.prominent select,
body.prominent textarea {
	color: var(--ink);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--rule-2);
	border-radius: 0;
	font-family: var(--font-ui);
	font-weight: 300;
}

body.prominent input:focus,
body.prominent textarea:focus,
body.prominent select:focus {
	border-color: var(--ink);
}

body.prominent input[type="submit"],
body.prominent button[type="submit"],
body.prominent .button {
	min-height: var(--tap);
	padding: 1.05em 1.8em;
	color: var(--paper);
	background: var(--ink);
	border: 0;
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: var(--t-act);
	font-weight: 400;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
}

body.prominent input[type="submit"]:hover,
body.prominent button[type="submit"]:hover,
body.prominent .button:hover {
	color: var(--on-accent);
	background: var(--accent);
}

/* The lightbox (assets/js/prominent.js). */
.lightbox {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	padding: 24px;
	color: #f2ece3;
	background: rgba(6, 5, 5, .92);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
}

.lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 150px);
	object-fit: contain;
}

.lightbox__caption {
	max-width: 60ch;
	margin-top: 12px;
	color: #d9d2c8;
	font-family: var(--font-display, serif);
	font-style: italic;
	font-size: .9rem;
	text-align: center;
}

.lightbox__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 12px;
}

.lightbox__count {
	min-width: 5em;
	font-family: var(--font-ui, sans-serif);
	font-size: .62rem;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-align: center;
}

.lightbox__btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	color: #f2ece3;
	background: transparent;
	border: 1px solid rgba(242, 236, 227, .45);
	font-family: var(--font-ui, sans-serif);
	font-size: .62rem;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
	color: #0c0b0b;
	background: #f2ece3;
	outline: 2px solid #c8a45c;
	outline-offset: 2px;
}

/* .cmts — the way into the comments: the rubric, the house's sentence, the
   act. WordPress's own list and form follow it. */
body.prominent .pm-cmts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: clamp(26px, 3.4vw, 48px) 0 0;
	padding: 18px 0;
	border-top: 1px solid var(--rule);
}

body.prominent .pm-cmts p {
	margin: 0;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: .95rem;
	line-height: 1.4;
}

body.prominent .pm-cmts ~ .post-comments {
	margin-top: var(--s-5);
	border-top: 0;
}

/* 9 ─ The footer ──────────────────────────────────────────────────────── */

body.prominent #footer.pm-foot {
	box-sizing: border-box;
	width: 100%;
	padding: clamp(30px, 4vw, 64px) var(--pad) 0 var(--gut);
	border-top: 1px solid var(--rule);
	text-align: left;
	overflow: visible;
}

body.prominent .f-width #footer.pm-foot {
	max-width: 1240px;
	margin: clamp(96px, 10vw, 160px) auto 0;
	padding-left: var(--pad);
}

body.prominent.single-post .f-width #footer.pm-foot {
	max-width: 900px;
}

body.prominent .pm-foot__cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 30px;
	font-size: .9rem;
}

body.prominent .pm-foot__cols p {
	max-width: 34ch;
	margin: 14px 0 0;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: .9rem;
	line-height: 1.46;
}

body.prominent .pm-foot__cols .pm-lbl {
	margin-bottom: 10px;
	color: var(--ink);
}

body.prominent .pm-foot__cols a {
	display: block;
	padding: 7px 0;
	color: var(--ink-2) !important;
	font-family: var(--font-text);
	font-size: .82rem;
	font-weight: 300;
	letter-spacing: .02em;
	text-transform: none;
	text-decoration: none;
}

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

body.prominent .pm-foot__cols .footer-menu {
	margin: 0;
	padding: 0;
}

body.prominent .pm-foot__cols .footer-menu li {
	display: block;
	margin: 0;
	list-style: none;
	font-size: inherit;
}

body.prominent .pm-foot__logo {
	width: clamp(140px, 16vw, 220px);
	margin: 38px 0 0;
	text-align: left;
}

body.prominent .pm-foot__logo a {
	display: block;
	font-size: 0;
}

body.prominent .pm-foot__logo img {
	width: 100%;
	height: auto;
}

body.prominent .pm-foot__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 24px;
	padding: 18px 0 20px;
	color: var(--ink-3);
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--t-lbl-s);
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

body.prominent .pm-foot__bottom #footer-copyright {
	padding: 0;
	color: inherit;
	font-size: inherit;
}

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

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

body.prominent .pm-foot__bottom .footer-social-links,
body.prominent .pm-foot__bottom ul {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 10 ─ Phone, and states ──────────────────────────────────────────────── */

/* Below 960px the split has collapsed and AnyMag stands the header on the
   cover photograph beside the cover logo. The section row is not in the
   band — the menu panel is the one navigation there; Search and "+" carry
   the disc, Appearance lives in the panel as three labelled buttons. */
@media only screen and (max-width: 960px) {
	body.prominent .site-wrapper:not(.f-width) .magheader {
		position: absolute;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 0;
	}

	body.prominent .pm-top {
		display: none;
	}

	/* One axis with the cluster, which #content-header centres in the
	   band: 12px of padding had set the trigger 5px below Search. */
	body.prominent #cover-header,
	body.prominent #site-header,
	body.prominent .f-width #site-header {
		padding: calc((var(--header-h) - var(--control)) / 2) var(--s-4) 0;
	}

	/* Below the spread the band is transparent and, on a one-column page
	   with a cover (a static front page), 100% wide at z-index 5 over the
	   cover's own header: it took the tap meant for Menu. It passes every
	   tap through except over the controls it carries. */
	body.prominent .magheader,
	body.prominent .magheader #site-header,
	body.prominent .magheader #content-header {
		pointer-events: none;
	}

	body.prominent .magheader #site-header > *,
	body.prominent .magheader #content-header > * {
		pointer-events: auto;
	}

	/* AnyMag sets `.f-width .top-menu-button { left: 0 }` below 640px for
	   the one-column header's trigger; on a static front page it also
	   caught the cover header's, which then stood against the glass. Its
	   static place is the header's own 16px inset, as on every other
	   route. */
	body.prominent .f-width #cover-header .top-menu-button {
		left: auto;
	}

	body.prominent .magheader,
	body.prominent .f-width .magheader {
		padding: 0 var(--s-4);
	}

	body.prominent #content-header,
	body.prominent .f-width #content-header {
		justify-content: flex-end;
		padding: 0;
	}

	body.prominent #top-bar-right {
		gap: var(--s-2);
	}

	body.prominent .header-social-links {
		display: none;
	}

	body.prominent .site-wrapper:not(.f-width) .right-search a.search,
	body.prominent .site-wrapper:not(.f-width) .header-icon .hidden-sidebar-button {
		color: var(--disc-ink);
		background: var(--disc);
	}

	body.prominent .top-logo {
		height: 28px;
		margin: calc((var(--header-h) - 28px) / 2) 0 0 calc(var(--control) + var(--s-2));
	}

	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 {
		padding: var(--s-7) var(--pad) 0;
	}

	/* The page's field on a phone is the prototype's --pad, nothing more:
	   AnyMag narrows its container to 94% below 960px, which set the copy
	   11px further in and left every edge-to-edge section rule (and the
	   leaf) 11px short of the screen on both sides. */
	body.prominent .magcontent .container {
		width: 100%;
	}

	/* The quotation's hairlines run to the screen's edge on the seam side,
	   as on the spread. */
	body.prominent .pm-copy blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed),
	body.prominent .pm-copy .wp-block-pullquote {
		margin-left: calc(-1 * var(--pad));
		padding-left: var(--pad);
	}

	body.prominent .pm-copy .alignwide,
	body.prominent .pm-copy .alignfull {
		margin-right: calc(-1 * var(--pad));
		margin-left: calc(-1 * var(--pad));
	}

	body.prominent .pm-copy .alignwide figcaption,
	body.prominent .pm-copy .alignfull figcaption {
		padding-right: var(--pad);
		padding-left: var(--pad);
	}
}

@media only screen and (max-width: 780px) {
	body.prominent .pm-author {
		grid-template-columns: 1fr;
	}

	body.prominent .pm-foot__cols {
		grid-template-columns: 1fr 1fr;
	}

	body.prominent .pm-copy {
		font-size: 1rem;
	}

	body.prominent .pm-cmts {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.prominent *,
	body.prominent *::before,
	body.prominent *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}