/*
Theme Name: DermaSpa Blogg
Theme URI: https://blog.dermaspa.no
Author: DermaSpa
Description: Block theme for the DermaSpa blog, implementing docs/WIREFRAME-SPEC.md. Cream surfaces, orchid accents, Cormorant Garamond + Mulish. Categories are the primary navigation level; temaer (tags) are a lighter secondary discovery layer.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dermaspa-blogg
Tags: blog, one-column, block-patterns, full-site-editing
*/

/*
 * Every value here reads from a theme.json preset or custom property. Change a
 * colour or a size in theme.json and it changes here too — there are no literal
 * hex values below, and the two `!important` declarations are both commented
 * where they appear.
 *
 * Section order follows the spec: tokens, layout, primitives, chrome, then one
 * block per page type, then the mobile overrides in a single media query at the
 * end so there is exactly one place to look for "what changes on a phone".
 */

/* ── Local aliases for the spec's names ───────────────────────────────── */
:root {
	--ds-gutter: 20px;
	--ds-container: 1200px;
	--ds-track: var(--wp--custom--track-caps);
	--ds-radius: var(--wp--custom--radius-md);
	--ds-pill: var(--wp--custom--radius-pill);
	--ds-shadow: var(--wp--custom--shadow-card);
	--ds-shadow-raised: var(--wp--custom--shadow-raised);
	--ds-ease: 300ms ease-out;
}

/* ── Layout shells ────────────────────────────────────────────────────── */
/*
 * 16px under the header, as 8 + 8.
 *
 * The block-gap is on <main> itself, not on its first child — WP's flow layout
 * zeroes the first child's top margin — so this is the only place the gap can be
 * set. 24 + 8 read as a hole between the header and the breadcrumbs (Jone,
 * 2026-09-03); .ds-main--flush below still takes both to 0 for the templates
 * that open on a full-bleed tinted band.
 */
.ds-main {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
}

/*
 * ...except on an article, which opens on three lines of small type in a row —
 * breadcrumbs, category badge, title — and ran into the header above and into
 * itself (Jone, 2026-09-03). Each of the three gets room.
 */
/* No padding of its own; the gap under the header is set on .ds-main. */
.ds-article__head {
	padding-block: 0;
}

.ds-article__head .ds-badge {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * The badge belongs to the title, so it sits close to it — closer than WP's
 * 24px block-gap, which is why the title group carries a hook of its own. The
 * gap can be set here without !important because WP wraps its layout rules in
 * :where(), which has no specificity.
 */
.ds-article__titlewrap {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * The byline belongs to the title the same way the badge does — it names who
 * wrote *this* headline — so it sits directly under it rather than a block-gap
 * away. Its own margin is zeroed because it would otherwise collapse through
 * this wrapper and win: adjoining margins take the larger of the two, not the
 * inner one.
 */
.ds-article__meta {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ds-article__meta .ds-byline {
	margin-top: 0;
}

/*
 * The category and guide templates open on a full-bleed tinted band, which has
 * to sit flush against the header's bottom border rather than starting after the
 * main's top padding.
 */
.ds-main--flush {
	padding-top: 0;
	/*
	 * WP's flow layout also puts a block-gap margin (24px) on <main> itself,
	 * which reads as a cream strip between the header and the tinted band
	 * (Jone, 2026-09-02). Kill the margin too, not just the padding.
	 */
	margin-block-start: 0;
}

.ds-shell {
	max-width: var(--ds-container);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
}

.ds-shell--list {
	max-width: var(--wp--custom--list-width);
}

.ds-shell--guide {
	max-width: var(--wp--custom--guide-width);
}

/*
 * The article column. Applied to several sibling blocks rather than to one
 * wrapper so that "Les også" can break out between them, which is what the spec
 * draws (§2.2, "full-width section").
 *
 * It is the header's container width, not a reading measure: an article set to
 * 680px read as a narrow strip lost on a wide screen, against a nav that spans
 * the full 1200 above it (Jone, 2026-09-03). Same --ds-container and the same
 * gutter as .ds-header__inner, so the two edges line up exactly.
 */
.ds-measure {
	/*
	 * content-box on purpose: the raw wp:html measure divs default to
	 * content-box while WP global styles force border-box on block-group
	 * measures — mixing the two indents grouped content (the H1) 20px to the
	 * right of its siblings. Pinning content-box makes every column identical.
	 */
	box-sizing: content-box;
	max-width: var(--ds-container);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
}

/* ── Typography primitives ────────────────────────────────────────────── */
.ds-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	color: var(--wp--preset--color--brand-dark);
	margin: 0;
}

/*
 * Structural labels ("Temaer", "4 artikler", "Tema") are muted; brand and
 * category labels are orchid. The spec is explicit that these two uses must not
 * look alike.
 */
.ds-eyebrow--muted {
	font-size: var(--wp--preset--font-size--caps);
	color: var(--wp--preset--color--muted);
}

.ds-intro--center {
	text-align: center;
}

.ds-intro__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 1.14;
	color: var(--wp--preset--color--heading);
	margin: var(--wp--preset--spacing--30) 0 0;
}

.ds-intro__title--hero {
	font-size: var(--wp--preset--font-size--xx-large);
}

.ds-intro__title--category {
	font-size: var(--wp--custom--type--title-category);
}

.ds-intro__title--tema {
	font-size: var(--wp--custom--type--title-tema);
}

.ds-intro__sub {
	max-width: 560px;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--body);
}

