/* 2026-10-13: role surfaces supersede the historic mint mappings discussed below.
 * White helpers, paper gifts, dark closing actions; mint only for signed Diana quotes.
 */
/*
 * single.css - one article at /suzinok/<slug>/.
 *
 * Mobile-first like every other page here. Unlike the other page stylesheets
 * this one has NO min-width block at all, and that is measured rather than
 * missing - the reason is written out at the bottom of the file. Measured
 * against the mockup at 390 px and 1440 px.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * TWO WIDTHS, AND THEY ARE DIFFERENT JOBS
 *
 * .container is the band: 1100 px, the same one the header, the footer and
 * every other page use, so the edges line up (I11). .art-column is the reading
 * measure: 760 px, centred inside it. Measured off the mockup at 1440 px, where
 * the prose sits at x=340 and runs 760 px wide inside a band whose content is
 * 1036 px.
 *
 * The 22 px the theme's cards come out narrower than the mockup's is NOT
 * repeated here and must not be "fixed" here either: that difference is the
 * container's own 32 px gutter and it is a theme-wide convention, written up in
 * docs/design-zurnalas.md under WPS-025. The reading column is unaffected by it,
 * because 760 is smaller than the content width at every viewport where it
 * applies.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * THE BLOCK STYLES ARE THE POINT OF THIS FILE
 *
 * Everything between the header and the call to action comes from the editor,
 * not from a template, so the mockup cannot be transferred as markup - only as
 * an answer to "what should the blocks a writer reaches for look like". The
 * mapping is written at each rule. Two of the five blocks the acceptance names
 * are transferred from something the mockup actually draws; three are derived,
 * and each of those says so, because a derived value that pretends to be a
 * measured one is how a design drifts.
 */

/* ---------------------------------------------------------------------------
 * Bands
 *
 * The vertical rhythm is the mockup's, clamp for clamp. They are written out
 * per band rather than as one shared value because they are not one value: the
 * gap under the cover photo is smaller than the gap under the prose, which is
 * smaller than the gap under the call to action.
 */

.art-back {
	padding-block: clamp( 18px, 3vw, 28px ) 0;
}

.art-head {
	padding-block: clamp( 16px, 2.5vw, 24px ) clamp( 20px, 3vw, 28px );
}

/*
 * margin-BLOCK, not margin. A <figure> carries a browser default margin on all
 * four sides, so it has to be cleared - but .container centres itself with
 * margin-inline: auto, and the shorthand silently takes that with it. Measured:
 * the cover band then sat flush against the left edge while every other band on
 * the page stayed centred, which qa-measure reports as I11.1 because two
 * containers declaring the same max-width ended up with different edges.
 */
.art-cover {
	margin-block: 0;
	padding-block: 0 clamp( 28px, 4vw, 44px );
}

.art-content {
	padding-block: 0 clamp( 36px, 5vw, 56px );
}

.art-cta {
	padding-block: 0 clamp( 36px, 5vw, 60px );
}

.art-related {
	padding-block: 0 clamp( 48px, 7vw, 80px );
}

