/*
Theme Name: Barista Dispatch
Theme URI: https://thebaristadispatch.com/
Author: Payton Rees
Author URI: https://thebaristadispatch.com/about-payton/
Description: A lightweight custom block theme for The Barista Dispatch — an independent barista publication covering cafe culture, drink builds, brewing education, gear, and life behind the bar. Built on Gutenberg with global styles in theme.json, no page builder, and minimal JavaScript.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barista-dispatch
Tags: blog, news, one-column, two-columns, block-patterns, full-site-editing, editor-style, custom-colors, custom-menu, featured-images, accessibility-ready, block-styles, wide-blocks, translation-ready
*/

/* ==========================================================================
   The Barista Dispatch — design system
   --------------------------------------------------------------------------
   Two visual registers, deliberately kept apart:

   1. JOURNAL — editorial content. Cream paper, Fraunces headlines, hairline
      rules, 3px radius, generous margins. Used for the hero, article bodies,
      essays, and Shift Stories.

   2. TICKET  — functional content. Sunk paper stock, torn top/bottom edges,
      dashed perforation rules, tight spec rows. Used for recipe cards, cafe
      review specs, gear specs, and the newsletter signup.

   Handwriting (Caveat) appears in exactly three roles: the name on the cup,
   barista notes, and pull-quote attribution. Nowhere else.

   Colour tokens come from theme.json. Contrast is verified against the paper
   and paper-sunk grounds:
     charcoal / paper        14.50  AAA
     espresso / paper        13.54  AAA
     terracotta-deep / paper  6.27  AA
     sage-deep / paper        6.23  AA
     ink-muted / paper        5.61  AA
   `sage` (3.77) and `terracotta` (4.18 on sunk) are LARGE-TEXT OR GRAPHIC ONLY.
   Use the -deep variants for any body-size text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Local tokens
   -------------------------------------------------------------------------- */

