/*
 * Shinka — the styling layer theme.json can't express.
 *
 * Rules:
 *  - Every colour/radius/font comes from a design token, so style
 *    variations re-skin all of this automatically.
 *  - "Muted" text uses color-mix(currentColor) instead of a fixed colour, so
 *    it stays readable inside inverted and primary sections.
 *  - Low-specificity :where() for form defaults so plugins can override.
 */

:root {
	--shinka-primary: var(--wp--preset--color--primary);
	--shinka-secondary: var(--wp--preset--color--secondary);
	--shinka-border: var(--wp--preset--color--border);
	--shinka-surface: var(--wp--preset--color--surface);
	--shinka-ease: var(--wp--custom--transition, 200ms cubic-bezier(0.2, 0.7, 0.2, 1));
	--shinka-muted: color-mix(in srgb, currentColor 72%, transparent);
	--shinka-tint: color-mix(in srgb, var(--shinka-primary) 12%, transparent);
	/* Primary pulled towards the text colour: readable on a primary tint. */
	--shinka-primary-strong: color-mix(in srgb, var(--shinka-primary) 78%, var(--wp--preset--color--contrast));
}

/* Muted text inside a primary section stays close to on-primary. The
   percentages above and here are read by tools/contrast-check.mjs. */
:where([class*="is-style-section-primary"]) {
	--shinka-muted: color-mix(in srgb, currentColor 88%, transparent);
}

/* ---------------------------------------------------------------- Base */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: color-mix(in srgb, var(--shinka-primary) 30%, transparent);
	color: inherit;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: color var(--shinka-ease), text-decoration-color var(--shinka-ease), text-decoration-thickness var(--shinka-ease), text-underline-offset var(--shinka-ease);
}

a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.26em;
}

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

mark {
	border-radius: 3px;
	padding-inline: 0.15em;
}

kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	padding: 0.1em 0.45em;
	border: 1px solid var(--shinka-border);
	border-bottom-width: 2px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base-2);
}

/* Templates remove the root block gap around <main> so sections can butt
   against the sticky header and footer. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Header */

/* The header always stacks above page content so dropdowns and the drawer
   are never painted under later sections. */
.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 100;
}

.shinka-header-sticky .wp-site-blocks > header.wp-block-template-part,
.shinka-header-shrink .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar.shinka-header-sticky .wp-site-blocks > header.wp-block-template-part,
.admin-bar.shinka-header-shrink .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* The admin bar scrolls away below 600px. */
	.admin-bar.shinka-header-sticky .wp-site-blocks > header.wp-block-template-part,
	.admin-bar.shinka-header-shrink .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.shinka-header {
	padding-block: var(--wp--preset--spacing--30);
	background: var(--wp--custom--header--background);
	-webkit-backdrop-filter: saturate(1.4) blur(var(--wp--custom--header--blur, 14px));
	backdrop-filter: saturate(1.4) blur(var(--wp--custom--header--blur, 14px));
	border-bottom: 1px solid transparent;
	transition: border-color var(--shinka-ease), box-shadow var(--shinka-ease), background-color var(--shinka-ease), color var(--shinka-ease), padding var(--shinka-ease);
}

/* backdrop-filter makes the header the containing block for position:fixed
   descendants, which would trap core's full-screen navigation overlay inside
   the header bar. Drop the blur while the drawer is open. */
.shinka-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.shinka-header .wp-block-site-title,
.shinka-header .wp-block-button__link {
	white-space: nowrap;
}

.shinka-scrolled .shinka-header {
	border-bottom-color: color-mix(in srgb, var(--shinka-border) 85%, transparent);
	box-shadow: 0 10px 30px -22px rgb(0 0 0 / 0.45);
}

/* Transparent header that floats over a full-bleed hero (Landing template, or
   the Kit's page/site behaviour). Only with JavaScript, which turns it solid
   once the page scrolls; without JS it stays an ordinary header in the flow. */
.shinka-js .shinka-header-transparent .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
}

.shinka-js .admin-bar.shinka-header-transparent .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

html.shinka-js:not(.shinka-scrolled) .shinka-header-transparent .shinka-header {
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent) 60%, transparent 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

.shinka-header-shrunk .shinka-header-shrink .shinka-header {
	padding-block: var(--wp--preset--spacing--10);
}