.art-column {
	max-width: 760px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Back to the index
 *
 * The padding with the matching negative margin is the mockup's own: it grows
 * the target to 46 px tall for a thumb while the text stays on the line it was
 * drawn on. Measured, not assumed - the hit test is taken at the centre of the
 * target rather than from the box, because a box of the right size that
 * something else covers is still a miss.
 */

.art-back__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block: -12px;
	padding-block: 12px;
	color: var( --text-link );
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

/*
 * THE UNDERLINE GOES ON THE WORDS, NOT ON THE LINK, and that is measured
 * rather than fussy. text-decoration set on an inline-flex box is drawn for
 * each flex item separately, at that item's own baseline - so hovering this
 * link drew one short line under the 18 px arrow, a bare 6 px gap, and a
 * second line under the 14 px label, each at a different height. It reads as
 * a broken underline, which is what it is. Underlining only the label span
 * gives one continuous line under the words the link is made of.
 */
.art-back__link:hover span:not( .material-symbols-outlined ) {
	text-decoration: underline;
}

.art-back__link .material-symbols-outlined {
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
 * Article header
 */

.art-head__inner {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
}

.art-head__topic {
	margin: 0;
}

/*
 * The topic pill. The same mint pair the index badge uses, and the same one the
 * mockup paints here: mint fill, mint ink, which measures 4.54:1.
 */
.art-topic {
	display: inline-flex;
	align-items: center;
	border-radius: var( --radius-pill );
	padding: var( --space-2 ) var( --space-4 );
	background: var( --tint-ice );
	color: var( --color-accent-text );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );

	/*
	 * Stated rather than inherited. The mockup leaves the pill on the browser's
	 * default line height, which for this face at 12px is about 15px and makes
	 * the pill 31px tall. Inheriting the body's 1.6 instead gave 19.2px of line
	 * box and a 35px pill - measured, and enough to change the spacing of the
	 * three rows in the header above it.
	 */
	line-height: 1.25;
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

/*
 * Smaller than the site's h1, deliberately and by measurement: the mockup sets
 * an article title at clamp(28px, 4.2vw, 42px) where the page headings in
 * base.css run to 56px. A title that has to work at four lines of real editorial
 * prose is not the same object as a hero headline of three chosen words.
 */
.art-head__title {
	margin: 0;
	font-size: clamp( 28px, 4.2vw, 42px );
	line-height: 1.1;
	letter-spacing: var( --ls-display );
}

.art-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-caption );
}

.art-head__author {
	color: var( --text-body );
	font-weight: var( --fw-bold );
}

.art-head__reading {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.art-head__reading-icon {
	font-size: 17px;
}

/* ---------------------------------------------------------------------------
 * Cover photo
 *
 * 16/9 and clipped, so an editor uploading a portrait does not push the whole
 * article below the fold. The mockup draws its placeholder at exactly this
 * ratio and radius.
 */

.art-cover__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var( --radius-xl );
	object-fit: cover;
}

/*
 * DERIVED, NOT TRANSFERRED. The mockup's captions are placeholder markers - it
 * sets them in a monospace face at 12 px, which is its convention for "a real
 * photograph goes here", not a caption style. So the caption takes the theme's
 * own meta scale, which is what every other small grey line on this site uses.
 */
