style.css

/*
Theme Name: Peppermint
Author: DSA National Tech Committee
Author URI: https://www.dsausa.org/
Description: A minimal, flexible block theme for organizing sites, with patterns, templates, and Global Styles.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.5
Version: 2.4.0
Text Domain: peppermint
Domain Path: /languages
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, editor-style, featured-images, translation-ready, wide-blocks
*/

:root {
	--peppermint-rule: 2px solid var(--wp--preset--color--contrast);
	--peppermint-soft-rule: 1px solid var(--wp--preset--color--line);
}

:root[data-peppermint-color-scheme="light"] {
	color-scheme: light;
}

:root[data-peppermint-color-scheme="dark"] {
	color-scheme: dark;
}

/*
 * Give browsers without light-dark() (Safari before 17.5) the light palette,
 * and keep the page light over a saved or site-wide dark choice.
 * A custom property accepts any value, so a plain earlier declaration would
 * always lose to the theme.json value. Keep these in step with theme.json.
 */
@supports not (color: light-dark(#fff, #000)) {
	:root,
	:root[data-peppermint-color-scheme] {
		color-scheme: light;
		--wp--preset--color--base: #FFFFFF;
		--wp--preset--color--base-2: #F7F3F4;
		--wp--preset--color--contrast: #231F20;
		--wp--preset--color--contrast-2: #514B4D;
		--wp--preset--color--accent: #D71920;
		--wp--preset--color--accent-contrast: #FFFFFF;
		--wp--preset--color--line: #777173;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
}

.wp-site-blocks {
	display: flex;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > header,
.wp-site-blocks > footer {
	flex: 0 0 auto;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 0.14em;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

input,
select,
textarea {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--contrast-2);
	opacity: 1;
}

.site-topbar {
	border-bottom: 0.4rem solid var(--wp--preset--color--dsa-red);
}

.topbar-logo img {
	display: block;
}

.topbar-inner {
	flex-wrap: wrap;
}

.topbar-brand {
	flex: 1 1 12rem;
	min-inline-size: 0;
}

/* Headers with a button let the title wrap sooner, so the tools stay on the title's row. */
.topbar-inner:has(.topbar-actions) .topbar-brand {
	flex-basis: 8rem;
}

.topbar-actions .wp-block-button__link {
	padding-block: 0.6em;
	padding-inline: 1em;
	white-space: nowrap;
}

.topbar-title {
	max-width: 21ch;
	margin: 0;
	letter-spacing: -0.025em;
}

.topbar-title a {
	color: inherit;
	text-decoration: none;
}

.topbar-navigation {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.topbar-tools {
	flex: 0 1 auto;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.topbar-inner > .topbar-tools {
	margin-inline-start: auto;
}

.wp-block-peppermint-theme-switcher {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	line-height: 1;
}

.peppermint-theme-switcher[hidden] {
	display: none;
}

/* Without light-dark() the page stays light, so there is nothing to switch. */
@supports not (color: light-dark(#fff, #000)) {
	.wp-block-peppermint-theme-switcher {
		display: none;
	}
}

.peppermint-theme-switcher {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	box-sizing: border-box;
	padding: 0;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.topbar-navigation .wp-block-navigation__responsive-container-open,
.topbar-navigation .wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

/* Add menu gutters without changing core's modal and focus behavior. */
.topbar-navigation .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Accent can fall below 3:1 on the overlay. Its text color always contrasts. */
.wp-block-navigation__responsive-container.is-menu-open :focus-visible {
	outline-color: currentColor;
}

.peppermint-theme-switcher:hover {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--accent);
}

.peppermint-theme-switcher__icon {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: square;
	stroke-linejoin: miter;
	stroke-width: 1.75;
}

.peppermint-theme-switcher__icon--moon {
	display: none;
}

:root[data-peppermint-resolved-scheme="dark"] .peppermint-theme-switcher__icon--sun {
	display: none;
}

:root[data-peppermint-resolved-scheme="dark"] .peppermint-theme-switcher__icon--moon {
	display: block;
}

.eyebrow,
.project-kicker,
.post-meta {
	font-family: var(--wp--preset--font-family--manifold);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* Letter spacing breaks joined scripts such as Arabic. */
[dir="rtl"] :is(.eyebrow, .project-kicker, .post-meta) {
	letter-spacing: 0;
}

/*
 * Signal Hero and Signal Rail.
 *
 * Both styles share a continuous rule and square endpoint.
 * These CSS decorations carry no content or interaction.
 */
:where(.wp-block-heading, p).is-style-peppermint-signal-rail,
:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) .eyebrow {
	position: relative;
	padding-block-end: 1.15rem;
}

:where(.wp-block-heading, p).is-style-peppermint-signal-rail::after,
:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) .eyebrow::after {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: block;
	width: min(100%, 34rem);
	height: 0.75rem;
	background-image:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)),
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-position: left center, right center;
	background-repeat: no-repeat;
	background-size: 100% 2px, 0.75rem 0.75rem;
	content: "";
	pointer-events: none;
}

:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) {
	min-inline-size: 0;
	box-sizing: border-box;
}

:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) > :is(h1, h2, h3),
:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) > :is(h1, h2, h3) a {
	min-inline-size: 0;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

html[dir="rtl"] :where(.wp-block-heading, p).is-style-peppermint-signal-rail::after,
html[dir="rtl"] :where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) .eyebrow::after {
	background-position: right center, left center;
}