@media (max-width: 600px) {
	.shinka-js .admin-bar.shinka-header-transparent .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Header scheme (REQ-HDR-2, REQ-PGC-1). Re-points every preset colour inside
   the header at one scheme's generated set, whatever the page scheme is:
    - body.shinka-header-scheme-dark|light — per-page/site choice (Shinka Kit);
    - header[data-shinka-scheme="dark|light"] — the Kit's section-swap script;
    - an unscrolled transparent header defaults to the dark set, so its text
      reads over the hero it floats on. */
.shinka-header-scheme-dark .wp-site-blocks > header.wp-block-template-part,
html.shinka-js:not(.shinka-scrolled) .shinka-header-transparent:not(.shinka-header-scheme-light) .wp-site-blocks > header.wp-block-template-part,
body .wp-site-blocks > header.wp-block-template-part[data-shinka-scheme="dark"] {
	--wp--preset--color--primary: var(--wp--custom--scheme--dark--primary);
	--wp--preset--color--on-primary: var(--wp--custom--scheme--dark--on-primary);
	--wp--preset--color--secondary: var(--wp--custom--scheme--dark--secondary);
	--wp--preset--color--accent: var(--wp--custom--scheme--dark--accent);
	--wp--preset--color--base: var(--wp--custom--scheme--dark--base);
	--wp--preset--color--base-2: var(--wp--custom--scheme--dark--base-2);
	--wp--preset--color--surface: var(--wp--custom--scheme--dark--surface);
	--wp--preset--color--contrast: var(--wp--custom--scheme--dark--contrast);
	--wp--preset--color--contrast-2: var(--wp--custom--scheme--dark--contrast-2);
	--wp--preset--color--border: var(--wp--custom--scheme--dark--border);
	--wp--preset--color--success: var(--wp--custom--scheme--dark--success);
	--wp--preset--color--warning: var(--wp--custom--scheme--dark--warning);
	--wp--preset--color--danger: var(--wp--custom--scheme--dark--danger);
	--wp--preset--color--info: var(--wp--custom--scheme--dark--info);
	--shinka-primary: var(--wp--preset--color--primary);
	--shinka-secondary: var(--wp--preset--color--secondary);
	--shinka-border: var(--wp--preset--color--border);
	--shinka-surface: var(--wp--preset--color--surface);
	--shinka-tint: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	--shinka-primary-strong: color-mix(in srgb, var(--wp--preset--color--primary) 78%, var(--wp--preset--color--contrast));
	--wp--custom--header--background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	color-scheme: dark;
	color: var(--wp--preset--color--contrast);
}

.shinka-header-scheme-light .wp-site-blocks > header.wp-block-template-part,
body .wp-site-blocks > header.wp-block-template-part[data-shinka-scheme="light"] {
	--wp--preset--color--primary: var(--wp--custom--scheme--light--primary);
	--wp--preset--color--on-primary: var(--wp--custom--scheme--light--on-primary);
	--wp--preset--color--secondary: var(--wp--custom--scheme--light--secondary);
	--wp--preset--color--accent: var(--wp--custom--scheme--light--accent);
	--wp--preset--color--base: var(--wp--custom--scheme--light--base);
	--wp--preset--color--base-2: var(--wp--custom--scheme--light--base-2);
	--wp--preset--color--surface: var(--wp--custom--scheme--light--surface);
	--wp--preset--color--contrast: var(--wp--custom--scheme--light--contrast);
	--wp--preset--color--contrast-2: var(--wp--custom--scheme--light--contrast-2);
	--wp--preset--color--border: var(--wp--custom--scheme--light--border);
	--wp--preset--color--success: var(--wp--custom--scheme--light--success);
	--wp--preset--color--warning: var(--wp--custom--scheme--light--warning);
	--wp--preset--color--danger: var(--wp--custom--scheme--light--danger);
	--wp--preset--color--info: var(--wp--custom--scheme--light--info);
	--shinka-primary: var(--wp--preset--color--primary);
	--shinka-secondary: var(--wp--preset--color--secondary);
	--shinka-border: var(--wp--preset--color--border);
	--shinka-surface: var(--wp--preset--color--surface);
	--shinka-tint: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	--shinka-primary-strong: color-mix(in srgb, var(--wp--preset--color--primary) 78%, var(--wp--preset--color--contrast));
	--wp--custom--header--background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	color-scheme: light;
	color: var(--wp--preset--color--contrast);
}

.shinka-account-link a {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent);
	border-radius: var(--wp--custom--radius--button);
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.shinka-account-link a:hover {
	border-color: currentColor;
}

/* ---------------------------------------------------------------- Navigation */

/* Active page and ancestor (REQ-NAV-1): colour plus an underline bar that
   also animates in on hover for top-level links. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--shinka-primary);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.3em;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--shinka-ease);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, [aria-current="page"])::after,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Dropdowns: a surface panel that eases in. Core toggles visibility/size; the
   transform animates on top and waits for visibility before resetting. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--shinka-border) !important;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
	padding: 0.4rem;
	background: var(--shinka-surface);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	transform: translateY(0.4rem);
	transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	transform: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.5rem 0.75rem;
	transition: background-color var(--shinka-ease), color var(--shinka-ease);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--shinka-tint);
}

.wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	transition: transform var(--shinka-ease);
}

/* Wide dropdown (REQ-NAV-2): Styles → "Wide" on a Submenu block. A two-column
   grid with link descriptions and optional inline-image icons in labels. */
.wp-block-navigation .wp-block-navigation-submenu.is-style-wide > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	flex-direction: column;
	align-items: stretch;
}

