/**
 * ASC Theme — Global Stylesheet
 *
 * Architecture: CSS @layer for specificity control.
 * paintWithScalpel: Precise, intentional, no excess.
 *
 * Layers (lowest to highest specificity):
 *   reset → base → layout → components → utilities
 */

/* --- @font-face: IBM Plex (self-hosted, SIL OFL 1.1) --- */

@font-face {
	font-family: 'IBM Plex Serif';
	src: url('../fonts/IBMPlexSerif-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Serif';
	src: url('../fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@layer reset, base, layout, components, utilities;

/* ═══════════════════════════════════════════════════════
   CUSTOM PROPERTIES — Design Tokens
   ═══════════════════════════════════════════════════════ */

:root {
	/* --- Surface layers (darkest to lightest) --- */
	--color-void:            hsl(0 0% 7%);
	--color-ground:          hsl(0 0% 14%);
	--color-surface:         hsl(0 0% 20%);
	--color-surface-raised:  hsl(0 0% 26%);

	/* --- Text layers --- */
	--color-text:            hsl(0 0% 90%);
	--color-text-muted:      hsl(0 0% 60%);
	--color-text-faint:      hsl(0 0% 40%);

	/* --- Pigment palette --- */
	--color-accent:          hsl(18 45% 52%);
	--color-accent-dim:      hsl(18 30% 35%);
	--color-burnt-umber:     hsl(25 55% 28%);
	--color-paynes-grey:     hsl(215 20% 30%);

	/* --- Functional --- */
	--color-border:          hsl(0 0% 22%);
	--color-focus:           hsl(200 60% 50%);
	--color-link:            var(--color-text);
	--color-link-hover:      var(--color-accent);

	/* --- meticulousBlur tokens --- */
	--blur-ambient:          6px;
	--blur-resolve:          0px;
	--opacity-latent:        0.35;
	--opacity-present:       1;

	/* --- Typography --- */
	--font-display:          'IBM Plex Serif', Georgia, serif;
	--font-body:             'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-mono:             'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;

	/* Type scale (modular, fluid) */
	--text-xs:    clamp(0.7rem,  0.65rem + 0.25vw, 0.8rem);
	--text-sm:    clamp(0.8rem,  0.75rem + 0.25vw, 0.9rem);
	--text-base:  clamp(0.95rem, 0.9rem  + 0.25vw, 1.1rem);
	--text-lg:    clamp(1.15rem, 1.05rem + 0.5vw,  1.35rem);
	--text-xl:    clamp(1.4rem,  1.2rem  + 1vw,    1.8rem);
	--text-2xl:   clamp(1.8rem,  1.4rem  + 2vw,    2.8rem);
	--text-3xl:   clamp(2.2rem,  1.6rem  + 3vw,    4rem);

	--leading-tight:   1.2;
	--leading-normal:  1.6;
	--leading-loose:   1.8;
	--tracking-tight:  -0.02em;

	/* --- Spacing scale (fluid) --- */
	--space-3xs:  clamp(0.25rem, 0.2rem  + 0.15vw, 0.375rem);
	--space-2xs:  clamp(0.375rem,0.3rem  + 0.25vw, 0.5rem);
	--space-xs:   clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);
	--space-sm:   clamp(0.75rem, 0.6rem  + 0.75vw, 1rem);
	--space-md:   clamp(1rem,    0.8rem  + 1vw,    1.5rem);
	--space-lg:   clamp(1.5rem,  1.2rem  + 1.5vw,  2.25rem);
	--space-xl:   clamp(2rem,    1.5rem  + 2.5vw,  3.5rem);
	--space-2xl:  clamp(3rem,    2rem    + 5vw,    6rem);

	/* --- Transitions --- */
	--duration-fast:   150ms;
	--duration-normal: 200ms;
	--duration-slow:   400ms;
	--duration-blur:   800ms;
	--ease-out:        cubic-bezier(0.25, 0, 0.25, 1);

	/* --- Layout --- */
	--content-width:   72ch;
	--wide-width:      90rem;
	--nav-width:       14rem;

	/* --- Scroll progress (set by JS) --- */
	--scroll-progress: 0;
}


/* ═══════════════════════════════════════════════════════
   LAYER: RESET
   ═══════════════════════════════════════════════════════ */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	body {
		min-height: 100dvh;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	ul[role='list'],
	ol[role='list'] {
		list-style: none;
	}

	a {
		color: inherit;
	}

	h1, h2, h3, h4, h5, h6 {
		overflow-wrap: break-word;
		text-wrap: balance;
	}

	p {
		overflow-wrap: break-word;
		text-wrap: pretty;
	}

	button {
		cursor: pointer;
		background: none;
		border: none;
	}
}


/* ═══════════════════════════════════════════════════════
   LAYER: BASE — Element-level defaults
   ═══════════════════════════════════════════════════════ */

@layer base {
	body {
		font-family: var(--font-body);
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		color: var(--color-text);
		background-color: var(--color-ground);
	}

	/* --- Headings --- */
	h1 {
		font-family: var(--font-display);
		font-size: var(--text-3xl);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
	}

	h2 {
		font-family: var(--font-display);
		font-size: var(--text-2xl);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
	}

	h3 {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		line-height: var(--leading-tight);
	}

	h4 {
		font-size: var(--text-lg);
		line-height: var(--leading-tight);
	}

	h5, h6 {
		font-size: var(--text-base);
		line-height: var(--leading-tight);
	}

	/* --- Links --- */
	a {
		color: var(--color-link);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
		transition: color var(--duration-normal) var(--ease-out);
	}

	a:hover {
		color: var(--color-link-hover);
	}

	/* --- Focus --- paintWithScalpel: precise, visible */
	:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 2px;
	}

	/* --- Code --- Payne's grey surface */
	code,
	pre {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
	}

	pre {
		background-color: var(--color-paynes-grey);
		padding: var(--space-sm) var(--space-md);
		overflow-x: auto;
		border-left: 1px solid var(--color-burnt-umber);
	}

	code {
		background-color: var(--color-paynes-grey);
		padding: 0.1em 0.3em;
	}

	pre code {
		background: none;
		padding: 0;
	}

	/* --- Blockquotes --- */
	blockquote {
		border-left: 1px solid var(--color-accent-dim);
		padding-left: var(--space-md);
		color: var(--color-text-muted);
		font-style: italic;
	}

	/* --- Separator --- paintWithScalpel: hairline incision */
	hr {
		border: none;
		border-top: 1px solid var(--color-border);
		margin-block: var(--space-lg);
	}

	/* --- Selection --- */
	::selection {
		background-color: var(--color-burnt-umber);
		color: var(--color-text);
	}

	/* --- Images --- */
	figure {
		margin: 0;
	}

	figcaption {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		margin-top: var(--space-2xs);
	}

	/* --- Lists in content --- */
	.entry-content ul,
	.entry-content ol {
		padding-left: var(--space-md);
		margin-bottom: var(--space-sm);
	}

	.entry-content li {
		margin-bottom: var(--space-3xs);
	}

	/* --- Paragraphs in content --- */
	.entry-content p {
		margin-bottom: var(--space-sm);
	}

	.entry-content > *:last-child {
		margin-bottom: 0;
	}

	/* --- Tables --- */
	table {
		width: 100%;
		border-collapse: collapse;
	}

	th, td {
		padding: var(--space-2xs) var(--space-xs);
		border-bottom: 1px solid var(--color-border);
		text-align: left;
	}

	th {
		font-weight: 600;
		color: var(--color-text-muted);
		font-size: var(--text-sm);
	}
}


/* ═══════════════════════════════════════════════════════
   LAYER: LAYOUT — Page structure
   ═══════════════════════════════════════════════════════ */

@layer layout {
	/* Page grid — Landscapify: continuous terrain */
	.site {
		display: grid;
		grid-template-rows: auto 1fr auto;
		grid-template-columns:
			[full-start] minmax(var(--space-md), 1fr)
			[content-start] min(var(--content-width), 100%)
			[content-end] minmax(var(--space-md), 1fr)
			[full-end];
		min-height: 100dvh;
	}

	.site-header {
		grid-column: full;
		padding: var(--space-md) var(--space-md);
		border-bottom: 1px solid var(--color-border);
	}

	.site-main {
		grid-column: content;
		padding-block: var(--space-xl);
	}

	.site-footer {
		grid-column: full;
		padding: var(--space-lg) var(--space-md);
		border-top: 1px solid var(--color-border);
	}

	/* Full-bleed elements within content column */
	.alignfull {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
	}

	.alignwide {
		width: calc(100% + var(--space-xl) * 2);
		max-width: var(--wide-width);
		margin-inline: calc(var(--space-xl) * -1);
	}

	/* Content area spacing */
	.content-area > * + * {
		margin-top: var(--space-lg);
	}

	/* Desktop layout with vertical nav (hostEncounter) */
	@media (min-width: 72em) {
		.site {
			grid-template-columns:
				[nav-start] var(--nav-width)
				[nav-end full-start] minmax(var(--space-lg), 1fr)
				[content-start] min(var(--content-width), 100%)
				[content-end] minmax(var(--space-lg), 1fr)
				[full-end];
		}

		.site-header {
			grid-column: nav;
			grid-row: 1 / -1;
			position: sticky;
			top: 0;
			height: 100dvh;
			border-bottom: none;
			border-right: 1px solid var(--color-border);
			padding: var(--space-lg) var(--space-md);
			display: flex;
			flex-direction: column;
		}

		.site-main {
			grid-column: content;
		}

		.site-footer {
			grid-column: nav-end / full-end;
		}
	}
}


/* ═══════════════════════════════════════════════════════
   LAYER: COMPONENTS
   ═══════════════════════════════════════════════════════ */

@layer components {
	/* --- Site Branding --- rhythm: space-sm (≈ line-height unit) */
	.site-branding {
		margin-bottom: var(--space-lg);
		text-align: center;
	}

	/* Octagram mark — tesseract projection, identity element */
	.octagram-mark {
		display: block;
		margin-inline: auto;
		margin-bottom: var(--space-sm);
		color: var(--color-text);
	}

	.octagram-mark svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.octagram-mark--sm { width: 1.5rem; height: 1.5rem; }
	.octagram-mark--md { width: 2.5rem; height: 2.5rem; }
	.octagram-mark--lg { width: 4rem;   height: 4rem; }

	a.octagram-mark {
		text-decoration: none;
	}

	a.octagram-mark:hover {
		color: var(--color-accent);
	}

	a.octagram-mark:focus-visible {
		outline: 1px solid var(--color-accent);
		outline-offset: 2px;
	}

	.site-title {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
		line-height: var(--leading-normal);
		letter-spacing: var(--tracking-tight);
	}

	.site-title a {
		text-decoration: none;
	}

	.site-description {
		font-size: var(--text-xs);
		line-height: var(--leading-normal);
		color: var(--color-text-muted);
		margin-top: var(--space-3xs);
	}

	/* --- Navigation --- hostEncounter: greeting, not utility */
	.site-nav {
		margin-top: var(--space-sm);
	}

	.nav-menu {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-sm);
	}

	.nav-menu a {
		font-family: var(--font-display);
		font-size: var(--text-base);
		text-decoration: none;
		color: var(--color-text-muted);
		transition: color var(--duration-normal) var(--ease-out);
	}

	.nav-menu a:hover,
	.nav-menu .current-menu-item > a,
	.nav-menu .current-menu-ancestor > a {
		color: var(--color-accent);
	}

	/* Sub-menus */
	.nav-menu .sub-menu {
		list-style: none;
		display: none;
		padding-left: var(--space-sm);
	}

	.nav-menu .menu-item-has-children:hover > .sub-menu,
	.nav-menu .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}

	.nav-menu .sub-menu a {
		font-size: var(--text-sm);
	}

	/* Desktop vertical nav */
	@media (min-width: 72em) {
		.nav-menu {
			flex-direction: column;
			gap: var(--space-xs);
		}

		.nav-menu a {
			font-size: var(--text-lg);
		}

		.nav-menu .sub-menu {
			display: block;
			margin-top: var(--space-3xs);
		}
	}

	/* Mobile nav toggle */
	.nav-toggle {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: var(--space-2xs);
	}

	.nav-toggle__bar {
		display: block;
		width: 20px;
		height: 1px;
		background-color: var(--color-text);
		transition: transform var(--duration-normal) var(--ease-out);
	}

	/* Hide toggle on desktop */
	@media (min-width: 72em) {
		.nav-toggle {
			display: none;
		}
	}

	/* Hide menu on mobile until toggled */
	@media (max-width: 71.99em) {
		.nav-menu {
			display: none;
		}

		.nav-toggle[aria-expanded='true'] + .nav-menu {
			display: flex;
			flex-direction: column;
			gap: var(--space-xs);
			padding-top: var(--space-sm);
		}
	}

	/* --- Entry (Post/Page) --- */
	.entry {
		margin-bottom: var(--space-xl);
	}

	.entry-header {
		margin-bottom: var(--space-md);
	}

	.entry-title {
		margin-bottom: var(--space-2xs);
	}

	.entry-title a {
		text-decoration: none;
	}

	.entry-title a:hover {
		color: var(--color-accent);
	}

	.entry-meta {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	.entry-content {
		line-height: var(--leading-loose);
	}

	.entry-content > * + * {
		margin-top: var(--space-sm);
	}

	.entry-footer {
		margin-top: var(--space-md);
		padding-top: var(--space-sm);
		border-top: 1px solid var(--color-border);
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	.entry-tags a {
		color: var(--color-text-muted);
	}

	.entry-tags a:hover {
		color: var(--color-accent);
	}

	/* --- Post Thumbnail --- */
	.post-thumbnail {
		margin-bottom: var(--space-md);
	}

	.post-thumbnail img {
		width: 100%;
	}

	/* --- Artwork Card --- meticulousBlur: ambient to resolved */
	.artwork-card {
		filter: blur(var(--blur-ambient));
		opacity: var(--opacity-latent);
		transition:
			filter var(--duration-blur) var(--ease-out),
			opacity calc(var(--duration-blur) * 0.75) var(--ease-out);
	}

	.artwork-card.in-view {
		filter: blur(var(--blur-resolve));
		opacity: var(--opacity-present);
	}

	@media (prefers-reduced-motion: reduce) {
		.artwork-card {
			filter: none;
			opacity: 1;
			transition: none;
		}
	}

	.artwork-card a {
		display: block;
		text-decoration: none;
	}

	.artwork-card img {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border: 1px solid transparent;
		transition: border-color var(--duration-normal) var(--ease-out);
	}

	.artwork-card a:hover img {
		border-color: var(--color-burnt-umber);
	}

	.artwork-card__title {
		font-family: var(--font-display);
		font-size: var(--text-sm);
		margin-top: var(--space-2xs);
		color: var(--color-text-muted);
	}

	/* --- Artwork Grid --- Landscapify: continuous field */
	.artwork-grid {
		container-type: inline-size;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
		gap: var(--space-xs);
	}

	/* --- Single Artwork --- */
	.artwork-image {
		margin-bottom: var(--space-lg);
	}

	.artwork-image img {
		width: 100%;
	}

	.artwork-meta {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		margin-bottom: var(--space-md);
	}

	.artwork-meta dt {
		font-weight: 600;
		color: var(--color-text-faint);
		text-transform: uppercase;
		font-size: var(--text-xs);
		letter-spacing: 0.05em;
		margin-top: var(--space-xs);
	}

	.artwork-meta dt:first-child {
		margin-top: 0;
	}

	.artwork-meta dd {
		margin-left: 0;
	}

	/* --- Artwork Gallery --- Landscapify: continuous territory */
	.artwork-gallery {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		scroll-snap-type: y proximity;
	}

	.artwork-gallery__item {
		scroll-snap-align: start;
	}

	/* --- Related Artworks --- */
	.related-artworks {
		margin-top: var(--space-2xl);
		padding-top: var(--space-lg);
		border-top: 1px solid var(--color-border);
	}

	.related-artworks__title {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		margin-bottom: var(--space-md);
		color: var(--color-text-muted);
	}

	/* --- Breadcrumb --- */
	.breadcrumb {
		font-size: var(--text-sm);
		color: var(--color-text-faint);
		margin-bottom: var(--space-md);
	}

	.breadcrumb a {
		color: var(--color-text-muted);
	}

	.breadcrumb__separator {
		margin-inline: var(--space-3xs);
	}

	/* --- Pagination --- */
	.pagination {
		margin-top: var(--space-xl);
		padding-top: var(--space-md);
		border-top: 1px solid var(--color-border);
	}

	.pagination .nav-links {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-sm);
	}

	.pagination .page-numbers {
		padding: var(--space-3xs) var(--space-2xs);
		text-decoration: none;
		color: var(--color-text-muted);
	}

	.pagination .page-numbers.current {
		color: var(--color-accent);
	}

	/* --- Comments --- */
	.comments-area {
		margin-top: var(--space-2xl);
		padding-top: var(--space-lg);
		border-top: 1px solid var(--color-border);
	}

	.comments-title {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		margin-bottom: var(--space-md);
	}

	.comment-list {
		list-style: none;
	}

	.comment-body {
		padding: var(--space-sm) 0;
		border-bottom: 1px solid var(--color-border);
	}

	.comment-author {
		font-weight: 600;
		margin-bottom: var(--space-3xs);
	}

	.comment-meta {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		margin-bottom: var(--space-xs);
	}

	.comment-content p {
		margin-bottom: var(--space-xs);
	}

	/* --- Comment Form --- */
	.comment-reply-title {
		margin-bottom: var(--space-md);
	}

	.comment-form p {
		display: flex;
		flex-direction: column;
		margin-bottom: var(--space-sm);
	}

	.comment-form label {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		margin-bottom: var(--space-3xs);
	}

	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea {
		padding: var(--space-2xs) var(--space-xs);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		color: var(--color-text);
	}

	.comment-form textarea {
		min-height: 10rem;
		resize: vertical;
	}

	.comment-form .form-submit {
		margin-top: var(--space-md);
		margin-bottom: 0;
	}

	.comment-form .form-submit input[type="submit"] {
		padding: var(--space-2xs) var(--space-sm);
		background: var(--color-surface-raised);
		border: 1px solid var(--color-border);
		color: var(--color-text);
		cursor: pointer;
		transition: background-color var(--duration-fast) var(--ease-out);
	}

	.comment-form .form-submit input[type="submit"]:hover {
		background: var(--color-accent-dim);
	}

	.comment-form-cookies-consent {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2xs);
	}

	.comment-form-cookies-consent label {
		margin-bottom: 0;
	}

	/* --- Page Header (archives) --- */
	.page-header {
		margin-bottom: var(--space-lg);
		padding-bottom: var(--space-md);
		border-bottom: 1px solid var(--color-border);
	}

	.page-title {
		font-family: var(--font-display);
	}

	.archive-description {
		margin-top: var(--space-xs);
		color: var(--color-text-muted);
	}

	/* --- Footer --- */
	.site-info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-sm);
		max-width: var(--wide-width);
		margin-inline: auto;
	}

	.copyright {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	.copyright a {
		text-decoration: none;
	}

	.footer-menu {
		list-style: none;
		display: flex;
		gap: var(--space-sm);
	}

	.footer-menu a {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		text-decoration: none;
	}

	.footer-menu a:hover {
		color: var(--color-accent);
	}

	/* --- Search Form --- */
	.search-form {
		display: flex;
		gap: var(--space-2xs);
	}

	.search-field {
		flex: 1;
		padding: var(--space-2xs) var(--space-xs);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		color: var(--color-text);
	}

	.search-submit {
		padding: var(--space-2xs) var(--space-sm);
		background: var(--color-surface-raised);
		border: 1px solid var(--color-border);
		color: var(--color-text);
		cursor: pointer;
		transition: background-color var(--duration-fast) var(--ease-out);
	}

	.search-submit:hover {
		background: var(--color-accent-dim);
	}

	/* --- 404 --- */
	.error-404 {
		text-align: center;
		padding-block: var(--space-2xl);
	}

	.error-404 .page-title {
		font-size: var(--text-3xl);
		margin-bottom: var(--space-md);
	}

	/* --- Front Page Links --- signature strip */
	.front-page__links {
		margin-top: var(--space-2xl);
		padding-top: var(--space-lg);
		border-top: 1px solid var(--color-border);
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		line-height: var(--leading-loose);
		color: var(--color-text-muted);
		text-align: center;
	}

	.front-page__links a {
		color: var(--color-text-muted);
	}

	.front-page__links-sep {
		margin-inline: var(--space-3xs);
		color: var(--color-text-faint);
	}

	/* --- No Results --- */
	.no-results {
		padding-block: var(--space-xl);
	}

	/* --- View Transitions --- threshold crossings */
	::view-transition-old(page) {
		animation: asc-fade-out 200ms var(--ease-out);
	}

	::view-transition-new(page) {
		animation: asc-fade-in 300ms var(--ease-out) 100ms;
	}

	@keyframes asc-fade-out {
		to { opacity: 0; }
	}

	@keyframes asc-fade-in {
		from { opacity: 0; }
	}
}