@media (forced-colors: active) {
	:where(.wp-block-heading, p).is-style-peppermint-signal-rail::after,
	:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) .eyebrow::after {
		border-block-end: 2px solid CanvasText;
		background: none !important;
		box-shadow: inset -0.75rem 0 0 CanvasText;
	}

	:where(.wp-block-group.peppermint-signal-hero, .wp-block-group.is-style-peppermint-signal-hero) {
		border: 1px solid CanvasText;
	}
}

.entry-shell {
	border-top: var(--peppermint-rule);
}

.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content > :last-child {
	margin-block-end: 0;
}

/*
 * Full-width Post Content lets the landing hero reach the viewport edges.
 * Constrain other top-level blocks to the reading or wide measure and keep
 * their side gutters. Additional alignfull sections stay full width.
 */
.peppermint-landing-page-content > :not(.alignfull) {
	width: calc(100% - (2 * var(--wp--preset--spacing--40)));
	margin-inline: auto;
	box-sizing: border-box;
}

.peppermint-landing-page-content > :not(.alignfull):not(.alignwide) {
	max-width: var(--wp--style--global--content-size, 52rem);
}

.peppermint-landing-page-content > .alignwide {
	max-width: var(--wp--style--global--wide-size, 80rem);
}

/* Add heading space after article text, without affecting nested components. */
.entry-content > :where(p, ul, ol, blockquote) + :where(h2, h3) {
	margin-block-start: 1.6em;
}

:where(.wp-block-column, .wp-block-group, .wp-block-media-text__content, .wp-block-post, .wp-block-post-title, .wp-block-query-title) {
	min-inline-size: 0;
}

:where(.wp-block-heading, .wp-block-post-title, .wp-block-query-title) {
	overflow-wrap: anywhere;
	hyphens: manual;
	text-wrap: balance;
}