.wp-block-navigation .wp-block-navigation-submenu.is-style-wide > .wp-block-navigation__submenu-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	padding: 0.6rem;
}

.wp-block-navigation .is-style-wide.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .is-style-wide.has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .is-style-wide.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: min(34rem, calc(100vw - 2rem));
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	height: 100%;
	padding: 0.65rem 0.8rem;
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-weight: 600;
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__label img {
	width: 1.25em;
	height: 1.25em;
	margin-inline-end: 0.5em;
	vertical-align: -0.2em;
	object-fit: contain;
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	margin-block-start: 0.15rem;
	color: var(--shinka-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
}

/* Mobile drawer (REQ-HDR-5). Shinka's navigation-overlay part provides the
   panel; core provides the focus trap, Escape and focus return (spike S-2). */
.wp-block-navigation__responsive-container.is-menu-open {
	animation: shinka-drawer-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: var(--wp--preset--font-size--large);
	gap: 0.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	transform: none;
	border: 0 !important;
	box-shadow: none;
	background: transparent;
	padding: 0.25rem 0 0 1rem;
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-navigation__responsive-container.is-menu-open .is-style-wide > .wp-block-navigation__submenu-container {
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.shinka-nav-overlay {
	min-height: 100%;
	min-height: 100dvh;
}

.shinka-nav-overlay .wp-block-navigation__container {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.shinka-nav-overlay .wp-block-navigation-overlay-close {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: inherit;
	transition: background-color var(--shinka-ease);
}

.shinka-nav-overlay .wp-block-navigation-overlay-close:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

@keyframes shinka-drawer-in {
	from {
		opacity: 0;
		transform: translateX(8%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------- Breadcrumbs */

/* REQ-NAV-4: core Breadcrumbs. Core renders nav > ol with aria-current on the
   last item and no schema (spike S-3); Shinka Kit adds BreadcrumbList JSON-LD
   only when no SEO plugin is active. */
.wp-block-breadcrumbs {
	color: var(--shinka-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

.wp-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	color: var(--shinka-primary);
	text-decoration: underline;
}

.wp-block-breadcrumbs li:not(:last-child)::after {
	opacity: 0.55;
}

.wp-block-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ---------------------------------------------------------------- Footer */

.shinka-footer a:not(.wp-element-button) {
	color: inherit;
	text-decoration: none;
}

.shinka-footer a:not(.wp-element-button):hover {
	color: var(--shinka-primary);
}

.shinka-footer .shinka-muted,
.shinka-muted {
	color: var(--shinka-muted);
}

/* ---------------------------------------------------------------- Buttons */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--shinka-ease), color var(--shinka-ease), border-color var(--shinka-ease), box-shadow var(--shinka-ease), transform var(--shinka-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -14px color-mix(in srgb, currentColor 60%, transparent);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline: transparent, inherits the section's text colour so it works on
   light, dark, inverted and primary backgrounds alike. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent);
	padding: calc(0.8em - 1.5px) calc(1.45em - 1.5px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
	border-color: currentColor;
	color: inherit;
}

.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	color: inherit;
	padding-inline: 0.7em;
	box-shadow: none;
}

.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
	transform: none;
}

.wp-block-button.is-style-arrow > .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 0.55em;
	transition: transform var(--shinka-ease);
}

.wp-block-button.is-style-arrow > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- Text styles */

p.is-style-eyebrow {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--shinka-primary);
}

:where([class*="is-style-section-primary"]) p.is-style-eyebrow {
	color: var(--shinka-muted);
}

/* Over a Cover overlay the block sets its own text colour; the eyebrow follows
   it. Inside a callout the eyebrow uses the tint-safe strong primary. */
.wp-block-cover p.is-style-eyebrow {
	color: inherit;
}

:where([class*="is-style-callout-"]) p.is-style-eyebrow {
	color: var(--shinka-primary-strong);
}

p.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--shinka-muted);
}

p.is-style-badge {
	width: fit-content;
	padding: 0.35em 0.9em;
	border: 1px solid color-mix(in srgb, var(--shinka-primary) 30%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--shinka-tint);
	color: var(--shinka-primary-strong);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
}

p.is-style-badge.has-text-align-center {
	margin-inline: auto;
}

.is-style-gradient-text {
	background: linear-gradient(120deg, var(--shinka-primary) 0%, var(--shinka-secondary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------------------------------------------------------------- Surfaces */

.is-style-card {
	transition: transform var(--shinka-ease), box-shadow var(--shinka-ease), border-color var(--shinka-ease);
}

.shinka-hover-lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
	border-color: color-mix(in srgb, var(--shinka-primary) 40%, var(--shinka-border));
}

.shinka-featured {
	border-color: var(--shinka-primary) !important;
	box-shadow: var(--wp--preset--shadow--glow) !important;
}

.wp-block-group.is-style-glass {
	background: color-mix(in srgb, var(--shinka-surface) 62%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--40);
}

/* HUD panel: RPG status-window frame with corner brackets and scanlines. */
.wp-block-group.is-style-hud {
	position: relative;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--shinka-primary) 38%, transparent);
	border-radius: var(--wp--custom--radius--sm);
	background:
		repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--shinka-primary) 3.5%, transparent) 3px 4px),
		linear-gradient(180deg, color-mix(in srgb, var(--shinka-primary) 8%, var(--shinka-surface)) 0%, var(--shinka-surface) 100%);
	box-shadow:
		inset 0 0 40px -12px color-mix(in srgb, var(--shinka-primary) 30%, transparent),
		0 0 36px -14px color-mix(in srgb, var(--shinka-primary) 55%, transparent);
}