.art-cover__caption {
	margin: var( --space-2 ) 0 0;
	color: var( --text-meta );
	font-size: var( --fs-meta );
	line-height: var( --lh-relaxed );
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * The article body - Gutenberg core blocks
 *
 * One scope, .art-body, so nothing here can reach a block in a widget or in the
 * editor's own chrome.
 *
 * THE FLOW. The mockup lays its body out as a flex column with a single gap of
 * clamp(18px, 2.5vw, 24px), plus 8px extra above every h2. the_content() is a
 * flow of siblings rather than a flex container - it has to be, because an
 * editor can nest blocks - so the same rhythm is expressed as bottom margins on
 * the children. The value is one custom property, because it is one decision.
 */

.art-body {
	--art-flow: clamp( 18px, 2.5vw, 24px );

	font-size: 17px;
	line-height: 1.7;
}

.art-body > * {
	margin-block: 0 var( --art-flow );
}

.art-body > :last-child {
	margin-bottom: 0;
}

/* PARAGRAPH - transferred. 17px/1.7 in the body colour, straight off the mockup. */
.art-body p {
	color: var( --text-body );
}

/*
 * H2 - transferred. clamp(22px, 2.8vw, 28px) at weight 800, well below the
 * site's section headings: inside a 760 px measure the 38 px of base.css would
 * be a banner rather than a heading.
 *
 * The extra 8px above is the mockup's, and it is what makes a heading belong to
 * what follows it rather than float between two paragraphs. It is removed on a
 * first child so an article that opens on a heading does not start with a hole.
 */
.art-body > h2 {
	margin-top: calc( var( --art-flow ) + var( --space-2 ) );
	font-size: clamp( 22px, 2.8vw, 28px );
	line-height: 1.18;
	letter-spacing: -0.01em;
}

/*
 * H3 - DERIVED. The mockup's article body has no h3 anywhere, so there is
 * nothing to transfer. It takes the design system's own --fs-h3 as its ceiling
 * rather than a number invented here, and a clamp keeps it a real step below the
 * h2 on a phone: at 390 px the h2 is 22px and a flat 21px h3 would be
 * indistinguishable from it.
 */
.art-body > h3 {
	margin-top: var( --art-flow );
	font-size: clamp( 18px, 2.2vw, var( --fs-h3 ) );
	font-weight: var( --fw-black );
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.art-body > h2:first-child,
.art-body > h3:first-child {
	margin-top: 0;
}

/*
 * QUOTE - transferred, with the mapping stated because it is a judgement.
 *
 * The mockup has no blockquote. What it does have is one highlighted-prose
 * device: a mint panel carrying the sentence the reader should leave with. That
 * is the block an editor reaches for a pull-quote with, so core/quote is drawn
 * as that panel rather than as an indented italic, which is a convention this
 * design uses nowhere.
 *
 * The italic in base.css is turned off deliberately: on the mint panel the
 * mockup sets upright text at weight 500, and italic Alegreya Sans at 19px on a
 * coloured fill is noticeably harder to read than the roman.
 */
.art-body .wp-block-quote {
	border-radius: var( --radius-lg );
	padding: clamp( 20px, 3vw, 28px );
	background: var( --surface-card );
	color: var( --text-heading );
	font-size: clamp( 16px, 2vw, 19px );
	font-style: normal;
	font-weight: var( --fw-medium );
	line-height: 1.5;
	text-align: center;

	border: 1px solid var( --border-hairline );
}

.art-body .wp-block-quote p {
	margin: 0 0 var( --space-3 );
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.art-body .wp-block-quote > :last-child {
	margin-bottom: 0;
}

.art-body .wp-block-quote cite {
	display: block;
	color: var( --text-meta );
	font-size: var( --fs-caption );
	font-style: normal;
	font-weight: var( --fw-bold );
}

/*
 * LISTS
 *
 * Both drop the browser marker, because both are drawn.
 */

.art-body .wp-block-list {
	padding-left: 0;
	list-style: none;
}

/*
 * THE ITEM IS A BLOCK WITH AN ABSOLUTE MARKER, NOT A FLEX ROW - and it was a
 * flex row until the first real article (WPS-056). Flex turns every inline
 * child of the item into a flex item of its own, so an item that opens with a
 * bold lead-in (a <strong> followed by the sentence) came out as two COLUMNS:
 * the bold words wrapped down a narrow left column, three lines deep, with the
 * sentence standing beside them - seven times in a row. Measured on the gum
 * pain article at 1440 px. The fixtures never showed it because none of their
 * items began with an inline element.
 *
 * Block flow with padding-left for the marker keeps every inline child in one
 * flowing line, which is what a list item is. The marker's geometry is
 * unchanged: the ordered circle is still 44 px and 14 px from the text, the
 * bullet still sits on the first line's optical centre.
 */
.art-body .wp-block-list li {
	position: relative;
	color: var( --text-body );
}

.art-body .wp-block-list li + li {
	margin-top: var( --space-3 );
}

/* A nested list is a list, not a paragraph: it gets the flow gap above it. */
.art-body .wp-block-list .wp-block-list {
	margin-top: var( --space-3 );
}

/*
 * ORDERED - transferred. The mockup's numbered procedure steps: a 44 px mint
 * circle carrying the number in mint ink at weight 800, 14 px from the text.
 * The counter comes from CSS rather than from the browser's own marker because
 * the marker cannot be given a shape. min-height keeps a one-line item as tall
 * as its circle, which the flex row used to do by stretching.
 */
.art-body ol.wp-block-list {
	counter-reset: art-step;
}

.art-body ol.wp-block-list > li {
	min-height: 44px;
	padding-left: calc( 44px + 14px );
	counter-increment: art-step;
}

.art-body ol.wp-block-list > li::before {
	content: counter( art-step );
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var( --radius-pill );
	background: var( --tint-ice );
	color: var( --color-accent-text );
	font-size: 17px;
	font-weight: var( --fw-black );
	line-height: 1;
}

/*
 * UNORDERED - DERIVED. The mockup draws no bulleted list anywhere, so the
 * marker is built from the palette instead of copied: a 7 px accent disc, which
 * is a UI graphic rather than text and clears the 3:1 floor its token is
 * documented for. The offset is in em so the dot stays on the first line's
 * optical centre as the type scales.
 */
.art-body ul.wp-block-list > li {
	padding-left: calc( 7px + var( --space-3 ) );
}

.art-body ul.wp-block-list > li::before {
	content: '';
	position: absolute;
	top: 0.55em;
	left: 0;
	display: block;
	width: 7px;
	height: 7px;
	border-radius: var( --radius-pill );
	background: var( --color-accent );
}

/*
 * IMAGE WITH A CAPTION - the radius is transferred from the mockup's in-body
 * photograph pair; the caption is derived, for the reason given at
 * .art-cover__caption.
 */

.art-body .wp-block-image {
	margin-inline: 0;
}

/*
 * NO PHOTOGRAPH IS TALLER THAN THE SCREEN IT IS READ ON.
 *
 * The reading column is 760 px, so `width: 100%` on a portrait frame produced
 * a 1 140 px picture - taller than a laptop viewport, which is exactly what it
 * looked like: the article stopped and a photograph filled the window. The cap
 * is 78vh, leaving the caption and a line of prose visible under it.
 *
 * `width: auto` rather than `width: 100%` is what makes the cap keep the
 * photograph's shape. A replaced element with both dimensions auto honours
 * max-width AND max-height while preserving its ratio; pinning the width and
 * capping the height instead squashes it. Landscape frames are unaffected -
 * every photograph here is at least 1 000 px wide, so max-width still decides.
 */
.art-body .wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 78vh;
	margin-inline: auto;
	border-radius: var( --radius-lg );
}

.art-body .wp-block-image figcaption {
	margin: var( --space-2 ) 0 0;
	color: var( --text-meta );
	font-size: var( --fs-meta );
	line-height: var( --lh-relaxed );
	text-align: center;
}

/*
 * The wide and full alignments are NOT built. They are out of this task's scope
 * and nothing depends on them, but they are named here so the next person knows
 * it was a decision: an editor who applies one gets an image at the reading
 * measure, which is correct-looking and cannot overflow, rather than a break-out
 * that would need the band width to be reachable from inside the column.
 */

/*
 * THE BEFORE/AFTER PAIR - transferred, and it is core/gallery rather than a
 * component of our own.
 *
 * The task asks for this for P3, the reader who decides with their eyes. The
 * mockup draws two 4/3 frames on one auto-fit track with a 14 px gap, and a
 * two-image gallery is exactly that shape - so the geometry is transferred onto
 * the block an editor already has, instead of shipping markup only a developer
 * can produce.
 *
 * WHAT IS NOT BUILT, and why it is written down rather than quietly dropped: the
 * mockup puts a white pill reading "before" and "after" in the corner of each
 * frame. A caption in core/gallery renders UNDER its image, not over it, so
 * those pills cannot come from the editor without either a block variation or a
 * caption position this design does not use elsewhere. Building half of it - the
 * frames without the labels - is the honest half: an unlabelled pair still reads
 * left-to-right as before and after, while a label in the wrong place would be a
 * new design decided in a stylesheet.
 */
.art-body .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 240px ), 1fr ) );
	gap: 14px;
}

