/*
 * Article pages (ADR 0064): Picture on top (the picture across the page, breadcrumbs under it) or
 * Picture under the heading (a centered heading, the picture at content width), the text in a
 * reading column, and the extras under it. Everything follows the site styles (tokens).
 */
.sv-article {
	--sv-article-column: 46rem;
	--sv-article-gutter: var(--sv-gutter, 1.25rem);
	display: grid;
	padding-block-end: var(--sv-space-lg);
	color: var(--sv-color-text);
}

.sv-article__column {
	box-sizing: content-box;
	inline-size: 100%;
	max-inline-size: var(--sv-article-column);
	margin-inline: auto;
	padding-inline: var(--sv-article-gutter);
}

.sv-article__wide {
	box-sizing: content-box;
	max-inline-size: var(--sv-container-content, 72rem);
	margin-inline: auto;
	padding-inline: var(--sv-article-gutter);
}

/* Breadcrumbs: Home › Category › Title. */
.sv-article__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	margin: 0;
	padding: 0;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	list-style: none;
}

.sv-article__crumbs li + li::before {
	margin-inline-end: 0.5rem;
	content: "›";
	opacity: 0.6;
}

.sv-article__crumbs a {
	color: inherit;
	text-decoration: none;
}

.sv-article__crumbs a:is(:hover, :focus-visible) {
	color: var(--sv-color-link);
}

.sv-article__crumbs [aria-current="page"] {
	display: inline-block;
	overflow: hidden;
	max-inline-size: 22rem;
	color: var(--sv-color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* The heading: the category, the title, the short description and the details. */
.sv-article__head {
	display: grid;
	gap: 0.85rem;
	justify-items: start;
	margin-block-end: var(--sv-space-md);
}

.sv-article__category {
	margin: 0;
	color: var(--sv-color-link);
	font-size: var(--sv-size-small);
	font-weight: 700;
	letter-spacing: calc(0.08em * var(--sv-tracking, 1));
	text-decoration: none;
	text-transform: var(--sv-uppercase, uppercase);
}

.sv-article__title {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h1);
	line-height: calc(1.12 * var(--sv-leading, 1));
	overflow-wrap: break-word;
}

.sv-article__excerpt {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-body) * 1.15);
	line-height: calc(1.6 * var(--sv-leading-body, 1));
}

.sv-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
}

.sv-article__meta > * + *::before {
	margin-inline-end: 0.5rem;
	content: "·";
}

.sv-article__picture {
	margin: 0;
}