.wp-block-group.is-style-hud::before,
.wp-block-group.is-style-hud::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid var(--shinka-primary);
	pointer-events: none;
}

.wp-block-group.is-style-hud::before {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.wp-block-group.is-style-hud::after {
	right: -1px;
	bottom: -1px;
	border-left: 0;
	border-top: 0;
}

/* Progress meter: a Group (row) holding one Spacer whose width = progress. */
.wp-block-group.is-style-meter {
	height: 0.625rem;
	min-height: 0;
	padding: 0 !important;
	gap: 0;
	flex-wrap: nowrap;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, currentColor 13%, transparent);
}

.wp-block-group.is-style-meter > * {
	height: 100% !important;
	margin: 0 !important;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--shinka-primary) 0%, var(--shinka-secondary) 100%);
	box-shadow: 0 0 14px color-mix(in srgb, var(--shinka-primary) 55%, transparent);
}

/* ---------------------------------------------------------------- Media */

.wp-block-image.is-style-frame img {
	padding: 0.5rem;
	background: var(--shinka-surface);
	border: 1px solid var(--shinka-border);
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-image.is-style-glow img {
	box-shadow: var(--wp--preset--shadow--glow);
}

.shinka-float {
	animation: shinka-float 7s ease-in-out infinite;
}

@keyframes shinka-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.shinka-logos img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: opacity var(--shinka-ease), filter var(--shinka-ease);
}

.shinka-logos img:hover {
	filter: none;
	opacity: 1;
}

/* ---------------------------------------------------------------- Lists */

ul.is-style-checklist {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-checklist > li {
	position: relative;
	padding-inline-start: 2em;
}

ul.is-style-checklist > li + li {
	margin-block-start: 0.55em;
}

ul.is-style-checklist > li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	display: grid;
	place-items: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: var(--shinka-tint);
	color: var(--shinka-primary);
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1;
}

ol.is-style-steps {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: shinka-step;
}

ol.is-style-steps > li {
	position: relative;
	min-height: 2.25rem;
	padding-inline-start: 3.1rem;
	counter-increment: shinka-step;
}

ol.is-style-steps > li + li {
	margin-block-start: 1.1rem;
}

ol.is-style-steps > li::before {
	content: counter(shinka-step);
	position: absolute;
	inset-inline-start: 0;
	top: -0.15em;
	display: grid;
	place-items: center;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 50%;
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--custom--font--heading);
	font-size: 0.9rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------- Blocks */

hr.wp-block-separator.is-style-gradient {
	height: 2px;
	border: 0;
	background: linear-gradient(90deg, transparent 0%, var(--shinka-primary) 25%, var(--shinka-secondary) 75%, transparent 100%);
	opacity: 1;
}