/*
 * THE :not(#individual-image) IS NOT A TYPO, and it is not superstition either -
 * it is measured. Core sizes a two-column gallery's figures with
 *
 *   .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image)
 *
 * and that :not() holds an ID, which lifts the rule above anything built out of
 * classes alone. A plain override here computed to 182 px inside a 373 px track:
 * the rule was in the stylesheet, the frame was half empty, and nothing said
 * why. Repeating core's own guard puts this one class ahead of it.
 *
 * The alternative was !important, which wins the same argument while hiding what
 * the argument was about.
 */
.art-body .wp-block-gallery.has-nested-images figure.wp-block-image:not( #individual-image ) {
	display: block;
	width: 100%;
	margin: 0;
}

/*
 * The caption goes UNDER the photograph, which is core's one behaviour here
 * that has to be undone rather than adjusted.
 *
 * Left alone, core lays a gallery caption OVER the bottom of its image: white
 * text on a black 40 % gradient, absolutely positioned. Measured, because it is
 * invisible in a diff. Two things are wrong with keeping it. It paints in values
 * this design system does not have - pure white on pure black - which is
 * invariant I9. And it is not what the mockup does: the mockup's label is a
 * white pill with ink text in the CORNER, deliberately small and out of the way,
 * not a band across the picture. Core's version is neither our design nor a
 * neutral default.
 *
 * So it becomes the same caption every other image on this page gets.
 */