:root {
	--bd-paper: var( --wp--preset--color--paper, #faf6ee );
	--bd-paper-sunk: var( --wp--preset--color--paper-sunk, #f0e8d9 );
	--bd-espresso: var( --wp--preset--color--espresso, #3b2317 );
	--bd-charcoal: var( --wp--preset--color--charcoal, #262320 );
	--bd-ink-muted: var( --wp--preset--color--ink-muted, #6b6157 );
	--bd-rule: var( --wp--preset--color--rule, #dcd2c0 );
	--bd-sage: var( --wp--preset--color--sage, #6f8467 );
	--bd-sage-deep: var( --wp--preset--color--sage-deep, #4e6147 );
	--bd-terracotta: var( --wp--preset--color--terracotta, #b4502f );
	--bd-terracotta-deep: var( --wp--preset--color--terracotta-deep, #9a3f22 );

	--bd-font-display: var( --wp--preset--font-family--display, Fraunces, serif );
	--bd-font-body: var( --wp--preset--font-family--body, Karla, sans-serif );
	--bd-font-hand: var( --wp--preset--font-family--hand, Caveat, cursive );

	--bd-radius-card: 3px;
	--bd-radius-ticket: 2px;
	--bd-tear-height: 9px;

	--bd-transition: 140ms ease-out;
}

/* Paper grain. One tile, one layer, ~3% — felt rather than seen. */
body {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E" );
	background-repeat: repeat;
	background-size: 180px 180px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sections that set their own dark ground shouldn't show the page grain. */
.has-espresso-background-color,
.has-charcoal-background-color {
	background-image: none;
}

/* --------------------------------------------------------------------------
   2. Accessibility baseline
   -------------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --bd-terracotta-deep );
	outline-offset: 2px;
	border-radius: 1px;
}

.has-espresso-background-color :focus-visible,
.has-charcoal-background-color :focus-visible,
.bd-footer :focus-visible {
	outline-color: var( --bd-paper );
}

.skip-link,
.bd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var( --bd-espresso );
	color: var( --bd-paper );
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

/* Core adds `screen-reader-text` to its skip link; unwind it on focus. */
.skip-link:focus,
.bd-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.screen-reader-text,
.bd-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Keep long editorial words from breaking narrow layouts. */
h1,
h2,
h3,
h4,
p,
li {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   3. Typographic refinements
   -------------------------------------------------------------------------- */

/* Fraunces carries optical sizing; let the browser use it. */
h1,
h2,
h3,
h4,
.bd-display {
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 50, "WONK" 1;
}

/* Article body measure and rhythm. */
.bd-prose > * + * {
	margin-block-start: 1.4em;
}

.bd-prose h2 {
	margin-block-start: 2.2em;
}

.bd-prose h3 {
	margin-block-start: 1.8em;
}

.bd-prose li + li {
	margin-block-start: 0.4em;
}

/* Handwritten accent — three sanctioned roles only. */
.bd-hand {
	font-family: var( --bd-font-hand );
	font-size: 1.4em;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var( --bd-terracotta-deep );
}

/* --------------------------------------------------------------------------
   4. Section markers and chips
   -------------------------------------------------------------------------- */

/* Sentence case, not a tracked-out all-caps eyebrow. The rule to the right
   does the structural work instead. */
.bd-section-head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-block-end: var( --wp--preset--spacing--40, 1.75rem );
}

.bd-section-head__title {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--x-large, 1.875rem );
	font-weight: 600;
	line-height: 1.1;
	color: var( --bd-espresso );
	white-space: nowrap;
}

.bd-section-head__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var( --bd-rule );
	transform: translateY( -0.25em );
}

.bd-section-head__link {
	flex: 0 0 auto;
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --bd-terracotta-deep );
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
}

.bd-section-head__link:hover,
.bd-section-head__link:focus-visible {
	border-bottom-color: currentColor;
}

@media ( max-width: 40rem ) {
	.bd-section-head__title {
		white-space: normal;
	}

	.bd-section-head__rule {
		display: none;
	}
}

/* Category chip — shaped like the corner of a torn ticket stub. */
.bd-chip {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	font-family: var( --bd-font-body );
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var( --bd-espresso );
	text-decoration: none;
	background: var( --bd-paper-sunk );
	border: 1px solid var( --bd-rule );
	border-radius: 2px 2px 2px 0;
}

.bd-chip:hover,
.bd-chip:focus-visible {
	color: var( --bd-paper );
	background: var( --bd-terracotta-deep );
	border-color: var( --bd-terracotta-deep );
}

.bd-chip--sage:hover,
.bd-chip--sage:focus-visible {
	background: var( --bd-sage-deep );
	border-color: var( --bd-sage-deep );
}

/* --------------------------------------------------------------------------
   5. Meta lines
   -------------------------------------------------------------------------- */

/* Meta items separated by a thin rule, not middle dots. */
.bd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	font-family: var( --bd-font-body );
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --bd-ink-muted );
}

.bd-meta > * {
	margin: 0;
}

.bd-meta__sep {
	display: inline-block;
	width: 1px;
	height: 0.85em;
	background: var( --bd-rule );
}

.bd-meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var( --bd-rule );
}

.bd-meta a:hover,
.bd-meta a:focus-visible {
	color: var( --bd-terracotta-deep );
	border-bottom-color: currentColor;
}

.bd-byline__name {
	font-weight: 700;
	color: var( --bd-charcoal );
}

.bd-updated {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.bd-header {
	border-bottom: 1px solid var( --bd-rule );
	background: var( --bd-paper );
}

.bd-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.bd-masthead__brand .wp-block-site-title {
	line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Site logo.

   The lockup already contains the wordmark, so showing the text title
   alongside it prints the name twice. When a logo is set, the title is
   removed rather than hidden off-screen: the logo's own alt text carries the
   site name into the accessibility tree, and a visually-hidden duplicate
   would just make a screen reader read it twice.

   :has() is the switch. Where it is unsupported the title simply stays
   visible, which is a tidy fallback rather than a broken masthead.
   -------------------------------------------------------------------------- */
.bd-masthead__logo {
	margin: 0;
}

.bd-masthead__logo img {
	display: block;
	width: auto;
	max-width: min( 214px, 62vw );
	height: auto;
}

.bd-masthead__brand:has( .bd-masthead__logo img ) .bd-masthead__title {
	display: none;
}

@media ( max-width: 46rem ) {
	.bd-masthead__logo img {
		max-width: min( 172px, 58vw );
	}
}

.bd-masthead__tagline {
	margin: 0.15rem 0 0;
	font-family: var( --bd-font-hand );
	font-size: 1.0625rem;
	line-height: 1.15;
	color: var( --bd-ink-muted );
}

@media ( max-width: 46rem ) {
	.bd-masthead__tagline {
		display: none;
	}
}

/* Core's navigation block handles the mobile overlay and its own JS. */
.bd-nav .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}

.bd-nav .wp-block-navigation-item__content:hover,
.bd-nav .wp-block-navigation-item__content:focus-visible {
	color: var( --bd-terracotta-deep );
	border-bottom-color: currentColor;
}

.bd-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var( --bd-espresso );
	border-bottom-color: var( --bd-terracotta );
}

.bd-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --bd-paper );
	padding-top: 4rem;
}

.bd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var( --bd-font-display );
	font-size: 1.5rem;
	font-weight: 600;
	color: var( --bd-espresso );
}

/* --------------------------------------------------------------------------
   7. Hero — the newest article
   --------------------------------------------------------------------------
   Asymmetric: image sits right and bleeds; the headline plate overlaps it
   from the left at desktop. Stacks cleanly on small screens.
   -------------------------------------------------------------------------- */

.bd-hero {
	position: relative;
}

.bd-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--30, 1.25rem );
	align-items: center;
}