/* ═══════════════════════════════════════════════════════
   LAYER: UTILITIES
   ═══════════════════════════════════════════════════════ */

@layer utilities {
	/* Screen reader only */
	.screen-reader-text {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		border: 0;
	}

	.screen-reader-text:focus {
		clip: auto;
		clip-path: none;
		height: auto;
		width: auto;
		margin: 0;
		overflow: visible;
		position: static;
		white-space: normal;
		background-color: var(--color-ground);
		color: var(--color-text);
		padding: var(--space-sm);
		z-index: 100000;
	}

	/* Skip link */
	.skip-link {
		position: absolute;
		top: -100%;
		left: var(--space-sm);
		z-index: 100000;
		padding: var(--space-2xs) var(--space-sm);
		background: var(--color-accent);
		color: var(--color-text);
		text-decoration: none;
	}

	.skip-link:focus {
		top: var(--space-sm);
	}

	/* WordPress alignment classes */
	.alignleft {
		float: left;
		margin-right: var(--space-md);
		margin-bottom: var(--space-sm);
	}

	.alignright {
		float: right;
		margin-left: var(--space-md);
		margin-bottom: var(--space-sm);
	}

	.aligncenter {
		display: block;
		margin-inline: auto;
	}

	/* WordPress generated gallery */
	.wp-block-gallery {
		gap: var(--space-xs);
	}

	/* WordPress caption */
	.wp-caption-text {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		margin-top: var(--space-2xs);
	}
}