.art-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	margin: var( --space-2 ) 0 0;
	padding: 0;
	background: none;
	color: var( --text-meta );
	font-size: var( --fs-meta );
	text-align: center;
}

.art-body .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var( --radius-lg );
	object-fit: cover;
}

/*
 * height: auto, and the selector carries .is-cropped for the same
 * specificity reason as above - that is the exact rule being undone.
 *
 * Core's cropped gallery gives the image height: 100%. Inside this grid the
 * figure stretches to the row, so that 100% resolved against the row height
 * INCLUDING the caption, and the frame came out 308 px tall where 4/3 of 373 is
 * 280. The image was then taller than its own figure and the caption hung out of
 * the bottom of it. Measured: 307.891 px, which is exactly 279.75 + 8 + 20.15.
 */
.art-body .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not( #individual-image ) img {
	height: auto;
}

/* ---------------------------------------------------------------------------
 * THE OVERLAPPING PAIR - core/gallery carrying the art-photo-pair class
 *
 * Two photographs that sit into each other rather than side by side, asked for
 * by Andrius on 2026-09-03: a wide frame of the work, and a taller frame of the
 * moment before it, laid over its corner.
 *
 * IT IS A GALLERY, not markup of our own, for the same reason the before/after
 * pair is one: an editor can build, reorder and caption a gallery, and core
 * gives the whole block a caption element that a group would not. The class is
 * typed into the block's Advanced panel, which is a thing an editor can do; the
 * geometry then comes from here.
 *
 * THE SELECTORS CARRY has-nested-images ON PURPOSE. The general gallery rules
 * above give every image a 4/3 crop, and they are written with :not(#id), which
 * lifts them above ordinary class selectors. Matching that shape here - and
 * coming later in the file - is what lets the pair keep each photograph's own
 * proportions. Without it the overlap would work and both frames would be
 * cropped square-ish, which is the one thing this composition cannot survive.
 *
 * MOBILE FIRST, and the overlap survives it. On a phone the two stack and the
 * second is pulled up over the first's bottom-right corner; from 640 px they
 * become the side-by-side collage. Both states are the same idea, so neither
 * reads as a fallback.
 */

.art-body .wp-block-gallery.has-nested-images.art-photo-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.art-body .wp-block-gallery.has-nested-images.art-photo-pair figure.wp-block-image:not( #individual-image ) {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.art-body .wp-block-gallery.has-nested-images.art-photo-pair figure.wp-block-image:not( #individual-image ):nth-of-type( 2 ) {
	z-index: 1;
	grid-row: 2;
	width: 68%;
	margin: -12% 0 0 auto;
}

/*
 * Each frame keeps its own shape: the gallery's 4/3 crop is what makes a
 * before/after pair line up, and what would flatten this one.
 */
.art-body .wp-block-gallery.has-nested-images.art-photo-pair figure.wp-block-image:not( #individual-image ) img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
	max-height: none;
}

/*
 * The ring is the page's own background, so the top frame reads as lying over
 * the other rather than glued to it. A border rather than a shadow: this design
 * uses shadows for lift, and nothing here is lifted - the frames are flat.
 */
.art-body .wp-block-gallery.has-nested-images.art-photo-pair figure.wp-block-image:not( #individual-image ):nth-of-type( 2 ) img {
	border: 6px solid var( --surface-page );
}