.bd-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var( --bd-radius-card );
}

.bd-hero__plate {
	background: var( --bd-paper );
	border-radius: var( --bd-radius-card );
}

.bd-hero__title {
	margin: 0.5rem 0 0;
	font-size: var( --wp--preset--font-size--hero, 3rem );
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.bd-hero__title a {
	color: var( --bd-espresso );
	text-decoration: none;
}

.bd-hero__title a:hover,
.bd-hero__title a:focus-visible {
	color: var( --bd-terracotta-deep );
}

.bd-hero__standfirst {
	margin: 1rem 0 0;
	max-width: 34rem;
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	line-height: 1.45;
	color: var( --bd-charcoal );
}

@media ( min-width: 60rem ) {
	.bd-hero__grid {
		grid-template-columns: minmax( 0, 27rem ) minmax( 0, 1fr );
		gap: 0;
	}

	.bd-hero__plate {
		grid-column: 1;
		grid-row: 1;
		z-index: 2;
		padding: var( --wp--preset--spacing--50, 2.5rem );
		margin-right: -4rem;
		box-shadow: var( --wp--preset--shadow--lift );
	}

	.bd-hero__media {
		grid-column: 2;
		grid-row: 1;
	}

	.bd-hero__media img {
		aspect-ratio: 4 / 3;
	}
}

/* --------------------------------------------------------------------------
   8. Journal register — article cards
   -------------------------------------------------------------------------- */

.bd-grid {
	display: grid;
	gap: var( --wp--preset--spacing--50, 2.5rem );
	grid-template-columns: 1fr;
}

@media ( min-width: 34rem ) {
	.bd-grid--2,
	.bd-grid--3,
	.bd-grid--4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 56rem ) {
	.bd-grid--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

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

.bd-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.bd-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var( --bd-radius-card );
	background: var( --bd-paper-sunk );
}

.bd-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var( --bd-transition );
}

.bd-card__title {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.bd-card__title a {
	color: var( --bd-espresso );
	text-decoration: none;
}

.bd-card__title a:hover,
.bd-card__title a:focus-visible {
	color: var( --bd-terracotta-deep );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bd-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --bd-ink-muted );
}

/* A single restrained lift, only where a card is genuinely a discrete object. */
.bd-card--boxed {
	padding: var( --wp--preset--spacing--40, 1.75rem );
	background: var( --bd-paper );
	border: 1px solid var( --bd-rule );
	border-radius: var( --bd-radius-card );
}

/* --------------------------------------------------------------------------
   9. Ruled list — Shift Stories (deliberately not cards)
   -------------------------------------------------------------------------- */

.bd-ruled-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --bd-rule );
}

.bd-ruled-list__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.35rem;
	padding: var( --wp--preset--spacing--30, 1.25rem ) 0;
	border-bottom: 1px solid var( --bd-rule );
}

@media ( min-width: 48rem ) {
	.bd-ruled-list__item {
		grid-template-columns: 7rem minmax( 0, 1fr ) auto;
		gap: 0 1.5rem;
		align-items: baseline;
	}
}

.bd-ruled-list__title {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	font-weight: 500;
	line-height: 1.2;
}

.bd-ruled-list__title a {
	color: var( --bd-espresso );
	text-decoration: none;
}

.bd-ruled-list__title a:hover,
.bd-ruled-list__title a:focus-visible {
	color: var( --bd-terracotta-deep );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bd-ruled-list__meta {
	font-size: 0.8125rem;
	color: var( --bd-ink-muted );
}

/* Faint ruled-notebook ground, only on this section. */
.bd-notebook {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 2.05rem,
		rgba( 111, 132, 103, 0.16 ) 2.05rem,
		rgba( 111, 132, 103, 0.16 ) calc( 2.05rem + 1px )
	);
}

/* --------------------------------------------------------------------------
   10. Ticket register
   --------------------------------------------------------------------------
   Torn top and bottom edges via an SVG mask on pseudo-elements. The strips
   take `background-color: inherit`, so a ticket can be recoloured with a
   single declaration and the tears follow.
   -------------------------------------------------------------------------- */