.ds-intro--center .ds-intro__sub {
	margin-inline: auto;
}

.ds-intro__sub > p:first-child { margin-top: 0; }
.ds-intro__sub > p:last-child { margin-bottom: 0; }

.ds-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: var(--wp--preset--spacing--40) 0;
}

.ds-section__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ds-empty {
	color: var(--wp--preset--color--muted);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.ds-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-block-start: 0;
}

.ds-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--ds-container);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--30) var(--ds-gutter);
}

.ds-header__logo img {
	display: block;
	width: auto;
	height: 36px;
}

.ds-header__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.ds-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-nav__item a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	text-decoration: none;
	color: var(--wp--preset--color--heading);
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.ds-nav__item a:hover {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ds-nav__item.is-current a {
	color: var(--wp--preset--color--brand-dark);
	border-bottom-color: var(--wp--preset--color--brand);
}

/* The one link that leaves the blog is always orchid. */
.ds-nav__item--shop a {
	color: var(--wp--preset--color--brand-dark);
}

/* The burger only exists below the nav breakpoint; see the media query. */
.ds-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-burger__bars {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
}

.ds-burger__bars span {
	display: block;
	height: 1.5px;
	background: var(--wp--preset--color--heading);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.ds-footer {
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--50) var(--ds-gutter);
	background: var(--wp--preset--color--blush);
	border-top: 1px solid var(--wp--preset--color--border);
}

.ds-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--ds-container);
	margin-inline: auto;
}

.ds-footer__logo img {
	display: block;
	width: auto;
	height: 30px;
}

.ds-footer__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.ds-footer__tagline {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.ds-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-footer__links a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.ds-footer__links a:hover {
	text-decoration: underline;
}

.ds-footer__legal {
	max-width: var(--ds-container);
	margin: var(--wp--preset--spacing--50) auto 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--caps);
	color: var(--wp--preset--color--muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ds-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	border-radius: var(--ds-pill);
	padding: 12px 26px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--ds-ease), color var(--ds-ease);
}

.ds-btn--primary {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.ds-btn--primary:hover {
	background: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ds-btn--secondary {
	background: transparent;
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-dark);
}

.ds-btn--secondary:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ds-btn--lg {
	padding: 15px 32px;
	font-size: var(--wp--preset--font-size--medium);
}

.ds-btn--block {
	display: block;
	width: 100%;
}

.ds-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Badges, pills, chips ─────────────────────────────────────────────── */
/*
 * Blush on cream is two tints apart — the badge read as a faint smudge rather
 * than a pill (Jone, 2026-09-03). The Orchid 300 outline is what gives it an
 * edge; the padding drops a pixel so the box stays the height it was.
 */
.ds-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	text-decoration: none;
	color: var(--wp--preset--color--brand-dark);
	background: var(--wp--preset--color--blush);
	border: 1px solid var(--wp--preset--color--brand-soft);
	border-radius: 4px;
	padding: 8px 15px;
}