.art-body .wp-block-gallery.has-nested-images.art-photo-pair .blocks-gallery-caption {
	grid-column: 1;
	grid-row: 3;
	margin: var( --space-3 ) 0 0;
	color: var( --text-meta );
	font-size: var( --fs-meta );
	line-height: var( --lh-relaxed );
	text-align: center;
}

@media ( min-width: 640px ) {

	.art-body .wp-block-gallery.has-nested-images.art-photo-pair {
		grid-template-columns: repeat( 12, 1fr );
	}

	.art-body .wp-block-gallery.has-nested-images.art-photo-pair figure.wp-block-image:not( #individual-image ) {
		grid-column: 1 / 10;
	}

	/*
	 * Nine columns and five, overlapping by two, with the second dropped a
	 * tenth of the pair's width. Measured at 1440 px against the 760 px column:
	 * the wide frame comes out 570x393 and the tall one 317x396 sitting 76 px
	 * lower, so they meet at a corner and the empty step under the wide frame
	 * is about 80 px - breathing room rather than the 180 px hole the first
	 * proportions left.
	 */
	.art-body .wp-block-gallery.has-nested-images.art-photo-pair figure.wp-block-image:not( #individual-image ):nth-of-type( 2 ) {
		grid-column: 8 / -1;
		grid-row: 1;
		width: 100%;
		margin: 10% 0 0;
		align-self: start;
	}

	.art-body .wp-block-gallery.has-nested-images.art-photo-pair .blocks-gallery-caption {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* ---------------------------------------------------------------------------
 * Who wrote this
 *
 * The mockup's author band, transferred clamp for clamp. It corresponds to the
 * design system's AuthorCard (components/cards/AuthorCard.jsx, added with this
 * work): every value here is a token, and the card is deliberately built from
 * the same pieces that component composes - the green trust badge and the
 * accent text link.
 *
 * It sits in the READING COLUMN rather than the band, because it is the
 * epilogue to the prose and not a full-width block. The wrap is what makes it
 * work on a phone: the text column asks for 260 px, so below roughly 380 px of
 * content width it drops under the portrait instead of squeezing beside it.
 */

.art-author {
	padding-block: 0 clamp( 32px, 4.5vw, 52px );
}

.art-author__card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp( 16px, 2.5vw, 22px );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-xl );
	padding: clamp( 20px, 3vw, 28px );
	background: var( --surface-card );
}

.art-author__photo {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: var( --radius-pill );
	object-fit: cover;
}

.art-author__body {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	gap: 6px;
}

.art-author__eyebrow {
	margin: 0;
	color: var( --text-link );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
}

.art-author__name {
	margin: 0;
	color: var( --text-heading );
	font-size: clamp( 18px, 2.2vw, var( --fs-h3 ) );
	font-weight: var( --fw-black );
	line-height: 1.2;
}

.art-author__role,
.art-author__issuer {
	margin: 0;
	color: var( --text-meta );
}

.art-author__role {
	font-size: var( --fs-caption );
}

.art-author__issuer {
	font-size: var( --fs-meta );
}

/*
 * The green pair, not the mint one. Mint is the story block and the topic pill;
 * green is this palette's TRUST tone, and its ink measures 5.72:1 on it. The
 * same pairing carries the licence on /apie/, so the one fact the site states
 * twice looks the same in both places.
 */
.art-author__licence {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: var( --space-2 );
	margin: var( --space-1 ) 0 0;
	border-radius: var( --radius-pill );
	padding: 7px 14px;
	background: var( --color-green );
	color: var( --color-green-ink );
	font-size: var( --fs-meta );
	font-weight: var( --fw-bold );
	line-height: 1.25;
}

.art-author__licence-icon {
	font-size: 17px;
}

/* The number itself never breaks across lines - AS-69 on /apie/. */
.art-author__licence span span {
	white-space: nowrap;
}