:where(.entry-content p, .entry-content li, .wp-block-post-excerpt) {
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.entry-content code {
	overflow-wrap: anywhere;
}

.entry-content pre {
	max-inline-size: 100%;
	overflow-x: auto;
}

.front-page-content > h1:first-child,
.front-page-content > .wp-block-heading:first-child {
	max-width: 15ch;
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.94;
}

.team-member-card {
	border: var(--peppermint-rule);
}

.featured-projects {
	align-items: stretch;
}

.featured-projects > .wp-block-column {
	display: flex;
}

.legacy-feature-card,
.wp-block-group.is-style-peppermint-media-action-card {
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	flex-direction: column;
	min-inline-size: 0;
	border: var(--peppermint-soft-rule);
	border-block-start: 0.25rem solid var(--wp--preset--color--dsa-red);
}

.legacy-feature-card,
.team-member-card {
	height: 100%;
	padding: var(--wp--preset--spacing--40);
}

.legacy-feature-card > .wp-block-image:first-child {
	width: calc(100% + (2 * var(--wp--preset--spacing--40)));
	max-width: none !important;
	margin-inline: calc(-1 * var(--wp--preset--spacing--40)) !important;
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
}

.legacy-feature-card {
	gap: var(--wp--preset--spacing--30);
}

.legacy-feature-card > * {
	margin-block: 0;
}

.legacy-feature-card .wp-block-image img,
.wp-block-group.is-style-peppermint-media-action-card > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.legacy-feature-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-peppermint-media-action-card > .wp-block-image {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

.peppermint-media-action-card__body {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
	margin-block: 0;
	padding: var(--wp--preset--spacing--40);
}

.peppermint-media-action-card__body > * {
	margin-block: 0;
}

.peppermint-media-action-card__body > .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* Contained artwork shows the whole image without upscaling. */
.wp-block-image.is-style-peppermint-contained-media img,
.wp-block-post-featured-image.is-style-peppermint-contained-media img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: scale-down !important;
}

.peppermint-pattern-partner-grid > .wp-block-columns > .wp-block-column,
.peppermint-pattern-stats__row > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.peppermint-pattern-partner-grid__item,
.peppermint-pattern-stat {
	inline-size: 100%;
	box-sizing: border-box;
	align-self: stretch;
	flex: 1 1 auto;
}

.peppermint-pattern-partner-grid__item .wp-block-image {
	max-inline-size: 100%;
}

.peppermint-pattern-partner-grid__item img {
	max-inline-size: 100%;
	max-block-size: 8rem;
	object-fit: scale-down;
}

/* Apply the feature grid only when requested; preserve ordinary Columns. */
.wp-block-columns.peppermint-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18rem, calc((100% - 2 * var(--wp--preset--spacing--40)) / 3))), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.peppermint-feature-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Give dashboard embeds enough height to use their controls. */
.peppermint-responsive-embed iframe {
	display: block;
	inline-size: 100%;
	block-size: clamp(30rem, 75vh, 55rem);
	box-sizing: border-box;
	border: var(--peppermint-soft-rule);
	background-color: var(--wp--preset--color--base-2);
}

/* Embed areas stay hidden until an editor pastes embed code into them. */
.peppermint-responsive-embed:empty,
.peppermint-embed-frame:empty {
	display: none;
}

/* Embedded forms fill the frame's width and keep their own height. */
.peppermint-embed-frame iframe {
	display: block;
	inline-size: 100%;
	border: 0;
}

/* Join steps number themselves, so reordering them keeps the sequence. */
.peppermint-steps {
	counter-reset: peppermint-step;
}