.ds-badge--solid {
	background: var(--wp--preset--color--heading);
	border-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--white);
}

/* Primary level: category Tag pills. */
.ds-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.ds-pills--left {
	justify-content: flex-start;
}

.ds-pill {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--body);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-pill);
	padding: 8px 18px;
}

.ds-pill:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ds-pill.is-selected {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--brand-dark);
}

/*
 * Secondary level: tema chips. Deliberately lighter than the pills above — no
 * fill, no bold, smaller, sentence case. Spec §0 and §2.4.
 */
.ds-chiprow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.ds-chiprow--center {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

.ds-chiprow--wrap {
	flex-direction: column;
	align-items: flex-start;
}

.ds-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-chip {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-pill);
	padding: 6px 13px;
}

.ds-chip:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

/* ── Media and its stand-in ───────────────────────────────────────────── */
/*
 * 16:10 is the house ratio for every featured image on the site — the featured
 * card, the grid card, the list card and the "Les også" card. It is declared
 * once, here, so the recipes cannot drift apart; --ds-ratio is the escape hatch
 * for the two slots that are not a post's featured image (the product
 * thumbnail, and the stand-in for an article's own lead image).
 */
.ds-media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ds-ratio, 16 / 10);
	background: var(--wp--preset--color--blush);
}

.ds-media img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * object-fit needs a definite height to fit into. The aspect-ratio on
	 * .ds-media supplies it; without `height: 100%` the image would take its
	 * own intrinsic height and the ratio would never apply.
	 */
	object-fit: cover;
}

.ds-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * The one exception to the 16:10 rule: a real lead image inside an article keeps
 * its own proportions. See .ds-hero-image for why.
 */
.ds-media--natural {
	aspect-ratio: auto;
}

.ds-media__caption {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brand-soft);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.ds-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
	overflow: hidden;
	transition: box-shadow var(--ds-ease);
}

.ds-card:hover {
	box-shadow: var(--ds-shadow-raised);
}

.ds-card__media {
	display: block;
}

.ds-card__body {
	padding: 18px 20px 20px;
}

.ds-card__cat {
	margin: 0;
}