.wp-block-quote.is-style-testimonial {
	position: relative;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--40) + 1.75rem) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--shinka-surface);
	box-shadow: var(--wp--preset--shadow--sm);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
}

.wp-block-quote.is-style-testimonial::before {
	content: "“";
	position: absolute;
	top: 0.6rem;
	inset-inline-start: var(--wp--preset--spacing--40);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	color: var(--shinka-primary);
}

.wp-block-quote.is-style-testimonial cite {
	display: block;
	margin-block-start: 1rem;
	color: var(--shinka-muted);
}

/* Details → accordion. Also powers "reveal the answer" knowledge checks. */
.wp-block-details {
	border-bottom: 1px solid var(--shinka-border);
	padding-block: 1rem;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1;
	color: var(--shinka-primary);
	transition: transform var(--shinka-ease);
}

.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-block-start: 0.75rem;
}

.wp-block-details.is-style-card {
	padding: 1rem 1.25rem;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--shinka-surface);
}

.wp-block-details.is-style-card + .wp-block-details.is-style-card {
	margin-block-start: 0.75rem;
}

/* Core Accordion (REQ-DS-11). Core animates the icon and panel height; Shinka
   adds dividers, a tinted icon, hover colour and a visible focus ring. */
.wp-block-accordion {
	border-block-start: 1px solid var(--shinka-border);
}

.wp-block-accordion > .wp-block-accordion-item {
	margin-block-start: 0;
	border-block-end: 1px solid var(--shinka-border);
}

.wp-block-accordion-heading {
	margin: 0;
}

.wp-block-accordion-heading__toggle {
	gap: 1rem;
	padding-block: 1.05rem;
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 600;
	transition: color var(--shinka-ease);
}

.wp-block-accordion-heading__toggle:hover {
	color: var(--shinka-primary);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--shinka-primary);
	outline-offset: 2px;
}

.wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--shinka-tint);
	color: var(--shinka-primary-strong);
	font-size: 1.15em;
	line-height: 1;
}

.wp-block-accordion-panel:not([hidden]) {
	padding-block-end: 1.1rem;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
		animation: shinka-fade-down 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}

/* Core Tabs (REQ-DS-11): a hairline tab list, primary active indicator,
   hover tint, visible focus and a short panel fade. Many tabs scroll inside
   the list instead of widening the page on small screens. */
.wp-block-tab-list {
	flex-wrap: nowrap;
	gap: 0.25rem;
	overflow-x: auto;
	border-block-end: 1px solid var(--shinka-border);
	scrollbar-width: thin;
}

.wp-block-tab-list button[role="tab"] {
	flex: none;
	border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0 0;
	color: var(--shinka-muted);
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--shinka-ease), background-color var(--shinka-ease);
}

.wp-block-tab-list button[role="tab"]:hover {
	background: color-mix(in srgb, currentColor 7%, transparent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-tab-list button[role="tab"][aria-selected="true"] {
	color: var(--shinka-primary);
}

.wp-block-tab-list button[role="tab"][aria-selected="true"]::before {
	bottom: 0;
	border-bottom-width: 3px;
	border-radius: 3px 3px 0 0;
}

.wp-block-tab-list button[role="tab"]:focus-visible {
	outline: 2px solid var(--shinka-primary);
	outline-offset: -2px;
}

.wp-block-tab-panel {
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-tab-panel:focus-visible {
	border-radius: var(--wp--custom--radius--sm);
	outline: 2px solid var(--shinka-primary);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-tab-panel:not([hidden]) {
		animation: shinka-fade 220ms ease both;
	}
}

@keyframes shinka-fade {
	from {
		opacity: 0;
	}
}

@keyframes shinka-fade-down {
	from {
		opacity: 0;
		transform: translateY(-0.35rem);
	}
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--shinka-border);
	padding: 0.7em 0.9em;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--shinka-primary);
}

.wp-block-table th {
	background: var(--wp--preset--color--base-2);
	font-weight: 600;
	text-align: start;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: color-mix(in srgb, var(--wp--preset--color--base-2) 70%, transparent);
}

.wp-block-table.is-style-stripes :where(th, td) {
	border-color: transparent;
}

.wp-block-pullquote p {
	margin-block: 0;
}

.wp-block-code code {
	white-space: pre-wrap;
}

/* Post cards in query loops */
.shinka-post-card .wp-block-post-featured-image {
	overflow: hidden;
}

.shinka-post-card .wp-block-post-featured-image img {
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shinka-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.035);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---------------------------------------------------------------- Forms */

:where(label, .ff-el-input--label label, .gfield_label) {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"], [type="hidden"]), textarea, select),
body .fluentform .ff-el-form-control,
body .wpcf7 .wpcf7-form-control:not(.wpcf7-submit),
body .gform_wrapper :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]), textarea, select) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--shinka-surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: border-color var(--shinka-ease), box-shadow var(--shinka-ease), background-color var(--shinka-ease);
}