.peppermint-step::before {
	counter-increment: peppermint-step;
	content: counter(peppermint-step);
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--manifold);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1;
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-canvas,
:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-surface,
:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-red,
:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-outline,
:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-technical-callout {
	box-sizing: border-box;
	padding: clamp(1.25rem, 4vw, 3rem);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-canvas {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-surface {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-red {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-red a:not(.wp-block-button__link) {
	color: inherit;
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-red .wp-block-button__link {
	border-color: var(--wp--preset--color--accent-contrast);
	background-color: var(--wp--preset--color--accent-contrast);
	color: var(--wp--preset--color--accent);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-section-outline {
	border: var(--peppermint-soft-rule);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-media-text).is-style-peppermint-technical-callout {
	border-inline-start: 0.5rem solid var(--wp--preset--color--dsa-red);
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.post-meta > .wp-block-post-date,
.post-meta > .wp-block-post-author-name,
.wp-block-post-date.post-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.post-meta > .wp-block-post-date::before,
.wp-block-post-date.post-meta::before,
.post-meta > .wp-block-post-author-name::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 1em;
	background-color: currentColor;
	content: "";
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.post-meta > .wp-block-post-date::before,
.wp-block-post-date.post-meta::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 6h16v15H4zM8 3v6M16 3v6M4 11h16'/%3E%3C/svg%3E");
}

.post-meta > .wp-block-post-author-name::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

.wp-block-details {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-top: var(--peppermint-rule);
	overflow-wrap: anywhere;
}

.wp-block-details:not(.has-background) {
	background-color: var(--wp--preset--color--base-2);
}

.wp-block-details:last-child {
	border-bottom: var(--peppermint-rule);
}

.wp-block-details summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.wp-block-quote {
	box-sizing: border-box;
	border: 0;
	border-inline-start-color: var(--wp--preset--color--dsa-red);
	border-inline-start-style: solid;
	border-inline-start-width: 0.35rem;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-quote:not(.has-background) {
	background-color: var(--wp--preset--color--base-2);
}

.wp-block-button__link {
	transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.site-footer {
	margin-block-start: auto;
	border-top: 0.5rem solid var(--wp--preset--color--dsa-red);
}

.site-footer a {
	color: inherit;
}

.footer-contact {
	overflow-wrap: anywhere;
}

/* Empty footer slots show their placeholders in the editor only. */
.site-footer :is(p, .wp-block-social-links):empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.wp-block-button__link {
		transition: none;
	}

	.peppermint-theme-switcher {
		transition: none;
	}
}

@media (forced-colors: active) {
	.peppermint-theme-switcher {
		border-color: ButtonText;
		color: ButtonText;
	}

	.wp-block-details,
	.wp-block-quote {
		border-color: CanvasText;
	}

	.wp-block-quote {
		border-inline-start-color: Highlight;
	}

	.wp-block-details:not(.has-background),
	.wp-block-quote:not(.has-background) {
		background: Canvas;
		color: CanvasText;
	}
}

/*
 * Paper block styles. Real paper scans are multiplied over the block's own colors,
 * so they follow whatever palette a site picks.
 */
:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends) {
	position: relative;
	isolation: isolate;
}

/* Grain sits between the block's color and its content, so text and images stay crisp. */
:is(.wp-block-group, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends) > *,
.wp-block-cover:is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends) > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends)::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: url("assets/textures/paper-crumple.jpg") 0 0 / 32rem;
	mix-blend-mode: multiply;
	opacity: 0.55;
	pointer-events: none;
}

/* Multiplied grain vanishes on dark colors, so a screened copy lightens the creases there. */
:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends)::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: url("assets/textures/paper-crumple-heavy.jpg") 0 0 / 24rem;
	mix-blend-mode: screen;
	opacity: 0.12;
	pointer-events: none;
}

:is(.wp-block-group, .wp-block-cover, .wp-block-columns).is-style-peppermint-paper-heavy::after {
	background:
		url("assets/textures/paper-sheet.jpg") center / cover,
		url("assets/textures/paper-crumple-heavy.jpg") 0 0 / 24rem;
	background-blend-mode: multiply;
	opacity: 0.35;
}

/* The torn edge reveals the paper's white core between the ink layer and the tear. */
:is(.wp-block-group, .wp-block-cover, .wp-block-columns).is-style-peppermint-paper-torn::before {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3.25rem;
	background:
		linear-gradient(rgb(251 246 236 / 0.65), rgb(251 246 236 / 0.65)),
		#fbf6ec url("assets/textures/paper-crumple.jpg") 0 0 / 32rem;
	-webkit-mask:
		url("assets/textures/edge-torn-under.png") 27rem 0 / 100rem 2.5rem repeat-x,
		linear-gradient(#000 0 0) bottom / 100% 0.75rem no-repeat;
	mask:
		url("assets/textures/edge-torn-under.png") 27rem 0 / 100rem 2.5rem repeat-x,
		linear-gradient(#000 0 0) bottom / 100% 0.75rem no-repeat;
	pointer-events: none;
}

/*
 * Every paper sheet has a slightly rough cut from one nine-slice frame. The torn styles widen
 * the frame on the edges they rip. Browsers without mask-border support show straight edges.
 */
:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends) {
	-webkit-mask-box-image: url("assets/textures/edge-torn-frame.png") 40 / 0.3rem round;
	mask-border: url("assets/textures/edge-torn-frame.png") 40 fill / 0.3rem round;
}

:is(.wp-block-group, .wp-block-cover, .wp-block-columns).is-style-peppermint-paper-torn {
	-webkit-mask-box-image-width: 0.3rem 0.3rem 2.5rem;
	mask-border-width: 0.3rem 0.3rem 2.5rem;
}

:is(.wp-block-group, .wp-block-cover, .wp-block-columns).is-style-peppermint-paper-torn-all {
	-webkit-mask-box-image-width: 1.5rem;
	mask-border-width: 1.5rem;
}

:is(.wp-block-group, .wp-block-cover, .wp-block-columns).is-style-peppermint-paper-torn-ends {
	-webkit-mask-box-image-width: 2.5rem 0.3rem;
	mask-border-width: 2.5rem 0.3rem;
}

.is-style-peppermint-paper-strip:is(.wp-block-heading, p) {
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.12em 0.7em;
	-webkit-mask:
		url("assets/textures/edge-torn-left.png") left top / 1rem 40rem repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 2rem) 100% no-repeat,
		url("assets/textures/edge-torn-right.png") right top / 1rem 40rem repeat-y;
	mask:
		url("assets/textures/edge-torn-left.png") left top / 1rem 40rem repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 2rem) 100% no-repeat,
		url("assets/textures/edge-torn-right.png") right top / 1rem 40rem repeat-y;
}