.bd-ticket {
	position: relative;
	background-color: var( --bd-paper-sunk );
	border-radius: var( --bd-radius-ticket );
	box-shadow: var( --wp--preset--shadow--ticket );
	padding: var( --wp--preset--spacing--50, 2.5rem ) var( --wp--preset--spacing--40, 1.75rem );
}

.bd-ticket::before,
.bd-ticket::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var( --bd-tear-height );
	background-color: inherit;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9 9 L18 0 Z' fill='%23000'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9 9 L18 0 Z' fill='%23000'/%3E%3C/svg%3E" );
	-webkit-mask-size: 18px var( --bd-tear-height );
	mask-size: 18px var( --bd-tear-height );
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	pointer-events: none;

	/* Off by default; the @supports block below switches them on. Without a
	   working mask these would render as plain bars stuck to the card. */
	display: none;
}

.bd-ticket::before {
	top: calc( var( --bd-tear-height ) * -1 + 1px );
	transform: scaleY( -1 );
}

.bd-ticket::after {
	bottom: calc( var( --bd-tear-height ) * -1 + 1px );
}

@supports ( mask-image: linear-gradient( #000, #000 ) ) or ( -webkit-mask-image: linear-gradient( #000, #000 ) ) {
	.bd-ticket::before,
	.bd-ticket::after,
	.is-style-bd-ticket::before,
	.is-style-bd-ticket::after {
		display: block;
	}
}


.bd-ticket__perf {
	height: 0;
	margin: var( --wp--preset--spacing--30, 1.25rem ) 0;
	border: 0;
	border-top: 1px dashed var( --bd-rule );
}

/* Spec rows: label left, value right, dotted leader between. */
.bd-spec {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.bd-spec__row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.3rem 0;
}

.bd-spec__row + .bd-spec__row {
	border-top: 1px dotted var( --bd-rule );
}

.bd-spec__label {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 700;
	color: var( --bd-espresso );
}

.bd-spec__value {
	flex: 1 1 auto;
	margin: 0;
	text-align: right;
	color: var( --bd-charcoal );
}

@media ( max-width: 30rem ) {
	.bd-spec__row {
		flex-direction: column;
		gap: 0.1rem;
	}

	.bd-spec__value {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   11. Recipe card — the one bold move
   -------------------------------------------------------------------------- */

.bd-recipe {
	--bd-tear-height: 10px;
	max-width: 34rem;
	margin-inline: auto;
}

.bd-recipe__head {
	text-align: center;
}

.bd-recipe__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --bd-ink-muted );
}

/* The drink name, written on the cup. */
.bd-recipe__name {
	margin: 0.15rem 0 0;
	font-family: var( --bd-font-hand );
	font-size: clamp( 2.25rem, 7vw, 3rem );
	font-weight: 700;
	line-height: 1.05;
	color: var( --bd-espresso );
}

.bd-recipe__description {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --bd-charcoal );
}

.bd-recipe__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.bd-recipe__tag {
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var( --bd-espresso );
	background: var( --bd-paper );
	border: 1px solid var( --bd-rule );
	border-radius: 999px;
}

.bd-recipe__tag--hot {
	color: var( --bd-paper );
	background: var( --bd-terracotta-deep );
	border-color: var( --bd-terracotta-deep );
}

.bd-recipe__tag--iced {
	color: var( --bd-paper );
	background: var( --bd-sage-deep );
	border-color: var( --bd-sage-deep );
}

.bd-recipe__subhead {
	margin: 0 0 0.5rem;
	font-family: var( --bd-font-body );
	font-size: 0.875rem;
	font-weight: 700;
	color: var( --bd-espresso );
}

.bd-recipe__list {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.bd-recipe__list li + li {
	margin-top: 0.3rem;
}

.bd-recipe__steps {
	margin: 0;
	padding-left: 1.3rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.bd-recipe__steps li {
	padding-left: 0.25rem;
}

.bd-recipe__steps li + li {
	margin-top: 0.6rem;
}

.bd-recipe__steps li::marker {
	font-weight: 700;
	color: var( --bd-terracotta-deep );
}

.bd-recipe__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--30, 1.25rem );
}

@media ( min-width: 34rem ) {
	.bd-recipe__columns {
		grid-template-columns: 1fr 1fr;
		gap: var( --wp--preset--spacing--40, 1.75rem );
	}
}

/* Barista notes — handwriting role two. */
.bd-recipe__notes {
	padding: 0.75rem 0.9rem;
	background: var( --bd-paper );
	border-left: 3px solid var( --bd-terracotta );
	border-radius: 0 2px 2px 0;
}