:where(input, textarea, select):focus,
body .fluentform .ff-el-form-control:focus,
body .wpcf7 .wpcf7-form-control:focus {
	border-color: var(--shinka-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--shinka-primary) 22%, transparent);
	outline: none;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--shinka-primary);
}

input[type="checkbox"][role="switch"] {
	appearance: none;
	position: relative;
	width: 2.8rem;
	height: 1.55rem;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base-2);
	vertical-align: middle;
	transition: background-color var(--shinka-ease), border-color var(--shinka-ease);
}

input[type="checkbox"][role="switch"]::before {
	content: "";
	position: absolute;
	top: 0.18rem;
	left: 0.18rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast-2);
	transition: transform var(--shinka-ease), background-color var(--shinka-ease);
}

input[type="checkbox"][role="switch"]:checked {
	border-color: var(--shinka-primary);
	background: var(--shinka-primary);
}

input[type="checkbox"][role="switch"]:checked::before {
	background: var(--wp--preset--color--on-primary);
	transform: translateX(1.25rem);
}

input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.45rem;
	border: 1px dashed var(--shinka-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base-2);
	color: var(--shinka-muted);
	font: inherit;
}

input[type="file"]::file-selector-button {
	margin-inline-end: 0.75rem;
	padding: 0.55em 0.8em;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fluentform .ff-el-group,
.wpcf7-form > p,
.gform_wrapper .gfield {
	margin-block: 0 1.15rem;
}

:where(form) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class]), input[type="reset"]:not([class])),
.fluentform .ff-btn-submit,
.wpcf7 input.wpcf7-submit,
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button) {
	padding: 0.75em 1.15em;
	border: 1px solid var(--shinka-primary);
	border-radius: var(--wp--custom--radius--button);
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--shinka-ease), box-shadow var(--shinka-ease), opacity var(--shinka-ease);
}

:where(form) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])):hover,
.fluentform .ff-btn-submit:hover,
.wpcf7 input.wpcf7-submit:hover,
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button):hover {
	box-shadow: var(--wp--preset--shadow--sm);
	transform: translateY(-1px);
}

:where(input, textarea, select)[aria-invalid="true"],
.ff-el-is-error .ff-el-form-control,
.wpcf7 .wpcf7-not-valid,
.gform_wrapper .gfield_error :where(input, textarea, select) {
	border-color: var(--wp--preset--color--danger) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--danger) 18%, transparent);
}

:where(.ff-el-is-error .text-danger, .wpcf7-not-valid-tip, .gfield_validation_message, .validation_message) {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 650;
}

:where(.ff-message-success, .gform_confirmation_message, .gform_confirmation_wrapper),
.wpcf7 form.sent .wpcf7-response-output {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--success);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--success) 10%, var(--shinka-surface));
}

:where(.ff-errors-in-stack, .gform_validation_errors),
.wpcf7 form.invalid .wpcf7-response-output {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--danger);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--shinka-surface));
}

:where(.ff-btn-loading, .wpcf7-spinner, .gform_ajax_spinner) {
	color: var(--shinka-primary);
	accent-color: var(--shinka-primary);
}

:where(.ff-step-titles, .gf_page_steps) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--40);
}

:where(.ff-step-title, .gf_step) {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--shinka-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

:where(.ff-step-active, .gf_step_active) {
	border-color: var(--shinka-primary);
	color: var(--shinka-primary);
}

:where(.ff-el-progress, .gf_progressbar) {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base-2);
}

:where(.ff-el-progress-bar, .gf_progressbar_percentage) {
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
}

/* Fluent Forms exposes separate label and input wrappers, so floating labels
   are safe as an explicit opt-in. CF7's stock label is a raw wrapping text
   node; Gravity Forms remains documented-only until a licensed lab copy. */
.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) {
	position: relative;
}

.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) .ff-el-input--label {
	position: absolute;
	z-index: 1;
	top: 0.72rem;
	left: 0.72rem;
	padding-inline: 0.22rem;
	background: var(--shinka-surface);
	pointer-events: none;
	transition: color var(--shinka-ease), font-size var(--shinka-ease), transform var(--shinka-ease);
}