.is-style-peppermint-paper-strip:is(.wp-block-heading, p):not(.has-background) {
	background-color: var(--wp--preset--color--contrast);
}

.is-style-peppermint-paper-strip:is(.wp-block-heading, p):not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link {
	border-radius: 0;
	padding-inline: 1.6em;
	-webkit-mask:
		url("assets/textures/edge-torn-left.png") left top / 0.6rem 24rem repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 1rem) 100% no-repeat,
		url("assets/textures/edge-torn-right.png") right top / 0.6rem 24rem repeat-y;
	mask:
		url("assets/textures/edge-torn-left.png") left top / 0.6rem 24rem repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 1rem) 100% no-repeat,
		url("assets/textures/edge-torn-right.png") right top / 0.6rem 24rem repeat-y;
	position: relative;
	isolation: isolate;
	transition: transform 0.15s ease-out;
}

/* Smooth sheet paper, finer than the crumpled panels, shades any button color under its label. */
.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: url("assets/textures/paper-sheet.jpg") center / 30rem auto;
	mix-blend-mode: soft-light;
	opacity: 0.5;
	pointer-events: none;
}

/* On hover the sheet lifts off the page. */
.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link:is(:hover, :focus-visible) {
	transform: translate(-0.15rem, -0.2rem);
}

.wp-block-button.is-style-peppermint-paper-torn {
	transition: filter 0.15s ease-out;
}

.wp-block-button.is-style-peppermint-paper-torn:has(.wp-block-button__link:is(:hover, :focus-visible)) {
	filter: drop-shadow(0.2rem 0.3rem 0.15rem rgb(0 0 0 / 0.3));
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link,
	.wp-block-button.is-style-peppermint-paper-torn {
		transition: none;
	}
}

/* The mask would clip the link's own focus ring, so the unmasked wrapper draws it. */
.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link:focus-visible {
	outline: none;
}

.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered):has(.wp-block-button__link:focus-visible) {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* A torn sheet of a second color peeks out below and to the right of the button. */
.wp-block-button.is-style-peppermint-paper-layered {
	position: relative;
	isolation: isolate;
}

.wp-block-button.is-style-peppermint-paper-layered .wp-block-button__link {
	border-width: 0;
}

.wp-block-button.is-style-peppermint-paper-layered::before {
	content: "";
	position: absolute;
	inset: 0.35rem -0.35rem -0.4rem 0.35rem;
	z-index: -1;
	background-color: var(--peppermint-paper-layer-color, var(--wp--preset--color--dsa-red));
	/* Only the right and bottom edges show, so only they are torn. */
	-webkit-mask:
		url("assets/textures/edge-torn-right.png") right 7rem / 0.6rem 24rem repeat-y,
		url("assets/textures/edge-torn.png") 21rem bottom / 60rem 0.5rem repeat-x,
		linear-gradient(#000 0 0) left top / calc(100% - 0.6rem) calc(100% - 0.5rem) no-repeat;
	mask:
		url("assets/textures/edge-torn-right.png") right 7rem / 0.6rem 24rem repeat-y,
		url("assets/textures/edge-torn.png") 21rem bottom / 60rem 0.5rem repeat-x,
		linear-gradient(#000 0 0) left top / calc(100% - 0.6rem) calc(100% - 0.5rem) no-repeat;
	pointer-events: none;
}

/* A red sheet would vanish behind a red button. */
.wp-block-button.is-style-peppermint-paper-layered:has(.has-dsa-red-background-color)::before {
	background-color: var(--peppermint-paper-layer-color, var(--wp--preset--color--contrast));
}

@media (forced-colors: active) {
	:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends)::after,
	:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends)::before,
	.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link::after,
	.wp-block-button.is-style-peppermint-paper-layered::before {
		display: none;
	}

	.wp-block-button:is(.is-style-peppermint-paper-torn, .is-style-peppermint-paper-layered) .wp-block-button__link {
		-webkit-mask: none;
		mask: none;
		border-width: 2px;
	}

	:is(.wp-block-group, .wp-block-cover, .wp-block-columns):is(.is-style-peppermint-paper, .is-style-peppermint-paper-heavy, .is-style-peppermint-paper-torn, .is-style-peppermint-paper-torn-all, .is-style-peppermint-paper-torn-ends) {
		-webkit-mask-box-image: none;
		mask-border: none;
	}
}