.bd-recipe__notes p {
	margin: 0;
	font-family: var( --bd-font-hand );
	font-size: 1.3125rem;
	line-height: 1.25;
	color: var( --bd-charcoal );
}

.bd-recipe__notes p + p {
	margin-top: 0.35rem;
}

.bd-recipe__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.bd-recipe__disclaimer {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var( --bd-ink-muted );
}

.bd-print-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	font-family: var( --bd-font-body );
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --bd-espresso );
	cursor: pointer;
	background: transparent;
	border: 1px solid var( --bd-espresso );
	border-radius: 2px;
	transition: background var( --bd-transition ), color var( --bd-transition );
}

.bd-print-button:hover,
.bd-print-button:focus-visible {
	color: var( --bd-paper );
	background: var( --bd-espresso );
}

/* Hidden until progressive enhancement confirms printing is available. */
.bd-print-button[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   12. Cafe review
   -------------------------------------------------------------------------- */

.bd-review {
	--bd-tear-height: 9px;
}

.bd-review__name {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--x-large, 1.875rem );
	font-weight: 600;
	line-height: 1.1;
	color: var( --bd-espresso );
}

.bd-review__place {
	margin: 0.2rem 0 0;
	font-size: 0.9375rem;
	color: var( --bd-ink-muted );
}

.bd-review__criteria {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--30, 1.25rem );
}

@media ( min-width: 40rem ) {
	.bd-review__criteria {
		grid-template-columns: 1fr 1fr;
	}
}

.bd-review__criterion h4 {
	margin: 0 0 0.25rem;
	font-family: var( --bd-font-body );
	font-size: 0.875rem;
	font-weight: 700;
	color: var( --bd-espresso );
}

.bd-review__criterion p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.bd-review__verdict {
	padding: var( --wp--preset--spacing--30, 1.25rem );
	background: var( --bd-paper );
	border-radius: 2px;
}

.bd-review__verdict h4 {
	margin: 0 0 0.35rem;
	font-family: var( --bd-font-body );
	font-size: 0.875rem;
	font-weight: 700;
	color: var( --bd-espresso );
}

.bd-review__verdict p {
	margin: 0;
	line-height: 1.6;
}

.bd-review__disclosure {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --bd-ink-muted );
}

/* --------------------------------------------------------------------------
   13. Callouts — tip and warning
   -------------------------------------------------------------------------- */

.bd-callout {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0.85rem;
	padding: var( --wp--preset--spacing--30, 1.25rem );
	border-radius: var( --bd-radius-card );
}

.bd-callout__mark {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	color: var( --bd-paper );
	border-radius: 50%;
}

.bd-callout__body > :first-child {
	margin-top: 0;
}

.bd-callout__body > :last-child {
	margin-bottom: 0;
}

.bd-callout__title {
	margin: 0 0 0.2rem;
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
}

.bd-callout p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.bd-callout--tip {
	background: rgba( 111, 132, 103, 0.12 );
	border-left: 3px solid var( --bd-sage-deep );
}

.bd-callout--tip .bd-callout__mark {
	background: var( --bd-sage-deep );
}

.bd-callout--tip .bd-callout__title {
	color: var( --bd-sage-deep );
}

.bd-callout--warning {
	background: rgba( 180, 80, 47, 0.1 );
	border-left: 3px solid var( --bd-terracotta-deep );
}

.bd-callout--warning .bd-callout__mark {
	background: var( --bd-terracotta-deep );
}

.bd-callout--warning .bd-callout__title {
	color: var( --bd-terracotta-deep );
}

/* --------------------------------------------------------------------------
   14. Pull quote — handwriting role three (attribution only)
   -------------------------------------------------------------------------- */

.bd-pullquote {
	margin: var( --wp--preset--spacing--50, 2.5rem ) 0;
	padding: 0 0 0 var( --wp--preset--spacing--40, 1.75rem );
	border-left: 3px solid var( --bd-terracotta );
}

.bd-pullquote p {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--x-large, 1.875rem );
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.012em;
	color: var( --bd-espresso );
	text-wrap: balance;
}

.bd-pullquote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var( --bd-font-hand );
	font-size: 1.3125rem;
	font-style: normal;
	color: var( --bd-ink-muted );
}

/* --------------------------------------------------------------------------
   15. Equipment / gear
   -------------------------------------------------------------------------- */

.bd-gear {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--40, 1.75rem );
}

@media ( min-width: 40rem ) {
	.bd-gear--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.bd-gear__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var( --wp--preset--spacing--30, 1.25rem );
	background: var( --bd-paper );
	border: 1px solid var( --bd-rule );
	border-radius: var( --bd-radius-card );
}