.ds-card__cat a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ds-card__title {
	font-size: var(--wp--custom--type--card-title);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ds-card__title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.ds-card__title a:hover {
	text-decoration: underline;
}

.ds-card__lead {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

.ds-card__meta {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/*
 * The list recipe: image left, text right. Same construction as the featured
 * card, and for the same reason — the image fills its column, so the column's
 * 16:10 is the card's height. The column is a fixed width here rather than a
 * fraction, which makes every row in the list exactly the same height whatever
 * its title does.
 */
.ds-card--list {
	/*
	 * 384px, so the derived height is 240px. The tallest the text can get is a
	 * two-line title over a two-line lead — both clamped, so that really is the
	 * ceiling — which measures 226px including padding. Shrinking this column makes
	 * the card shorter than its own worst case and the row grows instead.
	 */
	--ds-list-media: 384px;
	display: grid;
	grid-template-columns: var(--ds-list-media) 1fr;
	/*
	 * min-height, not height: at the narrow end of the desktop range the text
	 * column runs out of room, and growing the row a little — the image still
	 * fills it, just a shade taller than 16:10 — beats clipping the meta line off
	 * the bottom of the card.
	 */
	min-height: calc(var(--ds-list-media) * 10 / 16);
	align-items: stretch;
}

.ds-card--list .ds-card__media {
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--blush);
}

.ds-card--list .ds-card__media .ds-media {
	width: 100%;
	height: 100%;
}

.ds-card--list .ds-card__title {
	font-size: var(--wp--custom--type--list-title);
}

/* Centred against a height the image sets, like the featured card's body. */
.ds-card--list .ds-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

/*
 * Three explicit columns, not auto-fit. The spec draws three (§2.1, §2.2) and
 * auto-fit at a 1200px container fits four 280px tracks — which reads as a
 * different, denser design. minmax(0, 1fr) rather than 1fr so a long unbroken
 * title cannot push a track past its share.
 */
.ds-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.ds-list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

/* ── Featured card (homepage) ─────────────────────────────────────────── */
/*
 * The image fills its column edge to edge, so the column's 16:10 *is* the card's
 * height — and the card's own ratio is therefore derived from the split rather
 * than guessed: with the media column taking `media` of `media + body` columns,
 * the whole card is (media + body) * 16 / (media * 10). Change the split and the
 * ratio follows. Editing one without the other puts a band back around the
 * picture, which is the thing this construction exists to prevent.
 */
.ds-featured {
	--ds-featured-media: 1.4;
	--ds-featured-body: 1;
	display: grid;
	/*
	 * A percentage, not `fr`: `fr` is not a length and cannot appear inside
	 * calc(), so the calc'd track silently drops the whole declaration and the
	 * grid collapses to one column.
	 */
	grid-template-columns:
		calc(
			var(--ds-featured-media) * 100%
			/ (var(--ds-featured-media) + var(--ds-featured-body))
		)
		1fr;
	aspect-ratio:
		calc((var(--ds-featured-media) + var(--ds-featured-body)) * 16)
		/ calc(var(--ds-featured-media) * 10);
	align-items: stretch;
	margin-top: 44px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
	overflow: hidden;
	transition: box-shadow var(--ds-ease);
}

.ds-featured:hover {
	box-shadow: var(--ds-shadow-raised);
}

/*
 * The column is already 16:10 by the ratio above, so the image simply fills it —
 * no centring, no band. A square 1024px photo used to resolve `height: 100%`
 * against an auto-height parent (its own intrinsic height) and made the card
 * 530px tall against a design that draws it at 380; the card's ratio now gives
 * the column a definite height, so that cannot happen and the old absolute
 * positioning and 340px floor are both gone.
 */
.ds-featured__media {
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--blush);
}

.ds-featured__media .ds-media {
	width: 100%;
	height: 100%;
}

/*
 * Centred, and clamped. The card's height comes from the image now, so the text
 * has to fit inside it rather than the other way round — an unclamped four-line
 * title would push the card taller and put a band back under the picture.
 */
.ds-featured__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
}

.ds-featured__title,
.ds-card--list .ds-card__title,
.ds-featured__lead,
.ds-card--list .ds-card__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ds-featured__title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.ds-featured__lead,
.ds-card--list .ds-card__title,
.ds-card--list .ds-card__lead {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ds-featured__title {
	font-size: var(--wp--custom--type--title-featured);
	margin: 0;
}

.ds-featured__title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.ds-featured__title a:hover {
	text-decoration: underline;
}

.ds-featured__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--body);
}

.ds-featured__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.ds-featured__body .ds-btn {
	margin-top: var(--wp--preset--spacing--20);
}

/* ── Tinted hero band (category, guide) ───────────────────────────────── */
.ds-hero-band {
	background: var(--wp--preset--color--blush);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--50) 0;
	margin-block-start: 0;
}

.ds-hero-band--center {
	text-align: center;
}

.ds-hero-band--center .ds-intro__sub {
	margin-inline: auto;
}

/* ── Article ──────────────────────────────────────────────────────────── */
.ds-article__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: var(--wp--preset--spacing--30) 0 0;
}

.ds-byline {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ds-hero-image {
	margin: 0;
	border-radius: var(--ds-radius);
	overflow: hidden;
}

/*
 * The 16:9 in the spec is a placeholder proportion. A real lead image keeps its
 * own — several posts open on a banner graphic with text in it, and cropping to
 * 16:9 cut the headline off the top.
 */
.ds-hero-image .ds-media--natural img {
	height: auto;
	object-fit: fill;
}

.ds-prose {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
}

.ds-prose > * {
	margin-block: var(--wp--preset--spacing--30);
}

.ds-prose h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--60);
}

