/*!
 * Section: Studio brand variant
 *
 * Background painters + tier-specific layout for `.mw-section--brand-studio`
 * across all 11 section partials. The K-World (kw-*) and Lore (lore-*) brand
 * variants are scoped inside each partial's own CSS file; the Studio tier
 * (default tier) lives here because every section partial inherits it.
 *
 * Background tokens (theme-tokens.css):
 *   studio-dark    — DS indigo dark band (#0E0841)       ← default body bg (Topic 27 WP-4)
 *   studio-violet  — subtle violet-tinted dark (#0e0a2a) ← inner-page body bands
 *   studio-light   — lavender lift (#e1e8f9)             ← homepage book promo
 *
 * Loaded after the section CSS partials so its painters win over the partial
 * stubs (which intentionally don't paint Studio bands — Studio is the default
 * tier and most sections just inherit the body bg).
 *
 * @package Mystwood_Studios_AB
 * @since   2026-05-23 (post-Topic-17 visual restoration)
 */

/* -----------------------------------------------------------------------
 * Background painters — applied to every studio-tier section type.
 * Foreground colour is white for the two dark bands; bg-dark hex for the
 * single light band. The `:where()` keeps the specificity floor flat so
 * any per-page override still wins.
 * ----------------------------------------------------------------------- */