.bd-gear__role {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var( --bd-sage-deep );
}

.bd-gear__name {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --bd-espresso );
}

.bd-gear__why {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --bd-charcoal );
}

.bd-gear__price {
	margin: 0;
	font-size: 0.8125rem;
	color: var( --bd-ink-muted );
}

/* --------------------------------------------------------------------------
   16. Newsletter
   -------------------------------------------------------------------------- */

.bd-newsletter {
	--bd-tear-height: 10px;
	max-width: 38rem;
	margin-inline: auto;
	text-align: center;
}

.bd-newsletter__title {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--xx-large, 2.25rem );
	font-weight: 600;
	line-height: 1.08;
	color: var( --bd-espresso );
}

.bd-newsletter__copy {
	max-width: 30rem;
	margin: 0.65rem auto 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --bd-charcoal );
}

.bd-newsletter__form-slot {
	margin-top: var( --wp--preset--spacing--30, 1.25rem );
}

.bd-newsletter__note {
	margin: 0.85rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --bd-ink-muted );
}

/* --------------------------------------------------------------------------
   17. Breadcrumbs, share, related, sources
   -------------------------------------------------------------------------- */

.bd-breadcrumbs {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --bd-ink-muted );
}

.bd-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var( --bd-rule );
}

.bd-breadcrumbs a:hover,
.bd-breadcrumbs a:focus-visible {
	color: var( --bd-terracotta-deep );
}

.bd-breadcrumbs li[aria-current="page"] {
	color: var( --bd-charcoal );
}

.bd-breadcrumbs__sep {
	color: var( --bd-rule );
}

.bd-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.bd-share__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --bd-ink-muted );
}

.bd-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.7rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --bd-espresso );
	text-decoration: none;
	background: var( --bd-paper );
	border: 1px solid var( --bd-rule );
	border-radius: 2px;
}

.bd-share__link:hover,
.bd-share__link:focus-visible {
	color: var( --bd-paper );
	background: var( --bd-espresso );
	border-color: var( --bd-espresso );
}

.bd-sources {
	padding: var( --wp--preset--spacing--30, 1.25rem );
	background: var( --bd-paper-sunk );
	border-radius: var( --bd-radius-card );
}

.bd-sources h2,
.bd-sources h3 {
	margin: 0 0 0.5rem;
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
	color: var( --bd-espresso );
}

.bd-sources ol,
.bd-sources ul {
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   18. Author bio / About
   -------------------------------------------------------------------------- */

.bd-author-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--30, 1.25rem );
	align-items: start;
	padding: var( --wp--preset--spacing--40, 1.75rem );
	background: var( --bd-paper-sunk );
	border-radius: var( --bd-radius-card );
}

@media ( min-width: 34rem ) {
	.bd-author-card {
		grid-template-columns: 6.5rem minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--40, 1.75rem );
	}
}