.ds-prose h3 {
	font-size: var(--wp--preset--font-size--lede);
	margin-top: var(--wp--preset--spacing--50);
}

.ds-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ds-radius);
}

/* The opening paragraph, tagged in PHP — see inc/article.php for why not CSS. */
.ds-prose .ds-lede {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
}

.ds-prose blockquote {
	margin: var(--wp--preset--spacing--50) 0;
	padding-left: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--wp--preset--color--brand-soft);
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--custom--type--quote);
	line-height: 1.45;
	color: var(--wp--preset--color--heading);
}

.ds-prose blockquote p:last-child {
	margin-bottom: 0;
}

/* ── Product aside ────────────────────────────────────────────────────── */
.ds-product {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
	padding: 22px 24px;
	background: var(--wp--preset--color--blush);
	border-radius: var(--ds-radius);
}

.ds-product__media .ds-media {
	width: 84px;
	height: 96px;
	border-radius: 6px;
	background: var(--wp--preset--color--white);
}

.ds-product__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--heading);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ds-product__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--body);
	margin: 4px 0 0;
}

/* ── Related ("Les også") ─────────────────────────────────────────────── */
/* Width and gutter come from the .ds-shell wrapper in parts/related-posts.html. */
.ds-related {
	margin-top: var(--wp--preset--spacing--70);
}

.ds-related .ds-grid {
	margin-top: 0;
}

/* ── Dark bands (newsletter, guide kit) ───────────────────────────────── */
.ds-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
	padding: 40px 56px;
	background: var(--wp--preset--color--heading);
	border-radius: var(--ds-radius);
}

.ds-band--center {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.ds-band__title {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--white);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ds-band__sub {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--on-dark);
}

.ds-band--center .ds-btn {
	margin-top: var(--wp--preset--spacing--40);
}

.ds-band__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.ds-input {
	/*
	 * Block themes ship no global border-box reset, so a width:100% input adds
	 * its own 40px of horizontal padding on top and overflows the card it sits
	 * in. Measured on the Nyhetsbrev form before this line existed.
	 */
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--heading);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-pill);
	padding: 12px 20px;
	min-width: 220px;
}

.ds-band__form .ds-input {
	border-color: transparent;
}

/* ── Newsletter page ──────────────────────────────────────────────────── */
.ds-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.ds-checklist {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.ds-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--intro);
}

.ds-check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--ds-pill);
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--x-small);
}

.ds-signup {
	padding: 32px 36px;
}

.ds-signup__title {
	font-size: var(--wp--custom--type--step-title);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ds-signup__notice {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ds-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ds-field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

.ds-field .ds-input {
	border-radius: var(--ds-radius);
	width: 100%;
}

.ds-field__hint {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.ds-field--check label {
	flex-direction: row;
	font-weight: 400;
	color: var(--wp--preset--color--body);
}

/* ── Guide steps ──────────────────────────────────────────────────────── */
.ds-guide {
	padding-block: var(--wp--preset--spacing--60);
}

.ds-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.ds-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--wp--preset--spacing--40);
	position: relative;
}

/*
 * The connector runs from each circle to the next. Drawn on the step rather
 * than between them so the last one can switch it off without a :not() chain.
 */
.ds-step::before {
	content: "";
	position: absolute;
	top: 64px;
	bottom: calc(var(--wp--preset--spacing--50) * -1);
	left: 32px;
	width: 1px;
	background: var(--wp--preset--color--border-strong);
}

.ds-step:last-child::before {
	display: none;
}

.ds-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--ds-pill);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--brand-soft);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--brand-dark);
	position: relative;
	z-index: 1;
}