.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) .ff-el-form-control {
	padding-block: 1.25rem 0.45rem;
}

.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) .ff-el-form-control::placeholder {
	color: transparent;
}

.shinka-floating-labels .fluentform .ff-el-group:focus-within .ff-el-input--label,
.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(:placeholder-shown)) .ff-el-input--label {
	color: var(--shinka-primary);
	font-size: 0.68rem;
	transform: translateY(-0.62rem);
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--button) !important;
}

/* ---------------------------------------------------------------- Long-form */

/* REQ-DS-7: rhythm, lists, quotes, code, tables and footnotes for articles.
   Scoped to direct children of post content so pattern-built pages keep
   their own section spacing. */
.wp-block-post-content > :where(h2, h3, h4, h5, h6) {
	margin-block-start: 2em;
}

.wp-block-post-content > :where(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.65em;
}

.wp-block-post-content > :where(ul, ol):not([class*="is-style-"]),
.wp-block-post-content :where(li) > :where(ul, ol) {
	padding-inline-start: 1.35em;
}

.wp-block-post-content :where(ul, ol):not([class*="is-style-"]) > li + li {
	margin-block-start: 0.4em;
}

.wp-block-post-content :where(ul, ol):not([class*="is-style-"]) > li::marker {
	color: var(--shinka-primary);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wp-block-post-content :where(li) > :where(ul, ol) {
	margin-block: 0.4em 0;
}

.wp-block-quote:not(.is-style-testimonial) {
	font-style: normal;
}

.wp-block-quote:not(.is-style-testimonial) cite,
.wp-block-pullquote cite {
	display: block;
	margin-block-start: 0.6em;
	color: var(--shinka-muted);
}

.wp-block-pullquote {
	text-wrap: balance;
}

:where(p, li, td, th, figcaption, dd) > code,
:where(p, li, td, th, figcaption, dd) > :where(a, strong, em) > code {
	padding: 0.1em 0.38em;
	border-radius: var(--wp--custom--radius--sm);
	background: color-mix(in srgb, currentColor 9%, transparent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
}

.wp-block-preformatted {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base-2);
}

.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-embed figcaption {
	margin-block-start: 0.6em;
	color: var(--shinka-muted);
}

.wp-block-table table {
	font-variant-numeric: tabular-nums;
}

mark:not([class]) {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent);
	color: inherit;
}