.bd-author-card__portrait img {
	display: block;
	width: 100%;
	max-width: 6.5rem;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.bd-author-card__name {
	margin: 0;
	font-family: var( --bd-font-display );
	font-size: 1.375rem;
	font-weight: 600;
	color: var( --bd-espresso );
}

.bd-author-card__role {
	margin: 0.1rem 0 0.5rem;
	font-family: var( --bd-font-hand );
	font-size: 1.25rem;
	color: var( --bd-terracotta-deep );
}

.bd-author-card__bio {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   19. Social placeholder grid
   -------------------------------------------------------------------------- */

.bd-social-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
}

@media ( min-width: 40rem ) {
	.bd-social-grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.bd-social-grid__cell {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var( --bd-ink-muted );
	text-align: center;
	background: var( --bd-paper-sunk );
	border: 1px dashed var( --bd-rule );
	border-radius: var( --bd-radius-card );
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */

.bd-footer {
	color: rgba( 250, 246, 238, 0.82 );
	background-color: var( --bd-espresso );
}

.bd-footer h2,
.bd-footer h3,
.bd-footer .bd-footer__brand {
	color: var( --bd-paper );
}

.bd-footer a {
	color: rgba( 250, 246, 238, 0.82 );
	text-decoration: none;
	border-bottom: 1px solid rgba( 250, 246, 238, 0.25 );
}

.bd-footer a:hover,
.bd-footer a:focus-visible {
	color: var( --bd-paper );
	border-bottom-color: var( --bd-paper );
}

.bd-footer__brand {
	font-family: var( --bd-font-display );
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.bd-footer__tagline {
	font-family: var( --bd-font-hand );
	font-size: 1.25rem;
	color: rgba( 250, 246, 238, 0.7 );
}

.bd-footer__heading {
	margin: 0 0 0.6rem;
	font-family: var( --bd-font-body );
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --bd-paper );
}

.bd-footer__list {
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.9;
	list-style: none;
}

.bd-footer__colophon {
	padding-top: var( --wp--preset--spacing--30, 1.25rem );
	font-size: 0.8125rem;
	border-top: 1px solid rgba( 250, 246, 238, 0.18 );
}

/* --------------------------------------------------------------------------
   21. Pagination, search, comments, 404
   -------------------------------------------------------------------------- */

.wp-block-query-pagination {
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 600;
}

.wp-block-query-pagination .page-numbers {
	padding: 0.35rem 0.6rem;
	color: var( --bd-charcoal );
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 2px;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers:focus-visible {
	border-color: var( --bd-rule );
}

.wp-block-query-pagination .page-numbers.current {
	color: var( --bd-paper );
	background: var( --bd-espresso );
}

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font-family: var( --bd-font-body );
	font-size: 1rem;
	color: var( --bd-charcoal );
	background: var( --bd-paper );
	border: 1px solid var( --bd-rule );
	border-radius: 2px;
}

.wp-block-search__input::placeholder,
input::placeholder,
textarea::placeholder {
	color: var( --bd-ink-muted );
	opacity: 1;
}

.wp-block-search__button {
	padding: 0.6rem 1rem;
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
	color: var( --bd-paper );
	cursor: pointer;
	background: var( --bd-espresso );
	border: 1px solid var( --bd-espresso );
	border-radius: 2px;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
	background: var( --bd-terracotta-deep );
	border-color: var( --bd-terracotta-deep );
}

.wp-block-post-comments-form .comment-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.875rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   22. Print — isolate the recipe when the print button is used
   -------------------------------------------------------------------------- */

@media print {
	body {
		background: #fff;
		background-image: none;
		color: #000;
		font-size: 11pt;
	}

	.bd-header,
	.bd-footer,
	.bd-share,
	.bd-newsletter,
	.bd-social-grid,
	.bd-print-button,
	.wp-block-query-pagination,
	.wp-block-post-comments-form {
		display: none !important;
	}

	.bd-ticket {
		box-shadow: none;
		border: 1px solid #999;
		background-color: #fff !important;
	}

	.bd-ticket::before,
	.bd-ticket::after {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.bd-recipe {
		max-width: none;
		page-break-inside: avoid;
	}

	/* When a recipe is printed from its button, drop everything else. */
	.bd-printing-recipe .bd-print-hide {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   23. Editor block-style aliases
   --------------------------------------------------------------------------
   Registered block styles emit `is-style-*`. Alias them onto the semantic
   design-system classes so one rule set serves both patterns and editor picks.
   -------------------------------------------------------------------------- */

.is-style-bd-ticket {
	position: relative;
	background-color: var( --bd-paper-sunk );
	border-radius: var( --bd-radius-ticket );
	box-shadow: var( --wp--preset--shadow--ticket );
}

.is-style-bd-ticket::before,
.is-style-bd-ticket::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var( --bd-tear-height );
	background-color: inherit;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9 9 L18 0 Z' fill='%23000'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9 9 L18 0 Z' fill='%23000'/%3E%3C/svg%3E" );
	-webkit-mask-size: 18px var( --bd-tear-height );
	mask-size: 18px var( --bd-tear-height );
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	pointer-events: none;
	display: none;
}

.is-style-bd-ticket::before {
	top: calc( var( --bd-tear-height ) * -1 + 1px );
	transform: scaleY( -1 );
}

.is-style-bd-ticket::after {
	bottom: calc( var( --bd-tear-height ) * -1 + 1px );
}

.is-style-bd-card-boxed {
	background: var( --bd-paper );
	border: 1px solid var( --bd-rule );
	border-radius: var( --bd-radius-card );
}

.is-style-bd-notebook {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 2.05rem,
		rgba( 111, 132, 103, 0.16 ) 2.05rem,
		rgba( 111, 132, 103, 0.16 ) calc( 2.05rem + 1px )
	);
}

.wp-block-quote.is-style-bd-pullquote {
	padding: 0 0 0 var( --wp--preset--spacing--40, 1.75rem );
	border-left: 3px solid var( --bd-terracotta );
}

.wp-block-quote.is-style-bd-pullquote p {
	font-family: var( --bd-font-display );
	font-size: var( --wp--preset--font-size--x-large, 1.875rem );
	font-weight: 500;
	line-height: 1.24;
	color: var( --bd-espresso );
	text-wrap: balance;
}

.wp-block-quote.is-style-bd-pullquote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var( --bd-font-hand );
	font-size: 1.3125rem;
	font-style: normal;
	color: var( --bd-ink-muted );
}

.wp-block-list.is-style-bd-steps {
	padding-left: 1.3rem;
	counter-reset: bd-step;
}

.wp-block-list.is-style-bd-steps > li {
	padding-left: 0.25rem;
}

.wp-block-list.is-style-bd-steps > li + li {
	margin-top: 0.6rem;
}

.wp-block-list.is-style-bd-steps > li::marker {
	font-weight: 700;
	color: var( --bd-terracotta-deep );
}

/* --------------------------------------------------------------------------
   24. Newsletter form
   -------------------------------------------------------------------------- */

.bd-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: var( --wp--preset--spacing--30, 1.25rem );
}

.bd-newsletter__input {
	flex: 1 1 16rem;
	min-width: 0;
	max-width: 22rem;
}

.bd-newsletter__submit {
	flex: 0 0 auto;
	padding: 0.65rem 1.4rem;
	font-family: var( --bd-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
	color: var( --bd-paper );
	cursor: pointer;
	background: var( --bd-espresso );
	border: 1px solid var( --bd-espresso );
	border-radius: 2px;
	transition: background var( --bd-transition );
}

.bd-newsletter__submit:hover,
.bd-newsletter__submit:focus-visible {
	background: var( --bd-terracotta-deep );
	border-color: var( --bd-terracotta-deep );
}

/* Shown to editors until a provider URL is configured. */
.bd-newsletter__setup {
	margin: var( --wp--preset--spacing--30, 1.25rem ) 0 0;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --bd-ink-muted );
	background: var( --bd-paper );
	border: 1px dashed var( --bd-rule );
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   25. Query-loop plumbing
   --------------------------------------------------------------------------
   core/post-template renders a <ul>. These rules let the theme's grid and
   ruled-list classes sit on that <ul> without fighting core's list styling.
   -------------------------------------------------------------------------- */

.wp-block-post-template.bd-grid,
.wp-block-post-template.bd-ruled-list,
.bd-hero .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-post-template.bd-grid > li,
.bd-hero .wp-block-post-template > li {
	min-width: 0;
}

/* Query blocks add no visual box of their own. */
.wp-block-query > .wp-block-post-template {
	max-width: 100%;
}

/* Featured-image figures inside cards should not carry core's default margin. */
.bd-card .wp-block-post-featured-image,
.bd-hero .wp-block-post-featured-image {
	margin: 0;
}

/* The excerpt block's "read more" link has no place in a standfirst. */
.bd-standfirst .wp-block-post-excerpt__more-link,
.bd-hero__standfirst .wp-block-post-excerpt__more-link,
.bd-card__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

.bd-standfirst {
	max-width: 38rem;
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	line-height: 1.45;
	color: var( --bd-charcoal );
}

/* --------------------------------------------------------------------------
   26. Header search
   -------------------------------------------------------------------------- */

.bd-header__search {
	margin: 0;
}

.bd-header__search .wp-block-search__button {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	min-height: 2.4rem;
	padding: 0.35rem;
}

.bd-header__search .wp-block-search__button svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   27. Article scaffolding
   -------------------------------------------------------------------------- */

.bd-article-header {
	max-width: 42rem;
}

.bd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.bd-article-title {
	margin-block: 0.3em 0;
	text-wrap: balance;
}

.bd-article-featured img {
	width: 100%;
	height: auto;
}

.bd-related {
	margin-top: var( --wp--preset--spacing--60, 4rem );
}

.bd-comments {
	max-width: 42rem;
}

/* --------------------------------------------------------------------------
   28. Remaining article components
   -------------------------------------------------------------------------- */

.bd-intro-summary {
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	line-height: 1.5;
	color: var( --bd-espresso );
}

.bd-cafe-info {
	--bd-tear-height: 8px;

	max-width: 30rem;
}

.bd-cafe-info .bd-review__name {
	margin-bottom: 0.5rem;
}

.bd-brew-steps .bd-spec {
	margin-block: 0 var( --wp--preset--spacing--30, 1.25rem );
	padding: var( --wp--preset--spacing--30, 1.25rem );
	background: var( --bd-paper-sunk );
	border-radius: var( --bd-radius-card );
}

/* Definition lists used for spec rows need their default indent removed. */
.bd-spec dd {
	margin-inline-start: 0;
}

/* Social links on the About page. */
.wp-block-social-links.is-style-logos-only .wp-social-link {
	padding: 0;
}