.ds-step__title {
	font-size: var(--wp--custom--type--step-title);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ds-step__body {
	font-size: var(--wp--preset--font-size--intro);
}

.ds-step__body p {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.ds-guide__intro {
	font-size: var(--wp--preset--font-size--intro);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.ds-breadcrumbs {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.ds-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-breadcrumbs__item {
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
}

.ds-breadcrumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ds-breadcrumbs a:hover {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
}

.ds-breadcrumbs__current {
	color: var(--wp--preset--color--body);
}

.ds-breadcrumbs__sep {
	margin: 0 0.55em;
	color: var(--wp--preset--color--muted);
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.ds-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.ds-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-pagination a,
.ds-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--ds-pill);
	border: 1px solid var(--wp--preset--color--border-strong);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.ds-pagination a:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ds-pagination .current {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

/* The ellipsis is not a target and should not look like one. */
.ds-pagination .dots {
	border-color: transparent;
}

.ds-count {
	margin: var(--wp--preset--spacing--50) 0 0;
}

/* ── Search form ──────────────────────────────────────────────────────── */
.ds-searchform {
	margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--list-width);
	padding-inline: var(--ds-gutter);
}

.ds-searchform .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-pill);
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

.ds-searchform .wp-block-search__button {
	border-radius: var(--ds-pill);
	padding: 12px 26px;
}

.ds-404 {
	padding-block: var(--wp--preset--spacing--70);
}

/* ── Utilities ────────────────────────────────────────────────────────── */
.screen-reader-text {
	position: absolute !important; /* the standard visually-hidden recipe */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

.skip-link:focus {
	position: fixed !important; /* overrides .screen-reader-text above, on focus only */
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	background: var(--wp--preset--color--white);
	border-radius: var(--ds-radius);
	padding: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

/* ── Tablet ───────────────────────────────────────────────────────────── */
/*
 * The featured card stacks well before the other breakpoints. Side by side, its
 * height is 16:10 of the image column — and as the card narrows that height
 * shrinks while the text column narrows too and therefore needs *more* lines, so
 * below this width the two cannot both be satisfied.
 *
 * 1240px is not a round guess: .ds-shell is 1200 of content plus a 20px gutter
 * either side, so from 1241 up the container is always *exactly* 1200 and the
 * media column always exactly 700x437.5. The side-by-side hero therefore only
 * ever exists at one geometry, which is what keeps it off the edge of its text
 * budget — growing the category badge alone was enough to tip the old 1160px
 * cutoff into a 1.58 crop. Stacked, the image is full-width 16:10 and the text
 * under it is unconstrained.
 */
@media (max-width: 1240px) {
	.ds-featured {
		grid-template-columns: 1fr;
		aspect-ratio: auto;
	}

	.ds-featured__media .ds-media {
		height: auto;
	}

	.ds-featured__title {
		-webkit-line-clamp: none;
		line-clamp: none;
	}

	.ds-featured__lead {
		-webkit-line-clamp: none;
		line-clamp: none;
	}
}

@media (max-width: 900px) {
	/*
	 * One line of lead, not two: the list card's height is fixed by its image and
	 * the text column is narrow enough here that a second line would push the row
	 * taller than 16:10.
	 */
	.ds-card--list .ds-card__lead {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	.ds-burger {
		display: inline-flex;
	}

	/*
	 * One <nav>, two presentations. Rendering a second copy of the links for
	 * mobile would announce every one of them twice to a screen reader.
	 */
	.ds-nav {
		display: none;
		order: 3;
		flex-basis: 100%;
		border-top: 1px solid var(--wp--preset--color--border);
		margin-top: var(--wp--preset--spacing--30);
	}

	.ds-nav-open .ds-nav {
		display: block;
	}

	.ds-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ds-nav__item a {
		display: block;
		padding: 13px 0;
		border-bottom: 0;
	}

	.ds-nav__item.is-current a {
		background: var(--wp--preset--color--blush);
		padding-inline: var(--ds-gutter);
		margin-inline: calc(var(--ds-gutter) * -1);
	}

	.ds-header__inner {
		flex-wrap: wrap;
	}

	.ds-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ds-split {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.ds-band {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* ── Mobile (spec §3) ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.ds-header__logo img {
		height: 28px;
	}

	/*
	 * The pill row scrolls rather than wraps, with the gutter repeated
	 * inside so the first and last item clear the screen edge (spec §3).
	 * Chip rows used to scroll too, but a hidden scrollbar in a narrow
	 * desktop window just looks like clipped content (Jone, 2026-09-02) —
	 * they wrap instead.
	 */
	.ds-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--wp--preset--spacing--20);
		margin-inline: calc(var(--ds-gutter) * -1);
		padding-inline: var(--ds-gutter);
	}

	.ds-pills::-webkit-scrollbar {
		display: none;
	}

	.ds-pills > li,
	.ds-chips > li {
		flex: 0 0 auto;
	}

	.ds-chiprow {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}

	.ds-chiprow--center {
		align-items: center;
	}

	.ds-featured {
		margin-top: var(--wp--preset--spacing--50);
	}

	.ds-featured__body {
		padding: 22px;
	}

	.ds-featured__body .ds-btn,
	.ds-band__form .ds-btn,
	.ds-band--center .ds-btn {
		width: 100%;
	}

	.ds-band {
		flex-direction: column;
		align-items: stretch;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.ds-band__form {
		flex-direction: column;
	}

	.ds-band__form .ds-input {
		min-width: 0;
		width: 100%;
	}

	/*
	 * Spec §3.2 and §3.3 draw list and related cards as the same horizontal
	 * 110px card. They stack instead: a 110px column is 69px tall at 16:10 and
	 * the text beside it is twice that, so a *filled* 16:10 image is not
	 * available in that shape at all — it is either a band floating on the tint
	 * or a crop that is not 16:10. Stacked, the image is full-width and fills.
	 */
	.ds-card--list,
	.ds-card--related {
		display: block;
		height: auto;
	}

	.ds-card--list .ds-card__media,
	.ds-card--related .ds-card__media {
		display: block;
		overflow: hidden;
		background: var(--wp--preset--color--blush);
	}

	.ds-card--list .ds-media,
	.ds-card--related .ds-media {
		width: 100%;
		height: auto;
	}

	.ds-card--list .ds-card__title,
	.ds-card--list .ds-card__lead {
		-webkit-line-clamp: none;
		line-clamp: none;
	}

	.ds-card--list .ds-card__body,
	.ds-card--related .ds-card__body {
		padding: var(--wp--preset--spacing--30);
	}

	.ds-card--list .ds-card__title,
	.ds-card--related .ds-card__title {
		font-size: var(--wp--preset--font-size--intro);
	}

	/* The lead is dropped on a 110px card — there is no room for four lines. */
	.ds-card--list .ds-card__lead {
		display: none;
	}

	.ds-grid {
		grid-template-columns: 1fr;
	}

	.ds-product {
		grid-template-columns: 84px 1fr;
	}

	.ds-product__cta {
		grid-column: 1 / -1;
	}

	.ds-product__cta .ds-btn {
		width: 100%;
	}

	.ds-step {
		grid-template-columns: 48px 1fr;
		gap: 18px;
	}

	.ds-step__number {
		width: 48px;
		height: 48px;
		font-size: var(--wp--preset--font-size--lede);
	}

	.ds-step::before {
		top: 48px;
		left: 23px;
	}

	.ds-signup {
		padding: 24px 22px;
	}

	.ds-footer__inner {
		flex-direction: column;
	}

	.ds-pagination a,
	.ds-pagination span {
		width: 44px;
		height: 44px;
	}
}

/* ── Category landing extras (inc/category-landing.php) ───────────────── */
/*
 * These render only when a category has the matching term meta filled in, so
 * most archives never show them. They are laid out on the same grid and card
 * primitives as everything above rather than on a private set.
 */
.ds-landing {
	margin-bottom: var(--wp--preset--spacing--60);
}

.ds-landing__hero {
	margin: 0 0 var(--wp--preset--spacing--50);
	border-radius: var(--ds-radius);
	overflow: hidden;
}

.ds-landing__hero img {
	display: block;
	width: 100%;
	/*
	 * height:auto is load-bearing. wp_get_attachment_image() emits width/height
	 * attributes, and the height attribute maps to the CSS height property — so
	 * without this the box takes the file's own height.
	 */
	height: auto;
}

.ds-landing__editorial {
	font-size: var(--wp--preset--font-size--intro);
	margin-bottom: var(--wp--preset--spacing--50);
}

.ds-landing__section {
	margin-bottom: var(--wp--preset--spacing--50);
}

.ds-landing__section .ds-eyebrow {
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * The "Fremhevet" section renders the homepage hero card. Its 44px top margin is
 * the homepage gap between the pill row and the hero; here the card follows its
 * own eyebrow, which already carries the spacing. A second featured post needs a
 * gap from the first, though.
 */
.ds-landing__section .ds-featured {
	margin-top: 0;
}

.ds-landing__section .ds-featured + .ds-featured {
	margin-top: var(--wp--preset--spacing--40);
}

/* ── Hub layer (term meta, gated on hub_status) ───────────────────────── */
.ds-hub-intro {
	max-width: 640px;
	font-size: var(--wp--preset--font-size--intro);
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * ...but not inside the tinted band, where the intro sits directly under a
 * full-width h1 and a 560/640px measure beside it reads as a broken column
 * rather than a deliberate one (Jone, 2026-09-03). The narrow measure stays
 * everywhere else it is used.
 */
.ds-hero-band .ds-hub-intro,
.ds-hero-band .ds-intro__sub {
	max-width: none;
}

/* The shop CTA now sits in the band with the copy it acts on. */
.ds-hub-shop {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.ds-hub-intro p {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.ds-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) 0;
}

.ds-faq__question {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	list-style-position: outside;
}

.ds-faq__question:hover {
	color: var(--wp--preset--color--primary);
}

.ds-faq__answer {
	padding-top: var(--wp--preset--spacing--20);
}

.ds-faq__answer p:last-child {
	margin-bottom: 0;
}

/* Sub-category grid — container categories present their children as cards. */
.ds-subcats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

/*
 * Cap the card so a lone sub-category stays card-shaped: auto-fit collapses the
 * empty tracks, which is what stops several cards bunching left — but with a
 * single child it would hand that one card the full column width.
 */
.ds-subcat {
	max-width: 340px;
}

.ds-subcat__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--wp--preset--color--heading);
}

.ds-subcat__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ds-subcat__title {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
}

.ds-subcat__link:hover .ds-subcat__title {
	text-decoration: underline;
}

/* ── Comments ─────────────────────────────────────────────────────────── */
/*
 * Not in the wireframe spec — but the site carries 734 approved comments and
 * their absence from the generated theme was logged as a bug in
 * docs/THEME-REVIEW.md. Kept deliberately quiet: below "Les også", on the
 * article measure, no card chrome.
 */
.ds-comments {
	margin-top: var(--wp--preset--spacing--70);
}

.ds-comment {
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.ds-comment__meta {
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

.ds-comments .wp-block-post-comments-form {
	margin-top: var(--wp--preset--spacing--50);
}

.ds-comments input:not([type="submit"]),
.ds-comments textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ds-radius);
	padding: 12px 16px;
}

.ds-comments .submit {
	border-radius: var(--ds-pill);
	padding: 12px 26px;
}

/* ── Author box + Facebook share (inc/author-box.php) ─────────────────── */
/*
 * Not in the wireframe spec. It is a port from the outgoing `_s` theme, and
 * until the render_block_core/post-content fix in inc/article.php it had never
 * actually appeared — its `in_the_loop()` guard is always false in a block
 * theme. Now that it renders, it needs to look deliberate: same measure as the
 * article, tinted panel, no card chrome competing with "Les også" below it.
 *
 * The class names are the old theme's (`author_bio_section`, `author_name`) and
 * are left alone — they are the markup inc/author-box.php emits.
 */
.ds-prose .author_bio_section {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--blush);
	border-radius: var(--ds-radius);
}

.ds-prose .author_name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--heading);
	margin: 0;
}

.ds-prose .author_details {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ds-prose .author_links {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--30) 0 0;
}

/*
 * The Facebook share iframe is a third-party embed on every article — worth
 * revisiting for the same GDPR reason the Google Fonts request is. Until then it
 * at least sits on the grid instead of floating.
 */
.ds-prose .fb-share-wrapper {
	margin-top: var(--wp--preset--spacing--50);
}