.art-author__bio {
	margin: 6px 0 0;
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

/*
 * Same padding-with-negative-margin trick as the back link at the top of the
 * page: a 46 px target for a thumb without moving the text off its line.
 */
.art-author__link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-block: 2px -12px;
	padding-block: 12px;
	color: var( --text-link );
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

/* The words, not the whole link - same reason as .art-back__link above. */
.art-author__link:hover span:not( .material-symbols-outlined ) {
	text-decoration: underline;
}

.art-author__link .material-symbols-outlined {
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
 * Closing call to action
 *
 * The ink panel from the mockup. The white-on-ink lead is the same 65 % white
 * three other page stylesheets already use on this surface; it measures 7.7:1
 * and is a deliberate second level rather than a lighter grey token, which the
 * palette does not have for a dark fill.
 */

.art-cta__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;

	/*
	 * The mockup's own ceiling here is 32px, and this is 28. Not a transfer
	 * error: 28 is --radius-2xl and the top of the design system's shape scale,
	 * which stops at 28 for cards and jumps to 999 for pills. qa-tokens reports
	 * 32 as T4, and it is right to - the FAQ page's closing panel made exactly
	 * the same correction for exactly the same reason (WPS-022). The mockup is
	 * the one that is off-scale.
	 */
	border-radius: clamp( 20px, 2.5vw, var( --radius-2xl ) );
	padding: clamp( 28px, 4vw, 48px );
	background: var( --surface-inverse );
	text-align: center;
}

.art-cta__title {
	max-width: 620px;
	margin: 0;
	color: var( --color-surface );
	font-size: clamp( 24px, 3.4vw, 34px );
	line-height: 1.14;
}

.art-cta__lead {
	max-width: 520px;
	margin: 0;
	color: rgba( 255, 255, 255, 0.65 );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

.art-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --space-3 );
	margin: 0;
}

/*
 * Both buttons are white on the ink panel, which is what the mockup draws: on
 * this surface the ink primary would disappear and the outlined secondary would
 * be a hairline nobody sees. Hover goes to the accessible accent fill, the same
 * move .btn--primary makes on a light background.
 */
.art-cta__button {
	padding: 14px 26px;
	background: var( --color-surface );
	color: var( --text-heading );
}

.art-cta__button:hover {
	background: var( --action-primary-hover );
	color: var( --color-surface );
}

/* ---------------------------------------------------------------------------
 * Read next
 *
 * The grid is the mockup's own auto-fit track rather than a fixed column count:
 * it is given two cards here and three on the index, and one declaration draws
 * both correctly.
 *
 * Measured at 1440 px, two cards come out at 506 px, where the mockup's are 538.
 * That 32 px is the container difference described at the top of this file and
 * written up under WPS-025 - the mockup's band is content-box 1100 and the
 * theme's is border-box 1100, so the content is 1036: (1036 - 24) / 2 = 506
 * against (1100 - 24) / 2 = 538. It is a theme-wide convention rather than a
 * defect here, and it must not be "fixed" in this file.
 */

.art-related__head {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	margin-bottom: clamp( 16px, 2.5vw, 24px );
}

.art-related__head .eyebrow {
	margin: 0;
}

.art-related__title {
	margin: 0;
	font-size: clamp( 24px, 3.4vw, 34px );
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.art-related__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 300px ), 1fr ) );
	gap: clamp( 14px, 2vw, 24px );
}

/* ---------------------------------------------------------------------------
 * Desktop
 *
 * THIS FILE HAS EXACTLY ONE min-width BLOCK, and it is the overlapping pair
 * above. Everything else on the page is already a clamp carried over from the
 * mockup, the reading column is a max-width that simply stops applying below
 * 760 px, and the two other grids - the related cards and the before/after pair
 * - are auto-fit tracks that find their own column count.
 *
 * The pair is the exception because its geometry is a composition rather than a
 * size: two frames overlapping at a corner needs one arrangement where there is
 * room side by side and another where there is not, and no clamp expresses that.
 *
 * Checked rather than assumed: the mockup file carries seven media queries, and
 * every selector in all seven belongs to the shared header, the shared footer,
 * the sticky bar, or to components of other pages that travel in the same
 * stylesheet. Not one of them names an element this template owns.
 *
 * Written out because "no media query" and "forgot the media query" look
 * identical in a diff, and the next person deserves to know which one this is.
 */