.sv-article__photo {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Picture on top: the picture across the page at a calm height, the breadcrumbs on a light bar under it.
 * A floating or see-through header goes over it (ADR 0056): the picture starts at the very top and is
 * taller by the header's room, so the part below the header keeps its height.
 */
.sv-article--top .sv-article__hero .sv-article__picture {
	overflow: hidden;
	block-size: calc(clamp(17rem, calc(70vh - 7.5rem), 40rem) + var(--sv-header-room, 0px));
	background-color: var(--sv-color-surface);
}

.sv-article__bar {
	padding-block: 0.85rem;
	border-block-end: 1px solid var(--sv-color-border);
}

.sv-article--top .sv-article__body {
	padding-block-start: var(--sv-space-lg);
}

/* Picture under the heading: breadcrumbs and a centered heading, then the picture at content width. */
.sv-article--under .sv-article__column--head {
	padding-block: var(--sv-space-md) var(--sv-space-md);
	text-align: center;
}

.sv-article--under .sv-article__crumbs ol {
	justify-content: center;
	margin-block-end: var(--sv-space-md);
}

.sv-article--under .sv-article__head {
	justify-items: center;
	margin-block-end: 0;
}

.sv-article--under .sv-article__meta {
	justify-content: center;
}

.sv-article--under .sv-article__wide .sv-article__picture {
	overflow: hidden;
	border-radius: var(--sv-radius-lg);
	background-color: var(--sv-color-surface);
	aspect-ratio: 2 / 1;
}

.sv-article--under .sv-article__body {
	padding-block-start: var(--sv-space-lg);
}

/* The text: calm reading in the site's fonts. */
.sv-article__content {
	font-size: calc(var(--sv-size-body) * 1.05);
	line-height: calc(1.75 * var(--sv-leading-body, 1));
	overflow-wrap: break-word;
}

.sv-article__content > * {
	margin-block: 0 1.25em;
}

.sv-article__content > :last-child {
	margin-block-end: 0;
}

.sv-article__content :is(h2, h3, h4) {
	margin-block: 1.8em 0.6em;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	line-height: calc(1.25 * var(--sv-leading, 1));
}

.sv-article__content h2 {
	font-size: var(--sv-size-h3);
}

.sv-article__content h3 {
	font-size: var(--sv-size-h4);
}

.sv-article__content a {
	color: var(--sv-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sv-article__content :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.sv-article__content li + li {
	margin-block-start: 0.4em;
}

.sv-article__content blockquote {
	margin-inline: 0;
	padding-block: 0.25em;
	padding-inline: 1.25em 0;
	border-inline-start: 3px solid var(--sv-color-primary);
	color: var(--sv-color-text);
	font-family: var(--sv-font-heading);
	font-size: 1.15em;
}

.sv-article__content :is(img, video) {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--sv-radius-md);
}

.sv-article__content figure {
	margin-inline: 0;
}

.sv-article__content figcaption {
	margin-block-start: 0.5em;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	text-align: center;
}

.sv-article__content hr {
	border: 0;
	border-block-start: 1px solid var(--sv-color-border);
}

.sv-article__content :is(pre, code) {
	border-radius: var(--sv-radius-sm);
	background-color: var(--sv-color-surface);
	font-size: 0.9em;
}

.sv-article__content code {
	padding-inline: 0.3em;
}

.sv-article__content pre {
	overflow-x: auto;
	padding: 1em;
}

.sv-article__content :is(.alignwide, .alignfull) {
	max-inline-size: none;
}

/* After the text: tags, share links, the author and the newsletter. */
.sv-article__after {
	display: grid;
	gap: var(--sv-space-md);
	margin-block-start: var(--sv-space-lg);
	padding-block-start: var(--sv-space-md);
	border-block-start: 1px solid var(--sv-color-border);
}

.sv-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-article__tags a {
	display: inline-block;
	padding-block: 0.35rem;
	padding-inline: 0.85rem;
	border: 1px solid var(--sv-color-border);
	border-radius: 999px;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.sv-article__tags a:is(:hover, :focus-visible) {
	border-color: var(--sv-color-primary);
	color: var(--sv-color-link);
}

.sv-article__share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.sv-article__share-label {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	font-weight: 600;
}

.sv-article__share ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-article__share-link {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 1px solid var(--sv-color-border);
	border-radius: 50%;
	background: none;
	color: var(--sv-color-text);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sv-article__share-link:is(:hover, :focus-visible),
.sv-article__copy[data-done] {
	border-color: var(--sv-color-primary);
	background-color: var(--sv-color-primary);
	color: var(--sv-color-on-primary);
}

.sv-article__share-icon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.sv-article__share-icon .sv-article__share-fill {
	fill: currentcolor;
	stroke: none;
}

.sv-article__author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: var(--sv-space-sm);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-color-surface);
}

.sv-article__avatar {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background-color: var(--sv-color-primary);
	color: var(--sv-color-on-primary);
	font-family: var(--sv-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
}

.sv-article__author-text {
	display: grid;
	gap: 0.15rem;
	min-inline-size: 0;
}

.sv-article__author-text p {
	margin: 0;
}

.sv-article__author-label {
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
}

.sv-article__author-name {
	font-family: var(--sv-font-heading);
	font-weight: 700;
}

.sv-article__author-bio {
	margin-block-start: 0.35rem;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	line-height: 1.6;
}

/* The newsletter: the footer's sign-up in a soft box. */
.sv-article__newsletter {
	display: grid;
	gap: 0.6rem;
	padding: var(--sv-space-md);
	border: 1px solid var(--sv-color-border);
	border-radius: var(--sv-radius-lg);
	background-color: color-mix(in srgb, var(--sv-color-primary) 6%, var(--sv-color-background));
}

.sv-article__newsletter-title {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	font-size: var(--sv-size-h4);
}

.sv-article__newsletter-text {
	margin: 0;
	color: var(--sv-color-muted);
}

.sv-article__subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block-start: 0.4rem;
}

.sv-article__subscribe-field {
	flex: 1 1 14rem;
	min-inline-size: 0;
	padding-block: 0.75rem;
	padding-inline: 1rem;
	border: 1px solid var(--sv-color-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-color-background);
	color: var(--sv-color-text);
	font: inherit;
}

.sv-article__hidden {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Related articles: a calm band under the article, as wide as the site's content. */
.sv-article__related {
	padding-block: var(--sv-space-lg);
	border-block-start: 1px solid var(--sv-color-border);
	background-color: var(--sv-color-surface);
}

.sv-article__related-inner {
	box-sizing: content-box;
	max-inline-size: var(--sv-container-content, 72rem);
	margin-inline: auto;
	padding-inline: var(--sv-article-gutter, var(--sv-gutter, 1.25rem));
}

@media (prefers-reduced-motion: reduce) {
	.sv-article__tags a,
	.sv-article__share-link {
		transition: none;
	}
}