sup.fn a,
sup[data-fn] a {
	padding-inline: 0.12em;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-footnotes {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	padding-inline-start: 1.35em;
	border-block-start: 1px solid var(--shinka-border);
	color: var(--shinka-muted);
}

.wp-block-footnotes li + li {
	margin-block-start: 0.35em;
}

.wp-block-footnotes li:target {
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------- Blog */

/* Archive loops (REQ-TPL-2): parts/loop.html (grid), loop-list.html and
   loop-magazine.html. Cards share one treatment; media keeps a fixed ratio so
   the grid never shifts while images load. */
.shinka-loop .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.shinka-loop .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

.shinka-loop .wp-block-post-featured-image :where(img, a) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shinka-loop .wp-block-post-title {
	margin: 0;
}

.shinka-loop--list .wp-block-post {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--shinka-border);
}

.shinka-loop--list .wp-block-post-featured-image {
	flex: 0 0 min(15rem, 34%);
}

.shinka-loop--list .shinka-loop__body {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {
	.shinka-loop--list .wp-block-post {
		flex-direction: column;
	}

	.shinka-loop--list .wp-block-post-featured-image {
		flex-basis: auto;
		width: 100%;
	}
}

/* Magazine: the newest post on the first page spans two columns, and two
   rows when it has an image to fill them. Preset font-size classes are
   !important in core, so the featured title needs the same weight. */
@media (min-width: 782px) {
	body:not(.paged) .shinka-loop--magazine .wp-block-post-template > .wp-block-post:first-child {
		grid-column: span 2;
	}

	body:not(.paged) .shinka-loop--magazine .wp-block-post-template > .wp-block-post:first-child:has(.wp-block-post-featured-image) {
		grid-row: span 2;
	}

	body:not(.paged) .shinka-loop--magazine .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}
}

.shinka-author-box {
	gap: var(--wp--preset--spacing--30);
}

.shinka-author-box .wp-block-post-author-name {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.shinka-author-box .wp-block-post-author-biography {
	color: var(--shinka-muted);
}

/* Related posts hide themselves when no post shares a term. */
.shinka-related-posts:not(:has(.wp-block-post)) {
	display: none;
}

.shinka-sticky {
	position: sticky;
	top: var(--shinka-sticky-top, 6.5rem);
	align-self: flex-start;
}

.admin-bar .shinka-sticky {
	top: calc(var(--shinka-sticky-top, 6.5rem) + var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 781px) {
	.shinka-sticky {
		position: static;
	}
}

/* ---------------------------------------------------------------- Comments */

.shinka-comments .wp-block-comment-template {
	padding-inline-start: 0;
	list-style: none;
}

.shinka-comments .wp-block-comment-template ol {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--shinka-border);
	list-style: none;
}

.shinka-comments .wp-block-comment-template li {
	margin-block-start: var(--wp--preset--spacing--30);
}

.shinka-comments .wp-block-comment-content {
	margin-block: 0.4rem;
}

.shinka-comments .comment-form :where(input:not([type="checkbox"], [type="submit"]), textarea) {
	margin-block-start: 0.35rem;
}

/* ---------------------------------------------------------------- Announcement */

/* REQ-HDR-3: parts/announcement.html. The dismiss button hides the bar and
   remembers that text in localStorage (theme/assets/js/shinka.js); the
   pre-paint bootstrap hides remembered bars before first paint. */
.shinka-announcement {
	padding-block: 0.55rem;
	text-align: center;
}

.shinka-announcement a {
	color: inherit;
	font-weight: 700;
}

.shinka-announcement .shinka-announcement__dismiss .wp-block-button__link {
	padding: 0.25em 0.6em;
	color: inherit;
	font-size: var(--wp--preset--font-size--x-small);
}

.shinka-announcement-off .shinka-announcement,
.shinka-announcement[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- Feedback */

/* REQ-DS-8 components for Shinka Kit's interactive blocks: a loading spinner
   (also on any busy button), a toast and a copy-confirmed state. */
.shinka-spinner,
:where(.wp-block-button__link, button)[aria-busy="true"]::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
	border-block-start-color: currentColor;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: shinka-spin 700ms linear infinite;
}

:where(.wp-block-button__link, button)[aria-busy="true"]::after {
	margin-inline-start: 0.55em;
}

.shinka-toast {
	position: fixed;
	inset-inline: 0;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 1000;
	width: fit-content;
	max-width: calc(100vw - 2rem);
	margin-inline: auto;
	padding: 0.7rem 1.1rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--lg);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	animation: shinka-fade-up 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.shinka-toast[hidden] {
	display: none;
}

/* In-flow toast for demos and inline confirmations. */
.shinka-toast.is-inline {
	position: static;
	margin-inline: 0;
	animation: none;
}

.is-copied {
	color: var(--wp--preset--color--success) !important;
}

.is-copied::before {
	content: "✓ ";
}

@keyframes shinka-spin {
	to {
		transform: rotate(1turn);
	}
}

@keyframes shinka-fade-up {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/* ---------------------------------------------------------------- Portal */

.shinka-portal__sidebar {
	position: sticky;
	top: 6.5rem;
	align-self: flex-start;
}

.admin-bar .shinka-portal__sidebar {
	top: calc(6.5rem + var(--wp-admin--admin-bar--height, 32px));
}

.shinka-portal__sidebar .wp-block-navigation__container {
	width: 100%;
	gap: 0.15rem;
}

.shinka-portal__sidebar .wp-block-navigation-item {
	width: 100%;
}

.shinka-portal__sidebar .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color var(--shinka-ease), color var(--shinka-ease);
}

.shinka-portal__sidebar .wp-block-navigation-item__content:hover,
.shinka-portal__sidebar .current-menu-item > .wp-block-navigation-item__content {
	background: var(--shinka-tint);
	color: var(--shinka-primary);
}

@media (max-width: 781px) {
	.shinka-portal__sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------- Motion */

.shinka-scheme-transition,
.shinka-scheme-transition * {
	transition-property: background-color, border-color, color, fill, stroke;
	transition-duration: 250ms;
}

.shinka-js .shinka-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--shinka-delay, 0ms);
}

.shinka-js .shinka-reveal.is-visible {
	opacity: 1;
	transform: none;
}

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

	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.shinka-js .shinka-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Never hide content while editing. */
.editor-styles-wrapper .shinka-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------------------------------------------------------------- Utilities */

.shinka-nowrap {
	white-space: nowrap;
}

.shinka-balance :where(h1, h2, h3, h4, p),
:where(h1, h2, h3).wp-block-heading {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.shinka-tabular {
	font-variant-numeric: tabular-nums;
}

@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > footer.wp-block-template-part {
		display: none;
	}
}