.mw-section--brand-studio[data-bg-token="studio-dark"] {
	background-color: var(--studio-dark, #0E0841);
	color: var(--wp--preset--color--text-white, #ffffff);
}

.mw-section--brand-studio[data-bg-token="studio-violet"] {
	background-color: var(--studio-violet, #0e0a2a);
	color: var(--wp--preset--color--text-white, #ffffff);
}

.mw-section--brand-studio[data-bg-token="studio-light"] {
	background-color: var(--studio-light, #e1e8f9);
	color: var(--wp--preset--color--bg-dark, #040420);
}

/* -----------------------------------------------------------------------
 * Hero — eyebrow accent + subhead tone on studio tier.
 * Figma 1:18: eyebrow renders in violet, subhead in soft-white.
 *
 * Signature tree-of-eyes motif: the first studio-dark hero on the homepage
 * gets the `hero-tree-bg.png` overlay (Figma 1:18 reference). Painted via
 * `background-image` directly on the section (no pseudo-element so it
 * survives sticky-header overlay + scroll). Tinted dark via a co-located
 * gradient overlay so foreground text stays high-contrast.
 * ----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
 * EVERY studio eyebrow takes the accent, not just the four that were listed
 *
 * FIX-WP1 gave --mw-text-accent to the eyebrow of the hero, body and
 * media-text sections one at a time. Every other studio section type was
 * missed, and there was nothing to make the omission visible: an eyebrow
 * with no colour rule simply inherits the band's body colour, so it renders
 * white on a dark band and near-black on a light one, and reads as a small
 * plain line rather than as the brand accent. Measured at 1440 before this
 * rule: /about/ card-grid and key-facts white, /careers/ two card grids and
 * the form white, /team/ card-grid white, /publishing/ card-grid near-black
 * and gallery white - beside correct violet eyebrows in the same pages.
 *
 * Scoped to one class plus the brand class, (0,2,0). The four per-section
 * rules below are (0,3,0) and still win; they set the same value, so the
 * outcome is unchanged where they apply and correct where they do not.
 * --mw-text-accent already resolves per band - primary-glow on studio-dark
 * and studio-violet, primary-ink elsewhere - so light bands keep the darker
 * violet rather than being handed a dark-band colour.
 *
 * K-World and Kaeros are deliberately out of scope: theme-tokens.css scopes
 * the accent redefinition to studio bands and says in as many words that
 * those tiers keep their own accents. They measure internally consistent.
 * ----------------------------------------------------------------------- */
.mw-section--brand-studio .mw-section__eyebrow {
	color: var(--mw-text-accent);
}

.mw-section--hero.mw-section--brand-studio .mw-section__eyebrow {
	color: var(--mw-text-accent); /* Topic 33 FIX-WP1 */
	opacity: 1;
}

/* Home hero — Figma 1:18: full-bleed signature tree with roots visible,
 * dominating the entire hero. The hero-tree-bg.png is 2160×1130 (aspect
 * 1.91). To get Figma's "deep + mysterious" framing, the tree fills the
 * hero edge-to-edge by WIDTH (cover-style) so its roots reach the
 * About-section transition. Title sits over the eye cluster mid-tree;
 * CTAs land in the lower-mid where the trunk widens. */
.mw-page-home .mw-section--hero[data-bg-token="studio-dark"]:first-of-type {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Full-bleed up under the transparent sticky header so the eye-tree scene
	 * reaches the very top (menu floats over the tree) — matches the coloring-
	 * book + games heroes. Content stays flex-centered well below the menu; only
	 * the scene bleeds up under it. */
	margin-block-start: calc(-1 * var(--mw-header-h));
	/* Topic 24 FIXUP-WP1 — was clamp(680px, 95vh, 960px) which made the hero
	 * span ~95% of the viewport on desktop, producing the "covering" feel
	 * called out in the Topic 23 review. Matches the new _hero.css eye-tree
	 * default so both rules stay in lockstep.
	 * Topic 24 WP-9 fixup-2 — re-expanded after eyes + tree silhouette went
	 * DORMANT. The "covering" feel was eyes-overlap mitigation that no longer
	 * applies; the glow gradient + particles need more vertical room to read
	 * as the hero's primary visual. Both rules still in lockstep. */
	min-height: clamp(560px, 75vh, 860px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Topic 24 FIXUP-WP1 — padding-block was 10vh / 14vh which added another
	 * ~216px of vertical bleed at desktop. Tightened to half so the eye-tree
	 * scene + content stack reads as a hero band, not a full-screen takeover. */
	padding-block: clamp(3rem, 5vh, 5rem) clamp(3rem, 7vh, 6rem);
}

.mw-page-home .mw-section--hero[data-bg-token="studio-dark"]:first-of-type::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../img/decorative/hero-tree-bg.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	/* `cover` fills the hero edge-to-edge by WIDTH so the tree scene reaches the
	 * left and right edges — no dark pillarbox margins (the "cut at the sides"
	 * look). background-position: center bottom keeps the roots anchored at the
	 * bottom so they still bleed into the About band; only a little sky/canopy
	 * overflows off the top, behind the transparent header. */
	background-size: cover;
	z-index: -1;
	pointer-events: none;
}

/* Home "About" band — bleed the eye-tree's dark roots into the section below.
 * The tree PNG bottom is near-black (#040420) but the About base is studio-dark
 * (#0E0841), so a hard light-to-dark line shows at the seam. This top gradient
 * paints the About's first ~260px in the tree's near-black and eases to
 * transparent (revealing #0E0841), so the hero bleeds naturally down AND the
 * band still matches the studio-dark section below it. Home-scoped. */
.mw-page-home .mw-section--media-text-reverse {
	background-image: linear-gradient(180deg, #040420 0%, rgba(4, 4, 32, 0) 260px);
}

/* Subtle radial vignette so the eye is drawn to the centered tree without
 * the section feeling boxed at the corners. Positioned a little above
 * center so the title area sits in the brighter "hot spot". */
.mw-page-home .mw-section--hero[data-bg-token="studio-dark"]:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 75% 60% at center 42%, rgba(4, 4, 32, 0) 0%, rgba(4, 4, 32, 0.35) 70%, rgba(4, 4, 32, 0.75) 100%);
	z-index: -1;
	pointer-events: none;
}

.mw-section--hero.mw-section--brand-studio .mw-section__subhead {
	color: rgba(255, 255, 255, 0.85);
}

.mw-section--hero.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__subhead {
	color: rgba(4, 4, 32, 0.78);
}

.mw-section--hero.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__eyebrow {
	color: var(--mw-text-accent); /* Topic 33 FIX-WP1 */
}

/* -----------------------------------------------------------------------
 * Body — eyebrow accent + heading scale on studio tier.
 * ----------------------------------------------------------------------- */
.mw-section--body.mw-section--brand-studio .mw-section__eyebrow {
	color: var(--mw-text-accent); /* Topic 33 FIX-WP1 */
}

/* -----------------------------------------------------------------------
 * Card-grid — give cards a visible surface on studio-dark / studio-violet
 * bands. Mascot illustrations have transparent backgrounds, so the soft
 * card panel beneath gives them their tile-look from Figma 1:18.
 * ----------------------------------------------------------------------- */
.mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-card,
.mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-violet"] .mw-card {
	background-color: rgba(255, 255, 255, 0.04);
	padding: clamp(1rem, 2vw, 1.5rem);
	border-radius: var(--mw-radius-soft, 8px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	text-align: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-card:hover,
.mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-violet"] .mw-card:hover {
	background-color: rgba(255, 255, 255, 0.07);
	transform: translateY(-2px);
}

.mw-section--card-grid.mw-section--brand-studio .mw-card__media {
	margin: 0 auto 0.75rem;
	max-width: 9rem;
}

.mw-section--card-grid.mw-section--brand-studio .mw-card__media img {
	width: 100%;
	height: auto;
}

.mw-section--card-grid.mw-section--brand-studio .mw-card__title {
	font-family: var(--wp--preset--font-family--display, system-ui, sans-serif);
	font-size: 1.125rem;
}

.mw-section--card-grid.mw-section--brand-studio .mw-card__eyebrow {
	color: var(--mw-text-accent); /* Topic 33 FIX-WP1 — not in the handoff's list */
}

.mw-section--card-grid.mw-section--brand-studio .mw-card__body {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
}

.mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-light"] .mw-card__body {
	color: rgba(4, 4, 32, 0.72);
}

/* The eyebrow belongs to the headline and has to be aligned with it. This
 * rule centred the headline alone, and the eyebrow - which carries no
 * text-align rule anywhere - fell back to `start`. Both boxes are the full
 * width of the section inner, so the pair rendered with the kicker hard
 * left and the title it introduces centred above the cards. Visible on
 * /about/, /team/ and /publishing/, and on every studio card grid added
 * since. `.mw-section__intro` was already centred one file over, in
 * _card-grid.css, which is why only the eyebrow drifted. */
.mw-section--card-grid.mw-section--brand-studio .mw-section__eyebrow,
.mw-section--card-grid.mw-section--brand-studio .mw-section__headline {
	text-align: center;
}

/* -----------------------------------------------------------------------
 * Media-text — constrain media-column image size on dark bands so a small
 * mascot SVG doesn't blow up to half-viewport width. The studio-light
 * (homepage book promo) band already lives in _media-text.css; this block
 * fills in the dark-band layout that the partial stub left unscoped.
 * ----------------------------------------------------------------------- */
.mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__media,
.mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-violet"] .mw-section__media {
	max-width: 28rem;
	margin-inline: auto;
}

.mw-section--media-text.mw-section--brand-studio .mw-section__media img {
	border-radius: var(--mw-radius-soft, 8px);
}

.mw-section--media-text.mw-section--brand-studio .mw-section__eyebrow {
	color: var(--mw-text-accent); /* Topic 33 FIX-WP1 */
}

/* The peeking-creature mascot SVG on the home about-band reads as a sticker —
 * give it a subtle violet-glow card behind so it looks intentional. */
.mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__media img[src*="peeking-creature"] {
	background: radial-gradient(circle at 50% 45%, rgba(103, 101, 232, 0.55) 0%, rgba(103, 101, 232, 0) 65%);
	padding: 1.5rem;
}

/* -----------------------------------------------------------------------
 * CTA band — primary on studio renders as accent-violet pill (already in
 * _button.css), no per-tier override needed for the band itself.
 * ----------------------------------------------------------------------- */
.mw-section--cta-band.mw-section--brand-studio .mw-section__subhead {
	color: rgba(255, 255, 255, 0.78);
}

.mw-section--cta-band.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__subhead {
	color: rgba(4, 4, 32, 0.72);
}

/* -----------------------------------------------------------------------
 * Form — let the kit handler markup inherit, but tighten the wrapper
 * spacing on the homepage so the contact form anchor sits closer to the
 * preceding card grid. The form-section's existing local tokens already
 * paint banner / field surfaces correctly.
 * ----------------------------------------------------------------------- */
.mw-section--form.mw-section--brand-studio .mw-section__headline {
	text-align: center;
}

/* -----------------------------------------------------------------------
 * Divider — Studio-tier shape variants (wave-down / scallop-down /
 * torn-paper-down / soft-wave-up / torn-paper-up / ridge-up / zigzag-*).
 *
 * The SVG files in assets/img/decorative/divider-*.svg are filled paths
 * (hardcoded #040420). Using them as `mask-image` means the SVG defines
 * only the SHAPE; the divider's `background-color` provides the actual
 * fill, so the same SVG works for every outgoing brand colour.
 *
 * Topic 13 PORT-WP1 semantics: `data-divider-color` names the *outgoing*
 * tone — the divider strip paints in that tone, bleeding the previous
 * section's bg over the top of the next section to create the visual
 * transition. Same-bg-collapse policy (data-collapse-same-bg) preserved.
 * ----------------------------------------------------------------------- */
.mw-section--divider.mw-section--brand-studio,
.mw-divider.mw-divider--brand-studio {
	background-color: transparent;
}

.mw-divider.mw-divider--brand-studio {
	display: block;
	width: 100%;
	height: clamp(28px, 4vw, 56px);
	opacity: 1;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center top;
	        mask-position: center top;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	/* Read the near-black divider SVG by ALPHA, not luminance — matches the CD
	 * divider (.mw-divider--shape::before) and the K-World fix in _divider.css.
	 * Without it, WebKit/Safari defaults to luminance and collapses the #040420
	 * shape to a flat colour bar. */
	-webkit-mask-mode: alpha;
	        mask-mode: alpha;
}

.mw-divider.mw-divider--brand-studio.mw-divider--wave-down {
	-webkit-mask-image: url("../../img/decorative/divider-soft-wave-down.svg");
	        mask-image: url("../../img/decorative/divider-soft-wave-down.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--scallop-down {
	-webkit-mask-image: url("../../img/decorative/divider-scallop-down.svg");
	        mask-image: url("../../img/decorative/divider-scallop-down.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--torn-paper-down {
	-webkit-mask-image: url("../../img/decorative/divider-torn-paper-down.svg");
	        mask-image: url("../../img/decorative/divider-torn-paper-down.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--soft-wave-up,
.mw-divider.mw-divider--brand-studio.mw-divider--wave-up {
	-webkit-mask-image: url("../../img/decorative/divider-soft-wave-up.svg");
	        mask-image: url("../../img/decorative/divider-soft-wave-up.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--torn-paper-up {
	-webkit-mask-image: url("../../img/decorative/divider-torn-paper-up.svg");
	        mask-image: url("../../img/decorative/divider-torn-paper-up.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--ridge-up {
	-webkit-mask-image: url("../../img/decorative/divider-ridge-up.svg");
	        mask-image: url("../../img/decorative/divider-ridge-up.svg");
}

/* Topic 30 designer correction (CD handoff): ridgeline replaces torn-paper
 * on the Home lavender-book-band seams. Distinct from the older --ridge-up
 * variant above. */
.mw-divider.mw-divider--brand-studio.mw-divider--ridgeline-down {
	-webkit-mask-image: url("../../img/decorative/divider-ridgeline-down.svg");
	        mask-image: url("../../img/decorative/divider-ridgeline-down.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--ridgeline-up {
	-webkit-mask-image: url("../../img/decorative/divider-ridgeline-up.svg");
	        mask-image: url("../../img/decorative/divider-ridgeline-up.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--zigzag-down {
	-webkit-mask-image: url("../../img/decorative/divider-zigzag-down.svg");
	        mask-image: url("../../img/decorative/divider-zigzag-down.svg");
}

.mw-divider.mw-divider--brand-studio.mw-divider--zigzag-up {
	-webkit-mask-image: url("../../img/decorative/divider-zigzag-up.svg");
	        mask-image: url("../../img/decorative/divider-zigzag-up.svg");
}

/* Per-tone painter: data-divider-color = the outgoing section's bg. The
 * divider paints in that tone so the shape "carries" the previous section
 * over the top of the next. */
.mw-divider.mw-divider--brand-studio[data-divider-color="studio-dark"] {
	background-color: var(--studio-dark, #0E0841);
}

.mw-divider.mw-divider--brand-studio[data-divider-color="studio-violet"] {
	background-color: var(--studio-violet, #0e0a2a);
}

.mw-divider.mw-divider--brand-studio[data-divider-color="studio-light"] {
	background-color: var(--studio-light, #e1e8f9);
}

/* Topic 13 same-bg divider-collapse policy — preserved for studio tier. */
.mw-divider.mw-divider--brand-studio[data-collapse-same-bg="true"] {
	display: none;
}

/* -----------------------------------------------------------------------
 * Overlap modifier (Topic 25 KLEI-WP2) — opt-in via the divider partial's
 * `overlap => true` arg (emits .mw-divider--overlap).
 *
 * Why it exists: the page <body> background is a fixed dark studio tone
 * (#040420). A divider paints in its outgoing tone and relies on its
 * masked-out gaps revealing the section behind it — but in normal flow those
 * gaps reveal the dark <body>, so a dark-toned shape reads dark-on-dark =
 * invisible (the flat seam this fixes). Overlapping the painted strip into
 * the neighbouring band pulls that band up behind the shape, so the gaps now
 * reveal *that* band and the shape pops — and it visually "hangs" just over
 * the next section.
 *
 * A `-down` divider hangs into the section BELOW it; a `-up` divider hangs
 * into the section ABOVE it. The strip is lifted with position + z-index so
 * it paints over the neighbouring (static) section: opaque shape on top,
 * transparent gaps revealing the band behind. The negative margin mirrors the
 * divider height clamp so the overlap is exactly one strip tall.
 * ----------------------------------------------------------------------- */
.mw-divider.mw-divider--brand-studio.mw-divider--overlap {
	position: relative;
	z-index: 2;
}

.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--wave-down,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--scallop-down,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--torn-paper-down,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--zigzag-down,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--ridgeline-down {
	margin-block-end: calc(-1 * clamp(28px, 4vw, 56px));
}

.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--wave-up,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--soft-wave-up,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--torn-paper-up,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--ridge-up,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--zigzag-up,
.mw-divider.mw-divider--brand-studio.mw-divider--overlap.mw-divider--ridgeline-up {
	margin-block-start: calc(-1 * clamp(28px, 4vw, 56px));
}

/* -----------------------------------------------------------------------
 * Homepage About-section composition (Figma 1:18):
 *   left column — MYSTWOOD wordmark · headline · body prose · social row
 * The wordmark + social row live INSIDE the media-text content slot (per
 * the closed section library), so style them here rather than in the
 * partial. Inline SVG inside content is rendered through wp_kses_post
 * which permits `<svg>` + `<path>` since WP 5.6 — verified in browser.
 * ----------------------------------------------------------------------- */
.mw-page-home .mw-home-about__wordmark {
	margin: 0 0 1.25rem;
	max-width: 14rem;
}

.mw-page-home .mw-home-about__wordmark img {
	width: 100%;
	height: auto;
	display: block;
}

.mw-page-home .mw-home-about__social {
	display: inline-flex;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
}

.mw-page-home .mw-home-about__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.mw-page-home .mw-home-about__social a:hover,
.mw-page-home .mw-home-about__social a:focus-visible {
	background: var(--wp--preset--color--accent-violet, #6765e8);
	color: #ffffff;
	transform: translateY(-2px);
}

/* -----------------------------------------------------------------------
 * Homepage-specific composition tweaks (.mw-page-home).
 *
 * The home About section currently composes via the media-text partial in
 * studio-dark with reverse=true. The mascot column inherits the partial's
 * 1fr split, but Figma 1:18 gives the right-hand illustration ~55% of the
 * row width. Bump the grid template only on the homepage so other studio
 * media-text instances (about page intros, etc.) keep their balanced split.
 * ----------------------------------------------------------------------- */
@media (min-width: 60em) {
	.mw-page-home .mw-section--media-text[data-bg-token="studio-dark"] .mw-section__inner--split {
		grid-template-columns: 1fr 1.1fr;
		align-items: center;
	}

	.mw-page-home .mw-section--media-text[data-bg-token="studio-light"] .mw-section__inner--split {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}

/* -----------------------------------------------------------------------
 * About page — Topic 24 WP-9 fixup-4 (2026-05-28)
 *
 * Three deltas from the bare template-page-about.php composition:
 *   1. Hero gets a decorative dragon-pink mascot SVG anchored to the right
 *      so it reads as more than a blank dark band. Sized + faded to act as
 *      a backdrop, NOT a foreground element competing with the headline.
 *   2. The "Who we are" body section flips to bg_token=studio-light in the
 *      template; this rule ensures default text + headline read DARK on
 *      that pale lavender bg so contrast is WCAG-AA comfortable.
 *   3. (no CSS needed for the torn-paper-down divider — its mask image was
 *      already wired up; the invisibility was a same-color-on-same-color
 *      problem solved by the body bg flip in delta #2.)
 * ----------------------------------------------------------------------- */
.mw-page-about .mw-section--hero {
	position: relative;
	overflow: hidden;
	background-image: url("../../img/mascots/dragon-pink.svg");
	background-repeat: no-repeat;
	background-position: right -3rem center;
	background-size: clamp(280px, 36vw, 520px) auto;
	background-attachment: scroll;
}

@media (max-width: 768px) {
	/* On mobile the dragon would crowd the headline — mute to a subtle corner accent. */
	.mw-page-about .mw-section--hero {
		background-position: right -6rem bottom -4rem;
		background-size: clamp(180px, 50vw, 280px) auto;
		opacity: 1;
	}
}

.mw-page-about .mw-section--body[data-bg-token="studio-light"],
.mw-page-about .mw-section--body[data-bg-token="studio-light"] .mw-section__inner,
.mw-page-about .mw-section--body[data-bg-token="studio-light"] .mw-section__headline,
.mw-page-about .mw-section--body[data-bg-token="studio-light"] p {
	color: var(--mw-color-ink, #14102b);
}